@syncfusion/ej2-treemap 28.2.3 → 29.1.33

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

@@ -1173,12 +1173,10 @@ function colorMap(colorMapping, equalValue, value) {
     for (var i = 0; i < colorMapping.length; i++) {
         var isEqualColor = false;
         var dataValue = value;
-        var colorMappingValue = colorMapping[i].value ? colorMapping[i].value.toString() :
-            colorMapping[i].value;
         if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
             && !isNullOrUndefined(colorMapping[i].value)) {
             if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
-                (colorMappingValue === equalValue)) {
+                (colorMapping[i].value === equalValue)) {
                 isEqualColor = true;
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
                     fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -1191,8 +1189,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)
-                || (colorMappingValue === equalValue)) {
-                if (colorMappingValue === equalValue) {
+                || (colorMapping[i].value === equalValue)) {
+                if (colorMapping[i].value === equalValue) {
                     isEqualColor = true;
                 }
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
@@ -1204,7 +1202,7 @@ function colorMap(colorMapping, equalValue, value) {
             }
         }
         if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
-            || (colorMappingValue === equalValue))
+            || (colorMapping[i].value === equalValue))
             && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
             && fill) {
             opacity = deSaturationColor(colorMapping[i], value);
@@ -1481,7 +1479,7 @@ function maintainSelection(treemap, element, className) {
         for (var index = 0; index < elementId.length; index++) {
             if (element.getAttribute('id') === elementId[index] ||
                 element.children[0].id === elementId[index]) {
-                if (element.childElementCount > 0) {
+                if (element.childElementCount > 0 && element.children[0].id.indexOf('_Group') === -1) {
                     element.children[0].setAttribute('class', className);
                     applyOptions(element.childNodes[0], {
                         border: treemap.selectionSettings.border, fill: treemap.selectionSettings.fill,
@@ -1511,9 +1509,15 @@ function legendMaintain(treemap, legendGroup) {
                         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);
+                        if (treemapSVGRectElement.id.indexOf('Text') === -1) {
+                            treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                            treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
+                        }
+                        else {
+                            treemapSVGRectElement.setAttribute('stroke', null);
+                            treemapSVGRectElement.setAttribute('stroke-width', null);
+                        }
                     }
                 }
             }
@@ -1521,9 +1525,15 @@ function legendMaintain(treemap, legendGroup) {
                 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);
+                    if (legendItem.id.indexOf('Text') === -1) {
+                        legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
+                        legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                    }
+                    else {
+                        legendItem.setAttribute('stroke', null);
+                        legendItem.setAttribute('stroke-width', null);
+                    }
                 }
             }
         }
@@ -1829,10 +1839,10 @@ function removeLegend(collection, treeMap) {
                 ? 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']);
+                setColor(legendShape, item['oldFill'], item['oldOpacity'], 'none', '0px');
             }
             if (!isNullOrUndefined(legendText)) {
-                setColor(legendText, treeMap.legendSettings.textStyle.color, item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+                setColor(legendText, treeMap.legendSettings.textStyle.color || treeMap.themeStyle.legendTextColor, item['oldOpacity'], null, null);
             }
             var dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
             for (var k = 0; k < dataCount; k++) {
@@ -1856,8 +1866,12 @@ function removeLegend(collection, treeMap) {
 function setColor(element, fill, opacity, borderColor, borderWidth) {
     element.setAttribute('fill', fill);
     element.setAttribute('opacity', opacity);
-    element.setAttribute('stroke', borderColor);
-    element.setAttribute('stroke-width', borderWidth);
+    if (!isNullOrUndefined(borderColor)) {
+        element.setAttribute('stroke', borderColor);
+    }
+    if (!isNullOrUndefined(borderWidth)) {
+        element.setAttribute('stroke-width', borderWidth);
+    }
 }
 /**
  *
@@ -1879,16 +1893,18 @@ function removeSelectionWithHighlight(collection, element, treemap) {
  */
 function getLegendIndex(length, item, treemap) {
     var index;
-    var valuePath = treemap.rangeColorValuePath;
-    for (var i = 0; i < length; i++) {
+    var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
+    var indexFound = false;
+    for (var i = 0; i < length && !indexFound; i++) {
         var dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
         if (dataLength > 0) {
             for (var j = 0; j < dataLength; j++) {
-                if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0 ?
+                if ((!isNullOrUndefined(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;
+                    indexFound = true;
                     break;
                 }
             }
@@ -2520,10 +2536,11 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                         }
                     }
                     itemGroup.setAttribute('aria-label', item['name']);
-                    if ((_this.treemap.enableDrillDown && isLeafItem) || (_this.treemap.selectionSettings.enable ||
+                    if ((_this.treemap.enableDrillDown && !isLeafItem) || (_this.treemap.selectionSettings.enable ||
                         _this.treemap.highlightSettings.enable)) {
                         itemGroup.setAttribute('role', 'button');
                         itemGroup.setAttribute('tabindex', _this.treemap.tabIndex.toString());
+                        itemGroup.style.outline = 'none';
                         itemGroup.style.cursor = _this.treemap.highlightSettings.enable && !_this.treemap.selectionSettings.enable && (_this.treemap.enableDrillDown && item['groupIndex'] === (_this.treemap.levels.length - 1)) ? 'default' :
                             _this.treemap.highlightSettings.enable && !_this.treemap.selectionSettings.enable && !_this.treemap.enableDrillDown ? 'default' : 'pointer';
                     }
@@ -4049,6 +4066,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap);
         EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap);
         EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusHandler);
         window.removeEventListener('resize', this.resizeEvent);
     };
     /**
@@ -4064,6 +4084,9 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap, this);
         EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap, this);
         EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
+        EventHandler.add(this.element, 'focusout', this.focusHandler, this);
         this.resizeEvent = this.resizeOnTreeMap.bind(this);
         window.addEventListener('resize', this.resizeEvent);
     };
@@ -4201,6 +4224,10 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
             this.mouseDown = true;
         }
+        if (e.type === 'touchstart' || e.type === 'mousedown') {
+            this.removeFocus('none');
+            e.preventDefault();
+        }
         this.notify(Browser.touchStartEvent, e);
     };
     /**
@@ -4220,6 +4247,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         this.trigger(mouseMove, moveArgs);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var childItems;
+        this.removeFocus('none');
         if (targetId.indexOf('_Item_Index') > -1) {
             item = this.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4493,6 +4521,95 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
             this.treeMapHighlightModule.highLightId = '';
         }
+        this.removeFocus('');
+    };
+    /**
+     * This method is used to perform operations when keyboard up on TreeMap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on TreeMap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.keyUpHandler = function (event) {
+        if (event.code !== 'Tab') {
+            return;
+        }
+        var id = event.target['id'];
+        var targetEle = document.getElementById(id);
+        if ((id.indexOf('Item_Index') > -1 || id.indexOf('Legend') > -1)) {
+            if (this.treeMapTooltipModule) {
+                this.treeMapTooltipModule.removeTooltip();
+            }
+            if (this.treeMapHighlightModule && this.highlightSettings.enable) {
+                targetEle.style.setProperty('outline', 'none');
+                targetEle.classList.add('keyboard-focused');
+                var highlightElement = id.indexOf('_Legend_') > -1 && this.legendSettings.mode === 'Default' ?
+                    targetEle.children[0] : targetEle;
+                this.treeMapHighlightModule.highlightOnMouseMove(highlightElement);
+            }
+            else {
+                this.removeFocus('');
+                targetEle.style.outline = '2px solid black';
+                targetEle.classList.add('keyboard-focused');
+            }
+        }
+        else {
+            removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
+            if (this.treeMapHighlightModule) {
+                removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
+            }
+            this.removeFocus('none');
+        }
+    };
+    /**
+     * This method is used to perform operations when keyboard down on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.keyDownHandler = function (event) {
+        var id = event.target['id'];
+        var targetEle = document.getElementById(id);
+        if (event.code === 'Enter') {
+            if (this.selectionSettings.enable && (id.indexOf('Item_Index') > -1 || id.indexOf('Legend') > -1)) {
+                var selectionElement = id.indexOf('_Legend_') > -1 && this.legendSettings.mode === 'Default' ?
+                    targetEle.children[0] : targetEle;
+                this.treeMapSelectionModule.selectionOnMouseDown(selectionElement);
+            }
+            if (this.enableDrillDown && targetEle.childElementCount > 0) {
+                this.mouseEndOnTreeMap(event);
+            }
+        }
+    };
+    /**
+     * This method is used to perform operations when focus out on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.focusHandler = function (event) {
+        var id = event.target['id'];
+        if (!this.element.contains(event.relatedTarget) ||
+            (id.indexOf('Item_Index') > -1 && event.relatedTarget.id.indexOf('Legend') > -1) ||
+            (id.indexOf('Legend') > -1 && event.relatedTarget.id.indexOf('Item_Index') > -1)) {
+            if (this.treeMapHighlightModule && this.highlightSettings.enable) {
+                removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
+                removeLegend(this.treeMapHighlightModule.legendHighlightCollection, this);
+                this.treeMapHighlightModule.highLightId = '';
+            }
+            else {
+                this.removeFocus('none');
+            }
+        }
+    };
+    TreeMap.prototype.removeFocus = function (outline) {
+        var highlightedElement = document.querySelector('.keyboard-focused');
+        if (highlightedElement) {
+            highlightedElement.style.outline = outline;
+            highlightedElement.classList.remove('keyboard-focused');
+        }
     };
     /**
      * This method is used to select or remove the selection of treemap item based on the provided selection settings.
@@ -5359,7 +5476,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                             legendIndex++;
                         }
                         for (var k = this.legendCollections.length - 1; k >= 0; k--) {
-                            if (this.legendCollections[k]['groupIndex'] === data[i]['groupIndex']) {
+                            if (this.legendCollections[k]['actualValue'] === (colorMap.label || 'Others')) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 this.legendCollections[k]['legendData'].push(data[i]);
                                 break;
@@ -5456,7 +5573,10 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 var text = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
                 renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                var legendElement = render.drawRectangle(rectOptions);
+                legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
+                legendElement.style.outline = '';
+                this.legendGroup.appendChild(legendElement);
             }
         }
         legendMaintain(this.treemap, this.legendGroup);
@@ -5507,6 +5627,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 var legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
+                legendElement.setAttribute('tabindex', this_1.treemap.tabIndex.toString());
+                legendElement.style.outline = 'none';
                 var shapeId = treemap.element.id + '_Legend_Shape_Index_' + i;
                 var textId = treemap.element.id + '_Legend_Text_Index_' + i;
                 var shapeLocation = collection['Shape'];
@@ -5956,16 +6078,27 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
         this.addEventListener();
     }
     /**
-     * Mouse down event in highlight
+     * Mouse Move event in highlight
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {boolean} - return the highlight process is true or false.
      * @private
      */
     TreeMapHighlight.prototype.mouseMove = function (e) {
+        var targetEle = e.target;
+        return this.highlightOnMouseMove(targetEle);
+    };
+    /**
+     * This method highlights the target element for mouse move event.
+     *
+     * @param {Element} targetElement - Specifies the target element to highlight.
+     * @returns {boolean} - return the highlight process is true or false.
+     * @private
+     */
+    TreeMapHighlight.prototype.highlightOnMouseMove = function (targetElement) {
         var treemap = this.treemap;
         var processHighlight;
-        var targetId = e.target.id;
+        var targetId = targetElement.id;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var eventArgs;
         var items = [];
@@ -5993,7 +6126,8 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
             }
         }
         if (targetId.indexOf('_Item_Index') > -1 && !shapeSelected) {
-            if (this.highLightId !== targetId) {
+            if (this.highLightId !== targetId ||
+                (this.legendHighlightCollection[0] ? this.legendHighlightCollection[0]['ShapeCollection']['Elements'].length > 1 : false)) {
                 treeMapElement = document.getElementById(treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout');
                 var selectionElements = document.getElementsByClassName('treeMapSelection');
                 item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
@@ -6005,10 +6139,16 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     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);
+                    if (isNullOrUndefined(index)) {
+                        removeLegend(this.legendHighlightCollection, treemap);
+                        removeLegend(this.shapeHighlightCollection, treemap);
+                        this.legendHighlightCollection = [];
+                        treemap.treeMapLegendModule.removeInteractivePointer();
+                    }
                     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)) {
-                        var legendShapeElement = selectionModule ? selectionModule.shapeElement : null;
-                        if (selectionModule ? this.shapeElement !== legendShapeElement : true) {
+                    if (this.shapeElement !== null) {
+                        if (selectionModule ? this.shapeElement.id !== ((selectionModule && selectionModule.shapeElement)
+                            ? selectionModule.shapeElement.id : null) : true) {
                             this.currentElement.push({ currentElement: this.shapeElement });
                             removeLegend(this.shapeHighlightCollection, treemap);
                             this.shapeHighlightCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
@@ -6017,7 +6157,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                             });
                             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(legendText, highlight.fill, highlight.opacity, null, null);
                             setColor(this.shapeElement, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             this.target = 'highlight';
                         }
@@ -6026,52 +6166,39 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                             this.highLightId = '';
                         }
                     }
-                    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);
-                if (this.treemap.legendSettings.visible ? selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true : true) {
-                    if (this.treemap.legendSettings.visible ? selectionModule ?
-                        this.shapeElement !== selectionModule.shapeElement : true : true) {
-                        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) {
-                                    process = false;
-                                    break;
-                                }
-                            }
-                            if (orders.indexOf(item['levelOrderName']) > -1 && process &&
-                                (!isNullOrUndefined(valuePath) && valuePath !== '' ?
-                                    item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
-                                highLightElements.push(element);
-                                items.push(item);
-                            }
-                        }
-                        removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
-                        for (var k = 0; k < highLightElements.length; k++) {
-                            element = highLightElements[k];
-                            applyOptions(element.childNodes[0], { border: highlight.border, fill: highlight.fill, opacity: highlight.opacity });
-                            element.classList.add('treeMapHighLight');
-                            this.highLightId = targetId;
+                for (var i = 0; i < treeMapElement.childElementCount; i++) {
+                    element = treeMapElement.childNodes[i];
+                    process = true;
+                    var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
+                    // 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 ||
+                            element.id === selectionElements[j].parentElement.id) {
+                            process = false;
+                            break;
                         }
-                        eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
-                        treemap.trigger(itemHighlight, eventArgs);
                     }
-                    else {
-                        processHighlight = false;
+                    if (orders.indexOf(item['levelOrderName']) > -1 && process &&
+                        (!isNullOrUndefined(valuePath) ?
+                            (item['data'][valuePath] === targetItem['data'][valuePath] ||
+                                (highlight.mode !== 'Item' && treemap.levels.length > 0)) : true)) {
+                        highLightElements.push(element);
+                        items.push(item);
                     }
                 }
+                removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
+                for (var k = 0; k < highLightElements.length; k++) {
+                    element = highLightElements[k];
+                    applyOptions(element.childNodes[0], { border: highlight.border, fill: highlight.fill, opacity: highlight.opacity });
+                    element.classList.add('treeMapHighLight');
+                    this.highLightId = targetId;
+                }
+                eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
+                treemap.trigger(itemHighlight, eventArgs);
             }
         }
         else if (targetId.indexOf('_Legend_Shape') > -1 || targetId.indexOf('_Legend_Index') > -1 || targetId.indexOf('_Legend_Text_Index') > -1) {
@@ -6087,7 +6214,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                 var itemIndex = void 0;
                 var groupIndex = void 0;
                 var length_2;
-                var valuePath = treemap.rangeColorValuePath;
+                var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
                 var targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
                     removeLegend(this.legendHighlightCollection, this.treemap);
@@ -6099,7 +6226,8 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                 var collection = this.treemap.treeMapLegendModule.legendCollections;
                 for (var i = 0; i < dataLength; i++) {
                     for (var j = 0; j < this.treemap.layout.renderItems.length; j++) {
-                        if ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0)
+                        if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 &&
+                            treemap.levels.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;
@@ -6111,17 +6239,20 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                                 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;
+                            var legendShape = void 0;
+                            var legendText = void 0;
                             if (targetEle.id.indexOf('Text') > -1) {
-                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
+                                legendShape = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
                                     : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + targetIndex);
+                                setColor(targetEle, highlight.fill, highlight.opacity, null, null);
+                                setColor(legendShape, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             }
                             else {
-                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
+                                legendText = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id + '_Text')
                                     : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + targetIndex);
+                                setColor(legendText, highlight.fill, highlight.opacity, null, null);
+                                setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             }
-                            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);
@@ -6132,7 +6263,8 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     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) ?
+                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
+                                !this.treemap.layout.renderItems[j].parent.isDrilled) ?
                                 targetIndex === j : true)) {
                             itemIndex = j;
                             groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
@@ -6144,13 +6276,15 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                             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);
+                                setColor(targetEle, highlight.fill, highlight.opacity, null, null);
+                                setColor(legendItem, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             }
                             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, null, null);
