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

package/editing-directives/editing-directive-base.d.ts

@@ -10,6 +10,7 @@ import { EditService } from './edit-service.interface';
 import { DialogsService } from '../editing/dialogs.service';
 import { EditMode } from '../types';
 import { AddEvent, EditEvent } from '../events';
+import { FocusService } from '../navigation';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -18,6 +19,7 @@ export declare abstract class EditingDirectiveBase implements OnInit, OnDestroy
     protected scheduler: SchedulerComponent;
     protected localDataChangesService: LocalDataChangesService;
     protected dialogsService: DialogsService;
+    private focusService;
     /**
      * Fires before the editing directive renders the **Add** dialog.
      */
@@ -36,7 +38,7 @@ export declare abstract class EditingDirectiveBase implements OnInit, OnDestroy
     protected defaultEditService: EditService<any>;
     protected userEditService: EditService<any>;
     protected abstract createModel(args: any): any;
-    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService);
+    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService, focusService: FocusService);
     /**
      * @hidden
      */

package/editing-directives/reactive-editing.directive.d.ts

@@ -8,6 +8,7 @@ import { EditingDirectiveBase } from './editing-directive-base';
 import { CreateFormGroupArgs } from '../types/create-form-group-args.interface';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { DialogsService } from '../editing/dialogs.service';
+import { FocusService } from "../navigation";
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations when the Scheduler
@@ -21,7 +22,7 @@ export declare class ReactiveEditingDirective extends EditingDirectiveBase {
      * The function that creates the `FormGroup` for the edited model.
      */
     createFormGroup: (args: CreateFormGroupArgs) => FormGroup;
-    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService);
+    constructor(scheduler: SchedulerComponent, localDataChangesService: LocalDataChangesService, dialogsService: DialogsService, focusService: FocusService);
     ngOnInit(): void;
     protected editHandler(args: any): void;
     protected saveHandler(args: any): void;

package/esm2015/editing-directives/editing-directive-base.js

@@ -12,14 +12,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "../scheduler.component";
 import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../editing/dialogs.service";
+import * as i4 from "../navigation";
 /**
  * @hidden
  */
 export 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.
          */
@@ -97,6 +99,7 @@ export class EditingDirectiveBase {
                 .subscribe((editMode) => {
                 if (editMode !== undefined) {
                     this.handleRemove(dataItem, editMode);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -105,6 +108,7 @@ export class EditingDirectiveBase {
                 .subscribe((shouldRemove) => {
                 if (shouldRemove) {
                     this.handleRemove(dataItem, 0 /* Event */);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -205,11 +209,11 @@ export 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: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }, { token: i4.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: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }]; }, propDecorators: { add: [{
+        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }, { type: i4.FocusService }]; }, propDecorators: { add: [{
                 type: Output
             }], edit: [{
                 type: Output

package/esm2015/editing-directives/reactive-editing.directive.js

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "../scheduler.component";
 import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../editing/dialogs.service";
+import * as i4 from "../navigation";
 /**
  * A directive which encapsulates the editing operations when the Scheduler
  * uses the [Reactive Angular Forms]({{ site.data.urls.angular['reactiveforms'] }}).
  */
 export 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;
@@ -91,14 +92,14 @@ export class ReactiveEditingDirective extends EditingDirectiveBase {
         return false;
     }
 }
-ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.SchedulerComponent }, { token: i2.LocalDataChangesService }, { token: i3.DialogsService }, { token: i4.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: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }]; }, propDecorators: { createFormGroup: [{
+        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i2.LocalDataChangesService }, { type: i3.DialogsService }, { type: i4.FocusService }]; }, propDecorators: { createFormGroup: [{
                 type: Input,
                 args: ['kendoSchedulerReactiveEditing']
             }] } });

package/esm2015/navigation/focus.service.js

@@ -3,17 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, Optional, EventEmitter } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../views/common/dom-events.service";
 /**
  * @hidden
  */
 export 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();
@@ -62,6 +63,24 @@ export 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);
     }
@@ -72,6 +91,7 @@ export class FocusService {
             if (item === next) {
                 const id = item.element.nativeElement.getAttribute('id');
                 this.ariaActiveDescendant.next(id);
+                this.lastActiveDescendantId = id;
             }
         });
         this.activeItem = next;
