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

package/esm2015/timepicker/timepicker.component.js

@@ -6,12 +6,12 @@ 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, isEqual } 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 { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
 import { PickerService } from '../common/picker.service';
-import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
+import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { TIME_PART } from './models/time-part.default';
 import { PreventableEvent } from '../preventable-event';
 import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
@@ -19,16 +19,18 @@ import { timeRangeValidator } from '../validators/time-range.validator';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
+import { BusViewService } from '../calendar/services/bus-view.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@progress/kendo-angular-popup";
-import * as i3 from "../common/picker.service";
-import * as i4 from "@progress/kendo-angular-intl";
-import * as i5 from "../dateinput/dateinput.component";
-import * as i6 from "./timeselector.component";
-import * as i7 from "./localization/timeselector-custom-messages.component";
-import * as i8 from "./localization/timepicker-localized-messages.directive";
-import * as i9 from "@progress/kendo-angular-common";
+import * as i1 from "../calendar/services/bus-view.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "../common/picker.service";
+import * as i5 from "@progress/kendo-angular-intl";
+import * as i6 from "../dateinput/dateinput.component";
+import * as i7 from "./timeselector.component";
+import * as i8 from "./localization/timeselector-custom-messages.component";
+import * as i9 from "./localization/timepicker-localized-messages.directive";
+import * as i10 from "@progress/kendo-angular-common";
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
@@ -36,7 +38,8 @@ const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PA
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 export class TimePickerComponent {
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        this.bus = bus;
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -50,7 +53,7 @@ export class TimePickerComponent {
         /**
          * @hidden
          */
-        this.focusableId = `k-${guid()}`;
+        this.focusableId = `k-timepicker-${this.bus.calendarId}-`;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -188,7 +191,6 @@ export class TimePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
@@ -367,12 +369,10 @@ export class TimePickerComponent {
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
+    get popupUID() {
+        return `k-timepicker-popup-${this.bus.calendarId}-`;
     }
+    ;
     get isActive() {
         return this._active;
     }
@@ -673,6 +673,7 @@ export class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
+        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -686,11 +687,13 @@ export class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
         }
     }
     focusInput() {
@@ -800,12 +803,13 @@ export class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, 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.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
         LocalizationService,
+        BusViewService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.timepicker'
@@ -833,6 +837,21 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
@@ -842,7 +861,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -862,6 +881,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -898,12 +918,17 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, 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.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i7.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i8.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i8.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i9.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -914,6 +939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
+                        BusViewService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.timepicker'
@@ -943,6 +969,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
@@ -952,7 +993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -972,6 +1013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -1008,6 +1050,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
@@ -1015,7 +1062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.IntlService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

package/esm2015/util.js

@@ -341,8 +341,8 @@ export const isTabExitingCalendar = (calendarType, focusedElement, shiftKey) =>
     }
     return calendarType === 'infinite' || ( // infinte calendar is always exited on first tab keydown
     calendarType === 'classic' &&
-        (shiftKey && focusedElement.classList.contains('k-calendar')) || // exited on main calendar element focused and back-tab
-        (!shiftKey && focusedElement.classList.contains('k-calendar-nav-next')) // exited on next button focused and regular tab
+        (shiftKey && focusedElement.classList.contains('k-calendar-table')) || // exited on main calendar element focused and back-tab
+        (!shiftKey && focusedElement.classList.contains('k-calendar-table')) // exited on next button focused and regular tab
     );
 };
 /**