@syncfusion/ej2-treemap 27.2.2 → 28.1.39

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

@@ -1173,10 +1173,12 @@ function colorMap(colorMapping, equalValue, value) {
     for (var i = 0; i < colorMapping.length; i++) {
         var isEqualColor = false;
         var dataValue = value;
+        var colorMappingValue = colorMapping[i].value ? colorMapping[i].value.toString() :
+            colorMapping[i].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)) {
+                (colorMappingValue === equalValue)) {
                 isEqualColor = true;
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
                     fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -1189,8 +1191,8 @@ function colorMap(colorMapping, equalValue, value) {
         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 (colorMapping[i].value === equalValue) {
+                || (colorMappingValue === equalValue)) {
+                if (colorMappingValue === equalValue) {
                     isEqualColor = true;
                 }
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
@@ -1202,7 +1204,7 @@ function colorMap(colorMapping, equalValue, value) {
             }
         }
         if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
-            || (colorMapping[i].value === equalValue))
+            || (colorMappingValue === equalValue))
             && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
             && fill) {
             opacity = deSaturationColor(colorMapping[i], value);
@@ -1477,7 +1479,8 @@ function maintainSelection(treemap, element, className) {
     var elementId = treemap.levelSelection;
     if (elementId) {
         for (var index = 0; index < elementId.length; index++) {
-            if (element.getAttribute('id') === elementId[index]) {
+            if (element.getAttribute('id') === elementId[index] ||
+                element.children[0].id === elementId[index]) {
                 if (element.childElementCount > 0) {
                     element.children[0].setAttribute('class', className);
                     applyOptions(element.childNodes[0], {
@@ -1502,13 +1505,25 @@ 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]) {
-                    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);
+            if (treemap.legendSettings.mode === 'Interactive') {
+                for (var j = 0; j < legendGroup.childElementCount; j++) {
+                    if (legendGroup.childNodes[j]['id'] === elementId[i] ||
+                        parseFloat(legendGroup.childNodes[j]['id'].split('Index_')[1]) === parseFloat(elementId[i].split('Index_')[1])) {
+                        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);
+                    }
+                }
+            }
+            else {
+                var legendItem = document.getElementById(elementId[i]);
+                if (!isNullOrUndefined(legendItem)) {
+                    legendItem.setAttribute('fill', treemap.selectionSettings.fill);
+                    legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
+                    legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                    legendItem.setAttribute('opacity', treemap.selectionSettings.opacity);
                 }
             }
         }
@@ -1544,6 +1559,9 @@ function applyOptions(element, options) {
     if (!isNullOrUndefined(options['fill'])) {
         element.setAttribute('fill', options['fill']);
     }
+    else {
+        element.setAttribute('fill', 'black');
+    }
     element.setAttribute('stroke', options['border']['color']);
     element.setAttribute('stroke-width', options['border']['width']);
 }
@@ -1793,17 +1811,35 @@ function removeShape(collection) {
 /**
  *
  * @param {any[]} collection - Specifies the legend collection.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
  * @returns {void}
  * @private
  */
-function removeLegend(collection) {
+function removeLegend(collection, treeMap) {
     if (collection.length > 0) {
         for (var j = 0; j < collection.length; j++) {
             var item = collection[j];
-            setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
-            var dataCount = item['ShapeCollection']['Elements'].length;
+            var legendIndex = parseFloat(item['legendEle'].id.split('_Index_')[1]);
+            var isText = item['legendEle'].id.indexOf('Text') > -1;
+            var shapeId = isText ? item['legendEle'].id.replace('_Text', '') : item['legendEle'].id;
+            var legendShape = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId)
+                : document.getElementById(treeMap.element.id + '_Legend_Shape_Index_' + legendIndex);
+            var legendText = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId + '_Text')
+                : document.getElementById(treeMap.element.id + '_Legend_Text_Index_' + legendIndex);
+            if (!isNullOrUndefined(legendShape)) {
+                setColor(legendShape, item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+            }
+            if (!isNullOrUndefined(legendText)) {
+                setColor(legendText, treeMap.legendSettings.textStyle.color, item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+            }
+            var dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
             for (var k = 0; k < dataCount; k++) {
-                setColor(item['ShapeCollection']['Elements'][k], item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                var shapeElement = document.getElementById(item['ShapeCollection']['Elements'][k].id);
+                if (!isNullOrUndefined(shapeElement)) {
+                    setColor(shapeElement, item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                }
             }
         }
     }
@@ -1831,7 +1867,7 @@ function setColor(element, fill, opacity, borderColor, borderWidth) {
  * @returns {void}
  */
 function removeSelectionWithHighlight(collection, element, treemap) {
-    removeShape(collection);
+    removeLegend(collection, treemap);
     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
 }
 /**
@@ -1843,10 +1879,24 @@ function removeSelectionWithHighlight(collection, element, treemap) {
  */
 function getLegendIndex(length, item, treemap) {
     var index;
+    var valuePath = treemap.rangeColorValuePath;
     for (var i = 0; i < length; i++) {
         var dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
-        for (var j = 0; j < dataLength; j++) {
-            if (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']) {
+        if (dataLength > 0) {
+            for (var j = 0; j < dataLength; j++) {
+                if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0 ?
+                    (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['data'][valuePath] === item['data'][valuePath])
+                    : treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']
+                        || item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i]['legendName']) > -1)) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        else if (treemap.palette && treemap.palette.length > 0) {
+            if ((treemap.treeMapLegendModule.legendCollections[i]['levelOrderName'] === item['levelOrderName'] ||
+                (item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i]['levelOrderName'])) > -1)
+                && treemap.treeMapLegendModule.legendCollections[i]['legendName'] === item['name']) {
                 index = i;
                 break;
             }
@@ -2378,7 +2428,8 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             groupId = elementID + '_Level_Index_' + index + '_Item_Index_' + i;
             itemGroup = this_1.renderer.createGroup({ id: groupId + '_Group' });
             gap = (isLeafItem ? leaf.gap : levels[index].groupGap) / 2;
-            var treemapItemRect = this_1.treemap.totalRect ? convertToContainer(this_1.treemap.totalRect) : this_1.treemap.areaRect;
+            var treemapItemRect = this_1.treemap.totalRect ? (treeMap.legendSettings.visible ? this_1.treemap.totalRect
+                : convertToContainer(this_1.treemap.totalRect)) : this_1.treemap.areaRect;
             if (treeMap.layoutType === 'Squarified') {
                 rect.width = Math.abs(rect.x - rect.width) - gap;
                 rect.height = Math.abs(rect.y - rect.height) - gap;
@@ -2421,6 +2472,9 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             renderText = !isLeafItem && childItems && childItems.length > 0 && this_1.treemap.enableDrillDown ?
                 !item['isDrilled'] ? treeMap.enableRtl ? renderText + ' [+]' : '[+] ' + renderText :
                     treeMap.enableRtl ? renderText + ' [-]' : '[-] ' + renderText : renderText;
+            if (treeMap.enableHtmlSanitizer) {
+                renderText = SanitizeHtmlHelper.sanitize(renderText);
+            }
             var fontFamily = (isLeafItem ? leaf.labelStyle.fontFamily : levels[index].headerStyle.fontFamily);
             fontFamily = fontFamily || this_1.treemap.themeStyle.labelFontFamily;
             var size = (isLeafItem ? leaf.labelStyle.size : levels[index].headerStyle.size);
@@ -2489,6 +2543,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             secondaryEle.appendChild(templateGroup);
         }
         this.treemap.svgObject.appendChild(this.layoutGroup);
+        maintainSelection(this.treemap, this.layoutGroup, 'treeMapSelection');
     };
     LayoutPanel.prototype.renderItemText = function (text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
         var padding = 5;
@@ -2578,7 +2633,8 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
             for (var i = 0; i < parentData.length; i++) {
                 if (parentData[i]['levelOrderName'] === item['levelOrderName'].split('#')[0]) {
                     itemFill = !isNullOrUndefined(itemFill) ? itemFill : !isNullOrUndefined(treemap.colorValuePath) ?
-                        parentData[i]['data'][treemap.colorValuePath] : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
+                        parentData[i]['data'][treemap.colorValuePath] : !isNullOrUndefined(item['options']) ?
+                        item['options'].fill : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
                         treemap.palette[i % treemap.palette.length] : '#808080';
                 }
             }
@@ -2611,6 +2667,9 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                 template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
+        if (this.treemap.enableHtmlSanitizer && typeof template === 'string') {
+            template = SanitizeHtmlHelper.sanitize(template);
+        }
         var labelElement;
         if (!isNullOrUndefined(document.getElementById(this.treemap.element.id + '_Secondary_Element'))) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2737,9 +2796,9 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
+                labelFontFamily: defaultFont,
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontSize: '12px',
-                labelFontFamily: defaultFont,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };
@@ -2816,6 +2875,54 @@ function getThemeStyle(theme) {
                 legendBorderWidth: 0
             };
             break;
+        case 'tailwind3':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#111827',
+                titleFontWeight: '600',
+                subTitleFontColor: '#111827',
+                tooltipFillColor: '#111827',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#111827',
+                legendTextColor: '#111827',
+                fontFamily: 'Inter',
+                fontSize: '14px',
+                fontWeight: '400',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
+        case 'tailwind3dark':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                titleFontWeight: '600',
+                subTitleFontColor: '#FFFFFF',
+                tooltipFillColor: '#F9FAFB',
+                tooltipFontColor: '#1F2937',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                fontFamily: 'Inter',
+                fontWeight: '400',
+                fontSize: '14px',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
         case 'bootstrap5':
             style = {
                 backgroundColor: 'transparent',
@@ -3047,9 +3154,9 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
-                labelFontFamily: defaultFont,
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontSize: '12px',
+                labelFontFamily: defaultFont,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };
@@ -3124,12 +3231,12 @@ var Print = /** @__PURE__ @class */ (function () {
                 backgroundElement = backgroundElement.childNodes[0];
                 if (!isNullOrUndefined(backgroundElement)) {
                     var backgroundColor = backgroundElement.getAttribute('fill');
-                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                         treeMap.theme === 'Fluent2')
                         && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                     }
-                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                         treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                         && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -3198,12 +3305,12 @@ var ImageExport = /** @__PURE__ @class */ (function () {
             var backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                     treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                     treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -3301,12 +3408,12 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                     treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                     treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
@@ -3488,6 +3595,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         }
         this.layout.processLayoutPanel();
         this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.treeMapLegendModule) && this.legendSettings.visible) {
+            legendMaintain(this, this.treeMapLegendModule.legendGroup);
+        }
         this.elementChange();
         this.trigger(loaded, { treemap: this, isResized: this.isResize });
         this.isResize = false;
@@ -3583,14 +3693,15 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
             }
-            var trimmedTitle = textTrim(width, title.text, style);
+            var titleText = this.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(title.text)) : title.text;
+            var trimmedTitle = textTrim(width, titleText, style);
             var elementSize = measureText(trimmedTitle, style);
             var rect = (isNullOrUndefined(bounds)) ? new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
             var location_1 = findPosition(rect, title.alignment, elementSize, type);
             var options = new TextOption(this.element.id + '_TreeMap_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
-            element.setAttribute('aria-label', title.description || title.text);
+            element.setAttribute('aria-label', title.description || titleText);
             element.setAttribute('role', 'region');
             element.setAttribute('tabindex', this.tabIndex.toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
@@ -4379,7 +4490,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         }
         removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
         if (this.treeMapHighlightModule) {
-            removeShape(this.treeMapHighlightModule.shapeHighlightCollection);
+            removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
             this.treeMapHighlightModule.highLightId = '';
         }
     };
@@ -4627,6 +4738,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(false)
     ], TreeMap.prototype, "drillDownView", void 0);
+    __decorate$1([
+        Property(false)
+    ], TreeMap.prototype, "enableHtmlSanitizer", void 0);
     __decorate$1([
         Complex({}, InitialDrillSettings)
     ], TreeMap.prototype, "initialDrillDown", void 0);
@@ -4803,7 +4917,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             var defaultSize = 25;
             var textPadding = 10;
             var position = legend.position;
-            var legendTitle = legend.title.text;
+            var legendTitle = treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(legend.title.text) : legend.title.text;
             var titleTextStyle = legend.titleStyle;
             var legendMode = legend.mode;
             var shapeX = 0;
@@ -4845,7 +4959,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     if (isNullOrUndefined(this.totalPages[this.page])) {
                         this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
                     }
-                    var legendTextSize = measureText(legendItem['legendName'], itemTextStyle);
+                    var legendTextSize = measureText(treemap.enableHtmlSanitizer ?
+                        SanitizeHtmlHelper.sanitize(legendItem['legendName']) : legendItem['legendName'], itemTextStyle);
                     this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
                     if (i === 0) {
                         startX_1 = shapeX = (leftPadding + (shapeWidth / 2));
@@ -5053,7 +5168,16 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         if (this.treemap.enableDrillDown && !isNullOrUndefined(this.treemap.drilledLegendItems)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var childElement = this.treemap.drilledLegendItems;
-            legendFillColor = childElement['data']['options']['fill'];
+            if (!isNullOrUndefined(childElement['data']['options'])) {
+                legendFillColor = childElement['data']['options']['fill'];
+            }
+            else {
+                for (var k = 0; k < childElement.length; k++) {
+                    legendFillColor = this.treemap.palette.length > 0 ? this.treemap.palette[k % this.treemap.palette.length] :
+                        childElement[k]['data'][this.treemap.colorValuePath];
+                    break;
+                }
+            }
             if (childElement['data']['isDrilled']) {
                 child = findChildren(childElement['data'])['values'];
             }
@@ -5083,7 +5207,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                                 ? legendFillColor : this.treemap.palette[i % this.treemap.palette.length] :
                                 child[i]['data'][this.treemap.colorValuePath],
                             legendData: [],
-                            itemArea: child[i]['weight']
+                            itemArea: child[i]['weight'],
+                            levelOrderName: child[i]['levelOrderName']
                         });
                     }
                 }
@@ -5209,7 +5334,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     this.legendCollections[this.legendCollections.length - 1]['legendData'].push(data[i]);
                     legendIndex++;
                 }
-                else if (colorMapProcess && !isDuplicate) {
+                else if (colorMapProcess) {
                     colorMapProcess = false;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.legendCollections[isAddData['value']]['legendData'].push(data[i]);
@@ -5227,14 +5352,19 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                         if (isNullOrUndefined(this.outOfRangeLegend) && !isDuplicate) {
                             this.legendCollections.push({
                                 actualValue: labelLegend, legendData: [],
-                                legendName: labelLegend, legendFill: outfill
+                                legendName: labelLegend, legendFill: outfill, groupIndex: (!isLeafItem || groupIndex > -1) ? groupIndex : -1
                             });
                             otherIndex = this.legendCollections.length;
                             this.outOfRangeLegend = this.legendCollections[otherIndex - 1];
                             legendIndex++;
                         }
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.legendCollections[this.legendCollections.length - 1]['legendData'].push(data[i]);
+                        for (var k = this.legendCollections.length - 1; k >= 0; k--) {
+                            if (this.legendCollections[k]['groupIndex'] === data[i]['groupIndex']) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                this.legendCollections[k]['legendData'].push(data[i]);
+                                break;
+                            }
+                        }
                     }
                 }
             }
@@ -5323,7 +5453,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                             - this.translate.x - Math.abs(this.legendBorderRect.x - textLocation.x);
                     }
                 }
