@progress/kendo-angular-scheduler 4.3.1-dev.202208101208 → 4.3.1-dev.202208291508

package/fesm2015/kendo-angular-scheduler.js

@@ -10,7 +10,7 @@ import * as i12$1 from '@progress/kendo-angular-common';
 import { hasObservers, isDocumentAvailable, isChanged, Keys, anyChanged, ResizeSensorComponent, EventsModule, guid, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { isEqualDate, timezoneNames, ZonedDate, toLocalDate, getDate, Day, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek } from '@progress/kendo-date-math';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i4 from '@progress/kendo-angular-dateinputs';
+import * as i5 from '@progress/kendo-angular-dateinputs';
 import { PreventableEvent as PreventableEvent$1, CalendarModule, DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { Subject, BehaviorSubject, fromEvent, Subscription, combineLatest, merge } from 'rxjs';
 import { auditTime, buffer, filter, map, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660133212,
+    publishDate: 1661785631,
     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'
 };
@@ -1434,10 +1434,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class FocusService {
-    constructor(renderer, wrapper, domEvents) {
+    constructor(renderer, wrapper, domEvents, zone) {
         this.renderer = renderer;
         this.wrapper = wrapper;
         this.domEvents = domEvents;
+        this.zone = zone;
         this.ariaActiveDescendant = new EventEmitter();
         this.items = new Set();
         this.elementMap = new WeakMap();
@@ -1486,6 +1487,24 @@ class FocusService {
         }
         return this.activeItem !== currentItem;
     }
+    focusFirst() {
+        const firstEvent = Array.from(this.items.values())[0];
+        if (!firstEvent) {
+            return;
+        }
+        this.activate(firstEvent.element.nativeElement);
+        this.focus();
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const first = Array.from(this.items.values())[0];
+            if (!first) {
+                this.clearActiveDescendant();
+                return;
+            }
+            const id = first.element.nativeElement.getAttribute('id');
+            this.ariaActiveDescendant.next(id);
+            this.lastActiveDescendantId = id;
+        });
+    }
     clearActiveDescendant() {
         this.ariaActiveDescendant.next(null);
     }
@@ -1496,6 +1515,7 @@ class FocusService {
             if (item === next) {
                 const id = item.element.nativeElement.getAttribute('id');
                 this.ariaActiveDescendant.next(id);
+                this.lastActiveDescendantId = id;
             }
         });
         this.activeItem = next;
@@ -1534,6 +1554,10 @@ class FocusService {
     }
     onFocusIn(e) {
         const item = this.elementMap.get(e.target);
+        const shouldRestoreActiveDescendant = this.lastActiveDescendantId && this.lastActiveDescendantId !== (item === null || item === void 0 ? void 0 : item.element.nativeElement.getAttribute('id'));
+        if (shouldRestoreActiveDescendant) {
+            this.ariaActiveDescendant.next(this.lastActiveDescendantId);
+        }
         if (!item || item === this.focusedItem) {
             return;
         }
@@ -1550,10 +1574,10 @@ class FocusService {
         }
         this.focusedItem.toggleFocus(false);
         this.focusedItem = null;
-        this.ariaActiveDescendant.next(null);
+        this.clearActiveDescendant();
     }
 }
-FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [{ token: i0.Renderer2, optional: true }, { token: i0.ElementRef, optional: true }, { token: DomEventsService }], target: i0.ɵɵFactoryTarget.Injectable });
+FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [{ token: i0.Renderer2, optional: true }, { token: i0.ElementRef, optional: true }, { token: DomEventsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
@@ -1561,7 +1585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }, { type: i0.ElementRef, decorators: [{
                     type: Optional
-                }] }, { type: DomEventsService }]; } });
+                }] }, { type: DomEventsService }, { type: i0.NgZone }]; } });
 
 /**
  * @hidden
@@ -1798,6 +1822,7 @@ class FocusableDirective {
         this.element.nativeElement.focus();
     }
     toggleFocus(value) {
+        var _a;
         const focusedClass = 'k-selected';
         const element = this.element.nativeElement;
         if (value) {
@@ -1806,7 +1831,11 @@ class FocusableDirective {
         else {
             this.renderer.removeClass(element, focusedClass);
         }
-        this.renderer.setAttribute(element, 'aria-selected', value.toString());
+        const selectable = element.matches('.k-scheduler-agendaview .k-scheduler-content .k-selected');
+        if (selectable) {
+            (_a = element.closest('.k-scheduler-agendaview').querySelector('[aria-selected="true"]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-selected');
+            this.renderer.setAttribute(element, 'aria-selected', value.toString());
+        }
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2276,10 +2305,12 @@ const alwaysFalse = () => false;
  * {% endmeta %}
  */
 class ToolbarNavigationComponent {
-    constructor(popupService, toolbarService, localization, cd) {
+    constructor(popupService, toolbarService, localization, cd, viewContext) {
         this.popupService = popupService;
         this.toolbarService = toolbarService;
         this.localization = localization;
+        this.cd = cd;
+        this.viewContext = viewContext;
         /**
          * @hidden
          * TODO: Drop in next MAJOR version
@@ -2295,6 +2326,10 @@ class ToolbarNavigationComponent {
          * TODO: Drop in next MAJOR version
          */
         this.inlineGapStyle = 'inherit';
+        /**
+         * @hidden
+         */
+        this.dateRangeText = { short: '', long: '', current: '' };
         this.subs = this.localization.changes.subscribe(() => {
             cd.markForCheck();
         });
@@ -2340,6 +2375,16 @@ class ToolbarNavigationComponent {
     onBlur() {
         this.closePopup();
     }
+    ngOnInit() {
+        this.subs.add(this.ctx.dateRange.subscribe(res => {
+            this.dateRangeText.short = res === null || res === void 0 ? void 0 : res.shortText;
+            this.dateRangeText.long = res === null || res === void 0 ? void 0 : res.text;
+            this.setDateRangeText();
+        }));
+        this.subs.add(this.viewContext.resize.subscribe(() => {
+            this.setDateRangeText();
+        }));
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
         this.closePopup();
@@ -2406,8 +2451,13 @@ class ToolbarNavigationComponent {
             this.popupRef = null;
         }
     }
+    setDateRangeText() {
+        const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
+        this.dateRangeText.current = isDesktop ? this.dateRangeText.long : this.dateRangeText.short;
+        this.cd.detectChanges();
+    }
 }
-ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1$1.PopupService }, { token: ToolbarService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1$1.PopupService }, { token: ToolbarService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }], target: i0.ɵɵFactoryTarget.Component });
 ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max" }, host: { properties: { "style.display": "this.inlineDisplayStyle", "style.flex-flow": "this.inlineFlexFlowStyle", "style.gap": "this.inlineGapStyle" } }, providers: [
         PopupService
     ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: `
@@ -2438,18 +2488,19 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             </button>
         </span>
 
-        <a #anchor
+        <button
+            #anchor
+            kendoButton
+            icon="calendar"
+            fillMode="flat"
             (click)="toggleSelectedDate({ nativeElement: anchor }, template)"
             role="button"
-            href="#"
             class="k-nav-current"
             tabindex="-1"
             [attr.aria-live]="'polite'"
         >
-            <span class="k-icon k-i-calendar"></span>
-            <span class="k-sm-date-format">{{ (ctx.dateRange | async)?.shortText }}</span>
-            <span class="k-lg-date-format">{{ (ctx.dateRange | async)?.text }}</span>
-        </a>
+            <span>{{ dateRangeText?.current }}</span>
+        </button>
 
         <ng-template #template>
             <kendo-calendar #calendar (blur)="onBlur()" (valueChange)="selectDate($event)" [value]="ctx.selectedDate | async" [min]="min" [max]="max">
@@ -2457,7 +2508,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.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: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.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: i5.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2495,18 +2546,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </button>
         </span>
 
-        <a #anchor
+        <button
+            #anchor
+            kendoButton
+            icon="calendar"
+            fillMode="flat"
             (click)="toggleSelectedDate({ nativeElement: anchor }, template)"
             role="button"
-            href="#"
             class="k-nav-current"
             tabindex="-1"
             [attr.aria-live]="'polite'"
         >
-            <span class="k-icon k-i-calendar"></span>
-            <span class="k-sm-date-format">{{ (ctx.dateRange | async)?.shortText }}</span>
-            <span class="k-lg-date-format">{{ (ctx.dateRange | async)?.text }}</span>
-        </a>
+            <span>{{ dateRangeText?.current }}</span>
+        </button>
 
         <ng-template #template>
             <kendo-calendar #calendar (blur)="onBlur()" (valueChange)="selectDate($event)" [value]="ctx.selectedDate | async" [min]="min" [max]="max">
@@ -2516,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: ToolbarService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { calendar: [{
+        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: ToolbarService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
             }], inlineDisplayStyle: [{
@@ -3050,7 +3102,7 @@ SchedulerDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         [(value)]='date'
         (valueChange)='onValueChange($event)'
     ></kendo-timepicker>
-    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4484,7 +4536,7 @@ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </li>
             </ul>
         </div>
-    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
+    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEndRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -8880,8 +8932,7 @@ class BaseViewItem {
                 right: this.localization.rtl ? `${rect.left}px` : '',
                 top: `${rect.top}px`,
                 width: `${rect.width}px`,
-                height: `${rect.height}px`,
-                display: 'block'
+                height: `${rect.height}px`
             });
         }
     }
@@ -8892,7 +8943,6 @@ class BaseViewItem {
         this.subs.add(this.slotService.slotsChange.subscribe(() => {
             this.rect = null;
             this.setStyles({
-                display: 'none',
                 width: 0,
                 left: 0
             });
@@ -9302,6 +9352,9 @@ class MonthViewItemComponent extends BaseViewItem {
             this.toggle(false);
             return;
         }
+        else {
+            this.toggle(true);
+        }
         super.reflow();
     }
 }
@@ -10997,7 +11050,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                         </ng-container>
                     </table>
                 </div>
-                <div class="k-scheduler-content" #content>
+                <div class="k-scheduler-content" tabindex="0" #content>
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
@@ -11125,7 +11178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </ng-container>
                     </table>
                 </div>
-                <div class="k-scheduler-content" #content>
+                <div class="k-scheduler-content" tabindex="0" #content>
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
@@ -11317,10 +11370,12 @@ class ViewFooterComponent {
 }
 ViewFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ViewFooterComponent, selector: "[viewFooter]", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-scheduler-footer": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "style.justify-content": "this.inlineJustifyContentStyle" } }, ngImport: i0, template: `
