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

package/dist/es2015/radiobutton/radiobutton.directive.js

@@ -3,7 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { getStylingClasses } from '../common/utils';
+import { packageMetadata } from '../package-metadata';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -14,26 +17,61 @@ import { Directive, HostBinding } from '@angular/core';
  * ```
  */
 let RadioButtonDirective = class RadioButtonDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        validatePackage(packageMetadata);
+    }
     /**
-     * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
-     * The directive is placed on input type="radio" elements.
-     *
-     * @example
-     * ```ts-no-run
-     * <input type="radio" kendoRadioButton />
-     * ```
+     * The size property specifies the width and height of the RadioButton
+     * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    constructor() {
-        this.kendoClass = true;
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    ngAfterViewInit() {
+        // kept in sync with other inputs for easier refactoring
+        // to a common base class
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('radio', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
     }
 };
 tslib_1.__decorate([
     HostBinding('class.k-radio'),
     tslib_1.__metadata("design:type", Boolean)
 ], RadioButtonDirective.prototype, "kendoClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], RadioButtonDirective.prototype, "size", null);
 RadioButtonDirective = tslib_1.__decorate([
     Directive({
         selector: 'input[kendoRadioButton]'
-    })
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2, ElementRef])
 ], RadioButtonDirective);
 export { RadioButtonDirective };

package/dist/es2015/shared/textarea.directive.d.ts

@@ -19,7 +19,7 @@ export declare class TextAreaDirective implements OnInit, OnDestroy, OnChanges,
     private zone;
     private changeDetector;
     private injector;
-    elementClass: boolean;
+    elementClasses: boolean;
     autofillClass: boolean;
     direction: string;
     /**

package/dist/es2015/shared/textarea.directive.js

@@ -27,7 +27,7 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
         this.zone = zone;
         this.changeDetector = changeDetector;
         this.injector = injector;
-        this.elementClass = true;
+        this.elementClasses = true;
         this.autofillClass = true;
         /**
          * Fires each time the textarea value is changed.
@@ -206,8 +206,9 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
 };
 tslib_1.__decorate([
     HostBinding('class.k-textarea'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
-], TextAreaDirective.prototype, "elementClass", void 0);
+], TextAreaDirective.prototype, "elementClasses", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-autofill'),
     tslib_1.__metadata("design:type", Boolean)

package/dist/es2015/slider/slider.component.js

@@ -446,33 +446,28 @@ SliderComponent = SliderComponent_1 = tslib_1.__decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <span
-                #decreaseButton
-                *ngIf="showButtons"
-                class="k-button k-button-decrease"
+            <button *ngIf="showButtons" type="button" #decreaseButton
+                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="decrementMessage"
-                role="presentation"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-w]="!vertical"
-                    [class.k-i-arrow-s]="vertical"
-                >
-                </span>
-            </span>
-            <span
-                *ngIf="showButtons"
-                #increaseButton
-                class="k-button k-button-increase"
+                [attr.tabindex]="-1"
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-w]="!vertical"
+                        [class.k-i-arrow-s]="vertical">
+                    </span>
+            </button>
+            <button *ngIf="showButtons" type="button" #increaseButton
+                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
+                [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-e]="!vertical"
-                    [class.k-i-arrow-n]="vertical"
-                >
-                </span>
-            </span>
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-e]="!vertical"
+                        [class.k-i-arrow-n]="vertical">
+                    </span>
+            </button>
             <ul kendoSliderTicks
                 #ticks
                 *ngIf="tickPlacement !== 'none'"

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

@@ -2,14 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, Renderer2, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, NgZone, Injector } from '@angular/core';
+import { ElementRef, Renderer2, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, NgZone, Injector, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Subscription } from "rxjs";
+import { InputRounded, InputSize } from '../common/models';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
-export declare class SwitchComponent implements ControlValueAccessor, OnInit, OnDestroy {
+export declare class SwitchComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
     private renderer;
     private hostElement;
     private localizationService;
@@ -44,6 +45,38 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Switch.
      */
     tabindex: number;
+    /**
+     * Specifies the size of the Switch.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * Specifies the border radius of the Switch thumb.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    thumbRounded: InputRounded;
+    /**
+     * Specifies the border radius of the Switch track.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    trackRounded: InputRounded;
     /**
      * @hidden
      */
@@ -60,13 +93,14 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
      * Fires each time the user selects a new value.
      */
     valueChange: EventEmitter<any>;
-    wrapper: any;
     direction: string;
     readonly ieClass: boolean;
     readonly ariaDisabled: boolean;
     readonly ariaReadonly: boolean;
     hostClasses: boolean;
     readonly disabledClass: boolean;
+    track: any;
+    thumb: any;
     /**
      * @hidden
      */
@@ -74,7 +108,11 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     protected localizationChangeSubscription: Subscription;
     protected isFocused: boolean;
     protected control: NgControl;
+    private hostClickSubscription;
     private _checked;
+    private _size;
+    private _trackRounded;
+    private _thumbRounded;
     constructor(renderer: Renderer2, hostElement: ElementRef, localizationService: LocalizationService, injector: Injector, changeDetector: ChangeDetectorRef, ngZone: NgZone);
     /**
      * @hidden
@@ -88,6 +126,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     protected ngTouched: Function;
     protected readonly isEnabled: boolean;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
      * Focuses the Switch.
@@ -122,7 +161,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     /**
      * @hidden
      */
-    handleBlur: () => void;
+    handleBlur: (event: any) => void;
     /**
      * @hidden
      */
@@ -145,10 +184,14 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     clickHandler(): void;
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
     private changeValue;
     private focused;
+    private attachHostClickHandler;
     private setHostClasses;
+    private handleClasses;
+    private handleTrackClasses;
+    private handleThumbClasses;
 }

package/dist/es2015/switch/switch.component.js

@@ -10,10 +10,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';
-const FOCUSED = 'k-state-focused';
+const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -58,13 +59,20 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
          * @hidden
          */
         this.initialized = false;
+        this.hostClickSubscription = new Subscription;
         this._checked = false;
+        this._size = 'medium';
+        this._trackRounded = 'full';
+        this._thumbRounded = 'full';
         this.ngChange = (_) => { };
         this.ngTouched = () => { };
         /**
          * @hidden
          */
         this.handleFocus = () => {
+            if (this.isFocused) {
+                return;
+            }
             this.focused = true;
             if (hasObservers(this.onFocus)) {
                 this.ngZone.run(() => {
@@ -75,7 +83,11 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         /**
          * @hidden
          */
-        this.handleBlur = () => {
+        this.handleBlur = (event) => {
+            const relatedTarget = event && event.relatedTarget;
+            if (this.hostElement.nativeElement.contains(relatedTarget)) {
+                return;
+            }
             this.changeDetector.markForCheck();
             this.focused = false;
             if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
@@ -100,6 +112,56 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     get checked() {
         return this._checked;
     }
+    /**
+     * Specifies the size of the Switch.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Specifies the border radius of the Switch thumb.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    set thumbRounded(thumbRounded) {
+        this.handleThumbClasses(thumbRounded);
+        this._thumbRounded = thumbRounded;
+    }
+    get thumbRounded() {
+        return this._thumbRounded;
+    }
+    /**
+     * Specifies the border radius of the Switch track.
+     *
+     * The possible values are:
+     * * `'full'` (default)
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `null`
+     */
+    set trackRounded(trackRounded) {
+        this.handleTrackClasses(trackRounded);
+        this._trackRounded = trackRounded;
+    }
+    get trackRounded() {
+        return this._trackRounded;
+    }
     /**
      * @hidden
      */
@@ -150,10 +212,23 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         this.control = this.injector.get(NgControl, null);
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
     }
+    ngAfterViewInit() {
+        const wrapper = this.hostElement.nativeElement;
+        this.attachHostClickHandler();
+        if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+        this.handleClasses(this.size, 'size');
+        this.handleTrackClasses(this.trackRounded);
+        this.handleThumbClasses(this.thumbRounded);
+    }
     ngOnDestroy() {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.hostClickSubscription) {
+            this.hostClickSubscription.unsubscribe();
+        }
     }
     /**
      * Focuses the Switch.
@@ -171,19 +246,19 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
      * ```
      */
     focus() {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.focus();
+        this.track.nativeElement.focus();
     }
     /**
      * Blurs the Switch.
      */
     blur() {
-        if (!this.wrapper) {
+        if (!this.track) {
             return;
         }
-        this.wrapper.nativeElement.blur();
+        this.track.nativeElement.blur();
     }
     /**
      * @hidden
@@ -233,7 +308,7 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     }
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty() {
         return false;
@@ -250,24 +325,63 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
     }
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
-            const element = this.hostElement.nativeElement;
+            const wrapper = this.hostElement.nativeElement;
             if (value) {
-                this.renderer.addClass(element, FOCUSED);
+                this.renderer.addClass(wrapper, FOCUSED);
             }
             else {
-                this.renderer.removeClass(element, FOCUSED);
+                this.renderer.removeClass(wrapper, FOCUSED);
             }
             this.isFocused = value;
         }
     }
+    attachHostClickHandler() {
+        this.ngZone.runOutsideAngular(() => {
+            this.hostClickSubscription.add(this.renderer.listen(this.hostElement.nativeElement, 'click', this.clickHandler));
+        });
+    }
     setHostClasses(value) {
+        const wrapper = this.hostElement.nativeElement;
         if (value) {
-            this.renderer.removeClass(this.hostElement.nativeElement, 'k-switch-off');
-            this.renderer.addClass(this.hostElement.nativeElement, 'k-switch-on');
+            this.renderer.removeClass(wrapper, 'k-switch-off');
+            this.renderer.addClass(wrapper, 'k-switch-on');
         }
         else {
-            this.renderer.removeClass(this.hostElement.nativeElement, 'k-switch-on');
-            this.renderer.addClass(this.hostElement.nativeElement, 'k-switch-off');
+            this.renderer.removeClass(wrapper, 'k-switch-on');
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('switch', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleTrackClasses(value) {
+        const elem = this.hostElement.nativeElement;
+        const track = this.track.nativeElement;
+        const classes = getStylingClasses('switch', 'rounded', this.trackRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+            this.renderer.removeClass(track, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+            this.renderer.addClass(track, classes.toAdd);
+        }
+    }
+    handleThumbClasses(value) {
+        const thumb = this.thumb.nativeElement;
+        const classes = getStylingClasses('switch', 'rounded', this.thumbRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(thumb, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(thumb, classes.toAdd);
         }
     }
 };
@@ -300,6 +414,21 @@ tslib_1.__decorate([
     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),
@@ -317,10 +446,6 @@ tslib_1.__decorate([
     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)
@@ -345,10 +470,18 @@ tslib_1.__decorate([
     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',
@@ -375,18 +508,27 @@ SwitchComponent = SwitchComponent_1 = tslib_1.__decorate([
         >
 
         <span
-            #wrapper
-            class="k-switch-container"
+            #track
+            class="k-switch-track"
             [id]="focusableId"
             role="switch"
             [style.transitionDuration]="initialized ? '200ms' : '0ms'"
             [attr.aria-checked]="checked"
             [attr.tabindex]="(disabled ? undefined : tabIndex)"
-            [kendoEventsOutsideAngular]="{ click: clickHandler, keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
+            [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
         >
             <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
             <span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
-            <span class="k-switch-handle" [style.transitionDuration]="initialized ? '200ms' : '0ms'"></span>
+        </span>
+        <span
+            class="k-switch-thumb-wrap"
+            tabindex="-1"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
+                keydown: keyDownHandler,
+                focus: handleFocus,
+                blur: handleBlur
+            }">
+            <span #thumb class="k-switch-thumb"></span>
         </span>
   `
     }),

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

@@ -127,7 +127,7 @@ tslib_1.__decorate([
     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/es2015/textarea/textarea.component.d.ts

@@ -8,6 +8,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TextFieldsBase } from '../text-fields-common/text-fields-base';
 import { TextAreaFlow } from './models/flow';
 import { TextAreaResize } from './models/resize';
+import { InputRounded, InputFillMode, InputSize } from '../common/models';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -22,7 +23,7 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
      * @hidden
      */
     focusableId: string;
-    hostClass: boolean;
+    hostClasses: boolean;
     readonly flowCol: boolean;
     readonly flowRow: boolean;
     /**
@@ -66,6 +67,39 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
      *
      */
     resizable: TextAreaResize;
+    /**
+     * 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`
+     */
+    size: InputSize;
+    /**
+     * 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`
+     */
+    rounded: InputRounded;
+    /**
+     * 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`
+     */
+    fillMode: InputFillMode;
     /**
      * Fires each time the user focuses the TextArea component.
      *
@@ -116,6 +150,9 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
     valueChange: EventEmitter<any>;
     private initialHeight;
     private resizeSubscription;
+    private _size;
+    private _rounded;
+    private _fillMode;
     constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef);
     ngAfterViewInit(): void;
     ngOnInit(): void;
@@ -172,4 +209,5 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
     private handleBlur;
     private setSelection;
     private selectAll;
+    private handleClasses;
 }