@progress/kendo-angular-buttons 19.2.1-develop.3 → 19.3.0-develop.1

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

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Injectable, isDevMode, EventEmitter, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, NgModule } from '@angular/core';
-import { Subject, Subscription, fromEvent, merge } from 'rxjs';
+import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
 import * as i12 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, TemplateContextDirective, MultiTabStop, guid, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
-import { caretAltDownIcon, xCircleIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -19,6 +19,7 @@ import * as i3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import * as i4 from '@angular/animations';
 import { sequence, query, style, stagger, animate } from '@angular/animations';
+import { KendoSpeechRecognition } from '@progress/kendo-webspeech-common';
 
 /**
  * @hidden
@@ -44,8 +45,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751628023,
-    version: '19.2.1-develop.3',
+    publishDate: 1751896251,
+    version: '19.3.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -140,6 +141,17 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
+/**
+ * @hidden
+ */
+const toggleClass = (className, add, renderer, element) => {
+    if (add) {
+        renderer.addClass(element, className);
+    }
+    else {
+        renderer.removeClass(element, className);
+    }
+};
 /**
  * @hidden
  *
@@ -147,10 +159,10 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
  */
 const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
 
-const DEFAULT_ROUNDED$3 = 'medium';
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_THEME_COLOR$2 = 'base';
-const DEFAULT_FILL_MODE$3 = 'solid';
+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.
  *
@@ -265,7 +277,7 @@ class ButtonComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$2;
+        const newSize = size || DEFAULT_SIZE$3;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -279,7 +291,7 @@ class ButtonComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$3;
+        const newRounded = rounded || DEFAULT_ROUNDED$4;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -293,7 +305,7 @@ class ButtonComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$3;
+        const newFillMode = fillMode || DEFAULT_FILL_MODE$4;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -308,7 +320,7 @@ class ButtonComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$2;
+        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$3;
         this.handleThemeColor(newThemeColor);
         this._themeColor = newThemeColor;
     }
