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

package/dist/es/slider/slider.component.js

@@ -468,7 +468,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  "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             Injector,

package/dist/es/switch/switch.component.js

@@ -9,10 +9,11 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { hasObservers, guid, Keys, KendoInput } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { requiresZoneOnBlur } from '../common/utils';
+import { requiresZoneOnBlur, getStylingClasses } from '../common/utils';
+import { Subscription } from "rxjs";
 import { skip, take } from "rxjs/operators";
 import { browser } from '@progress/kendo-common';
-var FOCUSED = 'k-state-focused';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -58,13 +59,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 () {
@@ -75,7 +83,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)) {
@@ -105,6 +117,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;
@@ -189,10 +263,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.
@@ -210,19 +297,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
@@ -272,7 +359,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;
@@ -291,12 +378,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;
             }
@@ -304,14 +391,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;
@@ -344,6 +471,21 @@ var SwitchComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Number)
     ], SwitchComponent.prototype, "tabindex", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SwitchComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SwitchComponent.prototype, "thumbRounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SwitchComponent.prototype, "trackRounded", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Number),
@@ -361,10 +503,6 @@ var SwitchComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], SwitchComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", Object)
-    ], SwitchComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
@@ -389,10 +527,18 @@ var SwitchComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], SwitchComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], SwitchComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        ViewChild('track', { static: true }),
+        tslib_1.__metadata("design:type", Object)
+    ], SwitchComponent.prototype, "track", void 0);
+    tslib_1.__decorate([
+        ViewChild('thumb', { static: true }),
+        tslib_1.__metadata("design:type", Object)
+    ], SwitchComponent.prototype, "thumb", void 0);
     SwitchComponent = SwitchComponent_1 = tslib_1.__decorate([
         Component({
             exportAs: 'kendoSwitch',
@@ -410,7 +556,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  "
         }),
         tslib_1.__metadata("design:paramtypes", [Renderer2,
             ElementRef,

package/dist/es/text-fields-common/text-fields-base.js

@@ -131,7 +131,7 @@ var TextFieldsBase = /** @class */ (function () {
         tslib_1.__metadata("design:type", ElementRef)
     ], TextFieldsBase.prototype, "input", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextFieldsBase.prototype, "disabledClass", null);

package/dist/es/textarea/textarea.component.js

@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { KendoInput, guid, isDocumentAvailable, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { TextFieldsBase } from '../text-fields-common/text-fields-base';
-import { areSame, isPresent } from '../common/utils';
+import { areSame, isPresent, getStylingClasses } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { closest } from './../common/dom-utils';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -22,7 +22,7 @@ var resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-var FOCUSED = 'k-state-focus';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -40,7 +40,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.
@@ -114,6 +114,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
          */
@@ -183,6 +186,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;
@@ -230,6 +296,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;
@@ -403,6 +473,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;
     tslib_1.__decorate([
         Input(),
@@ -410,8 +490,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     ], TextAreaComponent.prototype, "focusableId", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-textarea'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextAreaComponent.prototype, "hostClass", void 0);
+    ], TextAreaComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-flex-col'),
         tslib_1.__metadata("design:type", Boolean),
@@ -451,6 +532,21 @@ var TextAreaComponent = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TextAreaComponent.prototype, "resizable", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output('focus'),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -477,7 +573,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             NgZone,