@syncfusion/ej2-treemap 25.1.35 → 26.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.35
+*  version : 26.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. 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

package/package.json

@@ -2,7 +2,7 @@
   "_from": "@syncfusion/ej2-treemap@*",
   "_id": "@syncfusion/ej2-treemap@16.31.24",
   "_inBundle": false,
-  "_integrity": "sha512-M7wDWdumPsBh/y8Gu2LFXBbVkACeJ7mBkOQpbx4p/sTEox27aAS8IYQcbHWHIlgluXzY9hZxQGJ0VBW7wZsIfA==",
+  "_integrity": "sha512-b/dFOdJGVefu4RMoPpY+rfnAQDaAllqX5mAkRftg/H/F4qazDrvrccaastX2enGhjyzgxSSLKEPnkcH2PUoEbQ==",
   "_location": "/@syncfusion/ej2-treemap",
   "_phantomChildren": {},
   "_requested": {
@@ -24,9 +24,9 @@
     "/@syncfusion/ej2-vue-treemap"
   ],
   "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.24.tgz",
-  "_shasum": "d048a4830bb8785823ecf0f51980fc3fac6f4c22",
+  "_shasum": "09d0f241172187e28742b8bf186b0671f1664d1f",
   "_spec": "@syncfusion/ej2-treemap@*",
-  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.1.35",
-    "@syncfusion/ej2-compression": "~25.1.35",
-    "@syncfusion/ej2-data": "~25.1.35",
-    "@syncfusion/ej2-file-utils": "~25.1.35",
-    "@syncfusion/ej2-pdf-export": "~25.1.35",
-    "@syncfusion/ej2-svg-base": "~25.1.35"
+    "@syncfusion/ej2-base": "~26.1.35",
+    "@syncfusion/ej2-compression": "~26.1.35",
+    "@syncfusion/ej2-data": "~26.1.35",
+    "@syncfusion/ej2-file-utils": "~26.1.35",
+    "@syncfusion/ej2-pdf-export": "~26.1.35",
+    "@syncfusion/ej2-svg-base": "~26.1.35"
   },
   "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": "25.1.35",
+  "version": "26.1.35",
   "sideEffects": false
 }

package/src/treemap/layout/legend.d.ts

