@syncfusion/ej2-gantt 20.3.61 → 20.4.38

package/dist/es6/ej2-gantt.es5.js

@@ -150,6 +150,7 @@ function updateDates(record, parent) {
 function formatString(str, args) {
     var regx;
     for (var i = 0; i < args.length; i++) {
+        // eslint-disable-next-line detect-non-literal-regexp
         regx = new RegExp('\\{' + (i) + '\\}', 'gm');
         str = str.replace(regx, args[i].toString());
     }
@@ -488,7 +489,7 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
             tDuration = this.parent.editModule.taskbarEditModule.sumOfDuration(ganttProperties.segments);
         }
         else {
-            if (!isNullOrUndefined(ganttProperties.startDate) && !isNullOrUndefined(ganttProperties.endDate) &&
+            if ((!isNullOrUndefined(this.parent.taskFields.milestone)) && (!isNullOrUndefined(ganttProperties.startDate)) && !isNullOrUndefined(ganttProperties.endDate) &&
                 (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
                 tDuration = 1;
             }
@@ -1887,7 +1888,6 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             this.parent.setRecordValue('parentId', data[taskSettings.parentID], ganttProperties, true);
         }
         this.addCustomFieldValue(data, ganttData);
-        ganttData.checkboxState = 'uncheck';
         this.parent.setRecordValue('isAutoSchedule', autoSchedule, ganttProperties, true);
         this.parent.setRecordValue('resourceInfo', this.setResourceInfo(data), ganttProperties, true);
         this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
@@ -2079,8 +2079,10 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                     taskData.push(this.setSegmentTaskData(segment, segments[i]));
                 }
                 this.parent.setRecordValue('duration', sumOfDuration, data.ganttProperties, true);
-                this.parent.setRecordValue('endDate', ganttSegments[ganttSegments.length - 1].endDate, data.ganttProperties, true);
-                if (!isNullOrUndefined(taskSettings.endDate)) {
+                if (!isNullOrUndefined(ganttSegments[ganttSegments.length - 1])) {
+                    this.parent.setRecordValue('endDate', ganttSegments[ganttSegments.length - 1].endDate, data.ganttProperties, true);
+                }
+                if (!isNullOrUndefined(taskSettings.endDate) && !isNullOrUndefined(ganttSegments[ganttSegments.length - 1])) {
                     this.parent.setRecordValue(this.parent.taskFields.endDate, ganttSegments[ganttSegments.length - 1].endDate, data, true);
                 }
                 this.parent.setRecordValue('taskData.' + this.parent.taskFields.segments, taskData, data);
@@ -4005,6 +4007,8 @@ var ChartScroll = /** @__PURE__ @class */ (function () {
     ChartScroll.prototype.addEventListeners = function () {
         this.parent.on('grid-scroll', this.gridScrollHandler, this);
         EventHandler.add(this.element, 'scroll', this.onScroll, this);
+        this.parent.treeGrid.grid.on('showGanttShimmer', this.updateShimmer, this);
+        this.parent.treeGrid.grid.on('removeGanttShimmer', this.removeShimmer, this);
     };
     /**
      * Unbind events
@@ -4014,6 +4018,8 @@ var ChartScroll = /** @__PURE__ @class */ (function () {
     ChartScroll.prototype.removeEventListeners = function () {
         EventHandler.remove(this.element, 'scroll', this.onScroll);
         this.parent.off('grid-scroll', this.gridScrollHandler);
+        this.parent.treeGrid.grid.off('showGanttShimmer', this.updateShimmer);
+        this.parent.treeGrid.grid.off('removeGanttShimmer', this.removeShimmer);
     };
     /**
      *
@@ -4059,6 +4065,27 @@ var ChartScroll = /** @__PURE__ @class */ (function () {
             this.parent.chartVerticalLineContainer.style.top = formatUnit(scrollTop);
         }
     };
+    ChartScroll.prototype.removeShimmer = function () {
+        var parent = this.parent;
+        setTimeout(function () {
+            parent.hideMaskRow();
+        }, 0);
+    };
+    
+    ChartScroll.prototype.updateShimmer = function () {
+        var parent = this.parent;
+        setTimeout(function () {
+            parent.showMaskRow();
+        }, 0);
+    };
+    ChartScroll.prototype.updateSpinner = function () {
+        var parent = this.parent;
+        this.parent.showSpinner();
+        window.clearTimeout(this.isScrolling);
+        this.isScrolling = setTimeout(function () {
+            parent.hideSpinner();
+        }, 200);
+    };
     /**
      * Scroll event handler
      *
@@ -4084,6 +4111,16 @@ var ChartScroll = /** @__PURE__ @class */ (function () {
             scrollArgs.scrollDirection = 'Horizontal';
             scrollArgs.action = 'HorizontalScroll';
         }
+        if ((scrollArgs.scrollDirection != 'Horizontal' && !isNullOrUndefined(scrollArgs.scrollDirection)) && this.parent.enableVirtualization === true && (this.parent.isToolBarClick
+            || isNullOrUndefined(this.parent.isToolBarClick))) {
+            this.parent.isVirtualScroll = true;
+            if (this.parent.showIndicator || isNullOrUndefined(this.parent.showIndicator)) {
+                if (!this.parent.enableVirtualMaskRow && this.parent.enableVirtualization && this.parent.loadingIndicator.indicatorType === "Spinner") {
+                    this.updateSpinner();
+                }
+            }
+        }
+        this.parent.isToolBarClick = true;
         scrollArgs.requestType = 'scroll';
         this.parent.trigger('actionComplete', scrollArgs);
     };
@@ -4124,7 +4161,10 @@ var ChartScroll = /** @__PURE__ @class */ (function () {
      * @param {number} scrollLeft  - To set scroll left for scroll container
      * @returns {void} .
      */
-    ChartScroll.prototype.setScrollLeft = function (scrollLeft) {
+    ChartScroll.prototype.setScrollLeft = function (scrollLeft, leftSign) {
+        if (leftSign) {
+            scrollLeft = leftSign == -1 && this.parent.enableRtl ? -scrollLeft : scrollLeft;
+        }
         this.element.scrollLeft = scrollLeft;
         this.parent.ganttChartModule.chartTimelineContainer.scrollLeft = this.element.scrollLeft;
         this.previousScroll.left = this.element.scrollLeft;
@@ -4273,6 +4313,21 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            for (var i = 0; i < this.parent.chartRowsModule.ganttChartTableBody.children.length; i++) {
+                if (this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[4]) {
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[2].setAttribute('tabindex', '-1');
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[4].setAttribute('tabindex', '-1');
+                }
+                else {
+                    if (this.parent.viewType === 'ProjectView') {
+                        this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                    }
+                    else if (this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0]) {
+                        this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0].setAttribute('tabindex', '-1');
+                    }
+                }
+            }
             if (this.parent.enableCriticalPath) {
                 var crtiticalModule = this.parent.criticalPathModule;
                 this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
@@ -4336,11 +4391,13 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         for (var i = 0; i < rangeCollection.length; i++) {
             var height = this.getRangeHeight(currentRecord);
             var leftDiv = createElement('div', {
-                className: rangeChildContainer + ' ' + 'e-leftarc', styles: "left:" + rangeCollection[i].left + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px;\n                height: " + (height + 1) + "px; border-right: 0px"
+                className: rangeChildContainer + ' ' + 'e-leftarc', styles: (this.parent.enableRtl ? 'right:' : 'left:') +
+                    ((this.parent.enableRtl ? rangeCollection[i].left + rangeCollection[i].width - 5 : rangeCollection[i].left) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px;\n                height: " + (height + 1) + "px; border-right: 0px")
             });
             var rightDiv = createElement('div', {
                 className: rangeChildContainer + ' ' + 'e-rightarc',
-                styles: "left:" + (rangeCollection[i].left + rangeCollection[i].width - 5) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px; height: " + (height + 1) + "px;\n                border-left: 0px"
+                styles: (this.parent.enableRtl ? 'right:' : 'left:') + ((this.parent.enableRtl ? rangeCollection[i].left :
+                    rangeCollection[i].left + rangeCollection[i].width - 5) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px; height: " + (height + 1) + "px;\n                border-left: 0px")
             });
             parentDiv.appendChild(leftDiv);
             parentDiv.appendChild(rightDiv);
@@ -4355,6 +4412,10 @@ var GanttChart = /** @__PURE__ @class */ (function () {
     GanttChart.prototype.renderTimelineContainer = function () {
         this.chartTimelineContainer =
             createElement('div', { className: timelineHeaderContainer });
+        if (this.parent.enableRtl) {
+            this.chartTimelineContainer.style.borderLeftWidth = '1px';
+            this.chartTimelineContainer.style.borderRightWidth = '0px';
+        }
         this.chartTimelineContainer.setAttribute("role", "presentation");
         this.chartElement.appendChild(this.chartTimelineContainer);
     };
@@ -4527,7 +4588,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         scrollLeft = this.scrollElement.scrollWidth <= scrollLeft ? this.scrollElement.scrollWidth : scrollLeft;
         if ((this.scrollElement.offsetWidth + this.parent.ganttChartModule.scrollElement.scrollLeft) < scrollLeft
             || (this.scrollElement.scrollLeft > scrollLeft)) {
-            this.scrollObject.setScrollLeft(scrollLeft - 50);
+            this.scrollObject.setScrollLeft(scrollLeft - 50, this.parent.enableRtl ? -1 : 0);
         }
         //  this.parent.ganttChartModule.scrollObject.updateLeftPosition();
     };
@@ -4585,6 +4646,13 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         }
         this.parent.notify('chartMouseUp', e);
         if (this.parent.showActiveElement) {
+            this.parent.showIndicator = true;
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
             if (this.focusedElement && !e.target.classList.contains('e-split-bar')) {
                 this.focusedElement.tabIndex = this.focusedElement.tabIndex === 0 ? -1 : this.focusedElement.tabIndex;
                 removeClass([this.focusedElement], 'e-active-container');
@@ -5604,6 +5672,12 @@ var Timeline = /** @__PURE__ @class */ (function () {
             cancel: false
         };
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         if (!args.cancel) {
             newTimeline = args.timeline;
             this.changeTimelineSettings(newTimeline);
@@ -5645,6 +5719,12 @@ var Timeline = /** @__PURE__ @class */ (function () {
                 timeline: this.parent.currentZoomingLevel
             };
             this.parent.trigger('actionComplete', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
         }
     };
     /**
@@ -5712,6 +5792,12 @@ var Timeline = /** @__PURE__ @class */ (function () {
             this.parent.toolbarModule.enableItems([this.parent.controlId + '_zoomin', this.parent.controlId + '_zoomout'], true);
         }
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         this.changeTimelineSettings(newTimeline);
     };
     Timeline.prototype.bottomTierCellWidthCalc = function (mode, zoomLevel, date) {
@@ -6823,7 +6909,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
                 var validStartLeft = this.parent.dataOperation.getTaskLeft(validStartDate, false);
                 var validEndLeft = this.parent.dataOperation.getTaskLeft(validEndDate, false);
                 var isChanged = void 0;
-                if (!isNullOrUndefined(maxStartLeft) && ((minStartDate < this.timelineStartDate) || (!isNullOrUndefined(this.parent.editModule.taskbarEditModule)) && (!isNullOrUndefined(this.parent.editModule.taskbarEditModule.taskBarEditAction))) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
+                if (!isNullOrUndefined(maxStartLeft) && ((minStartDate < this.timelineStartDate) ||
+                    (!isNullOrUndefined(this.parent.editModule.taskbarEditModule)) &&
+                        (!isNullOrUndefined(this.parent.editModule.taskbarEditModule.taskBarEditAction))) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
                     isChanged = 'prevTimeSpan';
                     minStartDate = minStartDate > this.timelineStartDate ? this.timelineStartDate : minStartDate;
                 }
@@ -7065,9 +7153,12 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
         this.parent.treeGrid.showColumnMenu = this.parent.showColumnMenu;
         this.parent.treeGrid.enableCollapseAll = this.parent.collapseAllParentTasks;
         this.parent.treeGrid.columnMenuItems = this.parent.columnMenuItems;
+        this.parent.treeGrid.enableRtl = this.parent.enableRtl;
         this.parent.treeGrid.childMapping = isNullOrUndefined(this.parent.taskFields.child) ? '' : this.parent.taskFields.child;
         this.parent.treeGrid.treeColumnIndex = this.parent.treeColumnIndex;
         this.parent.treeGrid.columns = this.treeGridColumns;
+        this.parent.treeGrid.loadingIndicator = this.parent.loadingIndicator;
+        this.parent.treeGrid.enableVirtualMaskRow = this.parent.enableVirtualMaskRow;
         if (this.parent.dataSource instanceof Object && isCountRequired(this.parent)) {
             // In order to bind the observable data at load time, hasChildMapping is necessary to be mapped.
             this.parent.treeGrid.hasChildMapping = 'isParent';
@@ -7161,6 +7252,14 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
     GanttTreeGrid.prototype.dataBound = function (args) {
         this.ensureScrollBar();
         this.parent.treeDataBound(args);
+        if (this.parent.isVirtualScroll) {
+            if ((this.parent.enableVirtualMaskRow && this.parent.enableVirtualization) ||
+                (this.parent.enableVirtualization && !this.parent.enableVirtualMaskRow && this.parent.loadingIndicator.indicatorType === "Shimmer") ||
+                (this.parent.loadingIndicator.indicatorType === "Shimmer")) {
+                this.parent.hideMaskRow();
+            }
+            this.parent.isVirtualScroll = false;
+        }
         this.prevCurrentView = extend([], [], this.parent.currentViewData, true);
     };
     GanttTreeGrid.prototype.dataStateChange = function (args) {
@@ -7195,6 +7294,12 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
             var collapsedArgs = this.createExpandCollapseArgs(args);
             this.parent.ganttChartModule.collapsedGanttRow(collapsedArgs);
         }
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     };
     GanttTreeGrid.prototype.expanded = function (args) {
         if (!this.parent.ganttChartModule.isExpandCollapseFromChart && !this.parent.isExpandCollapseLevelMethod) {
@@ -7203,6 +7308,12 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
                 this.parent.ganttChartModule.expandedGanttRow(expandedArgs);
             }
         }
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     };
     GanttTreeGrid.prototype.actionBegin = function (args) {
         this.parent.notify('actionBegin', args);
@@ -7211,6 +7322,14 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
             setValue('doubleClickTarget', null, this.parent.treeGrid.editModule);
         }
         this.parent.trigger('actionBegin', args);
+        if (args.requestType != "virtualscroll" && args.type != "edit" && args.requestType != "beginEdit") {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
+        }
     }; // eslint-disable-next-line
     GanttTreeGrid.prototype.created = function (args) {
         this.updateKeyConfigSettings();
@@ -7279,6 +7398,12 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
             this.parent.addDeleteRecord = false;
         }
         this.parent.trigger('actionComplete', updatedArgs);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     };
     GanttTreeGrid.prototype.updateKeyConfigSettings = function () {
         delete this.parent.treeGrid.grid.keyboardModule.keyConfigs.delete;
@@ -8465,11 +8590,44 @@ var ResourceFields = /** @__PURE__ @class */ (function (_super) {
     return ResourceFields;
 }(ChildProperty));
 
+var __extends$18 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$17 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Configures the Loading Indicator of the Gantt.
+ */
+var LoadingIndicator = /** @__PURE__ @class */ (function (_super) {
+    __extends$18(LoadingIndicator, _super);
+    function LoadingIndicator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$17([
+        Property('Spinner')
+    ], LoadingIndicator.prototype, "indicatorType", void 0);
+    return LoadingIndicator;
+}(ChildProperty));
+
 /**
  * Export all generated models for complex settings
  */
 
-var __extends$18 = (undefined && undefined.__extends) || (function () {
+var __extends$19 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -8486,7 +8644,7 @@ var __extends$18 = (undefined && undefined.__extends) || (function () {
  * To render the chart rows in Gantt
  */
 var ChartRows = /** @__PURE__ @class */ (function (_super) {
-    __extends$18(ChartRows, _super);
+    __extends$19(ChartRows, _super);
     function ChartRows(ganttObj) {
         var _this = _super.call(this, ganttObj) || this;
         _this.taskBarHeight = 0;
@@ -8578,7 +8736,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getIndicatorNode = function (indicator) {
         var templateString = '<label class="' + label + ' ' + taskIndicatorDiv + '"style="line-height:'
             + (this.parent.rowHeight) + 'px;' +
-            'left:' + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
+            (this.parent.enableRtl ? 'right:' : 'left:') + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
     };
     /**
@@ -8604,6 +8762,13 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getChildTaskbarNode = function (i, rootElement) {
         var childTaskbarNode = null;
         var data = this.templateData;
+        var direction;
+        if (this.parent.enableRtl) {
+            direction = 'right:';
+        }
+        else {
+            direction = 'left:';
+        }
         if (this.childTaskbarTemplateFunction) {
             childTaskbarNode = this.childTaskbarTemplateFunction(extend({ index: i }, data), this.parent, 'TaskbarTemplate', this.getTemplateID('TaskbarTemplate'), false, undefined, rootElement[0], this.parent.treeGrid['root']);
         }
@@ -8646,14 +8811,15 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     taskLabel$$1 = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align: left;' +
+                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
                 }
                 else {
                     taskLabel$$1 = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'text-align: left;' : '') +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? ('text-align:' +
+                        (this.parent.enableRtl ? 'right;' : 'left;')) : '') +
                         +(this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
                         +(this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
@@ -8665,17 +8831,17 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 (data.ganttProperties.startDate && !data.ganttProperties.endDate && !data.ganttProperties.duration) ? ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                     unscheduledTaskbarLeft + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : manualChildTaskBar) + '"' +
-                    'style="left:' + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
+                    'style="' + direction + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
                     (data.ganttProperties.endDate && !data.ganttProperties.startDate && !data.ganttProperties.duration) ?
                         ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                             unscheduledTaskbarRight + ' ' + (data.ganttProperties.isAutoSchedule ?
                             '' : manualChildTaskBar) + '"' +
-                            'style="left:' + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
+                            'style="' + direction + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
                         (data.ganttProperties.duration && !data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
                             ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                                 unscheduledTaskbar + ' ' + (data.ganttProperties.isAutoSchedule ?
                                 '' : manualChildTaskBar) + '"' +
-                                'style="left:' + data.ganttProperties.left + 'px; width:' + data.ganttProperties.width + 'px;' +
+                                'style="' + direction + data.ganttProperties.left + 'px; width:' + data.ganttProperties.width + 'px;' +
                                 ' height:' + this.taskBarHeight + 'px;"></div>') : '';
             if (data.ganttProperties.startDate && data.ganttProperties.endDate && data.ganttProperties.duration &&
                 (isNullOrUndefined(data.ganttProperties.segments) || (!isNullOrUndefined(data.ganttProperties.segments) &&
@@ -8703,6 +8869,13 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 childTaskbarNode = this.createDivElement(template);
             }
         }
+        if (this.parent.enableRtl && childTaskbarNode[0] && childTaskbarNode[0].querySelector('.e-task-label')) {
+            childTaskbarNode[0].querySelector('.e-task-label').style.marginLeft = '15px';
+            childTaskbarNode[0].querySelector('.e-task-label').style.marginRight = '8px';
+            if (childTaskbarNode[0].querySelector('.e-gantt-child-progressbar')) {
+                childTaskbarNode[0].querySelector('.e-gantt-child-progressbar').style.textAlign = 'left';
+            }
+        }
         return childTaskbarNode;
     };
     ChartRows.prototype.splitTaskbar = function (data, labelString) {
@@ -8722,7 +8895,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             //split taskbar
             '<div class="' + childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + traceChildTaskBar + ' ' +
                 ' e-segmented-taskbar' +
-                '"style="width:' + segment.width + 'px;position: absolute; left:' + segment.left + 'px;height:' +
+                '"style="width:' + segment.width + 'px;position: absolute;' + (this.parent.enableRtl ? 'right:' : 'left:') + segment.left + 'px;height:' +
                 (this.taskBarHeight) + 'px; overflow:' + progressBarVisible + ';" data-segment-index = "' + i + '" aria-label = "' +
                 this.generateSpiltTaskAriaLabel(segment, data.ganttProperties) + '"> ' +
                 this.getSplitTaskbarLeftResizerNode() +
@@ -8730,7 +8903,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 '<div class="' + childProgressBarInnerDiv + ' ' + traceChildProgressBar + ' ' +
                 '" style="border-style:' + (segment.progressWidth ? 'solid;' : 'none;') +
                 'display:' + (segment.progressWidth >= 0 ? 'block;' : 'none;') +
-                'width:' + segment.progressWidth + 'px;height:100%;' +
+                'width:' + segment.progressWidth + 'px;height:100%;' + 'text-align:' + (this.parent.enableRtl ? 'left;' : 'right;') +
                 'border-top-right-radius:' + this.getSplitTaskBorderRadius(segment) + 'px;' +
                 'border-bottom-right-radius:' + this.getSplitTaskBorderRadius(segment) + 'px;">' +
                 // progress label
@@ -8747,19 +8920,20 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getSplitTaskbarLeftResizerNode = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + taskBarLeftResizer + ' ' + icon + '"' +
-            ' style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return template;
     };
     ChartRows.prototype.getSplitTaskbarRightResizerNode = function (segment) {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + taskBarRightResizer + ' ' + icon + '"' +
-            ' style="left:' + (segment.width + rResizerLeft) + 'px;' +
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (segment.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return template;
     };
     ChartRows.prototype.getSplitProgressResizerNode = function (segment) {
+        var width = this.parent.enableRtl ? (segment.progressWidth + 8) : (segment.progressWidth - 6);
         var template = '<div class="' + childProgressResizer + '"' +
-            ' style="left:' + (segment.progressWidth - 6) + 'px;margin-top:' +
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + width + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -8889,6 +9063,12 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         setValue('isEdit', false, this.parent.contextMenuModule);
         setValue('isEdit', false, this.parent);
     };
@@ -9093,7 +9273,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
         var template = '<div class="' + baselineBar + ' ' + '" role="term" style="margin-top:' + this.baselineTop +
-            'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
+            'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
         return this.createDivElement(template);
@@ -9108,7 +9288,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         var data = this.templateData;
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + baselineMilestoneContainer + ' ' + '" style="' +
-            'left:' + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
+            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
             'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
             'px">' + '<div class="' + baselineMilestoneDiv + '">' + '<div class="' + baselineMilestoneDiv +
             ' ' + baselineMilestoneTop + '"  ' +
@@ -9158,6 +9338,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             }
             leftLabelNode[0].appendChild([].slice.call(leftLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            leftLabelNode[0].style.paddingLeft = '25px';
+            leftLabelNode[0].style.paddingRight = '0px';
+        }
         return leftLabelNode;
     };
     ChartRows.prototype.getLableText = function (labelString, labelDiv) {
@@ -9204,6 +9388,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             }
             rightLabelNode[0].appendChild([].slice.call(rightLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            rightLabelNode[0].style.marginLeft = '0px';
+            rightLabelNode[0].style.paddingRight = '25px';
+        }
         return rightLabelNode;
     };
     ChartRows.prototype.getManualTaskbar = function () {
@@ -9223,17 +9411,18 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 taskbarHeight * 2 + 'px;border-left-width:' + taskbarHeight / 5 +
                 'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>');
         var template = '<div class="' + manualParentMainContainer + '"' +
-            'style=left:' + (data.ganttProperties.left - data.ganttProperties.autoLeft) + 'px;' +
+            'style=' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left - data.ganttProperties.autoLeft) + 'px;' +
             'width:' + data.ganttProperties.width + 'px;' +
             'height:' + taskbarHeight + 'px;>' + innerDiv + ((data.ganttProperties.startDate && data.ganttProperties.endDate &&
             data.ganttProperties.duration) || data.ganttProperties.duration ? '<div class="e-gantt-manualparenttaskbar-left" style=' +
-            '"height:' + taskbarHeight + 'px;border-left-width:' + taskbarHeight / 5 +
+            (this.parent.enableRtl ? 'margin-right:0px;' : '') + '"height:' + taskbarHeight + 'px;border-left-width:' + taskbarHeight / 5 +
             'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>' +
-            '<div class="e-gantt-manualparenttaskbar-right" style=' +
-            'left:' + (data.ganttProperties.width - taskbarHeight / 5) + 'px;height:' +
+            '<div class="e-gantt-manualparenttaskbar-right" style=' + (this.parent.enableRtl ? 'margin-right:-8px;' : '') +
+            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.width - taskbarHeight / 5) + 'px;height:' +
             (taskbarHeight) + 'px;border-right-width:' + taskbarHeight / 5 + 'px;border-bottom:' +
             taskbarHeight / 5 + 'px solid transparent;>' + '</div></div>' : '');
-        var milestoneTemplate = '<div class="' + manualParentMilestone + '" style="position:absolute;left:' +
+        var milestoneTemplate = '<div class="' + manualParentMilestone + '" style="position:absolute;' +
+            (this.parent.enableRtl ? 'right:' : 'left:') +
             (data.ganttProperties.left - data.ganttProperties.autoLeft - (this.milestoneHeight / 2)) +
             'px;width:' + (this.milesStoneRadius * 2) +
             'px;">' + '<div class="' + manualParentMilestoneTop + '" style="border-right-width:' +
@@ -9294,7 +9483,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     labelDiv = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align: left;' +
+                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
@@ -9332,6 +9521,13 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             parentTaskbarNode = data.ganttProperties.isMilestone ?
                 this.createDivElement(data.ganttProperties.isAutoSchedule ? milestoneTemplate : '') : template;
         }
+        if (this.parent.enableRtl && parentTaskbarNode[0] && parentTaskbarNode[0].querySelector('.e-task-label')) {
+            parentTaskbarNode[0].querySelector('.e-task-label').style.marginLeft = '15px';
+            parentTaskbarNode[0].querySelector('.e-task-label').style.marginRight = '8px';
+            if (parentTaskbarNode[0].querySelector('.e-gantt-parent-progressbar')) {
+                parentTaskbarNode[0].querySelector('.e-gantt-parent-progressbar').style.textAlign = 'left';
+            }
+        }
         return parentTaskbarNode;
     };
     /**
@@ -9427,35 +9623,36 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
             ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
-                this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;left:' + (data.ganttProperties.left -
+                this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
-            'px;margin-top:' + this.taskBarMarginTop + 'px;left:' + (!data.hasChildRecords || data.ganttProperties.isAutoSchedule ?
+            'px;margin-top:' + this.taskBarMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (!data.hasChildRecords || data.ganttProperties.isAutoSchedule ?
             data.ganttProperties.left : data.ganttProperties.autoLeft) + 'px;height:' +
             this.taskBarHeight + 'px;cursor:' + (data.ganttProperties.isAutoSchedule ? 'move;' : 'auto;'))) + '"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.rightLabelContainer = function () {
         var template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? rightLabelTempContainer :
-            rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="' + (this.parent.enableRtl ? 'right:' : 'left:') + this.getRightLabelLeft(this.templateData) + 'px; height:'
             + (this.parent.rowHeight - 2) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + taskBarLeftResizer + ' ' + icon + '"' +
-            'style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + taskBarRightResizer + ' ' + icon + '"' +
-            'style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
+        var width = this.parent.enableRtl ? (this.templateData.ganttProperties.progressWidth + 8) : (this.templateData.ganttProperties.progressWidth - 6);
         var template = '<div class="' + childProgressResizer + '"' +
-            'style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + width + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -9477,7 +9674,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
                 'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + connectorPointLeft + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
-            '" style="width: ' + this.connectorPointWidth + 'px;' +
+            '" style="width: ' + this.connectorPointWidth + 'px;' + (this.parent.enableRtl ? 'margin-right:2px;' : '') +
             'height: ' + this.connectorPointWidth + 'px;">' + this.touchLeftConnectorpoint + '</div></div>';
         return this.createDivElement(template);
     };
@@ -9750,8 +9947,14 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         else {
             for (var i = 0; i < this.parent.currentViewData.length; i++) {
                 var tempTemplateData = this.parent.currentViewData[i];
-                if (this.parent.viewType === 'ResourceView' && !tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
-                    collapsedResourceRecord.push(tempTemplateData);
+                if (this.parent.viewType === 'ResourceView') {
+                    if (this.parent.editModule && this.parent.editModule.isResourceTaskDeleted) {
+                        this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
+                        this.parent.editModule.isResourceTaskDeleted = false;
+                    }
+                    if (!tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
+                        collapsedResourceRecord.push(tempTemplateData);
+                    }
                 }
                 var tRow = this.getGanttChartRow(i, tempTemplateData);
                 this.ganttChartTableBody.appendChild(tRow);
@@ -9795,7 +9998,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
         var connectorLineLeftNode = this.getLeftPointNode();
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
         }
         if (this.templateData.hasChildRecords) {
@@ -9879,7 +10082,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
             var connectorLineRightNode = this.getRightPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
         }
@@ -11171,19 +11374,8 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
      */
     ConnectorLine.prototype.createConnectorLineObject = function (parentGanttData, childGanttData, predecessor) {
         var connectorObj = {};
-        var updatedRecords;
-        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport) {
-            if (this.parent.pdfExportModule['helper']['exportProps'].exportType &&
-                this.parent.pdfExportModule['helper']['exportProps'].exportType === 'CurrentViewData') {
-                updatedRecords = this.expandedRecords;
-            }
-            else {
-                updatedRecords = this.parent.flatData;
-            }
-        }
-        else {
-            updatedRecords = this.expandedRecords;
-        }
+        var updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
+            this.parent.flatData : this.expandedRecords;
         var parentIndex = updatedRecords.indexOf(parentGanttData);
         var childIndex = updatedRecords.indexOf(childGanttData);
         var parentGanttRecord = parentGanttData.ganttProperties;
@@ -11249,6 +11441,9 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
         }
         this.parent.ganttChartModule.chartBodyContent.appendChild(this.dependencyViewContainer);
+        for (var i = 0; i < this.dependencyViewContainer.children.length; i++) {
+            this.dependencyViewContainer.children[i].children[0].setAttribute('tabindex', '-1');
+        }
     };
     /**
      * To get parent position.
@@ -11567,85 +11762,96 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             var div = '<div class="' + connectorLineContainer +
                 '" tabindex="-1" style="';
+            var direction = this.parent.enableRtl ? 'right:' : 'left:';
             var eLine = '<div class="' + connectorLine + '" style="' +
                 (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var rightArrow = '<div class="' + connectorLineRightArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var leftArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var duplicateStingOne = leftArrow + (isMilestone ? 'left:0px;' : '') +
-                this.getBorderStyles('right', 10) +
+            var rightArrow = void 0;
+            var leftArrow = void 0;
+            if (this.parent.enableRtl) {
+                leftArrow = '<div class="' + connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                rightArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            else {
+                rightArrow = '<div class="' + connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                leftArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            var duplicateStingOne = leftArrow + (isMilestone ? (this.parent.enableRtl ? 'right:0px;' : 'left:0px;') : '') +
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10) +
                 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-            var duplicateStingTwo = this.getBorderStyles('left', 10) +
+            var duplicateStingTwo = this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                 'top:' + (-6) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
             var duplicateStingThree = this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>' + eLine +
                 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                 this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
-            var duplicateStingFour = leftArrow + 'left:' +
+            var duplicateStingFour = leftArrow + (this.parent.enableRtl ? 'right:' : 'left:') +
                 (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
-                this.getBorderStyles('right', 10);
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10);
             var duplicateStingFive = 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;' +
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
+                div = div + direction + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
                     ((((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10) + 1) :
                     (((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
                     'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((data.parentIndex * data.rowHeight) + addTop +
+                div = div + direction + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((data.parentIndex * data.rowHeight) + addTop +
                     this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType2">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
+                div = div + direction + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
                     (isMilestoneParent ? 11 : 10) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
                     'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:0px;' +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;top:' + (-6 - this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) + 'px;' +
                     'top:' + (-6) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
@@ -11659,49 +11865,49 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
+                div = div + direction + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
                     'px;width:0px;' + 'height:' + (this.getconnectorLineGap(data) - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;' +
                     'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:' + (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : 'left:' +
+                div = div + (isMilestoneParent ? direction + (((data.parentLeft +
+                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : direction +
                     (((data.parentLeft + data.parentWidth) - data.childLeft) + 20) + 'px;width:10px;') +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6) + 'px;' +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
                     'px;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;left:' +
+                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' + direction +
                     (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'top:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     (isMilestoneParent ? ((data.childLeft - (data.parentLeft + data.parentWidth + 20) + 1) + this.lineStroke) :
                         ((data.childLeft - (data.parentLeft + data.parentWidth + 20)) + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
+                div = div + direction + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:' +
                     (data.childLeft - data.parentLeft) + 'px;' + duplicateStingThree;
@@ -11710,11 +11916,11 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + duplicateStingTwo;
+                div = div + direction + '10px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:10px;' + duplicateStingThree;
                 div = div + eLine;
@@ -11723,7 +11929,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType2') {
-                div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType2">';
                 div = div + eLine;
@@ -11736,14 +11942,14 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                 div = div + 'width:' + setInnerElementWidthSSType2 + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + setInnerElementWidthSSType2 + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + setInnerElementWidthSSType2 + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;' +
                     'height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType1') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop +
                         this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
@@ -11756,114 +11962,114 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                 div = div + eLine;
                 div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType1') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
+                div = div + direction + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) - 1) : ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth))) + 'px;' +
                     'width:' + (isMilestoneParent ? (21 + this.lineStroke) : (20 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) -
+                div = div + direction + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
+                div = div + direction + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + (isMilestone ? 'left:0px;' : '') + this.getBorderStyles('right', 10) +
+                div = div + (isMilestone ? direction + '0px;' : '') + this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType2') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'width:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'width:' +
                     (isMilestoneParent ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) +
                         (21 + this.lineStroke)) : (((data.childLeft + data.childWidth) -
                         (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
+                div = div + direction + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
                     (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 10)) + 'px;' +
                     'width:' + (isMilestone ? (16 + this.lineStroke) : (10 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:' + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:4px;width:' +
+                div = div + (isMilestone ? (direction + '4px;width:' +
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 16)) :
-                    ('left:10px;width:' + (((data.parentLeft + data.parentWidth) -
+                    (direction + '10px;width:' + (((data.parentLeft + data.parentWidth) -
                         (data.childLeft + data.childWidth)) + 10))) + 'px;top:' + (-(6 + (5 + this.lineStroke) +
                     (this.lineStroke / 2))) + 'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
+                div = div + direction + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? ('left:' + (((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : ('left:' + ((data.parentLeft + data.parentWidth) -
+                div = div + (isMilestoneParent ? (direction + (((data.parentLeft + data.parentWidth) -
+                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : (direction + ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 'px;width:20')) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
-                div = div + ('left:' + ((data.childLeft + data.childWidth) -
+                div = div + (direction + ((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth))) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 4) +
-                    'px;width:' + (16 + this.lineStroke)) : ('left:' + (((data.childLeft + data.childWidth) -
+                    'px;width:' + (16 + this.lineStroke)) : (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 10) + 'px;width:' + (10 + this.lineStroke))) +
                     'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) -
+                div = div + direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 20) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? ('left:-1px;width:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestoneParent ? (direction + '-1px;width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke)))) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
@@ -11871,11 +12077,11 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
+                div = div + direction + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
                     'px;width:16') : ((((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' +
                     (10 + this.lineStroke))) + 'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
@@ -11891,25 +12097,25 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
-                div = div + (isMilestone ? 'left:4px;width:' + (16 + this.lineStroke) : 'left:10px;width:' +
+                div = div + (isMilestone ? direction + '4px;width:' + (16 + this.lineStroke) : direction + '10px;width:' +
                     (10 + this.lineStroke)) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2) - 1)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType1') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
@@ -11921,12 +12127,12 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                 div = div + 'width:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : ('left:' +
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
+                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : (direction +
                     (((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + duplicateStingFour + 'top:' + (-6 - this.lineStroke) + 'px;' +
@@ -11934,23 +12140,23 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                     (5 + this.lineStroke) + 'px;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType2') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
-                    - (14 - this.lineStroke))) : ('left:10px;width:' + (((data.parentLeft) -
+                div = div + (isMilestone ? (direction + '4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
+                    - (14 - this.lineStroke))) : (direction + '10px;width:' + (((data.parentLeft) -
                     (data.childLeft + data.childWidth)) - (20 - this.lineStroke)))) +
                     'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:0px;' + this.getBorderStyles('right', 10) +
+                div = div + direction + '0px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
@@ -12139,12 +12345,19 @@ var Splitter$1 = /** @__PURE__ @class */ (function () {
         this.parent.splitterElement = createElement('div', { className: splitter });
         this.parent.treeGridPane = createElement('div', { className: treeGridPane });
         this.parent.chartPane = createElement('div', { className: ganttChartPane });
-        this.parent.splitterElement.appendChild(this.parent.treeGridPane);
-        this.parent.splitterElement.appendChild(this.parent.chartPane);
+        if (this.parent.enableRtl) {
+            this.parent.splitterElement.appendChild(this.parent.chartPane);
+            this.parent.splitterElement.appendChild(this.parent.treeGridPane);
+        }
+        else {
+            this.parent.splitterElement.appendChild(this.parent.treeGridPane);
+            this.parent.splitterElement.appendChild(this.parent.chartPane);
+        }
         this.splitterObject = new Splitter({
             height: null,
             width: this.parent.ganttWidth.toString(),
             enablePersistence: this.parent.enablePersistence,
+            enableRtl: this.parent.enableRtl,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -12158,6 +12371,9 @@ var Splitter$1 = /** @__PURE__ @class */ (function () {
             ],
             orientation: 'Horizontal',
             resizeStart: function (args) {
+                if (_this.parent.contextMenuModule && _this.parent.contextMenuModule.isOpen) {
+                    _this.parent.contextMenuModule.contextMenu.close();
+                }
                 var leftPane = args.pane[0];
                 var rightPane = args.pane[1];
                 _this.splitterPreviousPositionGrid = leftPane.scrollWidth + 1 + 'px';
@@ -12320,6 +12536,7 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
             '.e-taskbar-left-resizer, .e-taskbar-right-resizer, .e-baseline-gantt-milestone, .e-gantt-manualparenttaskbar';
         this.toolTipObj.position = 'BottomCenter';
         this.toolTipObj.openDelay = 700;
+        this.toolTipObj.enableRtl = this.parent.enableRtl;
         this.toolTipObj.enableHtmlSanitizer = false;
         this.toolTipObj.cssClass = ganttTooltip;
         this.toolTipObj.animation = { open: { effect: 'None', delay: 0 }, close: { effect: 'None', delay: 0 } };
@@ -12960,6 +13177,7 @@ var FocusModule = /** @__PURE__ @class */ (function () {
                     var top_1 = containerPosition.top + (containerPosition.height / 2);
                     var left = containerPosition.left + (containerPosition.width / 2);
                     this.setActiveElement(e.target);
+                    // eslint-disable-next-line security/detect-non-literal-fs-filename
                     contextMenu.open(top_1, left);
                     e.preventDefault();
                     break;
@@ -13064,6 +13282,8 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     __extends(Gantt, _super);
     function Gantt(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.showIndicator = true;
+        _this.singleTier = 0;
         /** @hidden */
         _this.isCancelled = false;
         /** @hidden */
@@ -13259,7 +13479,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * To check whether the date is in DST.
      *
-     * @param {Date} date .
+     * @param {Date} date - Defines the date to check whether it is DST.
      * @returns {boolean} .
      * @private
      */
@@ -13350,9 +13570,348 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         }
         this.splitterModule.renderSplitter();
         this.notify('renderPanels', null);
-        this.showSpinner();
+        if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+            this.showMaskRow();
+        }
+        else {
+            this.showSpinner();
+        }
         this.dataOperation.checkDataBinding();
     };
+    Gantt.prototype.hideMaskRow = function () {
+        var isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
+        if (!isNullOrUndefined(this.contentMaskTable) && isTablePresent != 0) {
+            var maskTable = this.contentMaskTable;
+            remove(maskTable);
+            this.contentMaskTable = null;
+        }
+        isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
+        if (!isNullOrUndefined(this.headerMaskTable) && isTablePresent != 0) {
+            var maskTable = this.headerMaskTable;
+            remove(maskTable);
+            this.headerMaskTable = null;
+        }
+        while ((this.element.querySelectorAll('.e-table-background')).length != 0) {
+            this.element.querySelectorAll('.e-table-background')[0].remove();
+        }
+        while ((this.element.querySelectorAll('.e-temp-timeline')).length != 0) {
+            this.element.querySelectorAll('.e-temp-timeline')[0].remove();
+        }
+        if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
+            for (var i = 0; i < this.singleTier; i++) {
+                if (!isNullOrUndefined(this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i])) {
+                    this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "visible";
+                }
+            }
+        }
+        if (!isNullOrUndefined(this.element.querySelector('.' + timelineHeaderContainer))) {
+            this.element.querySelector('.' + timelineHeaderContainer)['style'].position = "relative";
+        }
+        if (!isNullOrUndefined(this.element.getElementsByClassName(chartBodyContent)[0])) {
+            this.element.getElementsByClassName(chartBodyContent)[0]['style'].visibility = "visible";
+        }
+    };
+    Gantt.prototype.showMaskRow = function () {
+        var ganttHeader = this.chartPane.childNodes[0].childNodes[0];
+        this.scrollLeftValue = this.chartPane.childNodes[0].childNodes[0]['scrollLeft'];
+        var ganttContent = this.chartPane.childNodes[0].childNodes[1];
+        if (!this.contentMaskTable) {
+            if (ganttContent) {
+                var content$$1 = ganttContent;
+                this.renderBackGround(content$$1);
+                if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
+                    this.singleTier = this.timelineModule.isSingleTier ? 1 : 2;
+                    for (var i = 0; i < this.singleTier; i++) {
+                        this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "hidden";
+                    }
+                }
+                if (this.singleTier === 0) {
+                    this.singleTier = 2;
+                }
+                this.element.getElementsByClassName(chartBodyContent)[0]['style'].visibility = "hidden";
+                this.contentMaskTable = this.contentMaskTable = this.createMaskTable(content$$1);
+            }
+            if (ganttHeader) {
+                this.element.querySelector('.' + timelineHeaderContainer)['style'].position = "static";
+                var content$$1 = ganttHeader;
+                this.renderHeaderBackground(content$$1);
+                this.headerMaskTable = this.headerMaskTable = this.createMaskTable(content$$1);
+            }
+        }
+    };
+    Gantt.prototype.renderHeaderBackground = function (element) {
+        var parentElement = element;
+        var timelineHeight = element.getBoundingClientRect().height;
+        var header = closest(parentElement, '.' + timelineHeaderContainer) ? true : false;
+        if (header) {
+            var div = this.createElement('div', { className: 'e-table-background' });
+            var tempRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                    style: 'height: ' + timelineHeight + 'px;'
+                } });
+            var backgroundLines = 0;
+            var containerWidth = Math.round(element.getBoundingClientRect().width);
+            for (var i = 0; i < 3; i++) {
+                if (this.enableRtl) {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (containerWidth -= ((160))) + 'px; top:0px;'
+                        } }));
+                }
+                else {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (backgroundLines += ((160))) + 'px; top:0px;'
+                        } }));
+                }
+            }
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+    };
+    Gantt.prototype.renderBackGround = function (element) {
+        var parentElement = element;
+        var timelineHeight = element.getBoundingClientRect().height;
+        var content$$1 = closest(parentElement, '.' + chartBodyContainer) ? true : false;
+        if (content$$1) {
+            var div = this.createElement('div', { className: 'e-table-background' });
+            var tempRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                    style: 'height: ' + timelineHeight + 'px;'
+                } });
+            var backgroundLines = 0;
+            var containerWidth = Math.round(element.getBoundingClientRect().width);
+            for (var i = 0; i < 3; i++) {
+                if (this.enableRtl) {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (containerWidth -= (160)) + 'px;z-index:1;'
+                        } }));
+                }
+                else {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (backgroundLines += (160)) + 'px;z-index:1;'
+                        } }));
+                }
+            }
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+    };
+    Gantt.prototype.createMaskTable = function (element) {
+        var parentElement = element;
+        var shimmerContainerHeight = element.getBoundingClientRect().height;
+        var header = closest(parentElement, '.' + timelineHeaderContainer) ? true : false;
+        var maskTable;
+        if (header) {
+            maskTable = this.createEmptyTimeLineTable(shimmerContainerHeight);
+            maskTable.style.position = 'sticky';
+            maskTable.style.left = 0 + 'px';
+            if (this.enableRtl) {
+                maskTable.style.removeProperty('left');
+            }
+        }
+        else {
+            maskTable = this.createEmptyMaskTable(shimmerContainerHeight);
+            maskTable.style.position = 'absolute';
+            maskTable.style.zIndex = 1;
+        }
+        if (!header) {
+            maskTable.style.height = element.getBoundingClientRect().height + 'px';
+            parentElement.insertBefore(maskTable, parentElement.firstChild);
+        }
+        else {
+            maskTable.style.height = element.getBoundingClientRect().height + 'px';
+            var div = this.createElement('div', { className: 'e-temp-timeline' });
+            div.style.width = 614 + 'px';
+            div.style.position = 'sticky';
+            if (this.enableRtl) {
+                div.style['margin-right'] = Math.abs(this.scrollLeftValue) + 'px';
+            }
+            else {
+                div.style['margin-left'] = this.scrollLeftValue + 'px';
+            }
+            div.appendChild(maskTable);
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+        return maskTable;
+    };
+    Gantt.prototype.createEmptyTimeLineTable = function (timelineHeight) {
+        var table = this.createElement('table', { className: 'e-table e-masked-table' });
+        var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
+        var row = [];
+        var duplicateRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                style: 'height: ' + timelineHeight / 2 + 'px;'
+            } });
+        for (var i = 0; i < this.singleTier; i++) {
+            row.push(duplicateRow.cloneNode(true));
+        }
+        this.topBottomHeader = 0;
+        for (var i = 0; i < row.length; i++) {
+            tbody.appendChild(this.applyTimelineMaskRow(row[i]));
+            this.topBottomHeader = this.topBottomHeader + 1;
+        }
+        table.appendChild(tbody);
+        table.style.width = 100 + '%';
+        return table;
+    };
+    Gantt.prototype.applyTimelineMaskRow = function (row) {
+        var maskRow = row;
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        for (var i = 0; i < maskRow.childNodes.length - 1; i++) {
+            maskRow.childNodes[i]['style']['width'] = 166 + 'px';
+        }
+        var maskCells = [].slice.call(maskRow.childNodes);
+        for (var i = 0; i < maskCells.length; i++) {
+            var maskCell = maskCells[i];
+            switch (this.topBottomHeader) {
+                case 0:
+                    if (this.enableRtl) {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
+                        maskCell.children[0]['style'].left = -20 + 'px';
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
+                    }
+                    break;
+                case 1:
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    var innerMaskCells = [].slice.call(maskCell.childNodes);
+                    for (var i_1 = 0; i_1 < innerMaskCells.length; i_1++) {
+                        var htmlInner = innerMaskCells[i_1];
+                        if (i_1 === 0) {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
+                                htmlInner.children[0]['style'].left = -14 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
+                            }
+                        }
+                        else if (i_1 === 1) {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
+                                htmlInner.children[0]['style'].left = -30 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
+                            }
+                        }
+                        else {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
+                                htmlInner.children[0]['style'].left = -60 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
+                            }
+                        }
+                    }
+                    break;
+            }
+        }
+        return maskRow;
+    };
+    Gantt.prototype.createEmptyMaskTable = function (timelineHeight) {
+        var table = this.createElement('table', { className: 'e-table e-masked-table' });
+        var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
+        var row = [];
+        var duplicateRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                style: 'height: ' + timelineHeight / 7 + 'px;'
+            } });
+        this.columnLoop = 0;
+        for (var i = 0; i < 6; i++) {
+            row.push(duplicateRow.cloneNode(true));
+        }
+        for (var j = 0; j < row.length; j++) {
+            if (this.columnLoop < 4) {
+                this.columnLoop = this.columnLoop + 1;
+            }
+            else if (this.columnLoop === 4) {
+                this.columnLoop = 1;
+            }
+            tbody.appendChild(this.applyMaskRow(row[j]));
+        }
+        table.appendChild(tbody);
+        table.style.width = 100 + '%';
+        var div = this.createElement('div', { className: 'e-temp-container' });
+        div.style.width = 'calc(100% - ' + 17 + 'px)';
+        div.style.overflow = 'hidden';
+        div.appendChild(table);
+        return div;
+    };
+    Gantt.prototype.applyMaskRow = function (row) {
+        var maskRow = row;
+        if (this.columnLoop < 4) {
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+        }
+        else {
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+        }
+        var maskCells = [].slice.call(maskRow.childNodes);
+        for (var i = 0; i < maskCells.length; i++) {
+            var maskCell = maskCells[i];
+            switch (this.columnLoop) {
+                case 1:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
+                            maskCell.children[0]['style'].left = -14 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
+                        }
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell02"></span>';
+                    }
+                    break;
+                case 2:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
+                            maskCell.children[0]['style'].left = -14 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
+                        }
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell04"></span>';
+                    }
+                    break;
+                case 3:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
+                            maskCell.children[0]['style'].left = -64 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
+                        }
+                    }
+                    else {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
+                            maskCell.children[0]['style'].left = -192 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
+                        }
+                    }
+                    break;
+                case 4:
+                    if (this.enableRtl) {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
+                        maskCell.children[0]['style'].left = -388 + 'px';
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
+                    }
+                    break;
+            }
+        }
+        return maskRow;
+    };
     /**
      * Method used to show spinner.
      *
@@ -13378,7 +13937,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         this.timelineModule.calculateZoomingLevelsPerDayWidth(); // To calculate the perDaywidth
     };
     /**
-     * @param {boolean} isChange .
+     * @param {boolean} isChange -Defines whether task data is changed.
      * @returns {void} .
      * @private
      */
