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

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;
+    _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();
     }
@@ -282,7 +281,7 @@ class DraggableDirective {
         }
     }
     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 ɵ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: "20.3.25", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
@@ -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;
@@ -801,7 +804,8 @@ 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.
      */
@@ -820,6 +824,7 @@ class ResizeSensorComponent {
             }
         });
     }
+    _rateLimit = signal(DEFAULT_RATE_LIMIT, ...(ngDevMode ? [{ debugName: "_rateLimit" }] : []));
     ngAfterViewChecked() {
         this.resizeService.checkChanges();
     }
@@ -831,14 +836,15 @@ class ResizeSensorComponent {
         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 ɵ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: "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
@@ -1855,6 +1861,7 @@ class ToggleButtonTabStopDirective {
     hostEl;
     renderer;
     zone;
+    injector;
     hostComponent;
     /**
      * @hidden
@@ -1863,25 +1870,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 +2038,9 @@ class ToggleButtonTabStopDirective {
     }
     returnFocusToToggleButton() {
         if (this.isSplitButton) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.focusToggleButton();
-            });
+            }, { injector: this.injector });
         }
         else {
             this.focusToggleButton();
@@ -2065,7 +2080,7 @@ 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 ɵ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: "20.3.25", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
@@ -2074,7 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     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: [{

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 } 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>;
@@ -104,7 +108,8 @@ 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.
      */
@@ -112,6 +117,7 @@ declare class ResizeSensorComponent implements OnDestroy, AfterViewChecked {
     private subscription;
     private resizeService;
     constructor(resizeBatchService: ResizeBatchService, element: ElementRef, ngZone: NgZone);
+    private _rateLimit;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     acceptSize(size?: any): void;
@@ -229,7 +235,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
  */
@@ -630,6 +636,7 @@ declare class ToggleButtonTabStopDirective {
     private hostEl;
     private renderer;
     private zone;
+    private injector;
     private hostComponent;
     /**
      * @hidden
@@ -638,22 +645,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "25.0.0-develop.2",
+  "version": "25.0.0-develop.4",
   "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.4"
   },
   "publishConfig": {
     "access": "public"