@progress/kendo-angular-buttons 22.1.0-develop.9 → 23.0.0-develop.10

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

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, isDevMode, EventEmitter, Input, HostListener, HostBinding, Output, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, NgModule } from '@angular/core';
+import { Injectable, isDevMode, EventEmitter, Input, HostListener, HostBinding, Output, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge, of, from, Observable } from 'rxjs';
 import * as i12 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
-import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon, pasteSparkleIcon } 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';
@@ -20,6 +20,10 @@ 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';
+import * as i2 from '@angular/common/http';
+import { HttpHeaders, HttpRequest, HttpEventType } from '@angular/common/http';
+import * as i3$1 from '@angular/forms';
+import { KendoSmartPaste } from '@progress/kendo-smartpaste-common';
 
 /**
  * @hidden
@@ -46,7 +50,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.9',
+    version: '23.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -103,25 +107,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 +147,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 +171,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.
  *
@@ -268,42 +280,33 @@ class ButtonComponent {
     }
     /**
      * Sets the padding of the Button.
-     * See [Button Appearance]({% slug appearance_button %}#size).
-     *
-     * @default 'medium'
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#size). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
      * Sets the border radius of the Button.
-     * See [Button Appearance](slug:appearance_button#roundness).
-     *
-     * @default 'medium'
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#roundness). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
      * Sets the background and border styles of the Button.
-     * See [Button Appearance](slug:appearance_button#fill-mode).
-     *
-     * @default 'solid'
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#fill-mode). The default value is set by the Kendo theme.
      */
     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;
@@ -311,14 +314,11 @@ class ButtonComponent {
     /**
      * Sets a predefined theme color for the Button.
      * The theme color applies as a background and border color and adjusts the text color.
-     * See [Button Appearance](slug:appearance_button#theme-colors).
-     *
-     * @default 'base'
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#theme-colors). The default value is set by the Kendo theme.
      */
     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 +347,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 +446,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 +526,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 +535,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 });
@@ -586,7 +578,7 @@ class ButtonComponent {
             [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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
@@ -627,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
           </span>
         }
-        
+
         `,
                     standalone: true,
                     imports: [IconWrapperComponent, NgClass]
@@ -1041,10 +1033,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.
  *
@@ -1068,8 +1056,8 @@ class ChipComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
-     * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     * Defines an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render inside the Chip using
+     * a [`KendoSVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) component.
      */
     svgIcon;
     /**
@@ -1094,7 +1082,7 @@ class ChipComponent {
     removable = false;
     /**
      * Specifies a custom remove font icon class to render when the Chip is removable.
-     * [see example]({% slug icons %})
+     * [see example](https://www.telerik.com/kendo-angular-ui/components/styling/icons)
      */
     removeIcon;
     /**
@@ -1126,45 +1114,34 @@ class ChipComponent {
     disabled = false;
     /**
      * Sets the padding of the Chip.
-     * See [Chip Appearance]({% slug appearance_chip %}#size).
-     *
-     * @default 'medium'
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#size). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
      * Sets the border radius of the Chip.
-     * See [Chip Appearance](slug:appearance_chip#roundness).
-     *
-     * @default 'medium'
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#roundness). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
      * Sets the background and border styles of the Chip.
-     * See [Chip Appearance](slug:appearance_chip#fill-mode).
-     *
-     * @default 'solid'
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#fill-mode). The default value is set by the Kendo theme.
      */
     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;