@@ -339,10 +351,10 @@ class ButtonComponent {
     element;
     isDisabled = false;
     caretAltDownIcon = caretAltDownIcon;
-    _size = DEFAULT_SIZE$2;
-    _rounded = DEFAULT_ROUNDED$3;
-    _fillMode = DEFAULT_FILL_MODE$3;
-    _themeColor = DEFAULT_THEME_COLOR$2;
+    _size = DEFAULT_SIZE$3;
+    _rounded = DEFAULT_ROUNDED$4;
+    _fillMode = DEFAULT_FILL_MODE$4;
+    _themeColor = DEFAULT_THEME_COLOR$3;
     _focused = false;
     direction;
     _selected;
@@ -351,7 +363,7 @@ class ButtonComponent {
     _icon;
     _svgIcon;
     set isFocused(isFocused) {
-        this.toggleClass('k-focus', isFocused);
+        toggleClass('k-focus', isFocused, this.renderer, this.element);
         this._focused = isFocused;
     }
     get isFocused() {
@@ -492,7 +504,7 @@ class ButtonComponent {
         const changed = this.selected !== value;
         this.selected = value;
         this.setAttribute('aria-pressed', this.selected.toString());
-        this.toggleClass('k-selected', this.selected);
+        toggleClass('k-selected', this.selected, this.renderer, this.element);
         if (changed && hasObservers(this.selectedChange)) {
             this.ngZone.run(() => {
                 this.selectedChange.emit(value);
@@ -510,14 +522,6 @@ class ButtonComponent {
             this.removeAttribute('aria-pressed');
         }
     }
-    toggleClass(className, add) {
-        if (add) {
-            this.renderer.addClass(this.element, className);
-        }
-        else {
-            this.renderer.removeClass(this.element, className);
-        }
-    }
     _onButtonClick() {
         if (!this.disabled && this.service) {
             this.ngZone.run(() => {
@@ -1022,10 +1026,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.tabindex']
             }] } });
 
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_ROUNDED$2 = 'medium';
-const DEFAULT_THEME_COLOR$1 = 'base';
-const DEFAULT_FILL_MODE$2 = 'solid';
+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.
  *
@@ -1112,7 +1116,7 @@ class ChipComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$1;
+        const newSize = size || DEFAULT_SIZE$2;
         !this.sizeIsSet && (this.sizeIsSet = true);
         this.handleClasses(newSize, 'size');
         this._size = newSize;
@@ -1127,7 +1131,7 @@ class ChipComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$2;
+        const newRounded = rounded || DEFAULT_ROUNDED$3;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -1141,7 +1145,7 @@ class ChipComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$2;
+        const newFillMode = fillMode || DEFAULT_FILL_MODE$3;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -1156,7 +1160,7 @@ class ChipComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$1;
+        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$2;
         this.handleThemeColor(newThemeColor);
         this._themeColor = newThemeColor;
     }
@@ -1501,7 +1505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ],
                     standalone: true,
-                    imports: [NgIf, NgStyle, IconWrapperComponent, NgClass]
+                    imports: [NgIf, NgStyle, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { label: [{
                 type: Input
@@ -2767,7 +2771,7 @@ const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$2
 };
-const DEFAULT_FILL_MODE$1 = 'solid';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2895,7 +2899,7 @@ class DropDownButtonComponent extends ListButton {
         return this._active;
     }
     itemTemplate;
-    _fillMode = DEFAULT_FILL_MODE$1;
+    _fillMode = DEFAULT_FILL_MODE$2;
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -3596,9 +3600,9 @@ const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
-const DEFAULT_ROUNDED$1 = 'full';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_THEME_COLOR = 'primary';
+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.
@@ -3637,7 +3641,7 @@ class FloatingActionButtonComponent {
      * @default "primary"
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR;
+        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$1;
         this.handleClasses(newThemeColor, 'themeColor');
         this._themeColor = newThemeColor;
     }
@@ -3649,7 +3653,7 @@ class FloatingActionButtonComponent {
      * @default "medium"
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE;
+        const newSize = size || DEFAULT_SIZE$1;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -3662,7 +3666,7 @@ class FloatingActionButtonComponent {
      * @default "full"
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$1;
+        const newRounded = rounded || DEFAULT_ROUNDED$2;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -3781,9 +3785,9 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     dialListId = `k-dial-list-${guid()}`;
-    _themeColor = DEFAULT_THEME_COLOR;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED$1;
+    _themeColor = DEFAULT_THEME_COLOR$1;
+    _size = DEFAULT_SIZE$1;
+    _rounded = DEFAULT_ROUNDED$2;
     _disabled = false;
     _align = { horizontal: 'end', vertical: 'bottom' };
     _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
@@ -4588,8 +4592,8 @@ const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS
 };
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -4658,7 +4662,7 @@ class SplitButtonComponent extends ListButton {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED;
+        const newRounded = rounded || DEFAULT_ROUNDED$1;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -4671,7 +4675,7 @@ class SplitButtonComponent extends ListButton {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
+        const newFillMode = fillMode || DEFAULT_FILL_MODE$1;
         this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
     }
     get fillMode() {
@@ -4798,8 +4802,8 @@ class SplitButtonComponent extends ListButton {
     }
     buttonText = '';
     arrowButtonClicked = false;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _rounded = DEFAULT_ROUNDED$1;
+    _fillMode = DEFAULT_FILL_MODE$1;
     _buttonAttributes = null;
     documentMouseUpSub;
     set isFocused(value) {
@@ -5305,6 +5309,509 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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.
+ *
+ * @example
+ * ```html
+ * <button kendoSpeechToTextButton></button>
+ * ```
+ */
+class SpeechToTextButtonComponent {
+    renderer;
+    ngZone;
+    /**
+     * When `true`, disables the SpeechToTextButton and prevents user interaction.
+     *
+     * @default false
+     */
+    set disabled(disabled) {
+        //Required, because in FF focused buttons are not blurred on disabled
+        if (disabled && isDocumentAvailable() && isFirefox(navigator.userAgent)) {
+            this.blur();
+        }
+        this.isDisabled = disabled;
+        this.renderer.setProperty(this.element, 'disabled', disabled);
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    /**
+     * Sets the padding of the SpeechToTextButton.
+     *
+     * @default 'medium'
+     */
+    set size(size) {
+        const newSize = size || DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the SpeechToTextButton.
+     *
+     * @default 'medium'
+     */
+    set rounded(rounded) {
+        const newRounded = rounded || DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the background and border styles of the SpeechToTextButton.
+     *
+     * @default 'solid'
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode || DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Sets a predefined theme color for the SpeechToTextButton.
+     * The theme color applies as a background and border color and adjusts the text color.
+     *
+     * @default 'base'
+     */
+    set themeColor(themeColor) {
+        const newThemeColor = themeColor || DEFAULT_THEME_COLOR;
+        this.handleThemeColor(newThemeColor);
+        this._themeColor = newThemeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    /**
+     * Specifies which speech recognition engine or integration the component should use. Allows the component to operate in different environments or use alternative implementations.
+     */
+    integrationMode = 'webSpeech';
+    /**
+     * Specifies a `BCP 47` language tag (e.g., 'en-US', 'bg-BG') used for speech recognition.
+     *
+     * @default 'en-US'
+     */
+    lang = 'en-US';
+    /**
+     * Specifies whether continuous results are returned for each recognition, or only a single result once recognition stops.
+     *
+     * @default false
+     */
+    continuous = false;
+    /**
+     * Specifies whether interim results should be returned or not. Interim results are results that are not yet final.
+     *
+     * @default false
+     */
+    interimResults = false;
+    /**
+     * Represents the maximum number of alternative transcriptions to return for each result.
+     *
+     * @default 1
+     */
+    maxAlternatives = 1;
+    /**
+     * Fires when the speech recognition service has begun listening to incoming audio.
+     */
+    start = new EventEmitter();
+    /**
+     * Fires when the speech recognition service has disconnected.
+     */
+    end = new EventEmitter();
+    /**
+     * Fires when the speech recognition service returns a result - a word or phrase has been positively recognized.
+     */
+    result = new EventEmitter();
+    /**
+     * Fires when a speech recognition error occurs. The event argument is a string, containing the error message.
+     */
+    error = new EventEmitter();
+    /**
+     * Fires when the user clicks the SpeechToTextButton.
+     */
+    click = new EventEmitter();
+    get iconButtonClass() {
+        return !this.hasText;
+    }
+    get listeningClass() {
+        return this.isListening;
+    }
+    speechToTextButtonClass = true;
+    classButton = true;
+    get classDisabled() {
+        return this.isDisabled;
+    }
+    get getDirection() {
+        return this.direction;
+    }
+    get ariaPressed() {
+        return this.isListening;
+    }
+    /**
+     * @hidden
+     */
+    onFocus() {
+        this.isFocused = true;
+    }
+    /**
+     * @hidden
+     */
+    onBlur() {
+        this.isFocused = false;
+    }
+    /**
+     * Focuses the SpeechToTextButton component.
+     */
+    focus() {
+        if (isDocumentAvailable()) {
+            this.element.focus();
+            this.isFocused = true;
+        }
+    }
+    /**
+     * Removes focus from the SpeechToTextButton component.
+     */
+    blur() {
+        if (isDocumentAvailable()) {
+            this.element.blur();
+            this.isFocused = false;
+        }
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.element, 'click', this.onClick.bind(this)));
+            this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
+                const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
+                if (!this.isDisabled && isBrowserSafari) {
+                    event.preventDefault();
+                    this.element.focus();
+                }
+            }));
+            if (this.integrationMode !== 'webSpeech') {
+                return;
+            }
+            this.createWebSpeech();
+        });
+    }
+    ngOnChanges(changes) {
+        if (isChanged("integrationMode", changes, false)) {
+            if (this.integrationMode === 'webSpeech') {
+                if (!this.speechRecognition) {
+                    this.ngZone.runOutsideAngular(() => {
+                        this.createWebSpeech();
+                    });
+                }
+            }
+            else {
+                this.destroyWebSpeech();
+            }
+        }
+        if (anyChanged(['lang', 'interimResults', 'maxAlternatives', 'continuous'], changes)) {
+            if (this.speechRecognition) {
+                this.speechRecognition.setOptions({
+                    lang: this.lang,
+                    interimResults: this.interimResults,
+                    maxAlternatives: this.maxAlternatives,
+                    continuous: this.continuous
+                });
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const stylingOptions = ['size', 'rounded', 'fillMode'];
+        stylingOptions.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyWebSpeech();
+        this.subs.unsubscribe();
+    }
+    constructor(element, renderer, localization, ngZone) {
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.element = element.nativeElement;
+    }
+    /**
+     * Indicates whether the button is actively listening for incoming audio.
+     */
+    isListening = false;
+    /**
+     * Indicates whether web speech functionality is supported.
+     */
+    get isWebSpeechSupported() {
+        return this.speechRecognition ? this.speechRecognition.isSupported() : false;
+    }
+    set isFocused(isFocused) {
+        toggleClass('k-focus', isFocused, this.renderer, this.element);
+        this._focused = isFocused;
+    }
+    get isFocused() {
+        return this._focused;
+    }
+    /**
+     * @hidden
+     */
+    get hasText() {
+        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
+    }
+    /**
+     * @hidden
+     */
+    onClick() {
+        if (this.isWebSpeechSupported && this.integrationMode === 'webSpeech') {
+            this.ngZone.run(() => {
+                this.isListening ? this.speechRecognition.stop() : this.speechRecognition.start();
+            });
+        }
+        else if (this.integrationMode === 'none') {
+            let asyncFactory = () => of(null);
+            this.ngZone.run(() => {
+                this.isListening ? this.end.emit(fn => asyncFactory = fn) : this.start.emit(fn => asyncFactory = fn);
+                const result = asyncFactory();
+                const observable = this.toObservable(result);
+                observable.pipe(take(1)).subscribe(() => this.isListening = !this.isListening);
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    get buttonSvgIcon() {
+        return this.isListening ? this.stopSvgIcon : this.microphoneSvgIcon;
+    }
+    /**
+     * @hidden
+     */
+    get buttonIcon() {
+        return this.isListening ? 'stop-sm' : 'microphone-outline';
+    }
+    /**
+     * @hidden
+     */
+    setAttribute(attribute, value) {
+        this.renderer.setAttribute(this.element, attribute, value);
+    }
+    /**
+     * @hidden
+     */
+    element;
+    /**
+     * @hidden
+     */
+    isDisabled = false;
+    /**
+     * @hidden
+     */
+    subs = new Subscription();
+    microphoneSvgIcon = microphoneOutlineIcon;
+    stopSvgIcon = stopSmIcon;
+    speechRecognition;
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED;
+    _fillMode = DEFAULT_FILL_MODE;
+    _themeColor = DEFAULT_THEME_COLOR;
+    _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);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleStart() {
+        this.ngZone.run(() => {
+            this.isListening = true;
+            this.start.emit();
+        });
+    }
+    handleEnd() {
+        this.ngZone.run(() => {
+            this.isListening = false;
+            this.end.emit();
+        });
+    }
+    handleResult(event) {
+        const results = event.results;
+        const lastResultIndex = results.length - 1;
+        const lastResult = results[lastResultIndex];
+        const alternatives = [];
+        for (let i = 0; i < lastResult.length; i++) {
+            alternatives.push({
+                transcript: lastResult[i].transcript,
+                confidence: lastResult[i].confidence
+            });
+        }
+        const args = {
+            isFinal: lastResult.isFinal,
+            alternatives: alternatives,
+        };
+        this.ngZone.run(() => {
+            this.result.emit(args);
+        });
+    }
+    handleError(ev) {
+        const errorMessage = ev.error || ev.message || 'Unknown error';
+        this.ngZone.run(() => {
+            this.error.emit({ errorMessage });
+        });
+    }
+    toObservable(input) {
+        return input instanceof Observable ? input : from(input);
+    }
+    handleThemeColor(value, prevFillMode, fillMode) {
+        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);
+            }
+        }
+    }
+    destroyWebSpeech() {
+        if (this.speechRecognition) {
+            this.speechRecognition.stop();
+            this.speechRecognition.destroy();
+            this.speechRecognition = null;
+            this.isListening = false;
+        }
+    }
+    createWebSpeech() {
+        this.speechRecognition = new KendoSpeechRecognition({
+            lang: this.lang,
+            interimResults: this.interimResults,
+            maxAlternatives: this.maxAlternatives,
+            continuous: this.continuous,
+            events: {
+                start: this.handleStart.bind(this),
+                end: this.handleEnd.bind(this),
+                result: this.handleResult.bind(this),
+                error: this.handleError.bind(this)
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpeechToTextButtonComponent, isStandalone: true, selector: "button[kendoSpeechToTextButton]", inputs: { disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", integrationMode: "integrationMode", lang: "lang", continuous: "continuous", interimResults: "interimResults", maxAlternatives: "maxAlternatives" }, outputs: { start: "start", end: "end", result: "result", error: "error", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-listening": "this.listeningClass", "class.k-speech-to-text-button": "this.speechToTextButtonClass", "class.k-button": "this.classButton", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection", "attr.aria-pressed": "this.ariaPressed" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.speechtotextbutton'
+            }
+        ], exportAs: ["kendoSpeechToTextButton"], usesOnChanges: true, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            innerCssClass="k-button-icon"
+            [name]="buttonIcon"
+            [svgIcon]="buttonSvgIcon">
+        </kendo-icon-wrapper>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSpeechToTextButton',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.speechtotextbutton'
+                        }
+                    ],
+                    selector: 'button[kendoSpeechToTextButton]',
+                    template: `
+        <kendo-icon-wrapper
+            innerCssClass="k-button-icon"
+            [name]="buttonIcon"
+            [svgIcon]="buttonSvgIcon">
+        </kendo-icon-wrapper>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `,
+                    standalone: true,
+                    imports: [IconWrapperComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], integrationMode: [{
+                type: Input
+            }], lang: [{
+                type: Input
+            }], continuous: [{
+                type: Input
+            }], interimResults: [{
+                type: Input
+            }], maxAlternatives: [{
+                type: Input
+            }], start: [{
+                type: Output
+            }], end: [{
+                type: Output
+            }], result: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], click: [{
+                type: Output
+            }], iconButtonClass: [{
+                type: HostBinding,
+                args: ['class.k-icon-button']
+            }], listeningClass: [{
+                type: HostBinding,
+                args: ['class.k-listening']
+            }], speechToTextButtonClass: [{
+                type: HostBinding,
+                args: ['class.k-speech-to-text-button']
+            }], classButton: [{
+                type: HostBinding,
+                args: ['class.k-button']
+            }], classDisabled: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], getDirection: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], ariaPressed: [{
+                type: HostBinding,
+                args: ['attr.aria-pressed']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 /**
  * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
  *
@@ -5425,6 +5932,22 @@ const KENDO_SPLITBUTTON = [
     ToggleButtonTabStopDirective,
     ButtonItemTemplateDirective
 ];
+/**
+ * Use the `KENDO_SPEECHTOTEXTBUTTON` utility array to add all SpeechToTextButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SPEECHTOTEXTBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_SPEECHTOTEXTBUTTON = [
+    SpeechToTextButtonComponent
+];
 /**
  * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
  *
@@ -5445,7 +5968,8 @@ const KENDO_BUTTONS = [
     ...KENDO_CHIP,
     ...KENDO_CHIPLIST,
     ...KENDO_FLOATINGACTIONBUTTON,
-    ...KENDO_SPLITBUTTON
+    ...KENDO_SPLITBUTTON,
+    ...KENDO_SPEECHTOTEXTBUTTON
 ];
 
 //IMPORTANT: NgModule export kept for backwards compatibility
@@ -5548,8 +6072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ButtonsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, i12.ToggleButtonTabStopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
@@ -5694,9 +6218,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+// IMPORTANT: NgModule export kept for backwards compatibility.
+/**
+ * Represents the exported package module.
+ *
+ * Required for adding SpeechToTextButton features in NgModule-based Angular applications.
+ *
+ * The package exports:
+ * - `SpeechToTextButtonComponent`&mdash;The SpeechToTextButton component class.
+ */
+class SpeechToTextButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonModule, imports: [SpeechToTextButtonComponent], exports: [SpeechToTextButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonModule, providers: [IconsService], imports: [KENDO_SPEECHTOTEXTBUTTON] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpeechToTextButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [...KENDO_SPEECHTOTEXTBUTTON],
+                    imports: [...KENDO_SPEECHTOTEXTBUTTON],
+                    providers: [IconsService]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent as Button, ButtonComponent, ButtonComponent as ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, KENDO_BUTTON, KENDO_BUTTONGROUP, KENDO_BUTTONS, KENDO_CHIP, KENDO_CHIPLIST, KENDO_DROPDOWNBUTTON, KENDO_FLOATINGACTIONBUTTON, KENDO_SPLITBUTTON, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule };
+export { ButtonComponent as Button, ButtonComponent, ButtonComponent as ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, KENDO_BUTTON, KENDO_BUTTONGROUP, KENDO_BUTTONS, KENDO_CHIP, KENDO_CHIPLIST, KENDO_DROPDOWNBUTTON, KENDO_FLOATINGACTIONBUTTON, KENDO_SPEECHTOTEXTBUTTON, KENDO_SPLITBUTTON, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SpeechToTextButtonComponent, SpeechToTextButtonModule, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule };