all files / renderer/ tooltip.js

88.14% Statements 260/295
80.1% Branches 161/201
92% Functions 23/25
88.1% Lines 259/294
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491   1137× 1137× 1137×   1143× 1143×         1143× 1143× 1143× 1143× 1143× 1143× 1143× 1143× 1143× 1143× 1143× 1143×   35× 35×   34× 34× 34× 17×     17×   34× 34×           34×           32× 31× 22× 22×   31×             12× 12×   12× 12×   12×     19×           15×   11×                                       34× 30× 30× 30× 30×       30× 30× 29× 29×   30× 30×                                                                                                       24× 24× 24× 24× 16× 16× 16× 14×   16×     24×                                             15×                                                                                                                                                   24×                                   13× 13× 13× 13×   1136×        
define(["require", "exports", "@syncfusion/ej2-popups", "../base/utils", "../base/css-constants", "@syncfusion/ej2-base", "@syncfusion/ej2-data"], function (require, exports, ej2_popups_1, utils_1, cls, ej2_base_1, ej2_data_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Tooltip = (function () {
        function Tooltip(gantt) {
            this.parent = gantt;
            this.createTooltip();
            this.parent.on('destroy', this.destroy, this);
        }
        Tooltip.prototype.createTooltip = function () {
            this.toolTipObj = new ej2_popups_1.Tooltip();
            this.toolTipObj.target = '.e-header-cell-label, .e-gantt-child-taskbar,' +
                '.e-gantt-parent-taskbar, .e-gantt-milestone, .e-gantt-unscheduled-taskbar' +
                '.e-event-markers, .e-baseline-bar, .e-event-markers,' +
                '.e-connector-line-container, .e-indicator-span, .e-notes-info, .e-gantt-manualparent-milestone,' +
                '.e-taskbar-left-resizer, .e-taskbar-right-resizer, .e-baseline-gantt-milestone-container, .e-gantt-manualparenttaskbar';
            this.toolTipObj.position = 'BottomCenter';
            this.toolTipObj.openDelay = 700;
            this.toolTipObj.enableRtl = this.parent.enableRtl;
            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);
            this.toolTipObj.showTipPointer = false;
            this.toolTipObj.beforeRender = this.tooltipBeforeRender.bind(this);
            this.toolTipObj.afterClose = this.tooltipCloseHandler.bind(this);
            this.toolTipObj.isStringTemplate = true;
            this.toolTipObj.appendTo(this.parent.element);
        };
        Tooltip.prototype.tooltipBeforeRender = function (args) {
            var parent = this.parent;
            if (parent.isOnEdit) {
                args.cancel = true;
                return;
            }
            var element;
            var row = ej2_base_1.closest(args.target, 'div.' + cls.taskBarMainContainer);
            if (!ej2_base_1.isNullOrUndefined(row)) {
                element = args.target;
            }
            else {
                element = utils_1.parentsUntil(args.target, cls.chartRowCell);
            }
            var data;
            var argsData = {
                data: {},
                args: args,
                cancel: false,
                content: ''
            };
            if (args.target.classList.contains('e-header-cell-label')) {
                if (parent.timelineSettings.showTooltip) {
                    argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('timeline', data, parent, args);
                }
                else {
                    args.cancel = true;
                }
            }
            else {
                if (parent.tooltipSettings.showTooltip) {
                    if (element) {
                        argsData.data = parent.ganttChartModule.getRecordByTaskBar(element);
                        data = argsData.data;
                    }
                    if (args.target.classList.contains('e-gantt-child-taskbar') ||
                        args.target.classList.contains('e-gantt-parent-taskbar') ||
                        args.target.classList.contains('e-gantt-milestone') ||
                        args.target.classList.contains('e-gantt-unscheduled-taskbar') ||
                        args.target.classList.contains('e-taskbar-left-resizer') ||
                        args.target.classList.contains('e-taskbar-right-resizer') ||
                        (args.target.classList.contains('e-gantt-manualparenttaskbar') && parent.tooltipSettings.taskbar)) {
                        var taskbarTemplateNode = void 0;
                        if (parent.tooltipSettings.taskbar) {
                            taskbarTemplateNode = parent.tooltipModule.templateCompiler(parent.tooltipSettings.taskbar, parent, data, 'TooltipTaskbarTemplate');
                        }
                        var tooltipTemplate = document.createElement('div');
                        if (taskbarTemplateNode) {
                            ej2_base_1.append(taskbarTemplateNode, tooltipTemplate);
                        }
                        argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate : data ?
                            parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args) : '';
                    }
                    else if (args.target.classList.contains('e-baseline-bar') ||
                        args.target.classList.contains('e-baseline-gantt-milestone-container')) {
                        var baseLineTemplateNode = void 0;
                        if ((parent.tooltipSettings.baseline)) {
                            baseLineTemplateNode = parent.tooltipModule.templateCompiler(parent.tooltipSettings.baseline, parent, data, 'TooltipBaselineTemplate');
                        }
                        var baselineTemplate = document.createElement('div');
                        if (baseLineTemplateNode) {
                            ej2_base_1.append(baseLineTemplateNode, baselineTemplate);
                        }
                        argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate : data ?
                            parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args) : '';
                    }
                    else if (args.target.classList.contains('e-event-markers')) {
                        argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('marker', data, parent, args);
                    }
                    else if (args.target.classList.contains('e-connector-line-container')) {
                        var dependencyLineTemplateNode = void 0;
                        parent.tooltipModule.predecessorTooltipData = parent.tooltipModule.getPredecessorTooltipData(args);
                        argsData.data = this.predecessorTooltipData;
                        if ((parent.tooltipSettings.connectorLine)) {
                            dependencyLineTemplateNode = parent.tooltipModule.templateCompiler(parent.tooltipSettings.connectorLine, parent, parent.tooltipModule.predecessorTooltipData, 'TooltipConnectorLineTemplate');
                        }
                        argsData.content = this.toolTipObj.content = dependencyLineTemplateNode ?
                            dependencyLineTemplateNode[0] :
                            parent.tooltipModule.getTooltipContent('connectorLine', data, parent, args);
                    }
                    else if (args.target.classList.contains('e-indicator-span')) {
                        argsData.content = this.toolTipObj.content =
                            parent.tooltipModule.getTooltipContent('indicator', data, parent, args);
                        if (ej2_base_1.isNullOrUndefined(argsData.content)) {
                            args.cancel = true;
                        }
                    }
                    else if (args.target.classList.contains('e-notes-info')) {
                        var ganttData = this.parent.ganttChartModule.getRecordByTarget(args.event);
                        argsData.content = this.toolTipObj.content = ganttData.ganttProperties.notes;
                        Eif (ej2_base_1.isNullOrUndefined(argsData.content)) {
                            args.cancel = true;
                        }
                    }
                    else if (args.target.classList.contains('e-gantt-manualparenttaskbar')) {
                        argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('manualtaskbar', data, parent, args);
                        Iif (ej2_base_1.isNullOrUndefined(argsData.content)) {
                            args.cancel = true;
                        }
                    }
                    else Eif (args.target.classList.contains('e-gantt-manualparent-milestone')) {
                        argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('manualmilestone', data, parent, args);
                        Iif (ej2_base_1.isNullOrUndefined(argsData.content)) {
                            args.cancel = true;
                        }
                    }
                }
                else {
                    args.cancel = true;
                }
            }
            if (args.cancel === false) {
                var callBackPromise_1 = new ej2_data_1.Deferred();
                parent.trigger('beforeTooltipRender', argsData, function (argData) {
                    callBackPromise_1.resolve(argData);
                    Iif (argData.cancel) {
                        args.cancel = true;
                    }
                });
                this.toolTipObj.content = argsData.content;
                if (!this.parent.isAdaptive && args.event.type === 'mouseover') {
                    this.currentTarget = args.target;
                    ej2_base_1.EventHandler.add(this.currentTarget, 'mousemove', this.mouseMoveHandler.bind(this));
                }
                this.parent.renderTemplates();
                return callBackPromise_1;
            }
        };
        Tooltip.prototype.tooltipCloseHandler = function (args) {
            this.tooltipMouseEvent = null;
            if (!this.parent.isAdaptive && !ej2_base_1.isNullOrUndefined(this.currentTarget)) {
                ej2_base_1.EventHandler.remove(this.currentTarget, 'mousemove', this.mouseMoveHandler);
            }
            this.currentTarget = null;
        };
        Tooltip.prototype.mouseMoveHandler = function (e) {
            this.tooltipMouseEvent = e;
        };
        Tooltip.prototype.updateTooltipPosition = function (args) {
            args.element.style.visibility = 'visible';
            var parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
            if (ej2_base_1.isNullOrUndefined(parentWithZoomStyle)) {
                if (ej2_base_1.isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
                    return;
                }
                var postion = this.getPointorPosition(this.tooltipMouseEvent);
                var containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
                var topEnd = containerPosition.top + this.parent.chartPane.offsetHeight;
                var leftEnd = containerPosition.left + this.parent.chartPane.offsetWidth;
                var tooltipPositionX = postion.x;
                var tooltipPositionY = postion.y;
                if (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
                    while (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
                        tooltipPositionX = leftEnd - args.element.offsetWidth - 10;
                        args.element.style.left = tooltipPositionX + 'px';
                    }
                }
                else {
                    tooltipPositionX = tooltipPositionX + 10;
                    args.element.style.left = tooltipPositionX + 'px';
                }
                if (window.innerHeight < args.element.offsetHeight + tooltipPositionY) {
                    tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
                }
                if ((topEnd < (tooltipPositionY + args.element.offsetHeight + 20))) {
                    tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
                }
                else {
                    tooltipPositionY = tooltipPositionY + 10;
                }
                args.element.style.top = tooltipPositionY + 'px';
            }
        };
        Tooltip.prototype.getPointorPosition = function (e) {
            var posX;
            var posY;
            if (!ej2_base_1.isNullOrUndefined(ej2_base_1.getValue('pageX', e)) || !ej2_base_1.isNullOrUndefined(ej2_base_1.getValue('pageY', e))) {
                posX = ej2_base_1.getValue('pageX', e);
                posY = ej2_base_1.getValue('pageY', e);
            }
            else if (!ej2_base_1.isNullOrUndefined(ej2_base_1.getValue('clientX', e)) || !ej2_base_1.isNullOrUndefined(ej2_base_1.getValue('clientY', e))) {
                posX = ej2_base_1.getValue('clientX', e) + document.body.scrollLeft + document.documentElement.scrollLeft;
                posY = ej2_base_1.getValue('clientY', e) + document.body.scrollTop + document.documentElement.scrollTop;
            }
            return { x: posX, y: posY };
        };
        Tooltip.prototype.getTooltipContent = function (elementType, ganttData, parent, args) {
            var content;
            var data;
            var taskName;
            if (ganttData) {
                data = ganttData.ganttProperties;
                var taskNameValue = data.taskName;
                if (this.parent.enableHtmlSanitizer && typeof (taskNameValue) === 'string') {
                    taskNameValue = ej2_base_1.SanitizeHtmlHelper.sanitize(taskNameValue);
                }
                taskName = !ej2_base_1.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':
                    {
                        var milestoneStartDate = void 0;
                        if (args.target.className.includes('e-baseline-gantt-milestone-container') && !ej2_base_1.isNullOrUndefined(data.baselineStartDate)) {
                            milestoneStartDate = data.baselineStartDate;
                        }
                        else Eif (!ej2_base_1.isNullOrUndefined(data.startDate)) {
                            milestoneStartDate = data.startDate;
                        }
                        var sDateValue = this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat());
                        Eif (this.parent.enableHtmlSanitizer && typeof (sDateValue) === 'string') {
                            sDateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(sDateValue);
                        }
                        var sDate_1 = !ej2_base_1.isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                            '<td class = "e-gantt-tooltip-value">' +
                            sDateValue + '</td></tr>' : '';
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody>' +
                                taskName + sDate_1 + '</tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                        break;
                    }
                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;
                        Eif (this.parent.enableHtmlSanitizer) {
                            startDateValue = typeof (startDateValue) === 'string' ? ej2_base_1.SanitizeHtmlHelper.sanitize(startDateValue) : startDateValue;
                            endDateValue = typeof (endDateValue) === 'string' ? ej2_base_1.SanitizeHtmlHelper.sanitize(endDateValue) : endDateValue;
                            durationValue = ej2_base_1.SanitizeHtmlHelper.sanitize(durationValue);
                        }
                        var startDate_1 = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                            this.parent.localeObj.getConstant(scheduledTask ? 'startDate' : 'subTasksStartDate') +
                            '</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 style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
                        var duration_1 = !ej2_base_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_1 = '<tr><td class = "e-gantt-tooltip-label">' +
                            this.parent.localeObj.getConstant('progress') + '</td><td style="padding: 2px;">:</td><td>' + progressValue +
                            '</td></tr>';
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody>' +
                                taskName + startDate_1 + endDate_1 + duration_1 + progress_1 + '</tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                        break;
                    }
                case 'baseline':
                    {
                        var baselineStartDateValue_1 = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
                        var baselineEndDateValue_1 = this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat());
                        Eif (this.parent.enableHtmlSanitizer) {
                            baselineStartDateValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(baselineStartDateValue_1);
                            baselineEndDateValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(baselineEndDateValue_1);
                        }
                        var contentTemp = 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 = ej2_base_1.initializeCSPTemplate(contentTemp, this);
                        break;
                    }
                case 'marker':
                    {
                        var markerTooltipElement = parent.tooltipModule.getMarkerTooltipData(args);
                        var markerTooltipElementValue_1 = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
                        var markerLabel_1 = markerTooltipElement.label ? markerTooltipElement.label : '';
                        Eif (this.parent.enableHtmlSanitizer) {
                            markerLabel_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(markerLabel_1);
                            markerTooltipElementValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(markerTooltipElementValue_1);
                        }
                        var contentTemp = 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 = ej2_base_1.initializeCSPTemplate(contentTemp, this);
                        break;
                    }
                case 'connectorLine':
                    {
                        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;
                        Eif (this.parent.enableHtmlSanitizer) {
                            fromNameValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(fromNameValue_1);
                            fromIdValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(fromIdValue_1);
                            toNameValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(toNameValue_1);
                            toIdValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(toIdValue_1);
                            linkTextValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(linkTextValue_1);
                            offsetStringValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(offsetStringValue_1);
                        }
                        var contentTemp = 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 = ej2_base_1.initializeCSPTemplate(contentTemp, this);
                        break;
                    }
                case 'indicator':
                    if (args.target.title.length) {
                        var titleValue_1 = args.target.title;
                        Eif (this.parent.enableHtmlSanitizer && typeof (titleValue_1) === 'string') {
                            titleValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(titleValue_1);
                        }
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue_1 + '</tr></tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                    }
                    break;
                case 'timeline':
                    {
                        var timlineTitleValue_1 = args.target.title;
                        Eif (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue_1) === 'string') {
                            timlineTitleValue_1 = ej2_base_1.SanitizeHtmlHelper.sanitize(timlineTitleValue_1);
                        }
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue_1 + '</tr></tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                        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());
                        Eif (this.parent.enableHtmlSanitizer) {
                            autoStartDateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(autoStartDateValue);
                            autoEndDateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(autoEndDateValue);
                            durationUnitValue = ej2_base_1.SanitizeHtmlHelper.sanitize(durationUnitValue);
                            manualStartDateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(manualStartDateValue);
                            manualEndDateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(manualEndDateValue);
                        }
                        var autoStartDate_1 = '<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_1 = '<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_1 = '<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_1 = '<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_1 = '<tr><td class = "e-gantt-tooltip-label">' +
                            this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                            manualEndDateValue + '</td></tr>';
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody>' +
                                taskName + manualStartDate_1 + autoStartDate_1 + manualEndDate_1 + autoEndDate_1 + durationValue_1 + '</tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                        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());
                        Eif (this.parent.enableHtmlSanitizer) {
                            autoStartValue = ej2_base_1.SanitizeHtmlHelper.sanitize(autoStartValue);
                            autoEndValue = ej2_base_1.SanitizeHtmlHelper.sanitize(autoEndValue);
                            dateValue = ej2_base_1.SanitizeHtmlHelper.sanitize(dateValue);
                        }
                        var autoStart_1 = '<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_1 = '<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_1 = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                            '<td class = "e-gantt-tooltip-value">' +
                            dateValue + '</tr>';
                        var contentTemp = function () {
                            return '<table class = "e-gantt-tooltiptable"><tbody>' +
                                taskName + date_1 + autoStart_1 + autoEnd_1 + '</tbody></table>';
                        };
                        content = ej2_base_1.initializeCSPTemplate(contentTemp);
                        break;
                    }
            }
            return content;
        };
        Tooltip.prototype.getMarkerTooltipData = function (args) {
            var markerTooltipId = (args.target.id).match(/\d+/g);
            var markerTooltipElement = this.parent.eventMarkers[Number(markerTooltipId)];
            return markerTooltipElement;
        };
        Tooltip.prototype.getPredecessorTooltipData = function (args) {
            var predeceesorParent = args.target.id;
            Eif (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
                predeceesorParent = ej2_base_1.SanitizeHtmlHelper.sanitize(predeceesorParent);
            }
            var taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
            taskIds.shift();
            var fromTask;
            var toTask;
            if (this.parent.viewType === 'ResourceView') {
                fromTask = this.parent.flatData[this.parent.getTaskIds().indexOf('T' + taskIds[0])];
                toTask = this.parent.flatData[this.parent.getTaskIds().indexOf('T' + taskIds[1])];
            }
            else {
                fromTask = this.parent.flatData[this.parent.ids.indexOf(taskIds[0])];
                toTask = this.parent.flatData[this.parent.ids.indexOf(taskIds[1])];
            }
            var predecessor = (fromTask.ganttProperties.predecessor).filter(function (pdc) { return pdc.to === taskIds[1]; });
            var predecessorTooltipData = {
                fromId: this.parent.viewType === 'ResourceView' ? fromTask.ganttProperties.taskId : fromTask.ganttProperties.rowUniqueID,
                toId: this.parent.viewType === 'ResourceView' ? toTask.ganttProperties.taskId : toTask.ganttProperties.rowUniqueID,
                fromName: fromTask.ganttProperties.taskName,
                toName: toTask.ganttProperties.taskName,
                linkType: predecessor[0].type,
                linkText: this.parent.getPredecessorTextValue(predecessor[0].type),
                offset: predecessor[0].offset,
                offsetUnit: predecessor[0].offsetUnit,
                offsetString: this.parent.getDurationString(predecessor[0].offset, predecessor[0].offsetUnit)
            };
            return predecessorTooltipData;
        };
        Tooltip.prototype.templateCompiler = function (template, parent, data, propName) {
            var tooltipFunction = parent.chartRowsModule.templateCompiler(template);
            var templateID = parent.chartRowsModule.getTemplateID(propName);
            var templateNode = tooltipFunction(ej2_base_1.extend({ index: 0 }, data), parent, propName, templateID, true);
            return templateNode;
        };
        Tooltip.prototype.destroy = function () {
            this.toolTipObj.destroy();
        };
        return Tooltip;
    }());
    exports.Tooltip = Tooltip;
});