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

package/dist/es/timepicker/timeselector.component.js

@@ -414,7 +414,7 @@ var TimeSelectorComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], TimeSelectorComponent.prototype, "componentClass", 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", [])
     ], TimeSelectorComponent.prototype, "disabledClass", null);
@@ -475,7 +475,7 @@ var TimeSelectorComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-timeselector',
-            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                class=\"k-button k-flat k-time-now\" type=\"button\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel\" type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-time-accept k-button k-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
+            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
         }),
         tslib_1.__param(7, Optional()),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,

package/dist/es/util.js

@@ -355,4 +355,41 @@ export var isTabExitingCalendar = function (calendarType, focusedElement, shiftK
         (!shiftKey && focusedElement.classList.contains('k-next-view')) // exited on next button focused and regular tab
     );
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+export var getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+export var getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 export { ɵ0, ɵ1, ɵ2 };

package/dist/es2015/calendar/calendar.component.js

@@ -999,7 +999,7 @@ tslib_1.__decorate([
 ], CalendarComponent.prototype, "calendarTabIndex", null);
 tslib_1.__decorate([
     HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], CalendarComponent.prototype, "ariaDisabled", null);

package/dist/es2015/calendar/header.component.js

@@ -159,7 +159,7 @@ HeaderComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-calendar-header',
         template: `
-    <span class="k-button k-flat k-title k-calendar-title" [class.k-state-disabled]="!navigate"
+    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
@@ -175,7 +175,7 @@ HeaderComponent = tslib_1.__decorate([
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-flat k-icon-button k-prev-view"
+            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-prev-view"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -186,7 +186,7 @@ HeaderComponent = tslib_1.__decorate([
         </button>
         <span
             class="k-today k-nav-today"
-            [class.k-state-disabled]="!todayAvailable"
+            [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
@@ -196,7 +196,7 @@ HeaderComponent = tslib_1.__decorate([
         </span>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-flat k-icon-button k-next-view"
+            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-next-view"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"

package/dist/es2015/calendar/multiview-calendar.component.js

@@ -904,7 +904,7 @@ tslib_1.__decorate([
 ], MultiViewCalendarComponent.prototype, "calendarTabIndex", null);
 tslib_1.__decorate([
     HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], MultiViewCalendarComponent.prototype, "ariaDisabled", null);

package/dist/es2015/calendar/services/dom.service.js

@@ -18,7 +18,7 @@ const tbody = containerFactory('tbody');
 const thead = containerFactory('thead');
 const table = containerFactory('table');
 const monthHeader = () => (div(`
-            <span class="k-button k-flat k-title k-calendar-title">March 2017</span>
+            <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
             <span class="k-calendar-nav k-hstack">
                 <span class="k-today k-nav-today">TODAY</span>

package/dist/es2015/calendar/view.component.js

@@ -117,7 +117,7 @@ let ViewComponent = class ViewComponent {
             'k-state-selected': !context.isOtherMonth && (context.isSelected || isRangeStart || isRangeEnd),
             'k-today': !context.isOtherMonth && context.isToday,
             'k-weekend': context.isWeekend,
-            'k-state-disabled': context.isDisabled,
+            'k-disabled': context.isDisabled,
             'k-other-month': context.isOtherMonth
         });
     }

package/dist/es2015/common/models/fillmode.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible fillMode options of the DateInput.
+ *
+ * The possible values are:
+ * - `'solid'` (Default)
+ * - `'flat'`
+ * - `'outline'`
+ * - `null`
+ */
+export declare type DateInputFillMode = 'solid' | 'flat' | 'outline';

package/dist/es2015/common/models/fillmode.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/models/rounded.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible rounded options of the DateInput.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'` (Default)
+ * - `'large'`
+ * - `'full'`
+ * - `null`
+ */
+export declare type DateInputRounded = 'small' | 'medium' | 'large' | 'full';

package/dist/es2015/common/models/rounded.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/models/size.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the DateInput.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'` (Default)
+ * - `'large'`
+ * - `null`
+ */
+export declare type DateInputSize = 'small' | 'medium' | 'large';

package/dist/es2015/common/models/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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;
 }