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

package/dist/fesm5/index.js

@@ -5,10 +5,10 @@
 import { __extends, __decorate, __param, __metadata, __assign } from 'tslib';
 import { isDevMode, Directive, Optional, TemplateRef, Input, Output, EventEmitter, 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';
@@ -48,6 +48,43 @@ var fitIntoBounds = function (contender, min, max) {
     }
     return contender <= min ? min : contender >= max ? max : contender;
 };
+var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+var ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+var getStylingClasses = function (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
@@ -479,7 +516,7 @@ var containsFocus = function (hostElement, contender) {
 /**
  * @hidden
  */
-var closest = function (node, predicate) {
+var closest$1 = function (node, predicate) {
     while (node && !predicate(node)) {
         node = node.parentNode;
     }
@@ -493,7 +530,7 @@ var 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'
 };
@@ -1302,7 +1339,7 @@ var SliderComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return SliderComponent_1; }) }
             ],
             selector: 'kendo-slider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <span\n                #decreaseButton\n                *ngIf=\"showButtons\"\n                class=\"k-button k-button-decrease\"\n                [title]=\"decrementMessage\"\n                role=\"presentation\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-w]=\"!vertical\"\n                    [class.k-i-arrow-s]=\"vertical\"\n                >\n                </span>\n            </span>\n            <span\n                *ngIf=\"showButtons\"\n                #increaseButton\n                class=\"k-button k-button-increase\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.aria-label]=\"currentValue\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-e]=\"!vertical\"\n                    [class.k-i-arrow-n]=\"vertical\"\n                >\n                </span>\n            </span>\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandle\n                    role=\"slider\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"currentValue\"\n                    [attr.aria-valuetext]=\"currentValue\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"dragHandleMessage\"\n                    [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                    [id]=\"focusableId\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
+            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n                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\"\n                [title]=\"decrementMessage\"\n                [attr.tabindex]=\"-1\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-w]=\"!vertical\"\n                        [class.k-i-arrow-s]=\"vertical\">\n                    </span>\n            </button>\n            <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n                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\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.tabindex]=\"-1\"\n                [attr.aria-label]=\"currentValue\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-e]=\"!vertical\"\n                        [class.k-i-arrow-n]=\"vertical\">\n                    </span>\n            </button>\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandle\n                    role=\"slider\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"currentValue\"\n                    [attr.aria-valuetext]=\"currentValue\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"dragHandleMessage\"\n                    [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                    [id]=\"focusableId\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Injector,
@@ -1819,7 +1856,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
     return RangeSliderComponent;
 }(SliderBase));
 
