@syncfusion/ej2-treemap 21.2.10 → 22.1.34

package/dist/global/index.d.ts

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

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treemap@*",
-  "_id": "@syncfusion/ej2-treemap@21.2.3",
+  "_id": "@syncfusion/ej2-treemap@16.31.19",
   "_inBundle": false,
-  "_integrity": "sha512-8qSAjnD2lyUNGycnVtg8ydZu/qrJPM8x1cqTVF8tp92UjEHhr0M6qN6FU0nmLNIOyaGp20UAj2ZvHgS66KhimA==",
+  "_integrity": "sha512-Zd0QP8PC3dYhL0gNq60V2FFbZA39NcVMG0N1Ta95KdJOGa4o2dMv4AkYCb9AEP7ET8QZyINPYHW/cJJM2AdQUg==",
   "_location": "/@syncfusion/ej2-treemap",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-treemap",
     "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treemap/-/ej2-treemap-21.2.3.tgz",
-  "_shasum": "b43abb1cc2f691edd7f77338fbc8081c8cee7aef",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.19.tgz",
+  "_shasum": "9886c29bc2547d8c1f38499e3b95aa49f4a678f8",
   "_spec": "@syncfusion/ej2-treemap@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-compression": "~21.2.3",
-    "@syncfusion/ej2-data": "~21.2.9",
-    "@syncfusion/ej2-file-utils": "~21.2.3",
-    "@syncfusion/ej2-pdf-export": "~21.2.10",
-    "@syncfusion/ej2-svg-base": "~21.2.3"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-compression": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-file-utils": "~22.1.34",
+    "@syncfusion/ej2-pdf-export": "~22.1.34",
+    "@syncfusion/ej2-svg-base": "~22.1.34"
   },
   "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": "21.2.10",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/treemap/layout/legend.js

