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

package/common/dom-queries.d.ts

@@ -30,10 +30,6 @@ export declare const wheelDeltaY: (e: any) => any;
  * @hidden
  */
 export declare const preventLockedScroll: (el: any) => (event: any) => void;
-/**
- * @hidden
- */
-export declare function scrollbarWidth(): number;
 /**
  * @hidden
  */

package/esm2015/common/dom-queries.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { getScrollbarWidth } from '@progress/kendo-angular-common';
 // TODO: Move to @progress/kendo-common
 const toClassList = (classNames) => String(classNames).trim().split(' ');
 /**
@@ -72,27 +72,12 @@ export const preventLockedScroll = el => event => {
         event.preventDefault();
     }
 };
-let cachedScrollbarWidth = 0;
-/**
- * @hidden
- */
-export 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
  */
 export 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

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665574386,
+    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'
 };

package/esm2015/views/agenda/agenda-view-internal.component.js

@@ -7,7 +7,7 @@ import { anyChanged } from '@progress/kendo-angular-common';
 import { addDays, getDate } from '@progress/kendo-date-math';
 import { Subscription, BehaviorSubject, combineLatest, fromEvent, merge } from 'rxjs';
 import { switchMap, take, map } from 'rxjs/operators';
-import { scrollbarWidth, hasScrollbar, closestInScope, hasClasses } from '../../common/dom-queries';
+import { hasScrollbar, closestInScope, hasClasses } from '../../common/dom-queries';
 import { createResourceGroups, groupEvents } from './utils';
 import { ignoreContentChild, elementOffset } from '../utils';
 import * as i0 from "@angular/core";
@@ -134,9 +134,11 @@ export 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() {

package/esm2015/views/common/base-view.js

@@ -3,14 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ViewChild, Input, Directive } from '@angular/core';
-import { anyChanged, guid } from '@progress/kendo-angular-common';
+import { anyChanged, getScrollbarWidth, guid } from '@progress/kendo-angular-common';
 import { ZonedDate } from '@progress/kendo-date-math';
 import { Subscription, BehaviorSubject, combineLatest, fromEvent, merge } from 'rxjs';
 import { switchMap, take, map, filter, tap } from 'rxjs/operators';
-import { closestInScope, hasClasses, preventLockedScroll, scrollbarWidth, wheelDeltaY, hasScrollbar } from '../../common/dom-queries';
+import { closestInScope, hasClasses, preventLockedScroll, wheelDeltaY, hasScrollbar } from '../../common/dom-queries';
 import { groupResources, getField, setField, fromClick, fromDoubleClick } from '../../common/util';
 import { assignTasksResources, toPx, elementOffset, pointDistance, ignoreContentChild, resourceItemByValue, convertNgClassBindings, toUTCDateTime, dateWithTime, normaliseRangeStartAndEnd } from '../utils';
-import { BORDER_WIDTH } from '../constants';
 import { Draggable } from '@progress/kendo-draggable';
 import { slotDragEventName } from '../../types/slot-selection';
 import { SlotDragStartEvent } from '../../events/slot-drag-start-event';
@@ -21,13 +20,14 @@ import * as i3 from "@progress/kendo-angular-intl";
 import * as i4 from "../view-items/base-slot.service";
 import * as i5 from "../../pdf/pdf.service";
 import * as i6 from "@progress/kendo-angular-l10n";
+import * as i7 from "@progress/kendo-angular-common";
 const SCROLL_CHANGE = 15;
 const MIN_DISTANCE = 60;
 const SCROLL_INTERVAL = 50;
 const MIN_MOVE_DISTANCE = 10;
 /** @hidden */
 export 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;
@@ -38,6 +38,7 @@ export class BaseView {
         this.pdfService = pdfService;
         this.localization = localization;
         this.cdr = cdr;
+        this.scrollBarWidthService = scrollBarWidthService;
         /**
          * The non-all-day events.
          */
@@ -825,15 +826,16 @@ export 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;
         }
     }
@@ -960,11 +962,11 @@ export class BaseView {
         };
     }
 }
-BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseView, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.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: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.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: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.BaseSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { еventTemplate: [{
+        }], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.BaseSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { еventTemplate: [{
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input

package/esm2015/views/day-time/day-time-view.component.js

@@ -21,6 +21,7 @@ import * as i4 from "./day-time-slot.service";
 import * as i5 from "../../pdf/pdf.service";
 import * as i6 from "@progress/kendo-angular-l10n";
 import * as i7 from "../../navigation";
+import * as i8 from "@progress/kendo-angular-common";
 const getStartDate = date => getDate(date);
 const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
 const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberOfDays * count));
@@ -28,8 +29,8 @@ const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberO
  * @hidden
  */
 export 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;
@@ -334,12 +335,12 @@ export 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: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i7.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: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i7.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: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i7.FocusService }]; }, propDecorators: { timeSlotTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i7.FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { timeSlotTemplate: [{
                 type: Input
             }], dateHeaderTemplate: [{
                 type: Input

package/esm2015/views/month/month-view-renderer.component.js

@@ -21,20 +21,21 @@ import * as i4 from "./month-slot.service";
 import * as i5 from "../../pdf/pdf.service";
 import * as i6 from "@progress/kendo-angular-l10n";
 import * as i7 from "../../navigation";
-import * as i8 from "./month-view-item.component";
-import * as i9 from "../common/hint-container.component";
-import * as i10 from "../common/resize-hint.component";
-import * as i11 from "@angular/common";
-import * as i12 from "./month-slot.directive";
-import * as i13 from "../../navigation/focusable.directive";
-import * as i14 from "../common/resource-iterator.pipe";
-import * as i15 from "../common/repeat.pipe";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "./month-view-item.component";
+import * as i10 from "../common/hint-container.component";
+import * as i11 from "../common/resize-hint.component";
+import * as i12 from "@angular/common";
+import * as i13 from "./month-slot.directive";
+import * as i14 from "../../navigation/focusable.directive";
+import * as i15 from "../common/resource-iterator.pipe";
+import * as i16 from "../common/repeat.pipe";
 /**
  * @hidden
  */
 export 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 = [];
@@ -221,7 +222,7 @@ export class MonthViewRendererComponent extends BaseView {
         return weeks;
     }
 }
-MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.FocusService }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.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: `
@@ -343,7 +344,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i8.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i9.HintContainerComponent, selector: "kendo-hint-container" }, { type: i10.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: i12.MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i15.RepeatPipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: i9.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { type: i11.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: i13.MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i14.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i15.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i16.RepeatPipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -473,7 +474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.FocusService }]; }, propDecorators: { monthDaySlotTemplate: [{
+        }], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { monthDaySlotTemplate: [{
                 type: Input
             }], highlightOngoingEvents: [{
                 type: Input

package/esm2015/views/multi-day/multi-day-view-renderer.component.js

@@ -17,19 +17,20 @@ import * as i4 from "@progress/kendo-angular-intl";
 import * as i5 from "../day-time/day-time-slot.service";
 import * as i6 from "../../pdf/pdf.service";
 import * as i7 from "../../navigation";
-import * as i8 from "../day-time/day-time-view-item.component";
-import * as i9 from "../common/hint-container.component";
-import * as i10 from "../common/resize-hint.component";
-import * as i11 from "@angular/common";
-import * as i12 from "../day-time/event-slot.directive";
-import * as i13 from "../../navigation/focusable.directive";
-import * as i14 from "../common/resource-iterator.pipe";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "../day-time/day-time-view-item.component";
+import * as i10 from "../common/hint-container.component";
+import * as i11 from "../common/resize-hint.component";
+import * as i12 from "@angular/common";
+import * as i13 from "../day-time/event-slot.directive";
+import * as i14 from "../../navigation/focusable.directive";
+import * as i15 from "../common/resource-iterator.pipe";
 /**
  * @hidden
  */
 export 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' };
@@ -240,7 +241,7 @@ export class MultiDayViewRendererComponent extends DayTimeViewComponent {
         return 0;
     }
 }
-MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i6.PDFService }, { token: i7.FocusService }], target: i0.ɵɵFactoryTarget.Component });
+MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i6.PDFService }, { token: i7.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: `
@@ -252,7 +253,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>
@@ -494,7 +495,7 @@ MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i8.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i9.HintContainerComponent, selector: "kendo-hint-container" }, { type: i10.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: i12.DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }, { type: i12.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i4.DatePipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: i9.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { type: i11.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: i13.DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i14.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }, { type: i13.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": i15.ResourceIteratorPipe, "kendoDate": i4.DatePipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -512,7 +513,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>
@@ -756,7 +757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i6.PDFService }, { type: i7.FocusService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i6.PDFService }, { type: i7.FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { name: [{
                 type: Input
             }], slotFill: [{
                 type: Input

package/esm2015/views/timeline/timeline-multi-day-view.component.js

@@ -15,20 +15,21 @@ import * as i4 from "@progress/kendo-angular-intl";
 import * as i5 from "../day-time/day-time-slot.service";
 import * as i6 from "../../pdf/pdf.service";
 import * as i7 from "../../navigation";
-import * as i8 from "../day-time/day-time-view-item.component";
-import * as i9 from "../common/hint-container.component";
-import * as i10 from "../common/resize-hint.component";
-import * as i11 from "@angular/common";
-import * as i12 from "../day-time/event-slot.directive";
-import * as i13 from "../../navigation/focusable.directive";
-import * as i14 from "../common/resource-iterator.pipe";
-import * as i15 from "../common/repeat.pipe";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "../day-time/day-time-view-item.component";
+import * as i10 from "../common/hint-container.component";
+import * as i11 from "../common/resize-hint.component";
+import * as i12 from "@angular/common";
+import * as i13 from "../day-time/event-slot.directive";
+import * as i14 from "../../navigation/focusable.directive";
+import * as i15 from "../common/resource-iterator.pipe";
+import * as i16 from "../common/repeat.pipe";
 /**
  * @hidden
  */
 export 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';
@@ -116,7 +117,7 @@ export 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: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.PDFService }, { token: i7.FocusService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.PDFService }, { token: i7.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: `
@@ -124,7 +125,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>
@@ -278,7 +279,7 @@ TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i8.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i9.HintContainerComponent, selector: "kendo-hint-container" }, { type: i10.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: i12.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "repeat": i15.RepeatPipe, "kendoDate": i4.DatePipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: i9.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { type: i11.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: i13.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { type: i14.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i15.ResourceIteratorPipe, "repeat": i16.RepeatPipe, "kendoDate": i4.DatePipe, "async": i12.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -292,7 +293,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>
@@ -448,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.PDFService }, { type: i7.FocusService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.PDFService }, { type: i7.FocusService }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { name: [{
                 type: Input
             }], columnWidth: [{
                 type: Input