@@ -13478,7 +14037,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Method for updating row height value in connector line collections
      *
-     * @param {IConnectorLineObject[]} collection .
+     * @param {IConnectorLineObject[]} collection  -Defines the CollectorLine collection.
      * @returns {void} .
      * @private
      */
@@ -13514,7 +14073,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         this.currentViewData = this.treeGrid.getCurrentViewRecords().slice();
     };
     /**
-     * @param {IGanttData} records .
+     * @param {IGanttData} records -Defines the delete record collections.
      * @returns {IGanttData} .
      * @private
      */
@@ -13526,7 +14085,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         return updatedRecord;
     };
     /**
-     * @param {object} args .
+     * @param {object} args -Update the gantt element content height.
      * @returns {void} .
      * @private
      */
@@ -13879,7 +14438,12 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                 this.treeGrid.height = '100%';
                 this.notify('tree-grid-created', {});
                 this.createGanttPopUpElement();
-                this.hideSpinner();
+                if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+                    this.hideMaskRow();
+                }
+                else {
+                    this.hideSpinner();
+                }
                 setValue('isGanttCreated', true, args);
                 this.renderComplete();
             }
@@ -13891,6 +14455,11 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
         }
         this.notify('recordsUpdated', {});
+        for (var i = 0; i < document.getElementsByClassName('e-timeline-header-table-container').length; i++) {
+            for (var j = 0; j < document.getElementsByClassName('e-timeline-header-table-container')[i].children[0].children[0].children.length; j++) {
+                document.getElementsByClassName('e-timeline-header-table-container')[i].children[0].children[0].children[j].children[0].setAttribute('tabindex', '-1');
+            }
+        }
         if (this.enableCriticalPath && this.criticalPathModule) {
             var criticalModule = this.criticalPathModule;
             this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
@@ -13922,8 +14491,8 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Called internally, if any of the property value changed.
      *
-     * @param {GanttModel} newProp .
-     * @param {GanttModel} oldProp .
+     * @param {GanttModel} newProp - Defines the New GanttModel.
+     * @param {GanttModel} oldProp - Defines the old GanttModel.
      * @returns {void} .
      * @private
      */
@@ -13986,6 +14555,12 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                     this.dataOperation.checkDataBinding(true);
                     break;
                 case 'enableCriticalPath':
+                    if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+                        this.hideMaskRow();
+                    }
+                    else {
+                        this.hideSpinner();
+                    }
                     if (this.enableCriticalPath && this.criticalPathModule) {
                         this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
                         var criticalModule = this.criticalPathModule;
@@ -14532,7 +15107,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             thWidth = thElements[n].style.width;
             var divElement = createElement('div', {
                 className: 'e-line-container-cell',
-                styles: 'left:' + leftPos + 'px'
+                styles: (this.enableRtl ? 'right:' + (leftPos + 1) : 'left:' + leftPos) + 'px'
             });
             containerDiv.appendChild(divElement);
         }
