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

package/fesm2020/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: 1684487904,
+    version: '12.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2345,21 +2345,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
          */
@@ -2501,10 +2487,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"
@@ -2576,7 +2562,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"
@@ -2642,15 +2628,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: [{
@@ -2677,9 +2657,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
@@ -2726,9 +2709,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"
@@ -2741,7 +2724,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"
@@ -2763,7 +2750,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"
@@ -2776,7 +2763,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"
@@ -2792,20 +2783,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 = {};
@@ -2815,6 +2810,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 = {
@@ -2833,9 +2829,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"
@@ -2846,9 +2848,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: [{
@@ -2864,11 +2868,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']
             }, {
@@ -2890,12 +2896,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
             }] } });
 
 /**
@@ -6080,6 +6088,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
          */
@@ -6362,6 +6374,12 @@ class SchedulerComponent {
             this.viewContext.notifyAction(action);
         }
     }
+    /**
+     * @hidden
+     */
+    onToolbarWidthChange(width) {
+        this.schedulerResize.emit(width);
+    }
     /**
      * Creates a popup editor for the new event.
      *
@@ -6701,7 +6719,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,
@@ -6964,9 +6982,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">
@@ -6987,7 +7006,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: [{
@@ -7257,9 +7276,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">
@@ -7408,6 +7428,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 }]
@@ -7731,7 +7753,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: [[
@@ -7740,7 +7763,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,
@@ -7751,7 +7775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CalendarModule,
                         PopupModule,
                         EventsModule,
-                        SharedModule
+                        SharedModule,
+                        ResizeSensorModule
                     ],
                     exports: [
                         ToolbarComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scheduler",
-  "version": "12.2.0-develop.2",
+  "version": "12.2.0-develop.3",
   "description": "Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,21 +25,21 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "12.2.0-develop.2",
-    "@progress/kendo-angular-common": "12.2.0-develop.2",
-    "@progress/kendo-angular-dateinputs": "12.2.0-develop.2",
-    "@progress/kendo-angular-dialog": "12.2.0-develop.2",
-    "@progress/kendo-angular-dropdowns": "12.2.0-develop.2",
-    "@progress/kendo-angular-icons": "12.2.0-develop.2",
-    "@progress/kendo-angular-inputs": "12.2.0-develop.2",
-    "@progress/kendo-angular-intl": "12.2.0-develop.2",
-    "@progress/kendo-angular-l10n": "12.2.0-develop.2",
-    "@progress/kendo-angular-popup": "12.2.0-develop.2",
+    "@progress/kendo-angular-buttons": "12.2.0-develop.3",
+    "@progress/kendo-angular-common": "12.2.0-develop.3",
+    "@progress/kendo-angular-dateinputs": "12.2.0-develop.3",
+    "@progress/kendo-angular-dialog": "12.2.0-develop.3",
+    "@progress/kendo-angular-dropdowns": "12.2.0-develop.3",
+    "@progress/kendo-angular-icons": "12.2.0-develop.3",
+    "@progress/kendo-angular-inputs": "12.2.0-develop.3",
+    "@progress/kendo-angular-intl": "12.2.0-develop.3",
+    "@progress/kendo-angular-l10n": "12.2.0-develop.3",
+    "@progress/kendo-angular-popup": "12.2.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.2.0-develop.2",
+    "@progress/kendo-angular-schematics": "12.2.0-develop.3",
     "@progress/kendo-date-math": "^1.3.2",
     "@progress/kendo-draggable": "^3.0.2",
     "@progress/kendo-file-saver": "^1.0.7",

package/scheduler.component.d.ts

@@ -441,6 +441,10 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * Fires when the user clicks the **PDF export** command button.
      */
     pdfExport: EventEmitter<PDFExportEvent>;
+    /**
+     * Fires when the Scheduler is resized horizontally.
+     */
+    schedulerResize: EventEmitter<number>;
     /**
      * @hidden
      */
@@ -556,6 +560,10 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * @hidden
      */
     onNavigationAction(action: NavigationAction): boolean;
+    /**
+     * @hidden
+     */
+    onToolbarWidthChange(width: number): void;
     /**
      * Creates a popup editor for the new event.
      *
@@ -680,5 +688,5 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
     private intlChange;
     private attachElementEventHandlers;
     static ɵfac: i0.ɵɵFactoryDeclaration<SchedulerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SchedulerComponent, "kendo-scheduler", never, { "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"; }, { "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"; }, ["editDialogTemplate", "toolbarTemplate", "views", "allDayEventTemplate", "eventTemplate", "timeSlotTemplate", "minorTimeHeaderTemplate", "majorTimeHeaderTemplate", "monthDaySlotTemplate", "multiWeekDaySlotTemplate", "dateHeaderTemplate", "allDaySlotTemplate", "groupHeaderTemplate", "agendaDateTemplate", "agendaTimeTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SchedulerComponent, "kendo-scheduler", never, { "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"; }, { "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"; }, ["editDialogTemplate", "toolbarTemplate", "views", "allDayEventTemplate", "eventTemplate", "timeSlotTemplate", "minorTimeHeaderTemplate", "majorTimeHeaderTemplate", "monthDaySlotTemplate", "multiWeekDaySlotTemplate", "dateHeaderTemplate", "allDaySlotTemplate", "groupHeaderTemplate", "agendaDateTemplate", "agendaTimeTemplate"], never>;
 }

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'SchedulerModule', package: 'scheduler', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '12.2.0-develop.2',
+            '@progress/kendo-angular-treeview': '12.2.0-develop.3',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '12.2.0-develop.2',
+            '@progress/kendo-angular-dialog': '12.2.0-develop.3',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^1.0.0'
         } });

package/toolbar/navigation.component.d.ts

@@ -42,21 +42,7 @@ export declare class ToolbarNavigationComponent implements OnDestroy {
     private cd;
     private viewContext;
     set calendar(calendar: CalendarComponent);
-    /**
-     * @hidden
-     * TODO: Drop in next MAJOR version
-     */
-    inlineDisplayStyle: string;
-    /**
-     * @hidden
-     * TODO: Drop in next MAJOR version
-     */
-    inlineFlexFlowStyle: string;
-    /**
-     * @hidden
-     * TODO: Drop in next MAJOR version
-     */
-    inlineGapStyle: string;
+    hostClass: boolean;
     /**
      * @hidden
      */

