@progress/kendo-angular-icons 24.0.0-develop.9 → 24.0.0

package/codemods/libs/icons/codemods/v24/themecolor-light-dark.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiInstructions = void 0;
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const fs = tslib_1.__importStar(require("fs"));
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
+exports.aiInstructions = `IconThemeColor no longer accepts 'light' or 'dark' values.
+Replace any use of 'light' or 'dark' with a supported value: 'inherit', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', or 'inverse'.
+
+Static template bindings were removed automatically, which means the component now uses its default themeColor.
+If you want to explicitly set a new value, re-add the attribute with a supported one:
+  Before: (removed by codemod — no themeColor attribute)
+  After:  themeColor="base"
+
+The following patterns could not be migrated automatically and require an additional update:
+
+Dynamic binding:
+  Before: [themeColor]="color"  (where color may be 'light' or 'dark')
+  After:  [themeColor]="color"  (ensure color is a supported value)
+
+Conditional expression — replace both branch values:
+  Before: [themeColor]="isDark ? 'dark' : 'light'"
+  After:  [themeColor]="isDark ? 'inverse' : 'base'"
+
+TypeScript assignment — update the assigned value:
+  Before: this.icon.themeColor = 'light';
+  After:  this.icon.themeColor = 'base';`;
+const REMOVED_VALUES = ['light', 'dark'];
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (!(0, codemods_1.isApiChangeTarget)(filePath)) {
+        return fileInfo.source;
+    }
+    const htmlResult = (0, codemods_1.htmlTransformer)(fileInfo, api, (templateContent) => {
+        let result = (0, codemods_1.attributeConditionalRemoval)(templateContent, 'kendo-icon', 'themeColor', REMOVED_VALUES);
+        result = (0, codemods_1.attributeConditionalRemoval)(result, 'kendo-svgicon', 'themeColor', REMOVED_VALUES);
+        result = (0, codemods_1.attributeConditionalRemoval)(result, 'kendo-svg-icon', 'themeColor', REMOVED_VALUES);
+        return result;
+    });
+    if (filePath.endsWith('.html')) {
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
+        }
+        return fileInfo.source;
+    }
+    return htmlResult || fileInfo.source;
+}

package/common/models/index.d.ts

@@ -7,3 +7,4 @@ export { IconSize } from './size';
 export { IconThemeColor } from './theme-color';
 export * from './icon-type';
 export * from './icon-settings';
+export { IconVariant } from './svg-icon-variant';

package/common/models/svg-icon-variant.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the style variant of an SVG icon.
+ *
+ */
+export type IconVariant = 'solid' | 'outline' | 'duotone';

package/common/models/theme-color.d.ts

@@ -14,9 +14,7 @@
  * - `success`— Applies coloring based on success theme color.
  * - `warning`— Applies coloring based on warning theme color.
  * - `error`— Applies coloring based on error theme color.
- * - `dark`— Applies coloring based on dark theme color.
- * - `light`— Applies coloring based on light theme color.
  * - `inverse`— Applies coloring based on inverse theme color.
  *
  */
-export type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';

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

@@ -19,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777365097,
-    version: '24.0.0-develop.9',
+    publishDate: 1779273279,
+    version: '24.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -174,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
-const areSame = (i1, i2) => i1?.name === i2?.name && i1.content === i2.content && i1.viewBox === i2.viewBox;
+const areSame = (i1, i2) => i1?.name === i2?.name && i1?.content === i2?.content && i1?.viewBox === i2?.viewBox && i1?.variants === i2?.variants;
 /**
  * Represents the [Kendo UI SVG Icon component for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon).
  * Used to display icons from the [Kendo UI SVG Icons](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) collection.
@@ -223,13 +223,27 @@ class SVGIconComponent extends IconBaseDirective {
     get icon() {
         return this._icon;
     }
+    /**
+     * Sets the style variant of the icon.
+     *
+     * > Requires `@progress/kendo-svg-icons` v5 or later for the `variants` property to be available on icons.
+     */
+    set variant(variant) {
+        this._variant = variant;
+    }
+    get variant() {
+        return this._variant;
+    }
     get content() {
-        return this.domSanitizer.bypassSecurityTrustHtml(this.icon.content);
+        const variantContent = this.variant && this.icon?.variants?.[this.variant];
+        const svgContent = variantContent || this.icon.content;
+        return this.domSanitizer.bypassSecurityTrustHtml(svgContent);
     }
     get visible() {
         return this.icon && isDocumentAvailable();
     }
     _icon;