@@ -14667,12 +15242,18 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      *
-     * @param {object} args .
+     * @param {object} args -Defines the edited event args.
      * @returns {void} .
      * @private
      */
     Gantt.prototype.actionBeginTask = function (args) {
         this.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+            this.showMaskRow();
+        }
+        else {
+            this.showSpinner();
+        }
     };
     /**
      * To move horizontal scroll bar of Gantt to specific date.
@@ -14708,7 +15289,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(left)) {
             left = this.ganttChartModule.scrollElement.scrollWidth <= left ?
                 this.ganttChartModule.scrollElement.scrollWidth : left;
-            this.ganttChartModule.scrollObject.setScrollLeft(left);
+            this.ganttChartModule.scrollObject.setScrollLeft(left, this.enableRtl ? -1 : 0);
         }
         if (!isNullOrUndefined(top)) {
             top = this.ganttChartModule.scrollElement.scrollHeight <= top ? this.ganttChartModule.scrollElement.scrollHeight : top;
@@ -14741,8 +15322,8 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Get parent task by clone parent item.
      *
-     * @param {IGanttData} ganttRecord .
-     * @param {number} level .
+     * @param {IGanttData} ganttRecord -Defines the Gantt record.
+     * @param {number} level -Defines the selected record level.
      * @returns {IGanttData} .
      * @hidden
      */
