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

package/dist/es2015/datetimepicker/datetimepicker.component.js

@@ -18,7 +18,7 @@ import { packageMetadata } from '../package-metadata';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { isPresent } from '../common/utils';
-import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable } from '../util';
+import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
@@ -45,13 +45,13 @@ const TWO_DIGIT_YEAR_MAX = 68;
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
 let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerComponent {
-    constructor(popupService, intl, cdr, pickerService, ngZone, host, touchEnabled, localization, disabledDatesService, renderer) {
+    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer) {
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
         this.pickerService = pickerService;
         this.ngZone = ngZone;
-        this.host = host;
+        this.wrapper = wrapper;
         this.touchEnabled = touchEnabled;
         this.localization = localization;
         this.disabledDatesService = disabledDatesService;
@@ -218,8 +218,17 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
         this.disabledDatesValidateFn = noop;
         this.incompleteValidator = noop;
         this.subscriptions = new Subscription();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
     }
+    /**
+     * @hidden
+     */
+    get disabledClass() {
+        return this.disabled;
+    }
     /**
      * @hidden
      */
@@ -355,10 +364,10 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     }
     set isActive(value) {
         if (value) {
-            this.renderer.addClass(this.wrapper.nativeElement, 'k-state-focused');
+            this.renderer.addClass(this.wrapper.nativeElement, 'k-focus');
         }
         else {
-            this.renderer.removeClass(this.wrapper.nativeElement, 'k-state-focused');
+            this.renderer.removeClass(this.wrapper.nativeElement, 'k-focus');
         }
         this._isActive = value;
     }
@@ -373,6 +382,73 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     get defaultTab() {
         return this._defaultTab;
     }
+    /**
+     * 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.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -438,6 +514,9 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(this.handleCancel.bind(this))));
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     ngOnChanges(changes) {
         if (isPresent(changes.min) || isPresent(changes.max)) {
             this.verifyMinMaxRange();
@@ -589,7 +668,7 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             return;
         }
         this.isActive = false;
-        const isNgControlUntouched = this.host.nativeElement.classList.contains('ng-untouched');
+        const isNgControlUntouched = this.wrapper.nativeElement.classList.contains('ng-untouched');
         const runInZone = isNgControlUntouched || hasObservers(this.onBlur) || (this.isOpen && hasObservers(this.close));
         this.run(runInZone, () => {
             this.onBlur.emit();
@@ -714,6 +793,13 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             this.input.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    popupButtonsClasses(type) {
+        const buttonType = type ? type : 'base';
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''} ${this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : ''}`;
+    }
     /**
      * @hidden
      *
@@ -837,7 +923,7 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     }
     /**
      * 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.
      */
     focusTargetInComponent(event) {
         if (!isPresent(event)) {
@@ -883,16 +969,35 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
         this.cdr.markForCheck();
         this.ngZone.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([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-datetimepicker'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
 ], DateTimePickerComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
-    ViewChild('wrapper', { static: true }),
+    HostBinding('class.k-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DateTimePickerComponent.prototype, "disabledClass", null);
+tslib_1.__decorate([
+    ViewChild('toggleButton', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
-], DateTimePickerComponent.prototype, "wrapper", void 0);
+], DateTimePickerComponent.prototype, "toggleButton", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Date),
@@ -1021,6 +1126,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [String])
 ], DateTimePickerComponent.prototype, "defaultTab", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateTimePickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateTimePickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DateTimePickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     ContentChild(CellTemplateDirective, { static: false }),
     tslib_1.__metadata("design:type", CellTemplateDirective)
@@ -1119,56 +1239,55 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
         >
         </ng-container>
 
-        <span
-            #wrapper
-            class="k-picker-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-dateinput
+            [value]="value"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [role]="inputRole"
+            [ariaReadOnly]="readonly"
+            [steps]="steps"
+            [tabindex]="tabindex"
+            [title]="title"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="isOpen"
+            (valueChange)="handleInputValueChange($event)"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown
+            }"
+            [scope]="this"
+            [fillMode]="fillMode"
+            [rounded]="rounded"
+            [size]="size"
         >
-            <kendo-dateinput
-                [value]="value"
-                [format]="format"
-                [twoDigitYearMax]="twoDigitYearMax"
-                [min]="min"
-                [max]="max"
-                [incompleteDateValidation]="incompleteDateValidation"
-                [formatPlaceholder]="formatPlaceholder"
-                [placeholder]="placeholder"
-                [disabled]="disabled"
-                [readonly]="readonly || readOnlyInput"
-                [role]="inputRole"
-                [ariaReadOnly]="readonly"
-                [steps]="steps"
-                [tabindex]="tabindex"
-                [title]="title"
-                [focusableId]="focusableId"
-                [hasPopup]="true"
-                [isPopupOpen]="isOpen"
-                (valueChange)="handleInputValueChange($event)"
-                [kendoEventsOutsideAngular]="{
-                    keydown: handleKeyDown
-                }"
-                [scope]="this"
-            >
-            </kendo-dateinput>
-            <span class="k-select"
-                [attr.title]="localization.get('toggle')"
-                [attr.aria-label]="localization.get('toggle')"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventMouseDown,
-                    click: handleIconClick
+        </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]="{
+                mousedown: preventMouseDown,
+                click: handleIconClick
+            }"
+            [scope]="this"
+        >
+            <span class="k-button-icon k-icon"
+                [ngClass]="{
+                    'k-i-calendar': activeTab === 'date',
+                    'k-i-clock': activeTab === 'time'
                 }"
-                [scope]="this"
-            >
-                <span class="k-link k-link-date">
-                    <span
-                        class="k-icon"
-                        [class.k-i-calendar]="activeTab === 'date'"
-                        [class.k-i-clock]="activeTab === 'time'"
-                    >
-                    </span>
-                </span>
-            </span>
-        </span>
+            ></span>
+        </button>
 
         <ng-container #container></ng-container>
 
@@ -1191,8 +1310,9 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
                     <div class="k-button-group k-button-group-stretched">
                         <button
                             type="button"
-                            class="k-button k-date-tab"
-                            [class.k-state-active]="activeTab === 'date'"
+                            class="k-button k-group-start k-date-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'date'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -1205,8 +1325,9 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
                         </button>
                         <button
                             type="button"
-                            class="k-button k-time-tab"
-                            [class.k-state-active]="activeTab === 'time'"
+                            class="k-button k-group-end k-time-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'time'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -1286,6 +1407,7 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
                         *ngIf="cancelButton"
                         type="button"
                         class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
@@ -1297,7 +1419,8 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
                     </button>
                     <button
                         type="button"
-                        class="k-time-accept k-button k-primary"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
                         [attr.title]="localization.get('acceptLabel')"
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"