package/toolbar/toolbar.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { DateRange } from '../types';
 import { NavigationAction } from '../types';
@@ -15,6 +15,8 @@ import * as i0 from "@angular/core";
  */
 export declare class ToolbarComponent {
     private service;
+    private element;
+    private zone;
     hostClasses: boolean;
     toolbarRole: string;
     selectedView: SchedulerView;
@@ -22,15 +24,18 @@ export declare class ToolbarComponent {
     dateRange: Observable<DateRange>;
     selectedDate: Observable<Date>;
     template: ToolbarTemplateDirective;
-    navigate: EventEmitter<NavigationAction>;
     min: Date;
     max: Date;
+    navigate: EventEmitter<NavigationAction>;
+    toolbarWidthChange: EventEmitter<number>;
     templateContext: any;
+    toolbarWidth: number;
     private subs;
-    constructor(service: ToolbarService);
+    constructor(service: ToolbarService, element: ElementRef, zone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
+    resizeHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "kendo-scheduler-toolbar", never, { "selectedView": "selectedView"; "views": "views"; "dateRange": "dateRange"; "selectedDate": "selectedDate"; "template": "template"; "min": "min"; "max": "max"; }, { "navigate": "navigate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "kendo-scheduler-toolbar", never, { "selectedView": "selectedView"; "views": "views"; "dateRange": "dateRange"; "selectedDate": "selectedDate"; "template": "template"; "min": "min"; "max": "max"; }, { "navigate": "navigate"; "toolbarWidthChange": "toolbarWidthChange"; }, never, never>;
 }

package/toolbar/toolbar.module.d.ts

@@ -25,6 +25,6 @@ export declare const publicDirectives: (typeof ToolbarTemplateDirective | typeof
  */
 export declare class ToolbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ToolbarModule, [typeof i1.ToolbarComponent, typeof i2.ToolbarNavigationComponent, typeof i3.ToolbarTemplateDirective, typeof i4.ToolbarViewSelectorComponent], [typeof i5.CommonModule, typeof i6.ButtonsModule, typeof i7.CalendarModule, typeof i8.PopupModule, typeof i9.EventsModule, typeof i10.SharedModule], [typeof i1.ToolbarComponent, typeof i2.ToolbarNavigationComponent, typeof i3.ToolbarTemplateDirective, typeof i4.ToolbarViewSelectorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ToolbarModule, [typeof i1.ToolbarComponent, typeof i2.ToolbarNavigationComponent, typeof i3.ToolbarTemplateDirective, typeof i4.ToolbarViewSelectorComponent], [typeof i5.CommonModule, typeof i6.ButtonsModule, typeof i7.CalendarModule, typeof i8.PopupModule, typeof i9.EventsModule, typeof i10.SharedModule, typeof i9.ResizeSensorModule], [typeof i1.ToolbarComponent, typeof i2.ToolbarNavigationComponent, typeof i3.ToolbarTemplateDirective, typeof i4.ToolbarViewSelectorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ToolbarModule>;
 }

package/toolbar/view-selector.component.d.ts

@@ -27,9 +27,17 @@ export declare class ToolbarViewSelectorComponent implements OnDestroy {
     private service;
     private localization;
     /**
-     * @hidden
+     * Specifies the current width of the Toolbar (in pixels) so the responsive calculations can be made.
+     * The ([resizeScheduler]({% slug api_scheduler_schedulercomponent %}#toc-resizescheduler)) event can be used in order to obtain the Toolbar width.
+     */
+    toolbarWidth: number;
+    /**
+     * 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
      */
-    hostClasses: boolean;
+    responsiveBreakpoint: number;
     /**
      * @hidden
      */
@@ -54,5 +62,5 @@ export declare class ToolbarViewSelectorComponent implements OnDestroy {
      */
     isSelected(view: SchedulerView): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarViewSelectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarViewSelectorComponent, "[kendoSchedulerToolbarViewSelector]", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarViewSelectorComponent, "[kendoSchedulerToolbarViewSelector]", never, { "toolbarWidth": "toolbarWidth"; "responsiveBreakpoint": "responsiveBreakpoint"; }, {}, never, never>;
 }