@progress/kendo-angular-dateinputs 5.3.1-dev.202112201533 → 6.0.0

package/dist/es2015/datepicker/datepicker.component.js

@@ -28,7 +28,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 } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
@@ -43,12 +43,12 @@ const TWO_DIGIT_YEAR_MAX = 68;
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
 let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
-    constructor(zone, localization, cdr, popupService, element, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
         this.popupService = popupService;
-        this.element = element;
+        this.wrapper = wrapper;
         this.renderer = renderer;
         this.injector = injector;
         this.pickerService = pickerService;
@@ -274,6 +274,9 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         this.incompleteValidator = noop;
         this.resolvedPromise = Promise.resolve(null);
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -375,6 +378,73 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
     get disabledDates() {
         return this._disabledDates;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    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));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    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));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -397,10 +467,10 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         }
         const element = this.wrapper.nativeElement;
         if (value) {
-            this.renderer.addClass(element, 'k-state-focused');
+            this.renderer.addClass(element, 'k-focus');
         }
         else {
-            this.renderer.removeClass(element, 'k-state-focused');
+            this.renderer.removeClass(element, 'k-focus');
         }
     }
     get show() {
@@ -435,13 +505,16 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
             .changes
             .subscribe(() => this.cdr.markForCheck());
         this.control = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(() => {
                 this.bindEvents();
             });
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     /**
      * @hidden
      */
@@ -643,6 +716,9 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
                 this.show = false;
             }
         }
+        if (keyCode === Keys.Enter && target.classList.contains('k-calendar')) {
+            e.preventDefault(); // Don't submit form on date selection in popup
+        }
         if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
@@ -730,7 +806,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         }
     }
     bindEvents() {
-        const element = this.element.nativeElement;
+        const element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (isWindowAvailable()) {
             this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -786,6 +862,20 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         this.cdr.markForCheck();
         this.zone.run(() => this.onValidatorChange());
     }
+    setComponentClasses() {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
+        }
+    }
 };
 tslib_1.__decorate([
     ViewChild('container', { read: ViewContainerRef, static: true }),
@@ -796,9 +886,9 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", TemplateRef)
 ], DatePickerComponent.prototype, "popupTemplate", void 0);
 tslib_1.__decorate([
-    ViewChild('wrapper', { static: false }),
+    ViewChild('toggleButton', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
-], DatePickerComponent.prototype, "wrapper", void 0);
+], DatePickerComponent.prototype, "toggleButton", void 0);
 tslib_1.__decorate([
     ContentChild(CellTemplateDirective, { static: false }),
     tslib_1.__metadata("design:type", CellTemplateDirective)
@@ -983,6 +1073,21 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], DatePickerComponent.prototype, "weekNumber", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DatePickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DatePickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DatePickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1004,12 +1109,12 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", EventEmitter)
 ], DatePickerComponent.prototype, "close", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-datepicker'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
 ], DatePickerComponent.prototype, "wrapperClasses", 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", [])
 ], DatePickerComponent.prototype, "disabledClass", null);
@@ -1045,44 +1150,45 @@ DatePickerComponent = DatePickerComponent_1 = tslib_1.__decorate([
             nextButtonTitle="Navigate to next view"
         >
         </ng-container>
-        <span #wrapper
-            class="k-picker-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-dateinput
+            #input
+            [role]="inputRole"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="show"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [ariaReadOnly]="readonly"
+            [tabindex]="tabindex"
+            [title]="title"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [fillMode]="null"
+            [rounded]="null"
+            [size]="null"
+            [value]="value"
+            (valueChange)="handleInputChange($event)"
+        ></kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [tabindex]="-1"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                click: handleIconClick,
+                mousedown: handleMousedown
+            }"
+            [scope]="this"
         >
-            <kendo-dateinput
-                #input
-                [role]="inputRole"
-                [focusableId]="focusableId"
-                [hasPopup]="true"
-                [isPopupOpen]="show"
-                [disabled]="disabled"
-                [readonly]="readonly || readOnlyInput"
-                [ariaReadOnly]="readonly"
-                [tabindex]="tabindex"
-                [title]="title"
-                [format]="format"
-                [twoDigitYearMax]="twoDigitYearMax"
-                [formatPlaceholder]="formatPlaceholder"
-                [placeholder]="placeholder"
-                [min]="min"
-                [max]="max"
-                [incompleteDateValidation]="incompleteDateValidation"
-                [value]="value"
-                (valueChange)="handleInputChange($event)"
-            ></kendo-dateinput>
-            <span class="k-select"
-                role="button"
-                [attr.title]="localization.get('toggle')"
-                [attr.aria-label]="localization.get('toggle')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleIconClick,
-                    mousedown: handleMousedown
-                }"
-                [scope]="this"
-            >
-                <span class="k-icon k-i-calendar"></span>
-            </span>
-        </span>
+            <span class="k-button-icon k-icon k-i-calendar"></span>
+        </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
             <kendo-calendar

package/dist/es2015/daterange/date-range-input.js

@@ -111,7 +111,7 @@ export class DateRangeInput {
         const action = show ? 'addClass' : 'removeClass';
         const nativeElement = this.element.nativeElement;
         if (nativeElement && nativeElement.querySelector) {
-            this.renderer[action](nativeElement.querySelector('.k-dateinput-wrap'), 'k-state-focused');
+            this.renderer[action](nativeElement, 'k-focus');
         }
     }
 }

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

@@ -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 { ElementRef, OnDestroy, ChangeDetectorRef, EventEmitter, NgZone, OnInit, SimpleChanges, OnChanges, Renderer2 } from '@angular/core';
+import { ElementRef, OnDestroy, ChangeDetectorRef, EventEmitter, NgZone, OnInit, SimpleChanges, OnChanges, Renderer2, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { Day } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -27,16 +27,19 @@ import { CenturyCellTemplateDirective } from '../calendar/templates/century-cell
 import { WeekNumberCellTemplateDirective } from '../calendar/templates/weeknumber-cell-template.directive';
 import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title-template.directive';
 import { FormatSettings } from '../dateinput/models/format-settings.model';
+import { DateInputSize } from '../common/models/size';
+import { DateInputRounded } from '../common/models/rounded';
+import { DateInputFillMode } from '../common/models/fillmode';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor, Validator {
+export declare class DateTimePickerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
     private popupService;
     private intl;
     private cdr;
     private pickerService;
     private ngZone;
-    private host;
+    wrapper: ElementRef<HTMLElement>;
     private touchEnabled;
     localization: LocalizationService;
     private disabledDatesService;
@@ -48,7 +51,11 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
     /**
      * @hidden
      */
-    wrapper: ElementRef<HTMLSpanElement>;
+    readonly disabledClass: boolean;
+    /**
+     * @hidden
+     */
+    toggleButton: ElementRef<HTMLSpanElement>;
     /**
      * @hidden
      */
@@ -250,6 +257,40 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
      * ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
      */
     defaultTab: DateTimePickerActiveTab;
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    size: DateInputSize;
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    rounded: DateInputRounded;
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    fillMode: DateInputFillMode;
     /**
      * @hidden
      */
@@ -355,8 +396,12 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
     private disabledDatesValidateFn;
     private incompleteValidator;
     private subscriptions;
-    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, host: ElementRef<HTMLElement>, touchEnabled: boolean, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /**
@@ -454,6 +499,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
      * @hidden
      */
     handleBackTabOut(event: KeyboardEvent): void;
+    /**
+     * @hidden
+     */
+    popupButtonsClasses(type?: string): any;
     /**
      * @hidden
      *
@@ -487,7 +536,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
     private handleValueChange;
     /**
      * Indicates whether the focus target is part of this component,
-     * that is, whether the focus target is inside the component wrapper or in the popup.
+     * that is, whether the focus target is inside the component or in the popup.
      */
     private focusTargetInComponent;
     private setTimeSelectorMinMax;
@@ -502,4 +551,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, OnDes
      */
     private run;
     private handleDateCompletenessChange;
+    private setComponentClasses;
 }