@progress/kendo-angular-scheduler 12.2.0-develop.2 → 12.2.0-develop.4

package/fesm2015/progress-kendo-angular-scheduler.mjs

@@ -7,7 +7,7 @@ import { Directive, Optional, Injectable, EventEmitter, Input, Inject, isDevMode
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i7 from '@progress/kendo-angular-common';
-import { hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, anyChanged, ResizeSensorComponent, EventsModule, guid, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule, guid } from '@progress/kendo-angular-common';
 import { isEqualDate, timezoneNames, ZonedDate, toLocalDate, getDate, Day, MS_PER_DAY, addDays, firstDayOfMonth, firstDayInWeek, addMonths, addWeeks } from '@progress/kendo-date-math';
 import { auditTime, buffer, filter, map, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684484766,
-    version: '12.2.0-develop.2',
+    publishDate: 1684491536,
+    version: '12.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2380,21 +2380,7 @@ class ToolbarNavigationComponent {
         this.localization = localization;
         this.cd = cd;
         this.viewContext = viewContext;
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineDisplayStyle = 'flex';
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineFlexFlowStyle = 'inherit';
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineGapStyle = 'inherit';
+        this.hostClass = true;
         /**
          * @hidden
          */
@@ -2536,10 +2522,10 @@ class ToolbarNavigationComponent {
     }
 }
 ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1$2.PopupService }, { token: ToolbarService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: [
+ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max" }, host: { properties: { "class.k-toolbar-group": "this.hostClass" } }, providers: [
         PopupService
     ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-scheduler-navigation k-button-group k-button-group-solid" role="group">
             <button kendoButton
                 (click)="todayClick()"
                 class="k-nav-today"
@@ -2611,7 +2597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupService
                     ],
                     template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-scheduler-navigation k-button-group k-button-group-solid" role="group">
             <button kendoButton
                 (click)="todayClick()"
                 class="k-nav-today"
@@ -2677,15 +2663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: ToolbarService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
-            }], inlineDisplayStyle: [{
+            }], hostClass: [{
                 type: HostBinding,
-                args: ['style.display']
-            }], inlineFlexFlowStyle: [{
-                type: HostBinding,
-                args: ['style.flex-flow']
-            }], inlineGapStyle: [{
-                type: HostBinding,
-                args: ['style.gap']
+                args: ['class.k-toolbar-group']
             }], min: [{
                 type: Input
             }], max: [{
@@ -2712,9 +2692,12 @@ class ToolbarViewSelectorComponent {
         this.service = service;
         this.localization = localization;
         /**
-         * @hidden
+         * Specifies the Toolbar width (in pixels) at which the responsive behavior should be enabled.
+         * The responsive behavior means that the ButtonGroup with the views will be replaced by a `select` element.
+         *
+         * @default 1024
          */
-        this.hostClasses = true;
+        this.responsiveBreakpoint = 1024;
     }
     /**
      * @hidden
@@ -2761,9 +2744,9 @@ class ToolbarViewSelectorComponent {
     }
 }
 ToolbarViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarViewSelectorComponent, deps: [{ token: ToolbarService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", host: { properties: { "class.k-scheduler-views-wrapper": "this.hostClasses" } }, ngImport: i0, template: `
+ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: { toolbarWidth: "toolbarWidth", responsiveBreakpoint: "responsiveBreakpoint" }, ngImport: i0, template: `
         <select
-            *ngIf="ctx.views?.length > 1"
+            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
@@ -2776,7 +2759,11 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 {{ view.title }}
             </option>
         </select>
-        <span class="k-scheduler-views k-button-group" role="group">
+        <span
+            *ngIf="toolbarWidth > responsiveBreakpoint"
+            class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
+            role="group"
+        >
             <button kendoButton
                 type="button"
                 *ngFor="let view of ctx.views"
@@ -2798,7 +2785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: '[kendoSchedulerToolbarViewSelector]',
                     template: `
         <select
-            *ngIf="ctx.views?.length > 1"
+            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
@@ -2811,7 +2798,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 {{ view.title }}
             </option>
         </select>
-        <span class="k-scheduler-views k-button-group" role="group">
+        <span
+            *ngIf="toolbarWidth > responsiveBreakpoint"
+            class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
+            role="group"
+        >
             <button kendoButton
                 type="button"
                 *ngFor="let view of ctx.views"
@@ -2827,20 +2818,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ToolbarService }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-scheduler-views-wrapper']
+        }], ctorParameters: function () { return [{ type: ToolbarService }, { type: i1$1.LocalizationService }]; }, propDecorators: { toolbarWidth: [{
+                type: Input
+            }], responsiveBreakpoint: [{
+                type: Input
             }] } });
 
 /**
  * @hidden
  */
 class ToolbarComponent {
-    constructor(service) {
+    constructor(service, element, zone) {
         this.service = service;
+        this.element = element;
+        this.zone = zone;
         this.hostClasses = true;
         this.toolbarRole = 'toolbar';
         this.navigate = new EventEmitter();
+        this.toolbarWidthChange = new EventEmitter();
         // The template context is the same as the service context,
         // but with resolved values instead of observables.
         this.templateContext = {};
@@ -2850,6 +2845,7 @@ class ToolbarComponent {
     ngOnInit() {
         this.subs.add(this.selectedDate.subscribe(date => this.templateContext.selectedDate = date));
         this.subs.add(this.dateRange.subscribe(dateRange => this.templateContext.dateRange = dateRange));
+        this.resizeHandler();
     }
     ngOnChanges() {
         this.service.context = {
@@ -2868,9 +2864,15 @@ class ToolbarComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    resizeHandler() {
+        const element = this.element.nativeElement;
+        this.zone.run(() => this.toolbarWidth = element.offsetWidth);
+        this.toolbarWidthChange.emit(this.toolbarWidth);
+    }
+    ;
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: ToolbarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate", toolbarWidthChange: "toolbarWidthChange" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template
             *ngIf="template; else defaultTemplate"
             [ngTemplateOutlet]="template.templateRef"
@@ -2881,9 +2883,11 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <ng-template #defaultTemplate>
             <div kendoSchedulerToolbarNavigation [min]="min" [max]="max"></div>
             <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector></div>
+            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max"] }, { type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+
+        <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max"] }, { type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2899,11 +2903,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template #defaultTemplate>
             <div kendoSchedulerToolbarNavigation [min]="min" [max]="max"></div>
             <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector></div>
+            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
         </ng-template>
+
+        <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ToolbarService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ToolbarService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-scheduler-toolbar']
             }, {
@@ -2925,12 +2931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], template: [{
                 type: Input
-            }], navigate: [{
-                type: Output
             }], min: [{
                 type: Input
             }], max: [{
                 type: Input
+            }], navigate: [{
+                type: Output
+            }], toolbarWidthChange: [{
+                type: Output
             }] } });
 
 /**
@@ -6117,6 +6125,10 @@ class SchedulerComponent {
          * Fires when the user clicks the **PDF export** command button.
          */
         this.pdfExport = new EventEmitter();
+        /**
+         * Fires when the Scheduler is resized horizontally.
+         */
+        this.schedulerResize = new EventEmitter();
         /**
          * @hidden
          */
@@ -6399,6 +6411,12 @@ class SchedulerComponent {
             this.viewContext.notifyAction(action);
         }
     }
+    /**
+     * @hidden
+     */
+    onToolbarWidthChange(width) {
+        this.schedulerResize.emit(width);
+    }
     /**
      * Creates a popup editor for the new event.
      *
@@ -6738,7 +6756,7 @@ class SchedulerComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: ViewContextService }, { token: ViewStateService }, { token: EditService }, { token: DialogsService }, { token: i1$4.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: DomEventsService }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
         EditService,
         DialogsService,
         DomEventsService,
@@ -7001,9 +7019,10 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [views]="$any(views)"
             [selectedView]="selectedView"
             [template]="toolbarTemplate"
-            (navigate)="onNavigationAction($event)"
             [min]="min"
             [max]="max"
+            (navigate)="onNavigationAction($event)"
+            (toolbarWidthChange)="onToolbarWidthChange($event)"
         ></kendo-scheduler-toolbar>
 
         <ng-container *ngTemplateOutlet="selectedView?.template">
@@ -7024,7 +7043,7 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 
         <div [loading]="loading" kendoSchedulerLoading>
         </div>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate"] }, { type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate", "toolbarWidthChange"] }, { type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
             args: [{
@@ -7294,9 +7313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [views]="$any(views)"
             [selectedView]="selectedView"
             [template]="toolbarTemplate"
-            (navigate)="onNavigationAction($event)"
             [min]="min"
             [max]="max"
+            (navigate)="onNavigationAction($event)"
+            (toolbarWidthChange)="onToolbarWidthChange($event)"
         ></kendo-scheduler-toolbar>
 
         <ng-container *ngTemplateOutlet="selectedView?.template">
@@ -7445,6 +7465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], pdfExport: [{
                 type: Output
+            }], schedulerResize: [{
+                type: Output
             }], editDialogTemplate: [{
                 type: ContentChild,
                 args: [EditDialogTemplateDirective, { static: false }]
@@ -7768,7 +7790,8 @@ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CalendarModule,
         PopupModule,
         EventsModule,
-        SharedModule], exports: [ToolbarComponent, ToolbarNavigationComponent,
+        SharedModule,
+        ResizeSensorModule], exports: [ToolbarComponent, ToolbarNavigationComponent,
         ToolbarTemplateDirective,
         ToolbarViewSelectorComponent] });
 ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarModule, imports: [[
@@ -7777,7 +7800,8 @@ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             CalendarModule,
             PopupModule,
             EventsModule,
-            SharedModule
+            SharedModule,
+            ResizeSensorModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
@@ -7788,7 +7812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CalendarModule,
                         PopupModule,
                         EventsModule,
-                        SharedModule
+                        SharedModule,
+                        ResizeSensorModule
                     ],
                     exports: [
                         ToolbarComponent,