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

package/esm2015/calendar/services/selection.service.js

@@ -31,6 +31,10 @@ export class SelectionService {
                 const [start, end] = sortDates([rangePivot || date, date]);
                 selectedDates = this.bus.service(activeViewEnum).dateRange(start, end);
                 rangePivot = date > selectedDates[0] ? selectedDates[0] : last(selectedDates);
+                if (modifiers.anyArrow) {
+                    const [start, end] = sortDates([this.lastClicked || date, date]);
+                    selectedDates = this.bus.service(0).dateRange(start, end);
+                }
             }
             else {
                 selectedDates = [date];

package/esm2015/calendar/services/weeknames.service.js

@@ -13,8 +13,8 @@ export class WeekNamesService {
     constructor(intl) {
         this.intl = intl;
     }
-    getWeekNames(includeWeekNumber = false) {
-        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: 'short', type: 'days' }), this.intl.firstDay());
+    getWeekNames(includeWeekNumber = false, nameType) {
+        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: nameType, type: 'days' }), this.intl.firstDay());
         return includeWeekNumber ? [''].concat(weekNames) : weekNames;
     }
 }

package/esm2015/calendar/view-list.component.js

@@ -35,15 +35,21 @@ export class ViewListComponent {
         this.min = new Date(MIN_DATE);
         this.max = new Date(MAX_DATE);
         this.selectedDates = [];
+        this.tabIndex = 0;
+        this.disabled = false;
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
         this.todayButtonClick = new EventEmitter();
         this.pageChange = new EventEmitter();
+        this.focusCalendar = new EventEmitter();
+        this.blurCalendar = new EventEmitter();
+        this.focusedCellChange = new EventEmitter();
         this.getComponentClass = true;
         this.dates = [];
         this.cols = [];
         this.weekNames = [];
+        this.wideWeekNames = [];
         this.take = VIEWS_COUNT;
         this.animateToIndex = true;
         this.indexToScroll = -1;
@@ -68,7 +74,8 @@ export class ViewListComponent {
         return this.activeView === CalendarViewEnum.century;
     }
     ngOnInit() {
-        this.weekNames = this.getWeekNames();
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         this.bottomOffset = this.getBottomOffset();
         this.viewOffset = -1 * this.dom.headerHeight;
         this.viewHeight = this.dom.viewHeight(this.activeView);
@@ -80,7 +87,8 @@ export class ViewListComponent {
             return;
         }
         this.cols = new Array(this.service.rowLength({ prependCell: this.weekNumber })).fill('');
-        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames() : this.weekNames;
+        this.weekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('short') : this.weekNames;
+        this.wideWeekNames = hasChange(changes, 'weekNumber') && this.weekNumber ? this.getWeekNames('wide') : this.weekNames;
         const activeViewChanged = hasChange(changes, 'activeView');
         const focusedDate = this.focusedDate;
         const viewDate = dateInRange(this.service.viewDate(focusedDate, this.max, this.minViewsToRender), this.min, this.max);
@@ -145,6 +153,9 @@ export class ViewListComponent {
     isScrolled() {
         return this.virtualization.isListScrolled(this.service.skip(this.focusedDate, this.min));
     }
+    getTabIndex() {
+        return this.disabled ? null : this.tabIndex;
+    }
     getBottomOffset() {
         return this.getScrollableHeight() - this.dom.viewHeight(this.activeView);
     }
@@ -156,23 +167,25 @@ export class ViewListComponent {
     getTake(skip) {
         return Math.min(this.total - skip, this.take);
     }
-    getWeekNames() {
-        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: 'short', type: 'days' }), this.intl.firstDay());
+    getWeekNames(nameType) {
+        const weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: nameType, type: 'days' }), this.intl.firstDay());
         return this.weekNumber ? [''].concat(weekNames) : weekNames;
     }
     intlChange() {
-        this.weekNames = this.getWeekNames();
+        this.weekNames = this.getWeekNames('short');
+        this.wideWeekNames = this.getWeekNames('wide');
         if (this.isMonthView()) {
             this.cdr.markForCheck();
         }
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="id"
         [activeView]="activeView"
         [templateRef]="headerTitleTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
@@ -181,7 +194,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
     <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames">{{name}}</th>
+                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
             </tr>
         </thead>
     </table>
@@ -203,6 +216,10 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             #list
             role="grid"
             class="k-calendar-table"
+            [attr.tabindex]="getTabIndex()"
+            [attr.aria-labelledby]="id"
+            (focus)="focusCalendar.emit()"
+            (focusout)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
@@ -222,10 +239,11 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                    [viewDate]="date"
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+                   (focusedCellId)="focusedCellChange.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -236,6 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [currentDate]="activeDate"
         [min]="min"
         [max]="max"
+        [id]="id"
         [activeView]="activeView"
         [templateRef]="headerTitleTemplateRef"
         (todayButtonClick)="todayButtonClick.emit($event)"
@@ -244,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
-                <th class="k-calendar-th" *ngFor="let name of weekNames">{{name}}</th>
+                <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
             </tr>
         </thead>
     </table>
@@ -266,6 +285,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             #list
             role="grid"
             class="k-calendar-table"
+            [attr.tabindex]="getTabIndex()"
+            [attr.aria-labelledby]="id"
+            (focus)="focusCalendar.emit()"
+            (focusout)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
@@ -285,6 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                    [viewDate]="date"
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
+                   (focusedCellId)="focusedCellChange.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -310,6 +334,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], selectedDates: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -322,6 +352,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], pageChange: [{
                 type: Output
+            }], focusCalendar: [{
+                type: Output
+            }], blurCalendar: [{
+                type: Output
+            }], focusedCellChange: [{
+                type: Output
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: false }]

