@progress/kendo-angular-inputs 24.0.0-develop.3 → 24.0.0-develop.30

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

@@ -13,7 +13,7 @@ export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective }
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@progress/kendo-angular-intl';
@@ -583,8 +583,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776940460,
-    version: '24.0.0-develop.3',
+    publishDate: 1778748663,
+    version: '24.0.0-develop.30',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1179,19 +1179,19 @@ class SliderComponent extends SliderBase {
     /**
      * @hidden
      */
-    arrowUpIcon = caretAltUpIcon;
+    arrowUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     /**
      * @hidden
      */
-    arrowLeftIcon = caretAltLeftIcon;
+    arrowLeftIcon = chevronLeftIcon;
     /**
      * @hidden
      */
-    arrowRightIcon = caretAltRightIcon;
+    arrowRightIcon = chevronRightIcon;
     draghandle;
     decreaseButton;
     increaseButton;
@@ -1514,36 +1514,28 @@ class SliderComponent extends SliderBase {
         }
     };
     get decreaseButtonArrowIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                'caret-alt-left' :
-                'caret-alt-right' :
-            'caret-alt-down';
-        return icon;
+        if (this.vertical) {
+            return 'chevron-down';
+        }
+        return this.direction === 'ltr' ? 'chevron-left' : 'chevron-right';
     }
     get increaseButtonArrowIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                'caret-alt-right' :
-                'caret-alt-left' :
-            'caret-alt-up';
-        return icon;
+        if (this.vertical) {
+            return 'chevron-up';
+        }
+        return this.direction === 'ltr' ? 'chevron-right' : 'chevron-left';
     }
     get decreaseButtonArrowSVGIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                this.arrowLeftIcon :
-                this.arrowRightIcon :
-            this.arrowDownIcon;
-        return icon;
+        if (this.vertical) {
+            return this.arrowDownIcon;
+        }
+        return this.direction === 'ltr' ? this.arrowLeftIcon : this.arrowRightIcon;
     }
     get increaseButtonArrowSVGIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                this.arrowRightIcon :
