@syncfusion/ej2-treemap 25.1.35 → 26.1.35

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

@@ -1,7 +1,7 @@
-import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
+import { ChildProperty, Property, Complex, Collection, createElement, SanitizeHtmlHelper, isNullOrUndefined, compile, merge, remove, extend, print, Browser, Component, Fetch, EventHandler, Internationalization, Event, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
+import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
 
 /**
  * TreeMap constants doc
@@ -121,24 +121,21 @@ const resize = 'resize';
  */
 const defaultFont = 'Roboto, Segoe UI, Noto, Sans-serif';
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/**
- * Maps base doc
- */
 /**
  * Sets and gets the options for customizing the color and width of the border in treemap.
  */
 class Border extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property('#808080')
 ], Border.prototype, "color", void 0);
-__decorate$1([
+__decorate([
     Property(0)
 ], Border.prototype, "width", void 0);
 /**
@@ -146,16 +143,16 @@ __decorate$1([
  */
 class Margin extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(10)
 ], Margin.prototype, "left", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], Margin.prototype, "right", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], Margin.prototype, "top", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], Margin.prototype, "bottom", void 0);
 /**
@@ -163,22 +160,22 @@ __decorate$1([
  */
 class Font extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(null)
 ], Font.prototype, "size", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], Font.prototype, "color", void 0);