package/esm2015/calendar/view.component.js

@@ -35,6 +35,7 @@ export class ViewComponent {
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
         this.cellLeave = new EventEmitter();
+        this.focusedCellId = new EventEmitter();
         this.colSpan = 0;
         this.subscriptions = new Subscription();
         this.domEvents = [];
@@ -106,6 +107,9 @@ export class ViewComponent {
         };
     }
     getStyles(context) {
+        if (!context.isOtherMonth && this.isActive && context.isFocused) {
+            this.focusedCellId.emit(context.id);
+        }
         const { isRangeEnd, isRangeStart } = context;
         const isEndActive = this.activeRangeEnd === 'end' && isRangeEnd;
         const isStartActive = this.activeRangeEnd === 'start' && isRangeStart;
@@ -131,6 +135,9 @@ export class ViewComponent {
         const availableDates = week.map(item => item.value).filter(date => !this.disabledDatesService.isDateDisabled(date));
         this.weekNumberCellClick.emit(availableDates);
     }
+    getMonthLabel(date) {
+        return this.activeView === 1 ? this.intl.formatDate(date, 'MMMM') : null;
+    }
     firstWeekDateContext(rowCtx) {
         if (!this.weekNumber) {
             return null;
@@ -222,13 +229,14 @@ export class ViewComponent {
     }
 }
 ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave" }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td">&nbsp;</td></ng-template>
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
         <ng-template [ngIf]="weekNumber">
             <td
                 class="k-alt k-calendar-td"
+                role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
                 [kendoEventsOutsideAngular]="{
                     click: handleWeekNumberClick.bind(this, row)
@@ -255,6 +263,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
                 [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
                 [attr.aria-disabled]="cell.isDisabled"
+                [attr.aria-label]="getMonthLabel(cell.value)"
                 [ngClass]="getStyles(cell)"
                 [title]="cell.title"
             >
@@ -276,12 +285,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line
                     selector: '[kendoCalendarView]',
                     template: `
-    <ng-template #emptyCell><td class="k-empty k-calendar-td">&nbsp;</td></ng-template>
+    <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
         <ng-template [ngIf]="weekNumber">
             <td
                 class="k-alt k-calendar-td"
+                role="gridcell"
                 *ngIf="firstDate(row); else emptyCell"
                 [kendoEventsOutsideAngular]="{
                     click: handleWeekNumberClick.bind(this, row)
@@ -308,6 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.data-cell-index]="tableCellIndex(rowIndex, cellIndex)"
                 [attr.aria-selected]="cell.isSelected || cell.isRangeStart || cell.isRangeMid || cell.isRangeEnd"
                 [attr.aria-disabled]="cell.isDisabled"
+                [attr.aria-label]="getMonthLabel(cell.value)"
                 [ngClass]="getStyles(cell)"
                 [title]="cell.title"
             >
@@ -362,4 +373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], cellLeave: [{
                 type: Output
+            }], focusedCellId: [{
+                type: Output
             }] } });

package/esm2015/common/utils.js

@@ -33,3 +33,37 @@ export const isNumberArray = (value) => Array.isArray(value) && value.length > 0
  * and all items in the array are dates, returns `true`.
  */
 export const isDateArray = (value) => Array.isArray(value) && value.length > 0 && value.every(item => item instanceof Date);
+/**
+ * @hidden
+ */
+export const isArrowWithShiftPressed = (args) => args.shiftKey && (args.keyCode === Keys.ArrowRight || args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowDown || args.keyCode === Keys.ArrowUp);
+/**
+ * @hidden
+ * Enum with key codes.
+ */
+export var Keys;
+(function (Keys) {
+    Keys[Keys["ArrowDown"] = 40] = "ArrowDown";
+    Keys[Keys["ArrowLeft"] = 37] = "ArrowLeft";
+    Keys[Keys["ArrowRight"] = 39] = "ArrowRight";
+    Keys[Keys["ArrowUp"] = 38] = "ArrowUp";
+})(Keys || (Keys = {}));
+/**
+ * @hidden
+ */
+export const selectors = {
+    infiniteCalendarTable: '.k-content .k-calendar-table',
+    multiViewCalendarTable: '.k-content.k-calendar-table'
+};
+/**
+ * @hidden
+ */
+export const attributeNames = {
+    ariaActiveDescendant: 'aria-activedescendant',
+    ariaControls: 'aria-controls',
+    ariaExpanded: 'aria-expanded',
+    ariaHasPopup: 'aria-haspopup',
+    valueNow: 'aria-valuenow',
+    valuetext: 'aria-valuetext',
+    ariaInvalid: 'aria-invalid'
+};

package/esm2015/dateinput/dateinput.component.js

@@ -11,11 +11,12 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { addMonths, cloneDate, createDate, getDate, isEqual, lastDayOfMonth } from '@progress/kendo-date-math';
-import { isDocumentAvailable, hasObservers, KendoInput, Keys, guid } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
 import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { closest } from '../common/dom-queries';
-import { requiresZoneOnBlur, isPresent } from '../common/utils';
+import { requiresZoneOnBlur, isPresent, attributeNames } from '../common/utils';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -23,6 +24,7 @@ import * as i3 from "../common/picker.service";
 import * as i4 from "./localization/dateinput-localized-messages.directive";
 import * as i5 from "@progress/kendo-angular-common";
 import * as i6 from "@angular/common";
+let nextId = 0;
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
@@ -73,6 +75,7 @@ class KendoDate {
         validatePackage(packageMetadata);
         this.monthNames = this.allFormatedMonths();
         this.dayPeriods = this.allDayPeriods();
+        nextId++;
         if (!value) {
             this.value = getDate(new Date());
             const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
@@ -459,10 +462,6 @@ export class DateInputComponent {
         this.injector = injector;
         this.localization = localization;
         this.pickerService = pickerService;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -486,7 +485,7 @@ export class DateInputComponent {
         /**
          * @hidden
          */
-        this.role = 'spinbutton';
+        this.role = 'textbox';
         /**
          * @hidden
          */
@@ -563,10 +562,6 @@ export class DateInputComponent {
          * [spinner buttons]({% slug spinbuttons_dateinput %}).
          */
         this.spinners = false;
-        /**
-         * @hidden
-         */
-        this.isPopupOpen = false;
         /**
          * @hidden
          */
@@ -659,11 +654,26 @@ export class DateInputComponent {
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
+        this.subs = new Subscription();
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
             this.pickerService.input = this;
         }
+        else {
+            this.ariaReadOnly = null;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        if (this.pickerType) {
+            return `${this.pickerType}-${nextId}`;
+        }
+        else {
+            return `dateinput-${nextId}`;
+        }
     }
     /**
      * @hidden
@@ -788,6 +798,13 @@ export class DateInputComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     get inputFormat() {
         if (!this.format) {
             return DEFAULT_FORMAT;
@@ -823,6 +840,21 @@ export class DateInputComponent {
     containsElement(element) {
         return Boolean(closest(element, node => node === this.wrapper.nativeElement));
     }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.kendoDate = this.getKendoDate(this.value);
+        this.updateElementValue();
+        this.subs.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
+        this.ngControl = this.injector.get(NgControl, null);
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
+            this.ngZone.runOutsideAngular(() => {
+                this.bindEvents();
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -844,10 +876,16 @@ export class DateInputComponent {
             this.updateElementValue(this.isActive);
         }
     }
+    ngAfterViewInit() {
+        var _a, _b;
+        this.setComponentClasses();
+        const formControl = (_a = this.injector.get(NgControl, null)) === null || _a === void 0 ? void 0 : _a.control;
+        this.control = formControl;
+        this.subs.add((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => this.setAriaInvalid()));
+        this.setAriaInvalid();
+    }
     ngOnDestroy() {
-        if (this.intlSubscription) {
-            this.intlSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
         if (this.pickerService) {
             this.pickerService.input = null;
         }
@@ -856,32 +894,28 @@ export class DateInputComponent {
     /**
      * @hidden
      */
-    validate(control) {
-        return this.minValidator(control) || this.maxValidator(control) || this.incompleteValidator(control, this.isDateIncomplete);
+    setAriaInvalid() {
+        if (!this.control) {
+            return;
+        }
+        if (this.control.invalid) {
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'true');
+        }
+        else {
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'false');
+        }
     }
     /**
      * @hidden
      */
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
+    validate(control) {
+        return this.minValidator(control) || this.maxValidator(control) || this.incompleteValidator(control, this.isDateIncomplete);
     }
     /**
      * @hidden
      */
-    ngOnInit() {
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue();
-        this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
-        this.ngControl = this.injector.get(NgControl, null);
-        if (this.wrapper) {
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-            this.ngZone.runOutsideAngular(() => {
-                this.bindEvents();
-            });
-        }
-    }
-    ngAfterViewInit() {
-        this.setComponentClasses();
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
     }
     /**
      * @hidden
@@ -1386,7 +1420,7 @@ export class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -1536,7 +1570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.LocalizationService }, { type: i3.PickerService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { pickerType: [{
                 type: Input
             }], disabled: [{
                 type: Input