@progress/kendo-angular-inputs 8.0.0-dev.202112161434 → 8.0.0-dev.202201121416

package/dist/fesm2015/index.js

@@ -5,10 +5,10 @@
 import { __decorate, __param, __metadata } from 'tslib';
 import { isDevMode, Directive, Optional, TemplateRef, EventEmitter, Input, Output, HostBinding, ViewChild, ElementRef, ContentChild, Component, forwardRef, Injector, Renderer2, NgZone, ChangeDetectorRef, Inject, Injectable, HostListener, ViewChildren, QueryList, NgModule, ViewContainerRef, ContentChildren } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
-import { Subscription, fromEvent, interval, merge, Observable, BehaviorSubject, Subject } from 'rxjs';
+import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -46,6 +46,43 @@ const fitIntoBounds = (contender, min, max) => {
     }
     return contender <= min ? min : contender >= max ? max : contender;
 };
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+const ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+            };
+        case 'rounded':
+            return {
+                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
+                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+            };
+        case 'fillMode':
+            return {
+                toRemove: `k-${componentType}-${previousValue}`,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+            };
+        default:
+            break;
+    }
+};
 
 /**
  * @hidden
@@ -445,7 +482,7 @@ const containsFocus = (hostElement, contender) => hostElement && contender && (h
 /**
  * @hidden
  */
-const closest = (node, predicate) => {
+const closest$1 = (node, predicate) => {
     while (node && !predicate(node)) {
         node = node.parentNode;
     }
@@ -459,7 +496,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639665048,
+    publishDate: 1641996688,
     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'
 };
@@ -1209,33 +1246,28 @@ SliderComponent = SliderComponent_1 = __decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <span
-                #decreaseButton
-                *ngIf="showButtons"
-                class="k-button k-button-decrease"
+            <button *ngIf="showButtons" type="button" #decreaseButton
+                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="decrementMessage"
-                role="presentation"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-w]="!vertical"
-                    [class.k-i-arrow-s]="vertical"
-                >
-                </span>
-            </span>
-            <span
-                *ngIf="showButtons"
-                #increaseButton
-                class="k-button k-button-increase"
+                [attr.tabindex]="-1"
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-w]="!vertical"
+                        [class.k-i-arrow-s]="vertical">
+                    </span>
+            </button>
+            <button *ngIf="showButtons" type="button" #increaseButton
+                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
+                [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-e]="!vertical"
-                    [class.k-i-arrow-n]="vertical"
-                >
-                </span>
-            </span>
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-e]="!vertical"
+                        [class.k-i-arrow-n]="vertical">
+                    </span>
+            </button>
             <ul kendoSliderTicks
                 #ticks
                 *ngIf="tickPlacement !== 'none'"
@@ -1831,7 +1863,7 @@ RangeSliderComponent = RangeSliderComponent_1 = __decorate([
 ], RangeSliderComponent);
 
 var SwitchComponent_1;
-const FOCUSED = 'k-state-focused';
+const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -1876,13 +1908,20 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
          * @hidden
          */
         this.initialized = false;
+        this.hostClickSubscription = new Subscription;
         this._checked = false;
