@progress/kendo-angular-inputs 24.0.0-develop.2 → 24.0.0-develop.21

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, starIcon, starOutlineIcon, 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: 1776936110,
-    version: '24.0.0-develop.2',
+    publishDate: 1778160977,
+    version: '24.0.0-develop.21',
     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"
                   >
@@ -8792,7 +8793,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 +10301,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 +11576,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 +11732,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 +12726,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 +12856,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 +13321,7 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     popupRef;
     _svgIcon;
     _value;
@@ -13906,7 +13907,7 @@ class ColorPickerComponent {
           kendoButton
           tabindex="-1"
           type="button"
-          icon="caret-alt-down"
+          icon="chevron-down"
           [size]="size"
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
@@ -13953,7 +13954,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 +14056,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 +14411,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'
                 }]
         }] });
 
@@ -16939,7 +16940,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 +17226,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 +17288,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 +19443,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 +19473,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": 1776936110,
-  "version": "24.0.0-develop.2",
+  "publishDate": 1778160977,
+  "version": "24.0.0-develop.21",
   "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.2",
+  "version": "24.0.0-develop.21",
   "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": 1776936110,
+      "publishDate": 1778160977,
       "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.2",
-    "@progress/kendo-angular-common": "24.0.0-develop.2",
-    "@progress/kendo-angular-utils": "24.0.0-develop.2",
-    "@progress/kendo-angular-navigation": "24.0.0-develop.2",
-    "@progress/kendo-angular-dialog": "24.0.0-develop.2",
-    "@progress/kendo-angular-intl": "24.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.2",
-    "@progress/kendo-angular-popup": "24.0.0-develop.2",
-    "@progress/kendo-angular-icons": "24.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.21",
+    "@progress/kendo-angular-common": "24.0.0-develop.21",
+    "@progress/kendo-angular-utils": "24.0.0-develop.21",
+    "@progress/kendo-angular-navigation": "24.0.0-develop.21",
+    "@progress/kendo-angular-dialog": "24.0.0-develop.21",
+    "@progress/kendo-angular-intl": "24.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.21",
+    "@progress/kendo-angular-popup": "24.0.0-develop.21",
+    "@progress/kendo-angular-icons": "24.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.21",
     "@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>
  * ```