@@ -1172,14 +1149,11 @@ class ChipComponent {
     /**
      * Sets a predefined theme color for the Chip.
      * The theme color applies as a background and border color and adjusts the text color.
-     * See [Chip Appearance](slug:appearance_chip#theme-colors).
-     *
-     * @default 'base'
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#theme-colors). The default value is set by the Kendo theme.
      */
     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 +1202,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 +1234,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 +1322,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 +1331,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) {
@@ -1406,7 +1374,7 @@ class ChipComponent {
             [name]="icon"
           [svgIcon]="svgIcon"></kendo-icon-wrapper>
         }
-        
+
         @if (iconClass) {
           <kendo-icon-wrapper
             size="small"
@@ -1427,7 +1395,7 @@ class ChipComponent {
             }
           </span>
         }
-        
+
         <span class="k-chip-content">
           @if (label) {
             <span class="k-chip-label">
@@ -1438,7 +1406,7 @@ class ChipComponent {
             <ng-content></ng-content>
           }
         </span>
-        
+
         @if (hasMenu || removable) {
           <span class="k-chip-actions">
             @if (hasMenu) {
@@ -1477,7 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [name]="icon"
           [svgIcon]="svgIcon"></kendo-icon-wrapper>
         }
-        
+
         @if (iconClass) {
           <kendo-icon-wrapper
             size="small"
@@ -1498,7 +1466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }
           </span>
         }
-        
+
         <span class="k-chip-content">
           @if (label) {
             <span class="k-chip-label">
@@ -1509,7 +1477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             <ng-content></ng-content>
           }
         </span>
-        
+
         @if (hasMenu || removable) {
           <span class="k-chip-actions">
             @if (hasMenu) {
@@ -1646,15 +1614,12 @@ class ChipListComponent {
     selection = 'none';
     /**
      * Sets the gap between the Chips in the ChipList.
-     * See [ChipList Appearance]({% slug appearance_chiplist %}#size).
-     *
-     * @default 'medium'
+     * See [ChipList Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chiplist/appearance#size). The default value is set by the Kendo theme.
      */
     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 +1644,7 @@ class ChipListComponent {
      */
     role = 'listbox';
     dynamicRTLSubscription;
-    _size = 'medium';
+    _size = undefined;
     subs = new Subscription();
     _navigable = true;
     /**
@@ -1982,7 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * </kendo-dropdownbutton>
  * ```
  *
- * For more examples, refer to the article on the [DropDownButton templates](slug:itemstemplates_dropdownbutton).
+ * For more examples, refer to the article on the [DropDownButton templates](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/items-and-templates).
  */
 class ButtonItemTemplateDirective {
     templateRef;
@@ -2843,7 +2808,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.
  *
@@ -2883,7 +2847,7 @@ class DropDownButtonComponent extends ListButton {
      */
     icon = '';
     /**
-     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
+     * Specifies an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render within the button.
      */
     svgIcon;
     /**
@@ -2909,18 +2873,15 @@ class DropDownButtonComponent extends ListButton {
         return this._data;
     }
     /**
-     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
-     * @default 'medium'
+     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#size). The default value is set by the Kendo theme.
      */
-    size = 'medium';
+    size = undefined;
     /**
-     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
-     * @default 'medium'
+     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#roundness). The default value is set by the Kendo theme.
      */
-    rounded = 'medium';
+    rounded = undefined;
     /**
-     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
-     * @default 'solid'
+     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#fill-mode). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -2929,10 +2890,9 @@ class DropDownButtonComponent extends ListButton {
         return this._fillMode;
     }
     /**
-     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
-     * @default 'base'
+     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#theme-colors).
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Sets attributes for the main button.
      */
@@ -2971,7 +2931,7 @@ class DropDownButtonComponent extends ListButton {
         return this._active;
     }
     itemTemplate;
-    _fillMode = DEFAULT_FILL_MODE$2;
+    _fillMode = undefined;
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -3144,7 +3104,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 +3166,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()"
@@ -3362,7 +3322,7 @@ function closeAnimation(animationSettings) {
 /**
  * Represents a template that defines the content of a dial item.
  * To define the template, nest an `<ng-template>` tag with the `kendoDialItemTemplate` directive inside the `<kendo-floatingactionbutton>` tag
- *([see example]({% slug templates_floatingactionbutton %}#dial-item-template)).
+ *([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/templates#dial-item-template)).
  *
  * @example
  * ```html
@@ -3395,7 +3355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Represents a template that defines the content of the FloatingActionButton.
  * To define the template, nest an `<ng-template>` tag with the `kendoFloatingActionButtonTemplate` directive inside the `<kendo-floatingactionbutton>` tag
  *
- * ([see example](slug:templates_floatingactionbutton#floatingactionbutton-template)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/templates#floatingactionbutton-template)).
  *
  * @example
  * ```html
@@ -3679,15 +3639,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.
@@ -3722,38 +3680,31 @@ class FloatingActionButtonComponent {
     dialItemTemplate;
     fabTemplate;
     /**
-     * Specifies the theme color of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#theme-colors)).
-     * @default "primary"
+     * Specifies the theme color of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#theme-colors)). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
-     * Specifies the size of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#size)).
-     * @default "medium"
+     * Specifies the size of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#size)). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
-     * Specifies the border radius of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#roundness)).
-     *
-     * @default "full"
+     * Specifies the border radius of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#roundness)). The default value is set by the Kendo theme.
      */
     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;
@@ -3769,7 +3720,7 @@ class FloatingActionButtonComponent {
         return this._disabled;
     }
     /**
-     * Specifies the alignment of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#alignment)).
+     * Specifies the alignment of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#alignment)).
      * @default { horizontal: 'end', vertical: 'top' }
      */
     set align(align) {
@@ -3779,7 +3730,7 @@ class FloatingActionButtonComponent {
         return this._align;
     }
     /**
-     * Specifies the offset position of the FloatingActionButton ([see example]({% slug positioning_floatingactionbutton %}#offset)).
+     * Specifies the offset position of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#offset)).
      * @default { x: '16px', y: '16px' }
      */
     set offset(offset) {
@@ -3790,7 +3741,7 @@ class FloatingActionButtonComponent {
         return this._offset;
     }
     /**
-     * Specifies the position mode of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#position-mode)).
+     * Specifies the position mode of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#position-mode)).
      * @default "fixed"
      */
     positionMode = 'fixed';
@@ -3799,7 +3750,7 @@ class FloatingActionButtonComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the FloatingActionButton.
+     * Defines an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to be rendered within the FloatingActionButton.
      */
     svgIcon;
     /**
@@ -3848,12 +3799,12 @@ class FloatingActionButtonComponent {
     dialItemClick = new EventEmitter();
     /**
      * Fires when the popup is about to open. This event is preventable
-     *  ([more information and example](slug:events_floatingactionbutton)).
+     *  ([more information and example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/events)).
      */
     open = new EventEmitter();
     /**
      * Fires when the popup is about to close. This event is preventable
-     * ([more information and example](slug:events_floatingactionbutton)).
+     * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/events)).
      */
     close = new EventEmitter();
     /**
@@ -3870,9 +3821,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 };
@@ -3939,7 +3890,7 @@ class FloatingActionButtonComponent {
      * Toggles the visibility of the FloatingActionButton dial items popup.
      *
      * If you use the `toggleDial` method to open or close the dial items,
-     * the `open` and `close` events do not fire ([more information and examples](slug:openstate_floatingactionbutton)).
+     * the `open` and `close` events do not fire ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/open_state)).
      *
      * @param open - The state of dial items popup.
      */
@@ -4129,12 +4080,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 +4326,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,
@@ -4402,7 +4353,7 @@ class FloatingActionButtonComponent {
               >
             </ng-template>
           }
-        
+
           @if (!fabTemplate) {
             @if (icon || iconClass || svgIcon) {
               <kendo-icon-wrapper
@@ -4416,7 +4367,7 @@ class FloatingActionButtonComponent {
             }
           }
         </button>
-        
+
         <ng-template #popupTemplate>
           <ul
             kendoDialList
@@ -4453,20 +4404,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,
@@ -4480,7 +4431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               >
             </ng-template>
           }
-        
+
           @if (!fabTemplate) {
             @if (icon || iconClass || svgIcon) {
               <kendo-icon-wrapper
@@ -4494,7 +4445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }
           }
         </button>
-        
+
         <ng-template #popupTemplate>
           <ul
             kendoDialList
@@ -4631,7 +4582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents a custom component for overriding the default SplitButton messages.
- * ([see example]({% slug rtl_buttons %})).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/globalization)).
  */
 class SplitButtonCustomMessagesComponent extends Messages {
     service;
@@ -4699,8 +4650,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.
  *
@@ -4738,7 +4687,7 @@ class SplitButtonComponent extends ListButton {
      */
     text = '';
     /**
-     * Specifies an icon to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies an icon to display next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     icon = '';
     /**
@@ -4746,7 +4695,7 @@ class SplitButtonComponent extends ListButton {
      */
     svgIcon;
     /**
-     * Specifies a custom CSS class for the icon displayed next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies a custom CSS class for the icon displayed next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     iconClass;
     /**
@@ -4754,48 +4703,38 @@ class SplitButtonComponent extends ListButton {
      */
     type = 'button';
     /**
-     * Specifies the URL of an image to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies the URL of an image to display next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     imageUrl = '';
     /**
-     * Configures the padding of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#size)).
-     *
-     * @default 'medium'
+     * Configures the padding of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#size)). The default value is set by the Kendo theme.
      */
-    size = 'medium';
+    size = undefined;
     /**
-     * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)).
-     *
-     * @default 'medium'
+     * Configures the border radius of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#rounded)). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
-     * Configures the background and border styles of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#fillMode)).
-     *
-     * @default 'solid'
+     * Configures the background and border styles of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#fillmode)). The default value is set by the Kendo theme.
      */
     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;
     }
     /**
-     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example]({% slug api_buttons_splitbuttoncomponent %}#themeColor)).
-     *
-     * @default 'base'
+     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
-     * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Disables the SplitButton when set to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     set disabled(value) {
         if (this.isOpen) {
@@ -4845,7 +4784,7 @@ class SplitButtonComponent extends ListButton {
      */
     arrowButtonIcon = 'caret-alt-down';
     /**
-     * Specifies the [`SVGIcon`](slug:api_icons_svgiconcomponent) displayed on the button that opens the popup.
+     * Specifies the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) displayed on the button that opens the popup.
      */
     arrowButtonSvgIcon = caretAltDownIcon;
     /**
@@ -4909,8 +4848,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 +5181,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 +5272,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 +5363,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.
  *
@@ -5458,54 +5391,45 @@ class SpeechToTextButtonComponent {
         return this.isDisabled;
     }
     /**
-     * Sets the padding of the SpeechToTextButton.
+     * Sets the padding of the SpeechToTextButton. The default value is set by the Kendo theme.
      *
-     * @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;
     }
     /**
-     * Sets the border radius of the SpeechToTextButton.
+     * Sets the border radius of the SpeechToTextButton. The default value is set by the Kendo theme.
      *
-     * @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;
     }
     /**
-     * Sets the background and border styles of the SpeechToTextButton.
-     *
-     * @default 'solid'
+     * Sets the background and border styles of the SpeechToTextButton. The default value is set by the Kendo theme.
      */
     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;
     }
     /**
-     * Sets a predefined theme color for the SpeechToTextButton.
-     * The theme color applies as a background and border color and adjusts the text color.
+     * Sets a predefined theme color for the SpeechToTextButton. The default value is set by the Kendo theme.
+     * The theme color applies as a background and border color and adjusts the text color for contrast.
      *
-     * @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 +5569,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 +5666,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 +5725,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() {
@@ -5943,152 +5857,878 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_BUTTON = [
-    ButtonComponent
-];
+const DEFAULT_AI_REQUEST_OPTIONS = {
+    headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+    }),
+    role: 'user',
+    method: 'POST',
+    responseType: 'json'
+};
+class SmartPasteRequestStartEvent extends PreventableEvent$1 {
+    /**
+     * Gets the request data to send to the AI service.
+     */
+    requestData;
+    constructor(requestData) {
+        super();
+        this.requestData = requestData;
+    }
+}
+class SmartPasteRequestEndEvent extends PreventableEvent$1 {
+    /**
+     * Gets the HTTP response from the AI service.
+     * Contains an error object when the request fails.
+     */
+    response;
+    constructor(response) {
+        super();
+        this.response = response;
+    }
+}
+
 /**
- * Use the `KENDO_BUTTONGROUP` utility array to add all ButtonGroup-related components and directives to a standalone Angular component.
+ * Checks if a field should be ignored during Smart Paste.
  *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTONGROUP],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_BUTTONGROUP = [
-    ButtonComponent,
-    ButtonGroupComponent
-];
+function isFieldIgnored(element) {
+    return element.hasAttribute('type') && element.type === 'hidden' ||
+        element.hasAttribute('disabled') ||
+        element.hasAttribute('readonly') ||
+        (element.hasAttribute('aria-disabled') && element.getAttribute('aria-disabled') === 'true') ||
+        (element.hasAttribute('aria-readonly') && element.getAttribute('aria-readonly') === 'true') ||
+        (element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true');
+}
 /**
- * Use the `KENDO_DROPDOWNBUTTON` utility array to add all DropDownButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_DROPDOWNBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_DROPDOWNBUTTON = [
-    DropDownButtonComponent,
-    ButtonItemTemplateDirective
-];
+const getElementIdentifier = (element) => {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return element.getAttribute('formcontrolname') ||
+        element.getAttribute('name') ||
+        element.id;
+};
 /**
- * Use the `KENDO_CHIP` utility array to add all Chip-related components and directives to a standalone Angular component.
+ * Specifies custom inputs (Kendo components) to include in Smart Paste.
+ * Each custom input has an identifier used to detect the component.
+ * Defaults to common Kendo UI components (DropDownList, ComboBox, AutoComplete, MultiSelect, DatePicker, etc.).
  *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_CHIP],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_CHIP = [
-    ChipComponent
+const customInputs = [
+    { identifier: '.k-checkbox' },
+    { identifier: '.k-colorpalette' },
+    { identifier: '.k-colorgradient' },
+    { identifier: '.k-flatcolorpicker' },
+    { identifier: '.k-otp' },
+    { identifier: '.k-textbox' },
+    { identifier: '.k-radio' },
+    { identifier: '.k-slider' },
+    { identifier: '.k-rating' },
+    { identifier: '.k-signature' },
+    { identifier: '.k-switch' },
+    { identifier: '.k-textarea' },
+    { identifier: '.k-calendar' },
+    { identifier: '.k-timepicker' },
+    { identifier: '.k-dateinput' },
+    { identifier: '.k-datetimepicker' },
+    { identifier: '.k-dropdownlist' },
+    { identifier: '.k-combobox' },
+    { identifier: '.k-autocomplete' },
+    { identifier: '.k-multiselect' },
+    { identifier: '.k-datepicker' },
+    { identifier: '.k-numerictextbox' },
+    { identifier: '.k-maskedtextbox' },
+    { identifier: '.k-colorpicker' },
+    { identifier: '.k-dropdowntree' },
+    { identifier: '.k-multiselecttree' },
 ];
+const DATEPICKER_SELECTOR = '.k-datepicker';
+const TIMEPICKER_SELECTOR = '.k-timepicker';
+const DATETIMEPICKER_SELECTOR = '.k-datetimepicker';
+const DATERANGEPICKER_SELECTOR = '.k-daterangepicker';
+const CHECKBOX_SELECTOR = '.k-checkbox';
+const RADIO_SELECTOR = '.k-radio';
+const NUMERICTEXTBOX_SELECTOR = '.k-numerictextbox';
 /**
- * Use the `KENDO_CHIPLIST` utility array to add all ChipList-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_CHIPLIST],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_CHIPLIST = [
-    ChipComponent,
-    ChipListComponent
-];
+const requiresDateValue = (element) => {
+    const isDateInput = [DATEPICKER_SELECTOR, TIMEPICKER_SELECTOR, DATETIMEPICKER_SELECTOR, DATERANGEPICKER_SELECTOR];
+    return isDateInput.some(selector => element.classList.contains(selector.slice(1)));
+};
 /**
- * Use the `KENDO_FLOATINGACTIONBUTTON` utility array to add all FloatingActionButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_FLOATINGACTIONBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_FLOATINGACTIONBUTTON = [
-    FloatingActionButtonComponent,
-    DialItemTemplateDirective,
-    FloatingActionButtonTemplateDirective
-];
+const requiresBooleanValue = (element) => {
+    const isBooleanInput = [CHECKBOX_SELECTOR, RADIO_SELECTOR];
+    return isBooleanInput.some(selector => element.classList.contains(selector.slice(1)));
+};
 /**
- * Use the `KENDO_SPLITBUTTON` utility array to add all SplitButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_SPLITBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
+ * @hidden
  */
-const KENDO_SPLITBUTTON = [
-    SplitButtonComponent,
-    SplitButtonCustomMessagesComponent,
-    ToggleButtonTabStopDirective,
-    ButtonItemTemplateDirective
-];
+const requiresNumericValue = (element) => {
+    const isNumericInput = [NUMERICTEXTBOX_SELECTOR];
+    return isNumericInput.some(selector => element.classList.contains(selector.slice(1)));
+};
 /**
- * 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 {}
- * ```
+ * @hidden
  */
-const KENDO_SPEECHTOTEXTBUTTON = [
-    SpeechToTextButtonComponent
-];
+const populateCustomInputs = (element, value) => {
+    const parseNumericValue = requiresNumericValue(element);
+    if (parseNumericValue) {
+        const numericValue = parseFloat(value);
+        return !isNaN(numericValue) ? numericValue : null;
+    }
+    const parseBooleanValue = requiresBooleanValue(element);
+    if (parseBooleanValue) {
+        return value.toLowerCase() === 'true';
+    }
+    const parseDateValue = requiresDateValue(element);
+    if (parseDateValue) {
+        const dateValue = new Date(value);
+        return !isNaN(dateValue.getTime()) ? dateValue : null;
+    }
+    return value;
+};
 /**
- * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTONS],
- *   // ...
- * })
- * export class MyComponent {}
+ * @hidden
+ */
+const readClipboard = async () => {
+    return await navigator.clipboard.readText();
+};
+/**
+ * @hidden
+ */
+const sendSmartPasteRequest = (http, requestData) => {
+    const body = {
+        formFields: requestData.formFields,
+        content: requestData.content
+    };
+    const request = new HttpRequest(requestData.requestOptions?.method || 'POST', requestData.url, body, requestData.requestOptions);
+    return http.request(request).pipe(filter((event) => event.type === HttpEventType.Response));
+};
+
+const DEFAULT_SVG_ICON = pasteSparkleIcon;
+const DEFAULT_ICON = 'paste-sparkle';
+/**
+ * Represents the Kendo UI SmartPasteButton component for Angular.
+ *
+ * Fills form fields with AI-powered data extraction from clipboard content.
+ */
+class SmartPasteButtonComponent {
+    renderer;
+    ngZone;
+    http;
+    controlContainer;
+    /**
+     * Specifies the form controls to include in Smart Paste.
+     * When not set, all form controls are included.
+     *
+     * @default null
+     */
+    formFields = null;
+    /**
+     * When `true`, disables the SmartPasteButton and prevents user interaction.
+     *
+     * @default false
+     */
+    set disabled(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 SmartPasteButton.
+     *
+     * @default undefined
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the SmartPasteButton.
+     *
+     * @default undefined
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the background and border styles of the SmartPasteButton.
+     *
+     * @default undefined
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Sets a predefined theme color for the SmartPasteButton.
+     * The theme color applies as a background and border color and adjusts the text color.
+     *
+     * @default undefined
+     */
+    set themeColor(themeColor) {
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    /**
+     * Sets an SVG icon to display inside the SmartPasteButton.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
+    /**
+     * Specifies a URL for an `img` element inside the SmartPasteButton.
+     * The URL can be relative or absolute. When relative, the browser evaluates it relative to the web page URL.
+     */
+    imageUrl;
+    /**
+     * Defines one or more CSS classes separated by spaces for a `span` element inside the SmartPasteButton.
+     * Use `iconClass` to add custom icons.
+     */
+    set iconClass(value) {
+        const hasCustomIcon = this.icon !== DEFAULT_ICON || this.svgIcon !== DEFAULT_SVG_ICON;
+        if (isDevMode() && value && hasCustomIcon) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        if (!hasCustomIcon) {
+            this._icon = null;
+            this._svgIcon = null;
+        }
+        this._iconClass = value;
+    }
+    get iconClass() {
+        return this._iconClass;
+    }
+    /**
+     * Specifies the icon name to display in the SmartPasteButton.
+     *
+     * @default 'paste-sparkle'
+     */
+    set icon(name) {
+        if (isDevMode() && name && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._icon = name;
+    }
+    get icon() {
+        return this._icon;
+    }
+    /**
+     * Sets the URL to which Smart Paste sends the AI request.
+     * When set, the component sends and handles an HTTP request automatically. Handle the `requestStart` event to modify request options before sending.
+     * When not set, the component does not send an HTTP request. Handle the `requestStart` event to send and manage a custom HTTP request.
+     */
+    requestUrl;
+    /**
+     * Configures the HTTP request options for the AI request.
+     * Use this to customize headers, method, credentials, and other request settings.
+     */
+    requestOptions;
+    /**
+     * Sets static form field metadata to bypass DOM extraction when Smart Paste runs.
+     * Use this when you want to provide form field configuration directly instead of extracting it from the DOM.
+     *
+     * @default null
+     */
+    smartPasteFormFields = null;
+    /**
+     * Fires when the Smart Paste request is about to start.
+     * Prevent the event to stop the request before sending it.
+     */
+    requestStart = new EventEmitter();
+    /**
+     * Fires when the Smart Paste request completes, either successfully or with an error.
+     * Prevent the event to cancel populating the form fields with the response data.
+     */
+    requestEnd = new EventEmitter();
+    /**
+     * Fires when the user cancels an ongoing Smart Paste request.
+     */
+    requestCancel = new EventEmitter();
+    get iconButtonClass() {
+        return !this.hasText;
+    }
+    classButton = true;
+    get classDisabled() {
+        return this.isDisabled;
+    }
+    get getDirection() {
+        return this.direction;
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+    }
+    /**
+     * Focuses the SmartPasteButton.
+     */
+    focus() {
+        if (isDocumentAvailable()) {
+            this.element.focus();
+            this.isFocused = true;
+        }
+    }
+    /**
+     * Removes focus from the SmartPasteButton.
+     */
+    blur() {
+        if (isDocumentAvailable()) {
+            this.element.blur();
+            this.isFocused = false;
+        }
+    }
+    get hasText() {
+        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
+    }
+    set isFocused(isFocused) {
+        toggleClass('k-focus', isFocused, this.renderer, this.element);
+        this._focused = isFocused;
+    }
+    get isFocused() {
+        return this._focused;
+    }
+    element;
+    isDisabled = false;
+    subs = new Subscription();
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
+    _focused = false;
+    direction;
+    _iconClass;
+    _icon = DEFAULT_ICON;
+    _svgIcon = DEFAULT_SVG_ICON;
+    kendoSmartPaste;
+    smartPasteBusy = false;
+    currentRequestSubscription = null;
+    nativeForm = null;
+    constructor(elementRef, renderer, localization, ngZone, http, controlContainer) {
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.http = http;
+        this.controlContainer = controlContainer;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.element = elementRef.nativeElement;
+    }
+    ngOnInit() {
+        this.nativeForm = this.element.form;
+        this.kendoSmartPaste = new KendoSmartPaste({
+            getElement: () => this.nativeForm,
+            customInputs: customInputs || undefined,
+            getSmartPasteField: this.defaultGetSmartPasteField,
+            setKendoInputValue: this.defaultSetKendoInputValue
+        });
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.element, 'click', this.paste.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();
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeCurrentRequest();
+        this.subs.unsubscribe();
+    }
+    /**
+     * Starts the Smart Paste operation.
+     * Reads clipboard content and sends it to the AI service for processing.
+     */
+    async paste() {
+        if (!this.nativeForm) {
+            return;
+        }
+        if (this.smartPasteBusy) {
+            this.requestCancel.emit();
+            this.unsubscribeCurrentRequest();
+            this.smartPasteBusy = false;
+            return;
+        }
+        let clipboardContent;
+        try {
+            clipboardContent = await readClipboard();
+        }
+        catch (error) {
+            this.ngZone.run(() => {
+                const responseErrorEvent = new SmartPasteRequestEndEvent(error);
+                this.requestEnd.emit(responseErrorEvent);
+            });
+            return;
+        }
+        if (!clipboardContent || clipboardContent.trim() === '') {
+            return;
+        }
+        this.smartPasteBusy = true;
+        this.unsubscribeCurrentRequest();
+        const formFields = this.extractFormFields();
+        const requestData = {
+            formFields,
+            content: clipboardContent,
+            url: this.requestUrl,
+            requestOptions: {
+                ...this.requestOptions
+            }
+        };
+        if (!this.requestUrl) {
+            this.smartPasteBusy = false;
+            return;
+        }
+        this.ngZone.run(() => {
+            const requestStartEvent = new SmartPasteRequestStartEvent(requestData);
+            this.requestStart.emit(requestStartEvent);
+            if (requestStartEvent.isDefaultPrevented()) {
+                this.smartPasteBusy = false;
+                return;
+            }
+            if (!this.smartPasteBusy) {
+                return;
+            }
+            this.handleSmartPasteRequest(requestData, formFields);
+        });
+    }
+    sendSmartPasteRequest(requestData) {
+        const body = {
+            formFields: requestData.formFields,
+            content: requestData.content
+        };
+        const request = new HttpRequest(requestData.requestOptions?.method || 'POST', requestData.url, body, requestData.requestOptions);
+        return this.http.request(request).pipe(filter((event) => event.type === HttpEventType.Response));
+    }
+    unsubscribeCurrentRequest() {
+        if (this.currentRequestSubscription) {
+            this.currentRequestSubscription.unsubscribe();
+            this.currentRequestSubscription = null;
+        }
+    }
+    defaultGetSmartPasteField = (field) => {
+        const element = field.element;
+        if (isFieldIgnored(element)) {
+            return null;
+        }
+        const hasKendoWrapper = customInputs.some(input => {
+            if (!element.classList.contains(input.identifier.slice(1)) && element.closest(input.identifier)) {
+                return true;
+            }
+        });
+        if (hasKendoWrapper) {
+            return null;
+        }
+        if (field.type === 'kendo-input') {
+            const identifier = getElementIdentifier(element);
+            if (!identifier) {
+                return null;
+            }
+            if (requiresBooleanValue(element)) {
+                field.allowedValues = ['true', 'false'];
+            }
+            field.field = identifier;
+        }
+        return field;
+    };
+    defaultSetKendoInputValue = (field, value) => {
+        const element = field.element;
+        const controlName = getElementIdentifier(element);
+        if (!controlName || !this.controlContainer) {
+            return;
+        }
+        const control = this.controlContainer.control.get?.(controlName);
+        if (!control || typeof control.setValue !== 'function') {
+            return;
+        }
+        const updatedValue = populateCustomInputs(element, value);
+        if (!isPresent$1(updatedValue)) {
+            return;
+        }
+        this.setControlValue(control, updatedValue);
+    };
+    setControlValue(control, value) {
+        this.ngZone.run(() => {
+            control.setValue(value);
+            control.markAsDirty();
+            control.updateValueAndValidity();
+        });
+    }
+    extractFormFields() {
+        if (!this.formFields || this.formFields.length === 0) {
+            return this.kendoSmartPaste.extractFormConfig();
+        }
+        else {
+            const formFields = this.formFields.map(field => {
+                const element = this.nativeForm?.querySelector(`#${field.field}`);
+                return {
+                    ...field,
+                    element
+                };
+            });
+            return formFields;
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.element;
+        const classes = getStylingClasses('button', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleThemeColor(value) {
+        const elem = this.element;
+        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);
+        }
+    }
+    handleSmartPasteRequest(requestData, formFields) {
+        this.currentRequestSubscription = this.sendSmartPasteRequest(requestData).subscribe((response) => {
+            if (!this.smartPasteBusy) {
+                return;
+            }
+            const responseEvent = new SmartPasteRequestEndEvent(response);
+            this.requestEnd.emit(responseEvent);
+            if (responseEvent.isDefaultPrevented()) {
+                this.smartPasteBusy = false;
+                return;
+            }
+            if (response?.body?.fieldValues) {
+                this.kendoSmartPaste.populateFormFields(response.body, formFields);
+            }
+            this.smartPasteBusy = false;
+            this.currentRequestSubscription = null;
+        }, (error) => {
+            if (!this.smartPasteBusy) {
+                return;
+            }
+            const responseErrorEvent = new SmartPasteRequestEndEvent(error);
+            this.requestEnd.emit(responseErrorEvent);
+            this.smartPasteBusy = false;
+            this.currentRequestSubscription = null;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i3$1.ControlContainer, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SmartPasteButtonComponent, isStandalone: true, selector: "button[kendoSmartPasteButton]", inputs: { formFields: "formFields", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", requestUrl: "requestUrl", requestOptions: "requestOptions", smartPasteFormFields: "smartPasteFormFields" }, outputs: { requestStart: "requestStart", requestEnd: "requestEnd", requestCancel: "requestCancel" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-icon-button": "this.iconButtonClass", "class.k-button": "this.classButton", "class.k-disabled": "this.classDisabled", "attr.dir": "this.getDirection" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.smartpastebutton'
+            }
+        ], exportAs: ["kendoSmartPasteButton"], 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>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
+        <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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSmartPasteButton',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.smartpastebutton'
+                        }
+                    ],
+                    selector: 'button[kendoSmartPasteButton]',
+                    standalone: true,
+                    imports: [IconWrapperComponent, NgClass],
+                    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>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i2.HttpClient }, { type: i3$1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }], propDecorators: { formFields: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], requestUrl: [{
+                type: Input
+            }], requestOptions: [{
+                type: Input
+            }], smartPasteFormFields: [{
+                type: Input
+            }], requestStart: [{
+                type: Output
+            }], requestEnd: [{
+                type: Output
+            }], requestCancel: [{
+                type: Output
+            }], iconButtonClass: [{
+                type: HostBinding,
+                args: ['class.k-icon-button']
+            }], classButton: [{
+                type: HostBinding,
+                args: ['class.k-button']
+            }], classDisabled: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], getDirection: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], 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.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_BUTTON = [
+    ButtonComponent
+];
+/**
+ * Use the `KENDO_BUTTONGROUP` utility array to add all ButtonGroup-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONGROUP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_BUTTONGROUP = [
+    ButtonComponent,
+    ButtonGroupComponent
+];
+/**
+ * Use the `KENDO_DROPDOWNBUTTON` utility array to add all DropDownButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_DROPDOWNBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_DROPDOWNBUTTON = [
+    DropDownButtonComponent,
+    ButtonItemTemplateDirective
+];
+/**
+ * Use the `KENDO_CHIP` utility array to add all Chip-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_CHIP = [
+    ChipComponent
+];
+/**
+ * Use the `KENDO_CHIPLIST` utility array to add all ChipList-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIPLIST],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_CHIPLIST = [
+    ChipComponent,
+    ChipListComponent
+];
+/**
+ * Use the `KENDO_FLOATINGACTIONBUTTON` utility array to add all FloatingActionButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FLOATINGACTIONBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_FLOATINGACTIONBUTTON = [
+    FloatingActionButtonComponent,
+    DialItemTemplateDirective,
+    FloatingActionButtonTemplateDirective
+];
+/**
+ * Use the `KENDO_SPLITBUTTON` utility array to add all SplitButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SPLITBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_SPLITBUTTON = [
+    SplitButtonComponent,
+    SplitButtonCustomMessagesComponent,
+    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_SMARTPASTEBUTTON` utility array to add all SmartPasteButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SMARTPASTEBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+const KENDO_SMARTPASTEBUTTON = [
+    SmartPasteButtonComponent
+];
+/**
+ * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONS],
+ *   // ...
+ * })
+ * export class MyComponent {}
  * ```
  */
 const KENDO_BUTTONS = [
@@ -6099,7 +6739,8 @@ const KENDO_BUTTONS = [
     ...KENDO_CHIPLIST,
     ...KENDO_FLOATINGACTIONBUTTON,
     ...KENDO_SPLITBUTTON,
-    ...KENDO_SPEECHTOTEXTBUTTON
+    ...KENDO_SPEECHTOTEXTBUTTON,
+    ...KENDO_SMARTPASTEBUTTON
 ];
 
 //IMPORTANT: NgModule export kept for backwards compatibility
@@ -6202,8 +6843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 class ButtonsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", 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: "19.2.18", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, i12.ToggleButtonTabStopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
@@ -6371,9 +7012,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the SmartPasteButton component.
+ *
+ * The module is meant for backward compatibility. For new applications, use the standalone SmartPasteButton component.
+ *
+ * @example
+ * ```ts-no-run
+ * import { SmartPasteButtonModule } from '@progress/kendo-angular-buttons';
+ *
+ * _@NgModule({
+ *     imports: [SmartPasteButtonModule]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+class SmartPasteButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent], exports: [SmartPasteButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonModule, imports: [SmartPasteButtonComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartPasteButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SmartPasteButtonComponent],
+                    imports: [SmartPasteButtonComponent]
+                }]
+        }] });
+
 /**
  * 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_SPEECHTOTEXTBUTTON, KENDO_SPLITBUTTON, KendoButtonService, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SpeechToTextButtonComponent, SpeechToTextButtonModule, 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_SMARTPASTEBUTTON, KENDO_SPEECHTOTEXTBUTTON, KENDO_SPLITBUTTON, KendoButtonService, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SmartPasteButtonComponent, SmartPasteButtonModule, SmartPasteRequestEndEvent, SmartPasteRequestStartEvent, SpeechToTextButtonComponent, SpeechToTextButtonModule, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule };