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

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

@@ -19,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786525749,
-    version: '25.0.0',
+    publishDate: 1786626580,
+    version: '25.1.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -50,6 +50,24 @@ class IconBaseDirective {
      * Flips the icon horizontally, vertically, or in both directions.
      */
     flip;
+    /**
+     * Rotates the icon by `45`-degree steps.
+     */
+    set rotate(rotate) {
+        const element = this.element.nativeElement;
+        const currentClass = this.rotateClass(this._rotate);
+        const nextClass = this.rotateClass(rotate);
+        if (currentClass) {
+            this.renderer.removeClass(element, currentClass);
+        }
+        if (nextClass) {
+            this.renderer.addClass(element, nextClass);
+        }
+        this._rotate = rotate;
+    }
+    get rotate() {
+        return this._rotate;
+    }
     /**
      * Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
      */
@@ -86,13 +104,17 @@ class IconBaseDirective {
     }
     _themeColor;
     _size;
+    _rotate;
     constructor(element, renderer) {
         this.element = element;
         this.renderer = renderer;
         validatePackage(packageMetadata);
     }
+    rotateClass(rotate) {
+        return rotate === undefined || rotate === null ? undefined : `k-rotate-${rotate}`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: IconBaseDirective, isStandalone: true, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: IconBaseDirective, isStandalone: true, selector: "[kendoIconBase]", inputs: { flip: "flip", rotate: "rotate", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: IconBaseDirective, decorators: [{
             type: Directive,
@@ -107,6 +129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 args: ['class.k-flip-v']
             }], flip: [{
                 type: Input
+            }], rotate: [{
+                type: Input
             }], themeColor: [{
                 type: Input
             }], size: [{
@@ -203,6 +227,12 @@ class SVGIconComponent extends IconBaseDirective {
     element;
     renderer;
     hostClass = true;
+    get outlineVariantClass() {
+        return this.variant === 'outline';
+    }
+    get duotoneVariantClass() {
+        return this.variant === 'duotone';
+    }
     hostAriaHidden = true;
     /**
      * Sets the `SVGIcon` to render. Supports all [Kendo UI SVG Icons](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list).
@@ -276,7 +306,7 @@ class SVGIconComponent extends IconBaseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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", "class.k-svg-icon-outline": "this.outlineVariantClass", "class.k-svg-icon-duotone": "this.duotoneVariantClass", "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" aria-hidden="true">
@@ -304,6 +334,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-icon']
+            }], outlineVariantClass: [{
+                type: HostBinding,
+                args: ['class.k-svg-icon-outline']
+            }], duotoneVariantClass: [{
+                type: HostBinding,
+                args: ['class.k-svg-icon-duotone']
             }], hostAriaHidden: [{
                 type: HostBinding,
                 args: ['attr.aria-hidden']
@@ -591,7 +627,8 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
             [variant]="iconSettings?.variant"
-          [flip]="iconSettings?.flip"></kendo-svgicon>
+            [flip]="iconSettings?.flip"
+            [rotate]="iconSettings?.rotate"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
             <kendo-icon
@@ -599,7 +636,8 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
               [name]="name"
               [size]="size || iconSettings?.size"
               [themeColor]="iconSettings?.themeColor"
-            [flip]="iconSettings?.flip"></kendo-icon>
+              [flip]="iconSettings?.flip"
+              [rotate]="iconSettings?.rotate"></kendo-icon>
           } @else {
             <span [ngClass]="customClasses"></span>
           }
@@ -619,7 +657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
             [variant]="iconSettings?.variant"
-          [flip]="iconSettings?.flip"></kendo-svgicon>
+            [flip]="iconSettings?.flip"
+            [rotate]="iconSettings?.rotate"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
             <kendo-icon
@@ -627,7 +666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
               [name]="name"
               [size]="size || iconSettings?.size"
               [themeColor]="iconSettings?.themeColor"
-            [flip]="iconSettings?.flip"></kendo-icon>
+              [flip]="iconSettings?.flip"
+              [rotate]="iconSettings?.rotate"></kendo-icon>
           } @else {
             <span [ngClass]="customClasses"></span>
           }

package/index.d.ts

@@ -54,6 +54,13 @@ type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' |
  */
 type IconFlip = 'default' | 'horizontal' | 'vertical' | 'both';
 
+/**
+ * Specifies the `IconRotate` degree.
+ *
+ * Use this type to control icon rotation in `45`-degree steps, where the degree is provided as a number.
+ */
+type IconRotate = 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+
 /**
  * @hidden
  */
@@ -66,6 +73,11 @@ declare abstract class IconBaseDirective {
      * Flips the icon horizontally, vertically, or in both directions.
      */
     flip: IconFlip;
+    /**
+     * Rotates the icon by `45`-degree steps.
+     */
+    set rotate(rotate: IconRotate);
+    get rotate(): IconRotate;
     /**
      * Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
      */
@@ -78,9 +90,11 @@ declare abstract class IconBaseDirective {
     get size(): IconSize;
     _themeColor: IconThemeColor;
     _size: IconSize;
+    _rotate: IconRotate;
     constructor(element: ElementRef, renderer: Renderer2);
+    private rotateClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<IconBaseDirective, "[kendoIconBase]", never, { "flip": { "alias": "flip"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IconBaseDirective, "[kendoIconBase]", never, { "flip": { "alias": "flip"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -141,6 +155,8 @@ declare class SVGIconComponent extends IconBaseDirective implements OnInit {
     element: ElementRef;
     renderer: Renderer2;
     hostClass: boolean;
+    get outlineVariantClass(): boolean;
+    get duotoneVariantClass(): boolean;
     hostAriaHidden: boolean;
     /**
      * Sets the `SVGIcon` to render. Supports all [Kendo UI SVG Icons](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list).
@@ -175,7 +191,7 @@ type IconType = 'font' | 'svg';
 
 /**
  * Represents the icon settings for Kendo UI icons.
- * Use the `IconSettings` interface to set the icon `type`, `themeColor`, `size`, and `flip` direction.
+ * Use the `IconSettings` interface to set the icon `type`, `themeColor`, `size`, `flip`, and `rotate` values.
  *
  * @example
  * ```typescript
@@ -184,6 +200,7 @@ type IconType = 'font' | 'svg';
  *   themeColor: 'primary',
  *   size: 'large',
  *   flip: 'horizontal',
+ *   rotate: 90,
  *   variant: 'outline'
  * };
  * ```
@@ -205,6 +222,10 @@ interface IconSettings {
      * Sets the `flip` direction of the icon.
      */
     flip?: IconFlip;
+    /**
+     * Sets the `rotate` degree of the icon. The `flip` direction takes precedence over the rotation degree when both are applied.
+     */
+    rotate?: IconRotate;
     /**
      * Sets the `variant` of the SVG icon.
      * Requires `@progress/kendo-svg-icons` version `5.0.0` or later.
@@ -508,4 +529,4 @@ declare const KENDO_SVGICON: readonly [typeof SVGIconComponent];
 declare const KENDO_ICONS: readonly [typeof IconComponent, typeof SVGIconComponent];
 
 export { ICON_SETTINGS, IconComponent, IconModule, IconSettingsService, IconWrapperComponent, IconsModule, IconsService, KENDO_ICON, KENDO_ICONS, KENDO_SVGICON, SVGIconComponent, SVGIconModule };
-export type { IconFlip, IconSettings, IconSize, IconThemeColor, IconType, IconVariant };
+export type { IconFlip, IconRotate, IconSettings, IconSize, IconThemeColor, IconType, IconVariant };

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1786525749,
-  "version": "25.0.0",
+  "publishDate": 1786626580,
+  "version": "25.1.0-develop.1",
   "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",
+  "version": "25.1.0-develop.1",
   "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": 1786525749,
+      "publishDate": 1786626580,
       "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",
+    "@progress/kendo-angular-common": "25.1.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "peerDependenciesMeta": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0"
+    "@progress/kendo-angular-schematics": "25.1.0-develop.1"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-icons.mjs",