-                this.arrowLeftIcon :
-            this.arrowUpIcon;
-        return icon;
+        if (this.vertical) {
+            return this.arrowUpIcon;
+        }
+        return this.direction === 'ltr' ? this.arrowRightIcon : this.arrowLeftIcon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
@@ -1632,7 +1624,7 @@ class SliderComponent extends SliderBase {
             ></button>
           }
           <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -2542,11 +2534,19 @@ class SwitchComponent {
     /**
      * @hidden
      */
+    set focusableId(value) {
+        this._focusableId = value;
+    }
     get focusableId() {
-        if (this.hostElement.nativeElement.hasAttribute('id')) {
-            return this.hostElement.nativeElement.getAttribute('id');
+        if (!this._focusableId) {
+            if (this.hostElement.nativeElement.hasAttribute('id')) {
+                this._focusableId = this.hostElement.nativeElement.getAttribute('id');
+            }
+            else {
+                this._focusableId = `k-${guid()}`;
+            }
         }
-        return `k-${guid()}`;
+        return this._focusableId;
     }
     /**
      * Set the **On** label.
@@ -2674,6 +2674,7 @@ class SwitchComponent {
     control;
     domSubscriptions = [];
     _checked = false;
+    _focusableId;
     _size;
     _trackRounded;
     _thumbRounded;
@@ -4069,11 +4070,11 @@ class NumericTextBoxComponent {
     /**
      * @hidden
      */
-    arrowUpIcon = caretAltUpIcon;
+    arrowUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     subscriptions;
     inputValue = '';
     spinTimeout;
@@ -4902,7 +4903,7 @@ class NumericTextBoxComponent {
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-up"
+                  name="chevron-up"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowUpIcon"
                   >
@@ -4919,7 +4920,7 @@ class NumericTextBoxComponent {
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-down"
+                  name="chevron-down"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowDownIcon"
                   >
@@ -5017,7 +5018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-up"
+                  name="chevron-up"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowUpIcon"
                   >
@@ -5034,7 +5035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-down"
+                  name="chevron-down"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowDownIcon"
                   >
@@ -7773,7 +7774,6 @@ class TextBoxComponent {
     get disabledClass() {
         return this.disabled;
     }
-    hostClasses = true;
     direction;
     /**
      * @hidden
@@ -7825,6 +7825,8 @@ class TextBoxComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     ngOnInit() {
+        this.renderer.addClass(this.hostElement.nativeElement, 'k-textbox');
+        this.renderer.addClass(this.hostElement.nativeElement, 'k-input');
         this.control = this.injector.get(NgControl, null);
         this.checkClearButton();
         this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
@@ -8170,7 +8172,7 @@ class TextBoxComponent {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TextBoxComponent, isStandalone: true, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TextBoxComponent, isStandalone: true, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
             {
@@ -8455,12 +8457,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-textbox']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -8792,7 +8788,7 @@ class ColorInputComponent {
             </div>
           }
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -10300,7 +10296,7 @@ class ColorGradientComponent {
             [ratio]="contrastTool">
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
@@ -11575,7 +11571,7 @@ class FlatColorPickerHeaderComponent {
             </div>
           }
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
@@ -11731,7 +11727,7 @@ class FlatColorPickerActionButtonsComponent {
             [tabindex]="innerTabIndex.toString()"
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
@@ -12725,7 +12721,7 @@ class AdaptiveCloseButtonComponent {
             [tabIndex]="-1"
             (click)="close.emit($event)"
         ></button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
             type: Component,
@@ -12855,7 +12851,7 @@ class AdaptiveRendererComponent {
             }
           </ng-template>
         </kendo-actionsheet>
-        `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -13320,7 +13316,7 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     popupRef;
     _svgIcon;
     _value;
@@ -13906,7 +13902,7 @@ class ColorPickerComponent {
           kendoButton
           tabindex="-1"
           type="button"
-          icon="caret-alt-down"
+          icon="chevron-down"
           [size]="size"
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
@@ -13953,7 +13949,7 @@ class ColorPickerComponent {
         @if (isOpen || isAdaptiveModeEnabled) {
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -14055,7 +14051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           kendoButton
           tabindex="-1"
           type="button"
-          icon="caret-alt-down"
+          icon="chevron-down"
           [size]="size"
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
@@ -14410,7 +14406,7 @@ class FormService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }] });
 
@@ -15294,6 +15290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+const ratingStarIcon = {
+    name: 'star',
+    content: '<path d="m22.762 10.668-4.557 3.931 1.389 5.88a1.661 1.661 0 0 1-2.481 1.805L12 19.138l-5.116 3.146a1.661 1.661 0 0 1-2.478-1.805l1.394-5.88-4.557-3.931a1.667 1.667 0 0 1 .943-2.921l5.974-.482 2.304-5.577a1.656 1.656 0 0 1 3.065 0l2.304 5.577 5.973.482a1.667 1.667 0 0 1 .95 2.922z"/>',
+    viewBox: '0 0 24 24'
+};
+const ratingStarOutlineIcon = {
+    name: 'star-outline',
+    content: '<path d="M23.065 8.95a1.44 1.44 0 0 0-1.267-1l-6.101-.493-2.351-5.691a1.454 1.454 0 0 0-2.691 0L8.304 7.454l-6.101.496A1.44 1.44 0 0 0 .936 8.951a1.46 1.46 0 0 0 .433 1.562l4.657 4.011-1.417 5.998a1.46 1.46 0 0 0 .567 1.52 1.43 1.43 0 0 0 1.61.061L12 18.898l5.222 3.211a1.43 1.43 0 0 0 1.611-.061 1.46 1.46 0 0 0 .566-1.52l-1.417-5.998 4.65-4.016a1.46 1.46 0 0 0 .433-1.564m-1.229.644-4.929 4.253a.61.61 0 0 0-.195.599l1.506 6.357a.24.24 0 0 1-.096.261.23.23 0 0 1-.262.009l-5.541-3.404a.61.61 0 0 0-.636 0l-5.54 3.403a.23.23 0 0 1-.263-.01.24.24 0 0 1-.101-.26l1.506-6.358a.61.61 0 0 0-.194-.598l-4.93-4.253a.24.24 0 0 1-.074-.269.23.23 0 0 1 .21-.167l6.471-.522a.61.61 0 0 0 .513-.373l2.493-6.035a.238.238 0 0 1 .444 0l2.494 6.035a.61.61 0 0 0 .512.373l6.472.522a.23.23 0 0 1 .21.167.24.24 0 0 1-.068.269z"/>',
+    viewBox: '0 0 24 24'
+};
 /**
  * Represents the Kendo UI Rating component for Angular.
  * Use this component to let users select a rating value.
@@ -15385,11 +15391,11 @@ class RatingComponent {
     /**
      * Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
-    svgIcon = starIcon;
+    svgIcon = ratingStarIcon;
     /**
      * Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
-    svgIconOutline = starOutlineIcon;
+    svgIconOutline = ratingStarOutlineIcon;
     /**
      * Fires when the user selects a new value.
      */
@@ -15676,7 +15682,7 @@ class RatingComponent {
                   @if (!icon) {
                     <kendo-icon-wrapper
                       size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [name]="item.selected || item.hovered ? 'star' : 'star'"
                       [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
                       >
                     </kendo-icon-wrapper>
@@ -15717,7 +15723,7 @@ class RatingComponent {
                     @if (!icon) {
                       <kendo-icon-wrapper
                         size="xlarge"
-                        [name]="'star-outline'"
+                        [name]="'star'"
                         [svgIcon]="svgIconOutline"
                         >
                       </kendo-icon-wrapper>
@@ -15834,7 +15840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   @if (!icon) {
                     <kendo-icon-wrapper
                       size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [name]="item.selected || item.hovered ? 'star' : 'star'"
                       [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
                       >
                     </kendo-icon-wrapper>
@@ -15875,7 +15881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     @if (!icon) {
                       <kendo-icon-wrapper
                         size="xlarge"
-                        [name]="'star-outline'"
+                        [name]="'star'"
                         [svgIcon]="svgIconOutline"
                         >
                       </kendo-icon-wrapper>
@@ -16939,7 +16945,7 @@ class SignatureComponent {
             </kendo-signature>
           </kendo-dialog>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
@@ -17225,7 +17231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-prefix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-prefix>
  * </kendo-textarea>
  * ```
@@ -17287,7 +17293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-suffix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-suffix>
  * </kendo-textarea>
  * ```
@@ -19442,6 +19448,7 @@ class FormComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass", "attr.dir": "this.direction" } }, providers: [
+            FormService,
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.form' }
         ], exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
@@ -19471,6 +19478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [NgClass, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent],
                     providers: [
+                        FormService,
                         LocalizationService,
                         { provide: L10N_PREFIX, useValue: 'kendo.form' }
                     ],

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776940460,
-  "version": "24.0.0-develop.3",
+  "publishDate": 1778748663,
+  "version": "24.0.0-develop.30",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "24.0.0-develop.3",
+  "version": "24.0.0-develop.30",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -55,7 +55,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776940460,
+      "publishDate": 1778748663,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -65,22 +65,22 @@
     "@angular/core": "19 - 21",
     "@angular/forms": "19 - 21",
     "@angular/platform-browser": "19 - 21",
-    "@progress/kendo-drawing": "^1.24.1",
+    "@progress/kendo-drawing": "^1.25.0",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.3",
-    "@progress/kendo-angular-common": "24.0.0-develop.3",
-    "@progress/kendo-angular-utils": "24.0.0-develop.3",
-    "@progress/kendo-angular-navigation": "24.0.0-develop.3",
-    "@progress/kendo-angular-dialog": "24.0.0-develop.3",
-    "@progress/kendo-angular-intl": "24.0.0-develop.3",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.3",
-    "@progress/kendo-angular-popup": "24.0.0-develop.3",
-    "@progress/kendo-angular-icons": "24.0.0-develop.3",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.30",
+    "@progress/kendo-angular-common": "24.0.0-develop.30",
+    "@progress/kendo-angular-utils": "24.0.0-develop.30",
+    "@progress/kendo-angular-navigation": "24.0.0-develop.30",
+    "@progress/kendo-angular-dialog": "24.0.0-develop.30",
+    "@progress/kendo-angular-intl": "24.0.0-develop.30",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.30",
+    "@progress/kendo-angular-popup": "24.0.0-develop.30",
+    "@progress/kendo-angular-icons": "24.0.0-develop.30",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.3",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.30",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/switch/switch.component.d.ts

@@ -31,6 +31,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     /**
      * @hidden
      */
+    set focusableId(value: string);
     get focusableId(): string;
     /**
      * Set the **On** label.
@@ -120,6 +121,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     protected control: NgControl;
     private domSubscriptions;
     private _checked;
+    private _focusableId;
     private _size;
     private _trackRounded;
     private _thumbRounded;

package/textarea/textarea-prefix.component.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-prefix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-prefix>
  * </kendo-textarea>
  * ```

package/textarea/textarea-suffix.component.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-suffix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-suffix>
  * </kendo-textarea>
  * ```

package/textbox/textbox.component.d.ts

@@ -194,7 +194,6 @@ export declare class TextBoxComponent implements ControlValueAccessor {
      */
     prefixTemplate: PrefixTemplateDirective;
     get disabledClass(): boolean;
-    hostClasses: boolean;
     direction: string;
     /**
      * @hidden