@@ -97,6 +97,7 @@ var TreeMapLegend = /** @class */ (function () {
             var legendHeight = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ?
                 (treemap.availableSize.height / 100) * parseFloat(legend.height) : parseFloat(legend.height) : null;
             titleTextStyle.fontFamily = treemap.themeStyle.fontFamily || titleTextStyle.fontFamily;
+            titleTextStyle.fontWeight = titleTextStyle.fontWeight || treemap.themeStyle.titleFontWeight;
             titleTextStyle.size = treemap.themeStyle.legendFontSize || titleTextStyle.size;
             var legendTitleSize = measureText(legendTitle, titleTextStyle);
             var startX_1 = 0;
@@ -105,6 +106,7 @@ var TreeMapLegend = /** @class */ (function () {
             var itemTextStyle = legend.textStyle;
             itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
             itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
+            itemTextStyle.fontWeight = itemTextStyle.fontWeight || treemap.themeStyle.fontWeight;
             if (legendMode === 'Default') {
                 legendWidth = (isNullOrUndefined(legendWidth)) ? treemap.areaRect.width : legendWidth;
                 legendHeight = (isNullOrUndefined(legendHeight)) ? treemap.areaRect.height : legendHeight;

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

@@ -516,6 +516,7 @@ var LayoutPanel = /** @class */ (function () {
                     treeMap.enableRtl ? renderText + ' [-]' : '[-] ' + renderText : renderText;
             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;
             border = isLeafItem ? leaf.border : levels[index].border;
             position = !isLeafItem ? (levels[index].headerAlignment) === 'Near' ? 'TopLeft' : (levels[index].headerAlignment) === 'Center' ?
                 'TopCenter' : 'TopRight' : leaf.labelPosition;
@@ -675,7 +676,7 @@ var LayoutPanel = /** @class */ (function () {
     secondaryEle, groupId, rect, position, template, item, isLeafItem) {
         var templateId = isLeafItem ? groupId + '_LabelTemplate' : groupId + '_HeaderTemplate';
         var baseTemplateId = isLeafItem ? '_LabelTemplate' : '_HeaderTemplate';
-        if (isNullOrUndefined(template['prototype'])) {
+        if (isNullOrUndefined(template['prototype']) && typeof template === 'string') {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var keys = Object.keys(item['data']);
             for (var i = 0; i < keys.length; i++) {

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

@@ -85,7 +85,7 @@ export interface FontModel {
     /**
      * Sets and gets the font weight for the text in the treemap.
      *
-     * @default 'Normal'
+     * @default null
      */
     fontWeight?: string;
 
@@ -519,8 +519,9 @@ export interface LeafItemSettingsModel {
      * Sets and gets the label template of leaf item in the treemap to render custom elements in the labels.
      *
      * @default null
+     * @aspType string
      */
-    labelTemplate?: string;
+    labelTemplate?: string | Function;
 
     /**
      * Sets and gets the position of the label template of treemap leaf item.
@@ -559,8 +560,9 @@ export interface TooltipSettingsModel {
      * Sets and gets the template for tooltip in the treemap.
      *
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Sets and gets the string to format the tooltip in the treemap.
@@ -755,8 +757,9 @@ export interface LevelSettingsModel {
      * Sets and gets the template for header in the treemap.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Sets and gets the string to format the header label of the level leaf items in the treemap.

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

@@ -77,7 +77,7 @@ export declare class Font extends ChildProperty<Font> {
     /**
      * Sets and gets the font weight for the text in the treemap.
      *
-     * @default 'Normal'
+     * @default null
      */
     fontWeight: string;
     /**
@@ -439,8 +439,9 @@ export declare class LeafItemSettings extends ChildProperty<LeafItemSettings> {
      * Sets and gets the label template of leaf item in the treemap to render custom elements in the labels.
      *
      * @default null
+     * @aspType string
      */
-    labelTemplate: string;
+    labelTemplate: string | Function;
     /**
      * Sets and gets the position of the label template of treemap leaf item.
      *
@@ -472,8 +473,9 @@ export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
      * Sets and gets the template for tooltip in the treemap.
      *
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Sets and gets the string to format the tooltip in the treemap.
      *
@@ -637,8 +639,9 @@ export declare class LevelSettings extends ChildProperty<LevelSettings> {
      * Sets and gets the template for header in the treemap.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Sets and gets the string to format the header label of the level leaf items in the treemap.
      *

package/src/treemap/model/base.js

@@ -80,7 +80,7 @@ var Font = /** @class */ (function (_super) {
         Property(defaultFont)
     ], Font.prototype, "fontFamily", void 0);
     __decorate([
-        Property('Normal')
+        Property('')
     ], Font.prototype, "fontWeight", void 0);
     __decorate([
         Property('Normal')
@@ -117,7 +117,7 @@ var SubTitleSettings = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], SubTitleSettings.prototype, "textStyle", void 0);
     __decorate([
         Property('Center')
@@ -134,7 +134,7 @@ var TitleSettings = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], TitleSettings.prototype, "textStyle", void 0);
     __decorate([
         Property('Center')
@@ -207,7 +207,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate([
-        Complex({ fontFamily: null }, Font)
+        Complex({ size: '12px', fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate([
         Property(null)
@@ -375,7 +375,7 @@ var TooltipSettings = /** @class */ (function (_super) {
         Complex({}, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate([
-        Complex({ fontFamily: defaultFont, size: '13px' }, Font)
+        Complex({ fontFamily: defaultFont, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
     return TooltipSettings;
 }(ChildProperty));

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

@@ -1,4 +1,4 @@
-import { createElement, Browser } from '@syncfusion/ej2-base';
+import { createElement, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { triggerDownload } from '../utils/helper';
 /**
  * ImageExport module handles the export to image functionality for treemap.
@@ -34,12 +34,23 @@ var ImageExport = /** @class */ (function () {
                     'width': treeMap.availableSize.width.toString()
                 }
             });
+            var exportElement = treeMap.svgObject.cloneNode(true);
+            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')) {
+                    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')) {
+                    exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
             var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             var svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                treeMap.svgObject.outerHTML +
+                exportElement.outerHTML +
                 '</svg>';
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
-                [(new XMLSerializer()).serializeToString(treeMap.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);

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

@@ -370,8 +370,10 @@ export interface ITreeMapTooltipArgs extends ITreeMapEventArgs {
     textStyle: FontModel;
     /**
      * Defines the template for rendering the tooltip.
+     *
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
 }
 /**
  * Specifies the event arguments available when rendering each legend item in the treemap.
@@ -463,6 +465,10 @@ export interface IThemeStyle {
      * Defines the title text color of the treemap, supporting the theme.
      */
     titleFontColor: string;
+    /**
+     * Defines the title font weight of the treemap, supporting the theme.
+     */
+    titleFontWeight: string;
     /**
      * Defines the subtitle text color of the treemap, supporting the theme.
      */
@@ -475,6 +481,10 @@ export interface IThemeStyle {
      * Defines the tooltip text color of the treemap supporting the theme.
      */
     tooltipFontColor: string;
+    /**
+     * Defines the tooltip text size of the treemap supporting the theme.
+     */
+    tooltipFontSize: string;
     /**
      * Defines the opacity of tooltip in the treemap, supporting the theme.
      */
@@ -491,6 +501,10 @@ export interface IThemeStyle {
      * Defines the color of the legend text in the treemap, supporting the theme.
      */
     legendTextColor: string;
+    /**
+     * Defines the font weight of texts in the treemap, supporting the theme.
+     */
+    fontWeight?: string;
     /**
      * Defines the font family of texts in the treemap, supporting the theme.
      */

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

@@ -40,10 +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 === 'TailwindDark' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Bootstrap5Dark'
-                    || treeMap.theme === 'Fluent' || treeMap.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3') && (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')) {
+                    exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
             }
             var url = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
             var image = new Image();

package/src/treemap/model/print.js

@@ -1,4 +1,4 @@
-import { print as printFunction, createElement } from '@syncfusion/ej2-base';
+import { print as printFunction, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getElement } from '../utils/helper';
 import { beforePrint } from '../model/constants';
 /**
@@ -60,7 +60,19 @@ var Print = /** @class */ (function () {
             }
         }
         else {
-            div.appendChild(treeMap.element.cloneNode(true));
+            var exportElement = treeMap.element.cloneNode(true);
+            var backgroundElement = exportElement.childNodes[1];
+            if (!isNullOrUndefined(backgroundElement)) {
+                backgroundElement = backgroundElement.childNodes[0];
+                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')) {
+                    exportElement.childNodes[1].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')) {
+                    exportElement.childNodes[1].childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
+                }
+            }
+            div.appendChild(exportElement);
         }
         return div;
     };

package/src/treemap/model/theme.js

@@ -43,12 +43,15 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: color,
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#DADADA',
                 legendTextColor: '#DADADA',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'
@@ -58,12 +61,15 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: '#000000',
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'
@@ -73,15 +79,18 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: '#FFFFFF',
                 titleFontColor: '#212529',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#212529',
                 tooltipFillColor: '#000000',
                 tooltipFontColor: '#FFFFFF',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 0.9,
                 legendTitleColor: '#212529',
                 legendTextColor: '#212529',
                 fontFamily: 'HelveticaNeue-Medium',
                 fontSize: '16px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '14px',
                 labelFontFamily: 'HelveticaNeue'
@@ -91,15 +100,18 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'transparent',
                 titleFontColor: '#374151',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#374151',
                 tooltipFillColor: '#111827',
                 tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#374151',
                 legendTextColor: '#374151',
                 fontFamily: 'Inter',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Inter'
@@ -109,14 +121,17 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'transparent',
                 titleFontColor: '#D1D5DB',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#D1D5DB',
                 tooltipFillColor: '#F9FAFB',
                 tooltipFontColor: '#1F2937',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#D1D5DB',
                 legendTextColor: '#D1D5DB',
                 fontFamily: 'Inter',
+                fontWeight: 'Normal',
                 fontSize: '14px',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
@@ -127,15 +142,18 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#212529',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#212529',
                 tooltipFillColor: '#212529',
                 tooltipFontColor: '#F9FAFB',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#212529',
                 legendTextColor: '#212529',
                 fontFamily: 'Helvetica Neue',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Helvetica Neue'
@@ -145,15 +163,18 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#FFFFFF',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#FFFFFF',
                 tooltipFillColor: '#E9ECEF',
                 tooltipFontColor: '#212529',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#FFFFFF',
                 legendTextColor: '#FFFFFF',
                 fontFamily: 'Helvetica Neue',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Helvetica Neue'
@@ -163,15 +184,18 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#201F1E',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#201F1E',
                 tooltipFillColor: '#FFFFFF',
                 tooltipFontColor: '#323130',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#201F1E',
                 legendTextColor: '#201F1E',
                 fontFamily: 'Segoe UI',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Segoe UI'
@@ -181,30 +205,78 @@ export function getThemeStyle(theme) {
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#F3F2F1',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#F3F2F1',
                 tooltipFillColor: '#252423',
                 tooltipFontColor: '#F3F2F1',
+                tooltipFontSize: '13px',
                 tooltipFillOpacity: 1,
                 tooltipTextOpacity: 1,
                 legendTitleColor: '#F3F2F1',
                 legendTextColor: '#F3F2F1',
                 fontFamily: 'Segoe UI',
                 fontSize: '14px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '12px',
                 legendFontSize: '12px',
                 labelFontFamily: 'Segoe UI'
             };
             break;
+        case 'material3':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#1C1B1F',
+                titleFontWeight: '500',
+                subTitleFontColor: '#1C1B1F',
+                tooltipFillColor: '#313033',
+                tooltipFontColor: '#F4EFF4',
+                tooltipFontSize: '14px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#1C1B1F',
+                legendTextColor: '#49454E',
+                fontFamily: 'Roboto',
+                fontSize: '16px',
+                fontWeight: '400',
+                subtitleFontSize: '14px',
+                legendFontSize: '14px',
+                labelFontFamily: 'Roboto'
+            };
+            break;
+        case 'material3dark':
+            style = {
+                backgroundColor: 'transparent',
+                titleFontColor: '#E6E1E5',
+                titleFontWeight: '500',
+                subTitleFontColor: '#E6E1E5',
+                tooltipFillColor: '#E6E1E5',
+                tooltipFontColor: '#313033',
+                tooltipFontSize: '14px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#E6E1E5',
+                legendTextColor: '#CAC4D0',
+                fontFamily: 'Roboto',
+                fontSize: '16px',
+                fontWeight: '400',
+                subtitleFontSize: '14px',
+                legendFontSize: '14px',
+                labelFontFamily: 'Roboto'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
                 titleFontColor: '#424242',
+                titleFontWeight: 'Normal',
                 subTitleFontColor: '#424242',
                 tooltipFillColor: '#363F4C',
                 tooltipFontColor: '#ffffff',
+                tooltipFontSize: '13px',
                 legendTitleColor: '#353535',
                 legendTextColor: '#353535',
                 fontSize: '15px',
+                fontWeight: 'Normal',
                 subtitleFontSize: '14px',
                 legendFontSize: '13px',
                 fontFamily: 'Roboto, Noto, Sans-serif'

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, extend, Ajax } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/treemap/treemap.js

@@ -20,7 +20,7 @@ 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, Ajax } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, extend, Fetch } 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';
@@ -107,7 +107,7 @@ var TreeMap = /** @class */ (function (_super) {
         var _this = this;
         var dataModule;
         var queryModule;
-        var ajaxModule;
+        var fetchApiModule;
         var localAjax;
         if (this.dataSource instanceof DataManager) {
             dataModule = this.dataSource;
@@ -122,12 +122,12 @@ var TreeMap = /** @class */ (function (_super) {
         }
         else if (this.dataSource instanceof TreeMapAjax) {
             localAjax = this.dataSource;
-            ajaxModule = new Ajax(localAjax.dataOptions, localAjax.type, localAjax.async, localAjax.contentType);
-            ajaxModule.onSuccess = function (args) {
-                _this.dataSource = JSON.parse('[' + args + ']')[0];
+            fetchApiModule = new Fetch(localAjax.dataOptions, localAjax.type, localAjax.contentType);
+            fetchApiModule.onSuccess = function (args) {
+                _this.dataSource = args;
                 _this.renderTreeMapElements();
             };
-            ajaxModule.send(localAjax.sendData);
+            fetchApiModule.send(localAjax.sendData);
         }
         else {
             this.renderTreeMapElements();
@@ -229,6 +229,7 @@ var TreeMap = /** @class */ (function (_super) {
         var titlePadding = 10;
         var width = (this.availableSize.width - this.margin.right - this.margin.left);
         style.fontFamily = style.fontFamily || this.themeStyle.fontFamily;
+        style.fontWeight = style.fontWeight || this.themeStyle.titleFontWeight;
         style.size = style.size || (type === 'title' ? this.themeStyle.fontSize : this.themeStyle.subtitleFontSize);
         if (title.text) {
             if (isNullOrUndefined(groupEle)) {

package/src/treemap/user-interaction/tooltip.js

@@ -80,7 +80,10 @@ var TreeMapTooltip = /** @class */ (function () {
                 }
                 location = getMousePosition(pageX, pageY, this.treemap.svgObject);
                 location.y = (this.tooltipSettings.template) ? location.y + 10 : location.y;
+                this.tooltipSettings.textStyle.size = this.tooltipSettings.textStyle.size || this.treemap.themeStyle.tooltipFontSize;
                 this.tooltipSettings.textStyle.fontFamily = this.treemap.themeStyle.fontFamily;
+                this.tooltipSettings.textStyle.fontStyle = !isNullOrUndefined(this.tooltipSettings.textStyle.fontStyle) ? this.tooltipSettings.textStyle.fontStyle : 'Normal';
+                this.tooltipSettings.textStyle.fontWeight = this.tooltipSettings.textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
                 this.tooltipSettings.textStyle.color = this.treemap.themeStyle.tooltipFontColor
                     || this.tooltipSettings.textStyle.color;
                 this.tooltipSettings.textStyle.opacity = this.treemap.themeStyle.tooltipTextOpacity