@syncfusion/ej2-gantt 20.3.61 → 20.4.40

package/src/gantt/base/gantt.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { Component, createElement, Complex, addClass, removeClass, Event, formatUnit, Browser } from '@syncfusion/ej2-base';
+import { Component, createElement, Complex, addClass, removeClass, Event, formatUnit, Browser, closest } from '@syncfusion/ej2-base';
 import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, L10n, EventHandler } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, KeyboardEvents, Collection, append, remove } from '@syncfusion/ej2-base';
@@ -27,6 +27,7 @@ import { GanttChart } from './gantt-chart';
 import { Timeline } from '../renderer/timeline';
 import { GanttTreeGrid } from './tree-grid';
 import { SortSettings } from '../models/models';
+import { LoadingIndicator } from '../models/models';
 import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';
 import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings } from '../models/models';
 import { SearchSettings, ResourceFields } from '../models/models';
@@ -58,6 +59,8 @@ var Gantt = /** @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 */
@@ -253,7 +256,7 @@ var Gantt = /** @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
      */
@@ -344,9 +347,348 @@ var Gantt = /** @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('.' + cls.timelineHeaderTableContainer).length != 0) {
+            for (var i = 0; i < this.singleTier; i++) {
+                if (!isNullOrUndefined(this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[i])) {
+                    this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[i]['style'].visibility = "visible";
+                }
+            }
+        }
+        if (!isNullOrUndefined(this.element.querySelector('.' + cls.timelineHeaderContainer))) {
+            this.element.querySelector('.' + cls.timelineHeaderContainer)['style'].position = "relative";
+        }
+        if (!isNullOrUndefined(this.element.getElementsByClassName(cls.chartBodyContent)[0])) {
+            this.element.getElementsByClassName(cls.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 = ganttContent;
+                this.renderBackGround(content);
+                if (this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer).length != 0) {
+                    this.singleTier = this.timelineModule.isSingleTier ? 1 : 2;
+                    for (var i = 0; i < this.singleTier; i++) {
+                        this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[i]['style'].visibility = "hidden";
+                    }
+                }
+                if (this.singleTier === 0) {
+                    this.singleTier = 2;
+                }
+                this.element.getElementsByClassName(cls.chartBodyContent)[0]['style'].visibility = "hidden";
+                this.contentMaskTable = this.contentMaskTable = this.createMaskTable(content);
+            }
+            if (ganttHeader) {
+                this.element.querySelector('.' + cls.timelineHeaderContainer)['style'].position = "static";
+                var content = ganttHeader;
+                this.renderHeaderBackground(content);
+                this.headerMaskTable = this.headerMaskTable = this.createMaskTable(content);
+            }
+        }
+    };
+    Gantt.prototype.renderHeaderBackground = function (element) {
+        var parentElement = element;
+        var timelineHeight = element.getBoundingClientRect().height;
+        var header = closest(parentElement, '.' + cls.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 = closest(parentElement, '.' + cls.chartBodyContainer) ? true : false;
+        if (content) {
+            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, '.' + cls.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.
      *
@@ -372,7 +714,7 @@ var Gantt = /** @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
      */
@@ -472,7 +814,7 @@ var Gantt = /** @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
      */
