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

package/esm2020/colorpicker/colorpicker.component.mjs

@@ -847,7 +847,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/colorpicker/contrast-validation.component.mjs

@@ -43,7 +43,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/colorpicker/contrast.component.mjs

@@ -62,7 +62,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/numerictextbox/numerictextbox.component.mjs

@@ -947,7 +947,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+      `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846629,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972863,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/slider/slider.component.mjs

@@ -405,6 +405,38 @@ export class SliderComponent extends SliderBase {
             }));
         });
     }
+    get decreaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-left' :
+                'caret-alt-right' :
+            'caret-alt-down';
+        return icon;
+    }
+    get increaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-up';
+        return icon;
+    }
+    get decreaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowLeftIcon :
+                this.arrowRightIcon :
+            this.arrowDownIcon;
+        return icon;
+    }
+    get increaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowRightIcon :
+                this.arrowLeftIcon :
+            this.arrowUpIcon;
+        return icon;
+    }
 }
 SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
 SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SliderComponent, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
@@ -427,8 +459,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -483,8 +515,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"
@@ -519,8 +551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -575,8 +607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"

package/esm2020/textbox/textbox.component.mjs

@@ -608,7 +608,7 @@ export class TextBoxComponent {
     }
 }
 TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", errorIcon: "errorIcon", clearButtonIcon: "clearButtonIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", 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" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
         {
@@ -658,7 +658,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -667,7 +667,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -675,7 +675,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -684,7 +684,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
             </ng-template>
         </span>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -741,7 +741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -750,7 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -758,7 +758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -791,10 +791,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSvgIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSvgIcon: [{
+                type: Input
             }], clearButtonIcon: [{
                 type: Input
+            }], clearButtonSvgIcon: [{
+                type: Input
             }], size: [{
                 type: Input
             }], rounded: [{

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

@@ -539,8 +539,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846629,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972863,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1378,6 +1378,38 @@ class SliderComponent extends SliderBase {
             }));
         });
     }
+    get decreaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-left' :
+                'caret-alt-right' :
+            'caret-alt-down';
+        return icon;
+    }
+    get increaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-up';
+        return icon;
+    }
+    get decreaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowLeftIcon :
+                this.arrowRightIcon :
+            this.arrowDownIcon;
+        return icon;
+    }
+    get increaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowRightIcon :
+                this.arrowLeftIcon :
+            this.arrowUpIcon;
+        return icon;
+    }
 }
 SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
 SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SliderComponent, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
@@ -1400,8 +1432,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -1456,8 +1488,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"
@@ -1492,8 +1524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -1548,8 +1580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"
@@ -4352,7 +4384,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6786,7 +6818,7 @@ class TextBoxComponent {
     }
 }
 TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", errorIcon: "errorIcon", clearButtonIcon: "clearButtonIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", 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" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
         {
@@ -6836,7 +6868,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -6845,7 +6877,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -6853,7 +6885,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -6862,7 +6894,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
             </ng-template>
         </span>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6919,7 +6951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -6928,7 +6960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -6936,7 +6968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -6969,10 +7001,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSvgIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSvgIcon: [{
+                type: Input
             }], clearButtonIcon: [{
                 type: Input
+            }], clearButtonSvgIcon: [{
+                type: Input
             }], size: [{
                 type: Input
             }], rounded: [{
@@ -9296,7 +9334,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -9374,7 +9412,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -12827,7 +12865,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -538,8 +538,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846629,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972863,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1375,6 +1375,38 @@ class SliderComponent extends SliderBase {
             }));
         });
     }
+    get decreaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-left' :
+                'caret-alt-right' :
+            'caret-alt-down';
+        return icon;
+    }
+    get increaseButtonArrowIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-up';
+        return icon;
+    }
+    get decreaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowLeftIcon :
+                this.arrowRightIcon :
+            this.arrowDownIcon;
+        return icon;
+    }
+    get increaseButtonArrowSVGIcon() {
+        const icon = !this.vertical ?
+            this.direction === 'ltr' ?
+                this.arrowRightIcon :
+                this.arrowLeftIcon :
+            this.arrowUpIcon;
+        return icon;
+    }
 }
 SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
 SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SliderComponent, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
@@ -1397,8 +1429,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -1453,8 +1485,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"
@@ -1489,8 +1521,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
-            [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+            [icon]="decreaseButtonArrowIcon"
+            [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
             [attr.tabindex]="-1"
@@ -1545,8 +1577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngIf="showButtons"
             type="button"
             rounded="full"
-            [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
-            [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+            [icon]="increaseButtonArrowIcon"
+            [svgIcon]="increaseButtonArrowSVGIcon"
             class="k-button-increase"
             [title]="incrementMessage"
             (click)="$event.preventDefault()"
@@ -4345,7 +4377,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6773,7 +6805,7 @@ class TextBoxComponent {
     }
 }
 TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", errorIcon: "errorIcon", clearButtonIcon: "clearButtonIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", 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" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
         {
@@ -6823,7 +6855,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -6832,7 +6864,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -6840,7 +6872,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -6849,7 +6881,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
             </ng-template>
         </span>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6906,7 +6938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="clearButtonClass"
                     [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="svgIcon('xIcon')"
+                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
                 >
                 </kendo-icon-wrapper>
         </span>
@@ -6915,7 +6947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="errorIconClasses"
             [customFontClass]="customIconClasses"
-            [svgIcon]="svgIcon('exclamationCircleIcon')"
+            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
         >
         </kendo-icon-wrapper>
         <kendo-icon-wrapper
@@ -6923,7 +6955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             innerCssClass="k-input-validation-icon"
             [name]="successIconClasses"
             [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="svgIcon('checkIcon')"
+            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
         >
         </kendo-icon-wrapper>
         <span class="k-input-suffix">
@@ -6956,10 +6988,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSvgIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSvgIcon: [{
+                type: Input
             }], clearButtonIcon: [{
                 type: Input
+            }], clearButtonSvgIcon: [{
+                type: Input
             }], size: [{
                 type: Input
             }], rounded: [{
@@ -9069,7 +9107,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -9147,7 +9185,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -12795,7 +12833,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "13.0.0-develop.2",
+  "version": "13.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",
@@ -33,19 +33,19 @@
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "13.0.0-develop.2",
-    "@progress/kendo-angular-common": "13.0.0-develop.2",
-    "@progress/kendo-angular-dialog": "13.0.0-develop.2",
-    "@progress/kendo-angular-intl": "13.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "13.0.0-develop.2",
-    "@progress/kendo-angular-popup": "13.0.0-develop.2",
-    "@progress/kendo-angular-icons": "13.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "13.0.0-develop.21",
+    "@progress/kendo-angular-common": "13.0.0-develop.21",
+    "@progress/kendo-angular-dialog": "13.0.0-develop.21",
+    "@progress/kendo-angular-intl": "13.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "13.0.0-develop.21",
+    "@progress/kendo-angular-popup": "13.0.0-develop.21",
+    "@progress/kendo-angular-icons": "13.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-upload": "13.0.0-develop.2"
+    "@progress/kendo-angular-upload": "13.0.0-develop.21"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "13.0.0-develop.21",
     "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/slider/slider.component.d.ts

@@ -166,6 +166,10 @@ export declare class SliderComponent extends SliderBase implements AfterViewInit
     private isSliderInvalid;
     private attachElementEventHandlers;
     private handleBlur;
+    get decreaseButtonArrowIcon(): string;
+    get increaseButtonArrowIcon(): string;
+    get decreaseButtonArrowSVGIcon(): SVGIcon;
+    get increaseButtonArrowSVGIcon(): SVGIcon;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "kendo-slider", ["kendoSlider"], { "focusableId": "focusableId"; "dragHandleTitle": "dragHandleTitle"; "incrementTitle": "incrementTitle"; "animate": "animate"; "decrementTitle": "decrementTitle"; "showButtons": "showButtons"; "value": "value"; "tabIndex": "tabIndex"; }, {}, never, never>;
 }

package/textbox/textbox.component.d.ts

@@ -89,14 +89,26 @@ export declare class TextBoxComponent implements ControlValueAccessor {
      * Sets a custom icon that will be rendered instead of the default one for a valid user input.
      */
     successIcon: string;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one for a valid user input.
+     */
+    successSvgIcon: SVGIcon;
     /**
      * Sets a custom icon that will be rendered instead of the default one for invalid user input.
      */
     errorIcon: string;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one for invalid user input.
+     */
+    errorSvgIcon: SVGIcon;
     /**
      * Sets a custom icon that will be rendered instead of the default one.
      */
     clearButtonIcon: string;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one.
+     */
+    clearButtonSvgIcon: SVGIcon;
     /**
      * The size property specifies the padding of the TextBox internal input element
      * ([see example]({% slug appearance_textbox %}#toc-size)).
@@ -360,5 +372,5 @@ export declare class TextBoxComponent implements ControlValueAccessor {
     private handleBlur;
     private handleClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextBoxComponent, "kendo-textbox", ["kendoTextBox"], { "focusableId": "focusableId"; "title": "title"; "disabled": "disabled"; "readonly": "readonly"; "tabindex": "tabindex"; "value": "value"; "selectOnFocus": "selectOnFocus"; "showSuccessIcon": "showSuccessIcon"; "showErrorIcon": "showErrorIcon"; "clearButton": "clearButton"; "successIcon": "successIcon"; "errorIcon": "errorIcon"; "clearButtonIcon": "clearButtonIcon"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "tabIndex": "tabIndex"; "placeholder": "placeholder"; "maxlength": "maxlength"; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "onFocus": "focus"; "onBlur": "blur"; }, ["suffixTemplate", "prefixTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextBoxComponent, "kendo-textbox", ["kendoTextBox"], { "focusableId": "focusableId"; "title": "title"; "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"; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "onFocus": "focus"; "onBlur": "blur"; }, ["suffixTemplate", "prefixTemplate"], never>;
 }