@@ -110,6 +130,10 @@ export 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;
         }
@@ -126,10 +150,10 @@ export 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: i1.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: i1.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
@@ -137,4 +161,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }, { type: i0.ElementRef, decorators: [{
                     type: Optional
-                }] }, { type: i1.DomEventsService }]; } });
+                }] }, { type: i1.DomEventsService }, { type: i0.NgZone }]; } });

package/esm2015/navigation/focusable.directive.js

@@ -44,6 +44,7 @@ export class FocusableDirective {
         this.element.nativeElement.focus();
     }
     toggleFocus(value) {
+        var _a;
         const focusedClass = 'k-selected';
         const element = this.element.nativeElement;
         if (value) {
@@ -52,7 +53,11 @@ export 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: i1.FocusService }], target: i0.ɵɵFactoryTarget.Directive });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660133212,
+    publishDate: 1660204372,
     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/views/month/month-view-renderer.component.js

@@ -276,7 +276,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">
@@ -404,7 +404,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">

package/fesm2015/kendo-angular-scheduler.js

@@ -12,8 +12,8 @@ import { isEqualDate, timezoneNames, ZonedDate, toLocalDate, getDate, Day, MS_PE
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i4 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';
+import { Subject, BehaviorSubject, fromEvent, Subscription, take, combineLatest, merge } from 'rxjs';
+import { auditTime, buffer, filter, map, debounceTime, take as take$1, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import * as i11$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@progress/kendo-angular-dialog';
@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660133212,
+    publishDate: 1660204372,
     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
@@ -1594,7 +1618,7 @@ class DialogsService {
                 this.focusService.focus();
                 return false;
             }
-            this.viewState.layoutEnd.pipe(take(1)).subscribe(() => this.focusService.focus());
+            this.viewState.layoutEnd.pipe(take$1(1)).subscribe(() => this.focusService.focus());
             const res = result;
             return res.value;
         }));
@@ -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 });
@@ -8272,7 +8301,7 @@ class AgendaViewInternalComponent {
             this.tasks.next(tasks);
         }));
         this.subs.add(this.viewContext.optionsChange.subscribe(this.optionsChange.bind(this)));
-        const onStable = () => this.zone.onStable.pipe(take(1));
+        const onStable = () => this.zone.onStable.pipe(take$1(1));
         this.subs.add(combineLatest(this.tasks, this.localization.changes).pipe(switchMap(onStable))
             .subscribe(this.updateContentHeight));
         this.subs.add(this.pdfService.createElement.subscribe(this.createPDFElement.bind(this)));
@@ -9637,7 +9666,7 @@ class BaseView {
         }
     }
     onStable() {
-        return this.zone.onStable.asObservable().pipe(take(1));
+        return this.zone.onStable.asObservable().pipe(take$1(1));
     }
     updateView() {
         this.slotService.invalidate();
@@ -10997,7 +11026,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 +11154,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">
@@ -15411,10 +15440,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 +15522,7 @@ class EditingDirectiveBase {
                 .subscribe((editMode) => {
                 if (editMode !== undefined) {
                     this.handleRemove(dataItem, editMode);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -15500,6 +15531,7 @@ class EditingDirectiveBase {
                 .subscribe((shouldRemove) => {
                 if (shouldRemove) {
                     this.handleRemove(dataItem, 0 /* Event */);
+                    this.focusService.focusFirst();
                 }
             });
         }
@@ -15600,11 +15632,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 +15649,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 +15724,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']
             }] } });
@@ -15860,7 +15892,7 @@ class ShortcutsDirective {
         }
     }
     focusWait() {
-        this.viewState.layoutEnd.pipe(take(1)).subscribe(() => this.focusService.focus());
+        this.viewState.layoutEnd.pipe(take$1(1)).subscribe(() => this.focusService.focus());
     }
 }
 ShortcutsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShortcutsDirective, deps: [{ token: SchedulerComponent }, { token: DomEventsService }, { token: FocusService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ViewStateService }, { token: DialogsService }], target: i0.ɵɵFactoryTarget.Directive });

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.202208110754",
   "description": "Kendo UI Scheduler Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",