+        this._size = 'medium';
+        this._trackRounded = 'full';
+        this._thumbRounded = 'full';
         this.ngChange = (_) => { };
         this.ngTouched = () => { };
         /**
          * @hidden
          */
         this.handleFocus = () => {
+            if (this.isFocused) {
+                return;
+            }
             this.focused = true;
             if (hasObservers(this.onFocus)) {
                 this.ngZone.run(() => {
@@ -1893,7 +1932,11 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         /**
          * @hidden
          */
-        this.handleBlur = () => {
+        this.handleBlur = (event) => {
+            const relatedTarget = event && event.relatedTarget;
+            if (this.hostElement.nativeElement.contains(relatedTarget)) {
+                return;
+            }
             this.changeDetector.markForCheck();
             this.focused = false;
             if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
@@ -1918,6 +1961,56 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     get checked() {
         return this._checked;
     }
+    /**
+     * Specifies the size of the Switch.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Specifies the border radius of the Switch thumb.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    set thumbRounded(thumbRounded) {
+        this.handleThumbClasses(thumbRounded);
+        this._thumbRounded = thumbRounded;
+    }
+    get thumbRounded() {
+        return this._thumbRounded;
+    }
+    /**
+     * Specifies the border radius of the Switch track.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    set trackRounded(trackRounded) {
+        this.handleTrackClasses(trackRounded);
+        this._trackRounded = trackRounded;
+    }
+    get trackRounded() {
+        return this._trackRounded;
+    }
     /**
      * @hidden
      */
@@ -1968,10 +2061,23 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         this.control = this.injector.get(NgControl, null);
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
     }
+    ngAfterViewInit() {
+        const wrapper = this.hostElement.nativeElement;
+        this.attachHostClickHandler();
+        if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+        this.handleClasses(this.size, 'size');
+        this.handleTrackClasses(this.trackRounded);
+        this.handleThumbClasses(this.thumbRounded);
+    }
     ngOnDestroy() {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.hostClickSubscription) {
+            this.hostClickSubscription.unsubscribe();
+        }
     }
     /**
      * Focuses the Switch.
@@ -1989,19 +2095,19 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
      * ```
      */
     focus() {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.focus();
+        this.track.nativeElement.focus();
     }
     /**
      * Blurs the Switch.
      */
     blur() {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.blur();
+        this.track.nativeElement.blur();
     }
     /**
      * @hidden
@@ -2051,7 +2157,7 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     }
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty() {
         return false;
@@ -2068,24 +2174,63 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     }
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
-            const element = this.hostElement.nativeElement;
+            const wrapper = this.hostElement.nativeElement;
             if (value) {
-                this.renderer.addClass(element, FOCUSED);
+                this.renderer.addClass(wrapper, FOCUSED);
             }
             else {
-                this.renderer.removeClass(element, FOCUSED);
+                this.renderer.removeClass(wrapper, FOCUSED);
             }
             this.isFocused = value;
         }
     }
+    attachHostClickHandler() {
+        this.ngZone.runOutsideAngular(() => {
+            this.hostClickSubscription.add(this.renderer.listen(this.hostElement.nativeElement, 'click', this.clickHandler));
+        });
+    }
     setHostClasses(value) {
+        const wrapper = this.hostElement.nativeElement;
         if (value) {
-            this.renderer.removeClass(this.hostElement.nativeElement, 'k-switch-off');
-            this.renderer.addClass(this.hostElement.nativeElement, 'k-switch-on');
+            this.renderer.removeClass(wrapper, 'k-switch-off');
+            this.renderer.addClass(wrapper, 'k-switch-on');
         }
         else {
-            this.renderer.removeClass(this.hostElement.nativeElement, 'k-switch-on');
-            this.renderer.addClass(this.hostElement.nativeElement, 'k-switch-off');
+            this.renderer.removeClass(wrapper, 'k-switch-on');
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('switch', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleTrackClasses(value) {
+        const elem = this.hostElement.nativeElement;
+        const track = this.track.nativeElement;
+        const classes = getStylingClasses('switch', 'rounded', this.trackRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+            this.renderer.removeClass(track, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+            this.renderer.addClass(track, classes.toAdd);
+        }
+    }
+    handleThumbClasses(value) {
+        const thumb = this.thumb.nativeElement;
+        const classes = getStylingClasses('switch', 'rounded', this.thumbRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(thumb, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(thumb, classes.toAdd);
         }
     }
 };
@@ -2118,6 +2263,21 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], SwitchComponent.prototype, "tabindex", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SwitchComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SwitchComponent.prototype, "thumbRounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SwitchComponent.prototype, "trackRounded", null);
 __decorate([
     Input(),
     __metadata("design:type", Number),
@@ -2135,10 +2295,6 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], SwitchComponent.prototype, "valueChange", void 0);
-__decorate([
-    ViewChild('wrapper', { static: true }),
-    __metadata("design:type", Object)
-], SwitchComponent.prototype, "wrapper", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
@@ -2163,10 +2319,18 @@ __decorate([
     __metadata("design:type", Boolean)
 ], SwitchComponent.prototype, "hostClasses", void 0);
 __decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], SwitchComponent.prototype, "disabledClass", null);
+__decorate([
+    ViewChild('track', { static: true }),
+    __metadata("design:type", Object)
+], SwitchComponent.prototype, "track", void 0);
+__decorate([
+    ViewChild('thumb', { static: true }),
+    __metadata("design:type", Object)
+], SwitchComponent.prototype, "thumb", void 0);
 SwitchComponent = SwitchComponent_1 = __decorate([
     Component({
         exportAs: 'kendoSwitch',
@@ -2193,18 +2357,27 @@ SwitchComponent = SwitchComponent_1 = __decorate([
         >
 
         <span
-            #wrapper
-            class="k-switch-container"
+            #track
+            class="k-switch-track"
             [id]="focusableId"
             role="switch"
             [style.transitionDuration]="initialized ? '200ms' : '0ms'"
             [attr.aria-checked]="checked"
             [attr.tabindex]="(disabled ? undefined : tabIndex)"
-            [kendoEventsOutsideAngular]="{ click: clickHandler, keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
+            [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
         >
             <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
             <span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
-            <span class="k-switch-handle" [style.transitionDuration]="initialized ? '200ms' : '0ms'"></span>
+        </span>
+        <span
+            class="k-switch-thumb-wrap"
+            tabindex="-1"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
+                keydown: keyDownHandler,
+                focus: handleFocus,
+                blur: handleBlur
+            }">
+            <span #thumb class="k-switch-thumb"></span>
         </span>
   `
     }),
@@ -2216,6 +2389,112 @@ SwitchComponent = SwitchComponent_1 = __decorate([
         NgZone])
 ], SwitchComponent);
 
+var TextBoxDirective_1;
+/**
+ * Represents the [Kendo UI TextBox directive]({% slug overview_textbox %}) for the Inputs components for Angular.
+ * Used to style the textbox of any `input` element.
+ *
+ * @example
+ * ```ts-no-run
+ * <input kendoTextBox />
+ * <input kendoTextBox type="email" />
+ * <input kendoTextBox type="password" />
+ * ```
+ */
+let TextBoxDirective = TextBoxDirective_1 = class TextBoxDirective {
+    constructor(renderer, inputElement, ngZone) {
+        this.renderer = renderer;
+        this.inputElement = inputElement;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.onValueChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.autoFillStart = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.autoFillEnd = new EventEmitter();
+        this.listeners = [];
+    }
+    /**
+     * @hidden
+     */
+    set value(text) {
+        if (!this.inputElement) {
+            return;
+        }
+        this.inputElement.nativeElement.value = (text === undefined || text === null) ? '' : text;
+        this.onValueChange.emit();
+    }
+    /**
+     * @hidden
+     */
+    get value() {
+        return this.inputElement.nativeElement.value;
+    }
+    get id() {
+        return this.inputElement.nativeElement.id;
+    }
+    set id(id) {
+        this.renderer.setAttribute(this.inputElement.nativeElement, 'id', id);
+    }
+    ngAfterViewInit() {
+        const input = this.inputElement.nativeElement;
+        this.listeners = [
+            this.renderer.listen(input, 'focus', () => this.onFocus.emit()),
+            this.renderer.listen(input, 'blur', () => this.onBlur.emit())
+        ];
+        this.ngZone.runOutsideAngular(() => {
+            this.renderer.listen(input, 'animationstart', (e) => {
+                if (e.animationName === 'autoFillStart') {
+                    this.autoFillStart.emit();
+                }
+                else if (e.animationName === 'autoFillEnd') {
+                    this.autoFillEnd.emit();
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.listeners.forEach(listener => listener());
+    }
+};
+__decorate([
+    HostBinding('class.k-textbox'),
+    HostBinding('class.k-input'),
+    __metadata("design:type", Boolean)
+], TextBoxDirective.prototype, "hostClasses", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextBoxDirective.prototype, "value", null);
+TextBoxDirective = TextBoxDirective_1 = __decorate([
+    Directive({
+        selector: 'input[kendoTextBox]',
+        providers: [{
+                provide: KendoInput,
+                useExisting: forwardRef(() => TextBoxDirective_1)
+            }]
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef,
+        NgZone])
+], TextBoxDirective);
+
 var TextAreaDirective_1;
 /**
  * Represents the [Kendo UI TextArea directive for the Inputs components for Angular]({% slug overview_textarea %}).
@@ -2233,7 +2512,7 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
         this.zone = zone;
         this.changeDetector = changeDetector;
         this.injector = injector;
-        this.elementClass = true;
+        this.elementClasses = true;
         this.autofillClass = true;
         /**
          * Fires each time the textarea value is changed.
@@ -2412,395 +2691,48 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
 };
 __decorate([
     HostBinding('class.k-textarea'),
+    HostBinding('class.k-input'),
     __metadata("design:type", Boolean)
-], TextAreaDirective.prototype, "elementClass", void 0);
-__decorate([
-    HostBinding('class.k-autofill'),
-    __metadata("design:type", Boolean)
-], TextAreaDirective.prototype, "autofillClass", void 0);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], TextAreaDirective.prototype, "direction", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], TextAreaDirective.prototype, "valueChange", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], TextAreaDirective.prototype, "autoSize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], TextAreaDirective.prototype, "value", void 0);
-TextAreaDirective = TextAreaDirective_1 = __decorate([
-    Directive({
-        providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextAreaDirective_1),
-                multi: true
-            }, {
-                provide: KendoInput,
-                useExisting: forwardRef(() => TextAreaDirective_1)
-            }],
-        selector: 'textarea[kendoTextArea]'
-    }),
-    __param(5, Optional()), __param(5, Inject(RTL)),
-    __metadata("design:paramtypes", [Renderer2,
-        ElementRef,
-        NgZone,
-        ChangeDetectorRef,
-        Injector, Boolean])
-], TextAreaDirective);
-
-/**
- * @hidden
- */
-class FloatingLabelInputAdapter {
-    constructor(component, formControl) {
-        this.component = component;
-        const isObservableOrEventEmitter = (event) => event instanceof Observable || event instanceof EventEmitter;
-        if (isObservableOrEventEmitter(component.onFocus)) {
-            this.onFocus = component.onFocus;
-        }
-        if (isObservableOrEventEmitter(component.autoFillStart)) {
-            this.autoFillStart = component.autoFillStart;
-        }
-        if (isObservableOrEventEmitter(component.autoFillEnd)) {
-            this.autoFillEnd = component.autoFillEnd;
-        }
-        if (isObservableOrEventEmitter(component.onBlur)) {
-            this.onBlur = component.onBlur;
-        }
-        if (formControl) {
-            this.onValueChange = formControl.valueChanges;
-        }
-        else if (component.onValueChange) {
-            this.onValueChange = component.onValueChange;
-        }
-    }
-    get focusableId() {
-        const component = this.component;
-        if ('focusableId' in component) {
-            return component.focusableId;
-        }
-        else if ('id' in component) {
-            return component.id;
-        }
-        return "";
-    }
-    set focusableId(value) {
-        const component = this.component;
-        if ('focusableId' in component) {
-            component.focusableId = value;
-        }
-        else if ('id' in component) {
-            component.id = value;
-        }
-    }
-}
-
-const isFunction = (x) => Object.prototype.toString.call(x) === '[object Function]';
-/**
- * @hidden
- */
-let TextBoxContainerComponent = class TextBoxContainerComponent {
-    constructor(elementRef, renderer, changeDetectorRef, rtl) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.changeDetectorRef = changeDetectorRef;
-        /**
-         * @hidden
-         */
-        this.focused = false;
-        /**
-         * @hidden
-         */
-        this.empty = true;
-        /**
-         * @hidden
-         */
-        this.invalid = false;
-        this._subscriptions = [];
-        this.autoFillStarted = false;
-        this.direction = rtl ? 'rtl' : 'ltr';
-        this.renderer.removeAttribute(this.elementRef.nativeElement, "id");
-    }
-    get hostClasses() {
-        return true;
-    }
-    get textareaElementClass() {
-        return !!this.textarea;
-    }
-    get focusedClass() {
-        return this.focused;
-    }
-    get invalidClass() {
-        return this.invalid;
-    }
-    /**
-     * @hidden
-     */
-    ngAfterContentInit() {
-        if (!this.formControl && !this.kendoInput) {
-            if (isDevMode()) {
-                throw new Error("The TextBoxContainer requires a Kendo Input component" +
-                    " or a forms-bound component to function properly.");
-            }
-            return;
-        }
-        // add focus/blur/valueChange handlers
-        const control = new FloatingLabelInputAdapter(this.kendoInput || this.formControl.valueAccessor, this.formControl);
-        const setFocus = (isFocused) => () => {
-            this.focused = isFocused;
-            this.updateState();
-        };
-        this.subscribe(control, 'onFocus', setFocus(true));
-        this.subscribe(control, 'onBlur', setFocus(false));
-        this.subscribe(control, 'autoFillStart', () => {
-            this.autoFillStarted = true;
-            this.renderer.removeClass(this.elementRef.nativeElement, 'k-state-empty');
-        });
-        this.subscribe(control, 'autoFillEnd', () => {
-            if (this.autoFillStarted) {
-                this.autoFillStarted = false;
-                if (this.empty) {
-                    this.renderer.addClass(this.elementRef.nativeElement, 'k-state-empty');
-                }
-            }
-        });
-        const updateState = () => this.updateState();
-        updateState();
-        this.subscribe(control, 'onValueChange', updateState);
-        // set label id for floating label
-        if (this.id && control.focusableId) {
-            // input wins
-            this.id = control.focusableId;
-        }
-        else if (this.id) {
-            control.focusableId = this.id;
-        }
-        else if (control.focusableId) {
-            this.id = control.focusableId;
-        }
-        else {
-            const id = "_" + guid();
-            control.focusableId = id;
-            this.id = id;
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        this._subscriptions.forEach(s => s.unsubscribe());
-        this._subscriptions = [];
-    }
-    subscribe(control, eventName, handler) {
-        if (control[eventName] instanceof EventEmitter) {
-            const subscription = control[eventName].subscribe(handler);
-            this._subscriptions.push(subscription);
-        }
-    }
-    updateState() {
-        const empty = value => {
-            // zero is not an empty value (e.g., NumericTextBox)
-            if (value === 0 || value === false) {
-                return false;
-            }
-            // empty arrays are an empty value (e.g., MultiSelect)
-            if (Array.isArray(value) && !value.length) {
-                return true;
-            }
-            return !value;
-        };
-        const formControl = this.formControl;
-        if (formControl) {
-            const valueAccessor = formControl.valueAccessor;
-            if (isFunction(valueAccessor.isEmpty)) {
-                this.empty = valueAccessor.isEmpty();
-            }
-            else {
-                this.empty = empty(formControl.value);
-            }
-            this.invalid = formControl.invalid && (formControl.touched || formControl.dirty);
-        }
-        else {
-            this.empty = isFunction(this.kendoInput.isEmpty) ?
-                this.kendoInput.isEmpty() : empty(this.kendoInput.value);
-        }
-        if (this.empty) {
-            this.renderer.addClass(this.elementRef.nativeElement, 'k-state-empty');
-        }
-        else {
-            this.renderer.removeClass(this.elementRef.nativeElement, 'k-state-empty');
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-};
-__decorate([
-    HostBinding('class.k-textbox-container'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], TextBoxContainerComponent.prototype, "hostClasses", null);
-__decorate([
-    HostBinding('class.k-textarea-wrapper'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], TextBoxContainerComponent.prototype, "textareaElementClass", null);
-__decorate([
-    HostBinding('class.k-state-focused'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], TextBoxContainerComponent.prototype, "focusedClass", null);
-__decorate([
-    HostBinding('class.k-state-invalid'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], TextBoxContainerComponent.prototype, "invalidClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], TextBoxContainerComponent.prototype, "direction", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], TextBoxContainerComponent.prototype, "id", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], TextBoxContainerComponent.prototype, "floatingLabel", void 0);
-__decorate([
-    ContentChild(KendoInput, { static: false }),
-    __metadata("design:type", Object)
-], TextBoxContainerComponent.prototype, "kendoInput", void 0);
-__decorate([
-    ContentChild(TextAreaDirective, { static: false }),
-    __metadata("design:type", TextAreaDirective)
-], TextBoxContainerComponent.prototype, "textarea", void 0);
-__decorate([
-    ContentChild(NgControl, { static: false }),
-    __metadata("design:type", NgControl)
-], TextBoxContainerComponent.prototype, "formControl", void 0);
-TextBoxContainerComponent = __decorate([
-    Component({
-        selector: 'kendo-textbox-container',
-        template: `
-        <ng-content></ng-content>
-        <label *ngIf="floatingLabel" [for]="id" class="k-label">{{ floatingLabel }}</label>
-    `
-    }),
-    __param(3, Optional()), __param(3, Inject(RTL)),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        ChangeDetectorRef, Boolean])
-], TextBoxContainerComponent);
-
-var TextBoxDirective_1;
-/**
- * Represents the [Kendo UI TextBox directive]({% slug overview_textbox %}) for the Inputs components for Angular.
- * Used to style the textbox of any `input` element.
- *
- * @example
- * ```ts-no-run
- * <input kendoTextBox />
- * <input kendoTextBox type="email" />
- * <input kendoTextBox type="password" />
- * ```
- */
-let TextBoxDirective = TextBoxDirective_1 = class TextBoxDirective {
-    constructor(renderer, inputElement, ngZone) {
-        this.renderer = renderer;
-        this.inputElement = inputElement;
-        this.ngZone = ngZone;
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.onValueChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.autoFillStart = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.autoFillEnd = new EventEmitter();
-        this.listeners = [];
-    }
-    /**
-     * @hidden
-     */
-    set value(text) {
-        if (!this.inputElement) {
-            return;
-        }
-        this.inputElement.nativeElement.value = (text === undefined || text === null) ? '' : text;
-        this.onValueChange.emit();
-    }
-    /**
-     * @hidden
-     */
-    get value() {
-        return this.inputElement.nativeElement.value;
-    }
-    get id() {
-        return this.inputElement.nativeElement.id;
-    }
-    set id(id) {
-        this.renderer.setAttribute(this.inputElement.nativeElement, 'id', id);
-    }
-    ngAfterViewInit() {
-        const input = this.inputElement.nativeElement;
-        this.listeners = [
-            this.renderer.listen(input, 'focus', () => this.onFocus.emit()),
-            this.renderer.listen(input, 'blur', () => this.onBlur.emit())
-        ];
-        this.ngZone.runOutsideAngular(() => {
-            this.renderer.listen(input, 'animationstart', (e) => {
-                if (e.animationName === 'autoFillStart') {
-                    this.autoFillStart.emit();
-                }
-                else if (e.animationName === 'autoFillEnd') {
-                    this.autoFillEnd.emit();
-                }
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.listeners.forEach(listener => listener());
-    }
-};
+], TextAreaDirective.prototype, "elementClasses", void 0);
 __decorate([
-    HostBinding('class.k-textbox'),
+    HostBinding('class.k-autofill'),
     __metadata("design:type", Boolean)
-], TextBoxDirective.prototype, "hostClass", void 0);
+], TextAreaDirective.prototype, "autofillClass", void 0);
+__decorate([
+    HostBinding('attr.dir'),
+    __metadata("design:type", String)
+], TextAreaDirective.prototype, "direction", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], TextAreaDirective.prototype, "valueChange", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], TextBoxDirective.prototype, "value", null);
-TextBoxDirective = TextBoxDirective_1 = __decorate([
+    __metadata("design:type", Boolean)
+], TextAreaDirective.prototype, "autoSize", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], TextAreaDirective.prototype, "value", void 0);
+TextAreaDirective = TextAreaDirective_1 = __decorate([
     Directive({
-        selector: 'input[kendoTextBox]',
         providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextAreaDirective_1),
+                multi: true
+            }, {
                 provide: KendoInput,
-                useExisting: forwardRef(() => TextBoxDirective_1)
-            }]
+                useExisting: forwardRef(() => TextAreaDirective_1)
+            }],
+        selector: 'textarea[kendoTextArea]'
     }),
+    __param(5, Optional()), __param(5, Inject(RTL)),
     __metadata("design:paramtypes", [Renderer2,
         ElementRef,
-        NgZone])
-], TextBoxDirective);
+        NgZone,
+        ChangeDetectorRef,
+        Injector, Boolean])
+], TextAreaDirective);
 
 /**
  * @hidden
@@ -2966,8 +2898,7 @@ const PARSABLE_DEFAULTS = {
     min: null,
     step: 1
 };
-const FOCUSED$1 = 'k-state-focused';
-const FORMATTED_VALUE = 'k-formatted-value';
+const FOCUSED$1 = 'k-focus';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -3062,15 +2993,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
          */
@@ -3256,8 +3192,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
@@ -3270,6 +3254,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
@@ -3303,6 +3297,7 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
             this.subscriptions.unsubscribe();
         }
         clearTimeout(this.spinTimeout);
+        this.domEvents.forEach(unbindHandler => unbindHandler());
     }
     /**
      * @hidden
@@ -3408,18 +3403,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$1);
-                if (!this.isDisabled) {
-                    this.renderer.removeClass(input, FORMATTED_VALUE);
-                }
             }
             else {
                 this.renderer.removeClass(wrap, FOCUSED$1);
-                this.renderer.addClass(input, FORMATTED_VALUE);
             }
             this.isFocused = value;
         }
@@ -3710,6 +3700,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);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -3789,6 +3789,21 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], NumericTextBoxComponent.prototype, "maxlength", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "rounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], NumericTextBoxComponent.prototype, "fillMode", null);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -3805,20 +3820,20 @@ __decorate([
     ViewChild('numericInput', { static: true }),
     __metadata("design:type", ElementRef)
 ], NumericTextBoxComponent.prototype, "numericInput", void 0);
-__decorate([
-    ViewChild('numericWrap', { static: true }),
-    __metadata("design:type", ElementRef)
-], NumericTextBoxComponent.prototype, "numericWrap", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
 ], NumericTextBoxComponent.prototype, "direction", void 0);
 __decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-numerictextbox'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
-], NumericTextBoxComponent.prototype, "widgetClasses", null);
+], NumericTextBoxComponent.prototype, "disableClass", null);
+__decorate([
+    HostBinding('class.k-input'),
+    HostBinding('class.k-numerictextbox'),
+    __metadata("design:type", Boolean)
+], NumericTextBoxComponent.prototype, "hostClasses", void 0);
 NumericTextBoxComponent = NumericTextBoxComponent_1 = __decorate([
     Component({
         exportAs: 'kendoNumericTextBox',
@@ -3838,14 +3853,9 @@ NumericTextBoxComponent = NumericTextBoxComponent_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"
@@ -3868,29 +3878,35 @@ NumericTextBoxComponent = NumericTextBoxComponent_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>
       `
     }),
     __metadata("design:paramtypes", [IntlService,
@@ -4370,7 +4386,7 @@ MaskingService = __decorate([
 
 var MaskedTextBoxComponent_1;
 const resolvedPromise = Promise.resolve(null);
-const FOCUSED$2 = 'k-state-focused';
+const FOCUSED$2 = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -4503,6 +4519,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         };
         this.isPasted = false;
         this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -4555,6 +4574,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;
     }
@@ -4582,9 +4649,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) {
@@ -4823,6 +4896,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);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -4840,17 +4923,32 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], MaskedTextBoxComponent.prototype, "title", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "rounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MaskedTextBoxComponent.prototype, "fillMode", null);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
 ], MaskedTextBoxComponent.prototype, "direction", void 0);
 __decorate([
-    HostBinding('class.k-widget'),
+    HostBinding('class.k-input'),
     HostBinding('class.k-maskedtextbox'),
     __metadata("design:type", Boolean)
 ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
 __decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
@@ -4952,7 +5050,7 @@ MaskedTextBoxComponent = MaskedTextBoxComponent_1 = __decorate([
             autocorrect="off"
             autocapitalize="off"
             spellcheck="false"
-            class="k-textbox"
+            class="k-input-inner"
             [id]="focusableId"
             [tabindex]="tabIndex"
             [attr.title]="title"
@@ -5656,7 +5754,7 @@ TextBoxPrefixTemplateDirective = __decorate([
 ], TextBoxPrefixTemplateDirective);
 
 var TextBoxComponent_1;
-const FOCUSED$3 = 'k-state-focused';
+const FOCUSED$3 = 'k-focus';
 let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -5790,9 +5888,12 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
          * ```
          */
         this.onBlur = new EventEmitter();