-var FOCUSED = 'k-state-focused';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -1865,13 +1902,20 @@ var SwitchComponent = /** @class */ (function () {
          * @hidden
          */
         this.initialized = false;
+        this.hostClickSubscription = new Subscription;
         this._checked = false;
+        this._size = 'medium';
+        this._trackRounded = 'full';
+        this._thumbRounded = 'full';
         this.ngChange = function (_) { };
         this.ngTouched = function () { };
         /**
          * @hidden
          */
         this.handleFocus = function () {
+            if (_this.isFocused) {
+                return;
+            }
             _this.focused = true;
             if (hasObservers(_this.onFocus)) {
                 _this.ngZone.run(function () {
@@ -1882,7 +1926,11 @@ var SwitchComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.handleBlur = function () {
+        this.handleBlur = function (event) {
+            var relatedTarget = event && event.relatedTarget;
+            if (_this.hostElement.nativeElement.contains(relatedTarget)) {
+                return;
+            }
             _this.changeDetector.markForCheck();
             _this.focused = false;
             if (hasObservers(_this.onBlur) || requiresZoneOnBlur(_this.control)) {
@@ -1912,6 +1960,68 @@ var SwitchComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(SwitchComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Specifies the size of the Switch.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SwitchComponent.prototype, "thumbRounded", {
+        get: function () {
+            return this._thumbRounded;
+        },
+        /**
+         * Specifies the border radius of the Switch thumb.
+         *
+         * The possible values are:
+         * * `'full'` (default)
+         * * `'small'`
+         * * `'medium'`
+         * * `'large'`
+         * * `null`
+         */
+        set: function (thumbRounded) {
+            this.handleThumbClasses(thumbRounded);
+            this._thumbRounded = thumbRounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SwitchComponent.prototype, "trackRounded", {
+        get: function () {
+            return this._trackRounded;
+        },
+        /**
+         * Specifies the border radius of the Switch track.
+         *
+         * The possible values are:
+         * * `'full'` (default)
+         * * `'small'`
+         * * `'medium'`
+         * * `'large'`
+         * * `null`
+         */
+        set: function (trackRounded) {
+            this.handleTrackClasses(trackRounded);
+            this._trackRounded = trackRounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SwitchComponent.prototype, "tabIndex", {
         get: function () {
             return this.tabindex;
@@ -1996,10 +2106,23 @@ var SwitchComponent = /** @class */ (function () {
         this.control = this.injector.get(NgControl, null);
         this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.initialized = true; });
     };
+    SwitchComponent.prototype.ngAfterViewInit = function () {
+        var 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);
+    };
     SwitchComponent.prototype.ngOnDestroy = function () {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.hostClickSubscription) {
+            this.hostClickSubscription.unsubscribe();
+        }
     };
     /**
      * Focuses the Switch.
@@ -2017,19 +2140,19 @@ var SwitchComponent = /** @class */ (function () {
      * ```
      */
     SwitchComponent.prototype.focus = function () {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.focus();
+        this.track.nativeElement.focus();
     };
     /**
      * Blurs the Switch.
      */
     SwitchComponent.prototype.blur = function () {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.blur();
+        this.track.nativeElement.blur();
     };
     /**
      * @hidden
@@ -2079,7 +2202,7 @@ var SwitchComponent = /** @class */ (function () {
     };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     SwitchComponent.prototype.isEmpty = function () {
         return false;
@@ -2098,12 +2221,12 @@ var SwitchComponent = /** @class */ (function () {
     Object.defineProperty(SwitchComponent.prototype, "focused", {
         set: function (value) {
             if (this.isFocused !== value && this.hostElement) {
-                var element = this.hostElement.nativeElement;
+                var 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;
             }
@@ -2111,14 +2234,54 @@ var SwitchComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    SwitchComponent.prototype.attachHostClickHandler = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            _this.hostClickSubscription.add(_this.renderer.listen(_this.hostElement.nativeElement, 'click', _this.clickHandler));
+        });
+    };
     SwitchComponent.prototype.setHostClasses = function (value) {
+        var 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');
+        }
+    };
+    SwitchComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
+        }
+    };
+    SwitchComponent.prototype.handleTrackClasses = function (value) {
+        var elem = this.hostElement.nativeElement;
+        var track = this.track.nativeElement;
+        var 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);
+        }
+    };
+    SwitchComponent.prototype.handleThumbClasses = function (value) {
+        var thumb = this.thumb.nativeElement;
+        var 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);
         }
     };
     var SwitchComponent_1;
@@ -2151,6 +2314,21 @@ var SwitchComponent = /** @class */ (function () {
         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),
@@ -2168,10 +2346,6 @@ var SwitchComponent = /** @class */ (function () {
         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)
@@ -2196,10 +2370,18 @@ var SwitchComponent = /** @class */ (function () {
         __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',
@@ -2217,7 +2399,7 @@ var SwitchComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-switch',
-            template: "\n        <ng-container kendoSwitchLocalizedMessages\n            i18n-on=\"kendo.switch.on|The **On** label of the Switch.\"\n            on=\"ON\"\n            i18n-off=\"kendo.switch.off|The **Off** label of the Switch.\"\n            off=\"OFF\"\n        >\n\n        <span\n            #wrapper\n            class=\"k-switch-container\"\n            [id]=\"focusableId\"\n            role=\"switch\"\n            [style.transitionDuration]=\"initialized ? '200ms' : '0ms'\"\n            [attr.aria-checked]=\"checked\"\n            [attr.tabindex]=\"(disabled ? undefined : tabIndex)\"\n            [kendoEventsOutsideAngular]=\"{ click: clickHandler, keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }\"\n        >\n            <span class=\"k-switch-label-on\" [attr.aria-hidden]=\"true\" >{{onLabelMessage}}</span>\n            <span class=\"k-switch-label-off\" [attr.aria-hidden]=\"true\">{{offLabelMessage}}</span>\n            <span class=\"k-switch-handle\" [style.transitionDuration]=\"initialized ? '200ms' : '0ms'\"></span>\n        </span>\n  "
+            template: "\n        <ng-container kendoSwitchLocalizedMessages\n            i18n-on=\"kendo.switch.on|The **On** label of the Switch.\"\n            on=\"ON\"\n            i18n-off=\"kendo.switch.off|The **Off** label of the Switch.\"\n            off=\"OFF\"\n        >\n\n        <span\n            #track\n            class=\"k-switch-track\"\n            [id]=\"focusableId\"\n            role=\"switch\"\n            [style.transitionDuration]=\"initialized ? '200ms' : '0ms'\"\n            [attr.aria-checked]=\"checked\"\n            [attr.tabindex]=\"(disabled ? undefined : tabIndex)\"\n            [kendoEventsOutsideAngular]=\"{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }\"\n        >\n            <span class=\"k-switch-label-on\" [attr.aria-hidden]=\"true\" >{{onLabelMessage}}</span>\n            <span class=\"k-switch-label-off\" [attr.aria-hidden]=\"true\">{{offLabelMessage}}</span>\n        </span>\n        <span\n            class=\"k-switch-thumb-wrap\"\n            tabindex=\"-1\"\n            [style.transitionDuration]=\"initialized ? '200ms' : '0ms'\" [kendoEventsOutsideAngular]=\"{\n                keydown: keyDownHandler,\n                focus: handleFocus,\n                blur: handleBlur\n            }\">\n            <span #thumb class=\"k-switch-thumb\"></span>\n        </span>\n  "
         }),
         __metadata("design:paramtypes", [Renderer2,
             ElementRef,
@@ -2229,6 +2411,123 @@ var SwitchComponent = /** @class */ (function () {
     return SwitchComponent;
 }());
 
+/**
+ * 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" />
+ * ```
+ */
+var TextBoxDirective = /** @class */ (function () {
+    function TextBoxDirective(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 = [];
+    }
+    TextBoxDirective_1 = TextBoxDirective;
+    Object.defineProperty(TextBoxDirective.prototype, "value", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.inputElement.nativeElement.value;
+        },
+        /**
+         * @hidden
+         */
+        set: function (text) {
+            if (!this.inputElement) {
+                return;
+            }
+            this.inputElement.nativeElement.value = (text === undefined || text === null) ? '' : text;
+            this.onValueChange.emit();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxDirective.prototype, "id", {
+        get: function () {
+            return this.inputElement.nativeElement.id;
+        },
+        set: function (id) {
+            this.renderer.setAttribute(this.inputElement.nativeElement, 'id', id);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TextBoxDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var input = this.inputElement.nativeElement;
+        this.listeners = [
+            this.renderer.listen(input, 'focus', function () { return _this.onFocus.emit(); }),
+            this.renderer.listen(input, 'blur', function () { return _this.onBlur.emit(); })
+        ];
+        this.ngZone.runOutsideAngular(function () {
+            _this.renderer.listen(input, 'animationstart', function (e) {
+                if (e.animationName === 'autoFillStart') {
+                    _this.autoFillStart.emit();
+                }
+                else if (e.animationName === 'autoFillEnd') {
+                    _this.autoFillEnd.emit();
+                }
+            });
+        });
+    };
+    TextBoxDirective.prototype.ngOnDestroy = function () {
+        this.listeners.forEach(function (listener) { return listener(); });
+    };
+    var TextBoxDirective_1;
+    __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(function () { return TextBoxDirective_1; })
+                }]
+        }),
+        __metadata("design:paramtypes", [Renderer2,
+            ElementRef,
+            NgZone])
+    ], TextBoxDirective);
+    return TextBoxDirective;
+}());
+
 /**
  * Represents the [Kendo UI TextArea directive for the Inputs components for Angular]({% slug overview_textarea %}).
  * Provides floating labels to `textarea` elements.
@@ -2245,7 +2544,7 @@ var TextAreaDirective = /** @class */ (function () {
         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.
@@ -2437,8 +2736,9 @@ var TextAreaDirective = /** @class */ (function () {
     var TextAreaDirective_1;
     __decorate([
         HostBinding('class.k-textarea'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
-    ], TextAreaDirective.prototype, "elementClass", void 0);
+    ], TextAreaDirective.prototype, "elementClasses", void 0);
     __decorate([
         HostBinding('class.k-autofill'),
         __metadata("design:type", Boolean)
@@ -2484,415 +2784,36 @@ var TextAreaDirective = /** @class */ (function () {
 /**
  * @hidden
  */
-var FloatingLabelInputAdapter = /** @class */ (function () {
-    function FloatingLabelInputAdapter(component, formControl) {
-        this.component = component;
-        var isObservableOrEventEmitter = function (event) { return 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;
+var createMaxValidator = function (maxValue) {
+    return function (c) {
+        if (!isPresent(maxValue) || !isPresent(c.value) || c.value <= maxValue) {
+            return null;
         }
-    }
-    Object.defineProperty(FloatingLabelInputAdapter.prototype, "focusableId", {
-        get: function () {
-            var component = this.component;
-            if ('focusableId' in component) {
-                return component.focusableId;
-            }
-            else if ('id' in component) {
-                return component.id;
-            }
-            return "";
-        },
-        set: function (value) {
-            var component = this.component;
-            if ('focusableId' in component) {
-                component.focusableId = value;
+        return {
+            maxError: {
+                maxValue: maxValue,
+                value: c.value
             }
-            else if ('id' in component) {
-                component.id = value;
+        };
+    };
+};
+
+/**
+ * @hidden
+ */
+var createMinValidator = function (minValue) {
+    return function (c) {
+        if (!isPresent(minValue) || !isPresent(c.value) || c.value >= minValue) {
+            return null;
+        }
+        return {
+            minError: {
+                minValue: minValue,
+                value: c.value
             }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return FloatingLabelInputAdapter;
-}());
-
-var isFunction = function (x) { return Object.prototype.toString.call(x) === '[object Function]'; };
-/**
- * @hidden
- */
-var TextBoxContainerComponent = /** @class */ (function () {
-    function TextBoxContainerComponent(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");
-    }
-    Object.defineProperty(TextBoxContainerComponent.prototype, "hostClasses", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TextBoxContainerComponent.prototype, "textareaElementClass", {
-        get: function () {
-            return !!this.textarea;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TextBoxContainerComponent.prototype, "focusedClass", {
-        get: function () {
-            return this.focused;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TextBoxContainerComponent.prototype, "invalidClass", {
-        get: function () {
-            return this.invalid;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    TextBoxContainerComponent.prototype.ngAfterContentInit = function () {
-        var _this = this;
-        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
-        var control = new FloatingLabelInputAdapter(this.kendoInput || this.formControl.valueAccessor, this.formControl);
-        var setFocus = function (isFocused) { return function () {
-            _this.focused = isFocused;
-            _this.updateState();
-        }; };
-        this.subscribe(control, 'onFocus', setFocus(true));
-        this.subscribe(control, 'onBlur', setFocus(false));
-        this.subscribe(control, 'autoFillStart', function () {
-            _this.autoFillStarted = true;
-            _this.renderer.removeClass(_this.elementRef.nativeElement, 'k-state-empty');
-        });
-        this.subscribe(control, 'autoFillEnd', function () {
-            if (_this.autoFillStarted) {
-                _this.autoFillStarted = false;
-                if (_this.empty) {
-                    _this.renderer.addClass(_this.elementRef.nativeElement, 'k-state-empty');
-                }
-            }
-        });
-        var updateState = function () { return _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 {
-            var id = "_" + guid();
-            control.focusableId = id;
-            this.id = id;
-        }
-    };
-    /**
-     * @hidden
-     */
-    TextBoxContainerComponent.prototype.ngOnDestroy = function () {
-        this._subscriptions.forEach(function (s) { return s.unsubscribe(); });
-        this._subscriptions = [];
-    };
-    TextBoxContainerComponent.prototype.subscribe = function (control, eventName, handler) {
-        if (control[eventName] instanceof EventEmitter) {
-            var subscription = control[eventName].subscribe(handler);
-            this._subscriptions.push(subscription);
-        }
-    };
-    TextBoxContainerComponent.prototype.updateState = function () {
-        var empty = function (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;
-        };
-        var formControl = this.formControl;
-        if (formControl) {
-            var 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: "\n        <ng-content></ng-content>\n        <label *ngIf=\"floatingLabel\" [for]=\"id\" class=\"k-label\">{{ floatingLabel }}</label>\n    "
-        }),
-        __param(3, Optional()), __param(3, Inject(RTL)),
-        __metadata("design:paramtypes", [ElementRef,
-            Renderer2,
-            ChangeDetectorRef, Boolean])
-    ], TextBoxContainerComponent);
-    return TextBoxContainerComponent;
-}());
-
-/**
- * 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" />
- * ```
- */
-var TextBoxDirective = /** @class */ (function () {
-    function TextBoxDirective(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 = [];
-    }
-    TextBoxDirective_1 = TextBoxDirective;
-    Object.defineProperty(TextBoxDirective.prototype, "value", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.inputElement.nativeElement.value;
-        },
-        /**
-         * @hidden
-         */
-        set: function (text) {
-            if (!this.inputElement) {
-                return;
-            }
-            this.inputElement.nativeElement.value = (text === undefined || text === null) ? '' : text;
-            this.onValueChange.emit();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TextBoxDirective.prototype, "id", {
-        get: function () {
-            return this.inputElement.nativeElement.id;
-        },
-        set: function (id) {
-            this.renderer.setAttribute(this.inputElement.nativeElement, 'id', id);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    TextBoxDirective.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var input = this.inputElement.nativeElement;
-        this.listeners = [
-            this.renderer.listen(input, 'focus', function () { return _this.onFocus.emit(); }),
-            this.renderer.listen(input, 'blur', function () { return _this.onBlur.emit(); })
-        ];
-        this.ngZone.runOutsideAngular(function () {
-            _this.renderer.listen(input, 'animationstart', function (e) {
-                if (e.animationName === 'autoFillStart') {
-                    _this.autoFillStart.emit();
-                }
-                else if (e.animationName === 'autoFillEnd') {
-                    _this.autoFillEnd.emit();
-                }
-            });
-        });
-    };
-    TextBoxDirective.prototype.ngOnDestroy = function () {
-        this.listeners.forEach(function (listener) { return listener(); });
-    };
-    var TextBoxDirective_1;
-    __decorate([
-        HostBinding('class.k-textbox'),
-        __metadata("design:type", Boolean)
-    ], TextBoxDirective.prototype, "hostClass", 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(function () { return TextBoxDirective_1; })
-                }]
-        }),
-        __metadata("design:paramtypes", [Renderer2,
-            ElementRef,
-            NgZone])
-    ], TextBoxDirective);
-    return TextBoxDirective;
-}());
-
-/**
- * @hidden
- */
-var createMaxValidator = function (maxValue) {
-    return function (c) {
-        if (!isPresent(maxValue) || !isPresent(c.value) || c.value <= maxValue) {
-            return null;
-        }
-        return {
-            maxError: {
-                maxValue: maxValue,
-                value: c.value
-            }
-        };
-    };
-};
-
-/**
- * @hidden
- */
-var createMinValidator = function (minValue) {
-    return function (c) {
-        if (!isPresent(minValue) || !isPresent(c.value) || c.value >= minValue) {
-            return null;
-        }
-        return {
-            minError: {
-                minValue: minValue,
-                value: c.value
-            }
-        };
-    };
-};
+        };
+    };
+};
 
 /**
  * @hidden
@@ -3023,8 +2944,7 @@ var PARSABLE_DEFAULTS = {
     min: null,
     step: 1
 };
-var FOCUSED$1 = 'k-state-focused';
-var FORMATTED_VALUE = 'k-formatted-value';
+var FOCUSED$1 = 'k-focus';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -3120,15 +3040,20 @@ var NumericTextBoxComponent = /** @class */ (function () {
          * @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
          */
@@ -3323,9 +3248,69 @@ var NumericTextBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(NumericTextBoxComponent.prototype, "widgetClasses", {
+    Object.defineProperty(NumericTextBoxComponent.prototype, "size", {
         get: function () {
-            return true;
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumericTextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumericTextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * 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: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumericTextBoxComponent.prototype, "disableClass", {
+        get: function () {
+            return this.disabled;
         },
         enumerable: true,
         configurable: true
@@ -3343,6 +3328,17 @@ var NumericTextBoxComponent = /** @class */ (function () {
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
         }
         this.control = this.injector.get(NgControl, null);
+        this.ngZone.runOutsideAngular(function () {
+            _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)));
+        });
+    };
+    NumericTextBoxComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     /**
      * @hidden
@@ -3376,6 +3372,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
             this.subscriptions.unsubscribe();
         }
         clearTimeout(this.spinTimeout);
+        this.domEvents.forEach(function (unbindHandler) { return unbindHandler(); });
     };
     /**
      * @hidden
@@ -3495,18 +3492,13 @@ var NumericTextBoxComponent = /** @class */ (function () {
             return this.isFocused;
         },
         set: function (value) {
-            if (this.isFocused !== value && this.numericWrap) {
-                var wrap = this.numericWrap.nativeElement;
-                var input = this.numericInput.nativeElement;
+            if (this.isFocused !== value && this.hostElement) {
+                var 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;
             }
@@ -3815,6 +3807,16 @@ var NumericTextBoxComponent = /** @class */ (function () {
         }
         return significantChars;
     };
+    NumericTextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
+        }
+    };
     var NumericTextBoxComponent_1;
     __decorate([
         Input(),
@@ -3894,6 +3896,21 @@ var NumericTextBoxComponent = /** @class */ (function () {
         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)
@@ -3910,20 +3927,20 @@ var NumericTextBoxComponent = /** @class */ (function () {
         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',
@@ -3935,7 +3952,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
                 { provide: KendoInput, useExisting: forwardRef(function () { return NumericTextBoxComponent_1; }) }
             ],
             selector: 'kendo-numerictextbox',
-            template: "\n        <ng-container kendoNumericTextBoxLocalizedMessages\n            i18n-increment=\"kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox\"\n            increment=\"Increase value\"\n            i18n-decrement=\"kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox\"\n            decrement=\"Decrease value\"\n        >\n        </ng-container>\n        <span\n            class=\"k-numeric-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n            [kendoEventsOutsideAngular]=\"{ mousewheel: handleWheel, DOMMouseScroll: handleWheel }\"\n            #numericWrap>\n            <input\n            role=\"spinbutton\"\n            class=\"k-input k-formatted-value\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            [id]=\"focusableId\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.title]=\"title\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.maxLength]=\"maxlength\"\n            [tabindex]=\"tabIndex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: handleMouseDown,\n                dragenter: handleDragEnter,\n                keydown: handleKeyDown,\n                input: handleInput,\n                focus: handleFocus,\n                blur: handleBlur,\n                paste: handlePaste\n            }\"\n            #numericInput />\n            <span class=\"k-select\" *ngIf=\"spinners\" [kendoEventsOutsideAngular]=\"{ mouseup: releaseArrow, mouseleave: releaseArrow }\">\n                <span\n                    role=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: increasePress }\"\n                    [attr.aria-label]=\"incrementTitle\"\n                    [title]=\"incrementTitle\"\n                    [class.k-state-active]=\"arrowDirection === ArrowDirection.Up\"\n                    class=\"k-link k-link-increase\"\n                >\n                    <span class=\"k-icon k-i-arrow-n\"></span>\n                </span>\n                <span\n                    role=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: decreasePress }\"\n                    [attr.aria-label]=\"decrementTitle\"\n                    [title]=\"decrementTitle\"\n                    [class.k-state-active]=\"arrowDirection === ArrowDirection.Down\"\n                    class=\"k-link k-link-decrease\"\n                >\n                    <span class=\"k-icon k-i-arrow-s\"></span>\n                </span>\n            </span>\n        </span>\n      "
+            template: "\n        <ng-container kendoNumericTextBoxLocalizedMessages\n            i18n-increment=\"kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox\"\n            increment=\"Increase value\"\n            i18n-decrement=\"kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox\"\n            decrement=\"Decrease value\"\n        >\n        </ng-container>\n            <input\n            role=\"spinbutton\"\n            class=\"k-input-inner\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            [id]=\"focusableId\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.title]=\"title\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.maxLength]=\"maxlength\"\n            [tabindex]=\"tabIndex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: handleMouseDown,\n                dragenter: handleDragEnter,\n                keydown: handleKeyDown,\n                input: handleInput,\n                focus: handleFocus,\n                blur: handleBlur,\n                paste: handlePaste\n            }\"\n            #numericInput />\n            <span\n                class=\"k-input-spinner k-spin-button\" *ngIf=\"spinners\"\n                [kendoEventsOutsideAngular]=\"{ mouseup: releaseArrow, mouseleave: releaseArrow }\"\n            >\n               <button\n                    type=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: increasePress }\"\n                    [attr.aria-hidden]=\"true\"\n                    [attr.aria-label]=\"incrementTitle\"\n                    [title]=\"incrementTitle\"\n                    [class.k-active]=\"arrowDirection === ArrowDirection.Up\"\n                    class=\"k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"k-button-icon k-icon k-i-arrow-n\"></span>\n               </button>\n               <button\n                    type=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: decreasePress }\"\n                    [attr.aria-hidden]=\"true\"\n                    [attr.aria-label]=\"decrementTitle\"\n                    [title]=\"decrementTitle\"\n                    [class.k-active]=\"arrowDirection === ArrowDirection.Down\"\n                    class=\"k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base\"\n                    tabindex=\"-1\"\n               >\n                    <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n               </button>\n            </span>\n      "
         }),
         __metadata("design:paramtypes", [IntlService,
             Renderer2,
@@ -4465,7 +4482,7 @@ var MaskingService = /** @class */ (function () {
 }());
 
 var resolvedPromise = Promise.resolve(null);
-var FOCUSED$2 = 'k-state-focused';
+var FOCUSED$2 = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -4599,6 +4616,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         };
         this.isPasted = false;
         this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -4652,6 +4672,66 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         this.updateService();
     }
     MaskedTextBoxComponent_1 = MaskedTextBoxComponent;
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * 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: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MaskedTextBoxComponent.prototype, "hostDisabledClass", {
         get: function () {
             return this.disabled;
@@ -4691,9 +4771,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.control = this.injector.get(NgControl, null);
     };
+    MaskedTextBoxComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (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.
      */
     MaskedTextBoxComponent.prototype.isEmpty = function () {
         if (this.input) {
@@ -4945,6 +5032,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         return present ? value : '';
     };
+    MaskedTextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
+        }
+    };
     var MaskedTextBoxComponent_1;
     __decorate([
         Input(),
@@ -4962,17 +5059,32 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         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);
@@ -5067,7 +5179,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-maskedtextbox',
-            template: "\n        <input type=\"text\"\n            #input\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-textbox\"\n            [id]=\"focusableId\"\n            [tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur,\n                click: handleClick,\n                dragstart: handleDragDrop,\n                drop: handleDragDrop\n            }\"\n        />\n    "
+            template: "\n        <input type=\"text\"\n            #input\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-input-inner\"\n            [id]=\"focusableId\"\n            [tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur,\n                click: handleClick,\n                dragstart: handleDragDrop,\n                drop: handleDragDrop\n            }\"\n        />\n    "
         }),
         __param(6, Optional()), __param(6, Inject(RTL)),
         __metadata("design:paramtypes", [MaskingService,
@@ -5817,7 +5929,7 @@ var TextBoxPrefixTemplateDirective = /** @class */ (function () {
     return TextBoxPrefixTemplateDirective;
 }());
 
-var FOCUSED$3 = 'k-state-focused';
+var FOCUSED$3 = 'k-focus';
 var TextBoxComponent = /** @class */ (function () {
     function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         var _this = this;
@@ -5952,9 +6064,12 @@ var TextBoxComponent = /** @class */ (function () {
          * ```
          */
         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
          */
@@ -6009,6 +6124,70 @@ var TextBoxComponent = /** @class */ (function () {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     TextBoxComponent_1 = TextBoxComponent;
+    Object.defineProperty(TextBoxComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * 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: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TextBoxComponent.prototype, "tabIndex", {
         get: function () {
             return this.tabindex;
@@ -6058,7 +6237,7 @@ var TextBoxComponent = /** @class */ (function () {
                     return;
                 }
                 if (tabbing) {
-                    var closestTextbox = closest(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
+                    var closestTextbox = closest$1(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
                     if (!closestTextbox) {
                         _this.handleBlur();
                     }
@@ -6085,6 +6264,10 @@ var TextBoxComponent = /** @class */ (function () {
                 }
             }));
         });
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     TextBoxComponent.prototype.ngOnChanges = function (changes) {
         if (changes.disabled || changes.readonly || changes.value) {
@@ -6218,8 +6401,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             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";
         },
         enumerable: true,
         configurable: true
@@ -6230,8 +6413,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             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";
         },
         enumerable: true,
         configurable: true
@@ -6243,7 +6426,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.clearButtonIcon
                 ? this.clearButtonIcon
-                : "k-icon k-i-close-circle";
+                : "k-icon k-i-x";
         },
         enumerable: true,
         configurable: true
@@ -6322,6 +6505,16 @@ var TextBoxComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
+    TextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
+        }
+    };
     var TextBoxComponent_1;
     __decorate([
         Input(),
@@ -6375,6 +6568,21 @@ var TextBoxComponent = /** @class */ (function () {
         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),
@@ -6421,14 +6629,15 @@ var TextBoxComponent = /** @class */ (function () {
         __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)
@@ -6447,7 +6656,7 @@ var TextBoxComponent = /** @class */ (function () {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextBoxComponent_1; }) }
             ],
             selector: 'kendo-textbox',
-            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input\n            class=\"k-input\"\n            #input\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"/>\n        <span class=\"k-input-suffix\">\n            <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n            <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n            <span\n                role=\"button\"\n                class=\"k-clear-value\"\n                *ngIf=\"showClearButton\"\n                (click)=\"clearValue()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [tabindex]=\"tabIndex\"\n                [attr.aria-label]=\"clearTitle()\"\n                [title]=\"clearTitle()\"\n                (keydown.enter)=\"clearValue($event)\"\n                (keydown.space)=\"clearValue($event)\"\n                >\n                <span [ngClass]=\"clearButtonClasses\"></span>\n            </span>\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
+            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input #input\n            class=\"k-input-inner\"\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"\n        />\n        <span\n            role=\"button\"\n            class=\"k-clear-value\"\n            *ngIf=\"showClearButton\"\n            (click)=\"clearValue()\"\n            (mousedown)=\"$event.preventDefault()\"\n            [tabindex]=\"tabIndex\"\n            [attr.aria-label]=\"clearTitle()\"\n            [title]=\"clearTitle()\"\n            (keydown.enter)=\"clearValue($event)\"\n            (keydown.space)=\"clearValue($event)\">\n                <span [ngClass]=\"clearButtonClasses\"></span>\n        </span>\n        <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n        <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n        <span class=\"k-input-suffix\">\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             NgZone,
@@ -6631,7 +6840,6 @@ var TextBoxModule = /** @class */ (function () {
         NgModule({
             declarations: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,
@@ -6640,7 +6848,6 @@ var TextBoxModule = /** @class */ (function () {
             ],
             exports: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,
@@ -6779,7 +6986,7 @@ var TextFieldsBase = /** @class */ (function () {
         __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);
@@ -6797,7 +7004,7 @@ var resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-var FOCUSED$4 = 'k-state-focus';
+var FOCUSED$4 = 'k-focus';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -6815,7 +7022,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
          * @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.
@@ -6889,6 +7096,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
          * 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
          */
@@ -6958,6 +7168,69 @@ var TextAreaComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TextAreaComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * 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: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TextAreaComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         var hostElement = this.hostElement.nativeElement;
@@ -6978,7 +7251,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                     return;
                 }
                 if (tabbing) {
-                    var closestTextbox = closest(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
+                    var closestTextbox = closest$1(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
                     if (!closestTextbox) {
                         _this.handleBlur();
                     }
@@ -7005,6 +7278,10 @@ var TextAreaComponent = /** @class */ (function (_super) {
                 }
             }));
         });
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     TextAreaComponent.prototype.ngOnInit = function () {
         var _this = this;
@@ -7178,6 +7455,16 @@ var TextAreaComponent = /** @class */ (function (_super) {
             this.setSelection(0, this.value.length);
         }
     };
+    TextAreaComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
+        }
+    };
     var TextAreaComponent_1;
     __decorate([
         Input(),
@@ -7185,8 +7472,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     ], 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),
@@ -7226,6 +7514,21 @@ var TextAreaComponent = /** @class */ (function (_super) {
         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)
@@ -7252,7 +7555,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextAreaComponent_1; }) }
             ],
             selector: 'kendo-textarea',
-            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    "
+            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             NgZone,
@@ -8044,7 +8347,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = __decorate([
         Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             Renderer2,
@@ -8132,6 +8435,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues = new Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -8699,7 +9003,7 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
             styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         __metadata("design:paramtypes", [ElementRef,
@@ -8711,6 +9015,32 @@ var ColorGradientComponent = /** @class */ (function () {
     return ColorGradientComponent;
 }());
 
+/**
+ * @hidden
+ */
+var ColorPaletteLocalizationService = /** @class */ (function (_super) {
+    __extends(ColorPaletteLocalizationService, _super);
+    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        var _this = _super.call(this, prefix, messageService, _rtl) || this;
+        _this.flatColorPickerLocalization = flatColorPickerLocalization;
+        return _this;
+    }
+    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return _super.prototype.get.call(this, 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);
+    return ColorPaletteLocalizationService;
+}(LocalizationService));
+
 /**
  * @hidden
  */
@@ -8771,32 +9101,6 @@ var ColorPaletteService = /** @class */ (function () {
     return ColorPaletteService;
 }());
 
-/**
- * @hidden
- */
-var ColorPaletteLocalizationService = /** @class */ (function (_super) {
-    __extends(ColorPaletteLocalizationService, _super);
-    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
-        var _this = _super.call(this, prefix, messageService, _rtl) || this;
-        _this.flatColorPickerLocalization = flatColorPickerLocalization;
-        return _this;
-    }
-    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
-        if (this.flatColorPickerLocalization) {
-            return this.flatColorPickerLocalization.get(shortKey);
-        }
-        return _super.prototype.get.call(this, 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);
-    return ColorPaletteLocalizationService;
-}(LocalizationService));
-
 var DEFAULT_TILE_SIZE = 24;
 var DEFAULT_COLUMNS_COUNT = 10;
 var DEFAULT_PRESET$1 = 'office';
@@ -8870,6 +9174,7 @@ var ColorPaletteComponent = /** @class */ (function () {
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -9371,7 +9676,7 @@ var FlatColorPickerHeaderComponent = /** @class */ (function () {
     FlatColorPickerHeaderComponent = __decorate([
         Component({
             selector: '[kendoFlatColorPickerHeader]',
-            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-icon-button k-flat\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-icon-button k-flat k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerHeaderComponent);
@@ -9414,7 +9719,7 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
     FlatColorPickerActionButtonsComponent = __decorate([
         Component({
             selector: '[kendoFlatColorPickerActionButtons]',
-            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerActionButtonsComponent);
@@ -9428,10 +9733,10 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 var FlatColorPickerComponent = /** @class */ (function () {
-    function FlatColorPickerComponent(service, host, localizationService, cdr, renderer, ngZone) {
+    function FlatColorPickerComponent(host, service, localizationService, cdr, renderer, ngZone) {
         var _this = this;
-        this.service = service;
         this.host = host;
+        this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
@@ -9514,6 +9819,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
         this.subscriptions = new Subscription();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -9945,8 +10251,8 @@ var FlatColorPickerComponent = /** @class */ (function () {
             ],
             template: "\n        <ng-container kendoFlatColorPickerLocalizedMessages\n            i18n-flatColorPickerNoColor=\"kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.flatcolorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.flatcolorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.flatcolorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.flatcolorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.flatcolorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.flatcolorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.flatcolorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.flatcolorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <div kendoFlatColorPickerHeader\n            *ngIf=\"headerHasContent\"\n            #header\n            [clearButton]=\"clearButton\"\n            [activeView]=\"activeView\"\n            [views]=\"views\"\n            [value]=\"value\"\n            [selection]=\"selection\"\n            [preview]=\"preview\"\n            (clearButtonClick)=\"onClearButtonClick()\"\n            (viewChange)=\"onViewChange($event)\"\n            (valuePaneClick)=\"resetSelection($event)\">\n        </div>\n        <div class=\"k-coloreditor-views k-vstack\">\n            <kendo-colorgradient #gradient\n                *ngIf=\"activeView === 'gradient'\"\n                [tabindex]=\"null\"\n                [value]=\"selection\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [delay]=\"gradientSettings.delay\"\n                [contrastTool]=\"gradientSettings.contrastTool\"\n                [readonly]=\"readonly\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette #palette\n                *ngIf=\"activeView === 'palette'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"selection\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorpalette>\n        </div>\n        <div kendoFlatColorPickerActionButtons *ngIf=\"preview\"\n            #footer\n            [ngClass]=\"'k-justify-content-' + actionsLayout\"\n            (actionButtonClick)=\"onAction($event)\">\n        </div>\n"
         }),
-        __metadata("design:paramtypes", [FlatColorPickerService,
-            ElementRef,
+        __metadata("design:paramtypes", [ElementRef,
+            FlatColorPickerService,
             LocalizationService,
             ChangeDetectorRef,
             Renderer2,
@@ -9955,7 +10261,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
     return FlatColorPickerComponent;
 }());
 
-var serial$2 = 0;
+var DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -9963,17 +10269,16 @@ var 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.
  */
 var ColorPickerComponent = /** @class */ (function () {
-    function ColorPickerComponent(popupService, cdr, localizationService, ngZone) {
+    function ColorPickerComponent(host, popupService, cdr, localizationService, ngZone, renderer) {
         var _this = this;
+        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.
@@ -10065,23 +10370,80 @@ var ColorPickerComponent = /** @class */ (function () {
          */
         this.activeColorClick = new EventEmitter();
         /**
-         * Fires each time the view is about to change.
-         * Used to provide a two-way binding for the `activeView` property.
+         * Fires each time the view is about to change.
+         * 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 = function () { };
+        this.notifyNgChanged = function () { };
+        this.domFocusListener = function (event) { return event.stopImmediatePropagation(); };
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    ColorPickerComponent_1 = ColorPickerComponent;
+    Object.defineProperty(ColorPickerComponent.prototype, "focusedClass", {
+        get: function () {
+            return this.isFocused;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "disabledClass", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "hostTabindex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "view", {
+        get: function () {
+            return (this.views && this.views.length > 0) ? this.views[0] : null;
+        },
+        /**
+         * @hidden
          */
-        this.activeViewChange = new EventEmitter();
-        this._tabindex = 0;
-        this._popupSettings = { animate: true };
-        this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, delay: 0 };
-        this.notifyNgTouched = function () { };
-        this.notifyNgChanged = function () { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ColorPickerComponent_1 = ColorPickerComponent;
+        set: function (view) {
+            this.views = [view];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "value", {
         get: function () {
             return this._value;
@@ -10151,6 +10513,70 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ColorPickerComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * 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: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "isOpen", {
         /**
          * Indicates whether the ColorPicker popup is open.
@@ -10188,6 +10614,16 @@ var ColorPickerComponent = /** @class */ (function () {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     };
+    ColorPickerComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
+    };
     ColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (changes.format && changes.format.currentValue === 'name') {
             this.activeView = 'palette';
@@ -10196,23 +10632,18 @@ var ColorPickerComponent = /** @class */ (function () {
             this.format = 'rgba';
             this.value = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     };
-    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
      * @hidden
      */
@@ -10223,55 +10654,74 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.togglePopup = function () {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleActiveColorClick = function () {
+    ColorPickerComponent.prototype.handleWrapperClick = function (event) {
+        var _this = this;
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        var event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, function (element) { return element === _this.activeColor.nativeElement; })) {
+            var event_1 = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event_1);
+            if (!event_1.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     ColorPickerComponent.prototype.focus = function () {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
+        var _this = this;
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(function () {
+            _this.focus();
+            _this.onFocus.emit();
+        });
     };
     /**
      * Blurs the ColorPicker.
      */
     ColorPickerComponent.prototype.blur = function () {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperBlur = function () {
+        var _this = this;
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(function () {
+            _this.onBlur.emit();
+            _this.isFocused = false;
+        });
+    };
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
+        ev.preventDefault();
     };
     /**
      * Clears the value of the ColorPicker.
@@ -10281,6 +10731,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     };
     /**
@@ -10308,6 +10759,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     };
@@ -10352,9 +10804,12 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
+        var _this = this;
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(function () {
+                _this.toggleWithEvents(true);
+            });
         }
     };
     /**
@@ -10363,14 +10818,14 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
                 event.preventDefault();
-                nextElement.nativeElement.focus();
+                nextElement.focus();
             }
         }
     };
@@ -10381,10 +10836,25 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.isEmpty = function () {
         return false;
     };
+    ColorPickerComponent.prototype.setHostElementAriaLabel = function () {
+        var ariaLabelValue = "" + (this.value ? this.value : this.localizationService.get('colorPickerNoColor'));
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    };
+    ColorPickerComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.host.nativeElement;
+        var 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);
+        }
+    };
     ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
-        var focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        var wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
-        return !this.isFocused || wrapperClicked || focusInPopupElement;
+        var _this = this;
+        var focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var hostClicked = closest(ev.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+        return hostClicked || focusInFlatColorPickerElement;
     };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
         var sameState = this.isOpen === open;
@@ -10409,12 +10879,12 @@ var ColorPickerComponent = /** @class */ (function () {
     };
     ColorPickerComponent.prototype.focusFirstElement = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            setTimeout(function () {
+        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+            if (_this.flatColorPicker) {
                 var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
                     _this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     };
     ColorPickerComponent.prototype.openPopup = function () {
@@ -10423,7 +10893,7 @@ var ColorPickerComponent = /** @class */ (function () {
         var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         var 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,
@@ -10435,7 +10905,7 @@ var ColorPickerComponent = /** @class */ (function () {
         this.popupRef.popupAnchorViewportLeave.subscribe(function () {
             _this.toggleWithEvents(false);
             if (!_this.isOpen) {
-                _this.wrapper.nativeElement.focus({
+                _this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -10471,23 +10941,103 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ColorPickerComponent.prototype.handleDomEvents = function (action, events) {
+        var _this = this;
+        var hostElement = this.host.nativeElement;
+        events.forEach(function (ev) { return hostElement[action + "EventListener"](ev, _this.domFocusListener, true); });
+    };
+    ColorPickerComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.host) {
+            return;
+        }
+        var hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusin', function () {
+                _this.handleWrapperFocus();
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusout', function (event) {
+                var closestPopup = _this.popupRef ?
+                    closest(event.relatedTarget, function (element) { return element === _this.flatColorPicker.host.nativeElement; }) :
+                    false;
+                var closestWrapper = closest(event.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+                if (!closestPopup && !closestWrapper) {
+                    _this.handleWrapperBlur();
+                }
+            }));
+            _this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'keydown', function (event) {
+                _this.handleWrapperKeyDown(event);
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'click', function (event) {
+                _this.ngZone.run(function () {
+                    _this.handleWrapperClick(event);
+                });
+            }));
+        });
+    };
+    ColorPickerComponent.prototype.handleHostId = function () {
+        var hostElement = this.host.nativeElement;
+        var existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            var id = "k-" + guid();
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    };
     var ColorPickerComponent_1;
     __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)
@@ -10549,6 +11099,21 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
@@ -10586,9 +11151,9 @@ var ColorPickerComponent = /** @class */ (function () {
         __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)
@@ -10619,12 +11184,14 @@ var ColorPickerComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"togglePopup()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span #activeColor class=\"k-input-inner\">\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\">\n                <span *ngIf=\"iconClass || icon\" class=\"k-color-preview-icon k-icon\" [ngClass]=\"iconStyles\"></span>\n                <span class=\"k-color-preview-mask\" [style.background-color]=\"value\"></span>\n            </span>\n        </span>\n        <button\n            #arrowButton\n            tabindex=\"-1\"\n            role=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
-        __metadata("design:paramtypes", [PopupService,
+        __metadata("design:paramtypes", [ElementRef,
+            PopupService,
             ChangeDetectorRef,
             LocalizationService,
-            NgZone])
+            NgZone,
+            Renderer2])
     ], ColorPickerComponent);
     return ColorPickerComponent;
 }());
@@ -11069,17 +11636,92 @@ var ColorPickerModule = /** @class */ (function () {
  * ```
  */
 var CheckBoxDirective = /** @class */ (function () {
-    function CheckBoxDirective() {
+    function CheckBoxDirective(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
     }
+    Object.defineProperty(CheckBoxDirective.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the width and height of the CheckBox
+         * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CheckBoxDirective.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CheckBoxDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
+    CheckBoxDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
     return CheckBoxDirective;
 }());
@@ -11138,17 +11780,66 @@ var CheckBoxModule = /** @class */ (function () {
  * ```
  */
 var RadioButtonDirective = /** @class */ (function () {
-    function RadioButtonDirective() {
+    function RadioButtonDirective(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.kendoClass = true;
+        this._size = 'medium';
+        validatePackage(packageMetadata);
     }
+    Object.defineProperty(RadioButtonDirective.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    RadioButtonDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        // kept in sync with other inputs for easier refactoring
+        // to a common base class
+        var stylingInputs = ['size'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
+    RadioButtonDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
     return RadioButtonDirective;
 }());
@@ -11197,7 +11888,7 @@ var RadioButtonModule = /** @class */ (function () {
     return RadioButtonModule;
 }());
 
-var serial$3 = 0;
+var serial$2 = 0;
 /**
  * Represents an error message that will be shown underneath
  * a Kendo control or native HTML form-bound component after a validation.
@@ -11216,7 +11907,7 @@ var ErrorComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.id = "kendo-error-" + serial$3++;
+        this.id = "kendo-error-" + serial$2++;
         this.roleAttribute = 'alert';
     }
     Object.defineProperty(ErrorComponent.prototype, "startClass", {
@@ -11276,7 +11967,7 @@ var ErrorComponent = /** @class */ (function () {
     return ErrorComponent;
 }());
 
-var serial$4 = 0;
+var serial$3 = 0;
 /**
  * Represents a hint message that will be shown underneath a form-bound component.
  */
@@ -11293,7 +11984,7 @@ var HintComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.id = "kendo-hint-" + serial$4++;
+        this.id = "kendo-hint-" + serial$3++;
         this.hostClass = true;
     }
     Object.defineProperty(HintComponent.prototype, "startClass", {
@@ -11735,4 +12426,4 @@ var InputsModule = /** @class */ (function () {
  * 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 };