+                                setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             }
-                            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);
@@ -6158,6 +6292,11 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     }
                 }
             }
+            else {
+                removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
+                removeLegend(this.legendHighlightCollection, treemap);
+                this.legendHighlightCollection = [];
+            }
         }
         else {
             if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
@@ -6251,8 +6390,24 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
      */
     TreeMapSelection.prototype.mouseDown = function (e) {
         var targetEle = e.target;
+        e.preventDefault();
+        this.selectionOnMouseDown(targetEle);
+    };
+    /**
+     * This method selects the target element for mouse down event.
+     *
+     * @param {Element} targetEle - Specifies the target element that was clicked.
+     * @returns {void}
+     * @private
+     */
+    TreeMapSelection.prototype.selectionOnMouseDown = function (targetEle) {
         var eventArgs;
         var treemap = this.treemap;
+        targetEle.setAttribute('tabindex', '-1');
+        targetEle.style.outline = 'none';
+        if (!targetEle.id.includes('Legend_Shape_Index')) {
+            targetEle.focus();
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var items = [];
         var targetId = targetEle.id;
@@ -6268,10 +6423,13 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
         var layoutID = treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout';
         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);
+            (targetEle.textContent.indexOf('[+]') > -1 || targetEle.textContent.indexOf('[-]') > -1 ||
+                (!isNullOrUndefined(targetEle.nextElementSibling) &&
+                    (targetEle.nextSibling.textContent.indexOf('[+]') > -1 || targetEle.nextSibling.textContent.indexOf('[-]') > -1)));
         if (targetId.indexOf('_Item_Index') > -1 && !isDrillItem) {
-            e.preventDefault();
-            if (this.treemap.selectionId !== targetId) {
+            if ((this.treemap.selectionId !== targetId &&
+                (treemap.selectionId ? parseFloat(treemap.selectionId.split('_Item_Index_')[1]) !== parseFloat(targetId.split('_Item_Index_')[1]) : true)) ||
+                (this.legendSelectionCollection[0] ? this.legendSelectionCollection[0]['ShapeCollection']['Elements'].length > 1 : false)) {
                 treemap.levelSelection = [];
                 treemap.legendId = [];
                 this.shapeSelectId = '';
@@ -6303,7 +6461,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                         });
                         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(legendText, selection.fill, selection.opacity, null, null);
                         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);
@@ -6315,13 +6473,14 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     // 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])];
-                    var valuePath = treemap.rangeColorValuePath;
+                    var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
                     if (orders.indexOf(item['levelOrderName']) > -1 &&
-                        (!isNullOrUndefined(valuePath) && valuePath !== '' ?
-                            item['data'][valuePath] === targetItem['data'][valuePath] : true)) {
+                        (!isNullOrUndefined(valuePath) ?
+                            (item['data'][valuePath] === targetItem['data'][valuePath] ||
+                                (selection.mode !== 'Item' && treemap.levels.length > 0)) : true)) {
                         selectionElements.push(element);
                         if (targetId.indexOf('_RectPath') > -1) {
-                            treemap.levelSelection.push(targetId);
+                            treemap.levelSelection.push(element.id);
                         }
                         items.push(item);
                     }
@@ -6354,14 +6513,17 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
+                removeLegend(this.legendSelectionCollection, treemap);
                 removeLegend(this.shapeSelectionCollection, treemap);
                 this.treemap.legendId = [];
                 this.shapeSelectionCollection = [];
+                this.legendSelectionCollection = [];
                 this.shapeElement = undefined;
                 this.shapeSelect = true;
                 this.shapeSelectId = '';
                 this.treemap.levelSelection = [];
-                if (this.legendSelect) {
+                this.legendSelectId = '';
+                if (this.legendSelect || this.shapeSelect) {
                     removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
                     this.treemap.selectionId = '';
                 }
@@ -6391,13 +6553,14 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     highlightModule.shapeTarget = 'selection';
                     highlightModule.legendHighlightCollection = [];
                 }
-                var valuePath = treemap.rangeColorValuePath;
+                var valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
                 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 ((!isNullOrUndefined(valuePath) && valuePath !== '' && treemap.leafItemSettings.colorMapping.length > 0) ?
+                        if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 &&
+                            treemap.levels.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;
@@ -6410,29 +6573,30 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                                 this.legendSelectionCollection[length_4 - 1]['ShapeCollection'] = { Elements: [] };
                             }
                             this.treemap.selectionId = nodeEle.id;
-                            var legendItem = void 0;
+                            var legendShape = void 0;
+                            var legendText = void 0;
                             if (targetEle_1.id.indexOf('Text') > -1) {
-                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id.replace('_Text', ''))
+                                legendShape = 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;
+                                setColor(legendShape, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                                setColor(targetEle_1, selection.fill, selection.opacity, null, null);
+                                this.legendSelectId = legendShape.id;
+                                this.shapeElement = legendShape;
+                                treemap.legendId.push(targetEle_1.id);
+                                treemap.legendId.push(legendShape.id);
                             }
                             else {
-                                legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
+                                legendText = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle_1.id + '_Text')
                                     : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                setColor(legendText, selection.fill, selection.opacity, null, null);
+                                setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                                 this.shapeElement = targetEle_1;
+                                treemap.legendId.push(targetEle_1.id);
+                                treemap.legendId.push(legendText.id);
                             }
-                            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);
                         }
                     }
@@ -6441,7 +6605,8 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     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) ?
+                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
+                                !this.treemap.layout.renderItems[j].parent.isDrilled) ?
                                 index === j : true)) {
                             itemIndex = j;
                             groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
@@ -6454,17 +6619,19 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                             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);
+                                setColor(targetEle_1, selection.fill, selection.opacity, null, null);
+                                setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                                 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);
+                                setColor(legendItem, selection.fill, selection.opacity, null, null);
+                                setColor(targetEle_1, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                                 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) {
@@ -6481,6 +6648,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
             }
             else {
                 removeLegend(this.legendSelectionCollection, this.treemap);
+                removeLegend(this.shapeSelectionCollection, this.treemap);
                 this.legendSelectionCollection = [];
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'highlight';
@@ -6489,6 +6657,12 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 this.legendSelectId = '';
                 this.treemap.legendId = [];
                 this.treemap.levelSelection = [];
+                this.shapeElement = null;
+                this.shapeSelectId = '';
+                if (this.legendSelect || this.shapeSelect) {
+                    removeClassNames(document.getElementsByClassName('treeMapSelection'), 'treeMapSelection', treemap);
+                    this.treemap.selectionId = '';
+                }
             }
         }
         else if (isDrillItem) {
@@ -6498,6 +6672,8 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
             this.legendSelectId = '';
             this.treemap.legendId = [];
             this.treemap.levelSelection = [];
+            this.treemap.selectionId = '';
+            this.shapeElement = null;
         }
     };
     /**
@@ -6687,7 +6863,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
         var toolTipData = {};
         var tooltipContent = [];
         var markerFill;
-        if (targetId.indexOf('_Item_Index') > -1) {
+        if (targetId.indexOf('_Item_Index') > -1 && e.type.indexOf('key') === -1) {
             item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             if (!isNullOrUndefined(item)) {
                 value = item['weight'];
@@ -6856,6 +7032,8 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
     TreeMapTooltip.prototype.destroy = function () {
         if (!isNullOrUndefined(this.svgTooltip)) {
             this.svgTooltip.destroy();
+            this.svgTooltip.controlInstance = null;
+            removeElement(this.treemap.element.id + '_TreeMapTooltip');
         }
         this.svgTooltip = null;
         this.tooltipSettings = null;