@progress/kendo-angular-buttons 22.1.0-develop.18 → 22.1.0-develop.19

package/button/button.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
+import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone, OnInit, OnChanges } from '@angular/core';
 import { KendoButtonService } from './button.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
@@ -20,7 +20,7 @@ import * as i0 from "@angular/core";
  * <button kendoButton [icon]="'save'" [themeColor]="'primary'">Save</button>
  * ```
  */
-export declare class ButtonComponent implements OnDestroy, AfterViewInit {
+export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
     renderer: Renderer2;
     private service;
     private ngZone;
@@ -176,7 +176,6 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     constructor(element: ElementRef, renderer: Renderer2, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(change: SimpleChanges): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
      * @hidden

package/common/models/fillmode.d.ts

@@ -5,8 +5,8 @@
 /**
  * Specifies the possible `fillMode` options for the buttons.
  */
-export type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear' | 'none';
+export type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear';
 /**
  * Specifies the possible `fillMode` options for the Chip.
  */
-export type ChipFillMode = 'solid' | 'outline' | 'none';
+export type ChipFillMode = 'solid' | 'outline';

package/common/models/size.d.ts

@@ -5,8 +5,8 @@
 /**
  * Specifies the possible sizes for the buttons.
  */
-export type ButtonSize = 'small' | 'medium' | 'large' | 'none';
+export type ButtonSize = 'small' | 'medium' | 'large';
 /**
  * Specifies the possible sizes for the Chip.
  */
-export type ChipSize = 'small' | 'medium' | 'large' | 'none';
+export type ChipSize = 'small' | 'medium' | 'large';

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

@@ -17,9 +17,8 @@
  * * `dark`—Applies the `dark` theme color.
  * * `light`—Applies the `light` theme color.
  * * `inverse`—Applies the `inverse` theme color.
- * * `none`—Removes the theme color.
  */
-export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'none';
+export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
 /**
  * Specifies the possible theme colors for the Chip.
  *
@@ -29,6 +28,5 @@ export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | '
  * * `success`—Applies the `success` theme color.
  * * `warning`—Applies the `warning` theme color.
  * * `error`—Applies the `error` theme color.
- * * `none`—Removes the theme color.
  */
-export type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error' | 'none';
+export type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error';

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

@@ -46,7 +46,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.18',
+    version: '22.1.0-develop.19',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -103,25 +103,37 @@ const ROUNDNESS = {
 /**
  * @hidden
  *
- * Returns the styling classes to be added and removed
+ * Returns the styling classes to be added and removed.
  */
 const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
     switch (stylingOption) {
-        case 'size':
+        case 'size': {
             return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+                toRemove: previousValue ? `k-${componentType}-${SIZES[previousValue]}` : null,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
             };
-        case 'rounded':
+        }
+        case 'rounded': {
+            let roundedClassToAdd = null;
+            if (newValue) {
+                if (newValue !== 'none') {
+                    roundedClassToAdd = `k-rounded-${ROUNDNESS[newValue]}`;
+                }
+                else {
+                    roundedClassToAdd = 'k-rounded-none';
+                }
+            }
             return {
-                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
+                toRemove: previousValue ? `k-rounded-${ROUNDNESS[previousValue]}` : null,
+                toAdd: roundedClassToAdd || null
             };
-        case 'fillMode':
+        }
+        case 'fillMode': {
             return {
-                toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
+                toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
             };
+        }
         default:
             break;
     }
@@ -131,10 +143,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  *
  * Returns the themeColor classes to be added and removed
  */
-const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
+const getThemeColorClasses = (componentType, previousValue, newValue) => {
     return {
-        toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
-        toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
+        toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+        toAdd: newValue ? `k-${componentType}-${newValue}` : null
     };
 };
 /**
@@ -155,10 +167,6 @@ const toggleClass = (className, add, renderer, element) => {
  */
 const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
 
-const DEFAULT_ROUNDED$4 = 'medium';
-const DEFAULT_SIZE$3 = 'medium';
-const DEFAULT_THEME_COLOR$3 = 'base';
-const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  *
@@ -273,9 +281,8 @@ class ButtonComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$3;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -287,9 +294,8 @@ class ButtonComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$4;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -301,9 +307,8 @@ class ButtonComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$4;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -316,9 +321,8 @@ class ButtonComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$3;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -347,10 +351,10 @@ class ButtonComponent {
     element;
     isDisabled = false;
     caretAltDownIcon = caretAltDownIcon;
-    _size = DEFAULT_SIZE$3;
-    _rounded = DEFAULT_ROUNDED$4;
-    _fillMode = DEFAULT_FILL_MODE$4;
-    _themeColor = DEFAULT_THEME_COLOR$3;
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     _focused = false;
     direction;
     _selected;
@@ -446,12 +450,6 @@ class ButtonComponent {
             this.toggleAriaPressed(this.toggleable);
         }
     }
-    ngAfterViewInit() {
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -532,7 +530,7 @@ class ButtonComponent {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -541,16 +539,14 @@ class ButtonComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
-        this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        const themeColorClass = getThemeColorClasses('button', this.themeColor, value);
+        if (themeColorClass.toRemove) {
+            this.renderer.removeClass(elem, themeColorClass.toRemove);
+        }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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 });
@@ -1041,10 +1037,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['attr.tabindex']
             }] } });
 
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_ROUNDED$3 = 'medium';
-const DEFAULT_THEME_COLOR$2 = 'base';
-const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Displays a Chip that represents an input, attribute, or action.
  *
@@ -1131,12 +1123,9 @@ class ChipComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$2;
-        if (!this.sizeIsSet) {
-            this.sizeIsSet = true;
-        }
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        !this.sizeIsSet && (this.sizeIsSet = true);
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -1148,9 +1137,8 @@ class ChipComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$3;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -1162,9 +1150,8 @@ class ChipComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$3;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -1177,9 +1164,8 @@ class ChipComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$2;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -1228,10 +1214,10 @@ class ChipComponent {
      * @hidden
      */
     sizeIsSet = false;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
-    _themeColor = 'base';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     focused = false;
     subs = new Subscription();
     constructor(element, renderer, ngZone, localizationService) {
@@ -1260,10 +1246,6 @@ class ChipComponent {
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
         this.attachElementEventHandlers(chip);
     }
     /**
@@ -1352,7 +1334,7 @@ class ChipComponent {
         const elem = this.element.nativeElement;
         const classes = getStylingClasses('chip', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -1361,16 +1343,14 @@ class ChipComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element.nativeElement;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
-        this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        const themeColorClass = getThemeColorClasses('chip', this.themeColor, value);
+        if (themeColorClass.toRemove) {
+            this.renderer.removeClass(elem, themeColorClass.toRemove);
+        }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     keyDownHandler(e) {
@@ -1651,10 +1631,9 @@ class ChipListComponent {
      * @default 'medium'
      */
     set size(size) {
-        const sizeValue = size || 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this.chips?.forEach(chip => this.setChipSize(chip, sizeValue));
-        this._size = sizeValue;
+        this.handleClasses(size, 'size');
+        this.chips?.forEach(chip => this.setChipSize(chip, size));
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -1679,7 +1658,7 @@ class ChipListComponent {
      */
     role = 'listbox';
     dynamicRTLSubscription;
-    _size = 'medium';
+    _size = undefined;
     subs = new Subscription();
     _navigable = true;
     /**
@@ -2843,7 +2822,6 @@ const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$2
 };
-const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2912,12 +2890,12 @@ class DropDownButtonComponent extends ListButton {
      * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
      * @default 'medium'
      */
-    size = 'medium';
+    size = undefined;
     /**
      * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
      * @default 'medium'
      */
-    rounded = 'medium';
+    rounded = undefined;
     /**
      * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
      * @default 'solid'
@@ -2932,7 +2910,7 @@ class DropDownButtonComponent extends ListButton {
      * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
      * @default 'base'
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Sets attributes for the main button.
      */
@@ -2971,7 +2949,7 @@ class DropDownButtonComponent extends ListButton {
         return this._active;
     }
     itemTemplate;
-    _fillMode = DEFAULT_FILL_MODE$2;
+    _fillMode = undefined;
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -3144,7 +3122,7 @@ class DropDownButtonComponent extends ListButton {
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
@@ -3206,7 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
@@ -3679,15 +3657,13 @@ const ROUNDED_CLASSES = {
     small: 'k-rounded-sm',
     medium: 'k-rounded-md',
     large: 'k-rounded-lg',
-    full: 'k-rounded-full'
+    full: 'k-rounded-full',
+    none: 'k-rounded-none'
 };
-const FILLMODE_CLASS = 'k-fab-solid';
+const THEME_COLOR_PREFIX = 'k-fab';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
-const DEFAULT_ROUNDED$2 = 'full';
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_THEME_COLOR$1 = 'primary';
 /**
  * Represents the Kendo UI FloatingActionButton component for Angular.
  * Use it to represent the primary or most common action in an application.
@@ -3726,9 +3702,8 @@ class FloatingActionButtonComponent {
      * @default "primary"
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$1;
-        this.handleClasses(newThemeColor, 'themeColor');
-        this._themeColor = newThemeColor;
+        this.handleClasses(themeColor, 'themeColor');
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -3738,9 +3713,8 @@ class FloatingActionButtonComponent {
      * @default "medium"
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$1;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -3751,9 +3725,8 @@ class FloatingActionButtonComponent {
      * @default "full"
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$2;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -3870,9 +3843,9 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     dialListId = `k-dial-list-${guid()}`;
-    _themeColor = DEFAULT_THEME_COLOR$1;
-    _size = DEFAULT_SIZE$1;
-    _rounded = DEFAULT_ROUNDED$2;
+    _themeColor = undefined;
+    _size = undefined;
+    _rounded = undefined;
     _disabled = false;
     _align = { horizontal: 'end', vertical: 'bottom' };
     _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
@@ -4129,12 +4102,12 @@ class FloatingActionButtonComponent {
         if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
             const classesToRemove = {
-                themeColor: `${FILLMODE_CLASS}-${this.themeColor}`,
+                themeColor: `${THEME_COLOR_PREFIX}-${this.themeColor}`,
                 size: SIZE_CLASSES[this.size],
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
+                themeColor: inputValue ? `${THEME_COLOR_PREFIX}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
@@ -4375,20 +4348,20 @@ class FloatingActionButtonComponent {
             }
         ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
         <button
