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

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

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Directive, Injectable, Component, InjectionToken, HostBinding, ViewChild, Optional, isDevMode } from '@angular/core';
+import { afterNextRender, EventEmitter, signal, Output, Input, Directive, Injectable, ChangeDetectionStrategy, Component, InjectionToken, HostBinding, ViewChild, Optional, isDevMode, SkipSelf, Inject } from '@angular/core';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
-import { take, auditTime } from 'rxjs/operators';
 import { Draggable } from '@progress/kendo-draggable';
+import { auditTime } from 'rxjs/operators';
 import { merge, fromEvent, from, Subscription } from 'rxjs';
 import { NgStyle, NgTemplateOutlet } from '@angular/common';
 import { registerLicenseMessage, getLicenseStatus } from '@progress/kendo-licensing';
@@ -159,11 +159,12 @@ const parseArrayClassNames = (value) => {
 /**
  * @hidden
  */
-const setHTMLAttributes = (attributes, renderer, element, zone) => {
-    if (zone) {
-        zone.onStable.pipe(take(1)).subscribe(() => {
+const setHTMLAttributes = (attributes, renderer, element, injector) => {
+    if (injector) {
+        // compatible both for zoned and zoneless apps
+        afterNextRender(() => {
             applyAttributes(attributes, renderer, element);
-        });
+        }, { injector });
     }
     else {
         applyAttributes(attributes, renderer, element);
@@ -242,23 +243,21 @@ const processCssValue = (value) => {
 class DraggableDirective {
     element;
     ngZone;
-    enableDrag = true;
+    set enableDrag(value) {
+        this._enableDrag.set(value);
+        this.toggleDraggable();
+    }
+    get enableDrag() { return this._enableDrag(); }
     kendoPress = new EventEmitter();
     kendoDrag = new EventEmitter();
     kendoRelease = new EventEmitter();
-    draggable;
+    draggable = signal(undefined, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    _enableDrag = signal(true, ...(ngDevMode ? [{ debugName: "_enableDrag" }] : []));
     constructor(element, ngZone) {
         this.element = element;
         this.ngZone = ngZone;
-    }
-    ngOnInit() {
         this.toggleDraggable();
     }
-    ngOnChanges(changes) {
-        if (isChanged('enableDrag', changes)) {
-            this.toggleDraggable();
-        }
-    }
     ngOnDestroy() {
         this.destroyDraggable();
     }
@@ -266,25 +265,25 @@ class DraggableDirective {
         if (isDocumentAvailable()) {
             this.destroyDraggable();
             if (this.enableDrag) {
-                this.draggable = new Draggable({
+                this.draggable.set(new Draggable({
                     drag: (e) => this.kendoDrag.next(e),
                     press: (e) => this.kendoPress.next(e),
                     release: (e) => this.kendoRelease.next(e)
-                });
-                this.ngZone.runOutsideAngular(() => this.draggable?.bindTo(this.element.nativeElement));
+                }));
+                this.ngZone.runOutsideAngular(() => this.draggable()?.bindTo(this.element.nativeElement));
             }
         }
     }
     destroyDraggable() {
-        if (this.draggable) {
-            this.draggable.destroy();
-            this.draggable = undefined;
+        if (this.draggable()) {
+            this.draggable()?.destroy();
+            this.draggable.set(undefined);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DraggableDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { enableDrag: "enableDrag" }, outputs: { kendoPress: "kendoPress", kendoDrag: "kendoDrag", kendoRelease: "kendoRelease" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DraggableDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { enableDrag: "enableDrag" }, outputs: { kendoPress: "kendoPress", kendoDrag: "kendoDrag", kendoRelease: "kendoRelease" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDraggable]',
@@ -451,14 +450,18 @@ class EventsOutsideAngularDirective {
     element;
     ngZone;
     renderer;
-    events = {};
-    scope;
+    set events(value) { this._events.set(value); }
+    get events() { return this._events(); }
+    _scope = signal(undefined, ...(ngDevMode ? [{ debugName: "_scope" }] : []));
+    set scope(value) { this._scope.set(value); }
+    get scope() { return this._scope(); }
     subscriptions;
     constructor(element, ngZone, renderer) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
     }
+    _events = signal({}, ...(ngDevMode ? [{ debugName: "_events" }] : []));
     ngOnInit() {
         if (!this.element?.nativeElement) {
             return;
@@ -481,10 +484,10 @@ class EventsOutsideAngularDirective {
             this.subscriptions = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EventsOutsideAngularDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: EventsOutsideAngularDirective, isStandalone: true, selector: "[kendoEventsOutsideAngular]", inputs: { events: ["kendoEventsOutsideAngular", "events"], scope: "scope" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: EventsOutsideAngularDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: EventsOutsideAngularDirective, isStandalone: true, selector: "[kendoEventsOutsideAngular]", inputs: { events: ["kendoEventsOutsideAngular", "events"], scope: "scope" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EventsOutsideAngularDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: EventsOutsideAngularDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEventsOutsideAngular]',
@@ -500,11 +503,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class ResizeService {
     resizeBatchService;
     resize = new EventEmitter();
-    acceptedSize = false;
-    lastWidth;
-    lastHeight;
-    state = 0 /* ServiceState.Initial */;
-    parentElement;
+    set acceptedSize(value) { this._acceptedSize.set(value); }
+    get acceptedSize() { return this._acceptedSize(); }
+    set lastWidth(value) { this._lastWidth?.set(value); }
+    get lastWidth() { return this._lastWidth?.(); }
+    set lastHeight(value) { this._lastHeight?.set(value); }
+    get lastHeight() { return this._lastHeight?.(); }
+    set state(value) { this._state.set(value); }
+    get state() { return this._state(); }
+    set parentElement(value) { this._parentElement.set(value); }
+    get parentElement() { return this._parentElement(); }
+    _acceptedSize = signal(false, ...(ngDevMode ? [{ debugName: "_acceptedSize" }] : []));
+    _lastWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_lastWidth" }] : []));
+    _lastHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_lastHeight" }] : []));
+    _state = signal(0 /* ServiceState.Initial */, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _parentElement = signal(null, ...(ngDevMode ? [{ debugName: "_parentElement" }] : []));
     constructor(resizeBatchService) {
         this.resizeBatchService = resizeBatchService;
     }
@@ -594,9 +607,15 @@ const SHRINK_CHILD_STYLES = {
 class ResizeCompatService extends ResizeService {
     element;
     ngZone;
-    expand;
-    expandChild;
-    shrink;
+    set expand(value) { this._expand.set(value); }
+    get expand() { return this._expand(); }
+    set expandChild(value) { this._expandChild.set(value); }
+    get expandChild() { return this._expandChild(); }
+    set shrink(value) { this._shrink.set(value); }
+    get shrink() { return this._shrink(); }
+    _expand = signal(null, ...(ngDevMode ? [{ debugName: "_expand" }] : []));
+    _expandChild = signal(null, ...(ngDevMode ? [{ debugName: "_expandChild" }] : []));
+    _shrink = signal(null, ...(ngDevMode ? [{ debugName: "_shrink" }] : []));
     subscription;
     constructor(resizeBatchService, element, ngZone) {
         super(resizeBatchService);
@@ -692,10 +711,12 @@ const HAS_OBSERVER = typeof ResizeObserver !== 'undefined';
 class ResizeObserverService extends ResizeService {
     element;
     ngZone;
-    resizeObserver;
+    set resizeObserver(value) { this._resizeObserver.set(value); }
+    get resizeObserver() { return this._resizeObserver(); }
     static supported() {
         return HAS_OBSERVER;
     }
+    _resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : []));
     constructor(resizeBatchService, element, ngZone) {
         super(resizeBatchService);
         this.element = element;
@@ -727,7 +748,9 @@ class ResizeObserverService extends ResizeService {
  */
 class ResizeBatchService {
     ngZone;
-    scheduled = [];
+    set scheduled(value) { this._scheduled.set(value); }
+    get scheduled() { return this._scheduled(); }
+    _scheduled = signal([], ...(ngDevMode ? [{ debugName: "_scheduled" }] : []));
     resolvedPromise = Promise.resolve(null);
     subscription;
     constructor(ngZone) {
@@ -739,7 +762,9 @@ class ResizeBatchService {
         if (!this.subscription) {
             this.ngZone.runOutsideAngular(() => {
                 this.subscription = from(this.resolvedPromise)
-                    .subscribe(this.flush);
+                    .subscribe(() => {
+                    this.flush();
+                });
             });
         }
     }
@@ -775,10 +800,10 @@ class ResizeBatchService {
         this.scheduled = [];
         this.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeBatchService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeBatchService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeBatchService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeBatchService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeBatchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeBatchService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -801,13 +826,15 @@ class ResizeSensorComponent {
      *
      * Defaults to 10.
      */
-    rateLimit = DEFAULT_RATE_LIMIT;
+    set rateLimit(value) { this._rateLimit.set(value); }
+    get rateLimit() { return this._rateLimit(); }
     /**
      * Fires when the parent DOM element has been resized.
      */
     resize = new EventEmitter();
     subscription;
-    resizeService;
+    set resizeService(value) { this._resizeService.set(value); }
+    get resizeService() { return this._resizeService(); }
     constructor(resizeBatchService, element, ngZone) {
         const serviceType = ResizeObserverService.supported() ? ResizeObserverService : ResizeCompatService;
         this.resizeService = new serviceType(resizeBatchService, element, ngZone);
@@ -820,6 +847,8 @@ class ResizeSensorComponent {
             }
         });
     }
+    _rateLimit = signal(DEFAULT_RATE_LIMIT, ...(ngDevMode ? [{ debugName: "_rateLimit" }] : []));
+    _resizeService = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeService" }] : []));
     ngAfterViewChecked() {
         this.resizeService.checkChanges();
     }
@@ -830,15 +859,16 @@ class ResizeSensorComponent {
     acceptSize(size) {
         this.resizeService.acceptSize(size);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeSensorComponent, deps: [{ token: ResizeBatchService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ResizeSensorComponent, isStandalone: true, selector: "kendo-resize-sensor", inputs: { rateLimit: "rateLimit" }, outputs: { resize: "resize" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeSensorComponent, deps: [{ token: ResizeBatchService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ResizeSensorComponent, isStandalone: true, selector: "kendo-resize-sensor", inputs: { rateLimit: "rateLimit" }, outputs: { resize: "resize" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeSensorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeSensorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-resize-sensor',
                     template: '',
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: ResizeBatchService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { rateLimit: [{
                 type: Input
@@ -1111,19 +1141,59 @@ let bannerPresentOnPage = false;
  * @hidden
  */
 class WatermarkOverlayComponent {
-    licenseMessage;
+    set licenseMessage(value) {
+        this._licenseMessage.set(value);
+    }
+    get licenseMessage() {
+        return this._licenseMessage();
+    }
     banner;
     watermarkStyle = watermarkStyles;
-    isOpen = true;
-    isMobile = false;
-    isNarrow = false;
-    isCloseHovered = false;
-    isCTAHovered = false;
-    bannerMounted = false;
+    set isOpen(value) {
+        this._isOpen.set(value);
+    }
+    get isOpen() {
+        return this._isOpen();
+    }
+    set isMobile(value) {
+        this._isMobile.set(value);
+    }
+    get isMobile() {
+        return this._isMobile();
+    }
+    set isNarrow(value) {
+        this._isNarrow.set(value);
+    }
+    get isNarrow() {
+        return this._isNarrow();
+    }
+    set isCloseHovered(value) {
+        this._isCloseHovered.set(value);
+    }
+    get isCloseHovered() {
+        return this._isCloseHovered();
+    }
+    set isCTAHovered(value) {
+        this._isCTAHovered.set(value);
+    }
+    get isCTAHovered() {
+        return this._isCTAHovered();
+    }
+    set bannerMounted(value) {
+        this._bannerMounted.set(value);
+    }
+    get bannerMounted() {
+        return this._bannerMounted();
+    }
     get messages() {
         return [this.primaryMessage, ...this.extraMessages];
     }
-    extraMessages = [];
+    set extraMessages(value) {
+        this._extraMessages.set(value);
+    }
+    get extraMessages() {
+        return this._extraMessages();
+    }
     get primaryMessage() {
         return (this.licenseMessage || {
             severity: 'ERROR',
@@ -1136,6 +1206,14 @@ class WatermarkOverlayComponent {
         });
     }
     licenseKeyUrl = licenseKeyUrl;
+    _isOpen = signal(true, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isMobile = signal(false, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
+    _isNarrow = signal(false, ...(ngDevMode ? [{ debugName: "_isNarrow" }] : []));
+    _isCloseHovered = signal(false, ...(ngDevMode ? [{ debugName: "_isCloseHovered" }] : []));
+    _isCTAHovered = signal(false, ...(ngDevMode ? [{ debugName: "_isCTAHovered" }] : []));
+    _bannerMounted = signal(false, ...(ngDevMode ? [{ debugName: "_bannerMounted" }] : []));
+    _licenseMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_licenseMessage" }] : []));
+    _extraMessages = signal([], ...(ngDevMode ? [{ debugName: "_extraMessages" }] : []));
     getContent(msg) {
         const iconContent = msg.notificationIcon?.content;
         return {
@@ -1181,7 +1259,7 @@ class WatermarkOverlayComponent {
     subscribeLicenseMessage() {
         this.unsubscribeLicenseMessage = registerLicenseMessage(this.licenseMessage, 'KENDOUIANGULAR', ({ message }) => {
             // Add messages from other suites
-            this.extraMessages.push(message);
+            this._extraMessages.update(msgs => [...msgs, message]);
         }, () => {
             // Show our own message dialog
             this.bannerMounted = true;
@@ -1199,8 +1277,8 @@ class WatermarkOverlayComponent {
     resetPresenceCheck() {
         bannerPresentOnPage = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WatermarkOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WatermarkOverlayComponent, isStandalone: true, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: { licenseMessage: "licenseMessage" }, host: { properties: { "style": "this.watermarkStyle" } }, viewQueries: [{ propertyName: "banner", first: true, predicate: ["banner"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: WatermarkOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: WatermarkOverlayComponent, isStandalone: true, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: { licenseMessage: "licenseMessage" }, host: { properties: { "style": "this.watermarkStyle" } }, viewQueries: [{ propertyName: "banner", first: true, predicate: ["banner"], descendants: true }], ngImport: i0, template: `
         <ng-template #buttonTemplate>
             <button
                 [ngStyle]="{
@@ -1352,9 +1430,9 @@ class WatermarkOverlayComponent {
             }
         </div>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: WatermarkOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: WatermarkOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[kendoWatermarkOverlay], kendo-watermark-overlay',
@@ -1513,6 +1591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     `,
                     standalone: true,
                     imports: [NgStyle, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { licenseMessage: [{
                 type: Input
@@ -1524,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ['style']
             }] } });
 
-const allowed = ['telerik.com', 'progress.com', 'stackblitz.io', 'csb.app'];
+const allowed = ['telerik.com', 'progress.com', 'stackblitz.io', 'csb.app', 'webcontainer.io'];
 /**
  * @hidden
  */
@@ -1575,10 +1654,10 @@ class PrefixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PrefixTemplateDirective, isStandalone: true, selector: "[kendoPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PrefixTemplateDirective, isStandalone: true, selector: "[kendoPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPrefixTemplate]',
@@ -1629,10 +1708,10 @@ class SuffixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SuffixTemplateDirective, isStandalone: true, selector: "[kendoSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: SuffixTemplateDirective, isStandalone: true, selector: "[kendoSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSuffixTemplate]',
@@ -1686,10 +1765,10 @@ class SeparatorComponent {
      * @hidden
      */
     hostClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SeparatorComponent, isStandalone: true, selector: "kendo-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: SeparatorComponent, isStandalone: true, selector: "kendo-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-separator',
@@ -1814,10 +1893,10 @@ class ScrollbarService {
         this.subscription?.unsubscribe();
         this.subscription = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollbarService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollbarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollbarService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollbarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1855,6 +1934,7 @@ class ToggleButtonTabStopDirective {
     hostEl;
     renderer;
     zone;
+    injector;
     hostComponent;
     /**
      * @hidden
@@ -1863,25 +1943,33 @@ class ToggleButtonTabStopDirective {
      *
      * @default true
      */
-    active;
+    set active(value) { this._active.set(value); }
+    /**
+     * @hidden
+     */
+    get active() { return this._active(); }
     /**
      * Defines the value of the `aria-label` attribute of the toggle button when active.
      *
      * @default "toggle popup"
      */
-    toggleButtonAriaLabel = 'toggle popup';
+    set toggleButtonAriaLabel(value) { this._toggleButtonAriaLabel.set(value); }
+    get toggleButtonAriaLabel() { return this._toggleButtonAriaLabel(); }
     button;
     sub = new Subscription();
     focusButton;
     isSplitButton;
     observer;
+    _active = signal(undefined, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    _toggleButtonAriaLabel = signal('toggle popup', ...(ngDevMode ? [{ debugName: "_toggleButtonAriaLabel" }] : []));
     /**
      * @hidden
      */
-    constructor(hostEl, renderer, zone, hostComponent) {
+    constructor(hostEl, renderer, zone, injector, hostComponent) {
         this.hostEl = hostEl;
         this.renderer = renderer;
         this.zone = zone;
+        this.injector = injector;
         this.hostComponent = hostComponent;
         if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
             console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
@@ -2023,9 +2111,9 @@ class ToggleButtonTabStopDirective {
     }
     returnFocusToToggleButton() {
         if (this.isSplitButton) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.focusToggleButton();
-            });
+            }, { injector: this.injector });
         }
         else {
             this.focusToggleButton();
@@ -2065,16 +2153,16 @@ class ToggleButtonTabStopDirective {
             this.observer.observe(mainFocusableElement, mutationConfig);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ToggleButtonTabStopDirective, isStandalone: true, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ToggleButtonTabStopDirective, isStandalone: true, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoToggleButtonTabStop]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: MultiTabStop }], propDecorators: { active: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: MultiTabStop }], propDecorators: { active: [{
                 type: Input,
                 args: ['kendoToggleButtonTabStop']
             }], toggleButtonAriaLabel: [{
@@ -2099,10 +2187,10 @@ class TemplateContextDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TemplateContextDirective, isStandalone: true, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: TemplateContextDirective, isStandalone: true, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TemplateContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[templateContext]',
@@ -2171,11 +2259,92 @@ const KENDO_TEMPLATE_CONTEXT = [
 /**
  * @hidden
  */
-const replaceMessagePlaceholder = (message, name, value) => (message ?? '').replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
+const replaceMessagePlaceholder = (message, name, value) => (message ?? '').replace(new RegExp(`\\[\\[\\s*${name}\\s*]]|{\\s*${name}\\s*}`, 'g'), value);
+
+/**
+ * An injection token that holds the accumulated component ancestry chain (outermost -> innermost).
+ * Kendo components add their identifier to the chain through `provideComponentName`.
+ * Used internally by features that need to forward component context to a service (for example,
+ * per-component icon overrides).
+ *
+ * @hidden
+ */
+const KENDO_COMPONENT_NAME = new InjectionToken('Kendo Component Name');
+/**
+ * Adds `name` to the ancestry chain provided by any parent component, so nested components
+ * automatically accumulate the full ancestry chain without any coordination between packages.
+ *
+ * @hidden
+ */
+function provideComponentName(name) {
+    return {
+        provide: KENDO_COMPONENT_NAME,
+        useFactory: (parentChain) => parentChain ? [...parentChain, name] : [name],
+        deps: [[new Optional(), new SkipSelf(), KENDO_COMPONENT_NAME]]
+    };
+}
+
+/**
+ * Appends a component identifier to the icon component-name ancestry chain for a template subtree.
+ *
+ * Use this directive when a component declares a template at its own root but that template is rendered
+ * inside a different (child) component through `ngTemplateOutlet` — for example, the default Pager
+ * template that the Grid and TreeList declare and the Pager renders. Because an embedded view resolves
+ * element-level DI from its lexical declaration site, the rendering component would otherwise be missing
+ * from the ancestry chain and per-component icon overrides for it would not apply. Wrap the projected
+ * content with this directive to restore the missing segment.
+ *
+ * @hidden
+ */
+class ComponentNameDirective {
+    /**
+     * The component identifier to append to the ancestry chain.
+     */
+    name;
+    parentChain;
+    constructor(parentChain) {
+        this.parentChain = parentChain;
+    }
+    /**
+     * The accumulated ancestry chain including this component identifier.
+     */
+    get chain() {
+        const parent = this.parentChain ?? [];
+        return this.name ? [...parent, this.name] : parent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComponentNameDirective, deps: [{ token: KENDO_COMPONENT_NAME, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ComponentNameDirective, isStandalone: true, selector: "[kendoComponentName]", inputs: { name: ["kendoComponentName", "name"] }, providers: [{
+                provide: KENDO_COMPONENT_NAME,
+                useFactory: (directive) => directive.chain,
+                deps: [ComponentNameDirective]
+            }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComponentNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoComponentName]',
+                    standalone: true,
+                    providers: [{
+                            provide: KENDO_COMPONENT_NAME,
+                            useFactory: (directive) => directive.chain,
+                            deps: [ComponentNameDirective]
+                        }]
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }, {
+                    type: Inject,
+                    args: [KENDO_COMPONENT_NAME]
+                }] }], propDecorators: { name: [{
+                type: Input,
+                args: ['kendoComponentName']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ScrollbarService as BrowserSupportService, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KENDO_WEBMCP_HOST, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
+export { ScrollbarService as BrowserSupportService, ComponentNameDirective, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_COMPONENT_NAME, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KENDO_WEBMCP_HOST, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, provideComponentName, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
 

package/index.d.ts

@@ -3,21 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, NgZone, Renderer2, AfterViewChecked, InjectionToken, SimpleChanges, AfterViewInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { OnDestroy, EventEmitter, ElementRef, NgZone, OnInit, Renderer2, AfterViewChecked, InjectionToken, SimpleChanges, Injector, AfterViewInit, TemplateRef, ViewContainerRef, Provider } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { LicenseMessage, PackageMetadata } from '@progress/kendo-licensing';
 
-declare class DraggableDirective implements OnInit, OnChanges, OnDestroy {
-    private element;
+declare class DraggableDirective implements OnDestroy {
+    private readonly element;
     private ngZone;
-    enableDrag: boolean;
+    set enableDrag(value: boolean);
+    get enableDrag(): boolean;
     kendoPress: EventEmitter<any>;
     kendoDrag: EventEmitter<any>;
     kendoRelease: EventEmitter<any>;
     private draggable?;
+    private _enableDrag;
     constructor(element: ElementRef, ngZone: NgZone);
-    ngOnInit(): void;
-    ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     private toggleDraggable;
     private destroyDraggable;
@@ -64,10 +64,14 @@ declare class EventsOutsideAngularDirective implements OnInit, OnDestroy {
     private element;
     private ngZone;
     private renderer;
-    events: any;
-    scope: any;
+    set events(value: any);
+    get events(): any;
+    private _scope;
+    set scope(value: any);
+    get scope(): any;
     protected subscriptions?: any[] | null;
     constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2);
+    private _events;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EventsOutsideAngularDirective, never>;
@@ -79,7 +83,9 @@ declare class EventsOutsideAngularDirective implements OnInit, OnDestroy {
  */
 declare class ResizeBatchService implements OnDestroy {
     private ngZone;
-    private scheduled;
+    private set scheduled(value);
+    private get scheduled();
+    private _scheduled;
     private resolvedPromise;
     private subscription?;
     constructor(ngZone: NgZone);
@@ -104,14 +110,18 @@ declare class ResizeSensorComponent implements OnDestroy, AfterViewChecked {
      *
      * Defaults to 10.
      */
-    rateLimit: number;
+    set rateLimit(value: number);
+    get rateLimit(): number;
     /**
      * Fires when the parent DOM element has been resized.
      */
     resize: EventEmitter<any>;
     private subscription;
-    private resizeService;
+    private set resizeService(value);
+    private get resizeService();
     constructor(resizeBatchService: ResizeBatchService, element: ElementRef, ngZone: NgZone);
+    private _rateLimit;
+    private _resizeService;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     acceptSize(size?: any): void;
@@ -127,12 +137,22 @@ declare const enum ServiceState {
 declare abstract class ResizeService {
     protected resizeBatchService: ResizeBatchService;
     resize: EventEmitter<any>;
-    acceptedSize: boolean;
-    lastWidth?: number;
-    lastHeight?: number;
-    protected state: ServiceState;
-    protected parentElement: any;
+    set acceptedSize(value: boolean);
+    get acceptedSize(): boolean;
+    set lastWidth(value: number | undefined);
+    get lastWidth(): number | undefined;
+    set lastHeight(value: number | undefined);
+    get lastHeight(): number | undefined;
+    protected set state(value: ServiceState);
+    protected get state(): ServiceState;
+    protected set parentElement(value: any);
+    protected get parentElement(): any;
     protected abstract init(): void;
+    private _acceptedSize;
+    private _lastWidth?;
+    private _lastHeight?;
+    private _state;
+    private _parentElement;
     constructor(resizeBatchService: ResizeBatchService);
     acceptSize(size?: any): void;
     checkChanges(): void;
@@ -145,9 +165,15 @@ declare abstract class ResizeService {
 declare class ResizeCompatService extends ResizeService {
     private element;
     private ngZone;
-    private expand;
-    private expandChild;
-    private shrink;
+    private set expand(value);
+    private get expand();
+    private set expandChild(value);
+    private get expandChild();
+    private set shrink(value);
+    private get shrink();
+    private _expand;
+    private _expandChild;
+    private _shrink;
     private subscription?;
     constructor(resizeBatchService: ResizeBatchService, element: ElementRef | null, ngZone: NgZone);
     checkChanges(): void;
@@ -165,8 +191,10 @@ declare class ResizeCompatService extends ResizeService {
 declare class ResizeObserverService extends ResizeService {
     private element;
     private ngZone;
-    private resizeObserver;
+    private set resizeObserver(value);
+    private get resizeObserver();
     static supported(): boolean;
+    private _resizeObserver;
     constructor(resizeBatchService: ResizeBatchService, element: ElementRef, ngZone: NgZone);
     destroy(): void;
     protected init(): void;
@@ -229,7 +257,7 @@ declare const firefoxMaxHeight = 17895697;
  */
 declare const setHTMLAttributes: (attributes: {
     [key: string]: string;
-}, renderer: Renderer2, element: Element, zone?: NgZone) => void;
+}, renderer: Renderer2, element: Element, injector?: Injector) => void;
 /**
  * @hidden
  */
@@ -403,19 +431,35 @@ declare function setter(field: string): any;
  * @hidden
  */
 declare class WatermarkOverlayComponent implements OnInit, AfterViewInit, OnDestroy {
-    licenseMessage?: LicenseMessage;
+    set licenseMessage(value: LicenseMessage | undefined);
+    get licenseMessage(): LicenseMessage | undefined;
     banner: ElementRef;
     watermarkStyle: string;
-    isOpen: boolean;
-    isMobile: boolean;
-    isNarrow: boolean;
-    isCloseHovered: boolean;
-    isCTAHovered: boolean;
-    bannerMounted: boolean;
+    set isOpen(value: boolean);
+    get isOpen(): boolean;
+    set isMobile(value: boolean);
+    get isMobile(): boolean;
+    set isNarrow(value: boolean);
+    get isNarrow(): boolean;
+    set isCloseHovered(value: boolean);
+    get isCloseHovered(): boolean;
+    set isCTAHovered(value: boolean);
+    get isCTAHovered(): boolean;
+    set bannerMounted(value: boolean);
+    get bannerMounted(): boolean;
     get messages(): LicenseMessage[];
-    extraMessages: LicenseMessage[];
+    set extraMessages(value: LicenseMessage[]);
+    get extraMessages(): LicenseMessage[];
     get primaryMessage(): LicenseMessage;
     licenseKeyUrl: string;
+    private _isOpen;
+    private _isMobile;
+    private _isNarrow;
+    private _isCloseHovered;
+    private _isCTAHovered;
+    private _bannerMounted;
+    private _licenseMessage;
+    private _extraMessages;
     getContent(msg: LicenseMessage): {
         iconSrc?: string;
         title: string;
@@ -630,6 +674,7 @@ declare class ToggleButtonTabStopDirective {
     private hostEl;
     private renderer;
     private zone;
+    private injector;
     private hostComponent;
     /**
      * @hidden
@@ -638,22 +683,29 @@ declare class ToggleButtonTabStopDirective {
      *
      * @default true
      */
-    active: any;
+    set active(value: any);
+    /**
+     * @hidden
+     */
+    get active(): any;
     /**
      * Defines the value of the `aria-label` attribute of the toggle button when active.
      *
      * @default "toggle popup"
      */
-    toggleButtonAriaLabel: string;
+    set toggleButtonAriaLabel(value: string);
+    get toggleButtonAriaLabel(): string;
     private button;
     private sub;
     private focusButton;
     private isSplitButton;
     private observer;
+    private _active;
+    private _toggleButtonAriaLabel;
     /**
      * @hidden
      */
-    constructor(hostEl: ElementRef, renderer: Renderer2, zone: NgZone, hostComponent: MultiTabStop);
+    constructor(hostEl: ElementRef, renderer: Renderer2, zone: NgZone, injector: Injector, hostComponent: MultiTabStop);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -723,5 +775,49 @@ declare const KENDO_TEMPLATE_CONTEXT: readonly [typeof TemplateContextDirective]
  */
 declare const replaceMessagePlaceholder: (message: string, name: string, value: string) => string;
 
-export { ScrollbarService as BrowserSupportService, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KENDO_WEBMCP_HOST, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
+/**
+ * An injection token that holds the accumulated component ancestry chain (outermost -> innermost).
+ * Kendo components add their identifier to the chain through `provideComponentName`.
+ * Used internally by features that need to forward component context to a service (for example,
+ * per-component icon overrides).
+ *
+ * @hidden
+ */
+declare const KENDO_COMPONENT_NAME: InjectionToken<string[]>;
+/**
+ * Adds `name` to the ancestry chain provided by any parent component, so nested components
+ * automatically accumulate the full ancestry chain without any coordination between packages.
+ *
+ * @hidden
+ */
+declare function provideComponentName(name: string): Provider;
+
+/**
+ * Appends a component identifier to the icon component-name ancestry chain for a template subtree.
+ *
+ * Use this directive when a component declares a template at its own root but that template is rendered
+ * inside a different (child) component through `ngTemplateOutlet` — for example, the default Pager
+ * template that the Grid and TreeList declare and the Pager renders. Because an embedded view resolves
+ * element-level DI from its lexical declaration site, the rendering component would otherwise be missing
+ * from the ancestry chain and per-component icon overrides for it would not apply. Wrap the projected
+ * content with this directive to restore the missing segment.
+ *
+ * @hidden
+ */
+declare class ComponentNameDirective {
+    /**
+     * The component identifier to append to the ancestry chain.
+     */
+    name: string;
+    private parentChain;
+    constructor(parentChain: string[]);
+    /**
+     * The accumulated ancestry chain including this component identifier.
+     */
+    get chain(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentNameDirective, [{ optional: true; skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentNameDirective, "[kendoComponentName]", never, { "name": { "alias": "kendoComponentName"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { ScrollbarService as BrowserSupportService, ComponentNameDirective, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_COMPONENT_NAME, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KENDO_WEBMCP_HOST, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, provideComponentName, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
 export type { SeparatorOrientation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "25.0.0-develop.2",
+  "version": "25.0.0-develop.21",
   "description": "Kendo UI for Angular - Utility Package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.21"
   },
   "publishConfig": {
     "access": "public"