@syncfusion/ej2-treemap 27.2.2 → 28.1.39

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.2
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.39
+*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treemap@*",
-  "_id": "@syncfusion/ej2-treemap@27.1.53",
+  "_id": "@syncfusion/ej2-treemap@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-+hzaGEi6Xd/IV3niTwsIGdPmZFsXIi8dGAtvOnxl6v5LelfRSEOt+2lPfCEo8kt9RsWnB6vJmu58r0gLfVp4zQ==",
+  "_integrity": "sha512-El1k0YtGfUvHSLUWCCf99WYUOuUw90LIVZMDnC8iRwBFGPoZRktjx5h6hnZjs6XmrzVtBLksINCO4Os85tloSw==",
   "_location": "/@syncfusion/ej2-treemap",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-treemap",
     "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treemap/-/ej2-treemap-27.1.53.tgz",
-  "_shasum": "99fd9c5350c65495873ddfa91d38fe5dda59b7ba",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treemap/-/ej2-treemap-28.1.33.tgz",
+  "_shasum": "1fac964b894760375cc3c4b74d2542bbae61ea85",
   "_spec": "@syncfusion/ej2-treemap@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-compression": "~27.2.2",
-    "@syncfusion/ej2-data": "~27.2.2",
-    "@syncfusion/ej2-file-utils": "~27.2.2",
-    "@syncfusion/ej2-pdf-export": "~27.2.2",
-    "@syncfusion/ej2-svg-base": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-compression": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-file-utils": "~28.1.33",
+    "@syncfusion/ej2-pdf-export": "~28.1.38",
+    "@syncfusion/ej2-svg-base": "~28.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeMap Components",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "27.2.2",
+  "version": "28.1.39",
   "sideEffects": false
 }

package/src/treemap/layout/legend.js

@@ -1,5 +1,5 @@
 import { findChildren, Location, Rect, Size, measureText, TextOption, PathOption, RectOption, drawSymbol, orderByArea, legendMaintain } from '../utils/helper';
-import { Browser, isNullOrUndefined, EventHandler, extend } from '@syncfusion/ej2-base';
+import { Browser, isNullOrUndefined, EventHandler, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { renderTextElement, textTrim } from '../utils/helper';
 import { legendItemRendering, legendRendering } from '../model/constants';
 /**
@@ -77,7 +77,7 @@ var TreeMapLegend = /** @class */ (function () {
             var defaultSize = 25;
             var textPadding = 10;
             var position = legend.position;
-            var legendTitle = legend.title.text;
+            var legendTitle = treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(legend.title.text) : legend.title.text;
             var titleTextStyle = legend.titleStyle;
             var legendMode = legend.mode;
             var shapeX = 0;
@@ -119,7 +119,8 @@ var TreeMapLegend = /** @class */ (function () {
                     if (isNullOrUndefined(this.totalPages[this.page])) {
                         this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
                     }
-                    var legendTextSize = measureText(legendItem['legendName'], itemTextStyle);
+                    var legendTextSize = measureText(treemap.enableHtmlSanitizer ?
+                        SanitizeHtmlHelper.sanitize(legendItem['legendName']) : legendItem['legendName'], itemTextStyle);
                     this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
                     if (i === 0) {
                         startX_1 = shapeX = (leftPadding + (shapeWidth / 2));
@@ -327,7 +328,16 @@ var TreeMapLegend = /** @class */ (function () {
         if (this.treemap.enableDrillDown && !isNullOrUndefined(this.treemap.drilledLegendItems)) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var childElement = this.treemap.drilledLegendItems;
-            legendFillColor = childElement['data']['options']['fill'];
+            if (!isNullOrUndefined(childElement['data']['options'])) {
+                legendFillColor = childElement['data']['options']['fill'];
+            }
+            else {
+                for (var k = 0; k < childElement.length; k++) {
+                    legendFillColor = this.treemap.palette.length > 0 ? this.treemap.palette[k % this.treemap.palette.length] :
+                        childElement[k]['data'][this.treemap.colorValuePath];
+                    break;
+                }
+            }
             if (childElement['data']['isDrilled']) {
                 child = findChildren(childElement['data'])['values'];
             }
@@ -357,7 +367,8 @@ var TreeMapLegend = /** @class */ (function () {
                                 ? legendFillColor : this.treemap.palette[i % this.treemap.palette.length] :
                                 child[i]['data'][this.treemap.colorValuePath],
                             legendData: [],
-                            itemArea: child[i]['weight']
+                            itemArea: child[i]['weight'],
+                            levelOrderName: child[i]['levelOrderName']
                         });
                     }
                 }
@@ -483,7 +494,7 @@ var TreeMapLegend = /** @class */ (function () {
                     this.legendCollections[this.legendCollections.length - 1]['legendData'].push(data[i]);
                     legendIndex++;
                 }
-                else if (colorMapProcess && !isDuplicate) {
+                else if (colorMapProcess) {
                     colorMapProcess = false;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.legendCollections[isAddData['value']]['legendData'].push(data[i]);
@@ -501,14 +512,19 @@ var TreeMapLegend = /** @class */ (function () {
                         if (isNullOrUndefined(this.outOfRangeLegend) && !isDuplicate) {
                             this.legendCollections.push({
                                 actualValue: labelLegend, legendData: [],
-                                legendName: labelLegend, legendFill: outfill
+                                legendName: labelLegend, legendFill: outfill, groupIndex: (!isLeafItem || groupIndex > -1) ? groupIndex : -1
                             });
                             otherIndex = this.legendCollections.length;
                             this.outOfRangeLegend = this.legendCollections[otherIndex - 1];
                             legendIndex++;
                         }
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.legendCollections[this.legendCollections.length - 1]['legendData'].push(data[i]);
+                        for (var k = this.legendCollections.length - 1; k >= 0; k--) {
+                            if (this.legendCollections[k]['groupIndex'] === data[i]['groupIndex']) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                this.legendCollections[k]['legendData'].push(data[i]);
+                                break;
+                            }
+                        }
                     }
                 }
             }
@@ -597,7 +613,8 @@ var TreeMapLegend = /** @class */ (function () {
                             - this.translate.x - Math.abs(this.legendBorderRect.x - textLocation.x);
                     }
                 }
-                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
+                var text = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
+                textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
                 renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
                 this.legendGroup.appendChild(render.drawRectangle(rectOptions));
             }
@@ -646,7 +663,7 @@ var TreeMapLegend = /** @class */ (function () {
             var _loop_1 = function (i) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection = this_1.totalPages[page]['Collection'][i];
-                var legendText = collection['DisplayText'];
+                var legendText = this_1.treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(collection['DisplayText']) : collection['DisplayText'];
                 var legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
@@ -755,7 +772,7 @@ var TreeMapLegend = /** @class */ (function () {
     TreeMapLegend.prototype.renderLegendTitle = function () {
         var legend = this.treemap.legendSettings;
         var textStyle = legend.titleStyle;
-        var legendTitle = legend.title.text;
+        var legendTitle = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(legend.title.text)) : legend.title.text;
         var textOptions;
         var spacing = 10;
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
@@ -779,6 +796,7 @@ var TreeMapLegend = /** @class */ (function () {
         var treemap = this.treemap;
         var target = e.target;
         var interactiveId = treemap.element.id + '_Interactive_Legend';
+        var pointerDrawn = false;
         target = !(e.type.indexOf('touch') > -1) ? target :
             document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -796,7 +814,7 @@ var TreeMapLegend = /** @class */ (function () {
             var legendElement = void 0;
             targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_Item_Index_')[1])];
             var svgRect = treemap.svgObject.getBoundingClientRect();
-            for (var i = 0; i < this.legendCollections.length; i++) {
+            for (var i = 0; i < this.legendCollections.length && !pointerDrawn; i++) {
                 currentData = this.legendCollections[i];
                 legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
                 legendRect = legendElement.getBoundingClientRect();
@@ -804,16 +822,33 @@ var TreeMapLegend = /** @class */ (function () {
                 fill = legendElement.getAttribute('fill');
                 stroke = legend.shapeBorder.color;
                 strokeWidth = legend.shapeBorder.width;
-                if (!isNullOrUndefined(currentData['legendData'])) {
+                if (!isNullOrUndefined(currentData['legendData']) && currentData['legendData'].length > 0) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     data = currentData['legendData'];
-                    for (var j = 0; j < data.length; j++) {
-                        if (data[j]['levelOrderName'] === targetItem['levelOrderName']) {
-                            this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
-                            break;
+                    var valuePath = treemap.rangeColorValuePath;
+                    if (targetItem['levelOrderName'].indexOf(this.legendCollections[i]['legendName']) > -1) {
+                        this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                        pointerDrawn = true;
+                    }
+                    else {
+                        for (var j = 0; j < data.length; j++) {
+                            if ((treemap.rangeColorValuePath && treemap.leafItemSettings.colorMapping.length > 0)
+                                ? data[j]['data'][valuePath] === targetItem['data'][valuePath]
+                                : (data[j]['levelOrderName'] === targetItem['levelOrderName'] ||
+                                    data[j]['levelOrderName'].indexOf(targetItem['levelOrderName']) > -1)) {
+                                this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                                pointerDrawn = true;
+                                break;
+                            }
                         }
                     }
                 }
+                else if (this.treemap.leafItemSettings.colorMapping.length === 0 && this.treemap.palette) {
+                    if (targetItem['levelOrderName'].indexOf(currentData['levelOrderName']) > -1) {
+                        this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
+                        pointerDrawn = true;
+                    }
+                }
             }
         }
         else {

package/src/treemap/layout/render-panel.js

@@ -1,5 +1,5 @@
 import { Rect, itemsToOrder, TextOption, measureText, textTrim, hide, wordWrap, textWrap, getTemplateFunction, convertElement, findLabelLocation, PathOption, textFormatter, colorNameToHex, convertHexToColor, colorMap, measureElement, convertToContainer, convertToRect, getShortestEdge, getArea, orderByArea, isParentItem, maintainSelection } from '../utils/helper';
-import { isNullOrUndefined, createElement, extend } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { findChildren, renderTextElement } from '../utils/helper';
 import { itemRendering } from '../model/constants';
 /**
@@ -472,7 +472,8 @@ var LayoutPanel = /** @class */ (function () {
             groupId = elementID + '_Level_Index_' + index + '_Item_Index_' + i;
             itemGroup = this_1.renderer.createGroup({ id: groupId + '_Group' });
             gap = (isLeafItem ? leaf.gap : levels[index].groupGap) / 2;
-            var treemapItemRect = this_1.treemap.totalRect ? convertToContainer(this_1.treemap.totalRect) : this_1.treemap.areaRect;
+            var treemapItemRect = this_1.treemap.totalRect ? (treeMap.legendSettings.visible ? this_1.treemap.totalRect
+                : convertToContainer(this_1.treemap.totalRect)) : this_1.treemap.areaRect;
             if (treeMap.layoutType === 'Squarified') {
                 rect.width = Math.abs(rect.x - rect.width) - gap;
                 rect.height = Math.abs(rect.y - rect.height) - gap;
@@ -515,6 +516,9 @@ var LayoutPanel = /** @class */ (function () {
             renderText = !isLeafItem && childItems && childItems.length > 0 && this_1.treemap.enableDrillDown ?
                 !item['isDrilled'] ? treeMap.enableRtl ? renderText + ' [+]' : '[+] ' + renderText :
                     treeMap.enableRtl ? renderText + ' [-]' : '[-] ' + renderText : renderText;
+            if (treeMap.enableHtmlSanitizer) {
+                renderText = SanitizeHtmlHelper.sanitize(renderText);
+            }
             var fontFamily = (isLeafItem ? leaf.labelStyle.fontFamily : levels[index].headerStyle.fontFamily);
             fontFamily = fontFamily || this_1.treemap.themeStyle.labelFontFamily;
             var size = (isLeafItem ? leaf.labelStyle.size : levels[index].headerStyle.size);
@@ -583,6 +587,7 @@ var LayoutPanel = /** @class */ (function () {
             secondaryEle.appendChild(templateGroup);
         }
         this.treemap.svgObject.appendChild(this.layoutGroup);
+        maintainSelection(this.treemap, this.layoutGroup, 'treeMapSelection');
     };
     LayoutPanel.prototype.renderItemText = function (text, parentElement, textStyle, rect, interSectAction, groupId, fill, position, connectorText) {
         var padding = 5;
@@ -672,7 +677,8 @@ var LayoutPanel = /** @class */ (function () {
             for (var i = 0; i < parentData.length; i++) {
                 if (parentData[i]['levelOrderName'] === item['levelOrderName'].split('#')[0]) {
                     itemFill = !isNullOrUndefined(itemFill) ? itemFill : !isNullOrUndefined(treemap.colorValuePath) ?
-                        parentData[i]['data'][treemap.colorValuePath] : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
+                        parentData[i]['data'][treemap.colorValuePath] : !isNullOrUndefined(item['options']) ?
+                        item['options'].fill : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
                         treemap.palette[i % treemap.palette.length] : '#808080';
                 }
             }
@@ -705,6 +711,9 @@ var LayoutPanel = /** @class */ (function () {
                 template = template.replace(new regExp('{{:' + keys[i] + '}}', 'g'), item['data'][keys[i].toString()]);
             }
         }
+        if (this.treemap.enableHtmlSanitizer && typeof template === 'string') {
+            template = SanitizeHtmlHelper.sanitize(template);
+        }
         var labelElement;
         if (!isNullOrUndefined(document.getElementById(this.treemap.element.id + '_Secondary_Element'))) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/treemap/model/image-export.js

@@ -38,12 +38,12 @@ var ImageExport = /** @class */ (function () {
             var backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                     treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                     treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');

package/src/treemap/model/pdf-export.js

@@ -40,12 +40,12 @@ var PdfExport = /** @class */ (function () {
             var backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                     treeMap.theme === 'Fluent2')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                     treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');

package/src/treemap/model/print.js

@@ -67,12 +67,12 @@ var Print = /** @class */ (function () {
                 backgroundElement = backgroundElement.childNodes[0];
                 if (!isNullOrUndefined(backgroundElement)) {
                     var backgroundColor = backgroundElement.getAttribute('fill');
-                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
+                    if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
                         treeMap.theme === 'Fluent2')
                         && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                     }
-                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
+                    else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
                         treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
                         && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                         backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');

package/src/treemap/model/theme.js

@@ -77,9 +77,9 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
+                labelFontFamily: defaultFont,
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontSize: '12px',
-                labelFontFamily: defaultFont,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };
@@ -156,6 +156,54 @@ export function getThemeStyle(theme) {
                 legendBorderWidth: 0
             };
             break;
+        case 'tailwind3':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#111827',
+                titleFontWeight: '600',
+                subTitleFontColor: '#111827',
+                tooltipFillColor: '#111827',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#111827',
+                legendTextColor: '#111827',
+                fontFamily: 'Inter',
+                fontSize: '14px',
+                fontWeight: '400',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
+        case 'tailwind3dark':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                titleFontWeight: '600',
+                subTitleFontColor: '#FFFFFF',
+                tooltipFillColor: '#F9FAFB',
+                tooltipFontColor: '#1F2937',
+                tooltipFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                fontFamily: 'Inter',
+                fontWeight: '400',
+                fontSize: '14px',
+                subtitleFontSize: '12px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
+            };
+            break;
         case 'bootstrap5':
             style = {
                 backgroundColor: 'transparent',
@@ -387,9 +435,9 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
-                labelFontFamily: defaultFont,
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 labelFontSize: '12px',
+                labelFontFamily: defaultFont,
                 legendBorderColor: '#000000',
                 legendBorderWidth: 0
             };

package/src/treemap/treemap-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, extend, Fetch } from '@syncfusion/ej2-base';import { Complex, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';import { Event, EmitType, Internationalization } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { isNullOrUndefined, createElement, EventHandler, Browser, remove } from '@syncfusion/ej2-base';import { BorderModel, TitleSettingsModel, MarginModel, LevelSettingsModel, FontModel } from './model/base-model';import { LeafItemSettingsModel, TooltipSettingsModel, LegendSettingsModel, InitialDrillSettingsModel } from './model/base-model';import { HighlightSettingsModel, SelectionSettingsModel } from './model/base-model';import { Border, Margin, TitleSettings, LegendSettings, InitialDrillSettings } from './model/base';import { SelectionSettings, TooltipSettings, LevelSettings, LeafItemSettings, HighlightSettings } from './model/base';import { LayoutMode, TreeMapTheme, RenderingMode } from './utils/enum';import { ILoadEventArgs, ILoadedEventArgs, IPrintEventArgs } from '../treemap/model/interface';import { ILegendItemRenderingEventArgs, ILegendRenderingEventArgs } from '../treemap/model/interface';import { IItemRenderingEventArgs, IResizeEventArgs, IDoubleClickEventArgs, IRightClickEventArgs } from '../treemap/model/interface';import { IItemClickEventArgs, IItemMoveEventArgs, IClickEventArgs, IMouseMoveEventArgs } from '../treemap/model/interface';import { IDrillStartEventArgs, IItemSelectedEventArgs, ITreeMapTooltipRenderEventArgs } from '../treemap/model/interface';import { IItemHighlightEventArgs, IDrillEndEventArgs, IThemeStyle } from '../treemap/model/interface';import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent } from '../treemap/utils/helper';import { removeClassNames, removeShape, textFormatter } from '../treemap/utils/helper';import { findPosition, Location, TextOption, renderTextElement, isContainsData, TreeMapAjax } from '../treemap/utils/helper';import { load, loaded, drillStart, drillEnd } from '../treemap/model/constants';import { itemClick, itemMove, click, mouseMove, resize, doubleClick, rightClick } from '../treemap/model/constants';import { LayoutPanel } from './layout/render-panel';import { TreeMapTooltip } from './user-interaction/tooltip';import { ExportType } from '../treemap/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { TreeMapHighlight, TreeMapSelection } from './user-interaction/highlight-selection';import { TreeMapLegend } from './layout/legend';import { DataManager, Query } from '@syncfusion/ej2-data';import { getThemeStyle } from './model/theme';import { Print } from './model/print';import { ImageExport } from './model/image-export';import { PdfExport } from './model/pdf-export';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, extend, Fetch, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Complex, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';import { Event, EmitType, Internationalization } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { isNullOrUndefined, createElement, EventHandler, Browser, remove } from '@syncfusion/ej2-base';import { BorderModel, TitleSettingsModel, MarginModel, LevelSettingsModel, FontModel } from './model/base-model';import { LeafItemSettingsModel, TooltipSettingsModel, LegendSettingsModel, InitialDrillSettingsModel } from './model/base-model';import { HighlightSettingsModel, SelectionSettingsModel } from './model/base-model';import { Border, Margin, TitleSettings, LegendSettings, InitialDrillSettings } from './model/base';import { SelectionSettings, TooltipSettings, LevelSettings, LeafItemSettings, HighlightSettings } from './model/base';import { LayoutMode, TreeMapTheme, RenderingMode } from './utils/enum';import { ILoadEventArgs, ILoadedEventArgs, IPrintEventArgs } from '../treemap/model/interface';import { ILegendItemRenderingEventArgs, ILegendRenderingEventArgs } from '../treemap/model/interface';import { IItemRenderingEventArgs, IResizeEventArgs, IDoubleClickEventArgs, IRightClickEventArgs } from '../treemap/model/interface';import { IItemClickEventArgs, IItemMoveEventArgs, IClickEventArgs, IMouseMoveEventArgs } from '../treemap/model/interface';import { IDrillStartEventArgs, IItemSelectedEventArgs, ITreeMapTooltipRenderEventArgs } from '../treemap/model/interface';import { IItemHighlightEventArgs, IDrillEndEventArgs, IThemeStyle } from '../treemap/model/interface';import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent, legendMaintain, removeLegend } from '../treemap/utils/helper';import { removeClassNames, textFormatter } from '../treemap/utils/helper';import { findPosition, Location, TextOption, renderTextElement, isContainsData, TreeMapAjax } from '../treemap/utils/helper';import { load, loaded, drillStart, drillEnd } from '../treemap/model/constants';import { itemClick, itemMove, click, mouseMove, resize, doubleClick, rightClick } from '../treemap/model/constants';import { LayoutPanel } from './layout/render-panel';import { TreeMapTooltip } from './user-interaction/tooltip';import { ExportType } from '../treemap/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { TreeMapHighlight, TreeMapSelection } from './user-interaction/highlight-selection';import { TreeMapLegend } from './layout/legend';import { DataManager, Query } from '@syncfusion/ej2-data';import { getThemeStyle } from './model/theme';import { Print } from './model/print';import { ImageExport } from './model/image-export';import { PdfExport } from './model/pdf-export';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -166,6 +166,13 @@ export interface TreeMapModel extends ComponentModel{
      */
     drillDownView?: boolean;
 
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the TreeMap. If `enableHtmlSanitizer` set to **true**, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * Specifies the options for customizing the initial drill down in treemap.
      */

package/src/treemap/treemap.d.ts

@@ -218,6 +218,12 @@ export declare class TreeMap extends Component<HTMLElement> implements INotifyPr
      * @default false
      */
     drillDownView: boolean;
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the TreeMap. If `enableHtmlSanitizer` set to **true**, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * Specifies the options for customizing the initial drill down in treemap.
      */

package/src/treemap/treemap.js

@@ -20,15 +20,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { Component, NotifyPropertyChanges, Property, extend, Fetch } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, extend, Fetch, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Complex, Collection } from '@syncfusion/ej2-base';
 import { Event, Internationalization } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { isNullOrUndefined, createElement, EventHandler, Browser, remove } from '@syncfusion/ej2-base';
 import { Border, Margin, TitleSettings, LegendSettings, InitialDrillSettings } from './model/base';
 import { SelectionSettings, TooltipSettings, LevelSettings, LeafItemSettings, HighlightSettings } from './model/base';
-import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent } from '../treemap/utils/helper';
-import { removeClassNames, removeShape, textFormatter } from '../treemap/utils/helper';
+import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent, legendMaintain, removeLegend } from '../treemap/utils/helper';
+import { removeClassNames, textFormatter } from '../treemap/utils/helper';
 import { findPosition, TextOption, renderTextElement, isContainsData, TreeMapAjax } from '../treemap/utils/helper';
 import { load, loaded, drillStart, drillEnd } from '../treemap/model/constants';
 import { itemClick, itemMove, click, mouseMove, resize, doubleClick, rightClick } from '../treemap/model/constants';
@@ -154,6 +154,9 @@ var TreeMap = /** @class */ (function (_super) {
         }
         this.layout.processLayoutPanel();
         this.element.appendChild(this.svgObject);
+        if (!isNullOrUndefined(this.treeMapLegendModule) && this.legendSettings.visible) {
+            legendMaintain(this, this.treeMapLegendModule.legendGroup);
+        }
         this.elementChange();
         this.trigger(loaded, { treemap: this, isResized: this.isResize });
         this.isResize = false;
@@ -249,14 +252,15 @@ var TreeMap = /** @class */ (function (_super) {
             if (isNullOrUndefined(groupEle)) {
                 groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
             }
-            var trimmedTitle = textTrim(width, title.text, style);
+            var titleText = this.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(title.text)) : title.text;
+            var trimmedTitle = textTrim(width, titleText, style);
             var elementSize = measureText(trimmedTitle, style);
             var rect = (isNullOrUndefined(bounds)) ? new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
             var location_1 = findPosition(rect, title.alignment, elementSize, type);
             var options = new TextOption(this.element.id + '_TreeMap_' + type, location_1.x, location_1.y, 'start', trimmedTitle);
             var titleBounds = new Rect(location_1.x, location_1.y, elementSize.width, elementSize.height);
             var element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
-            element.setAttribute('aria-label', title.description || title.text);
+            element.setAttribute('aria-label', title.description || titleText);
             element.setAttribute('role', 'region');
             element.setAttribute('tabindex', this.tabIndex.toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
@@ -1046,7 +1050,7 @@ var TreeMap = /** @class */ (function (_super) {
         }
         removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
         if (this.treeMapHighlightModule) {
-            removeShape(this.treeMapHighlightModule.shapeHighlightCollection);
+            removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
             this.treeMapHighlightModule.highLightId = '';
         }
     };
@@ -1294,6 +1298,9 @@ var TreeMap = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeMap.prototype, "drillDownView", void 0);
+    __decorate([
+        Property(false)
+    ], TreeMap.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({}, InitialDrillSettings)
     ], TreeMap.prototype, "initialDrillDown", void 0);