@progress/kendo-angular-dateinputs 7.0.0-next.202204010857 → 7.0.0-next.202204081436

package/calendar/calendar.component.d.ts

@@ -496,6 +496,9 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     handleFocus(): void;
+    /**
+     * @hidden
+     */
     handleMultiViewCalendarKeydown(args: any): void;
     private setClasses;
     private verifyChanges;

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-end-input.directive.d.ts

@@ -7,7 +7,6 @@ import { DateInputComponent } from '../dateinput/dateinput.component';
 import { AutoCorrectOn } from './auto-correct-on.type';
 import { DateRangeInput } from './date-range-input';
 import { DateRangeService } from './date-range.service';
-import { DateRangePopupService } from './date-range-popup.service';
 import { SelectionRange } from '../calendar/models/selection-range.interface';
 import * as i0 from "@angular/core";
 /**
@@ -51,7 +50,7 @@ export declare class DateRangeEndInputDirective extends DateRangeInput implement
      * ```
      */
     navigateCalendarOnFocus: boolean;
-    constructor(rangeService: DateRangeService, dateInput: DateInputComponent, rangePopupService: DateRangePopupService, element: ElementRef, renderer: Renderer2, zone: NgZone);
+    constructor(rangeService: DateRangeService, dateInput: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected getRange(value: Date, correctOn: AutoCorrectOn): SelectionRange;

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

@@ -5,7 +5,6 @@
 import { ElementRef, Renderer2, NgZone } from '@angular/core';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import { DateRangeService } from './date-range.service';
-import { DateRangePopupService } from './date-range-popup.service';
 import { AutoCorrectOn } from './auto-correct-on.type';
 import { SelectionRange } from '../calendar/models/selection-range.interface';
 import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
@@ -15,7 +14,6 @@ import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
 export declare abstract class DateRangeInput {
     private activeRangeEnd;
     private dateRangeService;
-    private dateRangePopupService;
     private input;
     private element;
     private renderer;
@@ -25,7 +23,7 @@ export declare abstract class DateRangeInput {
     private popupSubscriptions;
     private subscriptions;
     private get popupCalendarActivated();
-    constructor(activeRangeEnd: SelectionRangeEnd, dateRangeService: DateRangeService, dateRangePopupService: DateRangePopupService, input: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
+    constructor(activeRangeEnd: SelectionRangeEnd, dateRangeService: DateRangeService, input: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
     protected init(): void;
     protected destroy(): void;
     protected abstract getRange(value: Date, correctOn?: AutoCorrectOn): SelectionRange;

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

@@ -6,7 +6,6 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef, NgZone, OnIni
 import { Align, Collision, Margin, PopupAnimation, PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { DateRangePopupTemplateDirective } from './date-range-popup-template.directive';
 import { DateRangeService } from './date-range.service';
-import { DateRangePopupService } from './date-range-popup.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
 import * as i0 from "@angular/core";
@@ -32,7 +31,6 @@ import * as i0 from "@angular/core";
 export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private popupService;
     private dateRangeService;
-    private dateRangePopupService;
     private ref;
     private zone;
     private rtl;
@@ -141,7 +139,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private resolvedPromise;
     private _calendar;
     private _show;
-    constructor(popupService: PopupService, dateRangeService: DateRangeService, dateRangePopupService: DateRangePopupService, ref: ChangeDetectorRef, zone: NgZone, rtl: boolean);
+    constructor(popupService: PopupService, dateRangeService: DateRangeService, ref: ChangeDetectorRef, zone: NgZone, rtl: boolean);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -181,6 +179,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private get _appendTo();
     private _toggle;
     private destroyPopup;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never>;
 }

package/daterange/date-range-start-input.directive.d.ts

@@ -7,7 +7,6 @@ import { DateInputComponent } from '../dateinput/dateinput.component';
 import { AutoCorrectOn } from './auto-correct-on.type';
 import { DateRangeInput } from './date-range-input';
 import { DateRangeService } from './date-range.service';
-import { DateRangePopupService } from './date-range-popup.service';
 import { SelectionRange } from '../calendar/models/selection-range.interface';
 import * as i0 from "@angular/core";
 /**
@@ -52,7 +51,7 @@ export declare class DateRangeStartInputDirective extends DateRangeInput impleme
      * ```
      */
     navigateCalendarOnFocus: boolean;
-    constructor(rangeService: DateRangeService, dateInput: DateInputComponent, rangePopupService: DateRangePopupService, element: ElementRef, renderer: Renderer2, zone: NgZone);
+    constructor(rangeService: DateRangeService, dateInput: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected getRange(value: Date, correctOn: AutoCorrectOn): SelectionRange;

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { BehaviorSubject } from 'rxjs';
 import { DateInputComponent } from '../dateinput/dateinput.component';
+import type { DateRangePopupComponent } from './date-range-popup.component';
 import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
 import { SelectionRange } from '../calendar/models/selection-range.interface';
 import * as i0 from "@angular/core";
@@ -30,6 +31,10 @@ export declare class DateRangeService {
      * For example, when a new start `DateInput` is attached or the old one is detached.
      */
     startInput$: BehaviorSubject<DateInputComponent>;
+    /**
+     * An Observable instance that notifies when the `DateRangePopup` component is changed.
+     */
+    dateRangePopup$: BehaviorSubject<DateRangePopupComponent>;
     /**
      * An Observable instance that notifies when the state of the selection range is changed.
      */
@@ -56,11 +61,35 @@ export declare class DateRangeService {
      * Gets the current `selectionRange` value.
      */
     get selectionRange(): SelectionRange;
+    /**
+     * Activates the registered `DateRangePopup` component.
+     * The method opens the popup and focuses the calendar.
+     */
+    activatePopup(): void;
+    /**
+     * Deactivates the registered `DateRangePopup` component.
+     * The method closes the popup.
+     */
+    deactivatePopup(): void;
+    /**
+     * @hidden
+     *
+     * Deactivates the registered `DateRangePopup` component and fires the `cancel` event.
+     * The method closes the popup.
+     */
+    cancelPopup(): void;
     /**
      * Completes all observables to mitigate possible memory leaks.
      * Calls the method when a component that uses it is destroyed.
      */
     destroy(): void;
+    /**
+     * Returns `true` when an active component that is placed inside the `DateRangeComponent` is detected.
+     * For example, the opened popup or the focused DateInput.
+     *
+     * @returns `true` if an active component is present.
+     */
+    hasActiveComponent(): boolean;
     /**
      * Registers a new start `DateInput` component. Notifies all `startInput$` listeners.
      */
@@ -69,6 +98,10 @@ export declare class DateRangeService {
      * Registers a new end `DateInput` component. Notifies all `endInput$` listeners.
      */
     registerEndInput(endInput: DateInputComponent): void;
+    /**
+     * Registers a new `DateRangePopup` component. Notifies all `dateRangePopup$` listeners.
+     */
+    registerPopup(dateRangePopup: DateRangePopupComponent): void;
     /**
      * Updates the `activeRangeEnd` value. Notifies all `activeRangeEnd$` listeners.
      */

package/esm2015/calendar/calendar.component.js

@@ -753,6 +753,9 @@ export class CalendarComponent {
         }
         this.emitFocus();
     }
+    /**
+     * @hidden
+     */
     handleMultiViewCalendarKeydown(args) {
         // Prevent form from submitting on enter if used in datepicker (classic view)
         if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {

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) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
             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));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/daterange/date-range-end-input.directive.js

@@ -11,15 +11,14 @@ import { isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
-import * as i3 from "./date-range-popup.service";
 /**
  * A directive which manages the end range selection.
  *
  * > You can use the DateRangeEndInputDirective only with a DateInput component.
  */
 export class DateRangeEndInputDirective extends DateRangeInput {
-    constructor(rangeService, dateInput, rangePopupService, element, renderer, zone) {
-        super('end', rangeService, rangePopupService, dateInput, element, renderer, zone);
+    constructor(rangeService, dateInput, element, renderer, zone) {
+        super('end', rangeService, dateInput, element, renderer, zone);
         this.rangeService = rangeService;
         this.dateInput = dateInput;
         /**
@@ -74,14 +73,14 @@ export class DateRangeEndInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i3.DateRangePopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeEndInput]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i3.DateRangePopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
+        }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
                 type: Input
             }], navigateCalendarOnFocus: [{
                 type: Input