@progress/kendo-angular-buttons 23.3.0-develop.10 → 23.3.0-develop.11

package/button/button.component.d.ts

@@ -6,7 +6,7 @@ import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone,
 import { KendoButtonService } from './button.service';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
+import { ButtonFillMode, ButtonIconPosition, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 import { ArrowIconSettings } from '../common/models/arrow-settings';
 import * as i0 from "@angular/core";
 /**
@@ -64,6 +64,12 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
      */
     imageUrl: string;
+    /**
+     * Sets the icon position relative to the button text.
+     * @hidden
+     * @default 'start'
+     */
+    iconPosition: ButtonIconPosition;
     /**
      * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
      */
@@ -200,5 +206,5 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
     private handleClasses;
     private handleThemeColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
 }

package/common/models/icon-position.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Defines the position of the icon relative to the button text.
+ *
+ * @hidden
+ */
+export type ButtonIconPosition = 'start' | 'end';

package/common/models.d.ts

@@ -8,3 +8,4 @@ export * from './models/fillmode';
 export * from './models/rounded';
 export * from './models/styling-classes';
 export * from './models/arrow-settings';
+export * from './models/icon-position';

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

@@ -13,7 +13,7 @@ import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { filter, tap, take } from 'rxjs/operators';
 import * as i3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1774343323,
-    version: '23.3.0-develop.10',
+    publishDate: 1774361676,
+    version: '23.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -239,6 +239,12 @@ class ButtonComponent {
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
      */
     imageUrl;
+    /**
+     * Sets the icon position relative to the button text.
+     * @hidden
+     * @default 'start'
+     */
+    iconPosition = 'start';
     /**
      * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
      */
@@ -547,40 +553,52 @@ class ButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.button'
             }
         ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
-        @if (icon || svgIcon) {
-          <kendo-icon-wrapper
-            innerCssClass="k-button-icon"
-            [name]="icon"
-          [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        }
-        @if (imageUrl) {
-          <span class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-          </span>
+        <ng-template #iconTemplate>
+            @if (icon || svgIcon) {
+                <kendo-icon-wrapper
+                    innerCssClass="k-button-icon"
+                    [name]="icon"
+                    [svgIcon]="svgIcon">
+                </kendo-icon-wrapper>
+            }
+            @if (imageUrl) {
+                <span class="k-button-icon k-icon">
+                    <img [src]="imageUrl" class="k-image" role="presentation" />
+                </span>
+            }
+            @if (iconClass) {
+                <span class="k-button-icon" [ngClass]="iconClass"></span>
+            }
+        </ng-template>
+        @if (iconPosition === 'start') {
+            <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
         }
-        @if (iconClass) {
-          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text">
+            <ng-content></ng-content>
+        </span>
+        @if (iconPosition === 'end') {
+            <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
         }
-        <span class="k-button-text"><ng-content></ng-content></span>
         @if ($any(arrowIcon).iconClass) {
-          <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
+            <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
         }
         @if (arrowIcon && !$any(arrowIcon).iconClass) {
-          <span class="k-button-arrow">
-            <kendo-icon-wrapper
-              [name]="$any(arrowIcon).icon || 'caret-alt-down'"
-            [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
-          </span>
+            <span class="k-button-arrow">
+                <kendo-icon-wrapper
+                    [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+                    [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
+                </kendo-icon-wrapper>
+            </span>
         }
 
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -595,35 +613,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ],
                     selector: 'button[kendoButton]',
                     template: `
-        @if (icon || svgIcon) {
-          <kendo-icon-wrapper
-            innerCssClass="k-button-icon"
-            [name]="icon"
-          [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        }
-        @if (imageUrl) {
-          <span class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-          </span>
+        <ng-template #iconTemplate>
+            @if (icon || svgIcon) {
+                <kendo-icon-wrapper
+                    innerCssClass="k-button-icon"
+                    [name]="icon"
+                    [svgIcon]="svgIcon">
+                </kendo-icon-wrapper>
+            }
+            @if (imageUrl) {
+                <span class="k-button-icon k-icon">
+                    <img [src]="imageUrl" class="k-image" role="presentation" />
+                </span>
+            }
+            @if (iconClass) {
+                <span class="k-button-icon" [ngClass]="iconClass"></span>
+            }
+        </ng-template>
+        @if (iconPosition === 'start') {
+            <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
         }
-        @if (iconClass) {
-          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text">
+            <ng-content></ng-content>
+        </span>
+        @if (iconPosition === 'end') {
+            <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
         }
-        <span class="k-button-text"><ng-content></ng-content></span>
         @if ($any(arrowIcon).iconClass) {
-          <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
+            <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
         }
         @if (arrowIcon && !$any(arrowIcon).iconClass) {
-          <span class="k-button-arrow">
-            <kendo-icon-wrapper
-              [name]="$any(arrowIcon).icon || 'caret-alt-down'"
-            [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
-          </span>
+            <span class="k-button-arrow">
+                <kendo-icon-wrapper
+                    [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+                    [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
+                </kendo-icon-wrapper>
+            </span>
         }
 
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KendoButtonService, decorators: [{
                     type: Optional
@@ -639,6 +669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], imageUrl: [{
                 type: Input
+            }], iconPosition: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], icon: [{
@@ -3142,7 +3174,7 @@ class DropDownButtonComponent extends ListButton {
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
@@ -5209,7 +5241,7 @@ class SplitButtonComponent extends ListButton {
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,

package/index.d.ts

@@ -47,7 +47,7 @@ export { SpeechToTextButtonModule } from './speechtotextbutton/speechtotextbutto
 export { SmartPasteButtonComponent } from './smartpastebutton/smartpastebutton.component';
 export { SmartPasteButtonModule } from './smartpastebutton/smartpastebutton.module';
 export { SmartPasteFormField, SmartPasteType, SmartPasteAIRequestData, SmartPasteAIResponse, SmartPasteAIRequestOptions, SmartPasteRequestStartEvent, SmartPasteRequestEndEvent } from './smartpastebutton/models';
-export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings } from './common/models';
+export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings, ButtonIconPosition } from './common/models';
 export { FocusableDirective } from './focusable/focusable.directive';
 export { PreventableEvent } from './preventable-event';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1774343323,
-  "version": "23.3.0-develop.10",
+  "publishDate": 1774361676,
+  "version": "23.3.0-develop.11",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "23.3.0-develop.10",
+  "version": "23.3.0-develop.11",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -21,7 +21,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1774343323,
+      "publishDate": 1774361676,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -31,15 +31,15 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-common": "23.3.0-develop.10",
-    "@progress/kendo-angular-l10n": "23.3.0-develop.10",
-    "@progress/kendo-angular-popup": "23.3.0-develop.10",
-    "@progress/kendo-angular-icons": "23.3.0-develop.10",
+    "@progress/kendo-angular-common": "23.3.0-develop.11",
+    "@progress/kendo-angular-l10n": "23.3.0-develop.11",
+    "@progress/kendo-angular-popup": "23.3.0-develop.11",
+    "@progress/kendo-angular-icons": "23.3.0-develop.11",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.3.0-develop.10",
+    "@progress/kendo-angular-schematics": "23.3.0-develop.11",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-webspeech-common": "1.0.1",
     "@progress/kendo-smartpaste-common": "1.0.0"