@progress/kendo-angular-common 24.2.2 → 25.0.0-develop.12

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 } 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: "19.2.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: "19.2.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.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" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EventsOutsideAngularDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EventsOutsideAngularDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEventsOutsideAngular]',
@@ -500,11 +503,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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: "19.2.25", ngImport: i0, type: ResizeBatchService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizeBatchService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizeBatchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.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.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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizeSensorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.25", ngImport: i0, type: WatermarkOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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.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: `
         <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: "19.2.25", ngImport: i0, type: WatermarkOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.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: "19.2.25", ngImport: i0, type: PrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PrefixTemplateDirective, isStandalone: true, selector: "[kendoPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.25", ngImport: i0, type: SuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: SuffixTemplateDirective, isStandalone: true, selector: "[kendoSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.25", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.25", ngImport: i0, type: ScrollbarService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollbarService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.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.25", 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.25", type: ToggleButtonTabStopDirective, isStandalone: true, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.25", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TemplateContextDirective, isStandalone: true, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TemplateContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[templateContext]',
@@ -2171,7 +2259,7 @@ 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);
 
 /**
  * Generated bundle index. Do not edit.