@progress/kendo-angular-dateinputs 7.1.2 → 7.1.3-dev.202210211241

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,11 @@ 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');
+    }
     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';
@@ -56,6 +56,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
  */
 export class DateTimePickerComponent {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer) {
+        var _a;
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -81,7 +82,7 @@ export class DateTimePickerComponent {
         /**
          * @hidden
          */
-        this.focusableId = `k-${guid()}`;
+        this.focusableId = `k-datetimepicker-${(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id}-`;
         /**
          * Sets the title of the input element of the DateTimePicker.
          */
@@ -245,6 +246,12 @@ export class DateTimePickerComponent {
     get input() {
         return this.pickerService.input;
     }
+    /**
+     * @hidden
+     */
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      */
@@ -483,12 +490,6 @@ export class DateTimePickerComponent {
     get disableCalendar() {
         return this.activeTab !== 'date' && !this.calendar.isActive;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
-    }
     /**
      * @hidden
      *
@@ -514,6 +515,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 +719,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 +931,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;
     }
@@ -1070,7 +1095,7 @@ 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"
@@ -1329,7 +1354,7 @@ 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"

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: 1663071420,
+    publishDate: 1666356015,
     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
             }] } });

package/esm2015/timepicker/timelist.component.js

@@ -15,11 +15,13 @@ import { SecondsService } from './services/seconds.service';
 import { MillisecondsService } from './services/milliseconds.service';
 import { DayPeriodService } from './services/dayperiod.service';
 import { closestInScope } from '../common/dom-queries';
+import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/dom.service";
-import * as i2 from "../virtualization/virtualization.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-common";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../virtualization/virtualization.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
 const SNAP_THRESHOLD = 0.05; //% of the item height
 const SCROLL_THRESHOLD = 2; //< 2px threshold
 const nil = () => (null);
@@ -40,12 +42,13 @@ const services = {
  * @hidden
  */
 export class TimeListComponent {
-    constructor(element, injector, dom, renderer, zone) {
+    constructor(element, injector, dom, renderer, zone, localization) {
         this.element = element;
         this.injector = injector;
         this.dom = dom;
         this.renderer = renderer;
         this.zone = zone;
+        this.localization = localization;
         this.min = cloneDate(MIDNIGHT_DATE);
         this.max = cloneDate(MAX_TIME);
         this.step = 1;
@@ -59,11 +62,32 @@ export class TimeListComponent {
         this.data = [];
         this.indexToScroll = -1;
         this.domEvents = [];
+        this.hostElement = this.element.nativeElement;
+    }
+    get roleAttribute() {
+        return this.isDayPeriod ? 'listbox' : 'spinbutton';
+    }
+    get ariaLabel() {
+        var _a;
+        return this.localization.get((_a = this.part) === null || _a === void 0 ? void 0 : _a.type);
+    }
+    get valueMin() {
+        var _a;
+        return (_a = this.data[0]) === null || _a === void 0 ? void 0 : _a.text;
+    }
+    get valueMax() {
+        var _a;
+        return (_a = this.data[this.data.length - 1]) === null || _a === void 0 ? void 0 : _a.text;
     }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
+    get isDayPeriod() {
+        var _a;
+        return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
+    }
     ngOnChanges(changes) {
+        var _a, _b;
         if (changes.part) {
             this.service = this.injector.get(services[this.part.type]);
             this.service.configure(this.serviceSettings());
@@ -83,6 +107,8 @@ export class TimeListComponent {
         this.animateToIndex = this.animateToIndex && this.textHasChanged(valueChanges);
         this.total = this.service.total(value);
         this.indexToScroll = this.selectedIndex(value);
+        this.renderer.setAttribute(this.hostElement, attributeNames.valueNow, (_a = this.getCurrentItem()) === null || _a === void 0 ? void 0 : _a.value.toString());
+        this.renderer.setAttribute(this.hostElement, attributeNames.valuetext, (_b = this.getCurrentItem()) === null || _b === void 0 ? void 0 : _b.text);
     }
     ngOnInit() {
         this.animateToIndex = true;
@@ -115,6 +141,9 @@ export class TimeListComponent {
             this.animateToIndex = true;
         });
     }
+    getCurrentItem() {
+        return this.indexToScroll >= 0 ? this.data[this.indexToScroll] : null;
+    }
     handleChange(dataItem) {
         const candidate = this.service.apply(this.value, dataItem.value);
         if (this.value.getTime() === candidate.getTime()) {
@@ -231,8 +260,8 @@ export class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
 }
-TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.valuemin": "this.valueMin", "attr.valuemax": "this.valueMax", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -250,14 +279,17 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: i2.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: i3.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -280,16 +312,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
     </kendo-virtualization>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { min: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.LocalizationService }]; }, propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -306,6 +341,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
+            }], roleAttribute: [{
+                type: HostBinding,
+                args: ["attr.role"]
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ["attr.aria-label"]
+            }], valueMin: [{
+                type: HostBinding,
+                args: ['attr.valuemin']
+            }], valueMax: [{
+                type: HostBinding,
+                args: ["attr.valuemax"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]