@syncfusion/ej2-gantt 20.4.54 → 21.1.35

package/src/gantt/renderer/timeline.js

@@ -170,7 +170,7 @@ var Timeline = /** @class */ (function () {
             else {
                 var value = property === 'topTier' ? 'bottomTier' : 'topTier';
                 var assignValue = 'bottomTier';
-                if (newTimeline[assignValue].unit != "None") {
+                if (newTimeline["" + assignValue].unit != "None") {
                     _this.customTimelineSettings[value] = __assign({}, newTimeline[assignValue]);
                 }
             }
@@ -473,7 +473,7 @@ var Timeline = /** @class */ (function () {
             else {
                 secondValue = sortedUnitLevels[i + 1];
             }
-            if (count >= firstValue[tier].count) {
+            if (count >= firstValue["" + tier].count) {
                 currentZoomCollection = sortedUnitLevels[i];
                 checkSameCountLevels = sortedUnitLevels.filter(function (tempLevel) {
                     if (tier === "bottomTier") {
@@ -491,7 +491,7 @@ var Timeline = /** @class */ (function () {
                 }
                 break;
             }
-            else if (count < firstValue[tier].count && count > secondValue[tier].count) {
+            else if (count < firstValue["" + tier].count && count > secondValue["" + tier].count) {
                 currentZoomCollection = sortedUnitLevels[i + 1];
                 checkSameCountLevels = sortedUnitLevels.filter(function (tempLevel) {
                     if (tier === "bottomTier") {

package/src/gantt/renderer/tooltip.js

@@ -1,7 +1,7 @@
 import { Tooltip as TooltipComponent } from '@syncfusion/ej2-popups';
 import { parentsUntil } from '../base/utils';
 import * as cls from '../base/css-constants';
-import { extend, isNullOrUndefined, getValue, EventHandler, closest } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, getValue, EventHandler, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Deferred } from '@syncfusion/ej2-data';
 /**
  * File for handling tooltip in Gantt.
@@ -28,7 +28,7 @@ var Tooltip = /** @class */ (function () {
         this.toolTipObj.position = 'BottomCenter';
         this.toolTipObj.openDelay = 700;
         this.toolTipObj.enableRtl = this.parent.enableRtl;
-        this.toolTipObj.enableHtmlSanitizer = false;
+        this.toolTipObj.enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
         this.toolTipObj.cssClass = cls.ganttTooltip;
         this.toolTipObj.animation = { open: { effect: 'None', delay: 0 }, close: { effect: 'None', delay: 0 } };
         this.toolTipObj.afterOpen = this.updateTooltipPosition.bind(this);
@@ -241,8 +241,12 @@ var Tooltip = /** @class */ (function () {
         var taskName;
         if (ganttData) {
             data = ganttData.ganttProperties;
-            taskName = !isNullOrUndefined(data.taskName) ? '<tr class = "e-gantt-tooltip-rowcell"><td colspan="3">' +
-                (this.parent.disableHtmlEncode ? data.taskName.replace(/</g, "&lt;").replace(/>/g, "&gt;") : data.taskName) + '</td></tr>' : '';
+            var taskNameValue = data.taskName;
+            if (this.parent.enableHtmlSanitizer && typeof (taskNameValue) === 'string') {
+                taskNameValue = SanitizeHtmlHelper.sanitize(taskNameValue);
+            }
+            taskName = !isNullOrUndefined(taskNameValue) ? '<tr class = "e-gantt-tooltip-rowcell"><td colspan="3">' +
+                (this.parent.disableHtmlEncode ? taskNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : taskNameValue) + '</td></tr>' : '';
         }
         switch (elementType) {
             case 'milestone':
@@ -254,9 +258,13 @@ var Tooltip = /** @class */ (function () {
                     else if (!isNullOrUndefined(data.startDate)) {
                         milestoneStartDate = data.startDate;
                     }
+                    var sDateValue = this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer && typeof (sDateValue) === 'string') {
+                        sDateValue = SanitizeHtmlHelper.sanitize(sDateValue);
+                    }
                     var sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        sDateValue + '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + sDate + '</tbody></table>';
                     break;
@@ -264,20 +272,28 @@ var Tooltip = /** @class */ (function () {
             case 'taskbar':
                 {
                     var scheduledTask = !ganttData.hasChildRecords || data.isAutoSchedule ? true : false;
+                    var startDateValue = this.parent.getFormatedDate(scheduledTask ? data.startDate : data.autoStartDate, this.parent.getDateFormat());
+                    var endDateValue = this.parent.getFormatedDate(scheduledTask ? data.endDate : data.autoEndDate, this.parent.getDateFormat());
+                    var durationValue = this.parent.getDurationString((scheduledTask ? data.duration : data.autoDuration), data.durationUnit);
+                    var progressValue = data.progress;
+                    if (this.parent.enableHtmlSanitizer) {
+                        startDateValue = typeof (startDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(startDateValue) : startDateValue;
+                        endDateValue = typeof (endDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(endDateValue) : endDateValue;
+                        durationValue = typeof (durationValue) === 'string' ? SanitizeHtmlHelper.sanitize(durationValue) : durationValue;
+                        progressValue = typeof (progressValue) === 'string' ? SanitizeHtmlHelper.sanitize(progressValue) : progressValue;
+                    }
                     var startDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'startDate' : 'subTasksStartDate') +
-                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(scheduledTask ? data.startDate : data.autoStartDate, this.parent.getDateFormat()) +
-                        '</td></tr>' : '';
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
                     var endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'endDate' : 'subTasksEndDate') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' + this.parent.getFormatedDate(scheduledTask ? data.endDate : data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
                     var duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value"> ' + this.parent.getDurationString((scheduledTask ? data.duration : data.autoDuration), data.durationUnit) +
+                        '<td class = "e-gantt-tooltip-value"> ' + durationValue +
                         '</td></tr>' : '';
                     var progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + data.progress +
+                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + progressValue +
                         '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + startDate + endDate + duration + progress + '</tbody></table>';
@@ -285,82 +301,131 @@ var Tooltip = /** @class */ (function () {
                 }
             case 'baseline':
                 {
+                    var baselineStartDateValue = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
+                    var baselineEndDateValue = this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        baselineStartDateValue = typeof (baselineStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(baselineStartDateValue) : baselineStartDateValue;
+                        baselineEndDateValue = typeof (baselineEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(baselineEndDateValue) : baselineEndDateValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('baselineStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat()) + '</td></tr><tr>' +
+                        baselineStartDateValue + '</td></tr><tr>' +
                         '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
                         '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat()) + '</td></tr></tbody></table>';
+                        baselineEndDateValue + '</td></tr></tbody></table>';
                     break;
                 }
             case 'marker':
                 {
                     var markerTooltipElement = parent.tooltipModule.getMarkerTooltipData(args);
+                    var markerTooltipElementValue = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
                     var markerLabel = markerTooltipElement.label ? markerTooltipElement.label : '';
+                    if (this.parent.enableHtmlSanitizer) {
+                        markerLabel = typeof (markerLabel) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel) : markerLabel;
+                        markerTooltipElementValue = typeof (markerTooltipElementValue) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue) : markerTooltipElementValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
-                        this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat()) +
-                        '</td></tr><tr><td>' +
-                        markerLabel + '</td></tr></tbody></table>';
+                        markerTooltipElementValue + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel) + '</td></tr></tbody></table>';
                     break;
                 }
             case 'connectorLine':
                 {
+                    var fromNameValue = parent.tooltipModule.predecessorTooltipData.fromName;
+                    var fromIdValue = parent.tooltipModule.predecessorTooltipData.fromId;
+                    var toNameValue = parent.tooltipModule.predecessorTooltipData.toName;
+                    var toIdValue = parent.tooltipModule.predecessorTooltipData.toId;
+                    var linkTextValue = parent.tooltipModule.predecessorTooltipData.linkText;
+                    var offsetStringValue = parent.tooltipModule.predecessorTooltipData.offsetString;
+                    if (this.parent.enableHtmlSanitizer) {
+                        fromNameValue = typeof (fromNameValue) === 'string' ? SanitizeHtmlHelper.sanitize(fromNameValue) : fromNameValue;
+                        fromIdValue = typeof (fromIdValue) === 'string' ? SanitizeHtmlHelper.sanitize(fromIdValue) : fromIdValue;
+                        toNameValue = typeof (toNameValue) === 'string' ? SanitizeHtmlHelper.sanitize(toNameValue) : toNameValue;
+                        toIdValue = typeof (toIdValue) === 'string' ? SanitizeHtmlHelper.sanitize(toIdValue) : toIdValue;
+                        linkTextValue = typeof (linkTextValue) === 'string' ? SanitizeHtmlHelper.sanitize(linkTextValue) : linkTextValue;
+                        offsetStringValue = typeof (offsetStringValue) === 'string' ? SanitizeHtmlHelper.sanitize(offsetStringValue) : offsetStringValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody><tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('from') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value">' + parent.tooltipModule.predecessorTooltipData.fromName + ' (' +
-                        parent.tooltipModule.predecessorTooltipData.fromId + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
+                        '<td class = "e-gantt-tooltip-value">' + (this.parent.disableHtmlEncode ? fromNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromNameValue) + ' (' +
+                        (this.parent.disableHtmlEncode ? (typeof (fromIdValue) === 'string' ? fromIdValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromIdValue) : fromIdValue) + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('to') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        parent.tooltipModule.predecessorTooltipData.toName +
-                        ' (' + parent.tooltipModule.predecessorTooltipData.toId + ')' +
-                        '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + parent.tooltipModule.predecessorTooltipData.linkText +
+                        (this.parent.disableHtmlEncode ? toNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : toNameValue) + ' (' + toIdValue + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
+                        '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + linkTextValue +
                         '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('lag') +
                         '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        parent.tooltipModule.predecessorTooltipData.offsetString + '</td></tr></tbody></table>';
+                        offsetStringValue + '</td></tr></tbody></table>';
                     break;
                 }
             case 'indicator':
                 if (args.target.title.length) {
-                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                    var titleValue = args.target.title;
+                    if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
+                        titleValue = SanitizeHtmlHelper.sanitize(titleValue);
+                    }
+                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
                 }
                 break;
             case 'timeline':
-                content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                var timlineTitleValue = args.target.title;
+                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
+                    timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
+                }
+                content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
                 break;
             case 'manualtaskbar':
                 {
+                    var autoStartDateValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    var autoEndDateValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    var durationUnitValue = this.parent.getDurationString(data.duration, data.durationUnit);
+                    var manualStartDateValue = this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat());
+                    var manualEndDateValue = this.parent.getFormatedDate(data.endDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        autoStartDateValue = typeof (autoStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoStartDateValue) : autoStartDateValue;
+                        autoEndDateValue = typeof (autoEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoEndDateValue) : autoEndDateValue;
+                        durationUnitValue = typeof (durationUnitValue) === 'string' ? SanitizeHtmlHelper.sanitize(durationUnitValue) : durationUnitValue;
+                        manualStartDateValue = typeof (manualStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualStartDateValue) : manualStartDateValue;
+                        manualEndDateValue = typeof (manualEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualEndDateValue) : manualEndDateValue;
+                    }
                     var autoStartDate = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoStartDateValue + '</td></tr>' : '';
                     var autoEndDate = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoEndDateValue + '</td></tr>' : '';
                     var durationValue = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value"> ' + this.parent.getDurationString(data.duration, data.durationUnit) +
+                        '<td class = "e-gantt-tooltip-value"> ' + durationUnitValue +
                         '</td></tr>' : '';
                     var manualStartDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('startDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        manualStartDateValue + '</td></tr>' : '';
                     var manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.endDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        manualEndDateValue + '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
                     break;
                 }
             case 'manualmilestone':
                 {
+                    var autoStartValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    var autoEndValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    var dateValue = this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        autoStartValue = typeof (autoStartValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoStartValue) : autoStartValue;
+                        autoEndValue = typeof (autoEndValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoEndValue) : autoEndValue;
+                        dateValue = typeof (dateValue) === 'string' ? SanitizeHtmlHelper.sanitize(dateValue) : dateValue;
+                    }
                     var autoStart = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoStartValue + '</td></tr>' : '';
                     var autoEnd = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoEndValue + '</td></tr>' : '';
                     var date = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</tr>';
+                        dateValue + '</tr>';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + date + autoStart + autoEnd + '</tbody></table>';
                     break;
@@ -389,6 +454,9 @@ var Tooltip = /** @class */ (function () {
      */
     Tooltip.prototype.getPredecessorTooltipData = function (args) {
         var predeceesorParent = args.target.parentElement.id;
+        if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
+            predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
+        }
         var taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
         taskIds.shift();
         var fromTask;

package/styles/bootstrap-dark.css

@@ -312,6 +312,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -341,7 +347,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 40px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -380,6 +386,7 @@
   border-radius: 50%;
   height: auto !important; /* stylelint-disable-line declaration-no-important */
   width: auto;
+  box-shadow: none;
 }
 .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item.e-active {
   margin-left: 5px !important;
@@ -1268,7 +1275,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1361,6 +1367,7 @@
   border-radius: 50%;
   height: auto !important; /* stylelint-disable-line declaration-no-important */
   width: auto;
+  box-shadow: none;
 }
 
 .e-icon-rowselect::before {
@@ -1665,13 +1672,13 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #4cc7ba;
-  border: 1px solid #4cc7ba;
+  border: 0px solid #4cc7ba;
   border-radius: 4px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0070f0;
-  border: 1px solid #0070f0;
-  border-radius: 4px;
+  border: 0px solid #0070f0;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #8dd1c4;
@@ -1682,7 +1689,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #67c1b2;
-  border: #4fb29f;
+  outline: #4fb29f;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #67c1b2;
@@ -1742,6 +1749,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0070f0;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0070f0;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0070f0;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0070f0;
 }
@@ -1793,7 +1812,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2054,14 +2076,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
-  border: 1px solid #0070f0;
-  border-radius: 4px;
+  border: 0px solid #0070f0;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap.css

@@ -456,6 +456,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -485,7 +491,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 40px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -1412,7 +1418,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1809,13 +1814,13 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #555;
-  border: 1px solid #555;
+  border: 0px solid #555;
   border-radius: 4px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #21527d;
-  border: 1px solid #21527d;
-  border-radius: 4px;
+  border: 0px solid #21527d;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #7538C9;
@@ -1826,7 +1831,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #572A96;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #572A96;
@@ -1886,6 +1891,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #21527d;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #21527d;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #21527d;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #21527d;
 }
@@ -1937,7 +1954,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2198,14 +2218,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
-  border: 1px solid #21527d;
-  border-radius: 4px;
+  border: 0px solid #21527d;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap4.css

@@ -637,6 +637,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -666,7 +672,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 38px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -1596,7 +1602,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1999,7 +2004,7 @@
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0056b3;
   border: 0px;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #8553F1;
@@ -2010,7 +2015,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #6628EE;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #6628EE;
@@ -2070,6 +2075,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0056b3;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0056b3;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0056b3;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0056b3;
 }
@@ -2121,7 +2138,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2382,14 +2402,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
   border: 0px;
-  border-radius: 4px;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {