@progress/kendo-angular-inputs 7.5.1 → 8.0.0-dev.202112211528

package/dist/es2015/main.d.ts

@@ -7,7 +7,6 @@ export { RangeSliderComponent } from './rangeslider/rangeslider.component';
 export { RangeSliderValue } from './rangeslider/rangeslider-value.type';
 export { LabelTemplateDirective } from './sliders-common/label-template.directive';
 export { SwitchComponent } from './switch/switch.component';
-export { TextBoxContainerComponent } from './textbox/textbox-container.component';
 export { TextBoxDirective } from './textbox/textbox.directive';
 export { TextAreaDirective } from './shared/textarea.directive';
 export { NumericTextBoxComponent } from './numerictextbox/numerictextbox.component';
@@ -22,6 +21,7 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+export { InputRounded, CheckBoxRounded, InputFillMode, InputSize } from './common/models';
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';
 export { ColorGradientComponent } from './colorpicker/color-gradient.component';
@@ -30,9 +30,12 @@ export { PopupSettings } from './colorpicker/models';
 export { TileSize } from './colorpicker/models';
 export { PaletteSettings } from './colorpicker/models';
 export { OutputFormat } from './colorpicker/models';
-export { ActiveColorClickEvent } from './colorpicker/models';
+export * from './colorpicker/events';
 export { ColorPickerView } from './colorpicker/models';
 export { GradientSettings } from './colorpicker/models';
+export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
+export { ColorPickerActionsLayout } from './colorpicker/models/actions-layout';
+export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

package/dist/es2015/main.js

@@ -6,7 +6,6 @@ export { SliderComponent } from './slider/slider.component';
 export { RangeSliderComponent } from './rangeslider/rangeslider.component';
 export { LabelTemplateDirective } from './sliders-common/label-template.directive';
 export { SwitchComponent } from './switch/switch.component';
-export { TextBoxContainerComponent } from './textbox/textbox-container.component';
 export { TextBoxDirective } from './textbox/textbox.directive';
 export { TextAreaDirective } from './shared/textarea.directive';
 export { NumericTextBoxComponent } from './numerictextbox/numerictextbox.component';
@@ -21,11 +20,14 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+// All ColorPicker Components
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';
 export { ColorGradientComponent } from './colorpicker/color-gradient.component';
 export { ColorPickerModule } from './colorpicker.module';
-export { ActiveColorClickEvent } from './colorpicker/models';
+export * from './colorpicker/events';
+export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
+export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts

@@ -5,6 +5,9 @@
 import { ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges, NgZone, Injector, ChangeDetectorRef } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { MaskingService } from './masking.service';
+import { InputSize } from '../common/models';
+import { InputRounded } from '../common/models/rounded';
+import { InputFillMode } from '../common/models/fillmode';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -50,6 +53,36 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * Sets the title of the `input` element.
      */
     title: string;
+    /**
+     * The size property specifies the font size and line height of the MaskedTextBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * The rounded property specifies the border radius of the MaskedTextBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-rounded)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    rounded: InputRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the MaskedTexBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-fillMode)).
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `null`
+     */
+    fillMode: InputFillMode;
     direction: string;
     hostClasses: boolean;
     readonly hostDisabledClass: boolean;
@@ -162,11 +195,15 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     private isPasted;
     private selection;
     private control;
+    private _size;
+    private _rounded;
+    private _fillMode;
     constructor(service: MaskingService, renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, injector: Injector, changeDetector: ChangeDetectorRef, rtl: boolean);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the MaskedTextBox is empty.
+     * Used by the FloatingLabel to determine if the MaskedTextBox is empty.
      */
     isEmpty(): boolean;
     /**
@@ -258,4 +295,5 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     private setFocusSelection;
     private focused;
     private normalizeValue;
+    private handleClasses;
 }

package/dist/es2015/maskedtextbox/maskedtextbox.component.js

@@ -12,9 +12,9 @@ import { packageMetadata } from '../package-metadata';
 import { MaskingService } from './masking.service';
 import { isChanged, anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
 import { invokeElementMethod } from '../common/dom-utils';
-import { requiresZoneOnBlur, isPresent } from '../common/utils';
+import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
 const resolvedPromise = Promise.resolve(null);
-const FOCUSED = 'k-state-focused';
+const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -147,6 +147,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         };
         this.isPasted = false;
         this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -199,6 +202,54 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         this.direction = rtl ? 'rtl' : 'ltr';
         this.updateService();
     }
+    /**
+     * The size property specifies the font size and line height of the MaskedTextBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the MaskedTextBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-rounded)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the MaskedTexBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-fillMode)).
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     get hostDisabledClass() {
         return this.disabled;
     }
@@ -226,9 +277,15 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         }
         this.control = this.injector.get(NgControl, null);
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the MaskedTextBox is empty.
+     * Used by the FloatingLabel to determine if the MaskedTextBox is empty.
      */
     isEmpty() {
         if (this.input) {
@@ -467,6 +524,16 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         }
         return present ? value : '';
     }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -484,17 +551,32 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], MaskedTextBoxComponent.prototype, "title", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String)
 ], MaskedTextBoxComponent.prototype, "direction", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