@@ -14855,7 +15436,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * To update timeline at start point with one unit.
      *
-     * @param {string} mode .
+     * @param {string} mode - Render previous span of Timeline.
      * @returns {void} .
      * @public
      */
@@ -14865,7 +15446,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * To update timeline at end point with one unit.
      *
-     * @param {string} mode .
+     * @param {string} mode - Render next span of Timeline.
      * @returns {void} .
      * @public
      */
@@ -14939,7 +15520,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Method to clear edited collections in gantt set edit flag value
      *
-     * @param {boolean} isStart .
+     * @param {boolean} isStart -Defines whether to initiate edit action.
      * @returns {void} .
      * @private
      */
@@ -15212,8 +15793,8 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * To update existing taskId with new unique Id.
      *
-     * @param {number | string} currentId .
-     * @param {number | string} newId .
+     * @param {number | string} currentId - Defines the current Id of the record.
+     * @param {number | string} newId - Defines the new Id of the record.
      * @returns {void} .
      */
     Gantt.prototype.updateTaskId = function (currentId, newId) {
@@ -15315,9 +15896,9 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Reorder the rows based on given indexes and position
      *
-     * @param {number[]} fromIndexes .
-     * @param {number} toIndex .
-     * @param {string} position .
+     * @param {number[]} fromIndexes - Defines the Dragged record index.
+     * @param {number} toIndex - Defines the Dropped record index.
+     * @param {string} position -Defines the position of the dropped row.
      * @returns {void} .
      */
     Gantt.prototype.reorderRows = function (fromIndexes, toIndex, position) {
@@ -15492,7 +16073,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * Method to get class name for unscheduled tasks
      *
-     * @param {ITaskData} ganttProp .
+     * @param {ITaskData} ganttProp -Defines the Gantt propertie.
      * @returns {boolean} .
      * @private
      */
@@ -15566,7 +16147,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         var clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
         var clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
         var top = box.top + scrollTop - clientTop;
-        var left = box.left + scrollLeft - clientLeft;
+        var left = this.enableRtl ? box.right + scrollLeft - clientLeft : box.left + scrollLeft - clientLeft;
         return { top: Math.round(top), left: Math.round(left), width: box.width, height: box.height };
     };
     /**
@@ -15839,7 +16420,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     /**
      * To change the mode of a record.
      *
-     * @param {object} data .
+     * @param {object} data - Use to change the TaskMode either manual, auto or custom.
      * @returns {void} .
      */
     Gantt.prototype.changeTaskMode = function (data) {
@@ -15910,6 +16491,12 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Gantt.prototype, "disableHtmlEncode", void 0);
+    __decorate([
+        Complex({}, LoadingIndicator)
+    ], Gantt.prototype, "loadingIndicator", void 0);
+    __decorate([
+        Property(true)
+    ], Gantt.prototype, "enableVirtualMaskRow", void 0);
     __decorate([
         Property(true)
     ], Gantt.prototype, "autoFocusTasks", void 0);
@@ -16943,6 +17530,7 @@ var EditTooltip = /** @__PURE__ @class */ (function () {
         this.toolTipObj = new Tooltip({
             opensOn: opensOn,
             position: 'TopRight',
+            enableRtl: this.parent.enableRtl,
             mouseTrail: mouseTrail,
             cssClass: ganttTooltip,
             target: target ? target : null,
@@ -16992,12 +17580,15 @@ var EditTooltip = /** @__PURE__ @class */ (function () {
             this.parent.tooltipModule.toolTipObj.close();
             this.updateTooltip(segmentIndex);
             if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointLeftDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + connectorPointLeft));
             }
             else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + connectorPointRight));
             }
             else {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
             }
         }
