@syncfusion/ej2-treemap 28.2.3 → 29.2.4

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

@@ -1082,12 +1082,10 @@ function colorMap(colorMapping, equalValue, value) {
     for (let i = 0; i < colorMapping.length; i++) {
         let isEqualColor = false;
         const dataValue = value;
-        const colorMappingValue = colorMapping[i].value ? colorMapping[i].value.toString() :
-            colorMapping[i].value;
         if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
             && !isNullOrUndefined(colorMapping[i].value)) {
             if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
-                (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];
@@ -1100,8 +1098,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]') {
@@ -1113,7 +1111,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);
@@ -1390,7 +1388,7 @@ function maintainSelection(treemap, element, className) {
         for (let 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,
@@ -1420,9 +1418,15 @@ function legendMaintain(treemap, legendGroup) {
                         parseFloat(legendGroup.childNodes[j]['id'].split('Index_')[1]) === parseFloat(elementId[i].split('Index_')[1])) {
                         const treemapSVGRectElement = legendGroup.childNodes[j];
                         treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
-                        treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
-                        treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
                         treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
+                        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);
+                        }
                     }
                 }
             }
@@ -1430,9 +1434,15 @@ function legendMaintain(treemap, legendGroup) {
                 const legendItem = document.getElementById(elementId[i]);
                 if (!isNullOrUndefined(legendItem)) {
                     legendItem.setAttribute('fill', treemap.selectionSettings.fill);
-                    legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
-                    legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
                     legendItem.setAttribute('opacity', treemap.selectionSettings.opacity);
+                    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);
+                    }
                 }
             }
         }
