@syncfusion/ej2-treemap 27.2.2 → 28.1.39

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

@@ -1082,10 +1082,12 @@ function colorMap(colorMapping, equalValue, value) {
     for (let i = 0; i < colorMapping.length; i++) {
         let isEqualColor = false;
         const dataValue = value;
+        const 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];
@@ -1098,8 +1100,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]') {
@@ -1111,7 +1113,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);
@@ -1386,7 +1388,8 @@ function maintainSelection(treemap, element, className) {
     const elementId = treemap.levelSelection;
     if (elementId) {
         for (let 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], {
@@ -1411,13 +1414,25 @@ 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]) {
-                    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);
+            if (treemap.legendSettings.mode === 'Interactive') {
+                for (let 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])) {
+                        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);
+                    }
+                }
+            }
+            else {
+                const 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);
                 }
             }
         }
@@ -1453,6 +1468,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']);
 }
@@ -1699,17 +1717,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 (let j = 0; j < collection.length; j++) {
             const item = collection[j];
-            setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
-            const dataCount = item['ShapeCollection']['Elements'].length;
+            const legendIndex = parseFloat(item['legendEle'].id.split('_Index_')[1]);
+            const isText = item['legendEle'].id.indexOf('Text') > -1;
+            const shapeId = isText ? item['legendEle'].id.replace('_Text', '') : item['legendEle'].id;
+            const legendShape = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId)
+                : document.getElementById(treeMap.element.id + '_Legend_Shape_Index_' + legendIndex);
+            const 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']);
+            }
+            const dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
             for (let k = 0; k < dataCount; k++) {
-                setColor(item['ShapeCollection']['Elements'][k], item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                const shapeElement = document.getElementById(item['ShapeCollection']['Elements'][k].id);
+                if (!isNullOrUndefined(shapeElement)) {
+                    setColor(shapeElement, item['shapeOldFill'], item['shapeOldOpacity'], item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                }
             }
         }
     }
