@progress/kendo-angular-indicators 25.0.0-develop.1 → 25.0.0-develop.2

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { HostBinding, Component, Input, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { HostBinding, ChangeDetectionStrategy, Component, signal, computed, effect, Input, isDevMode, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -50,7 +50,7 @@ class BadgeContainerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.badge.component'
             }
-        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BadgeContainerComponent, decorators: [{
             type: Component,
@@ -64,7 +64,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         }
                     ],
                     template: `<ng-content></ng-content>`,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -82,8 +83,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783679819,
-    version: '25.0.0-develop.1',
+    publishDate: 1783688539,
+    version: '25.0.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -127,44 +128,101 @@ class BadgeComponent {
      *
      * @default "{ vertical: 'top', horizontal: 'end' }"
      */
-    get align() {
-        return this.badgeAlign;
-    }
     set align(align) {
-        this.badgeAlign = Object.assign(this.badgeAlign, align);
+        this._align.set({ ...this._align(), ...align });
+    }
+    get align() {
+        return this._align();
     }
     /**
      * Specifies the size of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#size)). The default value is set by the Kendo theme.
      */
-    size;
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
     /**
      * Specifies the appearance fill style of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#fill)). The default value is set by the Kendo theme.
      */
-    fill;
+    set fill(value) {
+        this._fill.set(value);
+    }
+    get fill() {
+        return this._fill();
+    }
     /**
      * Specifies the theme color of the Badge.
      * The theme color applies as background and border color, while also amending the text color accordingly
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#theme-color)). The default value is set by the Kendo theme.
      */
-    themeColor;
+    set themeColor(value) {
+        this._themeColor.set(value);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Specifies the roundness of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#rounded)). The default value is set by the Kendo theme.
      */
-    rounded;
+    set rounded(value) {
+        this._rounded.set(value);
+    }
+    get rounded() {
+        return this._rounded();
+    }
     /**
      * Specifies the position of the Badge relative to the edge of the parent container element ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/align-and-position#position)).
      *
      * @default edge
      */
-    position = 'edge';
+    set position(value) {
+        this._position.set(value);
+    }
+    get position() {
+        return this._position();
+    }
     /**
      * Specifies whether to render additional `cutout` border around the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#cutout-border)).
      *
      * @default false
      */
-    cutoutBorder = false;
+    set cutoutBorder(value) {
+        this._cutoutBorder.set(value);
+    }
+    get cutoutBorder() {
+        return this._cutoutBorder();
+    }
+    _align = signal({ vertical: 'top', horizontal: 'end' }, ...(ngDevMode ? [{ debugName: "_align" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _fill = signal(undefined, ...(ngDevMode ? [{ debugName: "_fill" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _position = signal('edge', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _cutoutBorder = signal(false, ...(ngDevMode ? [{ debugName: "_cutoutBorder" }] : []));
     badgeClasses = [];
-    badgeAlign = { vertical: 'top', horizontal: 'end' };
+    computedBadgeClasses = computed(() => [
+        this._themeColor() ? `k-badge-${this._themeColor()}` : '',
+        this._fill() ? `k-badge-${this._fill()}` : '',
+        SIZE_CLASSES$1[this._size()],
+        ROUNDED_CLASSES[this._rounded()],
+        `k-${this._align().vertical}-${this._align().horizontal}`,
+        `k-badge-${this._position()}`
+    ].filter((className) => className), ...(ngDevMode ? [{ debugName: "computedBadgeClasses" }] : []));
+    badgeClassEffect = effect(() => {
+        const newClasses = this.computedBadgeClasses();
+        const element = this.element.nativeElement;
+        this.badgeClasses.forEach((className) => {
+            this.renderer.removeClass(element, className);
+        });
+        newClasses.forEach((className) => {
+            if (className) {
+                this.renderer.addClass(element, className);
+            }
+        });
+        this.badgeClasses = newClasses;
+    }, ...(ngDevMode ? [{ debugName: "badgeClassEffect" }] : []));
     dynamicRTLSubscription;
     rtl = false;
     constructor(element, renderer, localizationService) {
@@ -178,48 +236,28 @@ class BadgeComponent {
         });
     }
     ngAfterViewInit() {
+        // Trigger initial class application if effect hasn't run yet
         if (!this.badgeClasses.length) {
             this.setBadgeClasses();
         }
     }
-    ngOnChanges() {
-        this.setBadgeClasses();
-    }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
     }
-    alignClass() {
-        return `k-${this.badgeAlign.vertical}-${this.badgeAlign.horizontal}`;
-    }
-    positionClass() {
-        return `k-badge-${this.position}`;
-    }
-    sizeClass() {
-        return SIZE_CLASSES$1[this.size];
-    }
-    roundedClass() {
-        return ROUNDED_CLASSES[this.rounded];
-    }
-    themeColorClass() {
-        return this.themeColor ? `k-badge-${this.themeColor}` : '';
-    }
-    fillClass() {
-        return this.fill ? `k-badge-${this.fill}` : '';
-    }
     setBadgeClasses() {
         const element = this.element.nativeElement;
         this.badgeClasses.forEach((className) => {
             this.renderer.removeClass(element, className);
         });
         this.badgeClasses = [
-            this.themeColorClass(),
-            this.fillClass(),
-            this.sizeClass(),
-            this.roundedClass(),
-            this.alignClass(),
-            this.positionClass()
+            this._themeColor() ? `k-badge-${this._themeColor()}` : '',
+            this._fill() ? `k-badge-${this._fill()}` : '',
+            SIZE_CLASSES$1[this._size()],
+            ROUNDED_CLASSES[this._rounded()],
+            `k-${this._align().vertical}-${this._align().horizontal}`,
+            `k-badge-${this._position()}`
         ].filter((className) => className);
         this.badgeClasses.forEach((className) => {
             if (className) {
@@ -234,7 +272,7 @@ class BadgeComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.badge.component'
             }
-        ], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -248,7 +286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         }
                     ],
                     template: `<ng-content></ng-content>`,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -312,38 +351,38 @@ class LoaderComponent {
      * @default pulsing
      */
     set type(type) {
-        this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
+        this.renderer.removeClass(this.loader, TYPE_CLASSES[this._type()]);
         this.renderer.addClass(this.loader, TYPE_CLASSES[type]);
-        this._type = type;
+        this._type.set(type);
     }
     get type() {
-        return this._type;
+        return this._type();
     }
     /**
      * Specifies the theme color of the Loader. The default value is set by the Kendo theme.
      */
     set themeColor(themeColor) {
-        this.renderer.removeClass(this.loader, `k-loader-${this.themeColor}`);
+        this.renderer.removeClass(this.loader, `k-loader-${this._themeColor()}`);
         this.renderer.addClass(this.loader, `k-loader-${themeColor}`);
-        this._themeColor = themeColor;
+        this._themeColor.set(themeColor);
     }
     get themeColor() {
-        return this._themeColor;
+        return this._themeColor();
     }
     /**
      * Specifies the size of the Loader. The default value is set by the Kendo theme.
      */
     set size(size) {
-        this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
+        this.renderer.removeClass(this.loader, SIZE_CLASSES[this._size()]);
         this.renderer.addClass(this.loader, SIZE_CLASSES[size]);
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
-    _type = 'pulsing';
-    _themeColor;
-    _size;
+    _type = signal('pulsing', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
     loader;
     constructor(element, renderer) {
         this.element = element;
@@ -372,7 +411,7 @@ class LoaderComponent {
             <span class="k-loader-segment"></span>
           }
         </div>
-        `, isInline: true });
+        `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -386,7 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </div>
         `,
                     standalone: true,
-                    imports: []
+                    imports: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -458,16 +498,17 @@ class SkeletonComponent {
         if (isDevMode() && validAnimations.indexOf(animation) === -1) {
             throw new Error(skeletonAnimationError(animation));
         }
-        if (this.animation) {
-            this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
+        const currentAnimation = this._animation();
+        if (currentAnimation && ANIMATION_CLASSES[currentAnimation]) {
+            this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[currentAnimation]);
         }
         if (animation) {
             this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
         }
-        this._animation = animation;
+        this._animation.set(animation);
     }
     get animation() {
-        return this._animation;
+        return this._animation();
     }
     /**
      * Specifies the shape of the Skeleton.
@@ -478,12 +519,12 @@ class SkeletonComponent {
         if (isDevMode() && validShapes.indexOf(shape) === -1) {
             throw new Error(skeletonShapeError(shape));
         }
-        this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
+        this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this._shape()]);
         this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
-        this._shape = shape;
+        this._shape.set(shape);
     }
     get shape() {
-        return this._shape;
+        return this._shape();
     }
     /**
      * Specifies the width of the Skeleton component.
@@ -491,8 +532,12 @@ class SkeletonComponent {
      * Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
      */
     set width(width) {
+        this._width.set(width);
         this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
     }
+    get width() {
+        return this._width();
+    }
     /**
      * Specifies the height of the Skeleton component.
      * Required for `circle` and `rectangle` shapes.
@@ -500,10 +545,16 @@ class SkeletonComponent {
      * Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
      */
     set height(height) {
+        this._height.set(height);
         this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
     }
-    _animation = "pulse";
-    _shape = 'text';
+    get height() {
+        return this._height();
+    }
+    _animation = signal("pulse", ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _shape = signal('text', ...(ngDevMode ? [{ debugName: "_shape" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;

package/index.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { OnDestroy, AfterViewInit, OnChanges, ElementRef, Renderer2 } from '@angular/core';
+import { OnDestroy, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 
 declare class BadgeContainerComponent implements OnDestroy {
@@ -121,7 +121,7 @@ type BadgePosition = 'edge' | 'outside' | 'inside';
  * <kendo-badge size="large" themeColor="success">99+</kendo-badge>
  * ```
  */
-declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestroy {
+declare class BadgeComponent implements AfterViewInit, OnDestroy {
     private element;
     private renderer;
     private localizationService;
@@ -136,52 +136,59 @@ declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestroy {
      *
      * @default "{ vertical: 'top', horizontal: 'end' }"
      */
-    get align(): BadgeAlign;
     set align(align: BadgeAlign);
+    get align(): BadgeAlign;
     /**
      * Specifies the size of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#size)). The default value is set by the Kendo theme.
      */
-    size: BadgeSize;
+    set size(value: BadgeSize);
+    get size(): BadgeSize;
     /**
      * Specifies the appearance fill style of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#fill)). The default value is set by the Kendo theme.
      */
-    fill: BadgeFill;
+    set fill(value: BadgeFill);
+    get fill(): BadgeFill;
     /**
      * Specifies the theme color of the Badge.
      * The theme color applies as background and border color, while also amending the text color accordingly
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#theme-color)). The default value is set by the Kendo theme.
      */
-    themeColor: BadgeThemeColor;
+    set themeColor(value: BadgeThemeColor);
+    get themeColor(): BadgeThemeColor;
     /**
      * Specifies the roundness of the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#rounded)). The default value is set by the Kendo theme.
      */
-    rounded: BadgeRounded;
+    set rounded(value: BadgeRounded);
+    get rounded(): BadgeRounded;
     /**
      * Specifies the position of the Badge relative to the edge of the parent container element ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/align-and-position#position)).
      *
      * @default edge
      */
-    position: BadgePosition;
+    set position(value: BadgePosition);
+    get position(): BadgePosition;
     /**
      * Specifies whether to render additional `cutout` border around the Badge ([see example](https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#cutout-border)).
      *
      * @default false
      */
-    cutoutBorder: boolean;
+    set cutoutBorder(value: boolean);
+    get cutoutBorder(): boolean;
+    private _align;
+    private _size;
+    private _fill;
+    private _themeColor;
+    private _rounded;
+    private _position;
+    private _cutoutBorder;
     private badgeClasses;
-    private badgeAlign;
+    private computedBadgeClasses;
+    private badgeClassEffect;
     private dynamicRTLSubscription;
     private rtl;
     constructor(element: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
     ngAfterViewInit(): void;
-    ngOnChanges(): void;
     ngOnDestroy(): void;
-    private alignClass;
-    private positionClass;
-    private sizeClass;
-    private roundedClass;
-    private themeColorClass;
-    private fillClass;
     private setBadgeClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kendo-badge", never, { "align": { "alias": "align"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "position": { "alias": "position"; "required": false; }; "cutoutBorder": { "alias": "cutoutBorder"; "required": false; }; }, {}, never, ["*"], true, never>;
@@ -324,6 +331,7 @@ declare class SkeletonComponent implements AfterViewInit {
      * Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
      */
     set width(width: string | number);
+    get width(): string | number;
     /**
      * Specifies the height of the Skeleton component.
      * Required for `circle` and `rectangle` shapes.
@@ -331,8 +339,11 @@ declare class SkeletonComponent implements AfterViewInit {
      * Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
      */
     set height(height: string | number);
+    get height(): string | number;
     private _animation;
     private _shape;
+    private _width;
+    private _height;
     constructor(renderer: Renderer2, hostElement: ElementRef);
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-indicators",
-  "version": "25.0.0-develop.1",
+  "version": "25.0.0-develop.2",
   "description": "Kendo UI Indicators for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -35,7 +35,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783679819,
+      "publishDate": 1783688539,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -45,14 +45,14 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.1",
-    "@progress/kendo-angular-intl": "25.0.0-develop.1",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.1",
+    "@progress/kendo-angular-common": "25.0.0-develop.2",
+    "@progress/kendo-angular-intl": "25.0.0-develop.2",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.1"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.2"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-indicators.mjs",