@progress/kendo-angular-gantt 2.1.0 → 11.0.0-develop.100

package/{fesm2015/kendo-angular-gantt.js → fesm2020/progress-kendo-angular-gantt.mjs}

@@ -1,29 +1,29 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, InjectionToken, EventEmitter, Directive, HostBinding, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, isDevMode, NgModule } from '@angular/core';
+import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, isDevMode, NgModule } from '@angular/core';
 import * as i11 from '@progress/kendo-angular-treelist';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
+import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
 import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i8 from '@progress/kendo-angular-common';
 import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
 import { map, distinctUntilChanged, take, expand, reduce, switchMap, filter } from 'rxjs/operators';
-import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
 import { getter, touchEnabled } from '@progress/kendo-common';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { orderBy } from '@progress/kendo-data-query';
 import * as i1 from '@progress/kendo-angular-intl';
+import { orderBy } from '@progress/kendo-data-query';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i8$1 from '@angular/forms';
 import { FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i5$2 from '@progress/kendo-angular-layout';
+import * as i5$1 from '@progress/kendo-angular-layout';
 import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
 import * as i4$2 from '@progress/kendo-angular-dialog';
 import { DialogModule } from '@progress/kendo-angular-dialog';
@@ -35,7 +35,7 @@ import * as i6$1 from '@progress/kendo-angular-dateinputs';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import * as i4$1 from '@progress/kendo-angular-grid';
 import { GridModule } from '@progress/kendo-angular-grid';
-import * as i5$1 from '@progress/kendo-angular-dropdowns';
+import * as i6$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i3 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
@@ -47,7 +47,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1669798501,
+    publishDate: 1673469430,
     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'
 };
@@ -117,6 +117,101 @@ const getIndexFromViewDigitKeyCode = (keyCode) => {
     }
 };
 