@@ -1735,10 +1745,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);
             }
             const dataCount = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
             for (let k = 0; k < dataCount; k++) {
@@ -1762,8 +1772,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);
+    }
 }
 /**
  *
@@ -1785,16 +1799,18 @@ function removeSelectionWithHighlight(collection, element, treemap) {
  */
 function getLegendIndex(length, item, treemap) {
     let index;
-    const valuePath = treemap.rangeColorValuePath;
-    for (let i = 0; i < length; i++) {
+    const valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
+    let indexFound = false;
+    for (let i = 0; i < length && !indexFound; i++) {
         const dataLength = treemap.treeMapLegendModule.legendCollections[i]['legendData'].length;
         if (dataLength > 0) {
             for (let 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;
                 }
             }
@@ -2425,10 +2441,11 @@ class LayoutPanel {
                         }
                     }
                     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';
                     }
@@ -3921,6 +3938,9 @@ let TreeMap = class TreeMap extends Component {
         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);
     }
     /**
@@ -3936,6 +3956,9 @@ let TreeMap = class TreeMap extends Component {
         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);
     }
@@ -4071,6 +4094,10 @@ let TreeMap = class TreeMap extends Component {
         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);
     }
     /**
@@ -4090,6 +4117,7 @@ let TreeMap = class TreeMap extends Component {
         this.trigger(mouseMove, moveArgs);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let 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
@@ -4360,6 +4388,95 @@ let TreeMap = class TreeMap extends Component {
             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
+     */
+    keyUpHandler(event) {
+        if (event.code !== 'Tab') {
+            return;
+        }
+        const id = event.target['id'];
+        const 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');
+                const 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
+     */
+    keyDownHandler(event) {
+        const id = event.target['id'];
+        const targetEle = document.getElementById(id);
+        if (event.code === 'Enter') {
+            if (this.selectionSettings.enable && (id.indexOf('Item_Index') > -1 || id.indexOf('Legend') > -1)) {
+                const 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
+     */
+    focusHandler(event) {
+        const 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');
+            }
+        }
+    }
+    removeFocus(outline) {
+        const 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.
@@ -5219,7 +5336,7 @@ class TreeMapLegend {
                             legendIndex++;
                         }
                         for (let 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;
@@ -5316,7 +5433,10 @@ class TreeMapLegend {
                 const text = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
                 renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                const legendElement = render.drawRectangle(rectOptions);
+                legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
+                legendElement.style.outline = '';
+                this.legendGroup.appendChild(legendElement);
             }
         }
         legendMaintain(this.treemap, this.legendGroup);
@@ -5367,6 +5487,8 @@ class TreeMapLegend {
                 const legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
+                legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
+                legendElement.style.outline = 'none';
                 const shapeId = treemap.element.id + '_Legend_Shape_Index_' + i;
                 const textId = treemap.element.id + '_Legend_Text_Index_' + i;
                 let shapeLocation = collection['Shape'];
@@ -5810,16 +5932,27 @@ class TreeMapHighlight {
         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
      */
     mouseMove(e) {
+        const 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
+     */
+    highlightOnMouseMove(targetElement) {
         const treemap = this.treemap;
         let processHighlight;
-        const targetId = e.target.id;
+        const targetId = targetElement.id;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let eventArgs;
         const items = [];
@@ -5847,7 +5980,8 @@ class TreeMapHighlight {
             }
         }
         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');
                 const selectionElements = document.getElementsByClassName('treeMapSelection');
                 item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
@@ -5859,10 +5993,16 @@ class TreeMapHighlight {
                     index = (!treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0 &&
                         treemap.leafItemSettings.colorMapping.length === 0 && treemap.levels.length === 0) ?
                         parseFloat(targetId.split('_Item_Index_')[1]) : getLegendIndex(length, item, treemap);
+                    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)) {
-                        const 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'],
@@ -5871,7 +6011,7 @@ class TreeMapHighlight {
                             });
                             const legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
                                 : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
-                            setColor(legendText, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
+                            setColor(legendText, highlight.fill, highlight.opacity, null, null);
                             setColor(this.shapeElement, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
                             this.target = 'highlight';
                         }
@@ -5880,52 +6020,39 @@ class TreeMapHighlight {
                             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 (let i = 0; i < treeMapElement.childElementCount; i++) {
-                            element = treeMapElement.childNodes[i];
-                            process = true;
-                            const valuePath = treemap.rangeColorValuePath;
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
-                            item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
-                            for (let j = 0; j < selectionElements.length; j++) {
-                                if (element.id === selectionElements[j].id) {
-                                    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 (let 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 (let i = 0; i < treeMapElement.childElementCount; i++) {
+                    element = treeMapElement.childNodes[i];
+                    process = true;
+                    const valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
+                    item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
+                    for (let j = 0; j < selectionElements.length; j++) {
+                        if (element.id === selectionElements[j].id ||
+                            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 (let 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) {
@@ -5941,7 +6068,7 @@ class TreeMapHighlight {
                 let itemIndex;
                 let groupIndex;
                 let length;
-                const valuePath = treemap.rangeColorValuePath;
+                const valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
                 const targetEle = document.getElementById(targetId);
                 if (this.shapeTarget === 'highlight') {
                     removeLegend(this.legendHighlightCollection, this.treemap);
@@ -5953,7 +6080,8 @@ class TreeMapHighlight {
                 const collection = this.treemap.treeMapLegendModule.legendCollections;
                 for (let i = 0; i < dataLength; i++) {
                     for (let 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;
@@ -5965,17 +6093,20 @@ class TreeMapHighlight {
                                 length = this.legendHighlightCollection.length;
                                 this.legendHighlightCollection[length - 1]['ShapeCollection'] = { Elements: [] };
                             }
-                            setColor(targetEle, highlight.fill, highlight.opacity, highlight.border.color, highlight.border.width.toString());
-                            let legendItem;
+                            let legendShape;
+                            let legendText;
                             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 = this.legendHighlightCollection.length;
                             this.legendHighlightCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -5986,7 +6117,8 @@ class TreeMapHighlight {
                     for (let j = 0; j < this.treemap.layout.renderItems.length; j++) {
                         if ((this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
                             this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[targetIndex]['levelOrderName']) > -1) &&
-                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
+                            ((!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'];
@@ -5998,13 +6130,15 @@ class TreeMapHighlight {
                             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 = this.legendHighlightCollection.length;
                             this.legendHighlightCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
@@ -6012,6 +6146,11 @@ class TreeMapHighlight {
                     }
                 }
             }
+            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) {
@@ -6104,8 +6243,24 @@ class TreeMapSelection {
      */
     mouseDown(e) {
         const 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
+     */
+    selectionOnMouseDown(targetEle) {
         let eventArgs;
         const 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
         const items = [];
         const targetId = targetEle.id;
@@ -6121,10 +6276,13 @@ class TreeMapSelection {
         const layoutID = treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout';
         item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
         const isDrillItem = (item && !item.isLeafItem && treemap.enableDrillDown) &&
-            (targetEle.nextSibling.textContent.indexOf('[+]') > -1 || targetEle.nextSibling.textContent.indexOf('[-]') > -1);
+            (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 = '';
@@ -6156,7 +6314,7 @@ class TreeMapSelection {
                         });
                         const legendText = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index)
                             : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index + '_Text');
-                        setColor(legendText, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                        setColor(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);
@@ -6168,13 +6326,14 @@ class TreeMapSelection {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const targetItem = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                     item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
-                    const valuePath = treemap.rangeColorValuePath;
+                    const 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);
                     }
@@ -6207,14 +6366,17 @@ class TreeMapSelection {
                 }
             }
             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 = '';
                 }
@@ -6244,13 +6406,14 @@ class TreeMapSelection {
                     highlightModule.shapeTarget = 'selection';
                     highlightModule.legendHighlightCollection = [];
                 }
-                const valuePath = treemap.rangeColorValuePath;
+                const valuePath = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
                 const index = this.treemap.legendSettings.mode === 'Default' ? (targetId.indexOf('Text') === -1 ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Text_Index_')[1]))
                     : parseFloat(targetId.split('_Legend_Index_')[1]);
                 const dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
                 for (let k = 0; k < dataLength; k++) {
                     for (let l = 0; l < this.treemap.layout.renderItems.length; l++) {
-                        if ((!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;
@@ -6263,29 +6426,30 @@ class TreeMapSelection {
                                 this.legendSelectionCollection[length - 1]['ShapeCollection'] = { Elements: [] };
                             }
                             this.treemap.selectionId = nodeEle.id;
-                            let legendItem;
+                            let legendShape;
+                            let legendText;
                             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_' + index);
-                                this.legendSelectId = legendItem.id;
-                                this.shapeElement = legendItem;
+                                setColor(legendShape, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
+                                setColor(targetEle, selection.fill, selection.opacity, null, null);
+                                this.legendSelectId = legendShape.id;
+                                this.shapeElement = legendShape;
+                                treemap.legendId.push(targetEle.id);
+                                treemap.legendId.push(legendShape.id);
                             }
                             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_' + index);
+                                setColor(legendText, selection.fill, selection.opacity, null, null);
+                                setColor(targetEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                                 this.shapeElement = targetEle;
+                                treemap.legendId.push(targetEle.id);
+                                treemap.legendId.push(legendText.id);
                             }
-                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
-                            setColor(targetEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             length = this.legendSelectionCollection.length;
                             treemap.levelSelection.push(nodeEle.id);
-                            if (treemap.legendId.indexOf(targetEle.id) === -1) {
-                                treemap.legendId.push(targetEle.id);
-                            }
-                            if (treemap.legendId.indexOf(legendItem.id) === -1) {
-                                treemap.legendId.push(legendItem.id);
-                            }
                             this.legendSelectionCollection[length - 1]['ShapeCollection']['Elements'].push(nodeEle);
                         }
                     }
@@ -6294,7 +6458,8 @@ class TreeMapSelection {
                     for (let j = 0; j < this.treemap.layout.renderItems.length; j++) {
                         if ((this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName'] ||
                             this.treemap.layout.renderItems[j]['levelOrderName'].indexOf(this.treemap.treeMapLegendModule.legendCollections[index]['levelOrderName']) > -1) &&
-                            ((!this.treemap.legendSettings.removeDuplicateLegend && treemap.palette && treemap.palette.length > 0) ?
+                            ((!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'];
@@ -6307,17 +6472,19 @@ class TreeMapSelection {
                             if (targetEle.id.indexOf('Text') > -1) {
                                 legendItem = this.treemap.legendSettings.mode === 'Interactive' ? document.getElementById(targetEle.id.replace('_Text', ''))
                                     : document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index);
+                                setColor(targetEle, 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.id + '_Text')
                                     : document.getElementById(this.treemap.element.id + '_Legend_Text_Index_' + index);
+                                setColor(legendItem, selection.fill, selection.opacity, null, null);
+                                setColor(targetEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                                 this.legendSelectId = targetId;
                                 this.shapeElement = targetEle;
                             }
-                            setColor(legendItem, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
-                            setColor(targetEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             setColor(nodeEle, selection.fill, selection.opacity, selection.border.color, selection.border.width.toString());
                             treemap.levelSelection.push(nodeEle.id);
                             if (treemap.legendId.indexOf(legendItem.id) === -1) {
@@ -6334,6 +6501,7 @@ class TreeMapSelection {
             }
             else {
                 removeLegend(this.legendSelectionCollection, this.treemap);
+                removeLegend(this.shapeSelectionCollection, this.treemap);
                 this.legendSelectionCollection = [];
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'highlight';
@@ -6342,6 +6510,12 @@ class TreeMapSelection {
                 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) {
@@ -6351,6 +6525,8 @@ class TreeMapSelection {
             this.legendSelectId = '';
             this.treemap.legendId = [];
             this.treemap.levelSelection = [];
+            this.treemap.selectionId = '';
+            this.shapeElement = null;
         }
     }
     /**
@@ -6538,7 +6714,7 @@ class TreeMapTooltip {
         let toolTipData = {};
         let tooltipContent = [];
         let 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'];
@@ -6707,6 +6883,8 @@ class TreeMapTooltip {
     destroy() {
         if (!isNullOrUndefined(this.svgTooltip)) {
             this.svgTooltip.destroy();
+            this.svgTooltip.controlInstance = null;
+            removeElement(this.treemap.element.id + '_TreeMapTooltip');
         }
         this.svgTooltip = null;
         this.tooltipSettings = null;