@progress/kendo-angular-dateinputs 7.0.0-next.202204060919 → 7.0.0-next.202204120806

package/esm2015/timepicker/timepicker.component.js

@@ -14,7 +14,7 @@ import { PickerService } from '../common/picker.service';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { TIME_PART } from './models/time-part.default';
 import { PreventableEvent } from '../preventable-event';
-import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass } from '../util';
+import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { timeRangeValidator } from '../validators/time-range.validator';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { fromEvent } from 'rxjs';
@@ -203,9 +203,9 @@ export class TimePickerComponent {
         this._value = null;
         this._active = false;
         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)));
@@ -295,20 +295,21 @@ export class TimePickerComponent {
      * 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;
@@ -317,19 +318,20 @@ export class TimePickerComponent {
      * 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;
@@ -338,22 +340,23 @@ export class TimePickerComponent {
      * 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/util.js

@@ -382,3 +382,15 @@ export const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
+/**
+ * @hidden
+ */
+export const DEFAULT_ROUNDED = 'medium';
+/**
+ * @hidden
+ */
+export const DEFAULT_SIZE = 'medium';
+/**
+ * @hidden
+ */
+export const DEFAULT_FILL_MODE = 'solid';

package/fesm2015/kendo-angular-dateinputs.js

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649236592,
+    publishDate: 1649750526,
     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'
 };
@@ -497,6 +497,18 @@ const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
+/**
+ * @hidden
+ */
+const DEFAULT_ROUNDED = 'medium';
+/**
+ * @hidden
+ */
+const DEFAULT_SIZE = 'medium';
+/**
+ * @hidden
+ */
+const DEFAULT_FILL_MODE = 'solid';
 
 const EMPTY_DATA$3 = [[]];
 const CELLS_LENGTH$3 = 4;
@@ -7140,9 +7152,9 @@ class DateInputComponent {
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
         this.onValidatorChange = noop$2;
-        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) {
@@ -7178,18 +7190,19 @@ 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;
@@ -7198,19 +7211,20 @@ 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;
@@ -7219,22 +7233,23 @@ 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;
@@ -7843,7 +7858,7 @@ 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`);
         }
@@ -7851,16 +7866,16 @@ 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);
         }
@@ -8465,9 +8480,9 @@ class DatePickerComponent {
         this.incompleteValidator = noop$2;
         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)));
@@ -8573,20 +8588,21 @@ 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;
@@ -8595,19 +8611,20 @@ 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;
@@ -8616,22 +8633,23 @@ 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;
@@ -9110,9 +9128,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>
@@ -9221,9 +9239,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>
@@ -11343,9 +11361,9 @@ class TimePickerComponent {
         this._value = null;
         this._active = false;
         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)));
@@ -11435,20 +11453,21 @@ class TimePickerComponent {
      * 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;
@@ -11457,19 +11476,20 @@ class TimePickerComponent {
      * 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;
@@ -11478,22 +11498,23 @@ class TimePickerComponent {
      * 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;
@@ -12488,9 +12509,9 @@ class DateTimePickerComponent {
         this.disabledDatesValidateFn = noop$2;
         this.incompleteValidator = noop$2;
         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);
     }
     /**
@@ -12656,20 +12677,21 @@ 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;
@@ -12678,19 +12700,20 @@ 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;
@@ -12699,22 +12722,23 @@ 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;
@@ -14621,6 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DateRangeComponent {
     constructor() {
+        this.wrapperClass = true;
         /**
          * @hidden
          */
@@ -14643,7 +14668,7 @@ 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: 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -14657,7 +14682,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]
             }] } });