@progress/kendo-angular-icons 25.0.0-develop.1 → 25.0.0-develop.12

package/fesm2022/progress-kendo-angular-icons.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 { Input, HostBinding, Directive, Component, isDevMode, ChangeDetectionStrategy, Injectable, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
+import { Input, HostBinding, Directive, signal, ChangeDetectionStrategy, Component, computed, isDevMode, Injectable, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
 import { isDocumentAvailable, areObjectsEqual } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1_1 from '@angular/platform-browser';
@@ -19,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783679731,
-    version: '25.0.0-develop.1',
+    publishDate: 1785317742,
+    version: '25.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -132,34 +132,35 @@ class IconComponent extends IconBaseDirective {
      */
     set name(name) {
         if (isDocumentAvailable()) {
-            const newName = name !== this._name;
+            const newName = name !== this._name();
             if (newName) {
                 const element = this.element.nativeElement;
                 this.renderer.removeClass(element, `k-i-${this.name}`);
                 this.renderer.addClass(element, `k-i-${name}`);
             }
         }
-        this._name = name;
+        this._name.set(name);
     }
     get name() {
-        return this._name;
+        return this._name();
     }
-    _name;
+    _name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
     constructor(element, renderer) {
         super(element, renderer);
         this.element = element;
         this.renderer = renderer;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoIcon',
                     selector: 'kendo-icon',
+                    exportAs: 'kendoIcon',
                     template: '',
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -209,19 +210,19 @@ class SVGIconComponent extends IconBaseDirective {
     set icon(icon) {
         const element = this.element.nativeElement;
         const hasDocument = isDocumentAvailable();
-        const newName = icon?.name && icon.name !== this._icon?.name;
-        if (this._icon && this._icon.name && newName && hasDocument) {
-            this.renderer.removeClass(element, `k-svg-i-${this._icon.name}`);
+        const newName = icon?.name && icon.name !== this._icon()?.name;
+        if (this._icon()?.name && newName && hasDocument) {
+            this.renderer.removeClass(element, `k-svg-i-${this._icon().name}`);
         }
-        if (!areSame(icon, this._icon)) {
-            this._icon = icon;
+        if (!areSame(icon, this._icon())) {
+            this._icon.set(icon);
         }
         if (hasDocument && newName) {
-            this.renderer.addClass(element, `k-svg-i-${this._icon.name}`);
+            this.renderer.addClass(element, `k-svg-i-${this._icon().name}`);
         }
     }
     get icon() {
-        return this._icon;
+        return this._icon();
     }
     /**
      * Sets the style variant of the icon.
@@ -229,21 +230,30 @@ class SVGIconComponent extends IconBaseDirective {
      * > Requires `@progress/kendo-svg-icons` v5 or later for the `variants` property to be available on icons.
      */
     set variant(variant) {
-        this._variant = variant;
+        this._variant.set(variant);
     }
     get variant() {
-        return this._variant;
+        return this._variant();
     }
     get content() {
-        const variantContent = this.variant && this.icon?.variants?.[this.variant];
-        const svgContent = variantContent || this.icon.content;
-        return this.domSanitizer.bypassSecurityTrustHtml(svgContent);
+        return this._content();
     }
     get visible() {
-        return this.icon && isDocumentAvailable();
-    }
-    _icon;
-    _variant;
+        return this._visible();
+    }
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _variant = signal(undefined, ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    _content = computed(() => {
+        const icon = this._icon();
+        if (!icon) {
+            return null;
+        }
+        const variant = this._variant();
+        const variantContent = variant && icon.variants?.[variant];
+        const svgContent = variantContent || icon.content;
+        return this.domSanitizer.bypassSecurityTrustHtml(svgContent);
+    }, ...(ngDevMode ? [{ debugName: "_content" }] : []));
+    _visible = computed(() => !!this._icon() && isDocumentAvailable(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
     constructor(domSanitizer, element, renderer) {
         super(element, renderer);
         this.domSanitizer = domSanitizer;
@@ -257,7 +267,7 @@ class SVGIconComponent extends IconBaseDirective {
         if (!isDevMode()) {
             return;
         }
-        if (!this._icon) {
+        if (!this._icon()) {
             throw new Error(`
                 Invalid configuration.
                 The input [icon] is required for the Kendo UI SVG Icon component for Angular.
@@ -472,31 +482,46 @@ class IconWrapperComponent {
      * Sets the name for an existing font icon in a Kendo UI theme to render.
      * Supports all [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list).
      */
-    name;
+    set name(value) { this._name.set(value); }
+    get name() { return this._name(); }
     /**
      * Sets the [SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render.
      */
-    svgIcon;
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
     /**
      * Sets an additional class on the internal Icon component.
      */
-    innerCssClass = '';
+    set innerCssClass(value) { this._innerCssClass.set(value); }
+    get innerCssClass() { return this._innerCssClass(); }
     /**
      * Sets a custom font icon class using the API of the consuming component.
      */
-    customFontClass = '';
+    set customFontClass(value) { this._customFontClass.set(value); }
+    get customFontClass() { return this._customFontClass(); }
     /**
      * Sets the `IconSize` for the icon.
      */
-    size;
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
     get customClasses() {
         const classes = [this.customFontClass, this.innerCssClass, this.customFontIconClass].filter(cl => !!cl).join(' ');
         return classes;
     }
-    iconSettings;
+    _name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _innerCssClass = signal('', ...(ngDevMode ? [{ debugName: "_innerCssClass" }] : []));
+    _customFontClass = signal('', ...(ngDevMode ? [{ debugName: "_customFontClass" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    // iconSettings is set from a subscription — must be a signal so changes trigger CD in zoneless apps
+    _iconSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconSettings" }] : []));
+    get iconSettings() { return this._iconSettings(); }
+    // Resolves the effective SVG icon: prefer service-provided icon, then fall back to the svgIcon input.
+    // Extracted from hasSvgIcon getter to avoid writing to a signal inside a reactive context.
+    _resolvedSvgIcon = computed(() => this.iconsService.getSvgIcon(this._name()) || this._svgIcon(), ...(ngDevMode ? [{ debugName: "_resolvedSvgIcon" }] : []));
+    get resolvedSvgIcon() { return this._resolvedSvgIcon(); }
     get hasSvgIcon() {
-        this.svgIcon = this.iconsService.getSvgIcon(this.name) || this.svgIcon;
-        if (this.svgIcon) {
+        if (this._resolvedSvgIcon()) {
             return true;
         }
         if (isDevMode()) {
@@ -527,7 +552,7 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
         this.iconsService = iconsService;
         this.element = element;
         this.subs = iconsService.changes.subscribe(iconSettings => {
-            this.iconSettings = iconSettings;
+            this._iconSettings.set(iconSettings);
         });
     }
     ngOnDestroy() {
@@ -538,9 +563,10 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
         @if (iconSettings?.type === 'svg' && hasSvgIcon) {
           <kendo-svgicon
             [ngClass]="innerCssClass"
-            [icon]="svgIcon"
+            [icon]="resolvedSvgIcon"
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
+            [variant]="iconSettings?.variant"
           [flip]="iconSettings?.flip"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
@@ -554,20 +580,21 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
             <span [ngClass]="customClasses"></span>
           }
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoIconWrapper',
                     selector: 'kendo-icon-wrapper',
+                    exportAs: 'kendoIconWrapper',
                     template: `
         @if (iconSettings?.type === 'svg' && hasSvgIcon) {
           <kendo-svgicon
             [ngClass]="innerCssClass"
-            [icon]="svgIcon"
+            [icon]="resolvedSvgIcon"
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
+            [variant]="iconSettings?.variant"
           [flip]="iconSettings?.flip"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
@@ -583,6 +610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, IconComponent, SVGIconComponent]
                 }]
         }], ctorParameters: () => [{ type: IconsService }, { type: i0.ElementRef }], propDecorators: { hostClass: [{

package/index.d.ts

@@ -158,6 +158,8 @@ declare class SVGIconComponent extends IconBaseDirective implements OnInit {
     get visible(): boolean;
     private _icon;
     private _variant;
+    private readonly _content;
+    private readonly _visible;
     constructor(domSanitizer: DomSanitizer, element: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     private verifyIconProperty;
@@ -181,7 +183,8 @@ type IconType = 'font' | 'svg';
  *   type: 'svg',
  *   themeColor: 'primary',
  *   size: 'large',
- *   flip: 'horizontal'
+ *   flip: 'horizontal',
+ *   variant: 'outline'
  * };
  * ```
  */
@@ -202,6 +205,11 @@ interface IconSettings {
      * Sets the `flip` direction of the icon.
      */
     flip?: IconFlip;
+    /**
+     * Sets the `variant` of the SVG icon.
+     * Requires `@progress/kendo-svg-icons` version `5.0.0` or later.
+     */
+    variant?: IconVariant;
 }
 
 /**
@@ -308,25 +316,38 @@ declare class IconWrapperComponent implements OnDestroy {
      * Sets the name for an existing font icon in a Kendo UI theme to render.
      * Supports all [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list).
      */
-    name: string;
+    set name(value: string);
+    get name(): string;
     /**
      * Sets the [SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render.
      */
-    svgIcon: SVGIcon;
+    set svgIcon(value: SVGIcon);
+    get svgIcon(): SVGIcon;
     /**
      * Sets an additional class on the internal Icon component.
      */
-    innerCssClass: string;
+    set innerCssClass(value: string);
+    get innerCssClass(): string;
     /**
      * Sets a custom font icon class using the API of the consuming component.
      */
-    customFontClass: string;
+    set customFontClass(value: string);
+    get customFontClass(): string;
     /**
      * Sets the `IconSize` for the icon.
      */
-    size: IconSize;
+    set size(value: IconSize);
+    get size(): IconSize;
     get customClasses(): string;
-    iconSettings: IconSettings;
+    private _name;
+    private _svgIcon;
+    private _innerCssClass;
+    private _customFontClass;
+    private _size;
+    private _iconSettings;
+    get iconSettings(): IconSettings;
+    private readonly _resolvedSvgIcon;
+    get resolvedSvgIcon(): SVGIcon;
     get hasSvgIcon(): boolean;
     get customFontIconClass(): string;
     private subs;

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-icons",
-  "version": "25.0.0-develop.1",
+  "version": "25.0.0-develop.12",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -31,7 +31,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783679731,
+      "publishDate": 1785317742,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -42,7 +42,7 @@
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.1",
+    "@progress/kendo-angular-common": "25.0.0-develop.12",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "peerDependenciesMeta": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.1"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.12"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-icons.mjs",