@syncfusion/ej2-gantt 20.3.60 → 20.4.38

package/src/gantt/renderer/chart-rows.js

@@ -113,7 +113,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getIndicatorNode = function (indicator) {
         var templateString = '<label class="' + cls.label + ' ' + cls.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);
     };
     /**
@@ -139,6 +139,13 @@ var ChartRows = /** @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']);
         }
@@ -181,14 +188,15 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     taskLabel = '<span class="' + cls.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 = '<span class="' + cls.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>';
@@ -200,17 +208,17 @@ var ChartRows = /** @class */ (function (_super) {
                 (data.ganttProperties.startDate && !data.ganttProperties.endDate && !data.ganttProperties.duration) ? ('<div class="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                     cls.unscheduledTaskbarLeft + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : cls.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="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                             cls.unscheduledTaskbarRight + ' ' + (data.ganttProperties.isAutoSchedule ?
                             '' : cls.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="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                                 cls.unscheduledTaskbar + ' ' + (data.ganttProperties.isAutoSchedule ?
                                 '' : cls.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) &&
@@ -238,6 +246,13 @@ var ChartRows = /** @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) {
@@ -257,7 +272,7 @@ var ChartRows = /** @class */ (function (_super) {
             //split taskbar
             '<div class="' + cls.childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + cls.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() +
@@ -265,7 +280,7 @@ var ChartRows = /** @class */ (function (_super) {
                 '<div class="' + cls.childProgressBarInnerDiv + ' ' + cls.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
@@ -282,19 +297,20 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getSplitTaskbarLeftResizerNode = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.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="' + cls.taskBarRightResizer + ' ' + cls.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="' + cls.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="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -424,6 +440,12 @@ var ChartRows = /** @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);
     };
@@ -628,7 +650,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
         var template = '<div class="' + cls.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);
@@ -643,7 +665,7 @@ var ChartRows = /** @class */ (function (_super) {
         var data = this.templateData;
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + cls.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="' + cls.baselineMilestoneDiv + '">' + '<div class="' + cls.baselineMilestoneDiv +
             ' ' + cls.baselineMilestoneTop + '"  ' +
@@ -693,6 +715,10 @@ var ChartRows = /** @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) {
@@ -739,6 +765,10 @@ var ChartRows = /** @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 () {
@@ -758,17 +788,18 @@ var ChartRows = /** @class */ (function (_super) {
                 taskbarHeight * 2 + 'px;border-left-width:' + taskbarHeight / 5 +
                 'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>');
         var template = '<div class="' + cls.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="' + cls.manualParentMilestone + '" style="position:absolute;left:' +
+        var milestoneTemplate = '<div class="' + cls.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="' + cls.manualParentMilestoneTop + '" style="border-right-width:' +
@@ -829,7 +860,7 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     labelDiv = '<span class="' + cls.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>';
@@ -867,6 +898,13 @@ var ChartRows = /** @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;
     };
     /**
@@ -962,35 +1000,36 @@ var ChartRows = /** @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) ? cls.rightLabelTempContainer :
-            cls.rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            cls.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="' + cls.taskBarLeftResizer + ' ' + cls.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="' + cls.taskBarRightResizer + ' ' + cls.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="' + cls.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="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -1012,7 +1051,7 @@ var ChartRows = /** @class */ (function (_super) {
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
                 'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + cls.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);
     };
@@ -1285,8 +1324,14 @@ var ChartRows = /** @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);
@@ -1330,7 +1375,7 @@ var ChartRows = /** @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) {
@@ -1414,7 +1459,7 @@ var ChartRows = /** @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]);
         }