@@ -1737,7 +1773,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);
 }
 /**
@@ -1749,10 +1785,24 @@ function removeSelectionWithHighlight(collection, element, treemap) {
  */
 function getLegendIndex(length, item, treemap) {
     let index;
+    const valuePath = treemap.rangeColorValuePath;
     for (let i = 0; i < length; i++) {
         const dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
-        for (let j = 0; j < dataLength; j++) {
-            if (treemap.treeMapLegendModule.legendCollections[i]['legendData'][j]['levelOrderName'] === item['levelOrderName']) {
+        if (dataLength > 0) {
+            for (let 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;
             }
@@ -2283,7 +2333,8 @@ class LayoutPanel {
             groupId = elementID + '_Level_Index_' + index + '_Item_Index_' + i;
             itemGroup = this.renderer.createGroup({ id: groupId + '_Group' });
             gap = (isLeafItem ? leaf.gap : levels[index].groupGap) / 2;
-            const treemapItemRect = this.treemap.totalRect ? convertToContainer(this.treemap.totalRect) : this.treemap.areaRect;
+            const treemapItemRect = this.treemap.totalRect ? (treeMap.legendSettings.visible ? this.treemap.totalRect
+                : convertToContainer(this.treemap.totalRect)) : this.treemap.areaRect;
             if (treeMap.layoutType === 'Squarified') {
                 rect.width = Math.abs(rect.x - rect.width) - gap;
                 rect.height = Math.abs(rect.y - rect.height) - gap;
@@ -2326,6 +2377,9 @@ class LayoutPanel {
             renderText = !isLeafItem && childItems && childItems.length > 0 && this.treemap.enableDrillDown ?
                 !item['isDrilled'] ? treeMap.enableRtl ? renderText + ' [+]' : '[+] ' + renderText :
                     treeMap.enableRtl ? renderText + ' [-]' : '[-] ' + renderText : renderText;
+            if (treeMap.enableHtmlSanitizer) {
+                renderText = SanitizeHtmlHelper.sanitize(renderText);
+            }
             let fontFamily = (isLeafItem ? leaf.labelStyle.fontFamily : levels[index].headerStyle.fontFamily);
             fontFamily = fontFamily || this.treemap.themeStyle.labelFontFamily;
             let size = (isLeafItem ? leaf.labelStyle.size : levels[index].headerStyle.size);
@@ -2390,6 +2444,7 @@ class LayoutPanel {
             secondaryEle.appendChild(templateGroup);
         }
         this.treemap.svgObject.appendChild(this.layoutGroup);
+        maintainSelection(this.treemap, this.layoutGroup, 'treeMapSelection');
     }
     renderItemText(text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
         const padding = 5;
@@ -2479,7 +2534,8 @@ class LayoutPanel {
             for (let 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';
                 }
             }
@@ -2512,6 +2568,9 @@ class LayoutPanel {
                 template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
+        if (this.treemap.enableHtmlSanitizer && typeof template === 'string') {
+            template = SanitizeHtmlHelper.sanitize(template);
+        }
         let labelElement;
         if (!isNullOrUndefined(document.getElementById(this.treemap.element.id + '_Secondary_Element'))) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2637,9 +2696,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
             };
@@ -2716,6 +2775,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',
@@ -2947,9 +3054,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
             };
@@ -3024,12 +3131,12 @@ class Print {
                 backgroundElement = backgroundElement.childNodes[0];
                 if (!isNullOrUndefined(backgroundElement)) {
                     const 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)');
@@ -3097,12 +3204,12 @@ class ImageExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const 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)');
@@ -3199,12 +3306,12 @@ class PdfExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const 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)');
@@ -3368,6 +3475,9 @@ let TreeMap = class TreeMap extends Component {
         }
         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;
@@ -3463,14 +3573,15 @@ let TreeMap = class TreeMap extends Component {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
             }
-            const trimmedTitle = textTrim(width, title.text, style);
+            const titleText = this.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(title.text)) : title.text;
+            const trimmedTitle = textTrim(width, titleText, style);
             const elementSize = measureText(trimmedTitle, style);
             const rect = (isNullOrUndefined(bounds)) ? new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
             const location = findPosition(rect, title.alignment, elementSize, type);
             const options = new TextOption(this.element.id + '_TreeMap_' + type, location.x, location.y, 'start', trimmedTitle);
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const 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')) {
@@ -4246,7 +4357,7 @@ let TreeMap = class TreeMap extends Component {
         }
         removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
         if (this.treeMapHighlightModule) {
-            removeShape(this.treeMapHighlightModule.shapeHighlightCollection);
+            removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
             this.treeMapHighlightModule.highLightId = '';
         }
     }
@@ -4494,6 +4605,9 @@ __decorate$1([
 __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);
@@ -4663,7 +4777,7 @@ class TreeMapLegend {
             const defaultSize = 25;
             const textPadding = 10;
             const position = legend.position;
-            const legendTitle = legend.title.text;
+            const legendTitle = treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(legend.title.text) : legend.title.text;
             const titleTextStyle = legend.titleStyle;
             const legendMode = legend.mode;
             let shapeX = 0;
@@ -4705,7 +4819,8 @@ class TreeMapLegend {
                     if (isNullOrUndefined(this.totalPages[this.page])) {
                         this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
                     }
-                    const legendTextSize = measureText(legendItem['legendName'], itemTextStyle);
+                    const legendTextSize = measureText(treemap.enableHtmlSanitizer ?
+                        SanitizeHtmlHelper.sanitize(legendItem['legendName']) : legendItem['legendName'], itemTextStyle);
                     this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
                     if (i === 0) {
                         startX = shapeX = (leftPadding + (shapeWidth / 2));
@@ -4913,7 +5028,16 @@ class TreeMapLegend {
         if (this.treemap.enableDrillDown && !isNullOrUndefined(this.treemap.drilledLegendItems)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const childElement = this.treemap.drilledLegendItems;
-            legendFillColor = childElement['data']['options']['fill'];
+            if (!isNullOrUndefined(childElement['data']['options'])) {
+                legendFillColor = childElement['data']['options']['fill'];
+            }
+            else {
+                for (let 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'];
             }
@@ -4943,7 +5067,8 @@ class TreeMapLegend {
                                 ? 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']
                         });
                     }
                 }
@@ -5069,7 +5194,7 @@ class TreeMapLegend {
                     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]);
@@ -5087,14 +5212,19 @@ class TreeMapLegend {
                         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 (let 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;
+                            }
+                        }
                     }
                 }
             }
@@ -5183,7 +5313,8 @@ class TreeMapLegend {
                             - this.translate.x - Math.abs(this.legendBorderRect.x - textLocation.x);
                     }
                 }
-                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
+                const 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));
             }