-          #button
-          [attr.id]="id"
-          [tabIndex]="componentTabIndex"
-          type="button"
-          class="k-fab k-fab-solid"
-          [class.k-disabled]="disabled"
-          [ngClass]="buttonClass"
-          [disabled]="disabled"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-haspopup]="ariaHasPopup"
-          [attr.aria-controls]="ariaControls"
-          (focus)="focusHandler()"
-          (blur)="blurHandler($event)"
+            #button
+            [attr.id]="id"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
+            (focus)="focusHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
                 click: clickHandler,
@@ -4453,20 +4426,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     ],
                     template: `
         <button
-          #button
-          [attr.id]="id"
-          [tabIndex]="componentTabIndex"
-          type="button"
-          class="k-fab k-fab-solid"
-          [class.k-disabled]="disabled"
-          [ngClass]="buttonClass"
-          [disabled]="disabled"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-haspopup]="ariaHasPopup"
-          [attr.aria-controls]="ariaControls"
-          (focus)="focusHandler()"
-          (blur)="blurHandler($event)"
+            #button
+            [attr.id]="id"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
+            (focus)="focusHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
                 click: clickHandler,
@@ -4699,8 +4672,6 @@ const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS
 };
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -4762,16 +4733,15 @@ class SplitButtonComponent extends ListButton {
      *
      * @default 'medium'
      */
-    size = 'medium';
+    size = undefined;
     /**
      * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$1;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -4782,8 +4752,7 @@ class SplitButtonComponent extends ListButton {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$1;
-        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -4793,7 +4762,7 @@ class SplitButtonComponent extends ListButton {
      *
      * @default 'base'
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
      */
@@ -4909,8 +4878,8 @@ class SplitButtonComponent extends ListButton {
     }
     buttonText = '';
     arrowButtonClicked = false;
-    _rounded = DEFAULT_ROUNDED$1;
-    _fillMode = DEFAULT_FILL_MODE$1;
+    _rounded = undefined;
+    _fillMode = undefined;
     _buttonAttributes = null;
     documentMouseUpSub;
     set isFocused(value) {
@@ -5242,16 +5211,15 @@ class SplitButtonComponent extends ListButton {
           ></button>
           <ng-template #popupTemplate>
             <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+            >
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
@@ -5334,16 +5302,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           ></button>
           <ng-template #popupTemplate>
             <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+            >
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
@@ -5426,10 +5393,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['keyup', ['$event']]
             }] } });
 
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_THEME_COLOR = 'base';
-const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI SpeechToTextButton component for Angular.
  *
@@ -5463,9 +5426,8 @@ class SpeechToTextButtonComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -5476,9 +5438,8 @@ class SpeechToTextButtonComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -5489,9 +5450,8 @@ class SpeechToTextButtonComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -5503,9 +5463,8 @@ class SpeechToTextButtonComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -5645,12 +5604,6 @@ class SpeechToTextButtonComponent {
             }
         }
     }
-    ngAfterViewInit() {
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-    }
     ngOnDestroy() {
         this.destroyWebSpeech();
         this.subs.unsubscribe();
@@ -5748,17 +5701,17 @@ class SpeechToTextButtonComponent {
     microphoneSvgIcon = microphoneOutlineIcon;
     stopSvgIcon = stopSmIcon;
     speechRecognition;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
-    _themeColor = DEFAULT_THEME_COLOR;
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     _focused = false;
     direction;
     handleClasses(value, input) {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -5807,16 +5760,12 @@ class SpeechToTextButtonComponent {
     toObservable(input) {
         return input instanceof Observable ? input : from(input);
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
+        const themeColorClass = getThemeColorClasses('button', this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     destroyWebSpeech() {

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1770112284,
-  "version": "22.1.0-develop.18",
+  "publishDate": 1770219648,
+  "version": "22.1.0-develop.19",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "22.1.0-develop.18",
+  "version": "22.1.0-develop.19",
   "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": 1770112284,
+      "publishDate": 1770219648,
       "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": "22.1.0-develop.18",
-    "@progress/kendo-angular-l10n": "22.1.0-develop.18",
-    "@progress/kendo-angular-popup": "22.1.0-develop.18",
-    "@progress/kendo-angular-icons": "22.1.0-develop.18",
+    "@progress/kendo-angular-common": "22.1.0-develop.19",
+    "@progress/kendo-angular-l10n": "22.1.0-develop.19",
+    "@progress/kendo-angular-popup": "22.1.0-develop.19",
+    "@progress/kendo-angular-icons": "22.1.0-develop.19",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "22.1.0-develop.18",
+    "@progress/kendo-angular-schematics": "22.1.0-develop.19",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-webspeech-common": "1.0.1"
   },

package/speechtotextbutton/speechtotextbutton.component.d.ts

@@ -131,7 +131,6 @@ export declare class SpeechToTextButtonComponent implements OnInit, OnDestroy {
     blur(): void;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     constructor(element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
     /**

package/util.d.ts

@@ -27,7 +27,7 @@ export declare const SIZES: {
 /**
  * @hidden
  *
- * Returns the styling classes to be added and removed
+ * Returns the styling classes to be added and removed.
  */
 export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => ButtonStylingClasses;
 /**
@@ -35,7 +35,7 @@ export declare const getStylingClasses: (componentType: any, stylingOption: stri
  *
  * Returns the themeColor classes to be added and removed
  */
-export declare const getThemeColorClasses: (componentType: any, prevFillMode: any, fillMode: any, previousValue: any, newValue: any) => ButtonStylingClasses;
+export declare const getThemeColorClasses: (componentType: any, previousValue: any, newValue: any) => ButtonStylingClasses;
 /**
  * @hidden
  */