@syncfusion/ej2-treemap 27.2.2 → 28.1.33

package/src/treemap/user-interaction/highlight-selection.js

@@ -1,4 +1,4 @@
-import { Browser } from '@syncfusion/ej2-base';
+import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { itemHighlight, itemSelected } from '../model/constants';
 import { findHightLightItems, removeClassNames, applyOptions, removeShape, removeLegend, removeSelectionWithHighlight, setColor, getLegendIndex, pushCollection, setItemTemplateContent } from '../utils/helper';
 /**
@@ -40,7 +40,21 @@ var TreeMapHighlight = /** @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');
@@ -50,16 +64,22 @@ var TreeMapHighlight = /** @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';
                         }
@@ -71,6 +91,9 @@ var TreeMapHighlight = /** @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);
@@ -80,6 +103,9 @@ var TreeMapHighlight = /** @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) {
@@ -87,7 +113,9 @@ var TreeMapHighlight = /** @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);
                             }
@@ -108,35 +136,83 @@ var TreeMapHighlight = /** @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);
@@ -155,13 +231,13 @@ var TreeMapHighlight = /** @class */ (function () {
                 if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
                     if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ?
                         selectionModule.legendSelect : true) {
-                        removeShape(this.shapeHighlightCollection);
+                        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;
@@ -240,7 +316,6 @@ var TreeMapSelection = /** @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;
@@ -254,11 +329,18 @@ var TreeMapSelection = /** @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;
@@ -266,12 +348,15 @@ var TreeMapSelection = /** @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');
@@ -279,16 +364,28 @@ var TreeMapSelection = /** @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);
                     }
                 }
@@ -320,46 +417,125 @@ var TreeMapSelection = /** @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);
                         }
@@ -367,14 +543,25 @@ var TreeMapSelection = /** @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

package/src/treemap/user-interaction/tooltip.js

@@ -8,7 +8,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Tooltip } from '@syncfusion/ej2-svg-base';
-import { Browser, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Browser, createElement, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { getMousePosition, textFormatter, formatValue } from '../utils/helper';
 import { tooltipRendering } from '../model/constants';
 /**
@@ -93,6 +93,11 @@ var TreeMapTooltip = /** @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: {

package/src/treemap/utils/enum.d.ts

@@ -194,6 +194,10 @@ export declare type TreeMapTheme =
 'Tailwind' | 
 /**  Render a treemap with TailwindDark theme. */
 'TailwindDark' | 
+/**  Render a treemap with Tailwind3 theme. */
+'Tailwind3' | 
+/**  Render a treemap with Tailwind3Dark theme. */
+'Tailwind3Dark' | 
 /** Render a treemap with Bootstrap5 theme. */
 'Bootstrap5' | 
 /**  Render a treemap with Bootstrap5 dark theme. */

package/src/treemap/utils/helper.d.ts

@@ -481,10 +481,11 @@ export declare function removeShape(collection: any[]): void;
 /**
  *
  * @param {any[]} collection - Specifies the legend collection.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
  * @returns {void}
  * @private
  */
-export declare function removeLegend(collection: any[]): void;
+export declare function removeLegend(collection: any[], treeMap: TreeMap): void;
 /**
  *
  * @param {Element} element - Specifies the selected element.

package/src/treemap/utils/helper.js

@@ -889,7 +889,8 @@ export 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], {
@@ -914,13 +915,25 @@ export 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);
                 }
             }
         }
@@ -956,6 +969,9 @@ export 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']);
 }
@@ -1207,17 +1223,35 @@ export function removeShape(collection) {
 /**
  *
  * @param {any[]} collection - Specifies the legend collection.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
  * @returns {void}
  * @private
  */
-export function removeLegend(collection) {
+export 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']);
+                }
             }
         }
     }
@@ -1245,7 +1279,7 @@ export function setColor(element, fill, opacity, borderColor, borderWidth) {
  * @returns {void}
  */
 export function removeSelectionWithHighlight(collection, element, treemap) {
-    removeShape(collection);
+    removeLegend(collection, treemap);
     element = [];
     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
 }
@@ -1258,10 +1292,24 @@ export function removeSelectionWithHighlight(collection, element, treemap) {
  */
 export 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;
             }