@progress/kendo-angular-scheduler 4.3.4 → 4.3.5-dev.202210191536

package/fesm2015/kendo-angular-scheduler.js

@@ -6,15 +6,15 @@ import * as i0 from '@angular/core';
 import { Directive, Optional, Injectable, EventEmitter, Input, Inject, isDevMode, Component, HostBinding, ChangeDetectionStrategy, ViewChild, Output, forwardRef, ViewChildren, NgZone, ViewContainerRef, ViewEncapsulation, ContentChild, ContentChildren, NgModule, LOCALE_ID, ElementRef, TemplateRef, Pipe, HostListener } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
-import * as i12$1 from '@progress/kendo-angular-common';
-import { hasObservers, isDocumentAvailable, isChanged, Keys, anyChanged, ResizeSensorComponent, EventsModule, guid, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i8 from '@progress/kendo-angular-common';
+import { hasObservers, getScrollbarWidth, isChanged, Keys, anyChanged, isDocumentAvailable, ResizeSensorComponent, EventsModule, guid, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { isEqualDate, timezoneNames, ZonedDate, toLocalDate, getDate, Day, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek } from '@progress/kendo-date-math';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i5 from '@progress/kendo-angular-dateinputs';
 import { PreventableEvent as PreventableEvent$1, CalendarModule, DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { Subject, BehaviorSubject, fromEvent, Subscription, combineLatest, merge } from 'rxjs';
 import { auditTime, buffer, filter, map, debounceTime, take, switchMap, tap, distinctUntilChanged } from 'rxjs/operators';
-import * as i11$1 from '@angular/forms';
+import * as i11 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@progress/kendo-angular-dialog';
 import { DialogCloseResult, DialogModule } from '@progress/kendo-angular-dialog';
@@ -24,12 +24,12 @@ import * as i1$1 from '@progress/kendo-angular-popup';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import * as i3 from '@progress/kendo-angular-buttons';
 import { Button, ButtonsModule } from '@progress/kendo-angular-buttons';
-import * as i11 from '@angular/common';
+import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
-import * as i12 from '@progress/kendo-angular-inputs';
+import * as i12$1 from '@progress/kendo-angular-inputs';
 import { CheckBoxModule, TextAreaModule, NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import { orderBy, groupBy } from '@progress/kendo-data-query';
 import { Draggable } from '@progress/kendo-draggable';
@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1664273491,
+    publishDate: 1666193700,
     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'
 };
@@ -1919,27 +1919,12 @@ const preventLockedScroll = el => event => {
         event.preventDefault();
     }
 };
-let cachedScrollbarWidth = 0;
-/**
- * @hidden
- */
-function scrollbarWidth() {
-    if (!cachedScrollbarWidth && isDocumentAvailable()) {
-        const div = document.createElement("div");
-        div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
-        div.innerHTML = " ";
-        document.body.appendChild(div);
-        cachedScrollbarWidth = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return cachedScrollbarWidth;
-}
 /**
  * @hidden
  */
 function hasScrollbar(element, type) {
     const sizeField = type === 'vertical' ? 'Height' : 'Width';
-    return element[`scroll${sizeField}`] > element[`client${sizeField}`];
+    return (element[`scroll${sizeField}`] > element[`client${sizeField}`]) && (getScrollbarWidth() > 0);
 }
 /**
  * @hidden
@@ -2508,7 +2493,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i5.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i5.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i12.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2682,7 +2667,7 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </span>
             </button>
         </span>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2772,7 +2757,7 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             <span class="k-spacer"></span>
             <div kendoSchedulerToolbarViewSelector></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"] }] });
+    `, isInline: true, components: [{ type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max"] }, { type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2914,7 +2899,7 @@ MultipleResourceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 {{ getField(dataItem, resource.textField) }}
             </ng-template>
         </kendo-multiselect>
-    `, isInline: true, components: [{ type: i1$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$2.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
+    `, isInline: true, components: [{ type: i1$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$2.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultipleResourceEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2985,7 +2970,7 @@ SingleResourceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 {{ getField(dataItem, resource.textField) }}
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SingleResourceEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3102,7 +3087,7 @@ SchedulerDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         [(value)]='date'
         (valueChange)='onValueChange($event)'
     ></kendo-timepicker>
-    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3568,7 +3553,7 @@ RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
                 </kendo-buttongroup>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3688,7 +3673,7 @@ RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
                 <span>{{ textForFrequency() }}</span>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
+    `, isInline: true, components: [{ type: i12$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceIntervalEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3794,7 +3779,7 @@ RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVers
                 </kendo-buttongroup>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -4199,7 +4184,7 @@ RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVe
                 </li>
             </ul>
         </div>
-    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i12$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -4536,7 +4521,7 @@ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </li>
             </ul>
         </div>
-    `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
+    `, isInline: true, components: [{ type: i12$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEndRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -4941,7 +4926,7 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [userNumericOptions]="endAfterOptions"
             [userDatePickerOptions]="endOnOptions">
         </kendo-recurrence-end-rule-editor>
-    `, isInline: true, components: [{ type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -5443,7 +5428,7 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -6894,7 +6879,7 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 
         <div [loading]="loading" kendoSchedulerLoading>
         </div>
-    `, isInline: true, styles: [".k-scheduler.k-focus { box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, .12); }"], 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: i12$1.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, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".k-scheduler.k-focus { box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, .12); }"], 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: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
             args: [{
@@ -7940,7 +7925,7 @@ AgendaHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </tbody>
             </table>
         </div>
-    `, isInline: true, directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -7997,7 +7982,7 @@ AgendaHeaderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         <ng-container *ngIf="agendaDateTemplate" [ngTemplateOutlet]="agendaDateTemplate"
             [ngTemplateOutletContext]="{ date: itemDate }">
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kendoDate": i1$3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kendoDate": i1$3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaHeaderItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8078,7 +8063,7 @@ AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <span class="k-icon k-i-x"></span>
             </span>
         </div>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaTaskItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8214,7 +8199,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </ng-container>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }] });
+    `, isInline: true, components: [{ type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaListComponent, decorators: [{
             type: Component,
             args: [{
@@ -8394,9 +8379,11 @@ class AgendaViewInternalComponent {
         height -= this.headerWrap ? headerElement.offsetHeight : 0;
         this.renderer.setStyle(content, 'height', `${height}px`);
         const rtl = this.localization.rtl;
-        const padding = hasScrollbar(content, 'vertical') ? scrollbarWidth() : 0;
-        this.renderer.setStyle(headerElement, !rtl ? 'padding-right' : 'padding-left', `${padding}px`);
-        this.renderer.setStyle(headerElement, rtl ? 'padding-right' : 'padding-left', '0px');
+        // Need to explicitly set 'padding-inline-xxx' to 0px when the Scheduler has no height set
+        if (!hasScrollbar(content, 'vertical')) {
+            this.renderer.setStyle(headerElement, !rtl ? 'padding-inline-end' : 'padding-inline-start', '0px');
+        }
+        this.renderer.removeStyle(headerElement, rtl ? 'padding-inline-end' : 'padding-inline-start');
         this.viewState.notifyLayoutEnd();
     }
     ngOnDestroy() {
@@ -8581,7 +8568,7 @@ AgendaViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: AgendaHeaderComponent, selector: "[kendoSchedulerAgendaHeader]", inputs: ["resources"] }, { type: AgendaListComponent, selector: "[kendoSchedulerAgendaList]", inputs: ["tasks", "eventTemplate", "slotClass", "eventClass", "eventStyles", "agendaTimeTemplate", "agendaDateTemplate", "editable"] }], pipes: { "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: AgendaHeaderComponent, selector: "[kendoSchedulerAgendaHeader]", inputs: ["resources"] }, { type: AgendaListComponent, selector: "[kendoSchedulerAgendaList]", inputs: ["tasks", "eventTemplate", "slotClass", "eventClass", "eventStyles", "agendaTimeTemplate", "agendaDateTemplate", "editable"] }], pipes: { "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaViewInternalComponent, decorators: [{
             type: Component,
             args: [{
@@ -9383,7 +9370,7 @@ MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <span class="k-resize-handle k-resize-w"></span>
             <span class="k-resize-handle k-resize-e"></span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -9488,7 +9475,7 @@ const SCROLL_INTERVAL = 50;
 const MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 class BaseView {
-    constructor(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, cdr) {
+    constructor(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, cdr, scrollBarWidthService) {
         this.viewContext = viewContext;
         this.viewState = viewState;
         this.intl = intl;
@@ -9499,6 +9486,7 @@ class BaseView {
         this.pdfService = pdfService;
         this.localization = localization;
         this.cdr = cdr;
+        this.scrollBarWidthService = scrollBarWidthService;
         /**
          * The non-all-day events.
          */
@@ -10286,15 +10274,16 @@ class BaseView {
         if (this.timesTable) {
             this.renderer.setStyle(this.timesTable.nativeElement, 'height', `${this.contentTable.nativeElement.offsetHeight}px`);
         }
-        if (this.header) {
-            this.renderer.setStyle(this.header.nativeElement, !this.localization.rtl ? 'padding-right' : 'padding-left', `${hasScrollbar(this.content.nativeElement, 'vertical') ? scrollbarWidth() - BORDER_WIDTH : 0}px`);
-            this.renderer.setStyle(this.header.nativeElement, this.localization.rtl ? 'padding-right' : 'padding-left', '0px');
+        // Need to explicitly set 'padding-inline-xxx' to 0px when the Scheduler has no height set
+        if (!hasScrollbar(this.content.nativeElement, 'vertical')) {
+            this.renderer.setStyle(this.header.nativeElement, !this.localization.rtl ? 'padding-inline-end' : 'padding-inline-start', '0px');
         }
+        this.renderer.removeStyle(this.header.nativeElement, this.localization.rtl ? 'padding-inline-end' : 'padding-inline-start');
         if (this.times) {
             const times = this.times.nativeElement;
             this.timesHeader.nativeElement.style.width = `${times.offsetWidth}px`;
             const contentHeight = this.contentHeight === 'auto' ? this.content.nativeElement.offsetHeight : this.contentHeight;
-            this.renderer.setStyle(times, 'height', `${contentHeight - (hasScrollbar(this.content.nativeElement, 'horizontal') ? scrollbarWidth() : 0)}px`);
+            this.renderer.setStyle(times, 'height', `${contentHeight - (hasScrollbar(this.content.nativeElement, 'horizontal') ? getScrollbarWidth() : 0)}px`);
             times.scrollTop = this.content.nativeElement.scrollTop;
         }
     }
@@ -10421,11 +10410,11 @@ class BaseView {
         };
     }
 }
-BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseView, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseView, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Directive });
 BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseView, inputs: { еventTemplate: "\u0435ventTemplate", groupHeaderTemplate: "groupHeaderTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", eventHeight: "eventHeight", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", weekStart: "weekStart" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentTable", first: true, predicate: ["contentTable"], descendants: true }, { propertyName: "times", first: true, predicate: ["times"], descendants: true }, { propertyName: "timesHeader", first: true, predicate: ["timesHeader"], descendants: true }, { propertyName: "timesTable", first: true, predicate: ["timesTable"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "hintContainer", first: true, predicate: ["hintContainer"], descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseView, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: BaseSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { еventTemplate: [{
+        }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: BaseSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { еventTemplate: [{
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input
@@ -10485,7 +10474,7 @@ HintContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 HintContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HintContainerComponent, selector: "kendo-hint-container", queries: [{ propertyName: "hintTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
         <ng-container [ngTemplateOutlet]="hintTemplate">
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HintContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -10533,7 +10522,7 @@ ResizeHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <div class="k-label-top" *ngIf="hint.first">{{ start | kendoDate : format }}</div>
             <div class="k-label-bottom" *ngIf="hint.last">{{ end | kendoDate : format }}</div>
         </div>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kendoDate": i1$3.DatePipe } });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kendoDate": i1$3.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -10807,8 +10796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class MonthViewRendererComponent extends BaseView {
-    constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector, focusService) {
-        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
+    constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector, focusService, scrollBarWidthService) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
         this.focusService = focusService;
         this.resizeHintFormat = { skeleton: 'Md' };
         this.weeks = [];
@@ -10995,7 +10984,7 @@ class MonthViewRendererComponent extends BaseView {
         return weeks;
     }
 }
-MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PDFService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PDFService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: FocusService }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [
         MonthSlotService
     ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
@@ -11117,7 +11106,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: MonthViewItemComponent, selector: "[monthViewItem]" }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$3.DatePipe, "repeat": RepeatPipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: MonthViewItemComponent, selector: "[monthViewItem]" }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$3.DatePipe, "repeat": RepeatPipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -11247,7 +11236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PDFService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: FocusService }]; }, propDecorators: { monthDaySlotTemplate: [{
+        }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PDFService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { monthDaySlotTemplate: [{
                 type: Input
             }], highlightOngoingEvents: [{
                 type: Input
@@ -11376,7 +11365,7 @@ ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <span class="k-button-text">{{ item.text }}</span>
             </button>
         </span>
-    `, isInline: true, directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12404,7 +12393,7 @@ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             <span class="k-resize-handle k-resize-w"></span>
             <span class="k-resize-handle k-resize-e"></span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12466,8 +12455,8 @@ const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberO
  * @hidden
  */
 class DayTimeViewComponent extends BaseView {
-    constructor(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService) {
-        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
+    constructor(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService, scrollBarWidthService) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
         this.changeDetector = changeDetector;
         this.focusService = focusService;
         this.numberOfDays = 1;
@@ -12772,12 +12761,12 @@ class DayTimeViewComponent extends BaseView {
         return fields;
     }
 }
-DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i2.LocalizationService }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
+DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i2.LocalizationService }, { token: FocusService }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "eventElements", predicate: DayTimeViewItemComponent, descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kendo-day-time-view', template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i2.LocalizationService }, { type: FocusService }]; }, propDecorators: { timeSlotTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: i2.LocalizationService }, { type: FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { timeSlotTemplate: [{
                 type: Input
             }], dateHeaderTemplate: [{
                 type: Input
@@ -12943,8 +12932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class MultiDayViewRendererComponent extends DayTimeViewComponent {
-    constructor(localization, viewContext, viewState, intl, slotService, zone, renderer, element, changeDetector, pdfService, focusService) {
-        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService);
+    constructor(localization, viewContext, viewState, intl, slotService, zone, renderer, element, changeDetector, pdfService, focusService, scrollbarWidthService) {
+        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService, scrollbarWidthService);
         this.name = 'day';
         this.dateFormat = { skeleton: 'MEd' };
         this.allDayResizeHintFormat = { skeleton: 'Md' };
@@ -13155,7 +13144,7 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
         return 0;
     }
 }
-MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i2.LocalizationService }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
+MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i2.LocalizationService }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: FocusService }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: { name: "name", slotFill: "slotFill", allDaySlotTemplate: "allDaySlotTemplate", allDayEventTemplate: "allDayEventTemplate", minorTimeHeaderTemplate: "minorTimeHeaderTemplate", majorTimeHeaderTemplate: "majorTimeHeaderTemplate" }, providers: [
         DayTimeSlotService
     ], viewQueries: [{ propertyName: "headerHintContainer", first: true, predicate: ["headerHintContainer"], descendants: true }, { propertyName: "dayCells", predicate: ["allDayCell"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
@@ -13167,7 +13156,7 @@ MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                             <th></th>
                         </tr>
                         <tr>
-                            <th>​</th>
+                            <th [style.height]="'auto'">​</th>
                         </tr>
                         <tr *ngIf="!verticalResources.length">
                             <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
@@ -13409,7 +13398,7 @@ MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }, { type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$3.DatePipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }, { type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$3.DatePipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -13427,7 +13416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             <th></th>
                         </tr>
                         <tr>
-                            <th>​</th>
+                            <th [style.height]="'auto'">​</th>
                         </tr>
                         <tr *ngIf="!verticalResources.length">
                             <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
@@ -13671,7 +13660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: FocusService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { name: [{
                 type: Input
             }], slotFill: [{
                 type: Input
@@ -14412,8 +14401,8 @@ const createTasks = (periodStart, periodEnd, items) => {
  * @hidden
  */
 class TimelineMultiDayViewComponent extends DayTimeViewComponent {
-    constructor(localization, changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, focusService) {
-        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService);
+    constructor(localization, changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, focusService, scrollBarWidthService) {
+        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, focusService, scrollBarWidthService);
         this.name = 'timeline';
         this.columnWidth = 100;
         this.viewName = 'timeline';
@@ -14501,7 +14490,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
         return this.headerWrap.nativeElement.querySelector('tr:last-child').offsetTop;
     }
 }
-TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$3.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: FocusService }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
         DayTimeSlotService
     ], viewQueries: [{ propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
@@ -14509,7 +14498,7 @@ TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             <div class="k-scheduler-pane">
                 <div class="k-scheduler-times" #timesHeader>
                     <table class="k-scheduler-table" aria-hidden="true">
-                        <tr><th></th></tr>
+                        <tr><th [style.height]="'auto'"></th></tr>
                         <tr><th class="k-slot-cell"></th></tr>
                         <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
                             <th></th>
@@ -14663,7 +14652,7 @@ TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "repeat": RepeatPipe, "kendoDate": i1$3.DatePipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "repeat": RepeatPipe, "kendoDate": i1$3.DatePipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -14677,7 +14666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-scheduler-pane">
                 <div class="k-scheduler-times" #timesHeader>
                     <table class="k-scheduler-table" aria-hidden="true">
-                        <tr><th></th></tr>
+                        <tr><th [style.height]="'auto'"></th></tr>
                         <tr><th class="k-slot-cell"></th></tr>
                         <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
                             <th></th>
@@ -14833,7 +14822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: FocusService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$3.IntlService }, { type: DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: PDFService }, { type: FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { name: [{
                 type: Input
             }], columnWidth: [{
                 type: Input