@progress/kendo-angular-dateinputs 7.0.0-next.202204011538 → 7.0.0-next.202204111442

package/common/models/fillmode.d.ts

@@ -6,9 +6,9 @@
  * Represents the possible fillMode options of the DateInput.
  *
  * The possible values are:
- * - `'solid'` (Default)
- * - `'flat'`
- * - `'outline'`
- * - `null`
+ * - `solid` (Default)
+ * - `flat`
+ * - `outline`
+ * - `none`
  */
-export declare type DateInputFillMode = 'solid' | 'flat' | 'outline';
+export declare type DateInputFillMode = 'solid' | 'flat' | 'outline' | 'none';

package/common/models/rounded.d.ts

@@ -6,10 +6,10 @@
  * Represents the possible rounded options of the DateInput.
  *
  * The possible values are:
- * - `'small'`
- * - `'medium'` (Default)
- * - `'large'`
- * - `'full'`
- * - `null`
+ * - `small`
+ * - `medium` (Default)
+ * - `large`
+ * - `full`
+ * - `none`
  */
-export declare type DateInputRounded = 'small' | 'medium' | 'large' | 'full';
+export declare type DateInputRounded = 'small' | 'medium' | 'large' | 'full' | 'none';

package/common/models/size.d.ts

@@ -6,9 +6,9 @@
  * Represents the possible size options of the DateInput.
  *
  * The possible values are:
- * - `'small'`
- * - `'medium'` (Default)
- * - `'large'`
- * - `null`
+ * - `small`
+ * - `medium` (Default)
+ * - `large`
+ * - `none`
  */
-export declare type DateInputSize = 'small' | 'medium' | 'large';
+export declare type DateInputSize = 'small' | 'medium' | 'large' | 'none';

package/dateinput/dateinput.component.d.ts

@@ -214,10 +214,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size: DateInputSize);
@@ -226,11 +226,11 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded: DateInputRounded);
@@ -239,10 +239,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode: DateInputFillMode);

package/datepicker/datepicker.component.d.ts

@@ -326,10 +326,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size: DateInputSize);
@@ -338,11 +338,11 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded: DateInputRounded);
@@ -351,10 +351,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode: DateInputFillMode);

package/daterange/date-range.component.d.ts

@@ -24,6 +24,7 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DateRangeComponent implements AfterContentInit, OnDestroy {
+    wrapperClass: boolean;
     /**
      * @hidden
      */

package/datetimepicker/datetimepicker.component.d.ts

@@ -271,10 +271,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size: DateInputSize);
@@ -283,11 +283,11 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded: DateInputRounded);
@@ -296,10 +296,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode: DateInputFillMode);

package/esm2015/dateinput/dateinput.component.js

@@ -13,7 +13,7 @@ import { packageMetadata } from '../package-metadata';
 import { addMonths, cloneDate, createDate, getDate, isEqual, lastDayOfMonth } from '@progress/kendo-date-math';
 import { isDocumentAvailable, hasObservers, KendoInput, Keys, guid } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
-import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
+import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
@@ -656,9 +656,9 @@ export class DateInputComponent {
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
@@ -694,18 +694,19 @@ export class DateInputComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -714,19 +715,20 @@ export class DateInputComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -735,22 +737,23 @@ export class DateInputComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
             if (this.spinners && this.spinup && this.spindown) {
-                this.setSpinnerFill(this.spinup.nativeElement, fillMode, this.fillMode);
-                this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
+                this.setSpinnerFill(this.spinup.nativeElement, newFillMode, this.fillMode);
+                this.setSpinnerFill(this.spindown.nativeElement, newFillMode, this.fillMode);
             }
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -1359,7 +1362,7 @@ export class DateInputComponent {
         }
     }
     setSpinnerFill(spinner, fill, oldFill) {
-        if (oldFill) {
+        if (oldFill !== 'none') {
             this.renderer.removeClass(spinner, `k-button-${oldFill}`);
             this.renderer.removeClass(spinner, `k-button-${oldFill}-base`);
         }
@@ -1367,16 +1370,16 @@ export class DateInputComponent {
         this.renderer.addClass(spinner, `k-button-${fill}-base`);
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
-        if (this.spinners) {
+        if (this.spinners && this.fillMode !== 'none') {
             this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
             this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
         }

package/esm2015/datepicker/datepicker.component.js

@@ -24,7 +24,7 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
@@ -280,9 +280,9 @@ export class DatePickerComponent {
         this.incompleteValidator = noop;
         this.resolvedPromise = Promise.resolve(null);
         this.domEvents = [];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -388,20 +388,21 @@ export class DatePickerComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -410,19 +411,20 @@ export class DatePickerComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -431,22 +433,23 @@ export class DatePickerComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        if (fillMode) {
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -925,9 +928,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
-            [fillMode]="null"
-            [rounded]="null"
-            [size]="null"
+            fillMode="none"
+            rounded="none"
+            size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
         ></kendo-dateinput>
@@ -1036,9 +1039,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
-            [fillMode]="null"
-            [rounded]="null"
-            [size]="null"
+            fillMode="none"
+            rounded="none"
+            size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
         ></kendo-dateinput>

package/esm2015/daterange/date-range.component.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChildren } from '@angular/core';
+import { Component, ContentChildren, HostBinding } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DateRangePopupComponent } from './date-range-popup.component';
@@ -31,6 +31,7 @@ import * as i2 from "@angular/common";
  */
 export class DateRangeComponent {
     constructor() {
+        this.wrapperClass = true;
         /**
          * @hidden
          */
@@ -53,7 +54,7 @@ export class DateRangeComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `, isInline: true, components: [{ type: i1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -67,7 +68,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { contentPopup: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-daterangepicker']
+            }], contentPopup: [{
                 type: ContentChildren,
                 args: [DateRangePopupComponent]
             }] } });

package/esm2015/datetimepicker/datetimepicker.component.js

@@ -14,7 +14,7 @@ import { packageMetadata } from '../package-metadata';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { isPresent } from '../common/utils';
-import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass } from '../util';
+import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
@@ -228,9 +228,9 @@ export class DateTimePickerComponent {
         this.disabledDatesValidateFn = noop;
         this.incompleteValidator = noop;
         this.subscriptions = new Subscription();
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
     }
     /**
@@ -396,20 +396,21 @@ export class DateTimePickerComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -418,19 +419,20 @@ export class DateTimePickerComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -439,22 +441,23 @@ export class DateTimePickerComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648827368,
+    publishDate: 1649687993,
     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'
 };