-        <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
-            <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
-            <span class="k-button-text">{{ item.text }}</span>
-        </button>
+        <span class="k-scheduler-navigation">
+            <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
+                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
+                <span class="k-button-text">{{ item.text }}</span>
+            </button>
+        </span>
     `, isInline: true, directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
@@ -11328,10 +11383,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[viewFooter]',
                     template: `
-        <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
-            <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
-            <span class="k-button-text">{{ item.text }}</span>
-        </button>
+        <span class="k-scheduler-navigation">
+            <button type="button" kendoButton *ngFor="let item of items" [ngClass]="item.cssClass" (click)="onItemClick($event, item)">
+                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
+                <span class="k-button-text">{{ item.text }}</span>
+            </button>
+        </span>
     `
                 }]
         }], propDecorators: { hostClasses: [{
@@ -15411,10 +15468,11 @@ function seriesDate(head, occurrence, current, field) {
  * @hidden
  */
 class EditingDirectiveBase {
-    constructor(scheduler, localDataChangesService, dialogsService) {
+    constructor(scheduler, localDataChangesService, dialogsService, focusService) {
         this.scheduler = scheduler;
         this.localDataChangesService = localDataChangesService;
         this.dialogsService = dialogsService;
+        this.focusService = focusService;
         /**
          * Fires before the editing directive renders the **Add** dialog.
          */
@@ -15492,6 +15550,7 @@ class EditingDirectiveBase {
                 .subscribe((editMode) => {
                 if (editMode !== undefined) {
                     this.handleRemove(dataItem, editMode);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -15500,6 +15559,7 @@ class EditingDirectiveBase {
                 .subscribe((shouldRemove) => {
                 if (shouldRemove) {
                     this.handleRemove(dataItem, 0 /* Event */);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -15600,11 +15660,11 @@ class EditingDirectiveBase {
         return editable && editable[action] !== false;
     }
 }
-EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: SchedulerComponent }, { token: LocalDataChangesService }, { token: DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: SchedulerComponent }, { token: LocalDataChangesService }, { token: DialogsService }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Directive });
 EditingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditingDirectiveBase, inputs: { editService: "editService" }, outputs: { add: "add", edit: "edit" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: SchedulerComponent }, { type: LocalDataChangesService }, { type: DialogsService }]; }, propDecorators: { add: [{
+        }], ctorParameters: function () { return [{ type: SchedulerComponent }, { type: LocalDataChangesService }, { type: DialogsService }, { type: FocusService }]; }, propDecorators: { add: [{
                 type: Output
             }], edit: [{
                 type: Output
@@ -15617,8 +15677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * uses the [Reactive Angular Forms]({{ site.data.urls.angular['reactiveforms'] }}).
  */
 class ReactiveEditingDirective extends EditingDirectiveBase {
-    constructor(scheduler, localDataChangesService, dialogsService) {
-        super(scheduler, localDataChangesService, dialogsService);
+    constructor(scheduler, localDataChangesService, dialogsService, focusService) {
+        super(scheduler, localDataChangesService, dialogsService, focusService);
         this.scheduler = scheduler;
         this.localDataChangesService = localDataChangesService;
         this.dialogsService = dialogsService;
@@ -15692,14 +15752,14 @@ class ReactiveEditingDirective extends EditingDirectiveBase {
         return false;
     }
 }
-ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: SchedulerComponent }, { token: LocalDataChangesService }, { token: DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: SchedulerComponent }, { token: LocalDataChangesService }, { token: DialogsService }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Directive });
 ReactiveEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ReactiveEditingDirective, selector: "[kendoSchedulerReactiveEditing]", inputs: { createFormGroup: ["kendoSchedulerReactiveEditing", "createFormGroup"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSchedulerReactiveEditing]'
                 }]
-        }], ctorParameters: function () { return [{ type: SchedulerComponent }, { type: LocalDataChangesService }, { type: DialogsService }]; }, propDecorators: { createFormGroup: [{
+        }], ctorParameters: function () { return [{ type: SchedulerComponent }, { type: LocalDataChangesService }, { type: DialogsService }, { type: FocusService }]; }, propDecorators: { createFormGroup: [{
                 type: Input,
                 args: ['kendoSchedulerReactiveEditing']
             }] } });

package/navigation/focus.service.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, Renderer2, OnDestroy, EventEmitter } from '@angular/core';
+import { ElementRef, Renderer2, OnDestroy, EventEmitter, NgZone } from '@angular/core';
 import { FocusableElement } from './focusable-element.interface';
 import { DomEventsService } from '../views/common/dom-events.service';
 import { FocusPosition } from './focus-position.interface';
@@ -14,19 +14,22 @@ export declare class FocusService implements OnDestroy {
     private renderer;
     private wrapper;
     private domEvents;
+    private zone;
     get activeElement(): ElementRef;
     ariaActiveDescendant: EventEmitter<string | null>;
     private activeItem;
     private focusedItem;
+    private lastActiveDescendantId;
     private items;
     private elementMap;
     private subs;
-    constructor(renderer: Renderer2, wrapper: ElementRef, domEvents: DomEventsService);
+    constructor(renderer: Renderer2, wrapper: ElementRef, domEvents: DomEventsService, zone: NgZone);
     ngOnDestroy(): void;
     register(item: FocusableElement): void;
     unregister(item: FocusableElement): void;
     focus(): void;
     focusNext(options?: FocusPosition): boolean;
+    focusFirst(): void;
     clearActiveDescendant(): void;
     private activate;
     private activateNext;
@@ -34,6 +37,6 @@ export declare class FocusService implements OnDestroy {
     private toggleWrapper;
     private onFocusIn;
     private onFocusOut;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FocusService, [{ optional: true; }, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FocusService, [{ optional: true; }, { optional: true; }, null, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FocusService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scheduler",
-  "version": "4.3.1-dev.202208101208",
+  "version": "4.3.1-dev.202208291508",
   "description": "Kendo UI Scheduler Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/toolbar/navigation.component.d.ts

@@ -8,7 +8,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolbarService } from './toolbar.service';
 import { ToolbarContext } from './toolbar-context';
 import { CalendarComponent } from '@progress/kendo-angular-dateinputs';
+import { ViewContextService } from '../views/view-context.service';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+interface DateRangeText {
+    short: string;
+    long: string;
+    current: string;
+}
 /**
  * A toolbar component which contains the controls for date navigation
  * ([see example]({% slug toolbar_scheduler %}#toc-including-the-built-in-components)).
@@ -29,6 +38,8 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
     private popupService;
     private toolbarService;
     private localization;
+    private cd;
+    private viewContext;
     set calendar(calendar: CalendarComponent);
     /**
      * @hidden
@@ -73,13 +84,18 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
      * @hidden
      */
     get ctx(): ToolbarContext;
+    /**
+     * @hidden
+     */
+    dateRangeText: DateRangeText;
     private popupRef;
     private subs;
-    constructor(popupService: PopupService, toolbarService: ToolbarService, localization: LocalizationService, cd: ChangeDetectorRef);
+    constructor(popupService: PopupService, toolbarService: ToolbarService, localization: LocalizationService, cd: ChangeDetectorRef, viewContext: ViewContextService);
     /**
      * @hidden
      */
     onBlur(): void;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -102,6 +118,8 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
      */
     todayClick(): boolean;
     protected closePopup(): void;
+    private setDateRangeText;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarNavigationComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarNavigationComponent, "[kendoSchedulerToolbarNavigation]", never, { "min": "min"; "max": "max"; }, {}, never, never>;
 }
+export {};