@@ -5232,7 +5363,7 @@ class TreeMapLegend {
             for (let i = 0; i < this.totalPages[page]['Collection'].length; i++) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
-                const legendText = collection['DisplayText'];
+                const legendText = this.treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(collection['DisplayText']) : collection['DisplayText'];
                 const legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
@@ -5336,7 +5467,7 @@ class TreeMapLegend {
     renderLegendTitle() {
         const legend = this.treemap.legendSettings;
         const textStyle = legend.titleStyle;
-        const legendTitle = legend.title.text;
+        const legendTitle = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(legend.title.text)) : legend.title.text;
         let textOptions;
         const spacing = 10;
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -5360,6 +5491,7 @@ class TreeMapLegend {
         const treemap = this.treemap;
         let target = e.target;
         const interactiveId = treemap.element.id + '_Interactive_Legend';
+        let 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
@@ -5377,7 +5509,7 @@ class TreeMapLegend {
             let legendElement;
             targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_Item_Index_')[1])];
             const svgRect = treemap.svgObject.getBoundingClientRect();
-            for (let i = 0; i < this.legendCollections.length; i++) {
+            for (let i = 0; i < this.legendCollections.length && !pointerDrawn; i++) {
                 currentData = this.legendCollections[i];
                 legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
                 legendRect = legendElement.getBoundingClientRect();
@@ -5385,16 +5517,33 @@ class TreeMapLegend {
                 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 (let j = 0; j < data.length; j++) {
-                        if (data[j]['levelOrderName'] === targetItem['levelOrderName']) {
-                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
-                            break;
+                    const valuePath = treemap.rangeColorValuePath;
+                    if (targetItem['levelOrderName'].indexOf(this.legendCollections[i]['legendName']) > -1) {
+                        this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                        pointerDrawn = true;
+                    }
+                    else {
+                        for (let 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 {
@@ -5683,7 +5832,21 @@ class TreeMapHighlight {
         let element;
         let orders;
         const selectionModule = this.treemap.treeMapSelectionModule;
-        if (targetId.indexOf('_Item_Index') > -1 && (selectionModule ? this.treemap.selectionId !== targetId : true)) {
+        let shapeSelected = false;
+        if (selectionModule && selectionModule.legendSelectionCollection.length > 0) {
+            for (let i = 0; i < selectionModule.legendSelectionCollection.length; i++) {
+                for (let j = 0; j < selectionModule.legendSelectionCollection[i]['ShapeCollection']['Elements'].length; j++) {
+                    const selectedElementIndex = parseFloat(selectionModule.legendSelectionCollection[i]['ShapeCollection']['Elements'][j].id.split('Item_Index_')[1].split('_')[0]);
+                    const 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');
                 const selectionElements = document.getElementsByClassName('treeMapSelection');
@@ -5693,16 +5856,22 @@ class TreeMapHighlight {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const collection = this.treemap.treeMapLegendModule.legendCollections;
                     const length = this.treemap.treeMapLegendModule.legendCollections.length;
-                    index = getLegendIndex(length, 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, 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) {
+                        const 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']
                             });
+                            const 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';
                         }
@@ -5714,6 +5883,9 @@ class TreeMapHighlight {
                     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);
@@ -5723,6 +5895,9 @@ class TreeMapHighlight {
                         for (let i = 0; i < treeMapElement.childElementCount; i++) {
                             element = treeMapElement.childNodes[i];
                             process = true;
+                            const valuePath = treemap.rangeColorValuePath;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                             item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
                             for (let j = 0; j < selectionElements.length; j++) {
                                 if (element.id === selectionElements[j].id) {
@@ -5730,7 +5905,9 @@ class TreeMapHighlight {
                                     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);
                             }
@@ -5751,35 +5928,83 @@ 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)) {
+        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;
+            }
+            const selectedLegendIndex = selectionModule && selectionModule.legendSelectId ?
+                parseFloat(selectionModule.legendSelectId.split('Index_')[1]) :
+                (selectionModule && selectionModule.shapeSelectId ? parseFloat(selectionModule.shapeSelectId.split('Index_')[1]) : null);
+            const 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) {
                 let itemIndex;
                 let groupIndex;
                 let length;
+                const valuePath = treemap.rangeColorValuePath;
                 const targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
-                    removeLegend(this.legendHighlightCollection);
+                    removeLegend(this.legendHighlightCollection, this.treemap);
+                    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]);
-                const dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
+                const dataLength = this.treemap.treeMapLegendModule.legendCollections[targetIndex]['legendData'].length;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.treemap.treeMapLegendModule.legendCollections;
-                const legendIndex = parseInt(targetId[targetId.length - 1], 10);
                 for (let i = 0; i < dataLength; i++) {
                     for (let 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'];
                             const 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 = this.legendHighlightCollection.length;
                                 this.legendHighlightCollection[length - 1]['ShapeCollection'] = { Elements: [] };
                             }
                             setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            let legendItem;
+                            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 = this.legendHighlightCollection.length;
+                            this.legendHighlightCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
+                        }
+                    }
+                }
+                if (dataLength === 0 && this.treemap.palette && this.treemap.palette.length > 0) {
+                    for (let 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'];
+                            const 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 = this.legendHighlightCollection.length;
+                            this.legendHighlightCollection[length - 1]['ShapeCollection'] = { Elements: [] };
+                            let legendItem;
+                            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 = this.legendHighlightCollection.length;
                             this.legendHighlightCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -5798,13 +6023,13 @@ class TreeMapHighlight {
                 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;
@@ -5881,7 +6106,6 @@ class TreeMapSelection {
         const targetEle = e.target;
         let eventArgs;
         const treemap = this.treemap;
-        treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const items = [];
         const targetId = targetEle.id;
@@ -5895,11 +6119,18 @@ class TreeMapSelection {
         const selection = treemap.selectionSettings;
         const highlightModule = this.treemap.treeMapHighlightModule;
         const layoutID = treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout';
-        if (targetId.indexOf('_Item_Index') > -1) {
+        item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
+        const 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])];
                 let index;
                 if (this.treemap.legendSettings.visible) {
                     this.shapeSelect = false;
@@ -5907,12 +6138,15 @@ class TreeMapSelection {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const 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, 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, 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');
@@ -5920,16 +6154,28 @@ class TreeMapSelection {
                             oldOpacity: collection[index]['opacity'], oldBorderColor: collection[index]['borderColor'],
                             oldBorderWidth: collection[index]['borderWidth']
                         });
+                        const 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 (let i = 0; i < treeMapElement.childElementCount; i++) {
                     element = treeMapElement.childNodes[i];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const 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) {
+                    const 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);
                     }
                 }
@@ -5961,61 +6207,151 @@ class TreeMapSelection {
                 }
             }
             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
             const collection = this.treemap.treeMapLegendModule.legendCollections;
-            if (this.treemap.legendSettings.visible && this.legendSelectId !== targetId && this.shapeSelect) {
+            const legendSelectIdIndex = !isNullOrUndefined(this.legendSelectId) ? parseFloat(this.legendSelectId.split('_Index_')[1]) : null;
+            if (this.treemap.legendSettings.visible && (legendSelectIdIndex !== parseFloat(targetId.split('_Index_')[1]))) {
                 let itemIndex;
                 let groupIndex;
                 let length;
+                treemap.legendId = [];
+                treemap.levelSelection = [];
                 this.legendSelectId = targetId;
                 this.legendSelect = false;
-                const legendIndex = parseInt(targetId[targetId.length - 1], 10);
+                const legendIndex = !isNaN(parseInt(targetId[targetId.length - 1], 10)) ?
+                    parseInt(targetId[targetId.length - 1], 10) :
+                    parseInt(targetId[targetId.length - 6], 10);
                 const targetEle = 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 = [];
                 }
-                const index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
+                const valuePath = treemap.rangeColorValuePath;
+                const 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]);
                 const dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
                 for (let k = 0; k < dataLength; k++) {
                     for (let 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'];
                             const 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, nodeEle, this.treemap.layout.renderItems, collection);
                                 length = this.legendSelectionCollection.length;
                                 this.legendSelectionCollection[length - 1]['ShapeCollection'] = { Elements: [] };
                             }
+                            this.treemap.selectionId = nodeEle.id;
+                            let legendItem;
+                            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_' + index);
+                                this.legendSelectId = legendItem.id;
+                                this.shapeElement = legendItem;
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                this.shapeElement = targetEle;
+                            }
+                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             setColor(targetEle, 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 = this.legendSelectionCollection.length;
+                            treemap.levelSelection.push(nodeEle.id);
+                            if (treemap.legendId.indexOf(targetEle.id) === -1) {
+                                treemap.legendId.push(targetEle.id);
+                            }
+                            if (treemap.legendId.indexOf(legendItem.id) === -1) {
+                                treemap.legendId.push(legendItem.id);
+                            }
+                            this.legendSelectionCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
+                        }
+                    }
+                }
+                if (dataLength === 0 && this.treemap.palette && this.treemap.palette.length > 0) {
+                    for (let 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'];
+                            const nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
+                            pushCollection(this.legendSelectionCollection, index, j, targetEle, nodeEle, this.treemap.layout.renderItems, collection);
+                            this.treemap.selectionId = nodeEle.id;
+                            length = this.legendSelectionCollection.length;
+                            this.legendSelectionCollection[length - 1]['ShapeCollection'] = { Elements: [] };
+                            let legendItem;
+                            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_' + index);
+                                this.legendSelectId = legendItem.id;
+                                this.shapeElement = legendItem;
+                            }
+                            else {
+                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
+                                    : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                this.legendSelectId = targetId;
+                                this.shapeElement = targetEle;
+                            }
+                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                            setColor(targetEle, 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.id) === -1) {
+                                treemap.legendId.push(targetEle.id);
+                            }
+                            length = this.legendSelectionCollection.length;
                             this.legendSelectionCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
                         }
                     }
                 }
             }
             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
@@ -6244,6 +6580,11 @@ class TreeMapTooltip {
                     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 (let a = 0; a < tooltipContent.length; a++) {
+                        tooltipContent[a] = SanitizeHtmlHelper.sanitize(tooltipContent[a]);
+                    }
+                }
                 tootipArgs = {
                     cancel: false, name: tooltipRendering, item: item,
                     options: {