@@ -17030,14 +17621,29 @@ var EditTooltip = /** @__PURE__ @class */ (function () {
                 this.toolTipObj.content = this.getTooltipText(segmentIndex);
                 this.toolTipObj.refresh(this.taskbarEdit.taskBarEditElement);
                 if (this.taskbarEdit.taskBarEditAction === 'LeftResizing') {
-                    this.toolTipObj.offsetX = -taskWidth;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = 0;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'RightResizing' ||
                     this.taskbarEdit.taskBarEditAction === 'ParentResizing') {
-                    this.toolTipObj.offsetX = 0;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = 0;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'ProgressResizing') {
-                    this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -(progressWidth);
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'MilestoneDrag') {
                     this.toolTipObj.offsetX = -(this.parent.chartRowsModule.milestoneHeight / 2);
@@ -17134,7 +17740,7 @@ var EditTooltip = /** @__PURE__ @class */ (function () {
     return EditTooltip;
 }());
 
-var __extends$19 = (undefined && undefined.__extends) || (function () {
+var __extends$20 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -17162,7 +17768,7 @@ var __assign$1 = (undefined && undefined.__assign) || function () {
  * File for handling taskbar editing operation in Gantt.
  */
 var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
-    __extends$19(TaskbarEdit, _super);
+    __extends$20(TaskbarEdit, _super);
     function TaskbarEdit(ganttObj) {
         var _this = _super.call(this, ganttObj) || this;
         _this.isMouseDragged = false;
@@ -17570,8 +18176,14 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         var e = this.getCoordinate(event);
         if (e.pageX || e.pageY) {
             var containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
-            this.mouseDownX = (e.pageX - containerPosition.left) +
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                this.mouseDownX = Math.abs(e.pageX - (containerPosition.left +
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+            }
+            else {
+                this.mouseDownX = (e.pageX - containerPosition.left) +
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
             this.tooltipPositionX = this.mouseDownX;
             this.mouseDownY = e.pageY - containerPosition.top +
                 this.parent.ganttChartModule.scrollObject.previousScroll.top;
@@ -17616,23 +18228,40 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         }
         var containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         var e = this.getCoordinate(event);
-        this.mouseMoveX = e.pageX - containerPosition.left +
-            this.parent.ganttChartModule.scrollObject.previousScroll.left;
+        if (this.parent.enableRtl) {
+            this.mouseMoveX = Math.abs(e.pageX - (containerPosition.left +
+                Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+        }
+        else {
+            this.mouseMoveX = e.pageX - containerPosition.left +
+                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+        }
         this.mouseMoveY = e.pageY - containerPosition.top +
             this.parent.ganttChartModule.scrollObject.previousScroll.top;
         this.dragMouseLeave = false;
         this.isMouseDragCheck();
         if (this.isMouseDragged && this.taskBarEditAction) {
-            var args = {
+            var args_1 = {
                 cancel: false,
                 requestType: 'taskbarediting',
                 taskBarEditAction: this.taskBarEditAction,
                 data: this.taskBarEditRecord
             };
             if (this.segmentIndex !== -1) {
-                args.requestType = 'mergeSegment';
+                args_1.requestType = 'mergeSegment';
             }
-            this.parent.trigger('actionBegin', args, function (arg) {
+            this.parent.trigger('actionBegin', args_1, function (arg) {
+                if (args_1.taskBarEditAction === "ConnectorPointRightDrag" || args_1.taskBarEditAction === "ConnectorPointLeftDrag"
+                    || args_1.taskBarEditAction === "LeftResizing" || args_1.taskBarEditAction === "RightResizing"
+                    || args_1.taskBarEditAction === "ProgressResizing" || args_1.taskBarEditAction === "ChildDrag" || args_1.taskBarEditAction === "ParentDrag" || args_1.taskBarEditAction === "MilestoneDrag" || args_1.taskBarEditAction === "ManualParentDrag") {
+                    _this.parent.showIndicator = false;
+                }
+                if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer" && _this.parent.showIndicator) {
+                    _this.parent.showMaskRow();
+                }
+                else if (_this.parent.showIndicator) {
+                    _this.parent.showSpinner();
+                }
                 if (arg.cancel === false) {
                     _this.taskBarEditingAction(event, false);
                 }
@@ -17715,8 +18344,14 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         var containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         var e = this.getCoordinate(event);
         if (e.pageX || e.pageY) {
-            this.mouseMoveX = e.pageX - containerPosition.left +
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                this.mouseMoveX = Math.abs(e.pageX - (containerPosition.left +
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+            }
+            else {
+                this.mouseMoveX = e.pageX - containerPosition.left +
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
             this.tooltipPositionX = this.mouseMoveX;
             this.mouseMoveY = e.pageY - containerPosition.top +
                 this.parent.ganttChartModule.scrollObject.previousScroll.top;
@@ -17727,8 +18362,15 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         if ((this.taskBarEditRecord.ganttProperties.width > 3 && !(this.taskBarEditAction === 'ProgressResizing' &&
             (this.taskBarEditRecord.ganttProperties.progress === 0 || this.taskBarEditRecord.ganttProperties.progress === 100))) ||
             isConnectorLineEdit) {
-            var mouseX = this.mouseMoveX - this.parent.ganttChartModule.scrollObject.previousScroll.left +
-                containerPosition.left;
+            var mouseX = 0;
+            if (this.parent.enableRtl) {
+                mouseX = Math.abs(Math.abs(this.mouseMoveX) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left) +
+                    containerPosition.left);
+            }
+            else {
+                mouseX = this.mouseMoveX - this.parent.ganttChartModule.scrollObject.previousScroll.left +
+                    containerPosition.left;
+            }
             var mouseY = this.mouseMoveY - this.parent.ganttChartModule.scrollObject.previousScroll.top +
                 containerPosition.top;
             if ((mouseX + 20) >
@@ -17736,6 +18378,12 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('right');
             }
+            else if ((mouseX + 40) >
+                containerPosition.left + this.parent.ganttChartModule.chartBodyContainer.offsetWidth && this.parent.enableRtl && this.parent.ganttChartModule.scrollObject.previousScroll.left == 0) {
+                this.parent.ganttChartModule.scrollObject.previousScroll.left = -1;
+                this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
+                this.startScrollTimer('right');
+            }
             else if ((mouseX - 20) < containerPosition.left) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('left');
@@ -17767,7 +18415,12 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
     TaskbarEdit.prototype.startScrollTimer = function (direction) {
         var _this = this;
         this.stopScrollTimer();
+        var leftSign = 0;
         this.scrollTimer = window.setInterval(function () {
+            if (Math.sign(_this.timerCount) == -1) {
+                leftSign = -1;
+                _this.timerCount = Math.abs(_this.timerCount);
+            }
             if (direction === 'right') {
                 _this.timerCount = (_this.timerCount + 1) >= _this.parent.timelineModule.totalTimelineWidth ?
                     _this.parent.timelineModule.totalTimelineWidth : (_this.timerCount + 1);
@@ -17782,7 +18435,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 _this.parent.ganttChartModule.scrollObject.setScrollTop(_this.timerCount);
             }
             else {
-                _this.parent.ganttChartModule.scrollObject.setScrollLeft(_this.timerCount);
+                _this.parent.ganttChartModule.scrollObject.setScrollLeft(_this.timerCount, leftSign);
             }
             if (_this.taskBarEditAction === 'ConnectorPointLeftDrag'
                 || _this.taskBarEditAction === 'ConnectorPointRightDrag') {
@@ -18478,6 +19131,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
      */
     TaskbarEdit.prototype.setItemPosition = function () {
         var item = this.taskBarEditRecord.ganttProperties;
+        var position = this.parent.enableRtl ? "right" : "left";
         var segment = !isNullOrUndefined(item.segments) ? item.segments[this.segmentIndex] : null;
         var width = this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone ?
             this.parent.chartRowsModule.milestoneHeight : item.width;
@@ -18509,11 +19163,16 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 if (segmentedTaskBarContainer && !isNullOrUndefined(item.segments)
                     && (this.taskBarEditAction === 'RightResizing' || this.segmentIndex !== 0)) {
                     this.taskBarEditElement.style.width = (segment.width) + 'px';
-                    this.taskBarEditElement.style.left = (segment.left) + 'px';
+                    if (this.parent.enableRtl) {
+                        this.taskBarEditElement.style.right = (segment.left) + 'px';
+                    }
+                    else {
+                        this.taskBarEditElement.style.left = (segment.left) + 'px';
+                    }
                 }
                 taskBarMainContainer$$1.style.width = (width) + 'px';
-                taskBarMainContainer$$1.style.left = (item.left) + 'px';
                 leftLabelContainer$$1.style.width = (item.left) + 'px';
+                taskBarMainContainer$$1.style.setProperty(position, (item.left) + 'px');
                 if (this.taskBarEditAction === 'LeftResizing' && this.segmentIndex === 0) {
                     var parent_1 = this.taskBarEditElement.parentElement;
                     var segmentedTasks = parent_1.getElementsByClassName('e-segmented-taskbar');
@@ -18521,31 +19180,42 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                         var segment_4 = item.segments[i];
                         var segmentElement = segmentedTasks[i];
                         segmentElement.style.width = (segment_4.width) + 'px';
-                        segmentElement.style.left = (segment_4.left) + 'px';
+                        if (this.parent.enableRtl) {
+                            segmentElement.style.right = (segment_4.left) + 'px';
+                        }
+                        else {
+                            segmentElement.style.left = (segment_4.left) + 'px';
+                        }
                     }
                 }
                 if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.left = (item.left + width) + 'px';
+                    rightLabelContainer$$1.style.setProperty(position, (item.left + width) + 'px');
                 }
             }
             if (traceConnectorPointRight) {
-                traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width + 2)) + 'px';
+                if (this.parent.enableRtl) {
+                    traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width - 2)) + 'px';
+                }
+                else {
+                    traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width + 2)) + 'px';
+                }
             }
             if (this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone) {
-                taskBarMainContainer$$1.style.left = (item.left - (width / 2)) + 'px';
+                taskBarMainContainer$$1.style.setProperty(position, (item.left - (width / 2)) + 'px');
                 leftLabelContainer$$1.style.width = (item.left - (width / 2)) + 'px';
                 if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.left = (item.left + (width / 2)) + 'px';
+                    rightLabelContainer$$1.style.setProperty(position, (item.left + (width / 2)) + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'ProgressResizing') {
                 if (this.segmentIndex === -1) {
-                    traceChildTaskBar$$1.style.left = (item.left + item.progressWidth - 10) + 'px';
+                    traceChildTaskBar$$1.style.setProperty(position, (item.left + item.progressWidth - 10) + 'px');
                     if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                         traceChildProgressBar$$1.style.width = item.progressWidth + 'px';
                         traceChildProgressBar$$1.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                         traceChildProgressBar$$1.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                        childProgressResizer$$1.style.left = item.progressWidth - 8 + 'px';
+                        var width_1 = this.parent.enableRtl ? item.progressWidth + 8 : item.progressWidth - 8;
+                        childProgressResizer$$1.style.setProperty(position, width_1 + 'px');
                     }
                 }
                 else {
@@ -18553,16 +19223,17 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                     traceChildProgressBar$$1.style.width = item.segments[this.segmentIndex].progressWidth + 'px';
                     traceChildProgressBar$$1.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                     traceChildProgressBar$$1.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                    childProgressResizer$$1.style.left = item.segments[this.segmentIndex].progressWidth - 8 + 'px';
+                    var width_2 = this.parent.enableRtl ? item.segments[this.segmentIndex].progressWidth + 8 : item.segments[this.segmentIndex].progressWidth - 8;
+                    childProgressResizer$$1.style.setProperty(position, width_2 + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'RightResizing' && !isNullOrUndefined(traceChildTaskBar$$1)) {
                 traceChildTaskBar$$1.style.width = (width) + 'px';
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                     traceChildProgressBar$$1.style.width = (item.progressWidth) + 'px';
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = (item.progressWidth - 10) + 'px';
+                        childProgressResizer$$1.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -18576,27 +19247,27 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
             }
             else if (this.taskBarEditAction === 'ParentResizing') {
                 manualParentTaskbar.style.width = manualTaskbar.style.width = (item.width) + 'px';
-                manualParentRight.style.left = (item.width - manualParentLeft.offsetLeft) + 'px';
+                manualParentRight.style.setProperty(position, item.width - manualParentLeft.offsetLeft + 'px');
             }
             else if (this.taskBarEditAction === 'ManualParentDrag') {
-                manualParentTaskbar.style.left = (item.left - item.autoLeft) + 'px';
+                manualParentTaskbar.style.setProperty(position, item.left - item.autoLeft + 'px');
             }
             else {
                 if (!isNullOrUndefined(traceChildTaskBar$$1) && !segmentedTaskBarContainer) {
                     traceChildTaskBar$$1.style.width = (width) + 'px';
                 }
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar$$1.style.width = (item.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = item.progressWidth - 10 + 'px';
+                        childProgressResizer$$1.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
                 if (segmentedTaskBarContainer) {
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar$$1.style.width = (segment.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = segment.progressWidth - 10 + 'px';
+                        childProgressResizer$$1.style.setProperty(position, segment.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -18818,25 +19489,51 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         var y2 = this.mouseMoveY;
         var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
         var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-        var transform = 'rotate(' + angle + 'deg)';
+        var transform = 'rotate(' + (this.parent.enableRtl ? -angle : angle) + 'deg)';
         var left;
+        var width = 0;
+        if (!isNullOrUndefined(document.querySelectorAll(".e-chart-row")[0])) {
+            width = document.querySelectorAll(".e-chart-row")[0].offsetWidth;
+        }
         if (this.taskBarEditAction === 'ConnectorPointLeftDrag') {
-            left = (this.elementOffsetLeft - (this.parent.chartRowsModule.connectorPointWidth / 2)) -
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                left = ((width - (this.elementOffsetLeft + (this.parent.chartRowsModule.connectorPointWidth / 2)))) -
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
+            else {
+                left = (this.elementOffsetLeft - (this.parent.chartRowsModule.connectorPointWidth / 2)) -
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
         }
         if (this.taskBarEditAction === 'ConnectorPointRightDrag') {
-            left = (this.elementOffsetLeft + this.elementOffsetWidth) +
-                (this.parent.chartRowsModule.connectorPointWidth / 2) - this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                left = (width - (this.elementOffsetLeft + this.elementOffsetWidth +
+                    (this.parent.chartRowsModule.connectorPointWidth / 2))) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
+            else {
+                left = (this.elementOffsetLeft + this.elementOffsetWidth) +
+                    (this.parent.chartRowsModule.connectorPointWidth / 2) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
         }
         var top = ((this.elementOffsetTop) + (this.elementOffsetHeight / 2) +
             this.parent.ganttChartModule.chartBodyContainer.offsetTop) - this.parent.ganttChartModule.scrollObject.previousScroll.top;
         this.removeFalseLine(false);
         this.falseLine = createElement('div', {
             className: falseLine, id: 'ganttfalseline' + this.parent.element.id,
-            styles: 'transform-origin: 0% 100%;right: auto;position: absolute;transform:' + transform + ';' +
+            styles: 'position: absolute;transform:' + transform + ';' +
                 'border-top-width: 1px;border-top-style: dashed;z-index: 5;width:' + (length - 3) + 'px;' +
-                'left:' + left + 'px;top:' + top + 'px;'
+                'top:' + top + 'px;'
         });
+        if (this.parent.enableRtl) {
+            this.falseLine.style.left = 'auto';
+            this.falseLine.style.right = left + 'px';
+            this.falseLine.style.transformOrigin = '100% 0%';
+        }
+        else {
+            this.falseLine.style.right = 'auto';
+            this.falseLine.style.left = left + 'px';
+            this.falseLine.style.transformOrigin = '0% 100%';
+        }
         this.parent.ganttChartModule.chartBodyContainer.appendChild(this.falseLine);
     };
     /**
@@ -18921,19 +19618,19 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         var element = target;
         var uniqueId = this.parent.viewType === 'ResourceView' ? fromItem.taskId : fromItem.rowUniqueID;
         if (this.taskBarEditAction === 'ConnectorPointLeftDrag') {
-            predecessor = uniqueId + 'S';
+            predecessor = uniqueId + (this.parent.enableRtl ? 'F' : 'S');
         }
         else if (this.taskBarEditAction === 'ConnectorPointRightDrag') {
-            predecessor = uniqueId + 'F';
+            predecessor = uniqueId + (this.parent.enableRtl ? 'S' : 'F');
         }
         if (this.connectorSecondAction) {
             if (this.connectorSecondAction === 'ConnectorPointLeftDrag') {
-                predecessor += 'S';
-                currentTarget = 'start';
+                predecessor += this.parent.enableRtl ? 'F' : 'S';
+                currentTarget = this.parent.enableRtl ? 'finish' : 'start';
             }
             else if (this.connectorSecondAction === 'ConnectorPointRightDrag') {
-                predecessor += 'F';
-                currentTarget = 'finish';
+                predecessor += this.parent.enableRtl ? 'S' : 'F';
+                currentTarget = this.parent.enableRtl ? 'start' : 'finish';
             }
         }
         if (isNullOrUndefined(toItem)) {
@@ -18957,6 +19654,12 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         args.isValidLink = isValidLink;
         args.requestType = 'ValidateDependency';
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer" && args.requestType != "ValidateDependency") {
+            this.parent.showMaskRow();
+        }
+        else if (args.requestType != "ValidateDependency") {
+            this.parent.showSpinner();
+        }
         args.isValidLink = !isValidLink && args.isValidLink ? false : args.isValidLink;
         if (args.isValidLink) {
             if (!this.editTooltip.toolTipObj && !this.parent.isAdaptive) {
@@ -19352,18 +20055,18 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
         if (!isNullOrUndefined(taskId)) {
             if (!isNullOrUndefined(taskId['ganttProperties'])) {
                 if (typeof taskId['ganttProperties']['taskId'] === 'string') {
-                    this.numericOrString = "stringedit";
+                    this.numericOrString = 'stringedit';
                 }
                 else {
-                    this.numericOrString = "numericedit";
+                    this.numericOrString = 'numericedit';
                 }
             }
             if (isNullOrUndefined(taskId['ganttProperties']) && !isNullOrUndefined(taskId)) {
                 if (isNaN(Number(taskId)) || this.parent.columnByField[this.parent.taskFields.id].editType === "stringedit") {
-                    this.numericOrString = "stringedit";
+                    this.numericOrString = 'stringedit';
                 }
                 else {
-                    this.numericOrString = "numericedit";
+                    this.numericOrString = 'numericedit';
                 }
             }
         }
@@ -19406,6 +20109,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
         dialogModel.animationSettings = { effect: 'None' };
         dialogModel.header = this.localeObj.getConstant(this.isEdit ? 'editDialogTitle' : 'addDialogTitle');
         dialogModel.isModal = true;
+        dialogModel.enableRtl = this.parent.enableRtl;
         dialogModel.allowDragging = this.parent.isAdaptive ? false : true;
         dialogModel.showCloseIcon = true;
         var position = this.parent.isAdaptive ? { X: 'top', Y: 'left' } : { X: 'center', Y: 'center' };
@@ -19416,8 +20120,8 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
         dialogModel.close = this.dialogClose.bind(this);
         dialogModel.closeOnEscape = true;
         dialogModel.beforeClose = function (args) {
-            if (args.closedBy == "escape") {
-                if (args.event.name == "key-pressed" && args.event.target.nodeName == 'INPUT') {
+            if (args.closedBy === "escape") {
+                if (args.event.name === "key-pressed" && args.event.target.nodeName === 'INPUT') {
                     args.cancel = true;
                 }
             }
@@ -19588,6 +20292,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
         var length = dialogSettings.length;
         tabModel.items = tabItems;
         tabModel.locale = this.parent.locale;
+        tabModel.enableRtl = this.parent.enableRtl;
         this.beforeOpenArgs.tabModel = tabModel;
         var index = 0;
         if (length > 0) {
@@ -19667,6 +20372,12 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             cancel: this.beforeOpenArgs.cancel
         };
         this.parent.trigger('actionBegin', this.beforeOpenArgs, function (arg) {
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
             _this.renderTabItems();
             if (!arg.cancel) {
                 tabModel.selected = _this.tabSelectedEvent.bind(_this);
@@ -19689,6 +20400,12 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                     cancel: false
                 };
                 _this.parent.trigger('actionComplete', actionCompleteArgs, function (actionCompleteArg) {
+                    if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                        _this.parent.hideMaskRow();
+                    }
+                    else {
+                        _this.parent.hideSpinner();
+                    }
                     if (actionCompleteArg.cancel) {
                         _this.resetValues();
                     }
@@ -19772,7 +20489,8 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                 {
                     var checkboxModel = {
                         label: column.headerText,
-                        locale: locale
+                        locale: locale,
+                        enableRtl: this.parent.enableRtl
                     };
                     fieldsModel[column.field] = checkboxModel;
                     break;
@@ -19781,6 +20499,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             case 'stringedit':
                 {
                     var textBox = common;
+                    textBox.enableRtl = this.parent.enableRtl;
                     if (column.field === ganttObj.columnMapping.duration || column.field === ganttObj.columnMapping.id || column.field === ganttObj.columnMapping.startDate ||
                         column.field === ganttObj.columnMapping.endDate) {
                         textBox.change = function (args) {
@@ -19793,6 +20512,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             case 'numericedit':
                 {
                     var numeric = common;
+                    numeric.enableRtl = this.parent.enableRtl;
                     if (taskSettings.progress === column.field) {
                         numeric.min = 0;
                         numeric.max = 100;
@@ -19809,6 +20529,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                 {
                     var datePickerObj = common;
                     datePickerObj.format = this.parent.getDateFormat();
+                    datePickerObj.enableRtl = this.parent.enableRtl;
                     datePickerObj.strictMode = true;
                     datePickerObj.firstDayOfWeek = ganttObj.timelineModule.customTimelineSettings.weekStartDay;
                     if (column.field === ganttObj.columnMapping.startDate ||
@@ -19825,6 +20546,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                 {
                     var dateTimePickerObj = common;
                     dateTimePickerObj.format = this.parent.getDateFormat();
+                    dateTimePickerObj.enableRtl = this.parent.enableRtl;
                     dateTimePickerObj.strictMode = true;
                     dateTimePickerObj.firstDayOfWeek = ganttObj.timelineModule.customTimelineSettings.weekStartDay;
                     if (column.field === ganttObj.columnMapping.startDate ||
@@ -19847,6 +20569,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                     common[dataKey] = types;
                     common[fieldsKey] = { value: 'Value' };
                     var dropDownListObj = common;
+                    dropDownListObj.enableRtl = this.parent.enableRtl;
                     dropDownListObj.change = function (args) {
                         if (column.field === taskSettings.manual) {
                             _this.editedRecord.ganttProperties.isAutoSchedule = !args.value;
@@ -20218,8 +20941,8 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                     break;
                 case 'duration':
                     gridColumn = {
-                        field: fields[i], headerText: this_1.localeObj.getConstant(fields[i]), editType: 'stringedit', width: '100px',
-                        edit: {
+                        field: fields[i], headerText: this_1.localeObj.getConstant(fields[i]), editType: 'stringedit',
+                        width: '100px', edit: {
                             write: function (args) {
                                 var inputTextModel;
                                 if (!isNullOrUndefined(_this.beforeOpenArgs[generalTabString])) {
@@ -20284,7 +21007,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             inputValue = dialog.querySelector('#' + ganttId + 'SegmentsTabContainer' + columnName)
                 .ej2_instances[0];
         }
-        if (inputValue.value.toString() !== tempValue.toString()) {
+        if ((!isNullOrUndefined(inputValue.value)) && (inputValue.value.toString() !== tempValue.toString())) {
             inputValue.value = tempValue;
             inputValue.dataBind();
         }
@@ -20619,7 +21342,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                             break;
                         }
                     }
-                    if (typeof (stringOrNumber) === "string") {
+                    if (typeof (stringOrNumber) === 'string') {
                         disabled = false;
                     }
                     else {
@@ -20634,7 +21357,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             }
             if (this.editedRecord.hasChildRecords) {
                 if ((column.field === this.parent.taskFields.endDate && ((!isNullOrUndefined(this.editedRecord['isManual']) &&
-                    this.editedRecord['isManual'] == false) || this.parent.taskMode == 'Auto')) || column.field === this.parent.taskFields.duration ||
+                    this.editedRecord['isManual'] === false) || this.parent.taskMode === 'Auto')) || column.field === this.parent.taskFields.duration ||
                     column.field === this.parent.taskFields.progress || column.field === this.parent.taskFields.work ||
                     column.field === this.parent.taskFields.type) {
                     disabled = true;
@@ -20690,6 +21413,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                     dataSource: new DataManager(_this.idCollection),
                     popupHeight: '180px',
                     allowCustom: false,
+                    enableRtl: _this.parent.enableRtl,
                     fields: { value: 'text' },
                     value: args.rowData[field],
                     change: function (arg) {
@@ -20965,7 +21689,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                 do {
                     if (currentFlatData.parentItem) {
                         currentFlatData = this.parent.flatData[this.parent.ids.indexOf(currentFlatData.parentItem.taskId)];
-                        if (currentFlatData.uniqueID == this.beforeOpenArgs.rowData['uniqueID']) {
+                        if (currentFlatData.uniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
                             this.isValidData = false;
                             break;
                         }
@@ -21218,7 +21942,9 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             }
         }
         if (this.isEdit) {
-            this.updateScheduleProperties(this.editedRecord, this.rowData);
+            if (!isCustom) {
+                this.updateScheduleProperties(this.editedRecord, this.rowData);
+            }
             ganttObj.editModule.validateUpdateValues(tasksData, this.rowData, true);
         }
     };
@@ -21899,6 +22625,7 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
         var validationDialog = new Dialog({
             header: 'Validate Editing',
             isModal: true,
+            enableRtl: this.parent.enableRtl,
             visible: false,
             width: '50%',
             showCloseIcon: true,
@@ -22270,6 +22997,7 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
         this.confirmPredecessorDialog = new Dialog({
             width: '320px',
             isModal: true,
+            enableRtl: this.parent.enableRtl,
             content: this.parent.localeObj.getConstant('confirmPredecessorDelete'),
             buttons: [
                 {
@@ -22318,6 +23046,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         this.taskbarMoved = false;
         this.predecessorUpdated = false;
         this.isBreakLoop = false;
+        this.isResourceTaskDeleted = false;
         /**
          * @private
          */
@@ -22392,6 +23121,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         var editParam = {
             min: 0,
             decimals: 0,
+            enableRtl: this.parent.enableRtl,
             validateDecimalOnType: true,
             format: 'n0',
             showSpinButton: false
@@ -22407,6 +23137,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
     Edit$$1.prototype.updateProgessColumnEditParams = function (column) {
         var editParam = {
             min: 0,
+            enableRtl: this.parent.enableRtl,
             decimals: 0,
             validateDecimalOnType: true,
             max: 100,
@@ -22465,6 +23196,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             editor = new MultiSelect({
                 dataSource: new DataManager(_this.parent.resources),
                 fields: { text: resourceSettings.name, value: resourceSettings.id },
+                enableRtl: _this.parent.enableRtl,
                 mode: 'CheckBox',
                 showDropDownIcon: true,
                 popupHeight: '350px',
@@ -22526,6 +23258,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             _this.parent.treeGridModule.currentEditRow = {};
             editor = new DropDownList({
                 dataSource: new DataManager(types),
+                enableRtl: _this.parent.enableRtl,
                 fields: { value: 'Value' },
                 popupHeight: '350px',
                 value: getValue('taskType', args.rowData.ganttProperties)
@@ -22689,8 +23422,8 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         var ganttPropByMapping = getSwapKey(ganttObj.columnMapping);
         var scheduleFieldNames = [];
         var isScheduleValueUpdated = false;
-        for (var _i = 0, _a = Object.keys(data); _i < _a.length; _i++) {
-            var key = _a[_i];
+        for (var _i = 0, _b = Object.keys(data); _i < _b.length; _i++) {
+            var key = _b[_i];
             if ([tasks.startDate, tasks.endDate, tasks.duration].indexOf(key) !== -1) {
                 if (isNullOrUndefined(data[key]) && !ganttObj.allowUnscheduledTasks) {
                     continue;
@@ -23411,7 +24144,6 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
      */
     Edit$$1.prototype.initiateSaveAction = function (args) {
         var _this = this;
-        this.parent.showSpinner();
         var eventArgs = {};
         eventArgs.requestType = 'beforeSave';
         eventArgs.data = args.data;
@@ -23425,6 +24157,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             eventArgs.action = 'DrawConnectorLine';
         }
         this.parent.trigger('actionBegin', eventArgs, function (eventArg) {
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
             if (eventArg.cancel) {
                 _this.reUpdatePreviousRecords();
                 _this.parent.chartRowsModule.refreshRecords([args.data]);
@@ -23458,6 +24196,52 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         });
     };
     Edit$$1.prototype.dmSuccess = function (e, args) {
+        var eLength = e['length'];
+        for (var i = 0; i < eLength; i++) {
+            var rec = e[i];
+            var _aLength = Object.keys(rec).length;
+            for (var j = 0, _a = Object.keys(rec); j < _aLength; j++) {
+                var key = _a[j];
+                this.parent.editedRecords[i][key] = rec[key];
+                this.parent.editedRecords[i].taskData[key] = rec[key];
+            }
+            if (this.parent.taskFields.id !== null) {
+                this.parent.editedRecords[i].ganttProperties["taskId"] = rec[this.parent.taskFields.id];
+            }
+            if (this.parent.taskFields.name !== null) {
+                this.parent.editedRecords[i].ganttProperties["taskName"] = rec[this.parent.taskFields.name];
+            }
+            if (this.parent.taskFields.startDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["startDate"] = rec[this.parent.taskFields.startDate];
+            }
+            if (this.parent.taskFields.endDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["endDate"] = rec[this.parent.taskFields.endDate];
+            }
+            if (this.parent.taskFields.duration !== null) {
+                this.parent.editedRecords[i].ganttProperties["duration"] = parseInt(rec[this.parent.taskFields.duration]);
+            }
+            if (this.parent.taskFields.durationUnit !== null) {
+                this.parent.editedRecords[i].ganttProperties["durationUnit"] = rec[this.parent.taskFields.durationUnit];
+            }
+            if (this.parent.taskFields.progress !== null) {
+                this.parent.editedRecords[i].ganttProperties["progress"] = rec[this.parent.taskFields.progress];
+            }
+            if (this.parent.taskFields.dependency !== null) {
+                this.parent.editedRecords[i].ganttProperties["dependency"] = rec[this.parent.taskFields.dependency];
+            }
+            if (this.parent.taskFields.parentID !== null) {
+                this.parent.editedRecords[i].ganttProperties["parentID"] = rec[this.parent.taskFields.parentID];
+            }
+            if (this.parent.taskFields.baselineEndDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["baselineEndDate"] = rec[this.parent.taskFields.baselineEndDate];
+            }
+            if (this.parent.taskFields.baselineStartDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["baselineStartDate"] = rec[this.parent.taskFields.baselineStartDate];
+            }
+            if (this.parent.taskFields.resourceInfo !== null) {
+                this.parent.editedRecords[i].ganttProperties["resources"] = rec[this.parent.taskFields.resourceInfo];
+            }
+        }
         this.saveSuccess(args);
     };
     Edit$$1.prototype.dmFailure = function (e, args) {
@@ -23476,7 +24260,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         var ids = data.ganttProperties.sharedTaskUniqueIds;
         for (var i = 0; i < ids.length; i++) {
             var editRecord = this.parent.flatData[this.parent.ids.indexOf(ids[i].toString())];
-            if (editRecord.uniqueID !== data.uniqueID) {
+            if (editRecord && editRecord.uniqueID !== data.uniqueID) {
                 this.updateGanttProperties(data, editRecord);
                 this.parent.setRecordValue('taskData', data.taskData, editRecord, true);
                 this.parent.dataOperation.updateTaskData(editRecord);
@@ -23550,6 +24334,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
             }
             this.parent.trigger('actionComplete', eventArgs);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
         }
         else {
             this.taskbarEditModule.dependencyCancel = false;
@@ -23571,12 +24361,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         for (var index = 0; index < currentLength; index++) {
             var recordIndex = [];
             var resourceID = parseInt(currentResource[index][this.parent.resourceFields.id], 10).toString();
-            if (resourceID === "NaN") {
+            if (resourceID === 'NaN') {
                 resourceID = currentResource[index][this.parent.resourceFields.id];
             }
             for (var i = 0; i < prevResource.length; i++) {
                 var prevResourceID = parseInt(prevResource[i][this.parent.resourceFields.id], 10).toString();
-                if (prevResourceID === "NaN") {
+                if (prevResourceID === 'NaN') {
                     prevResourceID = prevResource[i][this.parent.resourceFields.id];
                 }
                 if (prevResourceID === resourceID) {
@@ -23637,12 +24427,6 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         }
         if (!isNullOrUndefined(unassignedTasks)) {
             this.addNewRecord(updateRecord, unassignedTasks);
-            var updatedData = this.parent.currentViewData.filter(function (data) {
-                return (data.ganttProperties.taskId === updateRecord.ganttProperties.taskId &&
-                    (data.hasChildRecords === updateRecord.hasChildRecords));
-            })[0];
-            updateRecord.parentItem = updatedData.parentItem;
-            updateRecord.parentUniqueID = updatedData.parentUniqueID;
         }
         else {
             // Block for create the unassigned task.
@@ -23657,6 +24441,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             var parentRecord = this.parent.flatData[this.parent.flatData.length - 1];
             this.addNewRecord(updateRecord, parentRecord);
         }
+        var updatedData = this.parent.currentViewData.filter(function (data) {
+            return (data.ganttProperties.taskId === updateRecord.ganttProperties.taskId &&
+                (data.hasChildRecords === updateRecord.hasChildRecords));
+        })[0];
+        updateRecord.parentItem = updatedData.parentItem;
+        updateRecord.parentUniqueID = updatedData.parentUniqueID;
     };
     Edit$$1.prototype.addRecordAsBottom = function (cAddedRecord) {
         var recordIndex1 = this.parent.flatData.length;
@@ -23863,6 +24653,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             width: '320px',
             isModal: true,
             visible: false,
+            enableRtl: this.parent.enableRtl,
             content: this.parent.localeObj.getConstant('confirmDelete'),
             buttons: [
                 {
@@ -23915,15 +24706,17 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         var deleteRecords = [];
         var _loop_1 = function (i) {
             if (selectedRecords[i].parentItem) {
-                var data = selectedRecords[i];
-                var ids = data.ganttProperties.sharedTaskUniqueIds;
-                for (var j = 0; j < ids.length; j++) {
-                    if (this_1.parent.ids.indexOf(ids[j].toString()) !== -1) {
-                        deleteRecords.push(this_1.parent.flatData[this_1.parent.ids.indexOf(ids[j].toString())]);
+                if (selectedRecords[i].ganttProperties.sharedTaskUniqueIds.length === 1) {
+                    var data = selectedRecords[i];
+                    var ids = data.ganttProperties.sharedTaskUniqueIds;
+                    for (var j = 0; j < ids.length; j++) {
+                        if (this_1.parent.ids.indexOf(ids[j].toString()) !== -1) {
+                            deleteRecords.push(this_1.parent.flatData[this_1.parent.ids.indexOf(ids[j].toString())]);
+                        }
+                    }
+                    if (this_1.parent.ids.indexOf(data.ganttProperties.rowUniqueID) !== -1) {
+                        deleteRecords.push(this_1.parent.flatData[this_1.parent.ids.indexOf(data.ganttProperties.rowUniqueID)]);
                     }
-                }
-                if (this_1.parent.ids.indexOf(data.ganttProperties.rowUniqueID) !== -1) {
-                    deleteRecords.push(this_1.parent.flatData[this_1.parent.ids.indexOf(data.ganttProperties.rowUniqueID)]);
                 }
             }
             else {
@@ -24053,8 +24846,9 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 if (this.deletedTaskDetails.indexOf(deleteRecord) !== -1) {
                     continue;
                 }
+                var parentTask = this.parent.getParentTask(deleteRecord.parentItem);
                 if (deleteRecord.parentItem) {
-                    var childRecord = this.parent.getParentTask(deleteRecord.parentItem).childRecords;
+                    var childRecord = parentTask.childRecords;
                     var filteredRecord = childRecord.length === 1 ?
                         childRecord : childRecord.filter(function (data) {
                         return !data.isDelete;
@@ -24064,7 +24858,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                     }
                 }
                 var predecessor = deleteRecord.ganttProperties.predecessor;
-                if (predecessor && predecessor.length) {
+                var canDeletePredecessor = true;
+                if (this.parent.viewType === 'ResourceView' && parentTask && parentTask.ganttProperties.taskName !==
+                    this.parent.localeObj.getConstant('unassignedTask')) {
+                    canDeletePredecessor = false;
+                }
+                if (predecessor && predecessor.length && canDeletePredecessor) {
                     this.removePredecessorOnDelete(deleteRecord);
                 }
                 this.deletedTaskDetails.push(deleteRecord);
@@ -24213,7 +25012,13 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 continue;
             }
             var predecessor = childRecord.ganttProperties.predecessor;
-            if (predecessor && predecessor.length) {
+            var canDeletePredecessor = true;
+            var parentTask = this.parent.getParentTask(childRecord.parentItem);
+            if (this.parent.viewType === 'ResourceView' && parentTask && parentTask.ganttProperties.taskName !==
+                this.parent.localeObj.getConstant('unassignedTask')) {
+                canDeletePredecessor = false;
+            }
+            if (predecessor && predecessor.length && canDeletePredecessor) {
                 this.removePredecessorOnDelete(childRecord);
             }
             this.deletedTaskDetails.push(childRecord);
@@ -24265,6 +25070,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         eventArgs.modifiedRecords = args.updatedRecordCollection;
         eventArgs.modifiedTaskData = getTaskData(args.updatedRecordCollection, null, null, this.parent);
         this.parent.trigger('actionBegin', eventArgs, function (eventArg) {
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
             if (eventArg.cancel) {
                 var deleteRecords = _this.deletedTaskDetails;
                 for (var d = 0; d < deleteRecords.length; d++) {
@@ -24344,6 +25155,14 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                     this.parent.ids.splice(flatIndex, 1);
                     if (this.parent.viewType === 'ResourceView') {
                         this.parent.getTaskIds().splice(flatIndex, 1);
+                        this.isResourceTaskDeleted = true;
+                        if (!deleteRecord.hasChildRecords) {
+                            deleteRecord.ganttProperties.resourceInfo = null;
+                            delete deleteRecord.ganttProperties.resourceNames;
+                            deleteRecord[this.parent.taskFields.resourceInfo] = null;
+                            deleteRecord.ganttProperties.sharedTaskUniqueIds = [];
+                            delete deleteRecord.taskData[this.parent.taskFields.resourceInfo];
+                        }
                     }
                 }
                 if (deleteRecord.level === 0 && treeGridParentIndex !== -1) {
@@ -24392,9 +25211,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 var unassignedTask = this_2.parent.flatData.filter(function (data) {
                     return data.ganttProperties.taskName === _this.parent.localeObj.getConstant('unassignedTask');
                 })[0];
-                var isDuplicate = unassignedTask.childRecords.filter(function (data) {
-                    return data.ganttProperties.taskId === updateUnAssignedResources_1[i].ganttProperties.taskId;
-                });
+                var isDuplicate = [];
+                if (unassignedTask) {
+                    isDuplicate = unassignedTask.childRecords.filter(function (data) {
+                        return data.ganttProperties.taskId === updateUnAssignedResources_1[i].ganttProperties.taskId;
+                    });
+                }
                 var parentTask = this_2.parent.getParentTask(updateUnAssignedResources_1[i].parentItem);
                 if (parentTask && parentTask.ganttProperties.taskName !==
                     this_2.parent.localeObj.getConstant('unassignedTask') && isDuplicate.length === 0) {
@@ -24403,9 +25225,9 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                         this_2.parent.dataOperation.updateParentItems(updateUnAssignedResources_1[i].parentItem);
                     }
                 }
-                else if (!parentTask && isDuplicate.length === 0) {
+                else if (!parentTask && (!isDuplicate || isDuplicate.length === 0)) {
                     this_2.checkWithUnassignedTask(updateUnAssignedResources_1[i]);
-                    if (updateUnAssignedResources_1[i].parentItem) {
+                    if (updateUnAssignedResources_1[i].parentItem && unassignedTask) {
                         this_2.parent.dataOperation.updateParentItems(updateUnAssignedResources_1[i].parentItem);
                     }
                 }
@@ -24418,7 +25240,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         this.parent.trigger('actionComplete', eventArgs);
         this.deletedTaskDetails = [];
         this.parent.initiateEditAction(false);
-        this.parent.hideSpinner();
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     };
     /**
      *
@@ -24873,8 +25700,8 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             var originalData = this_3.parent.modifiedRecords[i];
             var treeIndex = this_3.parent.allowRowDragAndDrop ? 1 : 0;
             var uniqueTaskID = this_3.parent.taskFields.id;
-            originalIndex = this_3.parent.currentViewData.findIndex(function (data) {
-                return (data[uniqueTaskID] == originalData[uniqueTaskID]);
+            var originalIndex = this_3.parent.currentViewData.findIndex(function (data) {
+                return (data[uniqueTaskID] === originalData[uniqueTaskID]);
             });
             if (this_3.parent.treeGrid.getRows()[originalIndex]) {
                 this_3.parent.treeGrid.renderModule.cellRender({
@@ -24887,7 +25714,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 });
             }
         };
-        var this_3 = this, originalIndex;
+        var this_3 = this;
         for (var i = 0; i < this.parent.modifiedRecords.length; i++) {
             _loop_3(i);
         }
@@ -24999,8 +25826,13 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             }
             var args = {};
             args = this.constructTaskAddedEventArgs(cAddedRecord_1, this.parent.editedRecords, 'beforeAdd');
-            this.parent.showSpinner();
             this.parent.trigger('actionBegin', args, function (args) {
+                if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                    _this.parent.showMaskRow();
+                }
+                else {
+                    _this.parent.showSpinner();
+                }
                 if (!isNullOrUndefined(args.data[tempTaskID])) {
                     if (args.data[tempTaskID] != args.data['ganttProperties']['taskId']) {
                         args.data['ganttProperties']['taskId'] = args.data[tempTaskID];
@@ -25204,7 +26036,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         switch (rowPosition) {
             case 'Top':
             case 'Bottom':
-                if (this.parent.viewType === "ResourceView") {
+                if (this.parent.viewType === 'ResourceView') {
                     level = 1;
                 }
                 else {
@@ -25287,6 +26119,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             this.parent.dataOperation.updateWorkWithDuration(cAddedRecord[0]);
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         if (this.dialogModule.dialog && !this.dialogModule.dialogObj.isDestroyed) {
             this.dialogModule.dialogObj.hide();
         }
@@ -25446,6 +26284,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 cancel: false
             };
             this.parent.trigger('actionBegin', actionArgs, function (actionArg) {
+                if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                    _this.parent.showMaskRow();
+                }
+                else {
+                    _this.parent.showSpinner();
+                }
                 if (!actionArg.cancel) {
                     _this.reArrangeRows(args_1, isByMethod_1);
                 }
@@ -25618,6 +26462,12 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             }
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         this.parent.editedRecords = [];
     };
     Edit$$1.prototype.refreshDataSource = function () {
@@ -26135,6 +26985,7 @@ var Filter$1 = /** @__PURE__ @class */ (function () {
                 var flValInput = createElement('input', { className: 'flm-input' });
                 args.target.appendChild(flValInput);
                 dropDateInstance = new DatePicker({ placeholder: _this.parent.localeObj.getConstant('enterValue'), format: format });
+                dropDateInstance.enableRtl = _this.parent.enableRtl;
                 dropDateInstance.appendTo(flValInput);
             },
             write: function (args) {
@@ -26158,6 +27009,7 @@ var Filter$1 = /** @__PURE__ @class */ (function () {
                 var flValInput = createElement('input', { className: 'flm-input' });
                 args.target.appendChild(flValInput);
                 dropInstance = new DateTimePicker({ placeholder: _this.parent.localeObj.getConstant('enterValue'), format: format });
+                dropInstance.enableRtl = _this.parent.enableRtl;
                 dropInstance.appendTo(flValInput);
             },
             write: function (args) {
@@ -26180,6 +27032,7 @@ var Filter$1 = /** @__PURE__ @class */ (function () {
                 flValInput.setAttribute('placeholder', _this.parent.localeObj.getConstant('enterValue'));
                 args.target.appendChild(flValInput);
                 textBoxInstance = new TextBox();
+                textBoxInstance.enableRtl = _this.parent.enableRtl;
                 textBoxInstance.appendTo(flValInput);
             },
             write: function (args) {
@@ -26977,6 +27830,14 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
                             this.parent.localeObj.getConstant('tasks') : ''),
                     align: this.parent.isAdaptive ? 'Right' : 'Left'
                 };
+                if (this.parent.enableRtl) {
+                    if (item === 'PrevTimeSpan') {
+                        this.predefinedItems[item].prefixIcon = 'e-nexttimespan';
+                    }
+                    if (item === 'NextTimeSpan') {
+                        this.predefinedItems[item].prefixIcon = 'e-prevtimespan';
+                    }
+                }
             }
             var searchLocalText = this.parent.localeObj.getConstant('search');
             if (this.parent.isAdaptive) {
@@ -27008,6 +27869,7 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
         var items = this.getItems();
         this.toolbar = new Toolbar$1({
             items: items,
+            enableRtl: this.parent.enableRtl,
             clicked: this.toolbarClickHandler.bind(this),
             height: this.parent.isAdaptive ? 48 : 'auto'
         });
@@ -27026,6 +27888,7 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
             this.searchElement = this.element.querySelector('#' + this.parent.element.id + '_searchbar');
             var textObj = new TextBox({
                 placeholder: this.parent.localeObj.getConstant('search'),
+                enableRtl: this.parent.enableRtl,
                 floatLabelType: 'Never',
                 showClearButton: true
             });
@@ -27144,7 +28007,16 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
         var _this = this;
         var gObj = this.parent;
         var gID = this.id;
+        this.parent.isToolBarClick = false;
         extend(arg, { cancel: false });
+        if (arg.item['properties'].id === this.parent.element.id + "_pdfexport" || arg.item['properties'].id === this.parent.element.id + "_critical-path") {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
+        }
         gObj.trigger(toolbarClick, arg, function (args) {
             if (args.cancel) {
                 return;
@@ -27346,7 +28218,8 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
             else {
                 disableItems.push(gID + '_update', gID + '_cancel');
                 for (var t = 0; t < toolbarItems.length; t++) {
-                    if (enableItems.indexOf(toolbarItems[t].id) === -1 && disableItems.indexOf(toolbarItems[t].id) === -1) {
+                    if (enableItems.indexOf(toolbarItems[t].id) === -1 &&
+                        disableItems.indexOf(toolbarItems[t].id) === -1) {
                         enableItems.push(toolbarItems[t].id);
                     }
                 }
@@ -27503,8 +28376,9 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
             var width = (this.parent.holidays[i].from && this.parent.holidays[i].to) ?
                 this.parent.dataOperation.getTaskWidth(fromDate, toDate) : this.parent.perDayWidth;
             var left = this.parent.dataOperation.getTaskLeft(fromDate, false);
+            var align = this.parent.enableRtl ? "right:" + left + "px;" : "left:" + left + "px;";
             var holidayDiv = createElement('div', {
-                className: holidayElement, styles: "left:" + left + "px; width:" + width + "px; height:100%;"
+                className: holidayElement, styles: align + " width:" + width + "px; height:100%;"
             });
             var spanTop = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
             var spanElement = createElement('span', {
@@ -27573,8 +28447,9 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
                         this.weekendWidthUpdated = true;
                     }
                 }
+                var align = this.parent.enableRtl ? "right:" + left + "px;" : "left:" + left + "px;";
                 var weekendDiv = createElement('div', {
-                    className: weekend, styles: "left:" + left + "px;width:" + width + "px;height:100%;"
+                    className: weekend, styles: align + " width:" + width + "px;height:100%;"
                 });
                 container.appendChild(weekendDiv);
             }
@@ -27647,7 +28522,7 @@ var EventMarker$1 = /** @__PURE__ @class */ (function () {
                 this.eventMarkersContainer = createElement('div', {
                     className: eventMarkersContainer
                 });
-                this.eventMarkersContainer.setAttribute("role", "term");
+                this.eventMarkersContainer.setAttribute('role', 'term');
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';
@@ -27680,8 +28555,15 @@ var EventMarker$1 = /** @__PURE__ @class */ (function () {
         var rightArrow;
         for (var i = 0; i < this.parent.eventMarkers.length; i++) {
             left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false);
+            var align = void 0;
+            if (this.parent.enableRtl) {
+                align = "right:" + left + "px;";
+            }
+            else {
+                align = "left:" + left + "px;";
+            }
             eventMarkerElement = createElement('div', {
-                className: eventMarkersChild, styles: "left:" + left + "px;  height:100%;",
+                className: eventMarkersChild, styles: align + "  height:100%;",
                 id: 'stripline' + i
             });
             if (this.parent.eventMarkers[i].label) {
@@ -27690,6 +28572,12 @@ var EventMarker$1 = /** @__PURE__ @class */ (function () {
                 });
                 var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
                 spanElement[property] = this.parent.eventMarkers[i].label;
+                if (this.parent.enableRtl) {
+                    spanElement.style.right = '5px';
+                }
+                else {
+                    spanElement.style.left = '5px';
+                }
                 eventMarkerElement.appendChild(spanElement);
                 rightArrow = createElement('div', {
                     className: 'e-gantt-right-arrow'
@@ -27868,7 +28756,7 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                     }
                     else {
                         var currentRecords = this_1.parent.currentViewData.filter(function (data) {
-                            return parseInt(data.ganttProperties.taskId) == checkBeyondEnddate_1[k];
+                            return parseInt(data.ganttProperties.taskId) === checkBeyondEnddate_1[k];
                         });
                         for (var i = 0; i < currentRecords.length; i++) {
                             if (!currentRecords[i].hasChildRecords && currentRecords[i].ganttProperties.endDate >= this_1.maxEndDate) {
@@ -27906,10 +28794,10 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                 var individualPredecessorLength = totalPredecessorsCollection[x].ganttProperties.predecessor.length;
                 var taskid = ((totalPredecessorsCollection[x].ganttProperties.taskId));
                 for (var y = 0; y < individualPredecessorLength; y++) {
-                    if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) != "string") {
+                    if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) != 'string') {
                         tempTaskId = parseInt((predecessor[y].from), 10);
                     }
-                    else if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) === "string") {
+                    else if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) === 'string') {
                         tempTaskId = predecessor[y].from;
                     }
                     else {
@@ -27932,15 +28820,16 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                                 toPredecessor = toPredecessor + ',' + predecessor[y].type;
                             }
                             else {
-                                to = to + ',' + predecessor[y].to + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                to = to + ',' + predecessor[y].to + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 toPredecessor = toPredecessor + ',' + predecessor[y].type;
                             }
                         }
                     }
-                    if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) != "string") {
+                    if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) != 'string') {
                         tempTaskId = parseInt((predecessor[y].to), 10);
                     }
-                    else if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) === "string") {
+                    else if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) === 'string') {
                         tempTaskId = predecessor[y].to;
                     }
                     else {
@@ -27953,7 +28842,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                                 fromPredecessor = predecessor[y].type;
                             }
                             else {
-                                from = predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                from = predecessor[y].from + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 fromPredecessor = predecessor[y].type;
                             }
                         }
@@ -27963,7 +28853,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                                 fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
                             }
                             else {
-                                from = from + ',' + predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                from = from + ',' + predecessor[y].from + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
                             }
                         }
@@ -28090,7 +28981,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                     }
                 }
                 // execute if the current calculated slack value is less than the previous slack value.
-                else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                    collection[fromTaskIdIndex]['slack'] !== 0) {
                     // execute if the offset value is not given.
                     if (fromDateArray1.length <= 1) {
                         if (collection[totaskId]['slack'] + dateDifference < 0) {
@@ -28140,7 +29032,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                         }
                     }
                     //It execute while already the slack value is set and it is higher than the datedifference. 
-                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                        collection[fromTaskIdIndex]['slack'] !== 0) {
                         if (fromDateArray1.length <= 1) {
                             if (collection[totaskId]['slack'] + dateDifference < 0) {
                                 collection[fromTaskIdIndex]['slack'] = 0;
@@ -28168,7 +29061,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                     if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
                         collection[fromTaskIdIndex]['slack'] = dateDifference;
                     }
-                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                        collection[fromTaskIdIndex]['slack'] !== 0) {
                         collection[fromTaskIdIndex]['slack'] = dateDifference;
                     }
                 }
@@ -28179,7 +29073,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
             //  calculate slack value for the task contains predecessor connection in "finish to finish".
             if (fromDataPredecessor[i] === 'FF') {
                 // execute if the previous task is from finish to start or finish to finish state.
-                if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1 || collection[totaskId]['fs'] === -1) {
+                if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1 ||
+                    collection[totaskId]['fs'] === -1) {
                     if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1) {
                         prevTaskEnddate = toIdFlatData.endDate;
                         ffslack = collection[totaskId]['slack'];
@@ -28482,7 +29377,7 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
             }
             else {
                 var currentRecords = this_2.parent.currentViewData.filter(function (data) {
-                    return (data.ganttProperties.taskId).toString() == criticalPathIds[i].toString();
+                    return (data.ganttProperties.taskId).toString() === criticalPathIds[i].toString();
                 });
                 for (var i_1 = 0; i_1 < currentRecords.length; i_1++) {
                     if (currentRecords[i_1].ganttProperties.isCritical || currentRecords[i_1].ganttProperties.endDate >= this_2.maxEndDate) {
@@ -28496,13 +29391,13 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
             var columnFields = this_2.parent.taskFields;
             if (criticalData.parentItem) {
                 var parentRecord = this_2.parent.currentViewData.filter(function (data) {
-                    return criticalData.parentItem.uniqueID == data.uniqueID;
+                    return criticalData.parentItem.uniqueID === data.uniqueID;
                 });
                 var parentIndex = this_2.parent.currentViewData.indexOf(parentRecord[0]);
                 var parentElement = this_2.parent.getRowByIndex(parentIndex);
                 var parentTaskbarElement = parentElement.querySelectorAll('.e-taskbar-main-container');
                 for (var i_2 = 0; i_2 < parentTaskbarElement.length; i_2++) {
-                    if (parentTaskbarElement[i_2].getAttribute('rowuniqueid') == criticalData['rowUniqueID']) {
+                    if (parentTaskbarElement[i_2].getAttribute('rowuniqueid') === criticalData['rowUniqueID']) {
                         addClass(parentTaskbarElement[i_2].querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
                     }
                 }
@@ -28654,6 +29549,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
         this.contextMenu = new ContextMenu$1({
             items: this.getMenuItems(),
             locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
             target: target,
             animationSettings: { effect: 'None' },
             select: this.contextMenuItemClick.bind(this),
@@ -28795,6 +29691,12 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
         };
         // eslint-disable-next-line
         this.parent.trigger('actionBegin', eventArgs, function (eventArgs) {
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
             _this.parent.chartRowsModule.splitTask(_this.rowData[taskSettings.id], currentClickedDate);
         });
     };
@@ -28816,6 +29718,12 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
             target: this.targetElement
         };
         this.parent.trigger('actionBegin', eventArgs, function (eventArgs) {
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
             if (eventArgs.cancel === false) {
                 _this.parent.chartRowsModule.mergeTask(_this.rowData[taskSettings.id], segmentIndexes);
             }
@@ -28824,12 +29732,30 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line
     ContextMenu$$1.prototype.getClickedDate = function (element) {
         // context menu click position
-        var ganttElementPosition = this.parent.getOffsetRect(this.parent.element);
+        var ganttElementPositionLeft;
         // task left position
-        var pageLeft = ganttElementPosition.left + this.parent.ganttChartModule.chartElement.offsetLeft +
-            this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft;
-        // difference from task start date to current click position.
-        var currentTaskDifference = this.clickedPosition - pageLeft;
+        if (this.parent.enableRtl) {
+            var box = this.parent.element.getBoundingClientRect();
+            var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft ||
+                document.body.scrollLeft;
+            var clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
+            ganttElementPositionLeft = box.left + scrollLeft - clientLeft;
+        }
+        else {
+            ganttElementPositionLeft = this.parent.getOffsetRect(this.parent.element).left;
+        }
+        var pageLeft;
+        var currentTaskDifference;
+        if (this.parent.enableRtl) {
+            pageLeft = Math.abs(ganttElementPositionLeft + this.parent.ganttChartModule.chartElement.offsetWidth -
+                this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft);
+            currentTaskDifference = Math.abs(this.clickedPosition - pageLeft);
+        }
+        else {
+            pageLeft = ganttElementPositionLeft + this.parent.ganttChartModule.chartElement.offsetLeft +
+                this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft;
+            currentTaskDifference = this.clickedPosition - pageLeft;
+        }
         var splitTaskDuration = Math.ceil(currentTaskDifference / this.parent.perDayWidth);
         var startDate = this.rowData.ganttProperties.startDate;
         if (!isNullOrUndefined(this.parent.timelineSettings.bottomTier) && this.parent.timelineSettings.bottomTier.unit === 'Hour') {
@@ -29345,6 +30271,12 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
         var _this = this;
         this.parent.treeGrid.beforeExcelExport = function (args) {
             _this.parent.trigger('beforeExcelExport', args);
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.showMaskRow();
+            }
+            else {
+                _this.parent.showSpinner();
+            }
         };
         this.parent.treeGrid.excelQueryCellInfo = function (args) {
             _this.parent.trigger('excelQueryCellInfo', args);
@@ -29354,6 +30286,12 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
         };
         this.parent.treeGrid.excelExportComplete = function (args) {
             _this.parent.trigger('excelExportComplete', args);
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.hideMaskRow();
+            }
+            else {
+                _this.parent.hideSpinner();
+            }
         };
     };
     return ExcelExport$$1;
@@ -29538,6 +30476,12 @@ var RowDD$1 = /** @__PURE__ @class */ (function () {
         if (!args.cancel) {
             args.requestType = 'beforeDrop';
             this.parent.trigger('actionBegin', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             if (!args.cancel) {
                 this.dropRows(args, true); // method to update the data collections based on drop action
                 args.cancel = true;
@@ -29765,7 +30709,7 @@ var RowDD$1 = /** @__PURE__ @class */ (function () {
                     }
                     var validateRecords = void 0;
                     if (toParent_1.uniqueID === draggedParent.uniqueID || (draggedParent.parentItem &&
-                        toParent_1.uniqueID == this.parent.flatData[this.parent.ids.indexOf(draggedParent.parentItem.taskId)].uniqueID)) {
+                        toParent_1.uniqueID === this.parent.flatData[this.parent.ids.indexOf(draggedParent.parentItem.taskId)].uniqueID)) {
                         validateRecords = this.parent.currentViewData.filter(function (data) {
                             if ((data.ganttProperties.predecessor && data.ganttProperties.predecessor.length > 0)) {
                                 for (var i = 0; i < data.ganttProperties.predecessor.length; i++) {
@@ -30187,7 +31131,7 @@ var RowDD$1 = /** @__PURE__ @class */ (function () {
                 }
                 var idx = void 0;
                 var ganttData = dataSource.length > 0 && this.parent.viewType !== 'ResourceView' ?
-                    dataSource : this.parent.flatData;
+                    dataSource : this.parent.updatedRecords;
                 for (var i = 0; i < ganttData.length; i++) {
                     if (this.parent.viewType === 'ResourceView') {
                         if (ganttData[i].ganttProperties.rowUniqueID === deletedRow.ganttProperties.rowUniqueID) {
@@ -30906,7 +31850,7 @@ var PdfTreeGridStyle = /** @__PURE__ @class */ (function () {
     return PdfTreeGridStyle;
 }());
 
-var __extends$20 = (undefined && undefined.__extends) || (function () {
+var __extends$21 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -30923,7 +31867,7 @@ var __extends$20 = (undefined && undefined.__extends) || (function () {
  *
  */
 var PdfTreeGridLayouter = /** @__PURE__ @class */ (function (_super) {
-    __extends$20(PdfTreeGridLayouter, _super);
+    __extends$21(PdfTreeGridLayouter, _super);
     function PdfTreeGridLayouter(baseFormat) {
         var _this = _super.call(this, baseFormat) || this;
         _this.columnRanges = [];
@@ -31296,7 +32240,7 @@ var PdfTreeGridLayouter = /** @__PURE__ @class */ (function (_super) {
     return PdfTreeGridLayouter;
 }(ElementLayouter));
 var PdfTreeGridLayoutResult = /** @__PURE__ @class */ (function (_super) {
-    __extends$20(PdfTreeGridLayoutResult, _super);
+    __extends$21(PdfTreeGridLayoutResult, _super);
     /**
      * Constructor
      *
@@ -31313,7 +32257,7 @@ var PdfTreeGridLayoutResult = /** @__PURE__ @class */ (function (_super) {
  * `PdfGridLayoutFormat` class represents a flexible grid that consists of columns and rows.
  */
 var PdfTreeGridLayoutFormat = /** @__PURE__ @class */ (function (_super) {
-    __extends$20(PdfTreeGridLayoutFormat, _super);
+    __extends$21(PdfTreeGridLayoutFormat, _super);
     /**
      * Initializes a new instance of the `PdfGridLayoutFormat` class.
      *
@@ -31333,7 +32277,7 @@ var PdfTreeGridLayoutFormat = /** @__PURE__ @class */ (function (_super) {
     return PdfTreeGridLayoutFormat;
 }(PdfLayoutFormat));
 
-var __extends$21 = (undefined && undefined.__extends) || (function () {
+var __extends$22 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -31350,7 +32294,7 @@ var __extends$21 = (undefined && undefined.__extends) || (function () {
  * PdfTreeGrid Class for EJ2-PDF
  */
 var PdfTreeGrid = /** @__PURE__ @class */ (function (_super) {
-    __extends$21(PdfTreeGrid, _super);
+    __extends$22(PdfTreeGrid, _super);
     function PdfTreeGrid() {
         var _this = _super.call(this) || this;
         _this.treeGridSize = new SizeF(0, 0);
@@ -33774,217 +34718,215 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
         var childPageData;
         var parentY = 0;
         var childY = 0;
-        if (childTask && parentTask) {
-            switch (this.type) {
-                case 'FS':
-                    if (childTask.startPage > -1 && parentTask.endPage > -1) {
-                        startPage = pages[parentTask.endPage];
-                        endPage = pages[childTask.startPage];
-                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                        if (this.parentIndex < this.childIndex) {
-                            if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
-                                predecessorType = 'FSType1';
-                            }
-                            else {
-                                predecessorType = 'FSType2';
-                            }
+        switch (this.type) {
+            case 'FS':
+                if (childTask.startPage > -1 && parentTask.endPage > -1) {
+                    startPage = pages[parentTask.endPage];
+                    endPage = pages[childTask.startPage];
+                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                    if (this.parentIndex < this.childIndex) {
+                        if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
+                            predecessorType = 'FSType1';
                         }
                         else {
-                            if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
-                                predecessorType = 'FSType3';
-                            }
-                            else {
-                                predecessorType = 'FSType4';
-                            }
+                            predecessorType = 'FSType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
+                            predecessorType = 'FSType3';
+                        }
+                        else {
+                            predecessorType = 'FSType4';
+                        }
                     }
-                    break;
-                case 'SF':
-                    if (childTask.endPage > -1 && parentTask.startPage > -1) {
-                        startPage = pages[parentTask.startPage];
-                        endPage = pages[childTask.endPage];
-                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                        if (this.parentIndex < this.childIndex) {
-                            if (this.parentLeft > this.childLeft + this.childWidth) {
-                                predecessorType = 'SFType1';
-                            }
-                            else {
-                                predecessorType = 'SFType2';
-                            }
+                }
+                else {
+                    return;
+                }
+                break;
+            case 'SF':
+                if (childTask.endPage > -1 && parentTask.startPage > -1) {
+                    startPage = pages[parentTask.startPage];
+                    endPage = pages[childTask.endPage];
+                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                    if (this.parentIndex < this.childIndex) {
+                        if (this.parentLeft > this.childLeft + this.childWidth) {
+                            predecessorType = 'SFType1';
                         }
                         else {
-                            if (this.parentLeft > this.childLeft + this.childWidth) {
-                                predecessorType = 'SFType3';
-                            }
-                            else {
-                                predecessorType = 'SFType4';
-                            }
+                            predecessorType = 'SFType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft > this.childLeft + this.childWidth) {
+                            predecessorType = 'SFType3';
+                        }
+                        else {
+                            predecessorType = 'SFType4';
+                        }
                     }
-                    break;
-                case 'FF':
-                    if (childTask.endPage > -1 && parentTask.endPage > -1) {
-                        startPage = pages[parentTask.endPage];
-                        endPage = pages[childTask.endPage];
-                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                        childPageData = pdfGantt.pdfPageDetail[childTask.endPage - pdfGantt.chartPageIndex];
-                        if (this.parentIndex < this.childIndex) {
-                            if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
-                                predecessorType = 'FFType1';
-                            }
-                            else {
-                                predecessorType = 'FFType2';
-                            }
+                }
+                else {
+                    return;
+                }
+                break;
+            case 'FF':
+                if (childTask.endPage > -1 && parentTask.endPage > -1) {
+                    startPage = pages[parentTask.endPage];
+                    endPage = pages[childTask.endPage];
+                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                    childPageData = pdfGantt.pdfPageDetail[childTask.endPage - pdfGantt.chartPageIndex];
+                    if (this.parentIndex < this.childIndex) {
+                        if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
+                            predecessorType = 'FFType1';
                         }
                         else {
-                            if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
-                                predecessorType = 'FFType3';
-                            }
-                            else {
-                                predecessorType = 'FFType4';
-                            }
+                            predecessorType = 'FFType2';
                         }
                     }
                     else {
-                        return;
+                        if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
+                            predecessorType = 'FFType3';
+                        }
+                        else {
+                            predecessorType = 'FFType4';
+                        }
                     }
-                    break;
-                case 'SS':
-                    if (childTask.startPage > -1 && parentTask.startPage > -1) {
-                        startPage = pages[parentTask.startPage];
-                        endPage = pages[childTask.startPage];
-                        parentPageData = pdfGantt.pdfPageDetail[parentTask.startPage - pdfGantt.chartPageIndex];
-                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                        if (this.parentIndex < this.childIndex) {
-                            if (this.parentLeft >= this.childLeft) {
-                                predecessorType = 'SSType1';
-                            }
-                            else {
-                                predecessorType = 'SSType2';
-                            }
+                }
+                else {
+                    return;
+                }
+                break;
+            case 'SS':
+                if (childTask.startPage > -1 && parentTask.startPage > -1) {
+                    startPage = pages[parentTask.startPage];
+                    endPage = pages[childTask.startPage];
+                    parentPageData = pdfGantt.pdfPageDetail[parentTask.startPage - pdfGantt.chartPageIndex];
+                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                    if (this.parentIndex < this.childIndex) {
+                        if (this.parentLeft >= this.childLeft) {
+                            predecessorType = 'SSType1';
                         }
                         else {
-                            if (this.parentLeft >= this.childLeft) {
-                                predecessorType = 'SSType3';
-                            }
-                            else {
-                                predecessorType = 'SSType4';
-                            }
+                            predecessorType = 'SSType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft >= this.childLeft) {
+                            predecessorType = 'SSType3';
+                        }
+                        else {
+                            predecessorType = 'SSType4';
+                        }
                     }
-                    break;
-            }
-            var midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
-            midPoint = pixelToPoint(midPoint);
-            /* eslint-disable-next-line */
-            var point1 = void 0, point2 = void 0, point3 = void 0, point4 = void 0, point5 = void 0, point6 = void 0;
-            point1 = point2 = point3 = point4 = point5 = point6 = new PointF();
-            var parentTaskpoint = __assign$4({}, parentTask.taskStartPoint);
-            var childTaskpoint = __assign$4({}, childTask.taskStartPoint);
-            parentY = parentTaskpoint.y + parentPageData.startPoint.y;
-            childY = childTaskpoint.y + childPageData.startPoint.y;
-            var ffpoint1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth), parentY + midPoint);
-            var sspoint1 = new PointF(pixelToPoint(this.parentLeft) - 1, parentY + midPoint);
-            var ffpoint3 = new PointF(pixelToPoint(this.childLeft - 20), childY + midPoint);
-            var ffpoint4 = new PointF(pixelToPoint(this.childLeft - 6 - this.lineWidth) - 1, childY + midPoint);
-            var sspoint4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 6 + this.lineWidth) + 1, childY + midPoint);
-            switch (predecessorType) {
-                case 'FSType1':
-                case 'FSType3':
-                    point1 = ffpoint1;
-                    point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
-                    point3 = ffpoint3;
-                    point4 = ffpoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'FSType2':
-                    point1 = ffpoint1;
-                    point2 = new PointF(point1.x + 10, parentY + midPoint);
-                    point3 = new PointF(point1.x + 10, childY + 2);
-                    point4 = new PointF(pixelToPoint(this.childLeft - 20), childY + 2);
-                    point5 = ffpoint3;
-                    point6 = ffpoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                    break;
-                case 'FSType4':
-                    point1 = ffpoint1;
-                    point2 = new PointF(point1.x + 10, parentY + midPoint);
-                    point3 = new PointF(point1.x + 10, parentY + 2);
-                    point4 = new PointF(pixelToPoint(this.childLeft - 20), parentY + 2);
-                    point5 = ffpoint3;
-                    point6 = ffpoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                    break;
-                case 'FFType1':
-                case 'FFType3':
-                    point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
-                    point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + midPoint);
-                    point4 = sspoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'FFType2':
-                case 'FFType4':
-                    point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
-                    point2 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth + 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + midPoint);
-                    point4 = sspoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'SSType1':
-                case 'SSType3':
-                    point1 = sspoint1;
-                    point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + midPoint);
-                    point4 = ffpoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'SSType2':
-                case 'SSType4':
-                    point1 = sspoint1;
-                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + midPoint);
-                    point4 = ffpoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'SFType1':
-                case 'SFType3':
-                    point1 = sspoint1;
-                    point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + midPoint);
-                    point4 = sspoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                    break;
-                case 'SFType2':
-                    point1 = sspoint1;
-                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, childY + 2);
-                    point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), childY + 2);
-                    point5 = new PointF(point4.x, childY + midPoint);
-                    point6 = sspoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                    break;
-                case 'SFType4':
-                    point1 = sspoint1;
-                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                    point3 = new PointF(point2.x, parentY + 2);
-                    point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + 2);
-                    point5 = new PointF(point4.x, childY + midPoint);
-                    point6 = sspoint4;
-                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                    break;
-            }
+                }
+                else {
+                    return;
+                }
+                break;
+        }
+        var midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
+        midPoint = pixelToPoint(midPoint);
+        /* eslint-disable-next-line */
+        var point1, point2, point3, point4, point5, point6;
+        point1 = point2 = point3 = point4 = point5 = point6 = new PointF();
+        var parentTaskpoint = __assign$4({}, parentTask.taskStartPoint);
+        var childTaskpoint = __assign$4({}, childTask.taskStartPoint);
+        parentY = parentTaskpoint.y + parentPageData.startPoint.y;
+        childY = childTaskpoint.y + childPageData.startPoint.y;
+        var ffpoint1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth), parentY + midPoint);
+        var sspoint1 = new PointF(pixelToPoint(this.parentLeft) - 1, parentY + midPoint);
+        var ffpoint3 = new PointF(pixelToPoint(this.childLeft - 20), childY + midPoint);
+        var ffpoint4 = new PointF(pixelToPoint(this.childLeft - 6 - this.lineWidth) - 1, childY + midPoint);
+        var sspoint4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 6 + this.lineWidth) + 1, childY + midPoint);
+        switch (predecessorType) {
+            case 'FSType1':
+            case 'FSType3':
+                point1 = ffpoint1;
+                point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
+                point3 = ffpoint3;
+                point4 = ffpoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'FSType2':
+                point1 = ffpoint1;
+                point2 = new PointF(point1.x + 10, parentY + midPoint);
+                point3 = new PointF(point1.x + 10, childY + 2);
+                point4 = new PointF(pixelToPoint(this.childLeft - 20), childY + 2);
+                point5 = ffpoint3;
+                point6 = ffpoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                break;
+            case 'FSType4':
+                point1 = ffpoint1;
+                point2 = new PointF(point1.x + 10, parentY + midPoint);
+                point3 = new PointF(point1.x + 10, parentY + 2);
+                point4 = new PointF(pixelToPoint(this.childLeft - 20), parentY + 2);
+                point5 = ffpoint3;
+                point6 = ffpoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                break;
+            case 'FFType1':
+            case 'FFType3':
+                point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
+                point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + midPoint);
+                point4 = sspoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'FFType2':
+            case 'FFType4':
+                point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
+                point2 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth + 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + midPoint);
+                point4 = sspoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'SSType1':
+            case 'SSType3':
+                point1 = sspoint1;
+                point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + midPoint);
+                point4 = ffpoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'SSType2':
+            case 'SSType4':
+                point1 = sspoint1;
+                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + midPoint);
+                point4 = ffpoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'SFType1':
+            case 'SFType3':
+                point1 = sspoint1;
+                point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + midPoint);
+                point4 = sspoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                break;
+            case 'SFType2':
+                point1 = sspoint1;
+                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                point3 = new PointF(point2.x, childY + 2);
+                point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), childY + 2);
+                point5 = new PointF(point4.x, childY + midPoint);
+                point6 = sspoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                break;
+            case 'SFType4':
+                point1 = sspoint1;
+                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                point3 = new PointF(point2.x, parentY + 2);
+                point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + 2);
+                point5 = new PointF(point4.x, childY + midPoint);
+                point6 = sspoint4;
+                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                break;
         }
     };
     /**
@@ -34166,7 +35108,7 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
     return PdfGanttPredecessor;
 }());
 
-var __extends$22 = (undefined && undefined.__extends) || (function () {
+var __extends$23 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -34194,7 +35136,7 @@ var __assign$2 = (undefined && undefined.__assign) || function () {
  *
  */
 var PdfGantt = /** @__PURE__ @class */ (function (_super) {
-    __extends$22(PdfGantt, _super);
+    __extends$23(PdfGantt, _super);
     function PdfGantt(parent) {
         var _this = _super.call(this) || this;
         _this.exportProps = {};
@@ -34501,6 +35443,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             cancel: false
         };
         this.parent.trigger('beforePdfExport', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         if (getValue('cancel', args)) {
             /* eslint-disable-next-line */
             return new Promise(function (resolve, reject) {
@@ -34533,6 +35481,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
         }
         this.processExport(data, pdfExportProperties, isMultipleExport).then(function () {
             _this.parent.trigger('pdfExportComplete', {});
+            if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                _this.parent.hideMaskRow();
+            }
+            else {
+                _this.parent.hideSpinner();
+            }
             resolve(_this.pdfDocument);
         });
     };
@@ -34723,5 +35677,5 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
  * Gantt index file
  */
 
-export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, CriticalPath, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields };
+export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, CriticalPath, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields, LoadingIndicator };
 //# sourceMappingURL=ej2-gantt.es5.js.map