-__decorate$1([
+__decorate([
     Property(defaultFont)
 ], Font.prototype, "fontFamily", void 0);
-__decorate$1([
+__decorate([
     Property('')
 ], Font.prototype, "fontWeight", void 0);
-__decorate$1([
+__decorate([
     Property('Normal')
 ], Font.prototype, "fontStyle", void 0);
-__decorate$1([
+__decorate([
     Property(1)
 ], Font.prototype, "opacity", void 0);
 /**
@@ -186,10 +183,10 @@ __decorate$1([
  */
 class CommonTitleSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property('')
 ], CommonTitleSettings.prototype, "text", void 0);
-__decorate$1([
+__decorate([
     Property('')
 ], CommonTitleSettings.prototype, "description", void 0);
 /**
@@ -197,10 +194,10 @@ __decorate$1([
  */
 class SubTitleSettings extends CommonTitleSettings {
 }
-__decorate$1([
+__decorate([
     Complex({ fontFamily: null, fontWeight: null }, Font)
 ], SubTitleSettings.prototype, "textStyle", void 0);
-__decorate$1([
+__decorate([
     Property('Center')
 ], SubTitleSettings.prototype, "alignment", void 0);
 /**
@@ -208,13 +205,13 @@ __decorate$1([
  */
 class TitleSettings extends CommonTitleSettings {
 }
-__decorate$1([
+__decorate([
     Complex({ fontFamily: null, fontWeight: null }, Font)
 ], TitleSettings.prototype, "textStyle", void 0);
-__decorate$1([
+__decorate([
     Property('Center')
 ], TitleSettings.prototype, "alignment", void 0);
-__decorate$1([
+__decorate([
     Complex({}, SubTitleSettings)
 ], TitleSettings.prototype, "subtitleSettings", void 0);
 /**
@@ -222,28 +219,28 @@ __decorate$1([
  */
 class ColorMapping extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "from", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "to", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "color", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "label", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "value", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "minOpacity", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], ColorMapping.prototype, "maxOpacity", void 0);
-__decorate$1([
+__decorate([
     Property(true)
 ], ColorMapping.prototype, "showLegend", void 0);
 /**
@@ -251,85 +248,85 @@ __decorate$1([
  */
 class LegendSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(false)
 ], LegendSettings.prototype, "visible", void 0);
-__decorate$1([
+__decorate([
     Property('Default')
 ], LegendSettings.prototype, "mode", void 0);
-__decorate$1([
+__decorate([
     Property('transparent')
 ], LegendSettings.prototype, "background", void 0);
-__decorate$1([
+__decorate([
     Property('Circle')
 ], LegendSettings.prototype, "shape", void 0);
-__decorate$1([
+__decorate([
     Property('')
 ], LegendSettings.prototype, "width", void 0);
-__decorate$1([
+__decorate([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
-__decorate$1([
+__decorate([
     Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LegendSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property(1)
 ], LegendSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Property(15)
 ], LegendSettings.prototype, "shapeWidth", void 0);
-__decorate$1([
+__decorate([
     Property(15)
 ], LegendSettings.prototype, "shapeHeight", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], LegendSettings.prototype, "shapePadding", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LegendSettings.prototype, "imageUrl", void 0);
-__decorate$1([
-    Complex({ color: '#000000', width: 0 }, Border)
+__decorate([
+    Complex({ color: null, width: null }, Border)
 ], LegendSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Complex({ color: '#000000', width: 0 }, Border)
 ], LegendSettings.prototype, "shapeBorder", void 0);
-__decorate$1([
+__decorate([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
-__decorate$1([
+__decorate([
     Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
-__decorate$1([
+__decorate([
     Property('Bottom')
 ], LegendSettings.prototype, "position", void 0);
-__decorate$1([
+__decorate([
     Property('None')
 ], LegendSettings.prototype, "orientation", void 0);
-__decorate$1([
+__decorate([
     Property(false)
 ], LegendSettings.prototype, "invertedPointer", void 0);
-__decorate$1([
+__decorate([
     Property('After')
 ], LegendSettings.prototype, "labelPosition", void 0);
-__decorate$1([
+__decorate([
     Property('None')
 ], LegendSettings.prototype, "labelDisplayMode", void 0);
-__decorate$1([
+__decorate([
     Property('Center')
 ], LegendSettings.prototype, "alignment", void 0);
-__decorate$1([
+__decorate([
     Property({ x: 0, y: 0 })
 ], LegendSettings.prototype, "location", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LegendSettings.prototype, "showLegendPath", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LegendSettings.prototype, "valuePath", void 0);
-__decorate$1([
+__decorate([
     Property(false)
 ], LegendSettings.prototype, "removeDuplicateLegend", void 0);
 /**
@@ -337,10 +334,10 @@ __decorate$1([
  */
 class InitialDrillSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(null)
 ], InitialDrillSettings.prototype, "groupIndex", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], InitialDrillSettings.prototype, "groupName", void 0);
 /**
@@ -348,49 +345,49 @@ __decorate$1([
  */
 class LeafItemSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(null)
 ], LeafItemSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property(false)
 ], LeafItemSettings.prototype, "autoFill", void 0);
-__decorate$1([
+__decorate([
     Complex({}, Border)
 ], LeafItemSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Property(0)
 ], LeafItemSettings.prototype, "gap", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], LeafItemSettings.prototype, "padding", void 0);
-__decorate$1([
+__decorate([
     Property(1)
 ], LeafItemSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Property(true)
 ], LeafItemSettings.prototype, "showLabels", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LeafItemSettings.prototype, "labelPath", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LeafItemSettings.prototype, "labelFormat", void 0);
-__decorate$1([
+__decorate([
     Property('TopLeft')
 ], LeafItemSettings.prototype, "labelPosition", void 0);
-__decorate$1([
-    Complex({ color: null, size: '12px' }, Font)
+__decorate([
+    Complex({ color: null, size: null }, Font)
 ], LeafItemSettings.prototype, "labelStyle", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LeafItemSettings.prototype, "labelTemplate", void 0);
-__decorate$1([
+__decorate([
     Property('Center')
 ], LeafItemSettings.prototype, "templatePosition", void 0);
-__decorate$1([
+__decorate([
     Property('Trim')
 ], LeafItemSettings.prototype, "interSectAction", void 0);
-__decorate$1([
+__decorate([
     Collection([], ColorMapping)
 ], LeafItemSettings.prototype, "colorMapping", void 0);
 /**
@@ -398,28 +395,28 @@ __decorate$1([
  */
 class TooltipSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(false)
 ], TooltipSettings.prototype, "visible", void 0);
-__decorate$1([
+__decorate([
     Property('')
 ], TooltipSettings.prototype, "template", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], TooltipSettings.prototype, "format", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], TooltipSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property(0.75)
 ], TooltipSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Property(['Circle'])
 ], TooltipSettings.prototype, "markerShapes", void 0);
-__decorate$1([
-    Complex({}, Border)
+__decorate([
+    Complex({ width: null, color: null }, Border)
 ], TooltipSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 /**
@@ -427,19 +424,19 @@ __decorate$1([
  */
 class SelectionSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(false)
 ], SelectionSettings.prototype, "enable", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], SelectionSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property('0.5')
 ], SelectionSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Complex({}, Border)
 ], SelectionSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Property('Item')
 ], SelectionSettings.prototype, "mode", void 0);
 /**
@@ -448,19 +445,19 @@ __decorate$1([
  */
 class HighlightSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(false)
 ], HighlightSettings.prototype, "enable", void 0);
-__decorate$1([
+__decorate([
     Property('#808080')
 ], HighlightSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property('0.5')
 ], HighlightSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Complex({}, Border)
 ], HighlightSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Property('Item')
 ], HighlightSettings.prototype, "mode", void 0);
 /**
@@ -468,49 +465,49 @@ __decorate$1([
  */
 class LevelSettings extends ChildProperty {
 }
-__decorate$1([
+__decorate([
     Property(null)
 ], LevelSettings.prototype, "groupPath", void 0);
-__decorate$1([
+__decorate([
     Property(0)
 ], LevelSettings.prototype, "groupGap", void 0);
-__decorate$1([
+__decorate([
     Property(10)
 ], LevelSettings.prototype, "groupPadding", void 0);
-__decorate$1([
+__decorate([
     Complex({}, Border)
 ], LevelSettings.prototype, "border", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LevelSettings.prototype, "fill", void 0);
-__decorate$1([
+__decorate([
     Property(false)
 ], LevelSettings.prototype, "autoFill", void 0);
-__decorate$1([
+__decorate([
     Property(1)
 ], LevelSettings.prototype, "opacity", void 0);
-__decorate$1([
+__decorate([
     Property(true)
 ], LevelSettings.prototype, "showHeader", void 0);
-__decorate$1([
+__decorate([
     Property(20)
 ], LevelSettings.prototype, "headerHeight", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LevelSettings.prototype, "headerTemplate", void 0);
-__decorate$1([
+__decorate([
     Property(null)
 ], LevelSettings.prototype, "headerFormat", void 0);
-__decorate$1([
+__decorate([
     Property('Near')
 ], LevelSettings.prototype, "headerAlignment", void 0);
-__decorate$1([
+__decorate([
     Complex({ color: null, size: '13px' }, Font)
 ], LevelSettings.prototype, "headerStyle", void 0);
-__decorate$1([
+__decorate([
     Property('TopLeft')
 ], LevelSettings.prototype, "templatePosition", void 0);
-__decorate$1([
+__decorate([
     Collection([], ColorMapping)
 ], LevelSettings.prototype, "colorMapping", void 0);
 
@@ -1549,11 +1546,10 @@ function colorNameToHex(color) {
  * @param {Size} size - Specifies the size
  * @param {string} url - Specifies the url
  * @param {PathOption} options - Specifies the options
- * @param {string} label - Specifies the label
  * @returns {Element} - Returns the element
  * @private
  */
-function drawSymbol(location, shape, size, url, options, label) {
+function drawSymbol(location, shape, size, url, options) {
     const svgRenderer = new SvgRenderer('');
     const temp = renderLegendShape(location, size, shape, options, url);
     const htmlElement = svgRenderer['draw' + temp.functionName](temp.renderOption);
@@ -1742,7 +1738,6 @@ function setColor(element, fill, opacity, borderColor, borderWidth) {
  */
 function removeSelectionWithHighlight(collection, element, treemap) {
     removeShape(collection);
-    element = [];
     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
 }
 /**
@@ -1890,7 +1885,7 @@ class LayoutPanel {
         }
         return drillData;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateLayoutItems(data, rect) {
         this.renderItems = [];
         this.parentData = [];
@@ -2195,7 +2190,7 @@ class LayoutPanel {
         }
         return result;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onDemandProcess(childItems) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let parentItem = {};
@@ -2334,6 +2329,7 @@ class LayoutPanel {
             textStyle = (isLeafItem ? leaf.labelStyle : levels[index].headerStyle);
             textStyle.fontFamily = this.treemap.themeStyle.labelFontFamily || textStyle.fontFamily;
             textStyle.fontWeight = textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
+            textStyle.size = textStyle.size || this.treemap.themeStyle.labelFontSize;
             border = isLeafItem ? leaf.border : levels[index].border;
             position = !isLeafItem ? (levels[index].headerAlignment) === 'Near' ? 'TopLeft' : (levels[index].headerAlignment) === 'Center' ?
                 'TopCenter' : 'TopRight' : leaf.labelPosition;
@@ -2366,10 +2362,11 @@ class LayoutPanel {
                         }
                     }
                     itemGroup.setAttribute('aria-label', item['name']);
-                    if ((this.treemap.enableDrillDown && isLeafItem) || (this.treemap.selectionSettings.enable || this.treemap.highlightSettings.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.cursor = this.treemap.highlightSettings.enable && !this.treemap.selectionSettings.enable && (this.treemap.enableDrillDown && item['groupIndex'] == (this.treemap.levels.length - 1)) ? 'default' :
+                        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';
                     }
                     else {
@@ -2464,14 +2461,16 @@ class LayoutPanel {
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const option = colorMap(colorMapping, item['data'][treemap.equalColorValuePath], item['data'][treemap.rangeColorValuePath]);
-            itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
-            itemOpacity = option['opacity'];
+            if (!isNullOrUndefined(option)) {
+                itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
+                itemOpacity = option['opacity'];
+            }
         }
         else {
             for (let i = 0; i < parentData.length; i++) {
                 if (parentData[i]['levelOrderName'] === item['levelOrderName'].split('#')[0]) {
                     itemFill = !isNullOrUndefined(itemFill) ? itemFill : !isNullOrUndefined(treemap.colorValuePath) ?
-                        parentData[i]['data'][treemap.colorValuePath] : treemap.palette.length > 0 ?
+                        parentData[i]['data'][treemap.colorValuePath] : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
                         treemap.palette[i % treemap.palette.length] : '#808080';
                 }
             }
@@ -2607,7 +2606,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
-                fontFamily: 'Roboto, Noto, Sans-serif'
+                fontFamily: 'Roboto, Noto, Sans-serif',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'highcontrast':
@@ -2625,7 +2627,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
-                fontFamily: 'Roboto, Noto, Sans-serif'
+                fontFamily: 'Roboto, Noto, Sans-serif',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'bootstrap4':
@@ -2646,7 +2651,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
-                labelFontFamily: 'HelveticaNeue'
+                labelFontFamily: 'HelveticaNeue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'tailwind':
@@ -2667,7 +2675,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Inter'
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'tailwinddark':
@@ -2688,7 +2699,10 @@ function getThemeStyle(theme) {
                 fontSize: '14px',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Inter'
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'bootstrap5':
@@ -2709,7 +2723,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue'
+                labelFontFamily: 'Helvetica Neue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'bootstrap5dark':
@@ -2730,7 +2747,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue'
+                labelFontFamily: 'Helvetica Neue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'fluent':
@@ -2751,7 +2771,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Segoe UI'
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'fluentdark':
@@ -2772,7 +2795,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Segoe UI'
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'material3':
@@ -2793,7 +2819,10 @@ function getThemeStyle(theme) {
                 fontWeight: '400',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
-                labelFontFamily: 'Roboto'
+                labelFontFamily: 'Roboto',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'material3dark':
@@ -2814,7 +2843,84 @@ function getThemeStyle(theme) {
                 fontWeight: '400',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
-                labelFontFamily: 'Roboto'
+                labelFontFamily: 'Roboto',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
+        case 'fluent2':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#242424',
+                titleFontWeight: '600',
+                subTitleFontColor: '#242424',
+                tooltipFillColor: '#FFFFFF',
+                tooltipFontColor: '#242424',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#242424',
+                legendTextColor: '#242424',
+                fontFamily: 'Segoe UI',
+                fontSize: '14px',
+                fontWeight: '400',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '10px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
+        case 'fluent2dark':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                titleFontWeight: '600',
+                subTitleFontColor: '#FFFFFF',
+                tooltipFillColor: '#292929',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                fontFamily: 'Segoe UI',
+                fontSize: '14px',
+                fontWeight: '400',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '10px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
+        case 'fluent2highcontrast':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                titleFontWeight: '600',
+                subTitleFontColor: '#FFFFFF',
+                tooltipFillColor: '#000000',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                fontFamily: 'Segoe UI',
+                fontSize: '14px',
+                fontWeight: '400',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '10px',
+                legendBorderColor: '#FFF',
+                legendBorderWidth: 1,
+                tooltipBorderColor: '#FFF',
+                tooltipBorderWidth: 1
             };
             break;
         default:
@@ -2832,7 +2938,10 @@ function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
-                fontFamily: 'Roboto, Noto, Sans-serif'
+                fontFamily: 'Roboto, Noto, Sans-serif',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
     }
@@ -2899,15 +3008,19 @@ class Print {
         }
         else {
             const exportElement = treeMap.element.cloneNode(true);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let backgroundElement = exportElement.getElementsByTagName('svg')[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 backgroundElement = backgroundElement.childNodes[0];
                 if (!isNullOrUndefined(backgroundElement)) {
                     const backgroundColor = backgroundElement.getAttribute('fill');
-                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                        && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                     }
-                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                        treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
+                        && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
                     }
                 }
@@ -2973,10 +3086,13 @@ class ImageExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                    treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
                 }
             }
@@ -3071,10 +3187,13 @@ class PdfExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' || treeMap.theme === 'Fluent2')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                    treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
                 }
             }
@@ -3118,7 +3237,7 @@ class PdfExport {
 /**
  * Tree Map Components
  */
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3208,9 +3327,10 @@ let TreeMap = class TreeMap extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             fetchApiModule.onSuccess = (args) => {
                 if (!isNullOrUndefined(args.type) && args.type === 'application/octet-stream') {
-                    let reader = new FileReader();
-                    let treemap = this;
-                    reader.onload = function (data) {
+                    const reader = new FileReader();
+                    // eslint-disable-next-line @typescript-eslint/no-this-alias
+                    const treemap = this;
+                    reader.onload = function () {
                         args = JSON.parse(reader.result.toString());
                         treemap.dataSource = args;
                         treemap.renderTreeMapElements();
@@ -3486,19 +3606,21 @@ let TreeMap = class TreeMap extends Component {
         if (dataCount === this.treemapLevelData.hierarchyData.length - 1) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let mainData = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
-            for (let k = 0; k < this.treemapLevelData.hierarchyData.length; k++) {
-                childData = findChildren(this.treemapLevelData.hierarchyData[k])['values'];
-                if (k !== 0 && childData) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    childData.forEach((currentData) => { mainData.push(currentData); });
-                    this.treemapLevelData.hierarchyData.splice(k, 1);
-                    k -= 1;
+            if (!isNullOrUndefined(mainData)) {
+                for (let k = 0; k < this.treemapLevelData.hierarchyData.length; k++) {
+                    childData = findChildren(this.treemapLevelData.hierarchyData[k])['values'];
+                    if (k !== 0 && childData) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        childData.forEach((currentData) => { mainData.push(currentData); });
+                        this.treemapLevelData.hierarchyData.splice(k, 1);
+                        k -= 1;
+                    }
+                }
+                mainData = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
+                for (let l = 0; l < mainData.length; l++) {
+                    newData[this.levels[0].groupPath] = mainData;
+                    mainData[l]['parent'] = newData;
                 }
-            }
-            mainData = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
-            for (let l = 0; l < mainData.length; l++) {
-                newData[this.levels[0].groupPath] = mainData;
-                mainData[l]['parent'] = newData;
             }
         }
     }
@@ -3866,7 +3988,7 @@ let TreeMap = class TreeMap extends Component {
      * @returns {any} - Returns label of the drilled level.
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculateSelectedTextLevels(labelText, item) {
         //to find the levels by clicking the particular text both for drillDownView as true / false.
         let drillLevel;
@@ -3891,7 +4013,7 @@ let TreeMap = class TreeMap extends Component {
      * @returns {boolean} - check whether it is previous level or not.
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     calculatePreviousLevelChildItems(drillLevelValues, item, directLevel) {
         //By clicking any child items drilldown to the particular level.
         //At the time store all the previous drilled level items in drilledItems
@@ -3932,7 +4054,7 @@ let TreeMap = class TreeMap extends Component {
      * @returns {any} - return the new drill down object.
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     compareSelectedLabelWithDrillDownItems(drillLevelValues, item, i) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let drillLevelChild;
@@ -3970,7 +4092,6 @@ let TreeMap = class TreeMap extends Component {
         let index;
         let newDrillItem = {};
         let item;
-        const process = true;
         const layoutID = this.element.id + '_TreeMap_' + this.layoutType + '_Layout';
         let drillLevel;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4085,7 +4206,7 @@ let TreeMap = class TreeMap extends Component {
                 });
                 endEvent = { cancel: false, name: drillEnd, treemap: this, renderItems: this.layout.renderItems };
                 this.trigger(drillEnd, endEvent);
-                if (process) {
+                {
                     if (!directLevel && isNullOrUndefined(drillLevel)) {
                         this.drilledItems.push({ name: item['levelOrderName'], data: item });
                     }
@@ -4291,163 +4412,163 @@ let TreeMap = class TreeMap extends Component {
         return '';
     }
 };
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "allowPrint", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "allowImageExport", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "allowPdfExport", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "width", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "height", void 0);
-__decorate([
+__decorate$1([
     Complex({}, Border)
 ], TreeMap.prototype, "border", void 0);
-__decorate([
+__decorate$1([
     Complex({}, Margin)
 ], TreeMap.prototype, "margin", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "background", void 0);
-__decorate([
+__decorate$1([
     Property('Material')
 ], TreeMap.prototype, "theme", void 0);
-__decorate([
+__decorate$1([
     Complex({}, TitleSettings)
 ], TreeMap.prototype, "titleSettings", void 0);
-__decorate([
+__decorate$1([
     Property('Squarified')
 ], TreeMap.prototype, "layoutType", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "dataSource", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "query", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "weightValuePath", void 0);
-__decorate([
+__decorate$1([
     Property('')
 ], TreeMap.prototype, "rangeColorValuePath", void 0);
-__decorate([
+__decorate$1([
     Property('')
 ], TreeMap.prototype, "equalColorValuePath", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "colorValuePath", void 0);
-__decorate([
+__decorate$1([
     Property([])
 ], TreeMap.prototype, "palette", void 0);
-__decorate([
+__decorate$1([
     Property('TopLeftBottomRight')
 ], TreeMap.prototype, "renderDirection", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "enableDrillDown", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "enableBreadcrumb", void 0);
-__decorate([
+__decorate$1([
     Property(' - ')
 ], TreeMap.prototype, "breadcrumbConnector", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "drillDownView", void 0);
-__decorate([
+__decorate$1([
     Complex({}, InitialDrillSettings)
 ], TreeMap.prototype, "initialDrillDown", void 0);
-__decorate([
+__decorate$1([
     Complex({}, LeafItemSettings)
 ], TreeMap.prototype, "leafItemSettings", void 0);
-__decorate([
+__decorate$1([
     Collection([], LevelSettings)
 ], TreeMap.prototype, "levels", void 0);
-__decorate([
+__decorate$1([
     Complex({}, HighlightSettings)
 ], TreeMap.prototype, "highlightSettings", void 0);
-__decorate([
+__decorate$1([
     Complex({}, SelectionSettings)
 ], TreeMap.prototype, "selectionSettings", void 0);
-__decorate([
+__decorate$1([
     Complex({}, TooltipSettings)
 ], TreeMap.prototype, "tooltipSettings", void 0);
-__decorate([
+__decorate$1([
     Complex({}, LegendSettings)
 ], TreeMap.prototype, "legendSettings", void 0);
-__decorate([
+__decorate$1([
     Property(false)
 ], TreeMap.prototype, "useGroupingSeparator", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "description", void 0);
-__decorate([
+__decorate$1([
     Property(0)
 ], TreeMap.prototype, "tabIndex", void 0);
-__decorate([
+__decorate$1([
     Property(null)
 ], TreeMap.prototype, "format", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "load", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "beforePrint", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "loaded", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "itemRendering", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "drillStart", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "drillEnd", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "itemSelected", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "itemHighlight", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "tooltipRendering", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "itemClick", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "itemMove", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "click", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "doubleClick", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "rightClick", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "mouseMove", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "resize", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "legendItemRendering", void 0);
-__decorate([
+__decorate$1([
     Event()
 ], TreeMap.prototype, "legendRendering", void 0);
-TreeMap = __decorate([
+TreeMap = __decorate$1([
     NotifyPropertyChanges
 ], TreeMap);
 /**
@@ -4475,9 +4596,10 @@ class TreeMapLegend {
         this.treemap = treemap;
         this.addEventListener();
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * method for legend
+     *
+     * @returns {void}
      * @private
      */
     renderLegend() {
@@ -4511,7 +4633,7 @@ class TreeMapLegend {
         const treemap = this.treemap;
         const legend = treemap.legendSettings;
         this.findColorMappingLegendItems(treemap.treemapLevelData.levelsData[0]);
-        if ((this.treemap.palette.length > 0 || !isNullOrUndefined(treemap.colorValuePath))
+        if (((!isNullOrUndefined(this.treemap.palette) && this.treemap.palette.length > 0) || !isNullOrUndefined(treemap.colorValuePath))
             && this.legendCollections.length === 0) {
             this.findPaletteLegendItems(treemap.treemapLevelData.levelsData[0]);
         }
@@ -4862,38 +4984,38 @@ class TreeMapLegend {
             isLeafItem = (this.treemap.levels.length === 0 || groupIndex === this.treemap.levels.length);
             colorMapping = isLeafItem ? leaf.colorMapping : levels[groupIndex].colorMapping;
             for (let j = 0; j < colorMapping.length; j++) {
-                const colorMap$$1 = colorMapping[j];
+                const colorMap = colorMapping[j];
                 gradientElement = null;
                 rangeValue = Number(currentData[this.treemap.rangeColorValuePath]);
                 equalValue = currentData[this.treemap.equalColorValuePath];
-                colorMap$$1.value = !isNullOrUndefined(colorMap$$1.value) ? colorMap$$1.value.toString() : colorMap$$1.value;
-                if (!isNullOrUndefined(colorMap$$1.from) && !isNullOrUndefined(colorMap$$1.to) &&
-                    rangeValue >= colorMap$$1.from && rangeValue <= colorMap$$1.to && colorMap$$1.showLegend) {
+                colorMap.value = !isNullOrUndefined(colorMap.value) ? colorMap.value.toString() : colorMap.value;
+                if (!isNullOrUndefined(colorMap.from) && !isNullOrUndefined(colorMap.to) &&
+                    rangeValue >= colorMap.from && rangeValue <= colorMap.to && colorMap.showLegend) {
                     colorMapProcess = true;
                     isRange = true;
-                    actualValue = colorMap$$1.from + ' - ' + colorMap$$1.to;
-                    legendText = !isNullOrUndefined(colorMap$$1.label) ? colorMap$$1.label : colorMap$$1.from + ' - ' + colorMap$$1.to;
-                    fill = isNullOrUndefined(colorMap$$1.color) ? fill : colorMap$$1.color;
+                    actualValue = colorMap.from + ' - ' + colorMap.to;
+                    legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
+                    fill = isNullOrUndefined(colorMap.color) ? fill : colorMap.color;
                     isAddData = this.isAddNewLegendData(actualValue);
                 }
-                else if (!isNullOrUndefined(colorMap$$1.value) && equalValue === colorMap$$1.value && colorMap$$1.showLegend) {
+                else if (!isNullOrUndefined(colorMap.value) && equalValue === colorMap.value && colorMap.showLegend) {
                     colorMapProcess = true;
                     isEqualColor = true;
-                    actualValue = colorMap$$1.value.toString();
-                    legendText = !isNullOrUndefined(colorMap$$1.label) ? colorMap$$1.label : colorMap$$1.value.toString();
-                    fill = isNullOrUndefined(colorMap$$1.color) ? fill :
-                        Object.prototype.toString.call(colorMap$$1.color) === '[object Array]' ? colorMap$$1.color[0] : colorMap$$1.color;
+                    actualValue = colorMap.value.toString();
+                    legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value.toString();
+                    fill = isNullOrUndefined(colorMap.color) ? fill :
+                        Object.prototype.toString.call(colorMap.color) === '[object Array]' ? colorMap.color[0] : colorMap.color;
                     isAddData = this.isAddNewLegendData(actualValue);
                 }
-                if (colorMapProcess && isNullOrUndefined(colorMap$$1.value) && colorMap$$1.maxOpacity && colorMap$$1.minOpacity
+                if (colorMapProcess && isNullOrUndefined(colorMap.value) && colorMap.maxOpacity && colorMap.minOpacity
                     && this.treemap.legendSettings.mode === 'Interactive') {
                     const colors = [];
                     isDesaturation = true;
-                    if (Object.prototype.toString.call(colorMap$$1.color) === '[object Array]') {
-                        for (let q = 0; q < colorMap$$1.color.length; q++) {
-                            const offsetColor = 100 / (colorMap$$1.color.length - 1);
+                    if (Object.prototype.toString.call(colorMap.color) === '[object Array]') {
+                        for (let q = 0; q < colorMap.color.length; q++) {
+                            const offsetColor = 100 / (colorMap.color.length - 1);
                             const offsetValue = q * offsetColor + '%';
-                            const stop1Color = { colorStop: offsetValue.toString(), color: colorMap$$1.color[q] };
+                            const stop1Color = { colorStop: offsetValue.toString(), color: colorMap.color[q] };
                             colors.push(stop1Color);
                         }
                     }
@@ -4909,9 +5031,9 @@ class TreeMapLegend {
                         id: 'groupIndex_' + groupIndex + '_colorIndex_' + this.gradientCount, x1: '0%', y1: '0%', x2: x2, y2: y2
                     };
                     gradientElement = this.treemap.renderer.drawGradient('linearGradient', gradient, colors).childNodes[0];
-                    if (Object.prototype.toString.call(colorMap$$1.color) !== '[object Array]') {
-                        gradientElement.childNodes[0].setAttribute('stop-opacity', colorMap$$1.minOpacity.toString());
-                        gradientElement.childNodes[1].setAttribute('stop-opacity', colorMap$$1.maxOpacity.toString());
+                    if (Object.prototype.toString.call(colorMap.color) !== '[object Array]') {
+                        gradientElement.childNodes[0].setAttribute('stop-opacity', colorMap.minOpacity.toString());
+                        gradientElement.childNodes[1].setAttribute('stop-opacity', colorMap.maxOpacity.toString());
                     }
                     this.defsElement.appendChild(gradientElement);
                     this.gradientCount++;
@@ -4920,12 +5042,12 @@ class TreeMapLegend {
                     this.removeDuplicates(this.legendCollections, legendText) : false;
                 if (isAddData && isAddData['process'] && colorMapProcess && !isDuplicate) {
                     colorMapProcess = false;
-                    fill = ((Object.prototype.toString.call(colorMap$$1.color) === '[object Array]')) && isNullOrUndefined(gradientElement)
-                        && isNullOrUndefined(colorMap$$1.value) ? this.legendGradientColor(colorMap$$1, legendIndex) : fill;
+                    fill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]')) && isNullOrUndefined(gradientElement)
+                        && isNullOrUndefined(colorMap.value) ? this.legendGradientColor(colorMap, legendIndex) : fill;
                     this.legendCollections.push({
                         actualValue: actualValue, levelIndex: !isLeafItem ? j : -1, leafIndex: isLeafItem ? j : -1,
                         legendName: legendText, legendFill: fill, legendData: [], groupIndex: !isLeafItem ? groupIndex : -1,
-                        gradientElement: !isNullOrUndefined(gradientElement) ? gradientElement : isNullOrUndefined(colorMap$$1.value)
+                        gradientElement: !isNullOrUndefined(gradientElement) ? gradientElement : isNullOrUndefined(colorMap.value)
                             ? this.legendLinearGradient : null, name: data[i]['name'],
                         opacity: this.treemap.legendSettings.opacity, borderColor: this.treemap.legendSettings.border.color,
                         borderWidth: this.treemap.legendSettings.border.width
@@ -4940,13 +5062,13 @@ class TreeMapLegend {
                     this.legendCollections[isAddData['value']]['legendData'].push(data[i]);
                 }
                 if (!isRange && !isDesaturation && !isEqualColor) {
-                    if (isNullOrUndefined(colorMap$$1.from) && isNullOrUndefined(colorMap$$1.to)
-                        && isNullOrUndefined(colorMap$$1.minOpacity) &&
-                        isNullOrUndefined(colorMap$$1.maxOpacity) && isNullOrUndefined(colorMap$$1.value) &&
-                        !isNullOrUndefined(colorMap$$1.color)) {
-                        outfill = ((Object.prototype.toString.call(colorMap$$1.color) === '[object Array]'))
-                            ? colorMap$$1.color[0] : colorMap$$1.color;
-                        labelLegend = !isNullOrUndefined(colorMap$$1.label) ? colorMap$$1.label : 'Others';
+                    if (isNullOrUndefined(colorMap.from) && isNullOrUndefined(colorMap.to)
+                        && isNullOrUndefined(colorMap.minOpacity) &&
+                        isNullOrUndefined(colorMap.maxOpacity) && isNullOrUndefined(colorMap.value) &&
+                        !isNullOrUndefined(colorMap.color)) {
+                        outfill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]'))
+                            ? colorMap.color[0] : colorMap.color;
+                        labelLegend = !isNullOrUndefined(colorMap.label) ? colorMap.label : 'Others';
                         if (isNullOrUndefined(this.outOfRangeLegend)) {
                             this.legendCollections.push({
                                 actualValue: labelLegend, legendData: [],
@@ -5001,6 +5123,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend
+     *
      * @private
      */
     drawLegend() {
@@ -5113,7 +5236,7 @@ class TreeMapLegend {
                 };
                 treemap.trigger(legendItemRendering, eventArgs, (observedArgs) => {
                     const renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth, isLineShape ? collection['Fill'] : strokeColor, legend.opacity, '');
-                    legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions, legendText));
+                    legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions));
                     textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
                     renderTextElement(textOptions, legend.textStyle, legend.textStyle.color || treemap.themeStyle.legendTextColor, legendElement);
                     this.legendGroup.appendChild(legendElement);
@@ -5182,7 +5305,11 @@ class TreeMapLegend {
         const textSize = measureText(title, textStyle);
         this.legendBorderRect = new Rect((this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
             (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
-        const renderOptions = new RectOption(treemap.element.id + '_Legend_Border', legend.background, legend.border, 1, this.legendBorderRect, '');
+        let borderStyle = {
+            color: legend.border.color || this.treemap.themeStyle.legendBorderColor,
+            width: legend.border.width || this.treemap.themeStyle.legendBorderWidth
+        };
+        const renderOptions = new RectOption(treemap.element.id + '_Legend_Border', legend.background, borderStyle, 1, this.legendBorderRect, '');
         const legendBorder = treemap.renderer.drawRectangle(renderOptions);
         legendBorder.style.pointerEvents = 'none';
         this.legendGroup.appendChild(legendBorder);
@@ -5201,7 +5328,8 @@ class TreeMapLegend {
         const textSize = measureText(trimTitle, textStyle);
         if (legendTitle) {
             textOptions = new TextOption(this.treemap.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - (spacing / 2), 'middle', trimTitle, '');
-            let textElement = renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
+            const textElement = renderTextElement(textOptions, textStyle, textStyle.color ||
+                this.treemap.themeStyle.legendTitleColor, this.legendGroup);
             textElement.setAttribute('role', 'region');
             textElement.setAttribute('aria-label', legendTitle);
         }
@@ -5353,8 +5481,11 @@ class TreeMapLegend {
             this.translate = new Location(x, y);
         }
     }
-    // eslint-disable-next-line valid-jsdoc
-    /** @private */
+    /**
+     * @param {PointerEvent} e - Specifies the event.
+     * @returns {void}
+     * @private
+     */
     mouseUpHandler(e) {
         this.renderInteractivePointer(e);
         clearTimeout(this.clearTimeout);
@@ -5363,6 +5494,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the interactive pointer
+     *
      * @private
      */
     removeInteractivePointer() {
@@ -5401,6 +5533,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To add the event listener
+     *
      * @private
      */
     addEventListener() {
@@ -5413,6 +5546,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the event listener
+     *
      * @private
      */
     removeEventListener() {
@@ -5462,10 +5596,10 @@ class TreeMapLegend {
      * @returns {string} - Returns the legend color.
      * @private
      */
-    legendGradientColor(colorMap$$1, legendIndex) {
+    legendGradientColor(colorMap, legendIndex) {
         let legendFillColor;
         const xmlns = 'http://www.w3.org/2000/svg';
-        if (!isNullOrUndefined(colorMap$$1.color) && Object.prototype.toString.call(colorMap$$1.color) === '[object Array]') {
+        if (!isNullOrUndefined(colorMap.color) && Object.prototype.toString.call(colorMap.color) === '[object Array]') {
             const defElement = this.treemap.renderer.createDefs();
             const linerGradientEle = document.createElementNS(xmlns, 'linearGradient');
             const opacity = 1;
@@ -5477,11 +5611,11 @@ class TreeMapLegend {
             linerGradientEle.setAttribute('y1', 0 + '%');
             linerGradientEle.setAttribute('x2', x2 + '%');
             linerGradientEle.setAttribute('y2', y2 + '%');
-            for (let b = 0; b < colorMap$$1.color.length; b++) {
-                const offsetColor = 100 / (colorMap$$1.color.length - 1);
+            for (let b = 0; b < colorMap.color.length; b++) {
+                const offsetColor = 100 / (colorMap.color.length - 1);
                 const stopEle = document.createElementNS(xmlns, 'stop');
                 stopEle.setAttribute('offset', b * offsetColor + '%');
-                stopEle.setAttribute('stop-color', colorMap$$1.color[b]);
+                stopEle.setAttribute('stop-color', colorMap.color[b]);
                 stopEle.setAttribute('stop-opacity', opacity.toString());
                 linerGradientEle.appendChild(stopEle);
             }
@@ -5641,13 +5775,13 @@ class TreeMapHighlight {
         }
         else {
             if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
-                if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && this.treemap.legendSettings.visible) {
+                if (selectionModule ? this.shapeElement !== selectionModule.shapeElement :  this.treemap.legendSettings.visible) {
                     removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
                 }
             }
             if ((this.shapeTarget === 'highlight' || this.target === 'highlight') && this.treemap.legendSettings.visible) {
                 if (selectionModule ? this.shapeElement ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true : true) {
-                    if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true && selectionModule ?
+                    if (selectionModule ? this.shapeElement !== selectionModule.shapeElement :  selectionModule ?
                         selectionModule.legendSelect : true) {
                         removeShape(this.shapeHighlightCollection);
                         this.shapeHighlightCollection = [];
@@ -6062,11 +6196,13 @@ class TreeMapTooltip {
                     markerFill = item['options']['fill'];
                 }
                 if (this.treemap.enableRtl) {
-                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ? textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
+                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ?
+                            textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
                             || formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
                 }
                 else {
-                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ? textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
+                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ?
+                            textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
                             || this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap)];
                 }
                 if (document.getElementById(this.tooltipId)) {
@@ -6090,10 +6226,14 @@ class TreeMapTooltip {
                     || this.tooltipSettings.textStyle.color;
                 this.tooltipSettings.textStyle.opacity = this.treemap.themeStyle.tooltipTextOpacity
                     || this.tooltipSettings.textStyle.opacity;
+                let border = {
+                    width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
+                    color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
+                };
                 tootipArgs = {
                     cancel: false, name: tooltipRendering, item: item,
                     options: {
-                        location: location, text: tooltipContent, data: toolTipData,
+                        location: location, text: tooltipContent, data: toolTipData, border: border,
                         textStyle: this.tooltipSettings.textStyle, template: this.tooltipSettings.template
                     },
                     treemap: this.treemap,
@@ -6127,6 +6267,7 @@ class TreeMapTooltip {
         }
         if (!cancel) {
             this.svgTooltip = new Tooltip({
+                theme: this.treemap.theme,
                 enable: true,
                 header: '',
                 data: args['data'],
@@ -6139,6 +6280,7 @@ class TreeMapTooltip {
                 areaBounds: this.treemap.areaRect,
                 textStyle: args['textStyle'],
                 fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
+                border: args['border'],
                 enableShadow: true
             });
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -6170,6 +6312,7 @@ class TreeMapTooltip {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     *
      * @private
      */
     addEventListener() {
@@ -6182,6 +6325,7 @@ class TreeMapTooltip {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To unbind events for tooltip module
+     *
      * @private
      */
     removeEventListener() {
@@ -6216,13 +6360,5 @@ class TreeMapTooltip {
     }
 }
 
-/**
- * export all modules from treemap component
- */
-
-/**
- * exporting all modules from tree map index
- */
-
-export { TreeMap, LevelsData, Border, Margin, Font, CommonTitleSettings, SubTitleSettings, TitleSettings, ColorMapping, LegendSettings, InitialDrillSettings, LeafItemSettings, TooltipSettings, SelectionSettings, HighlightSettings, LevelSettings, load, loaded, beforePrint, itemRendering, drillStart, drillEnd, itemSelected, itemHighlight, tooltipRendering, itemClick, itemMove, click, doubleClick, rightClick, mouseMove, legendItemRendering, legendRendering, resize, defaultFont, Theme, getThemeStyle, Size, stringToNumber, Rect, RectOption, PathOption, measureText, TextOption, textTrim, Location, findPosition, createTextStyle, renderTextElement, setItemTemplateContent, getElement, itemsToOrder, isContainsData, findChildren, findHightLightItems, getTemplateFunction, convertElement, findLabelLocation, measureElement, getArea, getShortestEdge, convertToContainer, convertToRect, getMousePosition, colorMap, deSaturationColor, colorCollections, rgbToHex, getColorByValue, getGradientColor, getPercentageColor, getPercentage, wordWrap, textWrap, hide, orderByArea, maintainSelection, legendMaintain, removeClassNames, applyOptions, textFormatter, formatValue, ColorValue, convertToHexCode, componentToHex, convertHexToColor, colorNameToHex, drawSymbol, renderLegendShape, isParentItem, TreeMapAjax, removeShape, removeLegend, setColor, removeSelectionWithHighlight, getLegendIndex, pushCollection, triggerDownload, removeElement, TreeMapLegend, LayoutPanel, TreeMapHighlight, TreeMapSelection, TreeMapTooltip, ImageExport, PdfExport, Print };
+export { Border, ColorMapping, ColorValue, CommonTitleSettings, Font, HighlightSettings, ImageExport, InitialDrillSettings, LayoutPanel, LeafItemSettings, LegendSettings, LevelSettings, LevelsData, Location, Margin, PathOption, PdfExport, Print, Rect, RectOption, SelectionSettings, Size, SubTitleSettings, TextOption, Theme, TitleSettings, TooltipSettings, TreeMap, TreeMapAjax, TreeMapHighlight, TreeMapLegend, TreeMapSelection, TreeMapTooltip, applyOptions, beforePrint, click, colorCollections, colorMap, colorNameToHex, componentToHex, convertElement, convertHexToColor, convertToContainer, convertToHexCode, convertToRect, createTextStyle, deSaturationColor, defaultFont, doubleClick, drawSymbol, drillEnd, drillStart, findChildren, findHightLightItems, findLabelLocation, findPosition, formatValue, getArea, getColorByValue, getElement, getGradientColor, getLegendIndex, getMousePosition, getPercentage, getPercentageColor, getShortestEdge, getTemplateFunction, getThemeStyle, hide, isContainsData, isParentItem, itemClick, itemHighlight, itemMove, itemRendering, itemSelected, itemsToOrder, legendItemRendering, legendMaintain, legendRendering, load, loaded, maintainSelection, measureElement, measureText, mouseMove, orderByArea, pushCollection, removeClassNames, removeElement, removeLegend, removeSelectionWithHighlight, removeShape, renderLegendShape, renderTextElement, resize, rgbToHex, rightClick, setColor, setItemTemplateContent, stringToNumber, textFormatter, textTrim, textWrap, tooltipRendering, triggerDownload, wordWrap };
 //# sourceMappingURL=ej2-treemap.es2015.js.map