+    _variant;
     constructor(domSanitizer, element, renderer) {
         super(element, renderer);
         this.domSanitizer = domSanitizer;
@@ -252,10 +266,10 @@ class SVGIconComponent extends IconBaseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1_1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon", variant: "variant" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
         @if (visible) {
           <svg [style.pointerEvents]="'none'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-            [attr.viewBox]="icon.viewBox" [innerHTML]="content">
+            [attr.viewBox]="icon.viewBox" [innerHTML]="content" aria-hidden="true">
           </svg>
         }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -267,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     template: `
         @if (visible) {
           <svg [style.pointerEvents]="'none'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-            [attr.viewBox]="icon.viewBox" [innerHTML]="content">
+            [attr.viewBox]="icon.viewBox" [innerHTML]="content" aria-hidden="true">
           </svg>
         }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -285,6 +299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: ['attr.aria-hidden']
             }], icon: [{
                 type: Input
+            }], variant: [{
+                type: Input
             }] } });
 
 /**
@@ -538,7 +554,7 @@ 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"], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,

package/index.d.ts

@@ -8,7 +8,7 @@ export { IconWrapperComponent } from './icon-wrapper/icon-wrapper.component';
 export { IconModule } from './icon.module';
 export { SVGIconModule } from './svg-icon.module';
 export { IconsModule } from './icons.module';
-export { IconFlip, IconSize, IconThemeColor, IconType, IconSettings } from './common/models';
+export { IconFlip, IconSize, IconThemeColor, IconType, IconSettings, IconVariant } from './common/models';
 export { IconsService } from './common/icons.service';
 export { IconSettingsService } from './common/icon-settings.service';
 export { ICON_SETTINGS } from './common/icon-settings';

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1777365097,
-  "version": "24.0.0-develop.9",
+  "publishDate": 1779273279,
+  "version": "24.0.0",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-icons",
-  "version": "24.0.0-develop.9",
+  "version": "24.0.0",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -14,10 +14,24 @@
   ],
   "@progress": {
     "friendlyName": "Icon",
+    "migrations": {
+      "options": {
+        "parser": "tsx",
+        "pattern": "*.{ts,html,css,scss,sass,less}"
+      },
+      "codemods": {
+        "24": [
+          {
+            "description": "IconThemeColor no longer accepts 'light' or 'dark' values.",
+            "file": "codemods/v24/themecolor-light-dark.js"
+          }
+        ]
+      }
+    },
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1777365097,
+      "publishDate": 1779273279,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -27,13 +41,18 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.9",
+    "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
+    "@progress/kendo-angular-common": "24.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
+  "peerDependenciesMeta": {
+    "@progress/kendo-svg-icons": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.9"
+    "@progress/kendo-angular-schematics": "24.0.0"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-icons.mjs",

package/svg-icon/svg-icon.component.d.ts

@@ -6,6 +6,7 @@ import { ElementRef, Renderer2, OnInit } from '@angular/core';
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 import { IconBaseDirective } from '../common/icon-base';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { IconVariant } from '../common/models/svg-icon-variant';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI SVG Icon component for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon).
@@ -40,12 +41,20 @@ export declare class SVGIconComponent extends IconBaseDirective implements OnIni
      */
     set icon(icon: SVGIcon);
     get icon(): SVGIcon;
+    /**
+     * Sets the style variant of the icon.
+     *
+     * > Requires `@progress/kendo-svg-icons` v5 or later for the `variants` property to be available on icons.
+     */
+    set variant(variant: IconVariant);
+    get variant(): IconVariant;
     get content(): SafeHtml;
     get visible(): boolean;
     private _icon;
+    private _variant;
     constructor(domSanitizer: DomSanitizer, element: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     private verifyIconProperty;
     static ɵfac: i0.ɵɵFactoryDeclaration<SVGIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SVGIconComponent, "kendo-svg-icon, kendo-svgicon", ["kendoSVGIcon"], { "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SVGIconComponent, "kendo-svg-icon, kendo-svgicon", ["kendoSVGIcon"], { "icon": { "alias": "icon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, true, never>;
 }