@progress/kendo-angular-dateinputs 7.1.3-dev.202210121001 → 7.1.3-dev.202210260703

package/esm2015/datepicker/datepicker.component.js

@@ -6,7 +6,7 @@ import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, O
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -26,7 +26,7 @@ import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 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 { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
@@ -60,10 +60,6 @@ export class DatePickerComponent {
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -266,7 +262,6 @@ export class DatePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this._popupSettings = { animate: true };
         this._show = false;
         this._value = null;
@@ -460,12 +455,11 @@ export class DatePickerComponent {
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
+    get popupUID() {
+        var _a;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
     }
+    ;
     get isActive() {
         return this._active;
     }
@@ -749,6 +743,7 @@ export class DatePickerComponent {
             return;
         }
         this._show = show;
+        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -761,13 +756,27 @@ export class DatePickerComponent {
                 popupClass: this.popupClasses,
                 positionMode: 'absolute'
             });
+            if (this.calendar.type === 'infinite') {
+                this.pickerSubscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+            else {
+                this.pickerSubscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
             this.subscription.unsubscribe();
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.cdr.detectChanges();
         }
     }
     focusInput() {
@@ -884,7 +893,7 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], focusableId: "focusableId", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -912,8 +921,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
-            [focusableId]="focusableId"
+            [role]="'combobox'"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -987,7 +996,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1023,8 +1032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-dateinput
             #input
-            [role]="inputRole"
-            [focusableId]="focusableId"
+            [role]="'combobox'"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -1162,8 +1171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
-            }], focusableId: [{
-                type: Input
             }], activeView: [{
                 type: Input
             }], bottomView: [{

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

@@ -7,7 +7,7 @@ import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { DateRangeInput } from './date-range-input';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { clampRange, isInRange } from '../util';
-import { isPresent } from '../common/utils';
+import { attributeNames, isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
@@ -51,6 +51,11 @@ export class DateRangeEndInputDirective extends DateRangeInput {
         this.rangeService.registerEndInput(this.dateInput);
         super.init();
     }
+    ngAfterViewInit() {
+        const inputElement = this.dateInput.inputElement;
+        this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
+        this.dateInput.pickerType = 'daterangeend';
+    }
     ngOnDestroy() {
         super.destroy();
     }

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

@@ -2,11 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
 import { cloneDate } from '@progress/kendo-date-math';
 import { Keys } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 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";
 /**
  * @hidden
  */
@@ -115,3 +119,9 @@ export class DateRangeInput {
         }
     }
 }
+DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeInput, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: undefined }, { type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });

package/esm2015/daterange/date-range-popup.component.js