-        this.hostClass = true;
+        this.hostClasses = true;
         this._isFocused = false;
         this.focusChangedProgrammatically = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -5846,6 +5947,58 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    /**
+     * The size property specifies the font size and line height of the TextBox
+     * ([see example]({% slug appearance_textbox %}#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 TextBox
+     * ([see example]({% slug appearance_textbox %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `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 TextBox
+     * ([see example]({% slug appearance_textbox %}#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;
+    }
     /**
      * @hidden
      */
@@ -5884,7 +6037,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
                     return;
                 }
                 if (tabbing) {
-                    const closestTextbox = closest(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
+                    const closestTextbox = closest$1(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
                     if (!closestTextbox) {
                         this.handleBlur();
                     }
@@ -5911,6 +6064,10 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
                 }
             }));
         });
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
     }
     ngOnChanges(changes) {
         if (changes.disabled || changes.readonly || changes.value) {
@@ -6043,16 +6200,16 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
      */
     get successIconClasses() {
         return this.successIcon
-            ? `k-text-success ${this.successIcon}`
-            : `k-text-success k-icon k-i-check-outline`;
+            ? `${this.successIcon}`
+            : `k-validation-icon k-icon k-i-check`;
     }
     /**
      * @hidden
      */
     get errorIconClasses() {
         return this.errorIcon
-            ? `k-text-error ${this.errorIcon}`
-            : `k-text-error k-icon k-i-warning`;
+            ? `${this.errorIcon}`
+            : `k-validation-icon k-icon k-i-warning`;
     }
     /**
      * @hidden
@@ -6060,7 +6217,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get clearButtonClasses() {
         return this.clearButtonIcon
             ? this.clearButtonIcon
-            : `k-icon k-i-close-circle`;
+            : `k-icon k-i-x`;
     }
     /**
      * @hidden
@@ -6122,6 +6279,16 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
             this.isFocused = false;
         });
     }
+    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);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -6175,6 +6342,21 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], TextBoxComponent.prototype, "clearButtonIcon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextBoxComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextBoxComponent.prototype, "rounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextBoxComponent.prototype, "fillMode", null);
 __decorate([
     Input(),
     __metadata("design:type", Number),
@@ -6221,14 +6403,15 @@ __decorate([
     __metadata("design:type", TextBoxPrefixTemplateDirective)
 ], TextBoxComponent.prototype, "prefixTemplate", void 0);
 __decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TextBoxComponent.prototype, "disabledClass", null);
 __decorate([
     HostBinding('class.k-textbox'),
+    HostBinding('class.k-input'),
     __metadata("design:type", Boolean)
-], TextBoxComponent.prototype, "hostClass", void 0);
+], TextBoxComponent.prototype, "hostClasses", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
@@ -6258,9 +6441,8 @@ TextBoxComponent = TextBoxComponent_1 = __decorate([
                 [ngTemplateOutlet]="prefixTemplate?.templateRef">
             </ng-template>
         </span>
-        <input
-            class="k-input"
-            #input
+        <input #input
+            class="k-input-inner"
             [id]="focusableId"
             [disabled]="disabled"
             [readonly]="readonly"
@@ -6272,24 +6454,24 @@ TextBoxComponent = TextBoxComponent_1 = __decorate([
             [kendoEventsOutsideAngular]="{
                 focus: handleInputFocus,
                 blur: handleInputBlur,
-                input: handleInput}"/>
-        <span class="k-input-suffix">
-            <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
-            <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
-            <span
-                role="button"
-                class="k-clear-value"
-                *ngIf="showClearButton"
-                (click)="clearValue()"
-                (mousedown)="$event.preventDefault()"
-                [tabindex]="tabIndex"
-                [attr.aria-label]="clearTitle()"
-                [title]="clearTitle()"
-                (keydown.enter)="clearValue($event)"
-                (keydown.space)="clearValue($event)"
-                >
+                input: handleInput}"
+        />
+        <span
+            role="button"
+            class="k-clear-value"
+            *ngIf="showClearButton"
+            (click)="clearValue()"
+            (mousedown)="$event.preventDefault()"
+            [tabindex]="tabIndex"
+            [attr.aria-label]="clearTitle()"
+            [title]="clearTitle()"
+            (keydown.enter)="clearValue($event)"
+            (keydown.space)="clearValue($event)">
                 <span [ngClass]="clearButtonClasses"></span>
-            </span>
+        </span>
+        <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
+        <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
+        <span class="k-input-suffix">
             <ng-template
                 *ngIf="suffixTemplate"
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
@@ -6473,7 +6655,6 @@ TextBoxModule = __decorate([
     NgModule({
         declarations: [
             TextBoxDirective,
-            TextBoxContainerComponent,
             TextBoxComponent,
             TextBoxSuffixTemplateDirective,
             TextBoxPrefixTemplateDirective,
@@ -6482,7 +6663,6 @@ TextBoxModule = __decorate([
         ],
         exports: [
             TextBoxDirective,
-            TextBoxContainerComponent,
             TextBoxComponent,
             TextBoxSuffixTemplateDirective,
             TextBoxPrefixTemplateDirective,
@@ -6615,7 +6795,7 @@ __decorate([
     __metadata("design:type", ElementRef)
 ], TextFieldsBase.prototype, "input", void 0);
 __decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TextFieldsBase.prototype, "disabledClass", null);
@@ -6632,7 +6812,7 @@ const resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-const FOCUSED$4 = 'k-state-focus';
+const FOCUSED$4 = 'k-focus';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -6649,7 +6829,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
          * @hidden
          */
         this.focusableId = `k-${guid()}`;
-        this.hostClass = true;
+        this.hostClasses = true;
         /**
          * Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify
          * their position in relation to the textarea element.
@@ -6723,6 +6903,9 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
          * When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.
          */
         this.valueChange = new EventEmitter();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -6778,6 +6961,57 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * The size property specifies the font size and line height of the TextArea
+     * ([see example]({% slug appearance_textarea %}#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 TextArea
+     * ([see example]({% slug appearance_textarea %}#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 TextArea
+     * ([see example]({% slug appearance_textarea %}#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;
+    }
     ngAfterViewInit() {
         const hostElement = this.hostElement.nativeElement;
         let cursorInsideWrapper = false;
@@ -6797,7 +7031,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                     return;
                 }
                 if (tabbing) {
-                    const closestTextbox = closest(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
+                    const closestTextbox = closest$1(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
                     if (!closestTextbox) {
                         this.handleBlur();
                     }
@@ -6824,6 +7058,10 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                 }
             }));
         });
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
     }
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
@@ -6985,6 +7223,16 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
             this.setSelection(0, this.value.length);
         }
     }
+    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);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -6992,8 +7240,9 @@ __decorate([
 ], TextAreaComponent.prototype, "focusableId", void 0);
 __decorate([
     HostBinding('class.k-textarea'),
+    HostBinding('class.k-input'),
     __metadata("design:type", Boolean)
-], TextAreaComponent.prototype, "hostClass", void 0);
+], TextAreaComponent.prototype, "hostClasses", void 0);
 __decorate([
     HostBinding('class.k-flex-col'),
     __metadata("design:type", Boolean),
@@ -7033,6 +7282,21 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], TextAreaComponent.prototype, "resizable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextAreaComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextAreaComponent.prototype, "rounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], TextAreaComponent.prototype, "fillMode", null);
 __decorate([
     Output('focus'),
     __metadata("design:type", EventEmitter)
@@ -7065,7 +7329,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
             [attr.aria-multiline]="true"
             [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
-            class="k-input"
+            class="k-input-inner"
             [ngClass]="resizableClass"
             [id]="focusableId"
             [value]="value"
@@ -7841,7 +8105,7 @@ ColorInputComponent = __decorate([
         template: `
         <div class="k-vstack">
             <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-icon-button k-flat"
+                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
             >
@@ -7852,7 +8116,7 @@ ColorInputComponent = __decorate([
             <input
                 #hexInput
                 [id]="focusableId"
-                class="k-textbox k-hex-value"
+                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"
@@ -8018,6 +8282,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.updateValues = new Subject();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -8565,7 +8830,7 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-flat k-button-icon"
+                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
                     (click)="reset()"
                     (keydown.enter)="reset()"
@@ -8655,6 +8920,29 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         LocalizationService])
 ], ColorGradientComponent);
 
+/**
+ * @hidden
+ */
+let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+};
+ColorPaletteLocalizationService = __decorate([
+    __param(0, Inject(L10N_PREFIX)),
+    __param(1, Optional()),
+    __param(2, Optional()), __param(2, Inject(RTL)),
+    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
+], ColorPaletteLocalizationService);
+
 /**
  * @hidden
  */
@@ -8701,44 +8989,21 @@ let ColorPaletteService = class ColorPaletteService {
         const row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);
         const col = this.clampIndex(current.col + horizontalStep, this.colorRows[row].length - 1);
         return { row, col };
-    }
-    clampIndex(index, max) {
-        const minArrayIndex = 0;
-        if (index < minArrayIndex) {
-            return minArrayIndex;
-        }
-        if (index > max) {
-            return max;
-        }
-        return index;
-    }
-};
-ColorPaletteService = __decorate([
-    Injectable()
-], ColorPaletteService);
-
-/**
- * @hidden
- */
-let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
-        super(prefix, messageService, _rtl);
-        this.flatColorPickerLocalization = flatColorPickerLocalization;
-    }
-    get(shortKey) {
-        if (this.flatColorPickerLocalization) {
-            return this.flatColorPickerLocalization.get(shortKey);
+    }
+    clampIndex(index, max) {
+        const minArrayIndex = 0;
+        if (index < minArrayIndex) {
+            return minArrayIndex;
         }
-        return super.get(shortKey);
+        if (index > max) {
+            return max;
+        }
+        return index;
     }
 };
-ColorPaletteLocalizationService = __decorate([
-    __param(0, Inject(L10N_PREFIX)),
-    __param(1, Optional()),
-    __param(2, Optional()), __param(2, Inject(RTL)),
-    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
-    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
-], ColorPaletteLocalizationService);
+ColorPaletteService = __decorate([
+    Injectable()
+], ColorPaletteService);
 
 var ColorPaletteComponent_1;
 const DEFAULT_TILE_SIZE = 24;
@@ -8813,6 +9078,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
         this._tabindex = 0;
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -9303,7 +9569,7 @@ FlatColorPickerHeaderComponent = __decorate([
                 <button *ngFor="let view of views"
                     #viewButtons
                     (click)="onViewButtonClick(view)"
-                    class="k-button k-icon-button k-flat"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
@@ -9320,7 +9586,7 @@ FlatColorPickerHeaderComponent = __decorate([
         <div class="k-coloreditor-header-actions k-hstack">
             <button *ngIf="clearButton"
                 #clearButton
-                class="k-button k-icon-button k-flat k-coloreditor-reset"
+                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">
@@ -9383,12 +9649,12 @@ FlatColorPickerActionButtonsComponent = __decorate([
         selector: '[kendoFlatColorPickerActionButtons]',
         template: `
         <button
-            class="k-coloreditor-cancel k-button"
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
         >{{getText('cancelButton')}}</button>
         <button #last
-            class="k-coloreditor-apply k-button k-primary"
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
         >{{getText('applyButton')}}</button>
@@ -9405,9 +9671,9 @@ var FlatColorPickerComponent_1;
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPickerComponent {
-    constructor(service, host, localizationService, cdr, renderer, ngZone) {
-        this.service = service;
+    constructor(host, service, localizationService, cdr, renderer, ngZone) {
         this.host = host;
+        this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
@@ -9490,6 +9756,7 @@ let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPicke
         this.subscriptions = new Subscription();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -9963,8 +10230,8 @@ FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
         </div>
 `
     }),
-    __metadata("design:paramtypes", [FlatColorPickerService,
-        ElementRef,
+    __metadata("design:paramtypes", [ElementRef,
+        FlatColorPickerService,
         LocalizationService,
         ChangeDetectorRef,
         Renderer2,
@@ -9972,7 +10239,7 @@ FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
 ], FlatColorPickerComponent);
 
 var ColorPickerComponent_1;
-let serial$2 = 0;
+const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -9980,16 +10247,15 @@ let serial$2 = 0;
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
-    constructor(popupService, cdr, localizationService, ngZone) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
+        this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-colorpicker-${serial$2++}`;
+        this.role = 'listbox';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -10085,17 +10351,50 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
          * Used to provide a two-way binding for the `activeView` property.
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Indicates whether the ColorPicker wrapper is focused.
+         */
+        this.isFocused = false;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
         this._gradientSettings = { opacity: true, delay: 0 };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this.subscriptions = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
+        this.domFocusListener = (event) => event.stopImmediatePropagation();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    get focusedClass() {
+        return this.isFocused;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get ariaExpanded() {
+        return this.isOpen;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
+    /**
+     * @hidden
+     */
+    set view(view) {
+        this.views = [view];
+    }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
@@ -10145,6 +10444,58 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * The size property specifies the font size and line height of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#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 ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `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 ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#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;
+    }
     /**
      * Indicates whether the ColorPicker popup is open.
      */
@@ -10174,6 +10525,15 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
+    }
     ngOnChanges(changes) {
         if (changes.format && changes.format.currentValue === 'name') {
             this.activeView = 'palette';
@@ -10182,18 +10542,17 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.format = 'rgba';
             this.value = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     }
     ngOnDestroy() {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
-    }
-    /**
-     * @hidden
-     */
-    get colorPickerAriaLabel() {
-        return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     }
     /**
      * @hidden
@@ -10205,28 +10564,33 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     togglePopup() {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * @hidden
      */
-    handleActiveColorClick() {
+    handleWrapperClick(event) {
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        const event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, (element) => element === this.activeColor.nativeElement)) {
+            const event = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event);
+            if (!event.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     focus() {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     }
     /**
      * @hidden
@@ -10235,14 +10599,18 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
     }
     /**
      * Blurs the ColorPicker.
      */
     blur() {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     }
     /**
      * @hidden
@@ -10251,9 +10619,16 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = false;
+        });
+    }
+    /**
+     * @hidden
+     */
+    arrowButtonMouseDown(ev) {
+        ev.preventDefault();
     }
     /**
      * Clears the value of the ColorPicker.
@@ -10263,6 +10638,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     }
     /**
@@ -10290,6 +10666,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     }
@@ -10336,7 +10713,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handleWrapperKeyDown(event) {
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(() => {
+                this.toggleWithEvents(true);
+            });
         }
     }
     /**
@@ -10345,14 +10724,14 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handlePopupKeyDown(event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
                 event.preventDefault();
-                nextElement.nativeElement.focus();
+                nextElement.focus();
             }
         }
     }
@@ -10363,10 +10742,24 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     isEmpty() {
         return false;
     }
+    setHostElementAriaLabel() {
+        const ariaLabelValue = `${this.value ? this.value : this.localizationService.get('colorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
     popupBlurInvalid(ev) {
-        const focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        const wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
-        return !this.isFocused || wrapperClicked || focusInPopupElement;
+        const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
+        return hostClicked || focusInFlatColorPickerElement;
     }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
@@ -10390,12 +10783,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
     }
     focusFirstElement() {
-        this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.flatColorPicker) {
                 const elementToFocus = this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle :
                     this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     }
     openPopup() {
@@ -10403,7 +10796,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
+            anchor: this.activeColor,
             animate: this.popupSettings.animate,
             appendTo: this.popupSettings.appendTo,
             popupAlign: popupPosition,
@@ -10415,7 +10808,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => {
             this.toggleWithEvents(false);
             if (!this.isOpen) {
-                this.wrapper.nativeElement.focus({
+                this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -10443,23 +10836,101 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
         return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
     }
+    handleDomEvents(action, events) {
+        const hostElement = this.host.nativeElement;
+        events.forEach(ev => hostElement[`${action}EventListener`](ev, this.domFocusListener, true));
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        let hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.handleWrapperFocus();
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (event) => {
+                const closestPopup = this.popupRef ?
+                    closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
+                    false;
+                const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
+                if (!closestPopup && !closestWrapper) {
+                    this.handleWrapperBlur();
+                }
+            }));
+            this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (event) => {
+                this.handleWrapperKeyDown(event);
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
+                this.ngZone.run(() => {
+                    this.handleWrapperClick(event);
+                });
+            }));
+        });
+    }
+    handleHostId() {
+        const hostElement = this.host.nativeElement;
+        const existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            const id = `k-${guid()}`;
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    }
 };
 __decorate([
     HostBinding('class.k-colorpicker'),
+    HostBinding('class.k-icon-picker'),
+    HostBinding('class.k-picker'),
     __metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
+__decorate([
+    HostBinding('class.k-focus'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "focusedClass", null);
+__decorate([
+    HostBinding('attr.aria-disabled'),
+    HostBinding('class.k-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "disabledClass", null);
+__decorate([
+    HostBinding('attr.aria-readonly'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaReadonly", null);
+__decorate([
+    HostBinding('attr.aria-expanded'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaExpanded", null);
+__decorate([
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "hostTabindex", null);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
 ], ColorPickerComponent.prototype, "direction", void 0);
 __decorate([
-    Input(),
+    HostBinding('attr.role'),
     __metadata("design:type", String)
-], ColorPickerComponent.prototype, "focusableId", void 0);
+], ColorPickerComponent.prototype, "role", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Array)
 ], ColorPickerComponent.prototype, "views", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "view", null);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -10521,6 +10992,21 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], ColorPickerComponent.prototype, "actionsLayout", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "rounded", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "fillMode", null);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -10558,9 +11044,9 @@ __decorate([
     __metadata("design:type", ViewContainerRef)
 ], ColorPickerComponent.prototype, "container", void 0);
 __decorate([
-    ViewChild('wrapper', { static: true }),
+    ViewChild('activeColor', { static: true }),
     __metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "wrapper", void 0);
+], ColorPickerComponent.prototype, "activeColor", void 0);
 __decorate([
     ViewChild('popupTemplate', { static: true }),
     __metadata("design:type", TemplateRef)
@@ -10626,35 +11112,21 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel">
         </ng-container>
-        <span
-            #wrapper
-            [ngClass]="{
-                'k-picker-wrap': true,
-                'k-state-disabled': this.disabled,
-                'k-state-focused': this.isFocused
-            }"
-            role="listbox"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-label]="colorPickerAriaLabel"
-            [id]="focusableId"
-            [attr.tabindex]="tabindex"
-            (focus)="handleWrapperFocus()"
-            (blur)="handleWrapperBlur()"
-            (mousedown)="$event.preventDefault()"
-            (keydown)="handleWrapperKeyDown($event)"
-        >
-            <span *ngIf="!iconStyles" class="k-selected-color" [style.background]="value" (click)="handleActiveColorClick()">
-                <span class="k-icon k-i-line" *ngIf="!value"></span>
-            </span>
-            <span *ngIf="iconStyles" class="k-tool-icon" [ngClass]="iconStyles" (click)="handleActiveColorClick()">
-                <span class="k-selected-color" [style.background-color]="value"></span>
-            </span>
-            <span class="k-select" (click)="togglePopup()">
-                <span class="k-icon k-i-arrow-s"></span>
+        <span #activeColor class="k-input-inner">
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
+                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
         </span>
+        <button
+            #arrowButton
+            tabindex="-1"
+            role="button"
+            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
                 #flatColorPicker
@@ -10667,8 +11139,8 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
                 [gradientSettings]="gradientSettings"
                 [paletteSettings]="paletteSettings"
                 [clearButton]="clearButton"
-                (focusout)="handlePopupBlur($event)"
                 (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
                 (valueChange)="handleValueChange($event)"
                 (keydown)="handlePopupKeyDown($event)"
                 (activeViewChange)="activeViewChange.emit($event)"
@@ -10678,10 +11150,12 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
         <ng-container #container></ng-container>
     `
     }),
-    __metadata("design:paramtypes", [PopupService,
+    __metadata("design:paramtypes", [ElementRef,
+        PopupService,
         ChangeDetectorRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ColorPickerComponent);
 
 /**
@@ -11105,27 +11579,84 @@ ColorPickerModule = __decorate([
  * ```
  */
 let CheckBoxDirective = class CheckBoxDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+    }
     /**
-     * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
-     * The directive is placed on input type="checkbox" elements.
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
-     * @example
-     * ```ts-no-run
-     * <input type="checkbox" kendoCheckBox />
-     * ```
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    constructor() {
-        this.kendoClass = true;
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#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;
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('checkbox', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
     }
 };
 __decorate([
     HostBinding('class.k-checkbox'),
     __metadata("design:type", Boolean)
 ], CheckBoxDirective.prototype, "kendoClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "rounded", null);
 CheckBoxDirective = __decorate([
     Directive({
         selector: 'input[kendoCheckBox]'
-    })
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef])
 ], CheckBoxDirective);
 
 /**
@@ -11179,27 +11710,62 @@ CheckBoxModule = __decorate([
  * ```
  */
 let RadioButtonDirective = class RadioButtonDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        validatePackage(packageMetadata);
+    }
     /**
-     * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
-     * The directive is placed on input type="radio" elements.
-     *
-     * @example
-     * ```ts-no-run
-     * <input type="radio" kendoRadioButton />
-     * ```
+     * 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`
      */
-    constructor() {
-        this.kendoClass = true;
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    ngAfterViewInit() {
+        // kept in sync with other inputs for easier refactoring
+        // to a common base class
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('radio', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
     }
 };
 __decorate([
     HostBinding('class.k-radio'),
     __metadata("design:type", Boolean)
 ], RadioButtonDirective.prototype, "kendoClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], RadioButtonDirective.prototype, "size", null);
 RadioButtonDirective = __decorate([
     Directive({
         selector: 'input[kendoRadioButton]'
-    })
+    }),
+    __metadata("design:paramtypes", [Renderer2, ElementRef])
 ], RadioButtonDirective);
 
 /**
@@ -11243,7 +11809,7 @@ RadioButtonModule = __decorate([
     })
 ], RadioButtonModule);
 
-let serial$3 = 0;
+let serial$2 = 0;
 /**
  * Represents an error message that will be shown underneath
  * a Kendo control or native HTML form-bound component after a validation.
@@ -11266,7 +11832,7 @@ let ErrorComponent = class ErrorComponent {
         /**
          * @hidden
          */
-        this.id = `kendo-error-${serial$3++}`;
+        this.id = `kendo-error-${serial$2++}`;
         this.roleAttribute = 'alert';
     }
     get startClass() {
@@ -11315,7 +11881,7 @@ ErrorComponent = __decorate([
     })
 ], ErrorComponent);
 
-let serial$4 = 0;
+let serial$3 = 0;
 /**
  * Represents a hint message that will be shown underneath a form-bound component.
  */
@@ -11335,7 +11901,7 @@ let HintComponent = class HintComponent {
         /**
          * @hidden
          */
-        this.id = `kendo-hint-${serial$4++}`;
+        this.id = `kendo-hint-${serial$3++}`;
         this.hostClass = true;
     }
     get startClass() {
@@ -11737,4 +12303,4 @@ InputsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxContainerComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };
+export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };