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

package/dist/es2015/dateinput/dateinput.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 { ChangeDetectorRef, EventEmitter, ElementRef, OnInit, OnDestroy, OnChanges, Renderer2, NgZone, Injector, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, ElementRef, OnInit, OnDestroy, OnChanges, Renderer2, NgZone, Injector, SimpleChanges, AfterViewInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -11,14 +11,17 @@ import { DateInputFormatPlaceholder } from './models/format-placeholder.model';
 import { DateInputIncrementalSteps } from './models/incremental-steps.model';
 import { PickerService } from '../common/picker.service';
 import { FormatSettings } from './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 DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
-export declare class DateInputComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {
+export declare class DateInputComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {
     private cdr;
     private intl;
     private renderer;
-    private element;
+    wrapper: ElementRef;
     private ngZone;
     private injector;
     localization: LocalizationService;
@@ -204,6 +207,40 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
      * @hidden
      */
     hasPopup: boolean;
+    /**
+     * 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;
     /**
      * Fires each time the user selects a new value.
      * For more information, refer to the section on
@@ -269,10 +306,6 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
      * @hidden
      */
     dateInput: ElementRef;
-    /**
-     * @hidden
-     */
-    wrap: ElementRef;
     readonly wrapperClass: boolean;
     readonly disabledClass: boolean;
     readonly inputElement: any;
@@ -291,6 +324,8 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
     isDateIncomplete: boolean;
     protected currentValue: string;
     protected currentFormat: string;
+    private spinup;
+    private spindown;
     private backspace;
     private resetSegmentValue;
     private symbolsMap;
@@ -309,7 +344,10 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
     private onControlChange;
     private onControlTouched;
     private onValidatorChange;
-    constructor(cdr: ChangeDetectorRef, intl: IntlService, renderer: Renderer2, element: ElementRef, ngZone: NgZone, injector: Injector, localization: LocalizationService, pickerService?: PickerService);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(cdr: ChangeDetectorRef, intl: IntlService, renderer: Renderer2, wrapper: ElementRef, ngZone: NgZone, injector: Injector, localization: LocalizationService, pickerService?: PickerService);
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -338,6 +376,7 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
      * @hidden
      */
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -437,4 +476,6 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
     private emitFocus;
     private emitBlur;
     private updateIncompleteValidationStatus;
+    private setSpinnerFill;
+    private setComponentClasses;
 }

package/dist/es2015/dateinput/dateinput.component.js

@@ -17,7 +17,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 } from '../util';
+import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
 import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent } from '../common/utils';
@@ -450,11 +450,11 @@ class KendoDate {
  * Represents the [Kendo UI DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
 let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
-    constructor(cdr, intl, renderer, element, ngZone, injector, localization, pickerService) {
+    constructor(cdr, intl, renderer, wrapper, ngZone, injector, localization, pickerService) {
         this.cdr = cdr;
         this.intl = intl;
         this.renderer = renderer;
-        this.element = element;
+        this.wrapper = wrapper;
         this.ngZone = ngZone;
         this.injector = injector;
         this.localization = localization;
@@ -656,6 +656,9 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
@@ -687,6 +690,71 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
     get value() {
         return this._value;
     }
+    /**
+     * 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));
+        if (size) {
+            this.renderer.addClass(this.wrapper.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));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            if (this.spinners && this.spinup && this.spindown) {
+                this.setSpinnerFill(this.spinup.nativeElement, fillMode, this.fillMode);
+                this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
+            }
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     get wrapperClass() {
         return true;
     }
@@ -704,16 +772,16 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
     }
     set isActive(value) {
         this._active = value;
-        if (!this.wrap) {
+        if (!this.wrapper) {
             return;
         }
         if (!isPresent(this.pickerService)) {
-            const element = this.wrap.nativeElement;
+            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');
             }
         }
     }
@@ -750,7 +818,7 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
      * @hidden
      */
     containsElement(element) {
-        return Boolean(closest(element, node => node === this.element.nativeElement));
+        return Boolean(closest(element, node => node === this.wrapper.nativeElement));
     }
     /**
      * @hidden
@@ -802,13 +870,16 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         this.updateElementValue();
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.ngControl = 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.ngZone.runOutsideAngular(() => {
                 this.bindEvents();
             });
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     /**
      * @hidden
      */
@@ -1157,7 +1228,7 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         }
     }
     bindEvents() {
-        const element = this.element.nativeElement;
+        const element = this.wrapper.nativeElement;
         const mousewheelHandler = this.handleMouseWheel.bind(this);
         this.domEvents.push(this.renderer.listen(element, 'DOMMouseScroll', mousewheelHandler), this.renderer.listen(element, 'mousewheel', mousewheelHandler), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'paste', this.handlePaste.bind(this)), this.renderer.listen(element, 'input', this.handleInput.bind(this)));
     }
@@ -1288,6 +1359,29 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
             this.pickerService.dateCompletenessChange.emit();
         }
     }
+    setSpinnerFill(spinner, fill, oldFill) {
+        if (oldFill) {
+            this.renderer.removeClass(spinner, `k-button-${oldFill}`);
+            this.renderer.removeClass(spinner, `k-button-${oldFill}-base`);
+        }
+        this.renderer.addClass(spinner, `k-button-${fill}`);
+        this.renderer.addClass(spinner, `k-button-${fill}-base`);
+    }
+    setComponentClasses() {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', 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));
+        }
+        if (this.spinners) {
+            this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
+            this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -1379,6 +1473,21 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], DateInputComponent.prototype, "hasPopup", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateInputComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateInputComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateInputComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1400,20 +1509,24 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ElementRef)
 ], DateInputComponent.prototype, "dateInput", void 0);
 tslib_1.__decorate([
-    ViewChild('wrap', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DateInputComponent.prototype, "wrap", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-widget'),
+    HostBinding('class.k-input'),
     HostBinding('class.k-dateinput'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], DateInputComponent.prototype, "wrapperClass", null);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], DateInputComponent.prototype, "disabledClass", null);
+tslib_1.__decorate([
+    ViewChild('spinup', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], DateInputComponent.prototype, "spinup", void 0);
+tslib_1.__decorate([
+    ViewChild('spindown', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], DateInputComponent.prototype, "spindown", void 0);
 DateInputComponent = DateInputComponent_1 = tslib_1.__decorate([
     Component({
         changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1435,57 +1548,59 @@ DateInputComponent = DateInputComponent_1 = tslib_1.__decorate([
         decrement="Decrease value"
     >
     </ng-container>
-    <span class="k-dateinput-wrap" #wrap>
-        <input
-            #dateInput
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input"
-            [attr.role]="role"
-            [attr.aria-readonly]="ariaReadOnly"
-            [id]="focusableId"
-            [title]="title"
-            [tabindex]="tabindex"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [placeholder]="placeholder"
-            [attr.aria-expanded]="isPopupOpen"
-            [attr.aria-haspopup]="hasPopup"
-            [kendoEventsOutsideAngular]="{
-                click: handleClick,
-                focus: handleFocus,
-                mousedown: handleMousedown,
-                touchstart: handleMousedown,
-                dragstart: handleDragAndDrop,
-                drop: handleDragAndDrop,
-                blur: handleBlur
-            }"
-            [scope]="this"
-            />
-        <span *ngIf="spinners" class="k-select" (mousedown)="$event.preventDefault()">
-            <span
-                class="k-link k-link-increase"
-                [class.k-state-active]="arrowDirection === arrow.Up"
-                (mousedown)="arrowDirection = arrow.Up"
-                (mouseleave)="arrowDirection = arrow.None"
-                (click)="handleButtonClick(1)"
-                [title]="localization.get('increment')"
-                [attr.aria-label]="localization.get('increment')">
-                <span class="k-icon k-i-arrow-n"></span>
-            </span>
-            <span
-                class="k-link k-link-decrease"
-                (click)="handleButtonClick(-1)"
-                [class.k-state-active]="arrowDirection === arrow.Down"
-                (mousedown)="arrowDirection = arrow.Down"
-                (mouseleave)="arrowDirection = arrow.None"
-                [title]="localization.get('decrement')"
-                [attr.aria-label]="localization.get('decrement')">
-                <span class="k-icon k-i-arrow-s"></span>
-            </span>
-        </span>
+    <input
+        #dateInput
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        class="k-input-inner"
+        [attr.role]="role"
+        [attr.aria-readonly]="ariaReadOnly"
+        [id]="focusableId"
+        [title]="title"
+        [tabindex]="tabindex"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [placeholder]="placeholder"
+        [attr.aria-expanded]="isPopupOpen"
+        [attr.aria-haspopup]="hasPopup"
+        [kendoEventsOutsideAngular]="{
+            click: handleClick,
+            focus: handleFocus,
+            mousedown: handleMousedown,
+            touchstart: handleMousedown,
+            dragstart: handleDragAndDrop,
+            drop: handleDragAndDrop,
+            blur: handleBlur
+        }"
+        [scope]="this"
+        />
+    <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
+        <button
+            #spinup
+            tabindex="-1"
+            class="k-spinner-increase k-button k-icon-button"
+            [class.k-active]="arrowDirection === arrow.Up"
+            (mousedown)="arrowDirection = arrow.Up"
+            (mouseleave)="arrowDirection = arrow.None"
+            (click)="handleButtonClick(1)"
+            [title]="localization.get('increment')"
+            [attr.aria-label]="localization.get('increment')">
+            <span class="k-button-icon k-icon k-i-arrow-n"></span>
+        </button>
+        <button
+            #spindown
+            tabindex="-1"
+            class="k-spinner-decrease k-button k-icon-button"
+            (click)="handleButtonClick(-1)"
+            [class.k-active]="arrowDirection === arrow.Down"
+            (mousedown)="arrowDirection = arrow.Down"
+            (mouseleave)="arrowDirection = arrow.None"
+            [title]="localization.get('decrement')"
+            [attr.aria-label]="localization.get('decrement')">
+            <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
     </span>
   `
     }),

package/dist/es2015/datepicker/datepicker.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 { ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, Renderer2, ViewContainerRef, NgZone, OnInit, OnChanges, OnDestroy, Injector } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, Renderer2, ViewContainerRef, NgZone, OnInit, OnChanges, OnDestroy, Injector, AfterViewInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
@@ -24,15 +24,18 @@ import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model';
 import { DateInputComponent } from '../dateinput/dateinput.component';
+import { DateInputSize } from '../common/models/size';
+import { DateInputRounded } from '../common/models/rounded';
+import { DateInputFillMode } from '../common/models/fillmode';
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-export declare class DatePickerComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy, Validator {
+export declare class DatePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
     zone: NgZone;
     localization: LocalizationService;
     private cdr;
     private popupService;
-    private element;
+    wrapper: ElementRef;
     private renderer;
     private injector;
     private pickerService;
@@ -40,7 +43,7 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private touchEnabled;
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
-    wrapper: ElementRef;
+    toggleButton: ElementRef;
     /**
      * @hidden
      */
@@ -314,6 +317,40 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * ([see example]({% slug calendar_type_datepicker %}#toc-week-number-column)).
      */
     weekNumber: boolean;
+    /**
+     * 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;
     /**
      * Fires each time the user selects a new value
      * ([more information and example]({% slug overview_datepicker %}#toc-events)).
@@ -410,7 +447,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private windowBlurSubscription;
     private control;
     private domEvents;
-    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, element: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, disabledDatesService: DisabledDatesService, touchEnabled: boolean);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, disabledDatesService: DisabledDatesService, touchEnabled: boolean);
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -420,6 +460,7 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -532,4 +573,5 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private blurComponent;
     private handleSameSelection;
     private handleDateCompletenessChange;
+    private setComponentClasses;
 }