@@ -241,9 +241,9 @@ export class DateRangePopupComponent {
         if (!calendar) {
             return;
         }
-        const nativeElement = calendar.element.nativeElement;
-        this.blurSubscription = fromEvent(nativeElement, 'blur').subscribe(() => this.onBlur.emit());
-        this.focusSubscription = fromEvent(nativeElement, 'focus').subscribe(() => this.onFocus.emit());
+        const calendarElement = calendar.element.nativeElement.querySelector('.k-calendar-view');
+        this.blurSubscription = fromEvent(calendarElement, 'blur').subscribe(() => this.onBlur.emit());
+        this.focusSubscription = fromEvent(calendarElement, 'focus').subscribe(() => this.onFocus.emit());
     }
     addPopupSubscriptions(...subscriptions) {
         if (!isPresent(this.popupSubscriptions)) {
@@ -297,7 +297,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/daterange/date-range-selection.directive.js

@@ -40,7 +40,7 @@ export class DateRangeSelectionDirective {
          */
         this.selectionRangeChange = new EventEmitter();
         this.calendarSubscriptions = new Subscription();
-        this.dateRangeService = this.dateRangeService || new DateRangeService();
+        this.dateRangeService = this.dateRangeService || new DateRangeService(renderer);
         renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
     }
     /**

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

@@ -7,6 +7,7 @@ import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { DateRangeInput } from './date-range-input';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { clampRange, isInRange } from '../util';
+import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
@@ -20,6 +21,7 @@ export class DateRangeStartInputDirective extends DateRangeInput {
         super('start', rangeService, dateInput, element, renderer, zone);
         this.rangeService = rangeService;
         this.dateInput = dateInput;
+        this.renderer = renderer;
         /**
          * Specifies the navigation behavior of the calendar when the active end is changed on input focus.
          * When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar
@@ -51,6 +53,13 @@ export class DateRangeStartInputDirective extends DateRangeInput {
         this.rangeService.registerStartInput(this.dateInput);
         super.init();
     }
+    ngAfterViewInit() {
+        const inputElement = this.dateInput.inputElement;
+        this.renderer.setAttribute(inputElement, 'role', 'combobox');
+        this.renderer.setAttribute(inputElement, attributeNames.ariaHasPopup, 'true');
+        this.dateInput.pickerType = 'daterangestart';
+        this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
+    }
     ngOnDestroy() {
         super.destroy();
     }

package/esm2015/daterange/date-range.component.js

@@ -2,14 +2,16 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChildren, HostBinding } from '@angular/core';
+import { Component, ContentChildren, HostBinding, HostListener } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { DateRangeService } from './date-range.service';
+import { Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
-import * as i1 from "./date-range-popup.component";
-import * as i2 from "@angular/common";
+import * as i1 from "./date-range.service";
+import * as i2 from "./date-range-popup.component";
+import * as i3 from "@angular/common";
 /**
  * Represents the Kendo UI DateRange component for Angular.
  *
@@ -30,7 +32,8 @@ import * as i2 from "@angular/common";
  * ```
  */
 export class DateRangeComponent {
-    constructor() {
+    constructor(dateRangeService) {
+        this.dateRangeService = dateRangeService;
         this.wrapperClass = true;
         /**
          * @hidden
@@ -38,6 +41,19 @@ export class DateRangeComponent {
         this.showDefault = false;
         validatePackage(packageMetadata);
     }
+    /**
+    * @hidden
+    */
+    keydown(event) {
+        const shouldOpenPopup = event.keyCode === Keys.ArrowDown && event.altKey;
+        if (shouldOpenPopup) {
+            this.dateRangeService.activatePopup();
+        }
+        const shouldClosePopup = (event.keyCode === Keys.ArrowUp && event.altKey) || event.keyCode === Keys.Escape;
+        if (shouldClosePopup) {
+            this.dateRangeService.deactivatePopup();
+        }
+    }
     get hasContentPopup() {
         return this.contentPopup.length > 0;
     }
@@ -48,16 +64,15 @@ export class DateRangeComponent {
         });
     }
     ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
-DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: i1.DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, components: [{ type: i1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -68,7 +83,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { wrapperClass: [{
+        }], ctorParameters: function () { return [{ type: i1.DateRangeService }]; }, propDecorators: { keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-daterangepicker']
             }], contentPopup: [{

package/esm2015/daterange/date-range.service.js

@@ -2,10 +2,12 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { isEqual } from '@progress/kendo-date-math';
+import { Subscription } from 'rxjs';
+import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 const isActive = (cmp) => (cmp && cmp.isActive) || false;
 const hasActiveContent = (popup) => popup && popup.hasActiveContent();
@@ -15,7 +17,10 @@ const hasActiveContent = (popup) => popup && popup.hasActiveContent();
  */
 export class DateRangeService {
     /** @hidden */
-    constructor() {
+    constructor(renderer) {
+        this.renderer = renderer;
+        /** @hidden */
+        this.focusedCellChange = new Subscription();
         /**
          * An Observable instance that notifies when the `activeRangeEnd` state is changed.
          */
@@ -80,10 +85,19 @@ export class DateRangeService {
      * The method opens the popup and focuses the calendar.
      */
     activatePopup() {
+        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!dateRangePopup) {
             return;
         }
+        if (this.startInput$.value) {
+            const inputElement = this.startInput$.value.dateInput.nativeElement;
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, dateRangePopup.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'true');
+            this.focusedCellChange = (_a = dateRangePopup.viewCalendar.first) === null || _a === void 0 ? void 0 : _a.viewList.focusedCellChange.subscribe((id) => {
+                this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
+            });
+        }
         dateRangePopup.activate();
     }
     /**
@@ -91,10 +105,18 @@ export class DateRangeService {
      * The method closes the popup.
      */
     deactivatePopup() {
+        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!(dateRangePopup && dateRangePopup.show)) {
             return;
         }
+        if (this.startInput$.value) {
+            const inputElement = this.startInput$.value.dateInput.nativeElement;
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
+            (_a = this.focusedCellChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+        }
         dateRangePopup.show = false;
     }
     /**
@@ -178,8 +200,10 @@ export class DateRangeService {
         this.range$.next(range);
     }
 }
-DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/datetimepicker/datetimepicker.component.js

@@ -7,13 +7,13 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { Subscription, fromEvent } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, Keys, guid } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 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 { attributeNames, isPresent } from '../common/utils';
 import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { minValidator } from '../validators/min.validator';
@@ -78,10 +78,6 @@ export class DateTimePickerComponent {
          * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets the title of the input element of the DateTimePicker.
          */
@@ -245,6 +241,12 @@ export class DateTimePickerComponent {
     get input() {
         return this.pickerService.input;
     }
+    /**
+     * @hidden
+     */
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      */
@@ -483,12 +485,6 @@ export class DateTimePickerComponent {
     get disableCalendar() {
         return this.activeTab !== 'date' && !this.calendar.isActive;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
-    }
     /**
      * @hidden
      *
@@ -514,6 +510,11 @@ export class DateTimePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    get popupUID() {
+        var _a;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    ;
     ngOnInit() {
         this.subscriptions.add(this.pickerService.onFocus
             // detect popup changes to disable the inactive view mark-up when the popup is open
@@ -713,6 +714,9 @@ export class DateTimePickerComponent {
         if (event.target !== dateTimeSelector) {
             return;
         }
+        if (this.activeTab === 'time') {
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+        }
         this.activeTabComponent.focus();
     }
     /**
@@ -922,12 +926,28 @@ export class DateTimePickerComponent {
             anchorAlign: { vertical: 'bottom', horizontal: direction },
             popupAlign: { vertical: 'top', horizontal: direction }
         });
+        this.popupRef.popupElement.setAttribute('id', this.popupUID);
+        this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+        if (this.activeTab === 'date') {
+            if (this.calendar.type === 'infinite') {
+                this.subscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+            else {
+                this.subscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
+                }));
+            }
+        }
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
     }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -1003,7 +1023,7 @@ export class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -1070,12 +1090,12 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [placeholder]="placeholder"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -1254,7 +1274,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i9.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i9.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1329,12 +1349,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [placeholder]="placeholder"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -1542,8 +1562,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
-            }], focusableId: [{
-                type: Input
             }], title: [{
                 type: Input
             }], disabled: [{

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665567991,
+    publishDate: 1666767725,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/timepicker/localization/messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class TimePickerMessages extends ComponentMessages {
 }
 TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle" }, usesInheritance: true, ngImport: i0 });
+TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -32,4 +32,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], toggle: [{
                 type: Input
+            }], hour: [{
+                type: Input
+            }], minute: [{
+                type: Input
+            }], second: [{
+                type: Input
+            }], millisecond: [{
+                type: Input
+            }], dayperiod: [{
+                type: Input
             }] } });