+    HostBinding('class.k-input'),
     HostBinding('class.k-maskedtextbox'),
     tslib_1.__metadata("design:type", Boolean)
 ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
@@ -596,7 +678,7 @@ MaskedTextBoxComponent = MaskedTextBoxComponent_1 = tslib_1.__decorate([
             autocorrect="off"
             autocapitalize="off"
             spellcheck="false"
-            class="k-textbox"
+            class="k-input-inner"
             [id]="focusableId"
             [tabindex]="tabIndex"
             [attr.title]="title"

package/dist/es2015/numerictextbox/numerictextbox.component.d.ts

@@ -8,6 +8,7 @@ import { IntlService, NumberFormatOptions } from '@progress/kendo-angular-intl';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ArrowDirection } from './arrow-direction';
 import { Subscription } from 'rxjs';
+import { InputSize, InputRounded, InputFillMode } from '../common/models';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -111,6 +112,36 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
      * The `maxlength` restriction is not applied to the length of the formatted value when the component is not focused.
      */
     maxlength: number;
+    /**
+     * The size property specifies the font size and line height of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * The rounded property specifies the border radius of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-rounded)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    rounded: InputRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-fillMode)).
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    fillMode: InputFillMode;
     /**
      * Fires each time the user selects a new value ([see example]({% slug overview_numerictextbox %}#toc-events)).
      */
@@ -127,7 +158,6 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
      * @hidden
      */
     numericInput: ElementRef;
-    numericWrap: ElementRef;
     direction: string;
     /**
      * @hidden
@@ -137,7 +167,8 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
      * @hidden
      */
     arrowDirection: ArrowDirection;
-    readonly widgetClasses: boolean;
+    readonly disableClass: boolean;
+    hostClasses: boolean;
     protected subscriptions: Subscription;
     protected inputValue: string;
     protected spinTimeout: number;
@@ -151,11 +182,16 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
     protected control: NgControl;
     protected isPasted: boolean;
     protected mouseDown: boolean;
+    private _size;
+    private _rounded;
+    private _fillMode;
     private ngChange;
     private ngTouched;
     private ngValidatorChange;
+    private domEvents;
     constructor(intl: IntlService, renderer: Renderer2, localizationService: LocalizationService, injector: Injector, ngZone: NgZone, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -301,4 +337,5 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
     private selectCaret;
     private numberOfLeadingZeroes;
     private adjustSignificantChars;
+    private handleClasses;
 }

package/dist/es2015/numerictextbox/numerictextbox.component.js

@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
 var NumericTextBoxComponent_1;
 import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector } from '@angular/core';
 import { anyChanged, hasObservers, Keys, guid, KendoInput } from '@progress/kendo-angular-common';
-import { areSame, requiresZoneOnBlur } from '../common/utils';
+import { areSame, getStylingClasses, requiresZoneOnBlur } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { add, toFixedPrecision, limitPrecision } from '../common/math';
 import { createMaxValidator } from '../validators/max.validator';
@@ -27,8 +27,7 @@ const PARSABLE_DEFAULTS = {
     min: null,
     step: 1
 };
-const FOCUSED = 'k-state-focused';
-const FORMATTED_VALUE = 'k-formatted-value';
+const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -123,15 +122,20 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
          * @hidden
          */
         this.arrowDirection = ArrowDirection.None;
+        this.hostClasses = true;
         this.inputValue = '';
         this.minValidateFn = noop;
         this.maxValidateFn = noop;
         this._format = "n2";
         this.isPasted = false;
         this.mouseDown = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.ngChange = noop;
         this.ngTouched = noop;
         this.ngValidatorChange = noop;
+        this.domEvents = [];
         /**
          * @hidden
          */
@@ -317,8 +321,56 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
     get tabIndex() {
         return this.tabindex;
     }