-                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
+                var text = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
+                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
                 renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
             }
@@ -5372,7 +5503,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             var _loop_1 = function (i) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection = this_1.totalPages[page]['Collection'][i];
-                var legendText = collection['DisplayText'];
+                var legendText = this_1.treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(collection['DisplayText']) : collection['DisplayText'];
                 var legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
@@ -5481,7 +5612,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     TreeMapLegend.prototype.renderLegendTitle = function () {
         var legend = this.treemap.legendSettings;
         var textStyle = legend.titleStyle;
-        var legendTitle = legend.title.text;
+        var legendTitle = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(legend.title.text)) : legend.title.text;
         var textOptions;
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -5505,6 +5636,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         var treemap = this.treemap;
         var target = e.target;
         var interactiveId = treemap.element.id + '_Interactive_Legend';
+        var pointerDrawn = false;
         target = !(e.type.indexOf('touch') > -1) ? target :
             document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5522,7 +5654,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             var legendElement = void 0;
             targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_Item_Index_')[1])];
             var svgRect = treemap.svgObject.getBoundingClientRect();
-            for (var i = 0; i < this.legendCollections.length; i++) {
+            for (var i = 0; i < this.legendCollections.length && !pointerDrawn; i++) {
                 currentData = this.legendCollections[i];
                 legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
                 legendRect = legendElement.getBoundingClientRect();
@@ -5530,16 +5662,33 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 fill = legendElement.getAttribute('fill');
                 stroke = legend.shapeBorder.color;
                 strokeWidth = legend.shapeBorder.width;
-                if (!isNullOrUndefined(currentData['legendData'])) {
+                if (!isNullOrUndefined(currentData['legendData']) && currentData['legendData'].length > 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     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);
-                            break;
+                    var valuePath = treemap.rangeColorValuePath;
+                    if (targetItem['levelOrderName'].indexOf(this.legendCollections[i]['legendName']) > -1) {
+                        this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                        pointerDrawn = true;
+                    }
+                    else {
+                        for (var j = 0; j < data.length; j++) {
+                            if ((treemap.rangeColorValuePath && treemap.leafItemSettings.colorMapping.length > 0)
+                                ? data[j]['data'][valuePath] === targetItem['data'][valuePath]
+                                : (data[j]['levelOrderName'] === targetItem['levelOrderName'] ||
+                                    data[j]['levelOrderName'].indexOf(targetItem['levelOrderName']) > -1)) {
+                                this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                                pointerDrawn = true;
+                                break;
+                            }
                         }
                     }
                 }
+                else if (this.treemap.leafItemSettings.colorMapping.length === 0 && this.treemap.palette) {
+                    if (targetItem['levelOrderName'].indexOf(currentData['levelOrderName']) > -1) {
+                        this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                        pointerDrawn = true;
+                    }
+                }
             }
         }
         else {
@@ -5829,7 +5978,21 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
         var element;
         var orders;
         var selectionModule = this.treemap.treeMapSelectionModule;
-        if (targetId.indexOf('_Item_Index') > -1 && (selectionModule ? this.treemap.selectionId !== targetId : true)) {
+        var shapeSelected = false;
+        if (selectionModule && selectionModule.legendSelectionCollection.length > 0) {
+            for (var i = 0; i < selectionModule.legendSelectionCollection.length; i++) {
+                for (var j = 0; j < selectionModule.legendSelectionCollection[i]['ShapeCollection']['Elements'].length; j++) {
+                    var selectedElementIndex = parseFloat(selectionModule.legendSelectionCollection[i]['ShapeCollection']['Elements'][j].id.split('Item_Index_')[1].split('_')[0]);
+                    var targetElementIndex = targetId.indexOf('_Item_Index_') > -1 ? parseFloat(targetId.split('Item_Index_')[1].split('_')[0]) : null;
+                    if (selectionModule.legendSelectionCollection[i]['ShapeCollection']['Elements'][j].id === targetId ||
+                        selectedElementIndex === targetElementIndex) {
+                        shapeSelected = true;
+                        break;
+                    }
+                }
+            }
+        }
+        if (targetId.indexOf('_Item_Index') > -1 && !shapeSelected) {
             if (this.highLightId !== targetId) {
                 treeMapElement = document.getElementById(treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout');
                 var selectionElements = document.getElementsByClassName('treeMapSelection');
@@ -5839,16 +6002,22 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var collection = this.treemap.treeMapLegendModule.legendCollections;
                     var length_1 = this.treemap.treeMapLegendModule.legendCollections.length;
-                    index = getLegendIndex(length_1, item, treemap);
+                    index = (!treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
+                        treemap.leafItemSettings.colorMapping.length === 0 && treemap.levels.length === 0) ?
+                        parseFloat(targetId.split('_Item_Index_')[1]) : getLegendIndex(length_1, item, 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 && (selectionModule ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true)) {
-                        if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true) {
+                        var legendShapeElement = selectionModule ? selectionModule.shapeElement : null;
+                        if (selectionModule ? this.shapeElement !== legendShapeElement : true) {
                             this.currentElement.push({ currentElement: this.shapeElement });
-                            removeShape(this.shapeHighlightCollection);
+                            removeLegend(this.shapeHighlightCollection, treemap);
                             this.shapeHighlightCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
                                 oldOpacity: collection[index]['opacity'], oldBorderColor: collection[index]['borderColor'],
                                 oldBorderWidth: collection[index]['borderWidth']
                             });
+                            var legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
+                                : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
+                            setColor(legendText, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             setColor(this.shapeElement, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             this.target = 'highlight';
                         }
@@ -5860,6 +6029,9 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     else if (this.currentElement.length > 0 && this.currentElement[this.currentElement.length - 1]['currentElement'] !== this.shapeElement) {
                         removeSelectionWithHighlight(this.shapeHighlightCollection, this.currentElement, treemap);
                         this.highLightId = '';
+                        if (this.treemap.legendSettings.mode === 'Interactive') {
+                            this.treemap.treeMapLegendModule.removeInteractivePointer();
+                        }
                     }
                 }
                 orders = findHightLightItems(item, [], highlight.mode, treemap);
@@ -5869,6 +6041,9 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                         for (var i = 0; i < treeMapElement.childElementCount; i++) {
                             element = treeMapElement.childNodes[i];
                             process = true;
+                            var valuePath = treemap.rangeColorValuePath;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            var targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                             item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
                             for (var j = 0; j < selectionElements.length; j++) {
                                 if (element.id === selectionElements[j].id) {
@@ -5876,7 +6051,9 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                                     break;
                                 }
                             }
-                            if (orders.indexOf(item['levelOrderName']) > -1 && process) {
+                            if (orders.indexOf(item['levelOrderName']) > -1 && process &&
+                                (!isNullOrUndefined(valuePath) && valuePath !== '' ?
+                                    item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
                                 highLightElements.push(element);
                                 items.push(item);
                             }
@@ -5897,35 +6074,83 @@ 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)) {
+        else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1 || targetId.indexOf('_Legend_Text_Index') > -1) {
+            if (!isNullOrUndefined(selectionModule)) {
+                selectionModule.legendSelectId = !isNullOrUndefined(treemap.legendId[0]) ? treemap.legendId[0] : null;
+            }
+            var selectedLegendIndex = selectionModule && selectionModule.legendSelectId ?
+                parseFloat(selectionModule.legendSelectId.split('Index_')[1]) :
+                (selectionModule && selectionModule.shapeSelectId ? parseFloat(selectionModule.shapeSelectId.split('Index_')[1]) : null);
+            var targetIndex = this.treemap.legendSettings.mode === 'Default' ? (targetId.indexOf('Text') === -1 ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Text_Index_')[1]))
+                : parseFloat(targetId.split('_Legend_Index_')[1]);
+            if (this.treemap.legendSettings.visible && targetIndex !== selectedLegendIndex) {
                 var itemIndex = void 0;
                 var groupIndex = void 0;
                 var length_2;
+                var valuePath = treemap.rangeColorValuePath;
                 var targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
-                    removeLegend(this.legendHighlightCollection);
+                    removeLegend(this.legendHighlightCollection, this.treemap);
+                    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]);
-                var dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
+                var dataLength = this.treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'].length;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection = this.treemap.treeMapLegendModule.legendCollections;
-                var legendIndex = parseInt(targetId[targetId.length - 1], 10);
                 for (var i = 0; i < dataLength; i++) {
                     for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
-                        if (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][i]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName']) {
+                        if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0)
+                            ? treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'][i]['data'][valuePath] === treemap.layout.renderItems[j]['data'][valuePath]
+                            : (treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'][i]['levelOrderName'] === treemap.layout.renderItems[j]['levelOrderName'])) {
                             itemIndex = j;
                             groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
                             var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
-                            if (i === 0) {
+                            if (i === 0 || this.legendHighlightCollection.length === 0) {
                                 this.legendHighlightCollection = [];
-                                pushCollection(this.legendHighlightCollection, legendIndex, j, targetEle, nodeEle, this.treemap.layout.renderItems, collection);
+                                pushCollection(this.legendHighlightCollection, targetIndex, j, targetEle, nodeEle, this.treemap.layout.renderItems, collection);
                                 length_2 = this.legendHighlightCollection.length;
                                 this.legendHighlightCollection[length_2 - 1]['ShapeCollection'] = { Elements: [] };
                             }
                             setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            var legendItem = void 0;
+                            if (targetEle.id.indexOf('Text') > -1) {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + targetIndex);
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + targetIndex);
+                            }
+                            setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            setColor(nodeEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            length_2 = this.legendHighlightCollection.length;
+                            this.legendHighlightCollection[length_2 - 1]['ShapeCollection']['Elements'].push(nodeEle);
+                        }
+                    }
+                }
+                if (dataLength === 0 && this.treemap.palette && this.treemap.palette.length > 0) {
+                    for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
+                        if ((this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
+                            this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName']) > -1) &&
+                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
+                                targetIndex === j : true)) {
+                            itemIndex = j;
+                            groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
+                            var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
+                            pushCollection(this.legendHighlightCollection, targetIndex, j, targetEle, nodeEle, this.treemap.layout.renderItems, collection);
+                            length_2 = this.legendHighlightCollection.length;
+                            this.legendHighlightCollection[length_2 - 1]['ShapeCollection'] = { Elements: [] };
+                            var legendItem = void 0;
+                            if (targetEle.id.indexOf('Text') > -1) {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + targetIndex);
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + targetIndex);
+                            }
+                            setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             setColor(nodeEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             length_2 = this.legendHighlightCollection.length;
                             this.legendHighlightCollection[length_2 - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -5944,13 +6169,13 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                 if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
                     if (selectionModule ? this.shapeElement !== selectionModule.shapeElement :  selectionModule ?
                         selectionModule.legendSelect : true) {
-                        removeShape(this.shapeHighlightCollection);
+                        removeLegend(this.shapeHighlightCollection, treemap);
                         this.shapeHighlightCollection = [];
                     }
                 }
             }
             if (this.shapeTarget === 'highlight' && this.treemap.legendSettings.visible) {
-                removeLegend(this.legendHighlightCollection);
+                removeLegend(this.legendHighlightCollection, this.treemap);
             }
             this.highLightId = '';
             processHighlight = false;
@@ -6028,7 +6253,6 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
         var targetEle = e.target;
         var eventArgs;
         var treemap = this.treemap;
-        treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var items = [];
         var targetId = targetEle.id;
@@ -6042,11 +6266,18 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
         var selection = treemap.selectionSettings;
         var highlightModule = this.treemap.treeMapHighlightModule;
         var layoutID = treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout';
-        if (targetId.indexOf('_Item_Index') > -1) {
+        item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
+        var isDrillItem = (item && !item.isLeafItem && treemap.enableDrillDown) &&
+            (targetEle.nextSibling.textContent.indexOf('[+]') > -1 || targetEle.nextSibling.textContent.indexOf('[-]') > -1);
+        if (targetId.indexOf('_Item_Index') > -1 && !isDrillItem) {
             e.preventDefault();
-            if (this.treemap.selectionId !== targetId && this.legendSelect) {
+            if (this.treemap.selectionId !== targetId) {
+                treemap.levelSelection = [];
+                treemap.legendId = [];
+                this.shapeSelectId = '';
+                removeLegend(this.legendSelectionCollection, treemap);
+                this.legendSelectionCollection = [];
                 treeMapElement = document.getElementById(layoutID);
-                item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                 var index = void 0;
                 if (this.treemap.legendSettings.visible) {
                     this.shapeSelect = false;
@@ -6054,12 +6285,15 @@ 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);
+                    removeLegend(this.shapeSelectionCollection, treemap);
                     if (highlightModule) {
                         highlightModule.shapeTarget = 'selection';
                         highlightModule.shapeHighlightCollection = [];
                     }
-                    index = getLegendIndex(length_3, item, treemap);
+                    index = (!treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
+                        treemap.leafItemSettings.colorMapping.length === 0
+                        && treemap.levels.length === 0) ?
+                        parseFloat(targetId.split('_Item_Index_')[1]) : getLegendIndex(length_3, item, 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) {
                         this.shapeSelectId = this.shapeElement.getAttribute('id');
@@ -6067,16 +6301,28 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                             oldOpacity: collection[index]['opacity'], oldBorderColor: collection[index]['borderColor'],
                             oldBorderWidth: collection[index]['borderWidth']
                         });
+                        var legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
+                            : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
+                        setColor(legendText, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                         setColor(this.shapeElement, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                        treemap.legendId.push(this.shapeElement.id);
+                        treemap.legendId.push(legendText.id);
                     }
                 }
                 orders = findHightLightItems(item, [], selection.mode, treemap);
                 for (var i = 0; i < treeMapElement.childElementCount; i++) {
                     element = treeMapElement.childNodes[i];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                     item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
-                    if (orders.indexOf(item['levelOrderName']) > -1) {
+                    var valuePath = treemap.rangeColorValuePath;
+                    if (orders.indexOf(item['levelOrderName']) > -1 &&
+                        (!isNullOrUndefined(valuePath) && valuePath !== '' ?
+                            item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
                         selectionElements.push(element);
-                        treemap.levelSelection.push(element.id);
+                        if (targetId.indexOf('_RectPath') > -1) {
+                            treemap.levelSelection.push(targetId);
+                        }
                         items.push(item);
                     }
                 }
@@ -6108,46 +6354,125 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                removeShape(this.shapeSelectionCollection);
+                removeLegend(this.shapeSelectionCollection, treemap);
+                this.treemap.legendId = [];
                 this.shapeSelectionCollection = [];
                 this.shapeElement = undefined;
                 this.shapeSelect = true;
                 this.shapeSelectId = '';
-                this.treemap.legendId = [];
-                removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
-                this.treemap.selectionId = '';
+                this.treemap.levelSelection = [];
+                if (this.legendSelect) {
+                    removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
+                    this.treemap.selectionId = '';
+                }
             }
         }
-        else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1) {
+        else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1 || targetId.indexOf('_Legend_Text_') > -1) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var collection = this.treemap.treeMapLegendModule.legendCollections;
-            if (this.treemap.legendSettings.visible && this.legendSelectId !== targetId && this.shapeSelect) {
+            var legendSelectIdIndex = !isNullOrUndefined(this.legendSelectId) ? parseFloat(this.legendSelectId.split('_Index_')[1]) : null;
+            if (this.treemap.legendSettings.visible && (legendSelectIdIndex !== parseFloat(targetId.split('_Index_')[1]))) {
                 var itemIndex = void 0;
                 var groupIndex = void 0;
                 var length_4;
+                treemap.legendId = [];
+                treemap.levelSelection = [];
                 this.legendSelectId = targetId;
                 this.legendSelect = false;
-                var legendIndex = parseInt(targetId[targetId.length - 1], 10);
+                var legendIndex = !isNaN(parseInt(targetId[targetId.length - 1], 10)) ?
+                    parseInt(targetId[targetId.length - 1], 10) :
+                    parseInt(targetId[targetId.length - 6], 10);
                 var targetEle_1 = document.getElementById(targetId);
-                removeLegend(this.legendSelectionCollection);
+                removeLegend(this.legendSelectionCollection, treemap);
+                removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
+                removeLegend(this.shapeSelectionCollection, treemap);
+                this.legendSelectionCollection = [];
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'selection';
+                    highlightModule.legendHighlightCollection = [];
                 }
-                var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
+                var valuePath = treemap.rangeColorValuePath;
+                var index = this.treemap.legendSettings.mode === 'Default' ? (targetId.indexOf('Text') === -1 ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Text_Index_')[1]))
+                    : parseFloat(targetId.split('_Legend_Index_')[1]);
                 var dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
                 for (var k = 0; k < dataLength; k++) {
                     for (var l = 0; l < this.treemap.layout.renderItems.length; l++) {
-                        if (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['levelOrderName'] === this.treemap.layout.renderItems[l]['levelOrderName']) {
+                        if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0) ?
+                            (treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['data'][valuePath] === treemap.layout.renderItems[l]['data'][valuePath])
+                            : (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['levelOrderName'] === this.treemap.layout.renderItems[l]['levelOrderName'])) {
                             itemIndex = l;
                             groupIndex = this.treemap.layout.renderItems[l]['groupIndex'];
                             var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
-                            if (k === 0) {
+                            this.treemap.selectionId = nodeEle.id;
+                            if (k === 0 || this.legendSelectionCollection.length === 0) {
                                 pushCollection(this.legendSelectionCollection, legendIndex, l, targetEle_1, nodeEle, this.treemap.layout.renderItems, collection);
                                 length_4 = this.legendSelectionCollection.length;
                                 this.legendSelectionCollection[length_4 - 1]['ShapeCollection'] = { Elements: [] };
                             }
+                            this.treemap.selectionId = nodeEle.id;
+                            var legendItem = void 0;
+                            if (targetEle_1.id.indexOf('Text') > -1) {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index);
+                                this.legendSelectId = legendItem.id;
+                                this.shapeElement = legendItem;
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                this.shapeElement = targetEle_1;
+                            }
+                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                            setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                            setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                            length_4 = this.legendSelectionCollection.length;
+                            treemap.levelSelection.push(nodeEle.id);
+                            if (treemap.legendId.indexOf(targetEle_1.id) === -1) {
+                                treemap.legendId.push(targetEle_1.id);
+                            }
+                            if (treemap.legendId.indexOf(legendItem.id) === -1) {
+                                treemap.legendId.push(legendItem.id);
+                            }
+                            this.legendSelectionCollection[length_4 - 1]['ShapeCollection']['Elements'].push(nodeEle);
+                        }
+                    }
+                }
+                if (dataLength === 0 && this.treemap.palette && this.treemap.palette.length > 0) {
+                    for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
+                        if ((this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
+                            this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName']) > -1) &&
+                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
+                                index === j : true)) {
+                            itemIndex = j;
+                            groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
+                            var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
+                            pushCollection(this.legendSelectionCollection, index, j, targetEle_1, nodeEle, this.treemap.layout.renderItems, collection);
+                            this.treemap.selectionId = nodeEle.id;
+                            length_4 = this.legendSelectionCollection.length;
+                            this.legendSelectionCollection[length_4 - 1]['ShapeCollection'] = { Elements: [] };
+                            var legendItem = void 0;
+                            if (targetEle_1.id.indexOf('Text') > -1) {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index);
+                                this.legendSelectId = legendItem.id;
+                                this.shapeElement = legendItem;
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                this.legendSelectId = targetId;
+                                this.shapeElement = targetEle_1;
+                            }
+                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                            treemap.levelSelection.push(nodeEle.id);
+                            if (treemap.legendId.indexOf(legendItem.id) === -1) {
+                                treemap.legendId.push(legendItem.id);
+                            }
+                            if (treemap.legendId.indexOf(targetEle_1.id) === -1) {
+                                treemap.legendId.push(targetEle_1.id);
+                            }
                             length_4 = this.legendSelectionCollection.length;
                             this.legendSelectionCollection[length_4 - 1]['ShapeCollection']['Elements'].push(nodeEle);
                         }
@@ -6155,14 +6480,25 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                removeLegend(this.legendSelectionCollection);
+                removeLegend(this.legendSelectionCollection, this.treemap);
+                this.legendSelectionCollection = [];
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'highlight';
                 }
                 this.legendSelect = true;
                 this.legendSelectId = '';
+                this.treemap.legendId = [];
+                this.treemap.levelSelection = [];
             }
         }
+        else if (isDrillItem) {
+            removeLegend(this.legendSelectionCollection, this.treemap);
+            this.legendSelectionCollection = [];
+            this.legendSelect = true;
+            this.legendSelectId = '';
+            this.treemap.legendId = [];
+            this.treemap.levelSelection = [];
+        }
     };
     /**
      * @param {string} levelOrder - Specifies the level order of treemap item
@@ -6393,6 +6729,11 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
                     width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
                     color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
                 };
+                if (this.treemap.enableHtmlSanitizer) {
+                    for (var a = 0; a < tooltipContent.length; a++) {
+                        tooltipContent[a] = SanitizeHtmlHelper.sanitize(tooltipContent[a]);
+                    }
+                }
                 tootipArgs = {
                     cancel: false, name: tooltipRendering, item: item,
                     options: {