+/**
+ * @hidden
+ */
+class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => {
+            this.scroll(args);
+        }));
+    }
+    registerElement(el, sourceType) {
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
+                    scrollTop,
+                    scrollLeft,
+                    sourceType
+                })));
+                const comparisonFn = sourceType === 'timeline' ?
+                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
+                    (x, y) => (x.scrollTop === y.scrollTop);
+                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe((event) => this.changes.next(event)));
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    }
+    syncScrollTop(sourceType, targetType) {
+        const source = this.elements.find(element => element.sourceType === sourceType);
+        const target = this.elements.find(element => element.sourceType === targetType);
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    }
+    resetTimelineScrollLeft() {
+        const source = this.elements.find(element => element.sourceType === 'timeline');
+        source.element.scrollLeft = 0;
+    }
+    scroll({ scrollTop, scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            if (sourceType === 'timeline') {
+                const header = this.elements.find(element => element.sourceType === 'header').element;
+                header.scrollLeft = scrollLeft;
+                if (!this.syncingTimeline) {
+                    this.syncingTreeList = true;
+                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
+                    treelist.scrollTop = scrollTop;
+                }
+                this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!this.syncingTreeList) {
+                    this.syncingTimeline = true;
+                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
+                    timeline.scrollTop = scrollTop;
+                }
+                this.syncingTreeList = false;
+            }
+        });
+    }
+}
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/**
+ * @hidden
+ */
+const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
+    toId: 'toId',
+    fromId: 'fromId',
+    id: 'id',
+    type: 'type'
+});
+
+/**
+ * @hidden
+ */
+const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
+    id: 'id',
+    start: 'start',
+    end: 'end',
+    title: 'title',
+    completionRatio: 'completionRatio',
+    children: 'children'
+});
+
 /**
  * The dependency type when two tasks are connected.
  *
@@ -216,7 +311,7 @@ const getTotalDaysInMonth = (date) => {
  * by excluding the months of the dates themselves.
  */
 const getTotalMonthsInBetween = (start, end) => {
-    let diff = end.getMonth() - start.getMonth() + (12 * (end.getFullYear() - start.getFullYear()));
+    const diff = end.getMonth() - start.getMonth() + (12 * (end.getFullYear() - start.getFullYear()));
     return diff <= 1 ? 0 : diff - 1;
 };
 /**
@@ -439,115 +534,20 @@ const elementFromPoint = (clientX, clientY) => {
     return document.elementFromPoint(clientX, clientY);
 };
 
-/**
- * @hidden
- */
-class ScrollSyncService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new Subject();
-        this.elements = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.changes.subscribe(args => {
-            this.scroll(args);
-        }));
-    }
-    registerElement(el, sourceType) {
-        this.elements.push({ element: el, sourceType });
-        if (sourceType === "timeline" || sourceType === "treelist") {
-            this.ngZone.runOutsideAngular(() => {
-                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
-                    scrollTop,
-                    scrollLeft,
-                    sourceType
-                })));
-                const comparisonFn = sourceType === 'timeline' ?
-                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
-                    (x, y) => (x.scrollTop === y.scrollTop);
-                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
-                    .subscribe((event) => this.changes.next(event)));
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.elements = null;
-    }
-    syncScrollTop(sourceType, targetType) {
-        const source = this.elements.find(element => element.sourceType === sourceType);
-        const target = this.elements.find(element => element.sourceType === targetType);
-        // Need to wait for the splitter pane's content to be rendered
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
-    }
-    resetTimelineScrollLeft() {
-        const source = this.elements.find(element => element.sourceType === 'timeline');
-        source.element.scrollLeft = 0;
-    }
-    scroll({ scrollTop, scrollLeft, sourceType }) {
-        this.ngZone.runOutsideAngular(() => {
-            if (sourceType === 'timeline') {
-                const header = this.elements.find(element => element.sourceType === 'header').element;
-                header.scrollLeft = scrollLeft;
-                if (!this.syncingTimeline) {
-                    this.syncingTreeList = true;
-                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
-                    treelist.scrollTop = scrollTop;
-                }
-                this.syncingTimeline = false;
-            }
-            if (sourceType === 'treelist') {
-                if (!this.syncingTreeList) {
-                    this.syncingTimeline = true;
-                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
-                    timeline.scrollTop = scrollTop;
-                }
-                this.syncingTreeList = false;
-            }
-        });
-    }
-}
-ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScrollSyncService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScrollSyncService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
-/**
- * @hidden
- */
-const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
-    toId: 'toId',
-    fromId: 'fromId',
-    id: 'id',
-    type: 'type'
-});
-
-/**
- * @hidden
- */
-const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
-    id: 'id',
-    start: 'start',
-    end: 'end',
-    title: 'title',
-    completionRatio: 'completionRatio',
-    children: 'children'
-});
-
 /**
  * @hidden
  */
 class MappingService {
     constructor() {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
+        this._taskFields = { ...DEFAULT_TASK_MODEL_FIELDS };
+        this._dependencyFields = { ...DEFAULT_DEPENDENCY_MODEL_FIELDS };
     }
     /**
      * Gets or sets the model fields for the task data items.
      * Uses the default values for fields which are not specified.
      */
     set taskFields(fields) {
-        this._taskFields = Object.assign(Object.assign({}, DEFAULT_TASK_MODEL_FIELDS), fields);
+        this._taskFields = { ...DEFAULT_TASK_MODEL_FIELDS, ...fields };
     }
     get taskFields() {
         return this._taskFields;
@@ -557,7 +557,7 @@ class MappingService {
      * Uses the default values for fields which are not specified.
      */
     set dependencyFields(fields) {
-        this._dependencyFields = Object.assign(Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS), fields);
+        this._dependencyFields = { ...DEFAULT_DEPENDENCY_MODEL_FIELDS, ...fields };
     }
     get dependencyFields() {
         return this._dependencyFields;
@@ -583,9 +583,9 @@ class MappingService {
         return getter(this.dependencyFields[field])(dataItem);
     }
 }
-MappingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MappingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MappingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MappingService, decorators: [{
+MappingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MappingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MappingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MappingService, decorators: [{
             type: Injectable
         }] });
 
@@ -646,9 +646,9 @@ class DependencyDomService {
         this.notifier.next(this.dependencyDomArgs);
     }
 }
-DependencyDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependencyDomService, deps: [{ token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-DependencyDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependencyDomService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependencyDomService, decorators: [{
+DependencyDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependencyDomService, deps: [{ token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+DependencyDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependencyDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependencyDomService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MappingService }]; } });
 
@@ -656,33 +656,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * @hidden
  */
 class GanttHeaderTableBodyComponent {
+    constructor() {
+        this.tbodyClass = true;
+    }
 }
-GanttHeaderTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttHeaderTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttHeaderTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: { groupSlots: "groupSlots", slots: "slots" }, ngImport: i0, template: `
-        <tr>
-            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header">{{ item.text }}</td>
+GanttHeaderTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttHeaderTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttHeaderTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: { groupSlots: "groupSlots", slots: "slots" }, host: { properties: { "class.k-table-tbody": "this.tbodyClass" } }, ngImport: i0, template: `
+        <tr class="k-table-row">
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
         </tr>
 
-        <tr>
-            <td *ngFor="let item of slots" class="k-header" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
+        <tr class="k-table-row">
+            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
         </tr>
     `, isInline: true, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttHeaderTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttHeaderTableBodyComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoGanttHeaderTableBody]',
                     template: `
-        <tr>
-            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header">{{ item.text }}</td>
+        <tr class="k-table-row">
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
         </tr>
 
-        <tr>
-            <td *ngFor="let item of slots" class="k-header" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
+        <tr class="k-table-row">
+            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
         </tr>
     `
                 }]
-        }], propDecorators: { groupSlots: [{
+        }], propDecorators: { tbodyClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tbody']
+            }], groupSlots: [{
                 type: Input
             }], slots: [{
                 type: Input
@@ -691,40 +697,318 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 /**
  * @hidden
  */
-const TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');
-
-/**
- * @hidden
- */
-const DAY_FORMAT = 'E d/MM';
-/**
- * @hidden
- */
-const HOUR_FORMAT = 'HH:mm aa';
-/**
- * @hidden
- */
-const MONTH_FORMAT = 'MMM';
-/**
- * @hidden
- */
-class TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        this.intlService = intlService;
-        this.mapper = mapper;
-        this._viewStart = 0;
-    }
-    get viewStart() {
-        return this._viewStart;
+class NavigationService {
+    constructor(zone, renderer, scrollSyncService) {
+        this.zone = zone;
+        this.renderer = renderer;
+        this.scrollSyncService = scrollSyncService;
+        /**
+         * Notifies when the tasks' focused and interactive (tabindex) state has changed.
+         *
+         * All tasks are rendered with tabindex="-1".
+         * When one is clicked, or when some navigation key keyboard key is pressed, it should be focused, assigned the focus class, and its tabindex updated to 0.
+         * All other tasks should get -1 tabindex and have the focus class removed from them.
+         */
+        this.taskStatusChanges = new Subject();
+        /**
+         * Keeps track of whether the Timeline part is focused.
+         * Used when the index of the task elements change (tasks are changed, pushed to, spliced from, etc.)
+         * and their status should be updated accordingly.
+         */
+        this.isTimelineFocused = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.treeListLastActive = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.timelineLastActive = false;
+        this._enabled = false;
+        this._activeTimelineIndex = 0;
+        this._activeTreeListCell = { rowIndex: 0, colIndex: 0 };
     }
     /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {Object} - An object containing the range start and end dates
+     * Specifies whether navigation is enabled.
      */
-    getRange(tasks) {
-        if (!tasks || !tasks.length) {
-            return { start: new Date(), end: new Date() };
+    get enabled() {
+        return this._enabled;
+    }
+    /**
+     * Used to retrieve read-only data about the currently active task.
+     */
+    get activeTask() {
+        return {
+            activeIndex: this.activeTimelineIndex,
+            isFocused: this.isTimelineFocused
+        };
+    }
+    /**
+     * Persists the expected Timeline focused task index.
+     * When the cells in the TreeList are navigated through, the expected Timeline focus target should also change,
+     * in order to allow tabbing from the TreeList to the same row in the Timeline.
+     */
+    set activeTimelineIndex(index) {
+        this._activeTimelineIndex = index;
+    }
+    get activeTimelineIndex() {
+        const firstAvailableIndex = 0;
+        const lastAvailableIndex = this.metadata.treeList.view.data.length - 1;
+        return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
+    }
+    /**
+     * Persists the expected TreeList focused cell coords.
+     * When the tasks in the Timeline are navigated through, the expected TreeList focus target should also change,
+     * in order to allow back-tabbing from the Timeline to the same row in the TreeList.
+     */
+    set activeTreeListCell(cell) {
+        this._activeTreeListCell = cell;
+    }
+    get activeTreeListCell() {
+        const firstAvailableIndex = 0;
+        const lastAvailableRowIndex = this.treeListHeaderRowsCount + this.metadata.treeList.view.data.length - 1;
+        const rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
+        const lastAvailableColIndex = this.metadata.columns.length;
+        const colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
+        return { rowIndex, colIndex };
+    }
+    /**
+     * The TreeList row index takes into account the header and filter rows.
+     * Used when translating Timeline task indices to TreeList row indices.
+     */
+    get treeListHeaderRowsCount() {
+        // captures nested group header rows + filter row if we start supporting it at some point
+        return this.metadata.treeListElement.querySelectorAll('.k-grid-header tr').length;
+    }
+    initialize(metadata) {
+        // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
+        this._enabled = true;
+        this.metadata = metadata;
+        // TODO: fix in the splitter package and remove
+        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
+        const splitbar = this.metadata.host.querySelector('.k-splitbar');
+        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
+            splitbar.after(splitbar.previousElementSibling);
+        }
+        this.zone.runOutsideAngular(() => {
+            this.eventListenerDisposers = [
+                this.renderer.listen(this.metadata.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
+                this.renderer.listen(this.metadata.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
+                this.renderer.listen(this.metadata.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
+                this.renderer.listen(this.metadata.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
+                this.renderer.listen(this.metadata.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
+            ];
+        });
+    }
+    ngOnDestroy() {
+        if (isPresent(this.eventListenerDisposers)) {
+            this.eventListenerDisposers.forEach(removeListener => removeListener());
+            this.eventListenerDisposers = null;
+        }
+        this.metadata = null;
+    }
+    /**
+     * Focuses either the last active TreeList cell, or the last active Timeline task,
+     * dependening on which of the two last held focus.
+     *
+     * Focuses the first TreeList cell by default.
+     */
+    focusLastActiveItem() {
+        if (this.metadata.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
+            this.focusCell(0, 0);
+        }
+        else if (this.treeListLastActive) {
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.metadata.treeList.focusCell(rowIndex, colIndex);
+        }
+        else if (this.timelineLastActive) {
+            this.focusTask(this.activeTimelineIndex);
+        }
+    }
+    /**
+     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     */
+    focusCell(rowIndex, colIndex) {
+        this.activeTreeListCell = { rowIndex, colIndex };
+        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
+        this.metadata.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+    }
+    /**
+     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     */
+    focusTask(index) {
+        this.activeTimelineIndex = index;
+        this.isTimelineFocused = true;
+        this.activeTreeListCell = {
+            rowIndex: index + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+        this.notifyTaskStatusChange();
+    }
+    /**
+     * Updates the focus target flags and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusIn({ target }) {
+        this.treeListLastActive = false;
+        this.timelineLastActive = true;
+        this.isTimelineFocused = true;
+        if (isTask(target, this.metadata.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusOut({ relatedTarget }) {
+        this.isTimelineFocused = this.metadata.timelineElement.contains(relatedTarget);
+        // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
+        if (!isTask(relatedTarget, this.metadata.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * Updates the focus target flags and corrects the TreeList focus target if needed.
+     * As the TreeList will keep its last focused cell with tabindex="0",
+     * this methods forcefully focuses the correct cell,
+     * when navigating in the Timeline has updated the expected TreeList focus target.
+     */
+    handleTreeListFocusIn(event) {
+        this.treeListLastActive = true;
+        this.timelineLastActive = false;
+        // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
+        if (this.metadata.treeListElement.contains(event.relatedTarget)) {
+            const { colIndex, rowIndex } = this.metadata.treeList.activeCell;
+            this.activeTreeListCell = { colIndex, rowIndex };
+        }
+        else {
+            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.metadata.treeList.focusCell(rowIndex, colIndex); // activates the target cell even if it has tabindex="-1"
+        }
+        this.activeTimelineIndex = this.metadata.treeList.activeCell.dataRowIndex;
+        this.notifyTaskStatusChange();
+        if (this.metadata.treeList.activeCell.dataRowIndex >= 0) {
+            this.scrollHorizontallyToTask();
+            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
+        }
+    }
+    updateActiveTimeLineIndex(index) {
+        this.activeTimelineIndex = index;
+    }
+    updateActiveTreeListCell() {
+        this.activeTreeListCell = {
+            rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+    }
+    /**
+     * Fires the `taskStatusChanges` event with active and focused status retrieved from
+     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     */
+    notifyTaskStatusChange() {
+        this.taskStatusChanges.next(this.activeTask);
+    }
+    /**
+     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     */
+    scrollHorizontallyToTask() {
+        const index = this.activeTimelineIndex;
+        const task = this.metadata.timelineElement.querySelectorAll('.k-task-wrap').item(index);
+        if (!isPresent(task)) {
+            return;
+        }
+        // scroll horizontally to the item if less than 200px from the beginning of its content are visible
+        const targetVisibleWidth = 200;
+        const isScrollBeforeTask = (this.metadata.timelineElement.clientWidth + this.metadata.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
+        const isScrollAfterTask = this.metadata.timelineElement.scrollLeft > task.offsetLeft;
+        if (isScrollBeforeTask || isScrollAfterTask) {
+            this.metadata.timelineElement.scrollLeft = task.offsetLeft;
+        }
+    }
+    /**
+     * Filters for task mousedown in the Timeline.
+     */
+    handleTimelineMousedown({ target }) {
+        if (isTask(target, this.metadata.host) && !isClearButton(target, this.metadata.host)) {
+            const taskIndex = getClosestTaskIndex(target, this.metadata.host);
+            this.focusTask(taskIndex);
+        }
+    }
+    /**
+     * Focus the TreeList on TreeList mousedown.
+     * A nasty hack to trick `handleTreeListFocusIn` into regarding the previous focus target as again the TreeList.
+     * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
+     */
+    focusTreeList() {
+        this.metadata.treeList.focus();
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }]; } });
+
+/**
+ * @hidden
+ */
+const TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');
+
+/**
+ * @hidden
+ */
+class OptionChangesService {
+    constructor() {
+        this.viewChanges = new EventEmitter();
+        this.columnChanges = new EventEmitter();
+    }
+    notifyColumnChanges() {
+        this.columnChanges.emit();
+    }
+    notifyViewChanges() {
+        this.viewChanges.emit();
+    }
+}
+OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OptionChangesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OptionChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+const DAY_FORMAT = 'E d/MM';
+/**
+ * @hidden
+ */
+const HOUR_FORMAT = 'HH:mm aa';
+/**
+ * @hidden
+ */
+const MONTH_FORMAT = 'MMM';
+/**
+ * @hidden
+ */
+class TimelineBaseViewService {
+    constructor(intlService, mapper) {
+        this.intlService = intlService;
+        this.mapper = mapper;
+        this._viewStart = 0;
+    }
+    get viewStart() {
+        return this._viewStart;
+    }
+    /**
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Object} - An object containing the range start and end dates
+     */
+    getRange(tasks) {
+        if (!tasks || !tasks.length) {
+            return { start: new Date(), end: new Date() };
         }
         const startResult = orderBy(tasks, [{ field: this.mapper.taskFields.start, dir: 'asc' }]);
         const endResult = orderBy(tasks, [{ field: this.mapper.taskFields.end, dir: 'desc' }]);
@@ -746,10 +1030,10 @@ class TimelineBaseViewService {
      */
     getHours(start, end) {
         const slots = [];
-        let workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
-        let workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
+        const workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
+        const workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
         // TODO: retrieve from option?
-        let hourSpan = 1;
+        const hourSpan = 1;
         let startDate = new Date(start);
         const endDate = new Date(end);
         while (startDate < endDate) {
@@ -777,13 +1061,13 @@ class TimelineBaseViewService {
     getDays(start, end) {
         const slots = [];
         let startDay = new Date(start);
-        let endDay = new Date(end);
+        const endDay = new Date(end);
         while (startDay <= endDay) {
             // Get the days with cleared time values (except for start and end day)
             const nextDay = getDate(addDays(startDay, 1));
             const isWorking = isWorkDay(startDay, this.options.workWeekStart, this.options.workWeekEnd);
             // Need to get the end date with correct hours (important for day view)
-            let slotEnd = endDay < nextDay ? endDay : nextDay;
+            const slotEnd = endDay < nextDay ? endDay : nextDay;
             slots.push({
                 start: startDay,
                 end: slotEnd,
@@ -800,7 +1084,7 @@ class TimelineBaseViewService {
         const weekStart = this.intlService.firstDay();
         const slots = [];
         let startDay = new Date(start);
-        let endDay = new Date(end);
+        const endDay = new Date(end);
         while (startDay <= endDay) {
             const lastWeekDay = lastDayOfWeek(startDay, weekStart);
             const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
@@ -824,10 +1108,10 @@ class TimelineBaseViewService {
     getMonths(start, end, isMainViewType) {
         const slots = [];
         let startDay = new Date(start);
-        let endDay = new Date(end);
+        const endDay = new Date(end);
         while (startDay < endDay) {
             const endMonth = lastDayOfMonth(startDay);
-            let slotEnd = endDay < endMonth ? endDay : endMonth;
+            const slotEnd = endDay < endMonth ? endDay : endMonth;
             const daySlots = this.getDays(startDay, slotEnd);
             const weekSlots = this.getWeeks(startDay, slotEnd);
             const span = isMainViewType ? daySlots.length : weekSlots.length;
@@ -849,157 +1133,45 @@ class TimelineBaseViewService {
     getYears(start, end) {
         const slots = [];
         let startDay = new Date(start);
-        let endDay = new Date(end);
+        const endDay = new Date(end);
         while (startDay < endDay) {
             const yearEnd = lastDayOfMonth(lastMonthOfYear(startDay));
             const slotEnd = endDay < yearEnd ? endDay : yearEnd;
-            const monthSlots = this.getMonths(startDay, slotEnd);
-            const span = monthSlots.length;
-            if (span > 0) {
-                slots.push({
-                    start: monthSlots[0].start,
-                    end: monthSlots[span - 1].end,
-                    span: span,
-                    text: slotEnd.getFullYear(),
-                    slotWidth: this.options.slotWidth
-                });
-            }
-            startDay = addDays(slotEnd, 1);
-        }
-        return slots;
-    }
-}
-
-/**
- * @hidden
- */
-class TimelineDayViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
-    }
-    /**
-     * Gets a date an hour before the first task start with minutes, seconds, milliseconds cleared.
-     */
-    getStartOffset(rangeStart) {
-        return setTime(rangeStart, rangeStart.getHours() - 1);
-    }
-    /**
-     * Gets a date an hour after the last task end with minutes, seconds, milliseconds cleared.
-     */
-    getEndOffset(rangeEnd) {
-        return setTime(rangeEnd, rangeEnd.getHours() + 1);
-    }
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {number}
-     */
-    getTableWidth(tasks) {
-        const timeSlots = this.getSlots(tasks)[1];
-        const slotWidth = this.options.slotWidth;
-        return Math.round(timeSlots.length * slotWidth);
-    }
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {Array<Object>} - A collection containing the day and hours slots
-     * Used to render the number of columns and the header
-     */
-    getSlots(tasks) {
-        // will return the header rows slots
-        let slots = [];
-        let { start, end } = this.getRange(tasks);
-        const daySlots = this.getDays(start, end);
-        const hourSlots = [];
-        for (let i = 0; i < daySlots.length; i++) {
-            const daySlot = daySlots[i];
-            const hours = this.getHours(daySlot.start, daySlot.end);
-            daySlot.span = hours.length;
-            hourSlots.push(...hours);
-        }
-        slots.push(daySlots, hourSlots);
-        return slots;
-    }
-}
-TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineDayViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDayViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDayViewService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
-
-/**
- * @hidden
- */
-class TimelineMonthViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
-    }
-    /**
-     * Gets a week before the first week in which a task starts.
-     */
-    getStartOffset(rangeStart) {
-        const weekStart = this.intlService.firstDay();
-        const firstDay = firstDayInWeek(getDate(rangeStart), weekStart);
-        return addWeeks(getDate(firstDay), -1);
-    }
-    /**
-     * Gets a week after the last week in which a task ends.
-     */
-    getEndOffset(rangeEnd) {
-        const weekStart = this.intlService.firstDay();
-        const lastDay = addDays(firstDayInWeek(getDate(rangeEnd), weekStart), 6);
-        return addWeeks(getDate(lastDay), 1);
-    }
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {number}
-     */
-    getTableWidth(tasks) {
-        const timeSlots = this.getSlots(tasks)[1];
-        const slotWidth = this.options.slotWidth;
-        return Math.round(timeSlots.length * slotWidth);
-    }
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {Array<Object>} - A collection containing the months and weeks slots
-     * Used to render the number of columns and the header
-     */
-    getSlots(tasks) {
-        // will return the header rows slots
-        let slots = [];
-        let { start, end } = this.getRange(tasks);
-        const months = this.getMonths(start, end, true);
-        const weeks = this.getWeeks(start, end);
-        slots.push(months, weeks);
+            const monthSlots = this.getMonths(startDay, slotEnd);
+            const span = monthSlots.length;
+            if (span > 0) {
+                slots.push({
+                    start: monthSlots[0].start,
+                    end: monthSlots[span - 1].end,
+                    span: span,
+                    text: slotEnd.getFullYear(),
+                    slotWidth: this.options.slotWidth
+                });
+            }
+            startDay = addDays(slotEnd, 1);
+        }
         return slots;
     }
 }
-TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineMonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineMonthViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineMonthViewService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
 
 /**
  * @hidden
  */
-class TimelineWeekViewService extends TimelineBaseViewService {
+class TimelineDayViewService extends TimelineBaseViewService {
     constructor(intlService, mapper) {
         super(intlService, mapper);
     }
     /**
-     * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
+     * Gets a date an hour before the first task start with minutes, seconds, milliseconds cleared.
      */
     getStartOffset(rangeStart) {
-        return addDays(getDate(rangeStart), -1);
+        return setTime(rangeStart, rangeStart.getHours() - 1);
     }
     /**
-     * Gets a date a day after the last task start with hours, minutes, seconds, milliseconds cleared.
+     * Gets a date an hour after the last task end with minutes, seconds, milliseconds cleared.
      */
     getEndOffset(rangeEnd) {
-        return addDays(getDate(rangeEnd), 1);
+        return setTime(rangeEnd, rangeEnd.getHours() + 1);
     }
     /**
      *
@@ -1019,371 +1191,205 @@ class TimelineWeekViewService extends TimelineBaseViewService {
      */
     getSlots(tasks) {
         // will return the header rows slots
-        let slots = [];
-        let { start, end } = this.getRange(tasks);
-        const weeks = this.getWeeks(start, end);
-        const days = this.getDays(start, end);
-        slots.push(weeks, days);
+        const slots = [];
+        const { start, end } = this.getRange(tasks);
+        const daySlots = this.getDays(start, end);
+        const hourSlots = [];
+        for (let i = 0; i < daySlots.length; i++) {
+            const daySlot = daySlots[i];
+            const hours = this.getHours(daySlot.start, daySlot.end);
+            daySlot.span = hours.length;
+            hourSlots.push(...hours);
+        }
+        slots.push(daySlots, hourSlots);
         return slots;
     }
 }
-TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineWeekViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineWeekViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineWeekViewService, decorators: [{
+TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineDayViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineDayViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineDayViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
 
 /**
  * @hidden
  */
-class TimeLineYearViewService extends TimelineBaseViewService {
+class TimelineMonthViewService extends TimelineBaseViewService {
     constructor(intlService, mapper) {
         super(intlService, mapper);
     }
-    getTableWidth(tasks) {
-        const timeSlots = this.getSlots(tasks)[1];
-        const slotWidth = this.options.slotWidth;
-        return Math.round(timeSlots.length * slotWidth);
-    }
+    /**
+     * Gets a week before the first week in which a task starts.
+     */
     getStartOffset(rangeStart) {
-        const monthStart = firstDayOfMonth(rangeStart);
-        return addMonths(getDate(monthStart), -1);
+        const weekStart = this.intlService.firstDay();
+        const firstDay = firstDayInWeek(getDate(rangeStart), weekStart);
+        return addWeeks(getDate(firstDay), -1);
     }
     /**
-     *
+     * Gets a week after the last week in which a task ends.
      */
     getEndOffset(rangeEnd) {
-        const monthEnd = lastDayOfMonth(rangeEnd);
-        return addMonths(getDate(monthEnd), 1);
+        const weekStart = this.intlService.firstDay();
+        const lastDay = addDays(firstDayInWeek(getDate(rangeEnd), weekStart), 6);
+        return addWeeks(getDate(lastDay), 1);
     }
     /**
      *
      * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {Array<Object>} - A collection containing the years and months slots
+     * @returns {number}
+     */
+    getTableWidth(tasks) {
+        const timeSlots = this.getSlots(tasks)[1];
+        const slotWidth = this.options.slotWidth;
+        return Math.round(timeSlots.length * slotWidth);
+    }
+    /**
      *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Array<Object>} - A collection containing the months and weeks slots
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
         // will return the header rows slots
-        let slots = [];
-        let { start, end } = this.getRange(tasks);
-        const years = this.getYears(start, end);
-        const months = this.getMonths(start, end);
-        slots.push(years, months);
+        const slots = [];
+        const { start, end } = this.getRange(tasks);
+        const months = this.getMonths(start, end, true);
+        const weeks = this.getWeeks(start, end);
+        slots.push(months, weeks);
         return slots;
     }
 }
-TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-TimeLineYearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeLineYearViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeLineYearViewService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
-
-/**
- * @hidden
- */
-const services = {
-    day: TimelineDayViewService,
-    week: TimelineWeekViewService,
-    month: TimelineMonthViewService,
-    year: TimeLineYearViewService
-};
-/**
- * @hidden
- */
-class TimelineViewService {
-    constructor(injector) {
-        this.injector = injector;
-        this.viewChange = new EventEmitter();
-    }
-    service(view) {
-        const serviceType = services[view];
-        return serviceType ? this.injector.get(serviceType) : null;
-    }
-}
-TimelineViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineViewService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-/**
- * @hidden
- */
-class OptionChangesService {
-    constructor() {
-        this.viewChanges = new EventEmitter();
-        this.columnChanges = new EventEmitter();
-    }
-    notifyColumnChanges() {
-        this.columnChanges.emit();
-    }
-    notifyViewChanges() {
-        this.viewChanges.emit();
-    }
-}
-OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptionChangesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptionChangesService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-class NavigationService {
-    constructor(zone, renderer, scrollSyncService) {
-        this.zone = zone;
-        this.renderer = renderer;
-        this.scrollSyncService = scrollSyncService;
-        /**
-         * Notifies when the tasks' focused and interactive (tabindex) state has changed.
-         *
-         * All tasks are rendered with tabindex="-1".
-         * When one is clicked, or when some navigation key keyboard key is pressed, it should be focused, assigned the focus class, and its tabindex updated to 0.
-         * All other tasks should get -1 tabindex and have the focus class removed from them.
-         */
-        this.taskStatusChanges = new Subject();
-        /**
-         * Keeps track of whether the Timeline part is focused.
-         * Used when the index of the task elements change (tasks are changed, pushed to, spliced from, etc.)
-         * and their status should be updated accordingly.
-         */
-        this.isTimelineFocused = false;
-        /**
-         * Keeps track of which part has last been focused.
-         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
-         */
-        this.treeListLastActive = false;
-        /**
-         * Keeps track of which part has last been focused.
-         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
-         */
-        this.timelineLastActive = false;
-        this._enabled = false;
-        this._activeTimelineIndex = 0;
-        this._activeTreeListCell = { rowIndex: 0, colIndex: 0 };
-    }
-    /**
-     * Specifies whether navigation is enabled.
-     */
-    get enabled() {
-        return this._enabled;
-    }
-    /**
-     * Used to retrieve read-only data about the currently active task.
-     */
-    get activeTask() {
-        return {
-            activeIndex: this.activeTimelineIndex,
-            isFocused: this.isTimelineFocused
-        };
-    }
-    /**
-     * Persists the expected Timeline focused task index.
-     * When the cells in the TreeList are navigated through, the expected Timeline focus target should also change,
-     * in order to allow tabbing from the TreeList to the same row in the Timeline.
-     */
-    set activeTimelineIndex(index) {
-        this._activeTimelineIndex = index;
-    }
-    get activeTimelineIndex() {
-        const firstAvailableIndex = 0;
-        const lastAvailableIndex = this.metadata.treeList.view.data.length - 1;
-        return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
-    }
-    /**
-     * Persists the expected TreeList focused cell coords.
-     * When the tasks in the Timeline are navigated through, the expected TreeList focus target should also change,
-     * in order to allow back-tabbing from the Timeline to the same row in the TreeList.
-     */
-    set activeTreeListCell(cell) {
-        this._activeTreeListCell = cell;
-    }
-    get activeTreeListCell() {
-        const firstAvailableIndex = 0;
-        const lastAvailableRowIndex = this.treeListHeaderRowsCount + this.metadata.treeList.view.data.length - 1;
-        const rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
-        const lastAvailableColIndex = this.metadata.columns.length;
-        const colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
-        return { rowIndex, colIndex };
-    }
-    /**
-     * The TreeList row index takes into account the header and filter rows.
-     * Used when translating Timeline task indices to TreeList row indices.
-     */
-    get treeListHeaderRowsCount() {
-        // captures nested group header rows + filter row if we start supporting it at some point
-        return this.metadata.treeListElement.querySelectorAll('.k-grid-header tr').length;
-    }
-    initialize(metadata) {
-        // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
-        this._enabled = true;
-        this.metadata = metadata;
-        // TODO: fix in the splitter package and remove
-        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
-        const splitbar = this.metadata.host.querySelector('.k-splitbar');
-        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
-            splitbar.after(splitbar.previousElementSibling);
-        }
-        this.zone.runOutsideAngular(() => {
-            this.eventListenerDisposers = [
-                this.renderer.listen(this.metadata.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
-                this.renderer.listen(this.metadata.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
-                this.renderer.listen(this.metadata.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
-                this.renderer.listen(this.metadata.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
-                this.renderer.listen(this.metadata.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
-            ];
-        });
-    }
-    ngOnDestroy() {
-        if (isPresent(this.eventListenerDisposers)) {
-            this.eventListenerDisposers.forEach(removeListener => removeListener());
-            this.eventListenerDisposers = null;
-        }
-        this.metadata = null;
-    }
-    /**
-     * Focuses either the last active TreeList cell, or the last active Timeline task,
-     * dependening on which of the two last held focus.
-     *
-     * Focuses the first TreeList cell by default.
-     */
-    focusLastActiveItem() {
-        if (this.metadata.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
-            this.focusCell(0, 0);
-        }
-        else if (this.treeListLastActive) {
-            const { rowIndex, colIndex } = this.activeTreeListCell;
-            this.metadata.treeList.focusCell(rowIndex, colIndex);
-        }
-        else if (this.timelineLastActive) {
-            this.focusTask(this.activeTimelineIndex);
-        }
+TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineMonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineMonthViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineMonthViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+
+/**
+ * @hidden
+ */
+class TimelineWeekViewService extends TimelineBaseViewService {
+    constructor(intlService, mapper) {
+        super(intlService, mapper);
     }
     /**
-     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
      */
-    focusCell(rowIndex, colIndex) {
-        this.activeTreeListCell = { rowIndex, colIndex };
-        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
-        this.metadata.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+    getStartOffset(rangeStart) {
+        return addDays(getDate(rangeStart), -1);
     }
     /**
-     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     * Gets a date a day after the last task start with hours, minutes, seconds, milliseconds cleared.
      */
-    focusTask(index) {
-        this.activeTimelineIndex = index;
-        this.isTimelineFocused = true;
-        this.activeTreeListCell = {
-            rowIndex: index + this.treeListHeaderRowsCount,
-            colIndex: this.activeTreeListCell.colIndex
-        };
-        this.notifyTaskStatusChange();
+    getEndOffset(rangeEnd) {
+        return addDays(getDate(rangeEnd), 1);
     }
     /**
-     * Updates the focus target flags and notifies the active task to update its focused state.
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {number}
      */
-    handleTimelineFocusIn({ target }) {
-        this.treeListLastActive = false;
-        this.timelineLastActive = true;
-        this.isTimelineFocused = true;
-        if (isTask(target, this.metadata.timelineElement)) {
-            this.notifyTaskStatusChange();
-        }
+    getTableWidth(tasks) {
+        const timeSlots = this.getSlots(tasks)[1];
+        const slotWidth = this.options.slotWidth;
+        return Math.round(timeSlots.length * slotWidth);
     }
     /**
-     * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Array<Object>} - A collection containing the day and hours slots
+     * Used to render the number of columns and the header
      */
-    handleTimelineFocusOut({ relatedTarget }) {
-        this.isTimelineFocused = this.metadata.timelineElement.contains(relatedTarget);
-        // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
-        if (!isTask(relatedTarget, this.metadata.timelineElement)) {
-            this.notifyTaskStatusChange();
-        }
+    getSlots(tasks) {
+        // will return the header rows slots
+        const slots = [];
+        const { start, end } = this.getRange(tasks);
+        const weeks = this.getWeeks(start, end);
+        const days = this.getDays(start, end);
+        slots.push(weeks, days);
+        return slots;
     }
-    /**
-     * Updates the focus target flags and corrects the TreeList focus target if needed.
-     * As the TreeList will keep its last focused cell with tabindex="0",
-     * this methods forcefully focuses the correct cell,
-     * when navigating in the Timeline has updated the expected TreeList focus target.
-     */
-    handleTreeListFocusIn(event) {
-        this.treeListLastActive = true;
-        this.timelineLastActive = false;
-        // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
-        if (this.metadata.treeListElement.contains(event.relatedTarget)) {
-            const { colIndex, rowIndex } = this.metadata.treeList.activeCell;
-            this.activeTreeListCell = { colIndex, rowIndex };
-        }
-        else {
-            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
-            const { rowIndex, colIndex } = this.activeTreeListCell;
-            this.metadata.treeList.focusCell(rowIndex, colIndex); // activates the target cell even if it has tabindex="-1"
-        }
-        this.activeTimelineIndex = this.metadata.treeList.activeCell.dataRowIndex;
-        this.notifyTaskStatusChange();
-        if (this.metadata.treeList.activeCell.dataRowIndex >= 0) {
-            this.scrollHorizontallyToTask();
-            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
-        }
+}
+TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineWeekViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineWeekViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineWeekViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+
+/**
+ * @hidden
+ */
+class TimeLineYearViewService extends TimelineBaseViewService {
+    constructor(intlService, mapper) {
+        super(intlService, mapper);
     }
-    updateActiveTimeLineIndex(index) {
-        this.activeTimelineIndex = index;
+    getTableWidth(tasks) {
+        const timeSlots = this.getSlots(tasks)[1];
+        const slotWidth = this.options.slotWidth;
+        return Math.round(timeSlots.length * slotWidth);
     }
-    updateActiveTreeListCell() {
-        this.activeTreeListCell = {
-            rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
-            colIndex: this.activeTreeListCell.colIndex
-        };
+    getStartOffset(rangeStart) {
+        const monthStart = firstDayOfMonth(rangeStart);
+        return addMonths(getDate(monthStart), -1);
     }
     /**
-     * Fires the `taskStatusChanges` event with active and focused status retrieved from
-     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     *
      */
-    notifyTaskStatusChange() {
-        this.taskStatusChanges.next(this.activeTask);
+    getEndOffset(rangeEnd) {
+        const monthEnd = lastDayOfMonth(rangeEnd);
+        return addMonths(getDate(monthEnd), 1);
     }
     /**
-     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Array<Object>} - A collection containing the years and months slots
+     *
+     * Used to render the number of columns and the header
      */
-    scrollHorizontallyToTask() {
-        const index = this.activeTimelineIndex;
-        const task = this.metadata.timelineElement.querySelectorAll('.k-task-wrap').item(index);
-        if (!isPresent(task)) {
-            return;
-        }
-        // scroll horizontally to the item if less than 200px from the beginning of its content are visible
-        const targetVisibleWidth = 200;
-        const isScrollBeforeTask = (this.metadata.timelineElement.clientWidth + this.metadata.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
-        const isScrollAfterTask = this.metadata.timelineElement.scrollLeft > task.offsetLeft;
-        if (isScrollBeforeTask || isScrollAfterTask) {
-            this.metadata.timelineElement.scrollLeft = task.offsetLeft;
-        }
+    getSlots(tasks) {
+        // will return the header rows slots
+        const slots = [];
+        const { start, end } = this.getRange(tasks);
+        const years = this.getYears(start, end);
+        const months = this.getMonths(start, end);
+        slots.push(years, months);
+        return slots;
     }
-    /**
-     * Filters for task mousedown in the Timeline.
-     */
-    handleTimelineMousedown({ target }) {
-        if (isTask(target, this.metadata.host) && !isClearButton(target, this.metadata.host)) {
-            const taskIndex = getClosestTaskIndex(target, this.metadata.host);
-            this.focusTask(taskIndex);
-        }
+}
+TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimeLineYearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeLineYearViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeLineYearViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+
+/**
+ * @hidden
+ */
+const services = {
+    day: TimelineDayViewService,
+    week: TimelineWeekViewService,
+    month: TimelineMonthViewService,
+    year: TimeLineYearViewService
+};
+/**
+ * @hidden
+ */
+class TimelineViewService {
+    constructor(injector) {
+        this.injector = injector;
+        this.viewChange = new EventEmitter();
     }
-    /**
-     * Focus the TreeList on TreeList mousedown.
-     * A nasty hack to trick `handleTreeListFocusIn` into regarding the previous focus target as again the TreeList.
-     * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
-     */
-    focusTreeList() {
-        this.metadata.treeList.focus();
+    service(view) {
+        const serviceType = services[view];
+        return serviceType ? this.injector.get(serviceType) : null;
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, decorators: [{
+TimelineViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 const slotUnitDuration = {
     day: MS_PER_HOUR,
@@ -1473,16 +1479,16 @@ class GanttTaskBase {
         return isNumber(overlayWidth) ? overlayWidth : 0;
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.dataItem)) {
-            if (isPresent(changes.dataItem.previousValue)) {
-                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
+        if (isPresent(changes['dataItem'])) {
+            if (isPresent(changes['dataItem'].previousValue)) {
+                this.dependencyDomService.unregisterTask(changes['dataItem'].previousValue);
             }
             this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
         }
-        else if (isPresent(changes.activeView)) {
+        else if (isPresent(changes['activeView'])) {
             this.dependencyDomService.notifyChanges();
         }
-        if (this.navigationService.enabled && isPresent(changes.index)) {
+        if (this.navigationService.enabled && isPresent(changes['index'])) {
             this.updateActiveState(this.navigationService.activeTask);
         }
     }
@@ -1505,9 +1511,9 @@ class GanttTaskBase {
         }
     }
 }
-GanttTaskBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskBase, deps: [{ token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-GanttTaskBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttTaskBase, selector: "kendo-gantt-task-base", inputs: { dataItem: "dataItem", index: "index", level: "level", renderDependencyDragClues: "renderDependencyDragClues", selectable: "selectable", isSelected: "isSelected", activeView: "activeView", taskClass: "taskClass" }, host: { properties: { "class.k-task-wrap": "this.wrapperClass", "attr.data-task-index": "this.taskIndexAttribute", "style.left.px": "this.taskOffset" } }, viewQueries: [{ propertyName: "taskElement", first: true, predicate: ["task"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskBase, decorators: [{
+GanttTaskBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskBase, deps: [{ token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttTaskBase, selector: "kendo-gantt-task-base", inputs: { dataItem: "dataItem", index: "index", level: "level", renderDependencyDragClues: "renderDependencyDragClues", selectable: "selectable", isSelected: "isSelected", activeView: "activeView", taskClass: "taskClass" }, host: { properties: { "class.k-task-wrap": "this.wrapperClass", "attr.data-task-index": "this.taskIndexAttribute", "style.left.px": "this.taskOffset" } }, viewQueries: [{ propertyName: "taskElement", first: true, predicate: ["task"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskBase, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1553,8 +1559,8 @@ class GanttMilestoneTaskComponent extends GanttTaskBase {
         this.milestoneWrapperClass = true;
     }
 }
-GanttMilestoneTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttMilestoneTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task", host: { properties: { "class.k-milestone-wrap": "this.milestoneWrapperClass" } }, providers: [
+GanttMilestoneTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttMilestoneTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task", host: { properties: { "class.k-milestone-wrap": "this.milestoneWrapperClass" } }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttMilestoneTaskComponent)
@@ -1583,8 +1589,8 @@ GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             >
             </div>
         </ng-container>
-    `, isInline: true, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttMilestoneTaskComponent, decorators: [{
+    `, isInline: true, directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttMilestoneTaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-milestone-task',
@@ -1618,16 +1624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             >
             </div>
         </ng-container>
-    `,
-                    styles: [`
-        .k-task.k-focus {
-            box-shadow: 0 0 4px 3px grey;
-            outline: none;
-        }
-        .k-task.k-focus.k-selected {
-            box-shadow: 0 0 4px 3px #ffaea8;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1653,8 +1650,8 @@ class GanttSummaryTaskComponent extends GanttTaskBase {
         return String(isExpanded);
     }
 }
-GanttSummaryTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSummaryTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: { template: "template", isExpanded: "isExpanded" }, host: { properties: { "class.k-summary-wrap": "this.summaryWrapperClass" } }, providers: [
+GanttSummaryTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSummaryTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: { template: "template", isExpanded: "isExpanded" }, host: { properties: { "class.k-summary-wrap": "this.summaryWrapperClass" } }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttSummaryTaskComponent)
@@ -1703,8 +1700,8 @@ GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             >
             </div>
         </ng-container>
-    `, isInline: true, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSummaryTaskComponent, decorators: [{
+    `, isInline: true, directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSummaryTaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-summary-task',
@@ -1758,16 +1755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             >
             </div>
         </ng-container>
-    `,
-                    styles: [`
-        .k-task.k-focus {
-            box-shadow: 0 0 4px 3px grey;
-            outline: none;
-        }
-        .k-task.k-focus.k-selected {
-            box-shadow: 0 0 4px 3px #ffaea8;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1877,9 +1865,9 @@ class EditService {
         return !isPresent(this.mapper.extractFromDependency(item, 'id'));
     }
 }
-EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, deps: [{ token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
-EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, decorators: [{
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditService, deps: [{ token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MappingService }]; } });
 
@@ -1897,8 +1885,8 @@ class GanttTaskComponent extends GanttTaskBase {
         this.editService.taskDelete.next(this.dataItem);
     }
 }
-GanttTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskComponent, deps: [{ token: EditService }, { token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: { taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate" }, providers: [
+GanttTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskComponent, deps: [{ token: EditService }, { token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: { taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate" }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttTaskComponent)
@@ -1972,8 +1960,8 @@ GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             >
             </div>
         </ng-container>
-    `, isInline: true, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskComponent, decorators: [{
+    `, isInline: true, directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-task',
@@ -2052,16 +2040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             >
             </div>
         </ng-container>
-    `,
-                    styles: [`
-        .k-task.k-focus {
-            box-shadow: 0 0 4px 3px grey;
-            outline: none;
-        }
-        .k-task.k-focus.k-selected {
-            box-shadow: 0 0 4px 3px #ffaea8;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2091,10 +2070,10 @@ class GanttTasksTableBodyComponent {
         return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
 }
-GanttTasksTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: DependencyDomService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Component });
-GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
-        <tr #timelineRow *ngFor="let item of rows; let index = index">
-            <td>
+GanttTasksTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: DependencyDomService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
+        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
+            <td class="k-table-td">
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
                     [dataItem]="item.data"
@@ -2140,14 +2119,14 @@ GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             </td>
         </tr>
     `, isInline: true, components: [{ type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task" }, { type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: ["template", "isExpanded"] }, { type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: ["taskContentTemplate", "taskTemplate"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTasksTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTasksTableBodyComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoGanttTasksTableBody]',
                     template: `
-        <tr #timelineRow *ngFor="let item of rows; let index = index">
-            <td>
+        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
+            <td class="k-table-td">
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
                     [dataItem]="item.data"
@@ -2236,6 +2215,39 @@ var ScrollAxis;
     ScrollAxis["Horizontal"] = "scrollLeft";
 })(ScrollAxis || (ScrollAxis = {}));
 
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+class TimelineScrollService {
+    constructor() {
+        this.horizontalScroll = new Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new Subject();
+    }
+    ngOnDestroy() {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    }
+    requestHorizontalScroll(clientTop) {
+        this.horizontalScroll.next(clientTop);
+    }
+    requestVerticalScroll(clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    }
+    requestScrollCancel() {
+        this.scrollCancel.next();
+    }
+}
+TimelineScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineScrollService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  *
@@ -2307,39 +2319,6 @@ const getViewportBoundaries = (element) => {
     };
 };
 
-/**
- * @hidden
- *
- * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
- * The scrolling is performed based on client (viewport) coordinates.
- */
-class TimelineScrollService {
-    constructor() {
-        this.horizontalScroll = new Subject();
-        this.verticalScroll = new Subject();
-        this.scrollCancel = new Subject();
-    }
-    ngOnDestroy() {
-        this.horizontalScroll.complete();
-        this.verticalScroll.complete();
-        this.scrollCancel.complete();
-    }
-    requestHorizontalScroll(clientTop) {
-        this.horizontalScroll.next(clientTop);
-    }
-    requestVerticalScroll(clientLeft) {
-        this.verticalScroll.next(clientLeft);
-    }
-    requestScrollCancel() {
-        this.scrollCancel.next();
-    }
-}
-TimelineScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineScrollService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @hidden
  */
@@ -2394,9 +2373,9 @@ class TimelineScrollableDirective {
         }
     }
 }
-TimelineScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineScrollableDirective, deps: [{ token: i0.ElementRef }, { token: TimelineScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TimelineScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: { scrollSettings: "scrollSettings" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineScrollableDirective, decorators: [{
+TimelineScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineScrollableDirective, deps: [{ token: i0.ElementRef }, { token: TimelineScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: { scrollSettings: "scrollSettings" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttTimelineScrollable]'
@@ -2411,7 +2390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Gets the offset (top and left values) relative to a target element.
  */
 const getOffsetRelativeToParent = (element, targetParent) => {
-    let offset = {
+    const offset = {
         top: 0,
         left: 0
     };
@@ -2626,7 +2605,7 @@ class GanttDependencyDirective {
         this.subscriptions.unsubscribe();
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.dependency)) {
+        if (isPresent(changes['dependency'])) {
             this.updatePoints(this.dependencyDomService.dependencyDomArgs);
         }
     }
@@ -2655,9 +2634,9 @@ class GanttDependencyDirective {
         this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
     }
 }
-GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttDependencyDirective, decorators: [{
+GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttDependencyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttDependency]'
@@ -2712,12 +2691,13 @@ class GanttTimelineComponent {
         return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
 }
-GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, host: { properties: { "class.k-gantt-timeline": "this.hostClass" } }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], ngImport: i0, template: `
-        <div class="k-timeline k-grid k-widget">
+GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, host: { properties: { "class.k-gantt-timeline": "this.hostClass" } }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], ngImport: i0, template: `
+        <div class="k-timeline k-grid k-grid-md">
             <div class="k-grid-header">
                 <div #timelineHeaderWrap class="k-grid-header-wrap">
                     <table
+                        class="k-table k-table-md k-grid-header-table"
                         role="presentation"
                         [style.width.px]="tableWidth"
                     >
@@ -2746,22 +2726,22 @@ GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             >
                 <div class="k-gantt-tables">
                     <table
-                        class="k-gantt-rows"
+                        class="k-table k-table-md k-grid-table k-gantt-rows"
                         [style.width.px]="tableWidth"
                         role="presentation"
                     >
-                        <tbody>
-                            <tr *ngFor="let item of rows; let i = index;"
-                                [class.k-alt]="i % 2"
-                            >
-                                <td></td>
+                        <tbody class="k-table-tbody">
+                            <tr 
+                                *ngFor="let item of rows; let i = index;"
+                                class="k-table-row{{i % 2 ? ' k-alt k-table-row-alt' : ''}}">
+                                <td class="k-table-td"></td>
                             </tr>
                         </tbody>
                     </table>
 
                     <table
                         #timelineColumns
-                        class="k-gantt-columns"
+                        class="k-table k-table-md k-gantt-columns"
                         role="presentation"
                         [style.width.px]="tableWidth"
                     >
@@ -2769,24 +2749,24 @@ GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             <col *ngFor="let item of slots">
                         </colgroup>
 
-                        <tbody>
-                            <tr>
+                        <tbody class="k-table-tbody">
+                            <tr class="k-table-row">
                                 <td *ngFor="let item of slots"
-                                    [class.k-nonwork-hour]="isNonWorking(item)"
-                                >
-                                </td>
+                                    class="k-table-td"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"></td>
                             </tr>
                         </tbody>
                     </table>
 
                     <table
                         #tasksContainer
-                        class="k-gantt-tasks"
+                        class="k-table k-table-md k-gantt-tasks"
                         role="presentation"
-                        style="border-collapse: collapse;"
+                        [style.border-collapse]="'collapse'"
                         [style.width.px]="tableWidth"
                     >
                         <tbody
+                            class="k-table-tbody"
                             kendoGanttTasksTableBody
                             [rows]="rows"
                             [activeView]="activeView"
@@ -2816,15 +2796,16 @@ GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </div>
     `, isInline: true, components: [{ type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }], directives: [{ type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { type: i8.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTimelineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-timeline',
                     template: `
-        <div class="k-timeline k-grid k-widget">
+        <div class="k-timeline k-grid k-grid-md">
             <div class="k-grid-header">
                 <div #timelineHeaderWrap class="k-grid-header-wrap">
                     <table
+                        class="k-table k-table-md k-grid-header-table"
                         role="presentation"
                         [style.width.px]="tableWidth"
                     >
@@ -2853,22 +2834,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             >
                 <div class="k-gantt-tables">
                     <table
-                        class="k-gantt-rows"
+                        class="k-table k-table-md k-grid-table k-gantt-rows"
                         [style.width.px]="tableWidth"
                         role="presentation"
                     >
-                        <tbody>
-                            <tr *ngFor="let item of rows; let i = index;"
-                                [class.k-alt]="i % 2"
-                            >
-                                <td></td>
+                        <tbody class="k-table-tbody">
+                            <tr 
+                                *ngFor="let item of rows; let i = index;"
+                                class="k-table-row{{i % 2 ? ' k-alt k-table-row-alt' : ''}}">
+                                <td class="k-table-td"></td>
                             </tr>
                         </tbody>
                     </table>
 
                     <table
                         #timelineColumns
-                        class="k-gantt-columns"
+                        class="k-table k-table-md k-gantt-columns"
                         role="presentation"
                         [style.width.px]="tableWidth"
                     >
@@ -2876,24 +2857,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                             <col *ngFor="let item of slots">
                         </colgroup>
 
-                        <tbody>
-                            <tr>
+                        <tbody class="k-table-tbody">
+                            <tr class="k-table-row">
                                 <td *ngFor="let item of slots"
-                                    [class.k-nonwork-hour]="isNonWorking(item)"
-                                >
-                                </td>
+                                    class="k-table-td"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"></td>
                             </tr>
                         </tbody>
                     </table>
 
                     <table
                         #tasksContainer
-                        class="k-gantt-tasks"
+                        class="k-table k-table-md k-gantt-tasks"
                         role="presentation"
-                        style="border-collapse: collapse;"
+                        [style.border-collapse]="'collapse'"
                         [style.width.px]="tableWidth"
                     >
                         <tbody
+                            class="k-table-tbody"
                             kendoGanttTasksTableBody
                             [rows]="rows"
                             [activeView]="activeView"
@@ -3000,9 +2981,9 @@ class GanttColumnBase extends ColumnBase {
         return super.locked;
     }
 }
-GanttColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GanttColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttColumnBase, selector: "kendo-gantt-column-base", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnBase, decorators: [{
+GanttColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GanttColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttColumnBase, selector: "kendo-gantt-column-base", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnBase, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -3053,9 +3034,9 @@ class CellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: CellTemplateDirective, selector: "[kendoGanttCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CellTemplateDirective, decorators: [{
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CellTemplateDirective, selector: "[kendoGanttCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttCellTemplate]'
@@ -3079,9 +3060,9 @@ class ColumnMenuTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ColumnMenuTemplateDirective, selector: "[kendoGanttColumnMenuTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
+ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuTemplateDirective, selector: "[kendoGanttColumnMenuTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttColumnMenuTemplate]'
@@ -3104,9 +3085,9 @@ class FilterCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FilterCellTemplateDirective, selector: "[kendoGanttFilterCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
+FilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterCellTemplateDirective, selector: "[kendoGanttFilterCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttFilterCellTemplate]'
@@ -3128,9 +3109,9 @@ class FilterMenuTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FilterMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FilterMenuTemplateDirective, selector: "[kendoGanttFilterMenuTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
+FilterMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuTemplateDirective, selector: "[kendoGanttFilterMenuTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttFilterMenuTemplate]'
@@ -3156,9 +3137,9 @@ class FooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FooterTemplateDirective, selector: "[kendoGanttFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FooterTemplateDirective, selector: "[kendoGanttFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttFooterTemplate]'
@@ -3182,9 +3163,9 @@ class HeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HeaderTemplateDirective, selector: "[kendoGanttHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: HeaderTemplateDirective, selector: "[kendoGanttHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttHeaderTemplate]'
@@ -3212,9 +3193,9 @@ class EditTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: EditTemplateDirective, selector: "[kendoGanttEditTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditTemplateDirective, decorators: [{
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: EditTemplateDirective, selector: "[kendoGanttEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttEditTemplate]'
@@ -3266,14 +3247,14 @@ class GanttColumnComponent extends ColumnComponent {
         this.options.notifyColumnChanges();
     }
 }
-GanttColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttColumnComponent, selector: "kendo-gantt-column", inputs: { format: "format", filter: "filter", filterable: "filterable", editor: "editor", editable: "editable", locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+GanttColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttColumnComponent, selector: "kendo-gantt-column", inputs: { format: "format", filter: "filter", filterable: "filterable", editor: "editor", editable: "editable", locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttColumnComponent)
         }
     ], queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }, { propertyName: "filterCellTemplate", first: true, predicate: FilterCellTemplateDirective, descendants: true }, { propertyName: "filterMenuTemplate", first: true, predicate: FilterMenuTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-column',
@@ -3378,14 +3359,14 @@ class GanttColumnGroupComponent extends ColumnGroupComponent {
         this.options.notifyColumnChanges();
     }
 }
-GanttColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnGroupComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttColumnGroupComponent, selector: "kendo-gantt-column-group", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", sortable: "sortable", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnGroupComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+GanttColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttColumnGroupComponent, selector: "kendo-gantt-column-group", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", sortable: "sortable", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttColumnGroupComponent)
         }
     ], queries: [{ propertyName: "children", predicate: GanttColumnBase }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttColumnGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttColumnGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-column-group',
@@ -3481,14 +3462,14 @@ class GanttSpanColumnComponent extends SpanColumnComponent {
         this.options.notifyColumnChanges();
     }
 }
-GanttSpanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSpanColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttSpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttSpanColumnComponent, selector: "kendo-gantt-span-column", inputs: { locked: "locked", lockable: "lockable", editable: "editable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttSpanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSpanColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+GanttSpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttSpanColumnComponent, selector: "kendo-gantt-span-column", inputs: { locked: "locked", lockable: "lockable", editable: "editable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttSpanColumnComponent)
         }
     ], queries: [{ propertyName: "childColumns", predicate: GanttColumnComponent }, { propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSpanColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSpanColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-span-column',
@@ -3584,9 +3565,9 @@ class GanttLocalizationService {
         return this.localizationService.get(token);
     }
 }
-GanttLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-GanttLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttLocalizationService, decorators: [{
+GanttLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
@@ -3639,9 +3620,9 @@ class GanttTaskTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-GanttTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttTaskTemplateDirective, selector: "[kendoGanttTaskTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskTemplateDirective, decorators: [{
+GanttTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttTaskTemplateDirective, selector: "[kendoGanttTaskTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttTaskTemplate]'
@@ -3667,7 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  *      template: `
  *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
  *              <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
- *                  <div style="color: white; font-size: 8px;">
+ *                  <div [style]="'color: white; font-size: 8px;'">
  *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
  *                  </div>
  *              </ng-template>
@@ -3684,9 +3665,9 @@ class GanttSummaryTaskTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-GanttSummaryTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSummaryTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttSummaryTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttSummaryTaskTemplateDirective, selector: "[kendoGanttSummaryTaskTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttSummaryTaskTemplateDirective, decorators: [{
+GanttSummaryTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSummaryTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttSummaryTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttSummaryTaskTemplateDirective, selector: "[kendoGanttSummaryTaskTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttSummaryTaskTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttSummaryTaskTemplate]'
@@ -3724,9 +3705,9 @@ class GanttTaskContentTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-GanttTaskContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttTaskContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttTaskContentTemplateDirective, selector: "[kendoGanttTaskContentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttTaskContentTemplateDirective, decorators: [{
+GanttTaskContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttTaskContentTemplateDirective, selector: "[kendoGanttTaskContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttTaskContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttTaskContentTemplate]'
@@ -3755,7 +3736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  *         <input type="radio" kendoRadioButton id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <kendo-label class="k-radio-label" for="both">Both</kendo-label><br/>
  *       </div>
- *       <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" style="height: 400px">
+ *       <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" [style.height.px]="400">
  *            <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
  *                <button kendoButton (click)="onClick()">Custom action</button>
  *            </ng-template>
@@ -3843,9 +3824,9 @@ class ToolbarTemplateDirective {
         return this._position;
     }
 }
-ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
+ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttToolbarTemplate]'
@@ -3882,9 +3863,9 @@ class ViewBase {
         }
     }
 }
-ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ViewBase, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ViewBase, decorators: [{
+ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewBase, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3972,8 +3953,8 @@ class GanttAddTaskComponent {
         });
     }
 }
-GanttAddTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttAddTaskComponent, deps: [{ token: i1$1.LocalizationService }, { token: EditService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: { data: "data", icon: "icon" }, ngImport: i0, template: `
+GanttAddTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttAddTaskComponent, deps: [{ token: i1$1.LocalizationService }, { token: EditService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: { data: "data", icon: "icon" }, ngImport: i0, template: `
         <kendo-dropdownbutton
             [data]="data"
             [icon]="icon"
@@ -3983,8 +3964,8 @@ GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (open)="handleOpen($event)">
             {{ getText('addTaskText') }}
         </kendo-dropdownbutton>
-    `, isInline: true, components: [{ type: i2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttAddTaskComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttAddTaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-add-task',
@@ -4044,8 +4025,8 @@ class ViewSelectorComponent {
         this.activeViewChange.emit(event.target.value);
     }
 }
-ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
+ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
         <select
             class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
             aria-label="View Selector"
@@ -4060,8 +4041,8 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [selected]="view === activeView"
                 (click)="onClick(view)">{{getViewTypeText(view)}}</button>
         </kendo-buttongroup>
-    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i8$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.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.17", ngImport: i0, type: ViewSelectorComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i8$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-view-selector',
@@ -4100,6 +4081,7 @@ class ToolbarComponent {
     constructor() {
         this.context = {};
         this.role = 'toolbar';
+        this.toolbarSizingClass = true;
         this.activeViewChange = new EventEmitter();
     }
     set position(value) {
@@ -4120,8 +4102,8 @@ class ToolbarComponent {
         this.activeViewChange.emit(view);
     }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: `
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!renderTemplate">
             <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
@@ -4138,7 +4120,7 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             >
         </ng-template>
     `, isInline: true, components: [{ type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: ["data", "icon"] }, { type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-toolbar',
@@ -4163,6 +4145,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], toolbarSizingClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
             }], activeViewChange: [{
                 type: Output
             }], showAddTask: [{
@@ -4198,8 +4183,8 @@ class TaskFieldsComponent {
         return this.localizationService.get(token);
     }
 }
-TaskFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskFieldsComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields", ngImport: i0, template: `
+TaskFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskFieldsComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields", ngImport: i0, template: `
         <form class="k-form" [formGroup]="formGroup">
             <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
                 <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
@@ -4228,8 +4213,8 @@ TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 ></kendo-numerictextbox>
             </kendo-formfield>
         </form>
-    `, isInline: true, components: [{ type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i6$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i4.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: i8$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskFieldsComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i6$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i4.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: i8$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskFieldsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-task-fields',
@@ -4348,8 +4333,8 @@ class DependenciesTableComponent {
         this.formGroups.removeAt(selectedIndex);
     }
 }
-DependenciesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: { tasks: "tasks", dependencies: "dependencies", dependencyType: "dependencyType" }, outputs: { dependenciesChange: "dependenciesChange" }, ngImport: i0, template: `
+DependenciesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: { tasks: "tasks", dependencies: "dependencies", dependencyType: "dependencyType" }, outputs: { dependenciesChange: "dependenciesChange" }, ngImport: i0, template: `
         <kendo-grid
             [data]="dependencies"
             [selectable]="{ mode: 'single' }"
@@ -4390,8 +4375,8 @@ DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </ng-template>
             </kendo-grid-column>
         </kendo-grid>
-    `, isInline: true, components: [{ type: i4$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i5$1.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: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i2.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: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependenciesTableComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i6$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: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependenciesTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-dependencies-table',
@@ -4488,8 +4473,8 @@ class EditDialogComponent {
         this.editService.taskDelete.next(this.editService.dataItem);
     }
 }
-EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditDialogComponent, deps: [{ token: MappingService }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: { data: "data" }, ngImport: i0, template: `
+EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditDialogComponent, deps: [{ token: MappingService }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: { data: "data" }, ngImport: i0, template: `
         <kendo-dialog
             [title]="getText('taskEditingDialogTitle')"
             [width]="575"
@@ -4498,7 +4483,7 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
 
-            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
+            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
                 <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
                     <ng-template kendoTabContent>
                     <kendo-gantt-task-fields></kendo-gantt-task-fields>
@@ -4540,8 +4525,8 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5$2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5$2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: TaskFieldsComponent, selector: "kendo-gantt-task-fields" }, { type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: ["tasks", "dependencies", "dependencyType"], outputs: ["dependenciesChange"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: i4$2.CustomMessagesComponent, selector: "kendo-dialog-messages, kendo-window-messages" }, { type: i5$2.TabContentDirective, selector: "[kendoTabContent]" }, { type: i2.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: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditDialogComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: TaskFieldsComponent, selector: "kendo-gantt-task-fields" }, { type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: ["tasks", "dependencies", "dependencyType"], outputs: ["dependenciesChange"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: i4$2.CustomMessagesComponent, selector: "kendo-dialog-messages, kendo-window-messages" }, { type: i5$1.TabContentDirective, selector: "[kendoTabContent]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-edit-dialog',
@@ -4554,7 +4539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
 
-            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
+            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
                 <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
                     <ng-template kendoTabContent>
                     <kendo-gantt-task-fields></kendo-gantt-task-fields>
@@ -4607,9 +4592,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: Messages, selector: "kendo-gantt-messages-base", inputs: { taskEditingGeneralTabTitle: "taskEditingGeneralTabTitle", taskEditingPredecessorsTabTitle: "taskEditingPredecessorsTabTitle", taskEditingSuccessorsTabTitle: "taskEditingSuccessorsTabTitle", taskEditingDependenciesAddButtonText: "taskEditingDependenciesAddButtonText", taskEditingDependenciesRemoveButtonText: "taskEditingDependenciesRemoveButtonText", taskEditingDependenciesGridNameColumnTitle: "taskEditingDependenciesGridNameColumnTitle", taskEditingDependenciesGridTypeColumnTitle: "taskEditingDependenciesGridTypeColumnTitle", deleteButtonText: "deleteButtonText", taskDeleteLabel: "taskDeleteLabel", taskEditingDialogTitle: "taskEditingDialogTitle", taskEditingDialogCloseTitle: "taskEditingDialogCloseTitle", confirmationDialogCloseTitle: "confirmationDialogCloseTitle", confirmationDialogTitle: "confirmationDialogTitle", addTaskText: "addTaskText", addChildText: "addChildText", addAboveText: "addAboveText", addBelowText: "addBelowText", cancelButtonText: "cancelButtonText", saveButtonText: "saveButtonText", titleFieldInputLabel: "titleFieldInputLabel", startFieldInputLabel: "startFieldInputLabel", endFieldInputLabel: "endFieldInputLabel", completionRatioFieldInputLabel: "completionRatioFieldInputLabel", confirmationDialogContent: "confirmationDialogContent", dayViewText: "dayViewText", weekViewText: "weekViewText", monthViewText: "monthViewText", yearViewText: "yearViewText", noRecords: "noRecords", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendo-gantt-messages-base", inputs: { taskEditingGeneralTabTitle: "taskEditingGeneralTabTitle", taskEditingPredecessorsTabTitle: "taskEditingPredecessorsTabTitle", taskEditingSuccessorsTabTitle: "taskEditingSuccessorsTabTitle", taskEditingDependenciesAddButtonText: "taskEditingDependenciesAddButtonText", taskEditingDependenciesRemoveButtonText: "taskEditingDependenciesRemoveButtonText", taskEditingDependenciesGridNameColumnTitle: "taskEditingDependenciesGridNameColumnTitle", taskEditingDependenciesGridTypeColumnTitle: "taskEditingDependenciesGridTypeColumnTitle", deleteButtonText: "deleteButtonText", taskDeleteLabel: "taskDeleteLabel", taskEditingDialogTitle: "taskEditingDialogTitle", taskEditingDialogCloseTitle: "taskEditingDialogCloseTitle", confirmationDialogCloseTitle: "confirmationDialogCloseTitle", confirmationDialogTitle: "confirmationDialogTitle", addTaskText: "addTaskText", addChildText: "addChildText", addAboveText: "addAboveText", addBelowText: "addBelowText", cancelButtonText: "cancelButtonText", saveButtonText: "saveButtonText", titleFieldInputLabel: "titleFieldInputLabel", startFieldInputLabel: "startFieldInputLabel", endFieldInputLabel: "endFieldInputLabel", completionRatioFieldInputLabel: "completionRatioFieldInputLabel", confirmationDialogContent: "confirmationDialogContent", dayViewText: "dayViewText", weekViewText: "weekViewText", monthViewText: "monthViewText", yearViewText: "yearViewText", noRecords: "noRecords", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -4762,14 +4747,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -5113,9 +5098,9 @@ class GanttComponent {
         this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
-        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
-        this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
-        this._treeListPaneOptions = Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS);
+        this._dragScrollSettings = { ...DEFAULT_DRAG_SCROLL_SETTINGS };
+        this._timelinePaneOptions = { ...DEFAULT_TIMELINE_PANE_SETTINGS };
+        this._treeListPaneOptions = { ...DEFAULT_TREELIST_PANE_SETTINGS };
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
@@ -5295,17 +5280,17 @@ class GanttComponent {
         if (this._timelinePaneOptions.collapsed && !value.collapsed) {
             this.dependencyDomService.notifyChanges();
         }
-        this._timelinePaneOptions = Object.assign(Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS), value);
+        this._timelinePaneOptions = { ...DEFAULT_TIMELINE_PANE_SETTINGS, ...value };
     }
     get timelinePaneOptions() {
-        return Object.assign(Object.assign({}, this._timelinePaneOptions), { size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size });
+        return { ...this._timelinePaneOptions, size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size };
     }
     /**
      * The options of the treelist splitter pane.
      * By default the pane is `collapsible` and not `collapsed`.
      */
     set treeListPaneOptions(value) {
-        this._treeListPaneOptions = Object.assign(Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS), value);
+        this._treeListPaneOptions = { ...DEFAULT_TREELIST_PANE_SETTINGS, ...value };
     }
     get treeListPaneOptions() {
         return this._treeListPaneOptions;
@@ -5348,7 +5333,7 @@ class GanttComponent {
      * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
      */
     set dragScrollSettings(settings) {
-        this._dragScrollSettings = Object.assign(Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS), settings);
+        this._dragScrollSettings = { ...DEFAULT_DRAG_SCROLL_SETTINGS, ...settings };
     }
     get dragScrollSettings() {
         return this._dragScrollSettings;
@@ -5598,7 +5583,7 @@ class GanttComponent {
      * @hidden
      */
     handleCellClose(e) {
-        this.cellClose.emit(new CellCloseEvent(Object.assign(Object.assign({}, e), { item: this.editItem, sender: this })));
+        this.cellClose.emit(new CellCloseEvent({ ...e, item: this.editItem, sender: this }));
         this.dependencyDomService.notifyChanges();
     }
     /**
@@ -5628,7 +5613,13 @@ class GanttComponent {
             return;
         }
         const activeViewOptions = this.getActiveViewOptions();
-        this.viewService.options = Object.assign({ workWeekStart: this.workWeekStart, workWeekEnd: this.workWeekEnd, workDayStart: this.workDayStart, workDayEnd: this.workDayEnd }, activeViewOptions);
+        this.viewService.options = {
+            workWeekStart: this.workWeekStart,
+            workWeekEnd: this.workWeekEnd,
+            workDayStart: this.workDayStart,
+            workDayEnd: this.workDayEnd,
+            ...activeViewOptions
+        };
         this.tableWidth = this.viewService.getTableWidth(this.data);
         const [groupedSlots, slots] = this.viewService.getSlots(this.data);
         this.timelineSlots = slots;
@@ -5977,7 +5968,10 @@ class GanttComponent {
                             // the TreeList emits the individual events first, then the combined `expandStateChange` event
                             const individualEmitter = shouldExpand ? this.rowExpand : this.rowCollapse;
                             individualEmitter.emit(expandEvent);
-                            this.expandStateChange.emit(Object.assign(Object.assign({}, expandEvent), { expand: shouldExpand }));
+                            this.expandStateChange.emit({
+                                ...expandEvent,
+                                expand: shouldExpand
+                            });
                             this.updateView();
                             this.navigation.scrollHorizontallyToTask();
                         });
@@ -6006,8 +6000,8 @@ class GanttComponent {
         }
     }
 }
-GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
         GanttLocalizationService,
         LocalizationService,
         {
@@ -6400,8 +6394,8 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
                 <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-   `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i5$2.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$2.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.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.17", ngImport: i0, type: GanttComponent, decorators: [{
+   `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i5$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt',
@@ -6970,9 +6964,9 @@ class GanttFlatBindingDirective extends FlatBindingDirective {
         super.aggregate = value;
     }
 }
-GanttFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttFlatBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttFlatBindingDirective, selector: "[kendoGanttFlatBinding]", inputs: { data: ["kendoGanttFlatBinding", "data"] }, exportAs: ["kendoGanttFlatBinding"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttFlatBindingDirective, decorators: [{
+GanttFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttFlatBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttFlatBindingDirective, selector: "[kendoGanttFlatBinding]", inputs: { data: ["kendoGanttFlatBinding", "data"] }, exportAs: ["kendoGanttFlatBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttFlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttFlatBinding]',
@@ -6995,9 +6989,9 @@ class GanttHierarchyBindingDirective extends HierarchyBindingDirective {
         super.aggregate = value;
     }
 }
-GanttHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttHierarchyBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttHierarchyBindingDirective, selector: "[kendoGanttHierarchyBinding]", inputs: { data: ["kendoGanttHierarchyBinding", "data"] }, exportAs: ["kendoGanttHierarchyBinding"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttHierarchyBindingDirective, decorators: [{
+GanttHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttHierarchyBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttHierarchyBindingDirective, selector: "[kendoGanttHierarchyBinding]", inputs: { data: ["kendoGanttHierarchyBinding", "data"] }, exportAs: ["kendoGanttHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttHierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttHierarchyBinding]',
@@ -7022,9 +7016,9 @@ class GanttExpandableDirective extends ExpandableDirective {
         super.expandBy = value;
     }
 }
-GanttExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttExpandableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: { expandBy: "expandBy" }, exportAs: ["kendoGanttExpandable"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttExpandableDirective, decorators: [{
+GanttExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttExpandableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: { expandBy: "expandBy" }, exportAs: ["kendoGanttExpandable"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttExpandableDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoGanttExpandable',
@@ -7120,9 +7114,9 @@ class SelectableDirective {
         }
     }
 }
-SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectableDirective, deps: [{ token: GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
-SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SelectableDirective, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectableDirective, decorators: [{
+SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectableDirective, deps: [{ token: GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SelectableDirective, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoGanttSelectable',
@@ -7151,8 +7145,8 @@ class DragValidationTooltipComponent {
         this.isValid = false;
     }
 }
-DragValidationTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DragValidationTooltipComponent, selector: "ng-component", ngImport: i0, template: `
+DragValidationTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragValidationTooltipComponent, selector: "ng-component", ngImport: i0, template: `
         <div
             class="k-tooltip k-gantt-tooltip-validation"
             [class.k-gantt-tooltip-valid]="showValidityStatus && isValid"
@@ -7168,7 +7162,7 @@ DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
         </div>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragValidationTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragValidationTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -7483,9 +7477,9 @@ class DependencyDragCreateDirective {
         };
     }
 }
-DependencyDragCreateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependencyDragCreateDirective, deps: [{ token: GanttComponent }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: i3.PopupService }, { token: TimelineScrollService }], target: i0.ɵɵFactoryTarget.Directive });
-DependencyDragCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DependencyDragCreateDirective, selector: "[kendoGanttDependencyDragCreate]", inputs: { displayValidationTooltip: "displayValidationTooltip" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DependencyDragCreateDirective, decorators: [{
+DependencyDragCreateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependencyDragCreateDirective, deps: [{ token: GanttComponent }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: i3.PopupService }, { token: TimelineScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+DependencyDragCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DependencyDragCreateDirective, selector: "[kendoGanttDependencyDragCreate]", inputs: { displayValidationTooltip: "displayValidationTooltip" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DependencyDragCreateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttDependencyDragCreate]'
@@ -7503,14 +7497,14 @@ class TimelineDayViewComponent extends ViewBase {
         this.type = 'day';
     }
 }
-TimelineDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDayViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view", providers: [
+TimelineDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineDayViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineDayViewComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDayViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineDayViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-timeline-day-view',
@@ -7533,14 +7527,14 @@ class TimelineWeekViewComponent extends ViewBase {
         this.type = 'week';
     }
 }
-TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineWeekViewComponent, selector: "kendo-gantt-timeline-week-view", providers: [
+TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimelineWeekViewComponent, selector: "kendo-gantt-timeline-week-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineWeekViewComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineWeekViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineWeekViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-timeline-week-view',
@@ -7563,14 +7557,14 @@ class TimelineMonthViewComponent extends ViewBase {
         this.type = 'month';
     }
 }
-TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineMonthViewComponent, selector: "kendo-gantt-timeline-month-view", providers: [
+TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimelineMonthViewComponent, selector: "kendo-gantt-timeline-month-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineMonthViewComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineMonthViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-timeline-month-view',
@@ -7593,14 +7587,14 @@ class TimelineYearViewComponent extends ViewBase {
         this.type = 'year';
     }
 }
-TimelineYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineYearViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineYearViewComponent, selector: "kendo-gantt-timeline-year-view", providers: [
+TimelineYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineYearViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimelineYearViewComponent, selector: "kendo-gantt-timeline-year-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineYearViewComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineYearViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-timeline-year-view',
@@ -7627,14 +7621,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomMessagesComponent, selector: "kendo-gantt-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-gantt-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -7742,8 +7736,8 @@ const DECLARATIONS = [
  */
 class GanttModule {
 }
-GanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttModule, declarations: [GanttComponent,
+GanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttModule, declarations: [GanttComponent,
         GanttFlatBindingDirective,
         GanttHierarchyBindingDirective,
         GanttTaskComponent,
@@ -7839,14 +7833,14 @@ GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         TimelineScrollableDirective,
         DependenciesTableComponent,
         TaskFieldsComponent] });
-GanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttModule, providers: [{
+GanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttModule, providers: [{
             provide: L10N_PREFIX,
             useValue: 'kendo.gantt'
         }, {
             provide: TOUCH_ENABLED,
             useValue: touchEnabled
         }], imports: [[...IMPORTED_MODULES]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GanttModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GanttModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IMPORTED_MODULES],