-    get widgetClasses() {
-        return true;
+    /**
+     * The size property specifies the font size and line height of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-rounded)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the NumericTextBox
+     * ([see example]({% slug appearance_numerictextbox %}#toc-fillMode)).
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    get disableClass() {
+        return this.disabled;
     }
     ngOnInit() {
         this.subscriptions = this.localizationService
@@ -331,6 +383,16 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
         }
         this.control = this.injector.get(NgControl, null);
+        this.ngZone.runOutsideAngular(() => {
+            this.domEvents.push(this.renderer.listen(this.hostElement.nativeElement, 'mousewheel', this.handleWheel.bind(this)));
+            this.domEvents.push(this.renderer.listen(this.hostElement.nativeElement, 'DOMMouseScroll', this.handleWheel.bind(this)));
+        });
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
     }
     /**
      * @hidden
@@ -364,6 +426,7 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
             this.subscriptions.unsubscribe();
         }
         clearTimeout(this.spinTimeout);
+        this.domEvents.forEach(unbindHandler => unbindHandler());
     }
     /**
      * @hidden
@@ -469,18 +532,13 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
         return this.decimals !== null && this.decimals >= 0;
     }
     set focused(value) {
-        if (this.isFocused !== value && this.numericWrap) {
-            const wrap = this.numericWrap.nativeElement;
-            const input = this.numericInput.nativeElement;
+        if (this.isFocused !== value && this.hostElement) {
+            const wrap = this.hostElement.nativeElement;
             if (value) {
                 this.renderer.addClass(wrap, FOCUSED);
-                if (!this.isDisabled) {
-                    this.renderer.removeClass(input, FORMATTED_VALUE);
-                }
             }
             else {
                 this.renderer.removeClass(wrap, FOCUSED);
-                this.renderer.addClass(input, FORMATTED_VALUE);
             }
             this.isFocused = value;
         }
@@ -771,6 +829,16 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
         }
         return significantChars;
     }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -850,6 +918,21 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number)
 ], NumericTextBoxComponent.prototype, "maxlength", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -866,20 +949,20 @@ tslib_1.__decorate([
     ViewChild('numericInput', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
 ], NumericTextBoxComponent.prototype, "numericInput", void 0);
-tslib_1.__decorate([
-    ViewChild('numericWrap', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], NumericTextBoxComponent.prototype, "numericWrap", void 0);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String)
 ], NumericTextBoxComponent.prototype, "direction", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-numerictextbox'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
-], NumericTextBoxComponent.prototype, "widgetClasses", null);
+], NumericTextBoxComponent.prototype, "disableClass", null);
+tslib_1.__decorate([
+    HostBinding('class.k-input'),
+    HostBinding('class.k-numerictextbox'),
+    tslib_1.__metadata("design:type", Boolean)
+], NumericTextBoxComponent.prototype, "hostClasses", void 0);
 NumericTextBoxComponent = NumericTextBoxComponent_1 = tslib_1.__decorate([
     Component({
         exportAs: 'kendoNumericTextBox',
@@ -899,14 +982,9 @@ NumericTextBoxComponent = NumericTextBoxComponent_1 = tslib_1.__decorate([
             decrement="Decrease value"
         >
         </ng-container>
-        <span
-            class="k-numeric-wrap"
-            [class.k-state-disabled]="disabled"
-            [kendoEventsOutsideAngular]="{ mousewheel: handleWheel, DOMMouseScroll: handleWheel }"
-            #numericWrap>
             <input
             role="spinbutton"
-            class="k-input k-formatted-value"
+            class="k-input-inner"
             autocomplete="off"
             autocorrect="off"
             [id]="focusableId"
@@ -929,29 +1007,35 @@ NumericTextBoxComponent = NumericTextBoxComponent_1 = tslib_1.__decorate([
                 paste: handlePaste
             }"
             #numericInput />
-            <span class="k-select" *ngIf="spinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }">
-                <span
-                    role="button"
+            <span
+                class="k-input-spinner k-spin-button" *ngIf="spinners"
+                [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
+            >
+               <button
+                    type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
+                    [attr.aria-hidden]="true"
                     [attr.aria-label]="incrementTitle"
                     [title]="incrementTitle"
-                    [class.k-state-active]="arrowDirection === ArrowDirection.Up"
-                    class="k-link k-link-increase"
+                    [class.k-active]="arrowDirection === ArrowDirection.Up"
+                    class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
+                    tabindex="-1"
                 >
-                    <span class="k-icon k-i-arrow-n"></span>
-                </span>
-                <span
-                    role="button"
+                    <span class="k-button-icon k-icon k-i-arrow-n"></span>
+               </button>
+               <button
+                    type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
+                    [attr.aria-hidden]="true"
                     [attr.aria-label]="decrementTitle"
                     [title]="decrementTitle"
-                    [class.k-state-active]="arrowDirection === ArrowDirection.Down"
-                    class="k-link k-link-decrease"
-                >
-                    <span class="k-icon k-i-arrow-s"></span>
-                </span>
+                    [class.k-active]="arrowDirection === ArrowDirection.Down"
+                    class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
+                    tabindex="-1"
+               >
+                    <span class="k-button-icon k-icon k-i-arrow-s"></span>
+               </button>
             </span>
-        </span>
       `
     }),
     tslib_1.__metadata("design:paramtypes", [IntlService,

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940293,
+    publishDate: 1640100237,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/radiobutton/radiobutton.directive.d.ts

@@ -2,6 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2 } from '@angular/core';
+import { InputSize } from '../common/models';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -12,5 +14,21 @@
  * ```
  */
 export declare class RadioButtonDirective {
+    private renderer;
+    private hostElement;
     kendoClass: boolean;
+    /**
+     * The size property specifies the width and height of the RadioButton
+     * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    private _size;
+    constructor(renderer: Renderer2, hostElement: ElementRef);
+    ngAfterViewInit(): void;
+    private handleClasses;
 }