@syncfusion/ej2-treemap 20.3.56 → 20.4.38

package/dist/es6/ej2-treemap.es5.js

@@ -607,6 +607,12 @@ var Size = /** @__PURE__ @class */ (function () {
     }
     return Size;
 }());
+/**
+ *
+ * @param {string} value - specifies the text.
+ * @param {number} containerSize - specifies the container size value.
+ * @returns {number} - Returns the number value which is converted from string.
+ */
 function stringToNumber(value, containerSize) {
     if (value !== null && value !== undefined) {
         return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
@@ -664,7 +670,6 @@ var PathOption = /** @__PURE__ @class */ (function () {
  *
  * @param  {string} text - Specifies the text.
  * @param  {FontModel} font - Specifies the font.
- * @param  {string} id - Specifies the id.
  * @returns {Size} - Returns the size.
  * @private
  */
@@ -748,6 +753,12 @@ var Location = /** @__PURE__ @class */ (function () {
 }());
 /**
  * Method to calculate x position of title
+ *
+ * @param {Rect} location - Specifies the location of text.
+ * @param {Alignment} alignment - Specifies the alignment of the text.
+ * @param {Size} textSize - Specifies the size of the text.
+ * @param {type} type - Specifies whether the provided text is title or subtitle.
+ * @returns {Location} - Returns the location of text.
  */
 function findPosition(location, alignment, textSize, type) {
     var x;
@@ -767,9 +778,14 @@ function findPosition(location, alignment, textSize, type) {
     var y = (type === 'title') ? location.y + (textSize.height / 2) : ((location.y + location.height / 2) + textSize.height / 2);
     return new Location(x, y);
 }
-function createTextStyle(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-renderer, renderOptions, text) {
+/**
+ *
+ * @param {SvgRenderer} renderer - Specifies the rendering element of the SVG.
+ * @param {any} renderOptions - Specifies the settings of the text.
+ * @param {string} text - Specifies the text.
+ * @returns {HTMLElement} - Returns the HTML element for the text.
+ */
+function createTextStyle(renderer, renderOptions, text) {
     var htmlObject = renderer.createText(renderOptions, text);
     htmlObject.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
     htmlObject.style['user-select'] = 'none';
@@ -787,14 +803,13 @@ renderer, renderOptions, text) {
  * @param {TextOption} options - Specifies the text option
  * @param {FontModel} font - Specifies the font model
  * @param {string} color - Specifies the color
- * @param {HTMLElement | Element} parent - Specifes the html element
+ * @param {HTMLElement | Element} parent - Specifies the parent element of the text
  * @param {boolean} isMinus - Specifies the boolean value
  * @returns {Element} - Returns the element
  * @private
  */
 function renderTextElement(options, font, color, parent, isMinus) {
     if (isMinus === void 0) { isMinus = false; }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var renderOptions = {
         'font-size': font.size,
         'font-style': font.fontStyle,
@@ -821,7 +836,8 @@ function renderTextElement(options, font, color, parent, isMinus) {
         var spacing = 5;
         var drillLevelText = drilledLabel.split('#');
         for (var z = 0; z < drillLevelText.length; z++) {
-            var drillText = (drillLevelText[z].search(options.connectorText) !== -1 && !isNullOrUndefined(options.connectorText)) ?
+            var drillText = (drillLevelText[z].search(options.connectorText) !== -1 &&
+                !isNullOrUndefined(options.connectorText)) ?
                 options.connectorText : drillLevelText[z];
             renderOptions['id'] = options.id + '_' + z;
             htmlObject = createTextStyle(renderer, renderOptions, drillText);
@@ -851,6 +867,13 @@ function renderTextElement(options, font, color, parent, isMinus) {
     }
     return htmlObject;
 }
+/**
+ *
+ * @param {string} targetId - Specifies the id of the element to which template is to be appended.
+ * @param {Element} targetElement - Specifies the element to which template is to be appended.
+ * @param {string} contentItemTemplate - Specifies the content to be appended as template.
+ * @returns {void}
+ */
 function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
     var itemSelect = targetId.split('_RectPath')[0];
     var itemTemplate;
@@ -864,21 +887,39 @@ function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
         itemTemplate.innerHTML = contentItemTemplate;
     }
 }
+/**
+ *
+ * @param {string} id - Specifies the id of the element.
+ * @returns {Element} - Returns the element.
+ */
 function getElement(id) {
     return document.getElementById(id);
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {any} a - Specifies the first order of TreeMap leaf elements.
+ * @param {any} b - Specifies the second order of TreeMap leaf elements.
+ * @returns {number} - Returns the order of the TreeMap leaf element.
+ */
 function itemsToOrder(a, b) {
     return a['weight'] === b['weight'] ? 0 : a['weight'] < b['weight'] ? 1 : -1;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {string[]} source - Specifies the data from the data source.
+ * @param {string} pathName - Specifies the path name in the data source.
+ * @param {any} processData - Specifies the data source object.
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @returns {boolean} - Specifies whether data is available in the data source or not.
+ */
 function isContainsData(source, pathName, processData, treemap) {
     var isExist = false;
     var name = '';
     var path;
     var leaf = treemap.leafItemSettings;
     for (var i = 0; i < source.length; i++) {
-        path = treemap.levels[i] ? treemap.levels[i].groupPath : leaf.labelPath ? leaf.labelPath : treemap.weightValuePath;
+        path = treemap.levels[i] ? treemap.levels[i].groupPath : leaf.labelPath ? leaf.labelPath :
+            treemap.weightValuePath;
         var data = processData[path] || 'undefined';
         if (source[i] === data) {
             name += data + (i === source.length - 1 ? '' : '#');
@@ -890,9 +931,12 @@ function isContainsData(source, pathName, processData, treemap) {
     }
     return isExist;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {any} data - Specifies the data to which the children elements to be found.
+ * @returns {any} - Returns the children elements of the TreeMap leaf element.
+ */
 function findChildren(data) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var children;
     if (data) {
         var keys = Object.keys(data);
@@ -907,11 +951,17 @@ function findChildren(data) {
     }
     return children;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {any} data - Specifies the data to which highlight must be done.
+ * @param {items} items - Specifies the data source items.
+ * @param {string} mode - Specifies the mode of highlight.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
+ * @returns {string[]} - Returns the highlighted items.
+ */
 function findHightLightItems(data, items, mode, treeMap) {
     if (mode === 'Child') {
         items.push(data['levelOrderName']);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var children = findChildren(data)['values'];
         if (children && children.length > 0) {
             for (var i = 0; i < children.length; i++) {
@@ -932,7 +982,6 @@ function findHightLightItems(data, items, mode, treeMap) {
     }
     else if (mode === 'All') {
         var parentName = data['levelOrderName'].split('#')[0];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var currentItem = void 0;
         for (var i = 0; i < treeMap.layout.renderItems.length; i++) {
             currentItem = treeMap.layout.renderItems[i];
@@ -953,11 +1002,8 @@ function findHightLightItems(data, items, mode, treeMap) {
  * @returns {Function} - Returns the template function
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getTemplateFunction(template) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var templateFn = null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     try {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
@@ -975,31 +1021,38 @@ function getTemplateFunction(template) {
  * @param {Object} data - Specifies the data
  * @returns {HTMLElement} - Returns the element
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function convertElement(element, labelId, data) {
     var childElement = createElement('div', {
-        id: labelId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: labelId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     var elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
         elementLength--;
     }
     var templateHtml = childElement.innerHTML;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var keys = Object.keys(data);
     for (var i = 0; i < keys.length; i++) {
-        templateHtml = templateHtml.replace(new RegExp('{{:' + keys[i] + '}}', 'g'), data[keys[i].toString()]);
+        var regExp = RegExp;
+        templateHtml = templateHtml.replace(new regExp('{{:' + keys[i] + '}}', 'g'), data[keys[i].toString()]);
     }
     childElement.innerHTML = templateHtml;
     return childElement;
 }
+/**
+ *
+ * @param {Rect} rect - Specifies the area.
+ * @param {LabelPosition} position - Specifies the position
+ * @param {Size} labelSize - Specifies the label size.
+ * @param {string} type - Specifies the type.
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @returns {Location} - Returns the text location.
+ */
 function findLabelLocation(rect, position, labelSize, type, treemap) {
     var location = new Location(0, 0);
     var padding = 5;
     var paddings = 2;
-    var elementRect = treemap.element.getBoundingClientRect();
     var x = (type === 'Template') ? treemap.areaRect.x : 0;
     var y = (type === 'Template') ? treemap.areaRect.y : 0;
     location.x = (Math.abs(x - ((position.indexOf('Left') > -1) ? rect.x + padding : !(position.indexOf('Right') > -1) ?
@@ -1015,6 +1068,12 @@ function findLabelLocation(rect, position, labelSize, type, treemap) {
     }
     return location;
 }
+/**
+ *
+ * @param {HTMLElement} element - Specifies the element to be measured.
+ * @param {HTMLElement} parentElement - Specifies the parent element of the element to be measured.
+ * @returns {Size} - Returns the element size.
+ */
 function measureElement(element, parentElement) {
     var size = new Size(0, 0);
     parentElement.appendChild(element);
@@ -1024,9 +1083,19 @@ function measureElement(element, parentElement) {
     measureElementId.parentNode.removeChild(measureElementId);
     return size;
 }
+/**
+ *
+ * @param {Rect} rect - Specifies the area.
+ * @returns {number} - Returns the area width.
+ */
 function getArea(rect) {
     return (rect.width - rect.x) * (rect.height - rect.y);
 }
+/**
+ *
+ * @param {Rect} input - Specifies input for the calculation.
+ * @returns {number} - Returns the shortest edge.
+ */
 function getShortestEdge(input) {
     var container = convertToContainer(input);
     var width = container.width;
@@ -1034,6 +1103,11 @@ function getShortestEdge(input) {
     var result = Math.min(width, height);
     return result;
 }
+/**
+ *
+ * @param {Rect} rect - Specifies the rectangle bounds of the container.
+ * @returns {Rect} - Returns the rectangle bounds.
+ */
 function convertToContainer(rect) {
     var x = rect.x;
     var y = rect.y;
@@ -1046,6 +1120,11 @@ function convertToContainer(rect) {
         height: height - y
     };
 }
+/**
+ *
+ * @param {Rect} container - Specifies the rectangle bounds of the container.
+ * @returns {Rect} - Returns the rectangle bounds.
+ */
 function convertToRect(container) {
     var xOffset = container.x;
     var yOffset = container.y;
@@ -1058,6 +1137,13 @@ function convertToRect(container) {
         height: yOffset + height
     };
 }
+/**
+ *
+ * @param {number} pageX - Specifies the horizontal position of the mouse location.
+ * @param {number} pageY - Specifies the vertical position of the mouse location.
+ * @param {Element} element - Specifies the element to which the click is done.
+ * @returns {Location} - Returns the clicked location.
+ */
 function getMousePosition(pageX, pageY, element) {
     var elementRect = element.getBoundingClientRect();
     var pageXOffset = element.ownerDocument.defaultView.pageXOffset;
@@ -1068,9 +1154,15 @@ function getMousePosition(pageX, pageY, element) {
     var positionY = elementRect.top + pageYOffset - clientTop;
     return new Location((pageX - positionX), (pageY - positionY));
 }
-function colorMap(colorMapping, equalValue, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-value, weightValuePath) {
+/**
+ *
+ * @param {ColorMappingModel[]} colorMapping - Specifies the color mapping instance.
+ * @param {string} equalValue - Specifies the equal value.
+ * @param {number | string} value - Specifies the range value.
+ * @returns {any} - Returns the color mapping object.
+ * @private
+ */
+function colorMap(colorMapping, equalValue, value) {
     var fill;
     var paths = [];
     var opacity;
@@ -1082,7 +1174,8 @@ value, weightValuePath) {
         var dataValue = value;
         if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
             && !isNullOrUndefined(colorMapping[i].value)) {
-            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) && (colorMapping[i].value === equalValue)) {
+            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
+                (colorMapping[i].value === equalValue)) {
                 isEqualColor = true;
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
                     fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -1094,7 +1187,8 @@ value, weightValuePath) {
         }
         else if ((!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to))
             || !isNullOrUndefined((colorMapping[i].value))) {
-            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) || (colorMapping[i].value === equalValue)) {
+            if ((value >= colorMapping[i].from && colorMapping[i].to >= value)
+                || (colorMapping[i].value === equalValue)) {
                 if (colorMapping[i].value === equalValue) {
                     isEqualColor = true;
                 }
@@ -1106,9 +1200,11 @@ value, weightValuePath) {
                 }
             }
         }
-        if (((value >= colorMapping[i].from && value <= colorMapping[i].to) || (colorMapping[i].value === equalValue))
-            && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity) && fill) {
-            opacity = deSaturationColor(weightValuePath, colorMapping[i], fill, value);
+        if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
+            || (colorMapping[i].value === equalValue))
+            && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
+            && fill) {
+            opacity = deSaturationColor(colorMapping[i], value);
         }
         if ((fill === '' || isNullOrUndefined(fill))
             && isNullOrUndefined(colorMapping[i].from) && isNullOrUndefined(colorMapping[i].to)
@@ -1126,7 +1222,14 @@ value, weightValuePath) {
     }
     return { fill: fill, opacity: opacity };
 }
-function deSaturationColor(weightValuePath, colorMapping, color, rangeValue) {
+/**
+ *
+ * @param {ColorMappingModel} colorMapping - Specifies the color mapping object.
+ * @param {number} rangeValue - Specifies the range value.
+ * @returns {string} - Returns the opacity for the color mapping.
+ * @private
+ */
+function deSaturationColor(colorMapping, rangeValue) {
     var opacity = 1;
     if ((rangeValue >= colorMapping.from && rangeValue <= colorMapping.to)) {
         var ratio = (rangeValue - colorMapping.from) / (colorMapping.to - colorMapping.from);
@@ -1134,13 +1237,32 @@ function deSaturationColor(weightValuePath, colorMapping, color, rangeValue) {
     }
     return opacity.toString();
 }
+/**
+ *
+ * @param {ColorMappingModel} colorMap - Specifies the color mapping object.
+ * @param {number} value - Specifies the range value.
+ * @returns {string} - Returns the fill color.
+ */
 function colorCollections(colorMap, value) {
     var gradientFill = getColorByValue(colorMap, value);
     return gradientFill;
 }
+/**
+ *
+ * @param {number} r - Specifies the red color value.
+ * @param {number} g - Specifies the green color value.
+ * @param {number} b - Specifies the blue color value.
+ * @returns {string} - Returns the fill color.
+ */
 function rgbToHex(r, g, b) {
     return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
 }
+/**
+ *
+ * @param {ColorMappingModel} colorMap - Specifies the color mapping.
+ * @param {number} value - Specifies the range value.
+ * @returns {string} - Returns the fill color.
+ */
 function getColorByValue(colorMap, value) {
     var color = '';
     var rbg;
@@ -1156,6 +1278,12 @@ function getColorByValue(colorMap, value) {
     }
     return color;
 }
+/**
+ *
+ * @param {number} value - Specifies the range value.
+ * @param {ColorMappingModel} colorMap - Specifies the color mapping.
+ * @returns {ColorValue} - Returns the color value object.
+ */
 function getGradientColor(value, colorMap) {
     var previousOffset = colorMap.from;
     var nextOffset = colorMap.to;
@@ -1178,7 +1306,6 @@ function getGradientColor(value, colorMap) {
         var b = void 0;
         var c = void 0;
         var length_1 = colorMap.color.length - 1;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var splitColorValueOffset = [];
         var splitColor = {};
         for (var j = 1; j < length_1; j++) {
@@ -1216,6 +1343,13 @@ function getGradientColor(value, colorMap) {
     }
     return getPercentageColor(percent, previousColor, nextColor);
 }
+/**
+ *
+ * @param {number} percent - Specifies the percentage of the color.
+ * @param {number} previous - Specifies the previous color.
+ * @param {number} next - Specifies the next color.
+ * @returns {ColorValue} - Returns the color value object.
+ */
 function getPercentageColor(percent, previous, next) {
     var nextColor = next.split('#')[1];
     var prevColor = previous.split('#')[1];
@@ -1224,10 +1358,24 @@ function getPercentageColor(percent, previous, next) {
     var b = getPercentage(percent, parseInt(prevColor.substr(4, 2), 16), parseInt(nextColor.substr(4, 2), 16));
     return new ColorValue(r, g, b);
 }
+/**
+ *
+ * @param {number} percent - Specifies the percentage of the color.
+ * @param {number} previous - Specifies the previous color.
+ * @param {number} next - Specifies the next color.
+ * @returns {number} - Returns the color value.
+ */
 function getPercentage(percent, previous, next) {
     var full = next - previous;
     return Math.round((previous + (full * percent)));
 }
+/**
+ *
+ * @param {number} maximumWidth - Specifies the length of the text.
+ * @param {string} dataLabel - Specifies the label.
+ * @param {FontModel} font - Specifies the font of the label.
+ * @returns {string[]} - Returns the labels.
+ */
 function wordWrap(maximumWidth, dataLabel, font) {
     var textCollection = dataLabel.split(' ');
     var label = '';
@@ -1254,6 +1402,13 @@ function wordWrap(maximumWidth, dataLabel, font) {
     }
     return labelCollection;
 }
+/**
+ *
+ * @param {number} maxWidth - Specifies the length of the text.
+ * @param {string} label - Specifies the label.
+ * @param {FontModel} font - Specifies the font of the label.
+ * @returns {string[]} - Returns the labels.
+ */
 function textWrap(maxWidth, label, font) {
     var resultText = [];
     var currentLength = 0;
@@ -1282,11 +1437,11 @@ function textWrap(maxWidth, label, font) {
 /**
  * hide function
  *
- * @param {number} maxWidth - Specifies the maximum width
- * @param {number} maxHeight - Specifies the maximum height
- * @param {string} text - Specifies the text
- * @param {FontModel} font - Specifies the font
- * @returns {string} - Returns the hideText
+ * @param {number} maxWidth - Specifies the maximum width.
+ * @param {number} maxHeight - Specifies the maximum height.
+ * @param {string} text - Specifies the text.
+ * @param {FontModel} font - Specifies the font.
+ * @returns {string} - Returns the hidden text.
  */
 function hide(maxWidth, maxHeight, text, font) {
     var hideText = text;
@@ -1294,6 +1449,12 @@ function hide(maxWidth, maxHeight, text, font) {
     hideText = (textSize.width > maxWidth || textSize.height > maxHeight) ? ' ' : text;
     return hideText;
 }
+/**
+ *
+ * @param {number} a - Specifies the first value of the leaf.
+ * @param {number} b - Specifies the second value of the leaf.
+ * @returns {number} - Returns whether values are equal or not.
+ */
 function orderByArea(a, b) {
     if (a['itemArea'] === b['itemArea']) {
         return 0;
@@ -1303,6 +1464,13 @@ function orderByArea(a, b) {
     }
     return -1;
 }
+/**
+ *
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @param {Element} element - Specifies the selected TreeMap leaf item.
+ * @param {string} className -Specifies the selected class name.
+ * @returns {void}
+ */
 function maintainSelection(treemap, element, className) {
     var elementId = treemap.levelSelection;
     if (elementId) {
@@ -1322,21 +1490,35 @@ function maintainSelection(treemap, element, className) {
         }
     }
 }
+/**
+ *
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @param {Element} legendGroup - Specifies the selected element.
+ * @returns {void}
+ */
 function legendMaintain(treemap, legendGroup) {
     var elementId = treemap.legendId;
     if (elementId) {
         for (var i = 0; i < elementId.length; i++) {
             for (var j = 0; j < legendGroup.childElementCount; j++) {
                 if (legendGroup.childNodes[j]['id'] === elementId[i]) {
-                    legendGroup.childNodes[j].setAttribute('fill', treemap.selectionSettings.fill);
-                    legendGroup.childNodes[j].setAttribute('stroke', treemap.selectionSettings.border.color);
-                    legendGroup.childNodes[j].setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
-                    legendGroup.childNodes[j].setAttribute('opacity', treemap.selectionSettings.opacity);
+                    var treemapSVGRectElement = legendGroup.childNodes[j];
+                    treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
+                    treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
+                    treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                    treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
                 }
             }
         }
     }
 }
+/**
+ *
+ * @param {HTMLCollection} elements - Specifies the selected TreeMap element.
+ * @param {string} type - Specifies the selection type.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {void}
+ */
 function removeClassNames(elements, type, treemap) {
     var element;
     var options = {};
@@ -1349,7 +1531,12 @@ function removeClassNames(elements, type, treemap) {
         j -= 1;
     }
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {SVGPathElement} element - Specifies the SVG path element.
+ * @param {any} options - Specifies the settings for the SVG path element.
+ * @returns {void}
+ */
 function applyOptions(element, options) {
     element.setAttribute('opacity', options['opacity']);
     if (!isNullOrUndefined(options['fill'])) {
@@ -1358,7 +1545,13 @@ function applyOptions(element, options) {
     element.setAttribute('stroke', options['border']['color']);
     element.setAttribute('stroke-width', options['border']['width']);
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {string} format - Specifies the format value.
+ * @param {any} data - Specifies the data source object.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {string} - Returns the formatted text.
+ */
 function textFormatter(format, data, treemap) {
     if (isNullOrUndefined(format)) {
         return null;
@@ -1370,8 +1563,13 @@ function textFormatter(format, data, treemap) {
     }
     return format;
 }
+/**
+ *
+ * @param {number} value - Specifies the text to be formatted.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {string | number} - Returns the formatted text.
+ */
 function formatValue(value, treemap) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var formatValue;
     var formatFunction;
     if (treemap.format && !isNaN(Number(value))) {
@@ -1403,7 +1601,7 @@ function convertToHexCode(value) {
     return '#' + componentToHex(value.r) + componentToHex(value.g) + componentToHex(value.b);
 }
 /**
- * @param {number} value - Specifes the value
+ * @param {number} value - Specifies the value
  * @returns {string} - Returns the string
  * @private */
 function componentToHex(value) {
@@ -1430,9 +1628,8 @@ function colorNameToHex(color) {
     var element = document.getElementById('treeMapMeasureText');
     element.style.color = color;
     color = window.getComputedStyle(element).color;
-    var exp = /^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$/;
-    var isRGBValue = exp.exec(color);
-    return convertToHexCode(new ColorValue(parseInt(isRGBValue[3], 10), parseInt(isRGBValue[4], 10), parseInt(isRGBValue[5], 10)));
+    var isRGBValue = color.replace(/[()RGBrgba ]/g, '').split(',');
+    return convertToHexCode(new ColorValue(parseInt(isRGBValue[0], 10), parseInt(isRGBValue[1], 10), parseInt(isRGBValue[2], 10)));
 }
 /**
  * @param {Location} location - Specifies the location
@@ -1550,7 +1747,12 @@ function renderLegendShape(location, size, shape, options, url) {
     }
     return { renderOption: options, functionName: functionName };
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {any} data - Specifies the data source object.
+ * @param {any} item - Specifies the leaf item.
+ * @returns {boolean} - Returns whether the TreeMap item is level item or leaf item.
+ */
 function isParentItem(data, item) {
     var isParentItem = false;
     for (var j = 0; j < data.length; j++) {
@@ -1565,7 +1767,6 @@ function isParentItem(data, item) {
  * Ajax support for treemap
  */
 var TreeMapAjax = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function TreeMapAjax(options, type, async, contentType, sendData) {
         this.dataOptions = options;
         this.type = type || 'GET';
@@ -1575,21 +1776,29 @@ var TreeMapAjax = /** @__PURE__ @class */ (function () {
     }
     return TreeMapAjax;
 }());
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function removeShape(collection, value) {
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @returns {void}
+ * @private
+ */
+function removeShape(collection) {
     if (collection.length > 0) {
         for (var i = 0; i < collection.length; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var item = collection[i];
             setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
         }
     }
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function removeLegend(collection, value) {
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @returns {void}
+ * @private
+ */
+function removeLegend(collection) {
     if (collection.length > 0) {
         for (var j = 0; j < collection.length; j++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var item = collection[j];
             setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
             var dataCount = item['ShapeCollection']['Elements'].length;
@@ -1599,19 +1808,40 @@ function removeLegend(collection, value) {
         }
     }
 }
+/**
+ *
+ * @param {Element} element - Specifies the selected element.
+ * @param {string} fill - Specifies the fill color.
+ * @param {string} opacity - Specifies the opacity.
+ * @param {string} borderColor - Specifies the border color.
+ * @param {string} borderWidth - Specifies the border width.
+ * @returns {void}
+ */
 function setColor(element, fill, opacity, borderColor, borderWidth) {
     element.setAttribute('fill', fill);
     element.setAttribute('opacity', opacity);
     element.setAttribute('stroke', borderColor);
     element.setAttribute('stroke-width', borderWidth);
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {any[]} collection - Specifies the selected item collection.
+ * @param {any[]} element - Specifies the selected element collection.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {void}
+ */
 function removeSelectionWithHighlight(collection, element, treemap) {
-    removeShape(collection, 'highlight');
+    removeShape(collection);
     element = [];
     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ *
+ * @param {number} length - Specifies the length of the legend group.
+ * @param {any} item - Specifies the legend item.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {number} - Returns the legend index.
+ */
 function getLegendIndex(length, item, treemap) {
     var index;
     for (var i = 0; i < length; i++) {
@@ -1625,11 +1855,18 @@ function getLegendIndex(length, item, treemap) {
     }
     return index;
 }
-function pushCollection(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-collection, index, number, legendElement, shapeElement, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-renderItems, legendCollection) {
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @param {number} index - Specifies the index of legend.
+ * @param {number} number - Specifies the leaf item index.
+ * @param {Element} legendElement - Specifies the legend element.
+ * @param {Element} shapeElement - Specifies the shape element.
+ * @param {any[]} renderItems - Specifies the item index.
+ * @param {any[]} legendCollection - Specifies the legend collection.
+ * @returns {void}
+ */
+function pushCollection(collection, index, number, legendElement, shapeElement, renderItems, legendCollection) {
     collection.push({
         legendEle: legendElement, oldFill: legendCollection[index]['legendFill'],
         oldOpacity: legendCollection[index]['opacity'], oldBorderColor: legendCollection[index]['borderColor'],
@@ -1661,6 +1898,11 @@ function triggerDownload(fileName, type, url, isDownload) {
         cancelable: true
     }));
 }
+/**
+ *
+ * @param {string} id - Specifies the id of the element to be removed.
+ * @returns {void}
+ */
 function removeElement(id) {
     var element = document.getElementById(id);
     return element ? remove(element) : null;
@@ -1670,7 +1912,6 @@ function removeElement(id) {
  * To calculate and render the shape layer
  */
 var LayoutPanel = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function LayoutPanel(treemap) {
         this.treemap = treemap;
     }
@@ -1703,7 +1944,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                     this.treemap.currentLevel = this.treemap.drilledItems[count]['data']['groupIndex'];
                 }
                 this.calculateLayoutItems(y || LevelsData.levelsData[0], totalRect);
-                this.renderLayoutItems(y || LevelsData.levelsData[0]);
+                this.renderLayoutItems();
             }
             else {
                 if (!isNullOrUndefined(this.treemap.initialDrillDown.groupIndex) &&
@@ -1712,7 +1953,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                     this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
                 }
                 this.calculateLayoutItems(data || LevelsData.levelsData[0], totalRect);
-                this.renderLayoutItems(data || LevelsData.levelsData[0]);
+                this.renderLayoutItems();
             }
         }
     };
@@ -1738,7 +1979,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         }
         return drillData;
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     LayoutPanel.prototype.calculateLayoutItems = function (data, rect) {
         this.renderItems = [];
         this.parentData = [];
@@ -1772,7 +2013,8 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                     isLeafItem = (groups.length === 0 || groupIndex === groups.length);
                     gap = isLeafItem ? leafItem.gap : groups[groupIndex].groupGap;
                     headerHeight = groups.length === 0 ? 0 : groups[groupIndex] ? groups[groupIndex].showHeader ?
-                        groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ? groups[groupIndex - 1].headerHeight : 0;
+                        groups[groupIndex].headerHeight : 0 : groups[groupIndex - 1].showHeader ?
+                        groups[groupIndex - 1].headerHeight : 0;
                     rect = children[i]['rect'];
                     rect = new Rect(rect.x + (gap / 2), rect.y + (headerHeight + (gap / 2)), rect.width - gap, Math.abs(rect.height - (gap + headerHeight)));
                     this.computeSliceAndDiceDimensional(children[i], rect);
@@ -1844,8 +2086,9 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                     rect = item['rect'];
                     padding = (item['isLeafItem'] ? leaf.padding : levels[index].groupPadding) / 2;
                     headerHeight = this.treemap.isHierarchicalData ? index === 0 && item['isLeafItem'] ? 0 : levels[index] ?
-                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0 : (levels.length === 0) ? 0 : levels[index] ?
-                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0;
+                        levels[index].showHeader ? levels[index].headerHeight : 0 : 0 :
+                        (levels.length === 0) ? 0 : levels[index] ?
+                            levels[index].showHeader ? levels[index].headerHeight : 0 : 0;
                     rect = new Rect(rect.x + padding, rect.y + (headerHeight + padding), rect.width - padding, rect.height - padding);
                     if (!item['isLeafItem'] && item['weight'] > 0) {
                         this.computeSquarifyDimensional(child[i], rect);
@@ -2026,11 +2269,11 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         var result = [];
         for (var i = 0; i < dataLength; i += 1) {
             var dataLength_1 = data.length;
-            var dataSum_1 = 0;
+            var dataSum = 0;
             for (var i_1 = 0; i_1 < dataLength_1; i_1 += 1) {
-                dataSum_1 += data[i_1]['weight'];
+                dataSum += data[i_1]['weight'];
             }
-            var multiplier = area / dataSum_1;
+            var multiplier = area / dataSum;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var datum = void 0;
             for (var j = 0; j < dataLength_1; j++) {
@@ -2041,7 +2284,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         }
         return result;
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     LayoutPanel.prototype.onDemandProcess = function (childItems) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var parentItem = {};
@@ -2071,14 +2314,13 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             }
         }
         this.calculateLayoutItems(parentItemGroupname, totalRect);
-        this.renderLayoutItems(parentItemGroupname);
+        this.renderLayoutItems();
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LayoutPanel.prototype.renderLayoutItems = function (renderData) {
+    /** @private */
+    LayoutPanel.prototype.renderLayoutItems = function () {
         var _this = this;
         var position;
         var treeMap = this.treemap;
-        var colorMapping;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var txtVisible;
         var getItemColor;
@@ -2110,13 +2352,13 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         var border;
         var templateGroup = createElement('div', {
             id: treeMap.element.id + '_Label_Template_Group',
-            className: 'template',
-            styles: 'overflow: hidden; position: absolute;pointer-events: none;' +
-                'top:' + treeMap.areaRect.y + 'px;' +
-                'left:' + treeMap.areaRect.x + 'px;' +
-                'height:' + treeMap.areaRect.height + 'px;' +
-                'width:' + treeMap.areaRect.width + 'px;'
+            className: 'template'
         });
+        templateGroup.style.cssText = 'overflow: hidden; position: absolute;pointer-events: none;' +
+            'top:' + treeMap.areaRect.y + 'px;' +
+            'left:' + treeMap.areaRect.x + 'px;' +
+            'height:' + treeMap.areaRect.height + 'px;' +
+            'width:' + treeMap.areaRect.width + 'px;';
         var isLeafItem = false;
         var leaf = treeMap.leafItemSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2150,7 +2392,6 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                 rect.x = (treemapItemRect.x + treemapItemRect.width) - rect.width - Math.abs(treemapItemRect.x - rect.x);
                 rect.y = (treemapItemRect.y + treemapItemRect.height) - rect.height - Math.abs(treemapItemRect.y - rect.y);
             }
-            colorMapping = isLeafItem ? leaf.colorMapping : levels[index].colorMapping;
             getItemColor = this_1.getItemColor(isLeafItem, item);
             fill = getItemColor['fill'];
             opacity = getItemColor['opacity'];
@@ -2230,8 +2471,6 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         this.treemap.svgObject.appendChild(this.layoutGroup);
     };
     LayoutPanel.prototype.renderItemText = function (text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
-        var secondaryEle = document.getElementById(this.treemap.element.id + '_Secondary_Element');
-        var leaf = this.treemap.leafItemSettings;
         var padding = 5;
         var textSize;
         var textCollection = [];
@@ -2309,7 +2548,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             treemap.levels[item['groupIndex']].colorMapping;
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath], item['data'][this.treemap.weightValuePath]);
+            var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]);
             itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
             itemOpacity = option['opacity'];
         }
@@ -2346,8 +2585,8 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var keys = Object.keys(item['data']);
             for (var i = 0; i < keys.length; i++) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                template = template.replace(new RegExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
+                var regExp = RegExp;
+                template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
         var labelElement;
@@ -2625,12 +2864,13 @@ var Print = /** @__PURE__ @class */ (function () {
      *
      * @param {TreeMap} control - Specifies the treemap instance.
      */
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function Print(control) {
     }
     /**
      * This method is used to perform the print functionality in treemap.
      *
+     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @param { string[] | string | Element} elements - Specifies the element.
      * @returns {void}
      * @private
@@ -2651,6 +2891,7 @@ var Print = /** @__PURE__ @class */ (function () {
     /**
      * To get the html string of the Maps
      *
+     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @param {string[] | string | Element} elements - Specifies the element
      * @returns {Element} - Returns the element
      * @private
@@ -2690,6 +2931,7 @@ var Print = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     Print.prototype.destroy = function () { };
     return Print;
 }());
@@ -2705,12 +2947,13 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      *
      * @param {TreeMap} control - Specifies the treemap instance
      */
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function ImageExport(control) {
     }
     /**
      * This method is used to perform the export functionality for the rendered treemap.
      *
+     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @param {ExportType} type - Specifies the type of the image file.
      * @param {string} fileName - Specifies the file name of the image file.
      * @param {boolean} allowDownload - Specifies whether to download the file or not.
@@ -2718,7 +2961,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @private
      */
     ImageExport.prototype.export = function (treeMap, type, fileName, allowDownload) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
         var promise = new Promise(function (resolve, reject) {
             var element = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -2774,6 +3017,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     ImageExport.prototype.destroy = function () { };
     return ImageExport;
 }());
@@ -2789,12 +3033,13 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      *
      * @param {TreeMap} control - Specifies the treemap instance
      */
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     function PdfExport(control) {
     }
     /**
      * This method is used to perform the export functionality for the rendered treemap.
      *
+     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @param {ExportType} type - Specifies the type of the document.
      * @param {string} fileName - Specifies the name of the document.
      * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
@@ -2803,7 +3048,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @private
      */
     PdfExport.prototype.export = function (treeMap, type, fileName, orientation, allowDownload) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
         var promise = new Promise(function (resolve, reject) {
             var element = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -2812,7 +3057,6 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                     'height': treeMap.availableSize.height.toString()
                 }
             });
-            var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
             var exportElement = treeMap.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
@@ -2856,14 +3100,11 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     PdfExport.prototype.destroy = function () { };
     return PdfExport;
 }());
 
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable @typescript-eslint/dot-notation */
-/* eslint-disable brace-style */
-/* eslint-disable max-len */
 /**
  * Tree Map Components
  */
@@ -2898,10 +3139,12 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  */
 var TreeMap = /** @__PURE__ @class */ (function (_super) {
     __extends(TreeMap, _super);
-    /**s
+    /**
      * Constructor for TreeMap component.
+     *
+     * @param {TreeMapModel} options - Specifies the treemap instance.
+     * @param {string | HTMLElement} element - Specifies the treemap element.
      */
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMap(options, element) {
         var _this = _super.call(this, options, element) || this;
         /**
@@ -3035,9 +3278,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         }
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             var secondaryElement = createElement('div', {
-                id: this.element.id + '_Secondary_Element',
-                styles: 'position: absolute;z-index:1;'
+                id: this.element.id + '_Secondary_Element'
             });
+            secondaryElement.style.cssText = 'position: absolute;z-index:1;';
             this.element.appendChild(secondaryElement);
         }
     };
@@ -3049,9 +3292,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * @private
      * Render the treemap border
      *
+     * @private
      * @returns {void}
      */
     TreeMap.prototype.renderBorder = function () {
@@ -3130,11 +3373,12 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                     var child = findChildren(this.dataSource[i])['values'];
                     if (this.isHierarchicalData && child && child.length > 0) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        child.forEach(function (currentData, dataIndex) {
+                        child.forEach(function (currentData) {
                             if (currentData[path]) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 data_1[path].push({
-                                    groupIndex: 0, name: currentData[path], levelOrderName: currentData[path].toString(),
+                                    groupIndex: 0, name: currentData[path],
+                                    levelOrderName: currentData[path].toString(),
                                     data: currentData, weight: currentData[_this.weightValuePath]
                                 });
                             }
@@ -3195,11 +3439,10 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var childData;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var newData = {};
         var levelIndex;
         var path = this.leafItemSettings.labelPath ? this.leafItemSettings.labelPath : this.weightValuePath;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var level;
         var key;
         newData = findChildren(data);
         childData = newData ? newData['values'] : null;
@@ -3207,7 +3450,6 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             key = newData['key'];
             for (var i = 0; i < this.levels.length; i++) {
                 if (key === this.levels[i].groupPath) {
-                    level = this.levels[i];
                     levelIndex = i;
                 }
             }
@@ -3258,7 +3500,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to perform the print functionality in treemap.
      *
-     * @param id - Specifies the element to print the treemap.
+     * @param {string[] | string | Element} id - Specifies the element to print the treemap.
+     * @returns {void}
      */
     TreeMap.prototype.print = function (id) {
         if (this.allowPrint && this.printModule) {
@@ -3268,9 +3511,11 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method is used to perform the export functionality for the rendered treemap.
      *
-     * @param type - Specifies the index of the axis.
-     * @param fileName - Specifies file name for exporting the rendered treemap.
-     * @param orientation - Specifies the orientation of the pdf document.
+     * @param {ExportType} type - Specifies the extension type of the exported document.
+     * @param {string} fileName - Specifies file name for exporting the rendered TreeMap.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document.
+     * @param {boolean} allowDownload - Specifies whether the exported file should be downloaded or not.
+     * @returns {string} - Specifies the base64 string of the exported image which is returned when the allowDownload is set to false.
      */
     TreeMap.prototype.export = function (type, fileName, orientation, allowDownload) {
         var _this = this;
@@ -3278,13 +3523,13 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             allowDownload = true;
         }
         if (type === 'PDF' && this.allowPdfExport && this.pdfExportModule) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
             return new Promise(function (resolve, reject) {
                 resolve(_this.pdfExportModule.export(_this, type, fileName, orientation, allowDownload));
             });
         }
         else if (this.allowImageExport && (type !== 'PDF') && this.imageExportModule) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
             return new Promise(function (resolve, reject) {
                 resolve(_this.imageExportModule.export(_this, type, fileName, allowDownload));
             });
@@ -3311,8 +3556,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                     var name_1 = this.dataSource[j][groupPath];
                     if (i !== 0) {
                         for (var k = 0; k <= i; k++) {
-                            var childGroupPath_1 = this.levels[k] ? this.levels[k].groupPath : groupPath;
-                            childName += (this.dataSource[j][childGroupPath_1]) + ((k === i) ? '' : '#');
+                            var childGroupPath = this.levels[k] ? this.levels[k].groupPath : groupPath;
+                            childName += (this.dataSource[j][childGroupPath]) + ((k === i) ? '' : '#');
                         }
                     }
                     if (!(orderNames.length > 0 ? orderNames.indexOf(childName ?
@@ -3324,7 +3569,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                         currentData['groupName'] = groupPath;
                         currentData['data'] = this.dataSource[j];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        LevelsData.levelsData[LevelsData.levelsData.length - 1][groupPath].push(currentData);
+                        LevelsData.levelsData[(LevelsData.levelsData.length - 1)][groupPath].push(currentData);
                         orderNames.push((childName) ? childName : name_1);
                     }
                 }
@@ -3334,7 +3579,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method orders the treemap level data.
      *
-     * @param start - Specifies the start value of the treemap level.
+     * @param {number} start - Specifies the start value of the treemap level.
+     * @returns {void}
      */
     TreeMap.prototype.reOrderLevelData = function (start) {
         var currentName;
@@ -3347,7 +3593,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < currentData.length; i++) {
             currentName = currentData[i]['levelOrderName'];
             for (var j = 0; j < previousData.length; j++) {
-                previousData[j][currentPath] = isNullOrUndefined(previousData[j][currentPath]) ? [] : previousData[j][currentPath];
+                previousData[j][currentPath] = isNullOrUndefined(previousData[j][currentPath]) ?
+                    [] : previousData[j][currentPath];
                 if (this.IsChildHierarchy(currentName.split('#'), previousData[j]['levelOrderName'].split('#'))) {
                     if (isNullOrUndefined(currentData[i]['parent'])) {
                         currentData[i]['parent'] = previousData[j];
@@ -3379,13 +3626,13 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method finds the weight value of the treemap level.
      *
-     * @param processData - Specifies the treemap data.
-     * @param type - Specifies the type of the data.
+     * @param {any[]} processData - Specifies the treemap data.
+     * @param {string} type - Specifies the type of the data.
+     * @returns {void}
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TreeMap.prototype.findTotalWeight = function (processData, type) {
         var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var totalWeight;
         var split;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3463,8 +3710,10 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the window resize event on treemap.
      *
-     * @param e - Specifies the pointer event.
+     * @param {Event} e - Specifies the pointer event.
+     * @returns {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     TreeMap.prototype.resizeOnTreeMap = function (e) {
         var _this = this;
         if (!this.isDestroyed) {
@@ -3486,6 +3735,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                     _this.refreshing = true;
                     _this.wireEVents();
                     args_1.currentSize = _this.availableSize;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     _this.trigger(resize, args_1, function (observedArgs) {
                         _this.render();
                     });
@@ -3496,7 +3746,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the click event on the treemap.
      *
-     * @param e - Specifies the mouse click event in the treemap.
+     * @param {PointerEvent} e - Specifies the mouse click event in the treemap.
+     * @returns {void}
      */
     TreeMap.prototype.clickOnTreeMap = function (e) {
         var _this = this;
@@ -3539,7 +3790,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the double click event in the treemap.
      *
-     * @param e - Specifies the pointer event of mouse click.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse click.
+     * @returns {void}
      */
     TreeMap.prototype.doubleClickOnTreeMap = function (e) {
         var doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
@@ -3549,7 +3801,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the right click event in the treemap.
      *
-     * @param e - Specifies the pointer event of mouse click.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse click.
+     * @returns {void}
      */
     TreeMap.prototype.rightClickOnTreeMap = function (e) {
         var rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
@@ -3558,7 +3811,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the mouse down event in the treemap.
      *
-     * @param e - Specifies the pointer event of mouse click.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse click.
+     * @returns {void}
      */
     TreeMap.prototype.mouseDownOnTreeMap = function (e) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
@@ -3569,7 +3823,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles the mouse move event in the treemap.
      *
-     * @param e - Specifies the pointer event of mouse click.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse click.
+     * @returns {void}
      */
     TreeMap.prototype.mouseMoveOnTreeMap = function (e) {
         var targetEle = e.target;
@@ -3595,10 +3850,11 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method calculates the selected treemap levels.
      *
-     * @param labelText - Specifies the label text.
-     * @param item - Specifies the treemap item.
+     * @param {string} labelText - Specifies the label text.
+     * @param {any} item - Specifies the treemap item.
+     * @returns {any} - Returns label of the drilled level.
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     TreeMap.prototype.calculateSelectedTextLevels = function (labelText, item) {
         //to find the levels by clicking the particular text both for drillDownView as true / false.
         var drillLevel;
@@ -3618,13 +3874,14 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method calculates the previous level of child items in treemap.
      *
-     * @param labelText - Specifies the label text in treemap
-     * @param drillLevelValues - Specifies the values of drill level.
-     * @param item - Specifies the treemap item.
-     * @param directLevel - Specifies the current level.
+     * @param {any} drillLevelValues - Specifies the values of drill level.
+     * @param {any} item - Specifies the treemap item.
+     * @param {boolean} directLevel - Specifies the current level.
+     * @returns {boolean} - check whether it is previous level or not.
+     * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TreeMap.prototype.calculatePreviousLevelChildItems = function (labelText, drillLevelValues, item, directLevel) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    TreeMap.prototype.calculatePreviousLevelChildItems = function (drillLevelValues, item, directLevel) {
         //By clicking any child items drilldown to the particular level.
         //At the time store all the previous drilled level items in drilledItems
         // This condition satisfies while drilldown View is set as false and the text contains '[+]'
@@ -3659,11 +3916,12 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method compares the selected labels with the drill down items.
      *
-     * @param drillLevelValues - Specifies the values of drill level.
-     * @param item - Specifies the treemap item.
-     * @param i - Specifies the treemap item.
+     * @param {any} drillLevelValues - Specifies the values of drill level.
+     * @param {any} item - Specifies the treemap item.
+     * @param {number} i - Specifies the treemap item.
+     * @returns {any} - return the new drill down object.
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     TreeMap.prototype.compareSelectedLabelWithDrillDownItems = function (drillLevelValues, item, i) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var drillLevelChild;
@@ -3686,7 +3944,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles mouse end event in treemap.
      *
-     * @param e - Specifies the pointer event of mouse.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse.
+     * @returns {void}
      */
     TreeMap.prototype.mouseEndOnTreeMap = function (e) {
         var _this = this;
@@ -3717,7 +3976,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                 drillLevelValues = this.calculateSelectedTextLevels(labelText, item);
                 drillLevel = drillLevelValues['drillLevel'];
                 if (!this.drillDownView && labelText.search('[+]') !== -1) {
-                    directLevel = this.calculatePreviousLevelChildItems(labelText, drillLevelValues, item, directLevel);
+                    directLevel = this.calculatePreviousLevelChildItems(drillLevelValues, item, directLevel);
                 }
             }
             if (this.levels.length !== 0 && !item['isLeafItem'] && findChildren(item)['values'] &&
@@ -3809,7 +4068,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                         }
                         else {
                             _this.layout.calculateLayoutItems(newDrillItem, totalRect);
-                            _this.layout.renderLayoutItems(newDrillItem);
+                            _this.layout.renderLayoutItems();
                         }
                     }
                 });
@@ -3828,8 +4087,10 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     /**
      * This method handles mouse leave event in treemap.
      *
-     * @param e - Specifies the pointer event of mouse.
+     * @param {PointerEvent} e - Specifies the pointer event of mouse.
+     * @return {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     TreeMap.prototype.mouseLeaveOnTreeMap = function (e) {
         if (this.treeMapTooltipModule) {
             this.treeMapTooltipModule.removeTooltip();
@@ -3839,12 +4100,16 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         }
         removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
         if (this.treeMapHighlightModule) {
-            removeShape(this.treeMapHighlightModule.shapeHighlightCollection, 'highlight');
+            removeShape(this.treeMapHighlightModule.shapeHighlightCollection);
             this.treeMapHighlightModule.highLightId = '';
         }
     };
     /**
      * This method is used to select or remove the selection of treemap item based on the provided selection settings.
+     *
+     * @param {string[]} levelOrder - Specifies the order of the level.
+     * @param {boolean} isSelected - check whether it is selected or not.
+     * @return {void}
      */
     TreeMap.prototype.selectItem = function (levelOrder, isSelected) {
         if (isNullOrUndefined(isSelected)) {
@@ -3923,6 +4188,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     TreeMap.prototype.onPropertyChanged = function (newProp, oldProp) {
         if (!this.isDestroyed) {
             var render = false;
@@ -3953,6 +4219,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * Gets component name.
+     *
+     * @returns {string} - return the treemap instance.
      */
     TreeMap.prototype.getModuleName = function () {
         return 'treemap';
@@ -4159,14 +4427,10 @@ var LevelsData = /** @__PURE__ @class */ (function () {
     return LevelsData;
 }());
 
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/dot-notation */
-/* eslint-disable max-len */
 /**
  * Legend module class
  */
 var TreeMapLegend = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapLegend(treemap) {
         this.page = 0;
         this.legendBorderRect = new Rect(0, 0, 0, 0);
@@ -4194,15 +4458,12 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         this.heightIncrement = 0;
         this.defsElement = this.treemap.renderer.createDefs();
         this.treemap.svgObject.appendChild(this.defsElement);
-        var eventArgs;
-        eventArgs = {
+        var eventArgs = {
             cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
             position: this.treemap.legendSettings.position
         };
         this.treemap.trigger(legendRendering, eventArgs, function (observedArgs) {
-            // eslint-disable-next-line no-underscore-dangle
             if (!observedArgs.cancel && observedArgs._changePosition !== _this.treemap.legendSettings.position) {
-                // eslint-disable-next-line no-underscore-dangle
                 _this.treemap.legendSettings.position = observedArgs._changePosition;
             }
             _this.calculateLegendBounds();
@@ -4218,9 +4479,18 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         this.findColorMappingLegendItems(LevelsData.levelsData[0]);
         if ((this.treemap.palette.length > 0 || !isNullOrUndefined(this.treemap.colorValuePath))
             && this.legendCollections.length === 0) {
-            this.findPaletteLegendItems(LevelsData.levelsData[0], 'Parent');
+            this.findPaletteLegendItems(LevelsData.levelsData[0]);
         }
         if (this.legendCollections.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.levelIndex > nextItem.levelIndex) ? 1 :
+                (firstItem.levelIndex < nextItem.levelIndex) ? -1 : 0; });
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.groupIndex > nextItem.groupIndex) ? 1 :
+                (firstItem.groupIndex < nextItem.groupIndex) ? -1 : 0; });
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort(function (firstItem, nextItem) { return (firstItem.leafIndex > nextItem.leafIndex) ? 1 :
+                (firstItem.leafIndex < nextItem.leafIndex) ? -1 : 0; });
             var defaultSize = 25;
             var textPadding = 10;
             var position = legend.position;
@@ -4252,7 +4522,6 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             var startY_1 = 0;
             var shapePadding = legend.shapePadding;
             var itemTextStyle = legend.textStyle;
-            var legendLength = this.legendCollections.length;
             itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
             itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
             if (legendMode === 'Default') {
@@ -4362,11 +4631,11 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 };
             }
             else {
-                var legendLength_1 = this.legendCollections.length;
-                var rectWidth_1 = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength_1) :
-                    (legendWidth / legendLength_1) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
-                var rectHeight_1 = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
-                    (isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength_1) : (legendHeight / legendLength_1);
+                var legendLength = this.legendCollections.length;
+                var rectWidth = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength) :
+                    (legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
+                var rectHeight = (orientation_1 === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
+                    (isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength) : (legendHeight / legendLength);
                 startX_1 = 0;
                 startY_1 = legendTitleSize.height + spacing;
                 var textPadding_1 = 10;
@@ -4377,15 +4646,15 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 var maxTextHeight = 0;
                 var maxTextWidth = 0;
                 for (var i = 0; i < this.legendCollections.length; i++) {
-                    startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 + rectWidth_1) : startX_1;
-                    startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 + rectHeight_1);
+                    startX_1 = (orientation_1 === 'Horizontal') ? (startX_1 + rectWidth) : startX_1;
+                    startY_1 = (orientation_1 === 'Horizontal') ? startY_1 : (startY_1 + rectHeight);
                     var legendText = this.legendCollections[i]['legendName'];
                     var itemTextSize = new Size(0, 0);
                     if (labelAction === 'None') {
                         itemTextSize = measureText(legendText, itemTextStyle);
                     }
                     else if (labelAction === 'Trim') {
-                        legendText = textTrim((orientation_1 === 'Horizontal' ? rectWidth_1 : rectHeight_1), legendText, itemTextStyle);
+                        legendText = textTrim((orientation_1 === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
                         itemTextSize = measureText(legendText, itemTextStyle);
                     }
                     else {
@@ -4395,14 +4664,14 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
                     if (itemTextSize.width > 0 && itemTextSize.height > 0) {
                         if (orientation_1 === 'Horizontal') {
-                            textX = startX_1 + (rectWidth_1 / 2);
-                            textY = (placement === 'After') ? (startY_1 + rectHeight_1 + (itemTextSize.height / 2)) + textPadding_1 :
+                            textX = startX_1 + (rectWidth / 2);
+                            textY = (placement === 'After') ? (startY_1 + rectHeight + (itemTextSize.height / 2)) + textPadding_1 :
                                 (startY_1 - textPadding_1);
                         }
                         else {
                             textX = (placement === 'After') ? startX_1 - (itemTextSize.width / 2) - textPadding_1
-                                : (startX_1 + rectWidth_1 + itemTextSize.width / 2) + textPadding_1;
-                            textY = startY_1 + (rectHeight_1 / 2) + (itemTextSize.height / 4);
+                                : (startX_1 + rectWidth + itemTextSize.width / 2) + textPadding_1;
+                            textY = startY_1 + (rectHeight / 2) + (itemTextSize.height / 4);
                         }
                     }
                     if (i === 0) {
@@ -4411,15 +4680,15 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                         itemStartY = (orientation_1 === 'Horizontal') ? (placement === 'After') ? startY_1 :
                             textY - (itemTextSize.height / 2) : startY_1;
                     }
-                    if (i === legendLength_1 - 1) {
-                        legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 + rectWidth_1) - itemStartX) :
-                            (rectWidth_1 + maxTextWidth + textPadding_1);
-                        legendHeight = (orientation_1 === 'Horizontal') ? (rectHeight_1 + (maxTextHeight / 2) + textPadding_1) :
-                            Math.abs((startY_1 + rectHeight_1) - itemStartY);
+                    if (i === legendLength - 1) {
+                        legendWidth = (orientation_1 === 'Horizontal') ? Math.abs((startX_1 + rectWidth) - itemStartX) :
+                            (rectWidth + maxTextWidth + textPadding_1);
+                        legendHeight = (orientation_1 === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
+                            Math.abs((startY_1 + rectHeight) - itemStartY);
                     }
                     this.legendRenderingCollections.push({
                         fill: this.legendCollections[i]['legendFill'], x: startX_1, y: startY_1,
-                        width: rectWidth_1, height: rectHeight_1, element: this.legendCollections[i]['gradientElement'],
+                        width: rectWidth, height: rectHeight, element: this.legendCollections[i]['gradientElement'],
                         text: legendText, textX: textX, textY: textY,
                         textWidth: itemTextSize.width, textHeight: itemTextSize.height,
                         data: this.legendCollections[i]['legendData']
@@ -4449,7 +4718,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TreeMapLegend.prototype.findPaletteLegendItems = function (data, type) {
+    TreeMapLegend.prototype.findPaletteLegendItems = function (data) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var child;
         var legendFillColor;
@@ -4556,8 +4825,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             groupIndex = data[i]['groupIndex'];
             isLeafItem = (this.treemap.levels.length === 0 || groupIndex === this.treemap.levels.length);
             colorMapping = isLeafItem ? leaf.colorMapping : levels[groupIndex].colorMapping;
-            for (var _i = 0, colorMapping_1 = colorMapping; _i < colorMapping_1.length; _i++) {
-                var colorMap$$1 = colorMapping_1[_i];
+            for (var j = 0; j < colorMapping.length; j++) {
+                var colorMap$$1 = colorMapping[j];
                 gradientElement = null;
                 rangeValue = Number(currentData[this.treemap.rangeColorValuePath]);
                 equalValue = currentData[this.treemap.equalColorValuePath];
@@ -4618,8 +4887,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     fill = ((Object.prototype.toString.call(colorMap$$1.color) === '[object Array]')) && isNullOrUndefined(gradientElement)
                         && isNullOrUndefined(colorMap$$1.value) ? this.legendGradientColor(colorMap$$1, legendIndex) : fill;
                     this.legendCollections.push({
-                        actualValue: actualValue,
-                        legendName: legendText, legendFill: fill, legendData: [],
+                        actualValue: actualValue, levelIndex: !isLeafItem ? j : -1, leafIndex: isLeafItem ? j : -1,
+                        legendName: legendText, legendFill: fill, legendData: [], groupIndex: !isLeafItem ? groupIndex : -1,
                         gradientElement: !isNullOrUndefined(gradientElement) ? gradientElement : isNullOrUndefined(colorMap$$1.value)
                             ? this.legendLinearGradient : null, name: data[i]['name'],
                         opacity: this.treemap.legendSettings.opacity, borderColor: this.treemap.legendSettings.border.color,
@@ -4901,9 +5170,11 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
         }
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To rendered the interactive pointer
+     *
+     * @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
+     * @returns {void}
      */
     TreeMapLegend.prototype.renderInteractivePointer = function (e) {
         var treemap = this.treemap;
@@ -4930,7 +5201,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 currentData = this.legendCollections[i];
                 legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
                 legendRect = legendElement.getBoundingClientRect();
-                var rect_1 = new Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
+                var rect = new Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
                 fill = legendElement.getAttribute('fill');
                 stroke = legend.shapeBorder.color;
                 strokeWidth = legend.shapeBorder.width;
@@ -4939,7 +5210,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     data = currentData['legendData'];
                     for (var j = 0; j < data.length; j++) {
                         if (data[j]['levelOrderName'] === targetItem['levelOrderName']) {
-                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect_1);
+                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
                             break;
                         }
                     }
@@ -5060,18 +5331,22 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             legendElementId.parentNode.removeChild(legendElementId);
         }
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To change the next page
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     TreeMapLegend.prototype.changeNextPage = function (e) {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
         this.drawLegend();
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Wire events for event handler
+     *
+     * @param {Element} element - Specifies the element.
+     * @returns {void}
      */
     TreeMapLegend.prototype.wireEvents = function (element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -5098,9 +5373,10 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         this.treemap.off(Browser.touchMoveEvent, this.renderInteractivePointer);
         this.treemap.off(Browser.touchEndEvent, this.mouseUpHandler);
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Get module name.
+     *
+     * @returns {string} Returns the legend module name.
      */
     TreeMapLegend.prototype.getModuleName = function () {
         return 'treeMapLegend';
@@ -5128,9 +5404,12 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         //TODO: The removeInteractivePointer method (calling method) is called in a timer in the mouseUpHandler method. Because of this handling, adding the below code results in a spec failure.
         //this.treemap = null;
     };
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Get the gradient color for interactive legend.
+     *
+     * @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
+     * @param {number} legendIndex - Specifies the index of legend.
+     * @returns {string} - Returns the legend color.
      */
     TreeMapLegend.prototype.legendGradientColor = function (colorMap$$1, legendIndex) {
         var legendFillColor;
@@ -5170,7 +5449,6 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
  * Performing treemap highlight
  */
 var TreeMapHighlight = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapHighlight(treeMap) {
         this.target = 'highlight';
         this.shapeTarget = 'highlight';
@@ -5183,10 +5461,11 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
         this.treemap = treeMap;
         this.addEventListener();
     }
-    /* eslint-disable max-len */
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Mouse down event in highlight
+     *
+     * @param {PointerEvent} e - Specifies the pointer argument.
+     * @returns {boolean} - return the highlight process is true or false.
      */
     TreeMapHighlight.prototype.mouseMove = function (e) {
         var treemap = this.treemap;
@@ -5219,7 +5498,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     if (this.shapeElement !== null && (selectionModule ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true)) {
                         if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true) {
                             this.currentElement.push({ currentElement: this.shapeElement });
-                            removeShape(this.shapeHighlightCollection, 'highlight');
+                            removeShape(this.shapeHighlightCollection);
                             this.shapeHighlightCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
                                 oldOpacity: collection[index]['opacity'], oldBorderColor: collection[index]['borderColor'],
                                 oldBorderWidth: collection[index]['borderWidth']
@@ -5239,7 +5518,8 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                 }
                 orders = findHightLightItems(item, [], highlight.mode, treemap);
                 if (this.treemap.legendSettings.visible ? selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true : true) {
-                    if (this.treemap.legendSettings.visible ? selectionModule ? this.shapeElement !== selectionModule.shapeElement : true : true) {
+                    if (this.treemap.legendSettings.visible ? selectionModule ?
+                        this.shapeElement !== selectionModule.shapeElement : true : true) {
                         for (var i = 0; i < treeMapElement.childElementCount; i++) {
                             element = treeMapElement.childNodes[i];
                             process = true;
@@ -5272,13 +5552,14 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
             }
         }
         else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1) {
-            if (this.treemap.legendSettings.visible && (selectionModule ? selectionModule.legendSelectId !== targetId : true) && (selectionModule ? selectionModule.shapeSelectId !== targetId : true)) {
+            if (this.treemap.legendSettings.visible && (selectionModule ? selectionModule.legendSelectId !== targetId : true)
+                && (selectionModule ? selectionModule.shapeSelectId !== targetId : true)) {
                 var itemIndex = void 0;
                 var groupIndex = void 0;
                 var length_2;
                 var targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
-                    removeLegend(this.legendHighlightCollection, 'highlight');
+                    removeLegend(this.legendHighlightCollection);
                 }
                 this.shapeTarget = 'highlight';
                 var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
@@ -5315,14 +5596,15 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
             }
             if ((this.shapeTarget === 'highlight' || this.target === 'highlight') && this.treemap.legendSettings.visible) {
                 if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
-                    if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ? selectionModule.legendSelect : true) {
-                        removeShape(this.shapeHighlightCollection, 'highlight');
+                    if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ?
+                        selectionModule.legendSelect : true) {
+                        removeShape(this.shapeHighlightCollection);
                         this.shapeHighlightCollection = [];
                     }
                 }
             }
             if (this.shapeTarget === 'highlight' && this.treemap.legendSettings.visible) {
-                removeLegend(this.legendHighlightCollection, 'highlight');
+                removeLegend(this.legendHighlightCollection);
             }
             this.highLightId = '';
             processHighlight = false;
@@ -5379,7 +5661,6 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
  * Performing treemap selection
  */
 var TreeMapSelection = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapSelection(treeMap) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.shapeSelectionCollection = [];
@@ -5390,14 +5671,15 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
         this.treemap = treeMap;
         this.addEventListener();
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * Mouse down event in selection
+     *
+     * @param {PointerEvent} e - Specifies the pointer argument.
+     * @returns {void}
      */
     TreeMapSelection.prototype.mouseDown = function (e) {
         var targetEle = e.target;
         var eventArgs;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var treemap = this.treemap;
         treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5425,7 +5707,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var collection = this.treemap.treeMapLegendModule.legendCollections;
                     this.shapeElement = undefined;
-                    removeShape(this.shapeSelectionCollection, 'selection');
+                    removeShape(this.shapeSelectionCollection);
                     if (highlightModule) {
                         highlightModule.shapeTarget = 'selection';
                         highlightModule.shapeHighlightCollection = [];
@@ -5479,7 +5761,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                removeShape(this.shapeSelectionCollection, 'selection');
+                removeShape(this.shapeSelectionCollection);
                 this.shapeSelectionCollection = [];
                 this.shapeElement = undefined;
                 this.shapeSelect = true;
@@ -5500,7 +5782,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 this.legendSelect = false;
                 var legendIndex = parseInt(targetId[targetId.length - 1], 10);
                 var targetEle_1 = document.getElementById(targetId);
-                removeLegend(this.legendSelectionCollection, 'selection');
+                removeLegend(this.legendSelectionCollection);
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'selection';
                 }
@@ -5526,7 +5808,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                removeLegend(this.legendSelectionCollection, 'Selection');
+                removeLegend(this.legendSelectionCollection);
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'highlight';
                 }
@@ -5577,7 +5859,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var collection = this.treemap.treeMapLegendModule.legendCollections;
                     this.shapeElement = undefined;
-                    removeShape(this.shapeSelectionCollection, 'selection');
+                    removeShape(this.shapeSelectionCollection);
                     index = getLegendIndex(length_5, items[m], this.treemap);
                     this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
                     if (this.shapeElement !== null) {
@@ -5617,7 +5899,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
             }
         }
         else {
-            removeShape(this.shapeSelectionCollection, 'selection');
+            removeShape(this.shapeSelectionCollection);
             this.shapeElement = undefined;
             this.treemap.levelSelection = [];
             this.shapeSelect = true;
@@ -5660,7 +5942,6 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
     /**
      * To destroy the selection.
      *
-     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @returns {void}
      * @private
      */
@@ -5687,7 +5968,6 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
  * Render Tooltip
  */
 var TreeMapTooltip = /** @__PURE__ @class */ (function () {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapTooltip(treeMap) {
         this.treemap = treeMap;
         this.tooltipSettings = this.treemap.tooltipSettings;
@@ -5721,14 +6001,12 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
         var tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var location;
-        var toolTipHeader;
         var toolTipData = {};
         var tooltipContent = [];
         var markerFill;
         if (targetId.indexOf('_Item_Index') > -1) {
             item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             if (!isNullOrUndefined(item)) {
-                toolTipHeader = item['name'];
                 value = item['weight'];
                 toolTipData = item['data'];
                 if (!isNullOrUndefined(item['options'])) {
@@ -5748,9 +6026,9 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
                 else {
                     tooltipEle = createElement('div', {
                         id: this.treemap.element.id + '_TreeMapTooltip',
-                        className: 'EJ2-TreeMap-Tooltip',
-                        styles: 'position: absolute;pointer-events:none;'
+                        className: 'EJ2-TreeMap-Tooltip'
                     });
+                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
                     document.getElementById(this.treemap.element.id + '_Secondary_Element').appendChild(tooltipEle);
                 }
                 location = getMousePosition(pageX, pageY, this.treemap.svgObject);
@@ -5769,6 +6047,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
                     treemap: this.treemap,
                     element: target, eventArgs: e
                 };
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
                     _this.addTooltip(tootipArgs, markerFill, tooltipEle);
                 });