@syncfusion/ej2-gantt 21.2.9 → 22.1.34

package/src/gantt/renderer/edit-tooltip.js

@@ -172,23 +172,23 @@ var EditTooltip = /** @class */ (function () {
             var duration = void 0;
             if (!isNullOrUndefined(editRecord.startDate)) {
                 startDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('startDate') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     instance.formatDate(editRecord.startDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
             }
             if (!isNullOrUndefined(editRecord.endDate)) {
                 endDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('endDate') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     instance.formatDate(editRecord.endDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
             }
             if (!isNullOrUndefined(editRecord.duration)) {
                 duration = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('duration') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     this.parent.getDurationString(editRecord.duration, editRecord.durationUnit) + '</td></tr>';
             }
             switch (this.taskbarEdit.taskBarEditAction) {
                 case 'ProgressResizing':
                     var progress = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('progress') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' + editRecord.progress + '</td></tr>';
+                        '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' + editRecord.progress + '</td></tr>';
                     tooltipString = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         progress + '</tbody></table>';
                     break;

package/src/gantt/renderer/nonworking-day.js

@@ -19,7 +19,7 @@ var NonWorkingDay = /** @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: cls.nonworkingContainer
             });
-            this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
+            this.parent.ganttChartModule.chartBodyContent.insertBefore(this.nonworkingContainer, this.parent.ganttChartModule.chartBodyContent.lastChild);
         }
     };
     /**
@@ -168,7 +168,7 @@ var NonWorkingDay = /** @class */ (function () {
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
         var height = this.parent.getContentHeight();
-        var gantttable = this.parent.element;
+        var gantttable = document.getElementById("ganttContainer");
         // eslint-disable-next-line
         var toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {

package/src/gantt/renderer/tooltip.d.ts

@@ -43,7 +43,7 @@ export declare class Tooltip {
      * @param {IGanttData} ganttData .
      * @param {Gantt} parent .
      * @param {TooltipEventArgs} args .
-     * @returns {string} .
+     * @returns {string | Function} .
      */
     private getTooltipContent;
     /**
@@ -65,13 +65,13 @@ export declare class Tooltip {
     /**
      * To compile template string.
      *
-     * @param {string} template .
+     * @param {string | Function} template .
      * @param {Gantt} parent .
      * @param {IGanttData|PredecessorTooltip} data .
      * @param {string} propName .
      * @returns {NodeList} .
      * @private
      */
-    templateCompiler(template: string, parent: Gantt, data: IGanttData | PredecessorTooltip, propName: string): NodeList;
+    templateCompiler(template: string | Function, parent: Gantt, data: IGanttData | PredecessorTooltip, propName: string): NodeList;
     private destroy;
 }

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, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, getValue, EventHandler, closest, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { Deferred } from '@syncfusion/ej2-data';
 /**
  * File for handling tooltip in Gantt.
@@ -233,7 +233,7 @@ var Tooltip = /** @class */ (function () {
      * @param {IGanttData} ganttData .
      * @param {Gantt} parent .
      * @param {TooltipEventArgs} args .
-     * @returns {string} .
+     * @returns {string | Function} .
      */
     Tooltip.prototype.getTooltipContent = function (elementType, ganttData, parent, args) {
         var content;
@@ -262,11 +262,14 @@ var Tooltip = /** @class */ (function () {
                     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>' +
+                    var sDate_1 = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
                         sDateValue + '</td></tr>' : '';
-                    content = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + sDate + '</tbody></table>';
+                    var contentTemp_1 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + sDate_1 + '</tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_1);
                     break;
                 }
             case 'taskbar':
@@ -282,96 +285,114 @@ var Tooltip = /** @class */ (function () {
                         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">' +
+                    var startDate_1 = 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"> ' + startDateValue + '</td></tr>' : '';
-                    var endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
+                    var endDate_1 = 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">' + endDateValue + '</td></tr>' : '';
-                    var duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
+                    var duration_1 = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        this.parent.localeObj.getConstant('duration') + '</td><td style="padding: 2px;">:</td>' +
                         '<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>' + progressValue +
+                    var progress_1 = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        this.parent.localeObj.getConstant('progress') + '</td><td style="padding: 2px;">:</td><td>' + progressValue +
                         '</td></tr>' : '';
-                    content = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + startDate + endDate + duration + progress + '</tbody></table>';
+                    var contentTemp_2 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + startDate_1 + endDate_1 + duration_1 + progress_1 + '</tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_2);
                     break;
                 }
             case 'baseline':
                 {
-                    var baselineStartDateValue = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
-                    var baselineEndDateValue = this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat());
+                    var baselineStartDateValue_1 = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
+                    var baselineEndDateValue_1 = 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;
+                        baselineStartDateValue_1 = typeof (baselineStartDateValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(baselineStartDateValue_1) : baselineStartDateValue_1;
+                        baselineEndDateValue_1 = typeof (baselineEndDateValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(baselineEndDateValue_1) : baselineEndDateValue_1;
                     }
-                    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">' +
-                        baselineStartDateValue + '</td></tr><tr>' +
-                        '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        baselineEndDateValue + '</td></tr></tbody></table>';
+                    var contentTemp_3 = function () {
+                        return '<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">' +
+                            baselineStartDateValue_1 + '</td></tr><tr>' +
+                            '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                            baselineEndDateValue_1 + '</td></tr></tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_3, this);
                     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 : '';
+                    var markerTooltipElementValue_1 = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
+                    var markerLabel_1 = markerTooltipElement.label ? markerTooltipElement.label : '';
                     if (this.parent.enableHtmlSanitizer) {
-                        markerLabel = typeof (markerLabel) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel) : markerLabel;
-                        markerTooltipElementValue = typeof (markerTooltipElementValue) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue) : markerTooltipElementValue;
+                        markerLabel_1 = typeof (markerLabel_1) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel_1) : markerLabel_1;
+                        markerTooltipElementValue_1 = typeof (markerTooltipElementValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue_1) : markerTooltipElementValue_1;
                     }
-                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
-                        markerTooltipElementValue + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel) + '</td></tr></tbody></table>';
+                    var contentTemp_4 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
+                            markerTooltipElementValue_1 + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel_1) + '</td></tr></tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_4, this);
                     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;
+                    var fromNameValue_1 = parent.tooltipModule.predecessorTooltipData.fromName;
+                    var fromIdValue_1 = parent.tooltipModule.predecessorTooltipData.fromId;
+                    var toNameValue_1 = parent.tooltipModule.predecessorTooltipData.toName;
+                    var toIdValue_1 = parent.tooltipModule.predecessorTooltipData.toId;
+                    var linkTextValue_1 = parent.tooltipModule.predecessorTooltipData.linkText;
+                    var offsetStringValue_1 = 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;
+                        fromNameValue_1 = typeof (fromNameValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(fromNameValue_1) : fromNameValue_1;
+                        fromIdValue_1 = typeof (fromIdValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(fromIdValue_1) : fromIdValue_1;
+                        toNameValue_1 = typeof (toNameValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(toNameValue_1) : toNameValue_1;
+                        toIdValue_1 = typeof (toIdValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(toIdValue_1) : toIdValue_1;
+                        linkTextValue_1 = typeof (linkTextValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(linkTextValue_1) : linkTextValue_1;
+                        offsetStringValue_1 = typeof (offsetStringValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(offsetStringValue_1) : offsetStringValue_1;
                     }
-                    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">' + (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">' +
-                        (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">' +
-                        offsetStringValue + '</td></tr></tbody></table>';
+                    var contentTemp_5 = function () {
+                        return '<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">' + (this.parent.disableHtmlEncode ? fromNameValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromNameValue_1) + ' (' +
+                            (this.parent.disableHtmlEncode ? (typeof (fromIdValue_1) === 'string' ? fromIdValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromIdValue_1) : fromIdValue_1) + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
+                            this.parent.localeObj.getConstant('to') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
+                            (this.parent.disableHtmlEncode ? toNameValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : toNameValue_1) + ' (' + toIdValue_1 + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + linkTextValue_1 +
+                            '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('lag') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                            offsetStringValue_1 + '</td></tr></tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_5, this);
                     break;
                 }
             case 'indicator':
                 if (args.target.title.length) {
-                    var titleValue = args.target.title;
-                    if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
-                        titleValue = SanitizeHtmlHelper.sanitize(titleValue);
+                    var titleValue_1 = args.target.title;
+                    if (this.parent.enableHtmlSanitizer && typeof (titleValue_1) === 'string') {
+                        titleValue_1 = SanitizeHtmlHelper.sanitize(titleValue_1);
                     }
-                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
+                    var contentTemp_6 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue_1 + '</tr></tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_6);
                 }
                 break;
             case 'timeline':
-                var timlineTitleValue = args.target.title;
-                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
-                    timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
+                var timlineTitleValue_1 = args.target.title;
+                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue_1) === 'string') {
+                    timlineTitleValue_1 = SanitizeHtmlHelper.sanitize(timlineTitleValue_1);
                 }
-                content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
+                var contentTemp = function () {
+                    return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue_1 + '</tr></tbody></table>';
+                };
+                content = initializeCSPTemplate(contentTemp);
                 break;
             case 'manualtaskbar':
                 {
@@ -387,24 +408,27 @@ var Tooltip = /** @class */ (function () {
                         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">' +
+                    var autoStartDate_1 = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         autoStartDateValue + '</td></tr>' : '';
-                    var autoEndDate = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoEndDate_1 = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         autoEndDateValue + '</td></tr>' : '';
-                    var durationValue = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var durationValue_1 = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value"> ' + durationUnitValue +
                         '</td></tr>' : '';
-                    var manualStartDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var manualStartDate_1 = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('startDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         manualStartDateValue + '</td></tr>' : '';
-                    var manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var manualEndDate_1 = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         manualEndDateValue + '</td></tr>' : '';
-                    content = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
+                    var contentTemp_7 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + manualStartDate_1 + autoStartDate_1 + manualEndDate_1 + autoEndDate_1 + durationValue_1 + '</tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_7);
                     break;
                 }
             case 'manualmilestone':
@@ -417,17 +441,20 @@ var Tooltip = /** @class */ (function () {
                         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">' +
+                    var autoStart_1 = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         autoStartValue + '</td></tr>' : '';
-                    var autoEnd = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoEnd_1 = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         autoEndValue + '</td></tr>' : '';
-                    var date = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    var date_1 = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
                         dateValue + '</tr>';
-                    content = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + date + autoStart + autoEnd + '</tbody></table>';
+                    var contentTemp_8 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + date_1 + autoStart_1 + autoEnd_1 + '</tbody></table>';
+                    };
+                    content = initializeCSPTemplate(contentTemp_8);
                     break;
                 }
         }
@@ -453,7 +480,7 @@ var Tooltip = /** @class */ (function () {
      * @private
      */
     Tooltip.prototype.getPredecessorTooltipData = function (args) {
-        var predeceesorParent = args.target.parentElement.id;
+        var predeceesorParent = args.target.id;
         if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
             predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
         }
@@ -486,7 +513,7 @@ var Tooltip = /** @class */ (function () {
     /**
      * To compile template string.
      *
-     * @param {string} template .
+     * @param {string | Function} template .
      * @param {Gantt} parent .
      * @param {IGanttData|PredecessorTooltip} data .
      * @param {string} propName .

package/styles/bootstrap-dark.css

@@ -337,9 +337,6 @@
 .e-bigger .e-gantt .e-dialog .e-dlg-header {
   line-height: 28px;
 }
-.e-bigger .e-gantt .e-filter-popup.e-popup {
-  width: 350px !important;
-}
 .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
   padding: 16px 0 0 !important;
 }
@@ -678,6 +675,9 @@
   line-height: 10px;
   vertical-align: middle;
 }
+.e-gantt .e-gantt-tree-grid-pane .e-grid .e-gantt-resource-parent .e-rowdragdrop {
+  pointer-events: none;
+}
 .e-gantt .e-gantt-chart {
   height: 100%;
   overflow: hidden;
@@ -1601,6 +1601,9 @@
   background: #484848;
   opacity: 1;
 }
+.e-gantt .e-taskbar-resize-div {
+  border-color: #0070f0;
+}
 .e-gantt .e-gantt-chart .e-timeline-header-container {
   background: #1a1a1a;
   border-bottom-color: #484848;
@@ -1648,7 +1651,7 @@
   outline-color: #248aff;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
-  background-color: #248aff;
+  background: #248aff;
   outline: 1px solid #0070f0;
   border-radius: 4px;
 }
@@ -1685,7 +1688,7 @@
   border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
-  background-color: #8dd1c4;
+  background: #8dd1c4;
   outline: #4fb29f;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
@@ -1853,23 +1856,16 @@
 .e-gantt .e-gantt-chart .e-icon {
   color: #fff;
 }
-.e-gantt .e-gantt-chart .e-milestone-top {
-  border-bottom-color: #dadada;
-}
-.e-gantt .e-gantt-chart .e-milestone-bottom {
-  border-top-color: #dadada;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-top {
-  border-bottom-color: #4cc7ba;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-bottom {
-  border-top-color: #4cc7ba;
+.e-gantt .e-gantt-chart .e-gantt-milestone {
+  background-color: #dadada;
+  border-color: #0070f0;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-top {
-  border-bottom-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-parent-milestone {
+  background-color: #4cc7ba;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom {
-  border-top-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-manualparent-milestone {
+  background-color: #989A9C;
+  border-color: #0070f0;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-manualtask {
   background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%);
@@ -1889,11 +1885,8 @@
 .e-gantt .e-gantt-chart .e-baseline-bar {
   background-color: #fac168;
 }
-.e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #fac168;
-}
-.e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #fac168;
+.e-gantt .e-gantt-chart .e-baseline-gantt-milestone-container {
+  background-color: #fac168;
 }
 .e-gantt .e-gantt-chart .e-uptail::before {
   border-bottom-color: #e0e0e0;
@@ -1947,11 +1940,8 @@
   background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   border: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-top {
-  border-bottom-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-bottom {
-  border-top-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-milestone {
+  background-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div {
   background-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
@@ -1965,21 +1955,15 @@
   background: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
   border: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-top {
-  border-bottom-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-bottom {
-  border-top-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-milestone {
+  background-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div {
   background: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
   border: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-top {
-  border-bottom-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-bottom {
-  border-top-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-milestone {
+  background-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line {
   border-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
@@ -2079,7 +2063,7 @@
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
-  background-color: #F3D8DA;
+  background: #F3D8DA;
   outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
@@ -2098,10 +2082,6 @@
   border-radius: 4px;
 }
 
-.e-gantt .e-gantt-chart .e-critical-milestone-top {
-  border-bottom-color: #D13438;
-}
-
-.e-gantt .e-gantt-chart .e-critical-milestone-bottom {
-  border-top-color: #D13438;
+.e-gantt .e-gantt-chart .e-critical-milestone {
+  background-color: #D13438;
 }