@@ -39,6 +39,8 @@ export declare class TreeMapLegend {
     constructor(treemap: TreeMap);
     /**
      * method for legend
+     *
+     * @returns {void}
      * @private
      */
     renderLegend(): void;
@@ -52,6 +54,7 @@ export declare class TreeMapLegend {
     private isAddNewLegendData;
     /**
      * To draw the legend
+     *
      * @private
      */
     drawLegend(): void;
@@ -69,10 +72,15 @@ export declare class TreeMapLegend {
     renderInteractivePointer(e: PointerEvent | TouchEvent): void;
     private drawInteractivePointer;
     private getLegendAlignment;
-    /** @private */
+    /**
+     * @param {PointerEvent} e - Specifies the event.
+     * @returns {void}
+     * @private
+     */
     mouseUpHandler(e: PointerEvent): void;
     /**
      * To remove the interactive pointer
+     *
      * @private
      */
     removeInteractivePointer(): void;
@@ -94,11 +102,13 @@ export declare class TreeMapLegend {
     wireEvents(element: Element): void;
     /**
      * To add the event listener
+     *
      * @private
      */
     addEventListener(): void;
     /**
      * To remove the event listener
+     *
      * @private
      */
     removeEventListener(): void;

package/src/treemap/layout/legend.js

@@ -21,9 +21,10 @@ var TreeMapLegend = /** @class */ (function () {
         this.treemap = treemap;
         this.addEventListener();
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * method for legend
+     *
+     * @returns {void}
      * @private
      */
     TreeMapLegend.prototype.renderLegend = function () {
@@ -59,7 +60,7 @@ var TreeMapLegend = /** @class */ (function () {
         var treemap = this.treemap;
         var 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]);
         }
@@ -549,6 +550,7 @@ var TreeMapLegend = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend
+     *
      * @private
      */
     TreeMapLegend.prototype.drawLegend = function () {
@@ -661,7 +663,7 @@ var TreeMapLegend = /** @class */ (function () {
                 };
                 treemap.trigger(legendItemRendering, eventArgs, function (observedArgs) {
                     var renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth_1, isLineShape_1 ? collection['Fill'] : strokeColor_1, 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);
@@ -735,7 +737,11 @@ var TreeMapLegend = /** @class */ (function () {
         var 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));
-        var renderOptions = new RectOption(treemap.element.id + '_Legend_Border', legend.background, legend.border, 1, this.legendBorderRect, '');
+        var borderStyle = {
+            color: legend.border.color || this.treemap.themeStyle.legendBorderColor,
+            width: legend.border.width || this.treemap.themeStyle.legendBorderWidth
+        };
+        var renderOptions = new RectOption(treemap.element.id + '_Legend_Border', legend.background, borderStyle, 1, this.legendBorderRect, '');
         var legendBorder = treemap.renderer.drawRectangle(renderOptions);
         legendBorder.style.pointerEvents = 'none';
         this.legendGroup.appendChild(legendBorder);
@@ -754,7 +760,8 @@ var TreeMapLegend = /** @class */ (function () {
         var 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, '');
-            var textElement = renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
+            var textElement = renderTextElement(textOptions, textStyle, textStyle.color ||
+                this.treemap.themeStyle.legendTitleColor, this.legendGroup);
             textElement.setAttribute('role', 'region');
             textElement.setAttribute('aria-label', legendTitle);
         }
@@ -906,8 +913,11 @@ var TreeMapLegend = /** @class */ (function () {
             this.translate = new Location(x, y);
         }
     };
-    // eslint-disable-next-line valid-jsdoc
-    /** @private */
+    /**
+     * @param {PointerEvent} e - Specifies the event.
+     * @returns {void}
+     * @private
+     */
     TreeMapLegend.prototype.mouseUpHandler = function (e) {
         this.renderInteractivePointer(e);
         clearTimeout(this.clearTimeout);
@@ -916,6 +926,7 @@ var TreeMapLegend = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the interactive pointer
+     *
      * @private
      */
     TreeMapLegend.prototype.removeInteractivePointer = function () {
@@ -954,6 +965,7 @@ var TreeMapLegend = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To add the event listener
+     *
      * @private
      */
     TreeMapLegend.prototype.addEventListener = function () {
@@ -966,6 +978,7 @@ var TreeMapLegend = /** @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the event listener
+     *
      * @private
      */
     TreeMapLegend.prototype.removeEventListener = function () {

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

@@ -73,7 +73,7 @@ var LayoutPanel = /** @class */ (function () {
         }
         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
     LayoutPanel.prototype.calculateLayoutItems = function (data, rect) {
         this.renderItems = [];
         this.parentData = [];
@@ -378,7 +378,7 @@ var LayoutPanel = /** @class */ (function () {
         }
         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
     LayoutPanel.prototype.onDemandProcess = function (childItems) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var parentItem = {};
@@ -518,6 +518,7 @@ var LayoutPanel = /** @class */ (function () {
             textStyle = (isLeafItem ? leaf.labelStyle : levels[index].headerStyle);
             textStyle.fontFamily = this_1.treemap.themeStyle.labelFontFamily || textStyle.fontFamily;
             textStyle.fontWeight = textStyle.fontWeight || this_1.treemap.themeStyle.fontWeight;
+            textStyle.size = textStyle.size || this_1.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;
@@ -550,10 +551,11 @@ var LayoutPanel = /** @class */ (function () {
                         }
                     }
                     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 {
@@ -652,14 +654,16 @@ var LayoutPanel = /** @class */ (function () {
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var 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 (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] : treemap.palette.length > 0 ?
+                        parentData[i]['data'][treemap.colorValuePath] : (!isNullOrUndefined(treemap.palette) && treemap.palette.length > 0) ?
                         treemap.palette[i % treemap.palette.length] : '#808080';
                 }
             }

package/src/treemap/model/base.js

@@ -228,7 +228,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Property(null)
     ], LegendSettings.prototype, "imageUrl", void 0);
     __decorate([
-        Complex({ color: '#000000', width: 0 }, Border)
+        Complex({ color: null, width: null }, Border)
     ], LegendSettings.prototype, "border", void 0);
     __decorate([
         Complex({ color: '#000000', width: 0 }, Border)
@@ -328,7 +328,7 @@ var LeafItemSettings = /** @class */ (function (_super) {
         Property('TopLeft')
     ], LeafItemSettings.prototype, "labelPosition", void 0);
     __decorate([
-        Complex({ color: null, size: '12px' }, Font)
+        Complex({ color: null, size: null }, Font)
     ], LeafItemSettings.prototype, "labelStyle", void 0);
     __decorate([
         Property(null)
@@ -372,7 +372,7 @@ var TooltipSettings = /** @class */ (function (_super) {
         Property(['Circle'])
     ], TooltipSettings.prototype, "markerShapes", void 0);
     __decorate([
-        Complex({}, Border)
+        Complex({ width: null, color: null }, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)

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

@@ -38,10 +38,13 @@ 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') && (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)');
                 }
             }

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

@@ -160,6 +160,7 @@ export interface IItemClickEventArgs extends ITreeMapEventArgs {
 }
 /**
  * Defines the event argument of the treemap item data.
+ *
  * @private
  */
 export interface IItemDataEventArgs {
@@ -349,6 +350,7 @@ export interface ITreeMapTooltipRenderEventArgs extends ITreeMapEventArgs {
 }
 /**
  * Specifies the event arguments available for the tooltip events in the treemap.
+ *
  * @private
  */
 export interface ITreeMapTooltipArgs extends ITreeMapEventArgs {
@@ -454,6 +456,7 @@ export interface IShapes {
 }
 /**
  * Defines the theme supported for treemap.
+ *
  * @private
  */
 export interface IThemeStyle {
@@ -525,4 +528,24 @@ export interface IThemeStyle {
      * Defines the font family of the label contents in the treemap, supporting the theme.
      */
     labelFontFamily?: string;
+    /**
+     * Defines the font size of the label contents in the treemap, supporting the theme.
+     */
+    labelFontSize?: string;
+    /**
+     * Defines the border color of the legend in the treemap, supporting the theme.
+     */
+    legendBorderColor?: string;
+    /**
+     * Defines the border width of the legend in the treemap, supporting the theme.
+     */
+    legendBorderWidth?: number;
+    /**
+     * Defines the border color of the tooltip in the treemap, supporting the theme.
+     */
+    tooltipBorderColor?: string;
+    /**
+     * Defines the border width of the tooltip in the treemap, supporting the theme.
+     */
+    tooltipBorderWidth?: number;
 }

package/src/treemap/model/interface.js

@@ -1 +0,0 @@
-

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

@@ -40,10 +40,13 @@ 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') && (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)');
                 }
             }

package/src/treemap/model/print.js

@@ -61,15 +61,19 @@ var Print = /** @class */ (function () {
         }
         else {
             var exportElement = treeMap.element.cloneNode(true);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var backgroundElement = exportElement.getElementsByTagName('svg')[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 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') && (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)');
                     }
                 }

package/src/treemap/model/theme.js

@@ -54,7 +54,10 @@ export 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':
@@ -72,7 +75,10 @@ export 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':
@@ -93,7 +99,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
-                labelFontFamily: 'HelveticaNeue'
+                labelFontFamily: 'HelveticaNeue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'tailwind':
@@ -114,7 +123,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Inter'
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'tailwinddark':
@@ -135,7 +147,10 @@ export function getThemeStyle(theme) {
                 fontSize: '14px',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Inter'
+                labelFontFamily: 'Inter',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'bootstrap5':
@@ -156,7 +171,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue'
+                labelFontFamily: 'Helvetica Neue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'bootstrap5dark':
@@ -177,7 +195,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Helvetica Neue'
+                labelFontFamily: 'Helvetica Neue',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'fluent':
@@ -198,7 +219,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Segoe UI'
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'fluentdark':
@@ -219,7 +243,10 @@ export function getThemeStyle(theme) {
                 fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
-                labelFontFamily: 'Segoe UI'
+                labelFontFamily: 'Segoe UI',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'material3':
@@ -240,7 +267,10 @@ export function getThemeStyle(theme) {
                 fontWeight: '400',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
-                labelFontFamily: 'Roboto'
+                labelFontFamily: 'Roboto',
+                labelFontSize: '12px',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0
             };
             break;
         case 'material3dark':
@@ -261,7 +291,84 @@ export 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:
@@ -279,7 +386,10 @@ export 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;
     }

package/src/treemap/treemap.d.ts

@@ -41,21 +41,25 @@ import { PdfExport } from './model/pdf-export';
 export declare class TreeMap extends Component<HTMLElement> implements INotifyPropertyChanged {
     /**
      * Sets and gets the module that is used to add tooltip in the treemap.
+     *
      * @private
      */
     treeMapTooltipModule: TreeMapTooltip;
     /**
      * Sets and gets the module that is used to add highlight functionality in the treemap.
+     *
      * @private
      */
     treeMapHighlightModule: TreeMapHighlight;
     /**
      * Sets and gets the module that is used to add selection functionality in the treemap.
+     *
      * @private
      */
     treeMapSelectionModule: TreeMapSelection;
     /**
      * Sets and gets the module that is used to add legend in the treemap.
+     *
      * @private
      */
     treeMapLegendModule: TreeMapLegend;