@@ -508,7 +850,7 @@ var Gantt = /** @class */ (function (_super) {
         this.currentViewData = this.treeGrid.getCurrentViewRecords().slice();
     };
     /**
-     * @param {IGanttData} records .
+     * @param {IGanttData} records -Defines the delete record collections.
      * @returns {IGanttData} .
      * @private
      */
@@ -520,7 +862,7 @@ var Gantt = /** @class */ (function (_super) {
         return updatedRecord;
     };
     /**
-     * @param {object} args .
+     * @param {object} args -Update the gantt element content height.
      * @returns {void} .
      * @private
      */
@@ -873,7 +1215,12 @@ var Gantt = /** @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();
             }
@@ -885,6 +1232,11 @@ var Gantt = /** @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);
@@ -916,8 +1268,8 @@ var Gantt = /** @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
      */
@@ -980,6 +1332,12 @@ var Gantt = /** @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;
@@ -1526,7 +1884,7 @@ var Gantt = /** @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);
         }
@@ -1661,12 +2019,18 @@ var Gantt = /** @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.
@@ -1702,7 +2066,7 @@ var Gantt = /** @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;
@@ -1735,8 +2099,8 @@ var Gantt = /** @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
      */
@@ -1849,7 +2213,7 @@ var Gantt = /** @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
      */
@@ -1859,7 +2223,7 @@ var Gantt = /** @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
      */
@@ -1933,7 +2297,7 @@ var Gantt = /** @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
      */
@@ -1952,18 +2316,24 @@ var Gantt = /** @class */ (function (_super) {
      */
     /* eslint-disable-next-line */
     Gantt.prototype.setRecordValue = function (field, value, record, isTaskData) {
+        value = isUndefined(value) ? null : value;
         if (this.isOnEdit || this.isOnDelete) {
             this.makeCloneData(field, record, isTaskData);
-            var id = isTaskData ? record.rowUniqueID : record.ganttProperties.rowUniqueID;
+            var ganttData = isTaskData ? record : record.ganttProperties;
+            var id = ganttData.rowUniqueID;
             var task = this.getRecordByID(id);
-            if (task && this.editedRecords.indexOf(task) === -1) {
+            var isValid = false;
+            if (isNullOrUndefined(value) || (!isNullOrUndefined(value) && !isNullOrUndefined(ganttData[field]) && (value instanceof Date ? value.getTime() !==
+                ganttData[field].getTime() : ganttData[field] !== value))) {
+                isValid = true;
+            }
+            if (task && ((this.editedRecords.indexOf(task) === -1 && isValid) || this.editedRecords.length === 0)) {
                 this.editedRecords.push(task);
                 if (this.enableImmutableMode) {
                     this.modifiedRecords.push(task);
                 }
             }
         }
-        value = isUndefined(value) ? null : value;
         setValue(field, value, record);
     };
     Gantt.prototype.makeCloneData = function (field, record, isTaskData) {
@@ -2206,8 +2576,8 @@ var Gantt = /** @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) {
@@ -2309,9 +2679,9 @@ var Gantt = /** @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) {
@@ -2486,7 +2856,7 @@ var Gantt = /** @class */ (function (_super) {
     /**
      * Method to get class name for unscheduled tasks
      *
-     * @param {ITaskData} ganttProp .
+     * @param {ITaskData} ganttProp -Defines the Gantt propertie.
      * @returns {boolean} .
      * @private
      */
@@ -2560,7 +2930,7 @@ var Gantt = /** @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 };
     };
     /**
@@ -2833,7 +3203,7 @@ var Gantt = /** @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) {
@@ -2904,6 +3274,12 @@ var Gantt = /** @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);

package/src/gantt/base/interface.d.ts

@@ -37,10 +37,6 @@ export interface IGanttData {
     parentItem?: IParent;
     /** Defines the parent unique id of task. */
     parentUniqueID?: string;
-    /**
-     * Specifies the checkbox state of a record
-     */
-    checkboxState?: string;
     /** Defines the data which specified in data source.
      *
      * @isGenericType true

package/src/gantt/base/splitter.js

@@ -20,12 +20,19 @@ var Splitter = /** @class */ (function () {
         this.parent.splitterElement = createElement('div', { className: cls.splitter });
         this.parent.treeGridPane = createElement('div', { className: cls.treeGridPane });
         this.parent.chartPane = createElement('div', { className: cls.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 SplitterLayout({
             height: null,
             width: this.parent.ganttWidth.toString(),
             enablePersistence: this.parent.enablePersistence,
+            enableRtl: this.parent.enableRtl,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -39,6 +46,9 @@ var Splitter = /** @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';