@syncfusion/ej2-treemap 20.3.56 → 20.4.38

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

@@ -523,6 +523,12 @@ class Size {
         this.height = height;
     }
 }
+/**
+ *
+ * @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);
@@ -577,7 +583,6 @@ class PathOption {
  *
  * @param  {string} text - Specifies the text.
  * @param  {FontModel} font - Specifies the font.
- * @param  {string} id - Specifies the id.
  * @returns {Size} - Returns the size.
  * @private
  */
@@ -658,6 +663,12 @@ class Location {
 }
 /**
  * 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) {
     let x;
@@ -677,9 +688,14 @@ function findPosition(location, alignment, textSize, type) {
     const 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) {
     const htmlObject = renderer.createText(renderOptions, text);
     htmlObject.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
     htmlObject.style['user-select'] = 'none';
@@ -697,13 +713,12 @@ 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 = false) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const renderOptions = {
         'font-size': font.size,
         'font-style': font.fontStyle,
@@ -730,7 +745,8 @@ function renderTextElement(options, font, color, parent, isMinus = false) {
         const spacing = 5;
         const drillLevelText = drilledLabel.split('#');
         for (let z = 0; z < drillLevelText.length; z++) {
-            let drillText = (drillLevelText[z].search(options.connectorText) !== -1 && !isNullOrUndefined(options.connectorText)) ?
+            let drillText = (drillLevelText[z].search(options.connectorText) !== -1 &&
+                !isNullOrUndefined(options.connectorText)) ?
                 options.connectorText : drillLevelText[z];
             renderOptions['id'] = options.id + '_' + z;
             htmlObject = createTextStyle(renderer, renderOptions, drillText);
@@ -760,6 +776,13 @@ function renderTextElement(options, font, color, parent, isMinus = false) {
     }
     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) {
     const itemSelect = targetId.split('_RectPath')[0];
     let itemTemplate;
@@ -773,21 +796,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) {
     let isExist = false;
     let name = '';
     let path;
     const leaf = treemap.leafItemSettings;
     for (let 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;
         const data = processData[path] || 'undefined';
         if (source[i] === data) {
             name += data + (i === source.length - 1 ? '' : '#');
@@ -799,9 +840,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
     let children;
     if (data) {
         const keys = Object.keys(data);
@@ -816,11 +860,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
         const children = findChildren(data)['values'];
         if (children && children.length > 0) {
             for (let i = 0; i < children.length; i++) {
@@ -841,7 +891,6 @@ function findHightLightItems(data, items, mode, treeMap) {
     }
     else if (mode === 'All') {
         const parentName = data['levelOrderName'].split('#')[0];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let currentItem;
         for (let i = 0; i < treeMap.layout.renderItems.length; i++) {
             currentItem = treeMap.layout.renderItems[i];
@@ -862,11 +911,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
     let templateFn = null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     try {
         if (document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
@@ -884,31 +930,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) {
     const childElement = createElement('div', {
-        id: labelId,
-        styles: 'position: absolute;pointer-events: auto;'
+        id: labelId
     });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
     let elementLength = element.length;
     while (elementLength > 0) {
         childElement.appendChild(element[0]);
         elementLength--;
     }
     let templateHtml = childElement.innerHTML;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const keys = Object.keys(data);
     for (let i = 0; i < keys.length; i++) {
-        templateHtml = templateHtml.replace(new RegExp('{{:' + keys[i] + '}}', 'g'), data[keys[i].toString()]);
+        const 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) {
     const location = new Location(0, 0);
     const padding = 5;
     const paddings = 2;
-    const elementRect = treemap.element.getBoundingClientRect();
     const x = (type === 'Template') ? treemap.areaRect.x : 0;
     const y = (type === 'Template') ? treemap.areaRect.y : 0;
     location.x = (Math.abs(x - ((position.indexOf('Left') > -1) ? rect.x + padding : !(position.indexOf('Right') > -1) ?
@@ -924,6 +977,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) {
     const size = new Size(0, 0);
     parentElement.appendChild(element);
@@ -933,9 +992,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) {
     const container = convertToContainer(input);
     const width = container.width;
@@ -943,6 +1012,11 @@ function getShortestEdge(input) {
     const 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) {
     const x = rect.x;
     const y = rect.y;
@@ -955,6 +1029,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) {
     const xOffset = container.x;
     const yOffset = container.y;
@@ -967,6 +1046,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) {
     const elementRect = element.getBoundingClientRect();
     const pageXOffset = element.ownerDocument.defaultView.pageXOffset;
@@ -977,9 +1063,15 @@ function getMousePosition(pageX, pageY, element) {
     const 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) {
     let fill;
     const paths = [];
     let opacity;
@@ -991,7 +1083,8 @@ value, weightValuePath) {
         const 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];
@@ -1003,7 +1096,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;
                 }
@@ -1015,9 +1109,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)
@@ -1035,7 +1131,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) {
     let opacity = 1;
     if ((rangeValue >= colorMapping.from && rangeValue <= colorMapping.to)) {
         const ratio = (rangeValue - colorMapping.from) / (colorMapping.to - colorMapping.from);
@@ -1043,13 +1146,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) {
     const 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) {
     let color = '';
     let rbg;
@@ -1065,6 +1187,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) {
     const previousOffset = colorMap.from;
     const nextOffset = colorMap.to;
@@ -1087,7 +1215,6 @@ function getGradientColor(value, colorMap) {
         let b;
         let c;
         const length = colorMap.color.length - 1;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const splitColorValueOffset = [];
         let splitColor = {};
         for (let j = 1; j < length; j++) {
@@ -1125,6 +1252,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) {
     const nextColor = next.split('#')[1];
     const prevColor = previous.split('#')[1];
@@ -1133,10 +1267,24 @@ function getPercentageColor(percent, previous, next) {
     const 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) {
     const 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) {
     const textCollection = dataLabel.split(' ');
     let label = '';
@@ -1163,6 +1311,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) {
     const resultText = [];
     let currentLength = 0;
@@ -1191,11 +1346,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) {
     let hideText = text;
@@ -1203,6 +1358,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;
@@ -1212,6 +1373,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) {
     const elementId = treemap.levelSelection;
     if (elementId) {
@@ -1231,21 +1399,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) {
     const elementId = treemap.legendId;
     if (elementId) {
         for (let i = 0; i < elementId.length; i++) {
             for (let 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);
+                    const 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) {
     let element;
     let options = {};
@@ -1258,7 +1440,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'])) {
@@ -1267,7 +1454,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;
@@ -1278,8 +1471,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
     let formatValue;
     let formatFunction;
     if (treemap.format && !isNaN(Number(value))) {
@@ -1310,7 +1508,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) {
@@ -1337,9 +1535,8 @@ function colorNameToHex(color) {
     const element = document.getElementById('treeMapMeasureText');
     element.style.color = color;
     color = window.getComputedStyle(element).color;
-    const exp = /^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$/;
-    const isRGBValue = exp.exec(color);
-    return convertToHexCode(new ColorValue(parseInt(isRGBValue[3], 10), parseInt(isRGBValue[4], 10), parseInt(isRGBValue[5], 10)));
+    const 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
@@ -1457,7 +1654,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) {
     let isParentItem = false;
     for (let j = 0; j < data.length; j++) {
@@ -1472,7 +1674,6 @@ function isParentItem(data, item) {
  * Ajax support for treemap
  */
 class TreeMapAjax {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(options, type, async, contentType, sendData) {
         this.dataOptions = options;
         this.type = type || 'GET';
@@ -1481,21 +1682,29 @@ class TreeMapAjax {
         this.sendData = sendData;
     }
 }
-// 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 (let i = 0; i < collection.length; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const 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 (let j = 0; j < collection.length; j++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const item = collection[j];
             setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
             const dataCount = item['ShapeCollection']['Elements'].length;
@@ -1505,19 +1714,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) {
     let index;
     for (let i = 0; i < length; i++) {
@@ -1531,11 +1761,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'],
@@ -1567,6 +1804,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) {
     const element = document.getElementById(id);
     return element ? remove(element) : null;
@@ -1576,7 +1818,6 @@ function removeElement(id) {
  * To calculate and render the shape layer
  */
 class LayoutPanel {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(treemap) {
         this.treemap = treemap;
     }
@@ -1609,7 +1850,7 @@ class LayoutPanel {
                     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) &&
@@ -1618,7 +1859,7 @@ class LayoutPanel {
                     this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
                 }
                 this.calculateLayoutItems(data || LevelsData.levelsData[0], totalRect);
-                this.renderLayoutItems(data || LevelsData.levelsData[0]);
+                this.renderLayoutItems();
             }
         }
     }
@@ -1644,7 +1885,7 @@ class LayoutPanel {
         }
         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
     calculateLayoutItems(data, rect) {
         this.renderItems = [];
         this.parentData = [];
@@ -1678,7 +1919,8 @@ class LayoutPanel {
                     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);
@@ -1750,8 +1992,9 @@ class LayoutPanel {
                     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);
@@ -1947,7 +2190,7 @@ class LayoutPanel {
         }
         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
     onDemandProcess(childItems) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let parentItem = {};
@@ -1977,13 +2220,12 @@ class LayoutPanel {
             }
         }
         this.calculateLayoutItems(parentItemGroupname, totalRect);
-        this.renderLayoutItems(parentItemGroupname);
+        this.renderLayoutItems();
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderLayoutItems(renderData) {
+    /** @private */
+    renderLayoutItems() {
         let position;
         const treeMap = this.treemap;
-        let colorMapping;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let txtVisible;
         let getItemColor;
@@ -2015,13 +2257,13 @@ class LayoutPanel {
         let border;
         const 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;';
         let isLeafItem = false;
         const leaf = treeMap.leafItemSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2055,7 +2297,6 @@ class LayoutPanel {
                 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.getItemColor(isLeafItem, item);
             fill = getItemColor['fill'];
             opacity = getItemColor['opacity'];
@@ -2131,8 +2372,6 @@ class LayoutPanel {
         this.treemap.svgObject.appendChild(this.layoutGroup);
     }
     renderItemText(text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
-        const secondaryEle = document.getElementById(this.treemap.element.id + '_Secondary_Element');
-        const leaf = this.treemap.leafItemSettings;
         const padding = 5;
         let textSize;
         let textCollection = [];
@@ -2210,7 +2449,7 @@ class LayoutPanel {
             treemap.levels[item['groupIndex']].colorMapping;
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath], item['data'][this.treemap.weightValuePath]);
+            const 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'];
         }
@@ -2247,8 +2486,8 @@ class LayoutPanel {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const keys = Object.keys(item['data']);
             for (let 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()]);
+                const regExp = RegExp;
+                template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
         let labelElement;
@@ -2525,18 +2764,19 @@ class Print {
      *
      * @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
     constructor(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
      */
     print(treeMap, elements) {
-        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        const printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
         printWindow.moveTo(0, 0);
         printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
@@ -2551,6 +2791,7 @@ class Print {
     /**
      * 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
@@ -2590,6 +2831,7 @@ class Print {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
@@ -2604,12 +2846,13 @@ class ImageExport {
      *
      * @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
     constructor(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.
@@ -2617,7 +2860,7 @@ class ImageExport {
      * @private
      */
     export(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
         const promise = new Promise((resolve, reject) => {
             const element = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -2673,6 +2916,7 @@ class ImageExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
@@ -2687,12 +2931,13 @@ class PdfExport {
      *
      * @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
     constructor(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.
@@ -2701,7 +2946,7 @@ class PdfExport {
      * @private
      */
     export(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
         const promise = new Promise((resolve, reject) => {
             const element = createElement('canvas', {
                 id: 'ej2-canvas',
@@ -2710,7 +2955,6 @@ class PdfExport {
                     'height': treeMap.availableSize.height.toString()
                 }
             });
-            const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
             const exportElement = treeMap.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
@@ -2754,13 +2998,10 @@ class PdfExport {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 }
 
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable @typescript-eslint/dot-notation */
-/* eslint-disable brace-style */
-/* eslint-disable max-len */
 /**
  * Tree Map Components
  */
@@ -2781,10 +3022,12 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  * ```
  */
 let TreeMap = class TreeMap extends Component {
-    /**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
     constructor(options, element) {
         super(options, element);
         /**
@@ -2915,9 +3158,9 @@ let TreeMap = class TreeMap extends Component {
         }
         if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
             const 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);
         }
     }
@@ -2929,9 +3172,9 @@ let TreeMap = class TreeMap extends Component {
         }
     }
     /**
-     * @private
      * Render the treemap border
      *
+     * @private
      * @returns {void}
      */
     renderBorder() {
@@ -3009,11 +3252,12 @@ let TreeMap = class TreeMap extends Component {
                     const child = findChildren(this.dataSource[i])['values'];
                     if (this.isHierarchicalData && child && child.length > 0) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        child.forEach((currentData, dataIndex) => {
+                        child.forEach((currentData) => {
                             if (currentData[path]) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 data[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]
                                 });
                             }
@@ -3073,11 +3317,10 @@ let TreeMap = class TreeMap extends Component {
     processHierarchicalData(data, dataCount) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let childData;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let newData = {};
         let levelIndex;
         const path = this.leafItemSettings.labelPath ? this.leafItemSettings.labelPath : this.weightValuePath;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let level;
         let key;
         newData = findChildren(data);
         childData = newData ? newData['values'] : null;
@@ -3085,7 +3328,6 @@ let TreeMap = class TreeMap extends Component {
             key = newData['key'];
             for (let i = 0; i < this.levels.length; i++) {
                 if (key === this.levels[i].groupPath) {
-                    level = this.levels[i];
                     levelIndex = i;
                 }
             }
@@ -3136,7 +3378,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     print(id) {
         if (this.allowPrint && this.printModule) {
@@ -3146,22 +3389,24 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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.
      */
     export(type, fileName, orientation, allowDownload) {
         if (isNullOrUndefined(allowDownload)) {
             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((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((resolve, reject) => {
                 resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
             });
@@ -3201,7 +3446,7 @@ let TreeMap = class TreeMap extends Component {
                         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);
                     }
                 }
@@ -3211,7 +3456,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     reOrderLevelData(start) {
         let currentName;
@@ -3224,7 +3470,8 @@ let TreeMap = class TreeMap extends Component {
         for (let i = 0; i < currentData.length; i++) {
             currentName = currentData[i]['levelOrderName'];
             for (let 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];
@@ -3256,12 +3503,12 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
     findTotalWeight(processData, type) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let totalWeight;
         let split;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3335,12 +3582,14 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
     resizeOnTreeMap(e) {
         if (!this.isDestroyed) {
             this.isResize = true;
-            let args = {
+            const args = {
                 name: resize,
                 cancel: false,
                 previousSize: this.availableSize,
@@ -3357,6 +3606,7 @@ let TreeMap = class TreeMap extends Component {
                     this.refreshing = true;
                     this.wireEVents();
                     args.currentSize = this.availableSize;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     this.trigger(resize, args, (observedArgs) => {
                         this.render();
                     });
@@ -3367,7 +3617,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     clickOnTreeMap(e) {
         const targetEle = e.target;
@@ -3409,7 +3660,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     doubleClickOnTreeMap(e) {
         const doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
@@ -3419,7 +3671,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     rightClickOnTreeMap(e) {
         const rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
@@ -3428,7 +3681,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     mouseDownOnTreeMap(e) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
@@ -3439,7 +3693,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     mouseMoveOnTreeMap(e) {
         const targetEle = e.target;
@@ -3465,10 +3720,11 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
     calculateSelectedTextLevels(labelText, item) {
         //to find the levels by clicking the particular text both for drillDownView as true / false.
         let drillLevel;
@@ -3487,13 +3743,14 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
-    calculatePreviousLevelChildItems(labelText, drillLevelValues, item, directLevel) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    calculatePreviousLevelChildItems(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 '[+]'
@@ -3527,11 +3784,12 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
     compareSelectedLabelWithDrillDownItems(drillLevelValues, item, i) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let drillLevelChild;
@@ -3554,7 +3812,8 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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}
      */
     mouseEndOnTreeMap(e) {
         const targetEle = e.target;
@@ -3584,7 +3843,7 @@ let TreeMap = class TreeMap extends Component {
                 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'] &&
@@ -3676,7 +3935,7 @@ let TreeMap = class TreeMap extends Component {
                         }
                         else {
                             this.layout.calculateLayoutItems(newDrillItem, totalRect);
-                            this.layout.renderLayoutItems(newDrillItem);
+                            this.layout.renderLayoutItems();
                         }
                     }
                 });
@@ -3695,8 +3954,10 @@ let TreeMap = class TreeMap extends Component {
     /**
      * 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
     mouseLeaveOnTreeMap(e) {
         if (this.treeMapTooltipModule) {
             this.treeMapTooltipModule.removeTooltip();
@@ -3706,12 +3967,16 @@ let TreeMap = class TreeMap extends Component {
         }
         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}
      */
     selectItem(levelOrder, isSelected) {
         if (isNullOrUndefined(isSelected)) {
@@ -3790,6 +4055,7 @@ let TreeMap = class TreeMap extends Component {
      * @returns {void}
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPropertyChanged(newProp, oldProp) {
         if (!this.isDestroyed) {
             let render = false;
@@ -3819,6 +4085,8 @@ let TreeMap = class TreeMap extends Component {
     }
     /**
      * Gets component name.
+     *
+     * @returns {string} - return the treemap instance.
      */
     getModuleName() {
         return 'treemap';
@@ -4021,14 +4289,10 @@ TreeMap = __decorate([
 class LevelsData {
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/dot-notation */
-/* eslint-disable max-len */
 /**
  * Legend module class
  */
 class TreeMapLegend {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(treemap) {
         this.page = 0;
         this.legendBorderRect = new Rect(0, 0, 0, 0);
@@ -4055,15 +4319,12 @@ class TreeMapLegend {
         this.heightIncrement = 0;
         this.defsElement = this.treemap.renderer.createDefs();
         this.treemap.svgObject.appendChild(this.defsElement);
-        let eventArgs;
-        eventArgs = {
+        const eventArgs = {
             cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
             position: this.treemap.legendSettings.position
         };
         this.treemap.trigger(legendRendering, eventArgs, (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();
@@ -4078,9 +4339,18 @@ class TreeMapLegend {
         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((firstItem, nextItem) => (firstItem.levelIndex > nextItem.levelIndex) ? 1 :
+                (firstItem.levelIndex < nextItem.levelIndex) ? -1 : 0);
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort((firstItem, nextItem) => (firstItem.groupIndex > nextItem.groupIndex) ? 1 :
+                (firstItem.groupIndex < nextItem.groupIndex) ? -1 : 0);
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.legendCollections.sort((firstItem, nextItem) => (firstItem.leafIndex > nextItem.leafIndex) ? 1 :
+                (firstItem.leafIndex < nextItem.leafIndex) ? -1 : 0);
             const defaultSize = 25;
             const textPadding = 10;
             const position = legend.position;
@@ -4112,7 +4382,6 @@ class TreeMapLegend {
             let startY = 0;
             const shapePadding = legend.shapePadding;
             const itemTextStyle = legend.textStyle;
-            const legendLength = this.legendCollections.length;
             itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
             itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
             if (legendMode === 'Default') {
@@ -4309,7 +4578,7 @@ class TreeMapLegend {
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    findPaletteLegendItems(data, type) {
+    findPaletteLegendItems(data) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let child;
         let legendFillColor;
@@ -4416,7 +4685,8 @@ class TreeMapLegend {
             groupIndex = data[i]['groupIndex'];
             isLeafItem = (this.treemap.levels.length === 0 || groupIndex === this.treemap.levels.length);
             colorMapping = isLeafItem ? leaf.colorMapping : levels[groupIndex].colorMapping;
-            for (const colorMap$$1 of colorMapping) {
+            for (let j = 0; j < colorMapping.length; j++) {
+                const colorMap$$1 = colorMapping[j];
                 gradientElement = null;
                 rangeValue = Number(currentData[this.treemap.rangeColorValuePath]);
                 equalValue = currentData[this.treemap.equalColorValuePath];
@@ -4477,8 +4747,8 @@ class TreeMapLegend {
                     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,
@@ -4755,9 +5025,11 @@ class TreeMapLegend {
             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}
      */
     renderInteractivePointer(e) {
         const treemap = this.treemap;
@@ -4914,18 +5186,22 @@ class TreeMapLegend {
             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}
      */
     changeNextPage(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}
      */
     wireEvents(element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -4952,9 +5228,10 @@ class TreeMapLegend {
         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.
      */
     getModuleName() {
         return 'treeMapLegend';
@@ -4982,9 +5259,12 @@ class TreeMapLegend {
         //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.
      */
     legendGradientColor(colorMap$$1, legendIndex) {
         let legendFillColor;
@@ -5023,7 +5303,6 @@ class TreeMapLegend {
  * Performing treemap highlight
  */
 class TreeMapHighlight {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(treeMap) {
         this.target = 'highlight';
         this.shapeTarget = 'highlight';
@@ -5036,10 +5315,11 @@ class TreeMapHighlight {
         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.
      */
     mouseMove(e) {
         const treemap = this.treemap;
@@ -5072,7 +5352,7 @@ class TreeMapHighlight {
                     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']
@@ -5092,7 +5372,8 @@ class TreeMapHighlight {
                 }
                 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 (let i = 0; i < treeMapElement.childElementCount; i++) {
                             element = treeMapElement.childNodes[i];
                             process = true;
@@ -5125,13 +5406,14 @@ class TreeMapHighlight {
             }
         }
         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)) {
                 let itemIndex;
                 let groupIndex;
                 let length;
                 const targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
-                    removeLegend(this.legendHighlightCollection, 'highlight');
+                    removeLegend(this.legendHighlightCollection);
                 }
                 this.shapeTarget = 'highlight';
                 const index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
@@ -5168,14 +5450,15 @@ class TreeMapHighlight {
             }
             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;
@@ -5231,7 +5514,6 @@ class TreeMapHighlight {
  * Performing treemap selection
  */
 class TreeMapSelection {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(treeMap) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.shapeSelectionCollection = [];
@@ -5242,14 +5524,15 @@ class TreeMapSelection {
         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}
      */
     mouseDown(e) {
         const targetEle = e.target;
         let eventArgs;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const treemap = this.treemap;
         treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5277,7 +5560,7 @@ class TreeMapSelection {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const collection = this.treemap.treeMapLegendModule.legendCollections;
                     this.shapeElement = undefined;
-                    removeShape(this.shapeSelectionCollection, 'selection');
+                    removeShape(this.shapeSelectionCollection);
                     if (highlightModule) {
                         highlightModule.shapeTarget = 'selection';
                         highlightModule.shapeHighlightCollection = [];
@@ -5331,7 +5614,7 @@ class TreeMapSelection {
                 }
             }
             else {
-                removeShape(this.shapeSelectionCollection, 'selection');
+                removeShape(this.shapeSelectionCollection);
                 this.shapeSelectionCollection = [];
                 this.shapeElement = undefined;
                 this.shapeSelect = true;
@@ -5352,7 +5635,7 @@ class TreeMapSelection {
                 this.legendSelect = false;
                 const legendIndex = parseInt(targetId[targetId.length - 1], 10);
                 const targetEle = document.getElementById(targetId);
-                removeLegend(this.legendSelectionCollection, 'selection');
+                removeLegend(this.legendSelectionCollection);
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'selection';
                 }
@@ -5378,7 +5661,7 @@ class TreeMapSelection {
                 }
             }
             else {
-                removeLegend(this.legendSelectionCollection, 'Selection');
+                removeLegend(this.legendSelectionCollection);
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'highlight';
                 }
@@ -5429,7 +5712,7 @@ class TreeMapSelection {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const collection = this.treemap.treeMapLegendModule.legendCollections;
                     this.shapeElement = undefined;
-                    removeShape(this.shapeSelectionCollection, 'selection');
+                    removeShape(this.shapeSelectionCollection);
                     index = getLegendIndex(length, 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) {
@@ -5469,7 +5752,7 @@ class TreeMapSelection {
             }
         }
         else {
-            removeShape(this.shapeSelectionCollection, 'selection');
+            removeShape(this.shapeSelectionCollection);
             this.shapeElement = undefined;
             this.treemap.levelSelection = [];
             this.shapeSelect = true;
@@ -5512,7 +5795,6 @@ class TreeMapSelection {
     /**
      * To destroy the selection.
      *
-     * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @returns {void}
      * @private
      */
@@ -5538,7 +5820,6 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
  * Render Tooltip
  */
 class TreeMapTooltip {
-    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(treeMap) {
         this.treemap = treeMap;
         this.tooltipSettings = this.treemap.tooltipSettings;
@@ -5571,14 +5852,12 @@ class TreeMapTooltip {
         let tooltipEle;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let location;
-        let toolTipHeader;
         let toolTipData = {};
         let tooltipContent = [];
         let 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'])) {
@@ -5598,9 +5877,9 @@ class TreeMapTooltip {
                 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);
@@ -5619,6 +5898,7 @@ class TreeMapTooltip {
                     treemap: this.treemap,
                     element: target, eventArgs: e
                 };
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 this.treemap.trigger(tooltipRendering, tootipArgs, (args) => {
                     this.addTooltip(tootipArgs, markerFill, tooltipEle);
                 });