@syncfusion/ej2-treemap 21.2.3 → 22.1.34

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

@@ -1,4 +1,4 @@
-import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Fetch, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -199,7 +199,7 @@ var Font = /** @__PURE__ @class */ (function (_super) {
         Property(defaultFont)
     ], Font.prototype, "fontFamily", void 0);
     __decorate$1([
-        Property('Normal')
+        Property('')
     ], Font.prototype, "fontWeight", void 0);
     __decorate$1([
         Property('Normal')
@@ -234,7 +234,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate$1([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], SubTitleSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property('Center')
@@ -250,7 +250,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate$1([
-        Complex({ fontFamily: null }, Font)
+        Complex({ fontFamily: null, fontWeight: null }, Font)
     ], TitleSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property('Center')
@@ -321,7 +321,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], LegendSettings.prototype, "height", void 0);
     __decorate$1([
-        Complex({ fontFamily: null }, Font)
+        Complex({ size: '12px', fontFamily: null, fontWeight: null }, Font)
     ], LegendSettings.prototype, "textStyle", void 0);
     __decorate$1([
         Property(null)
@@ -486,7 +486,7 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({}, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate$1([
-        Complex({ fontFamily: defaultFont, size: '13px' }, Font)
+        Complex({ fontFamily: defaultFont, size: null, fontWeight: null }, Font)
     ], TooltipSettings.prototype, "textStyle", void 0);
     return TooltipSettings;
 }(ChildProperty));
@@ -1006,9 +1006,12 @@ function findHightLightItems(data, items, mode, treeMap) {
 function getTemplateFunction(template) {
     var templateFn = null;
     try {
-        if (document.querySelectorAll(template).length) {
+        if (typeof template !== 'function' && document.querySelectorAll(template).length) {
             templateFn = compile(document.querySelector(template).innerHTML.trim());
         }
+        else {
+            templateFn = compile(template);
+        }
     }
     catch (e) {
         templateFn = compile(template);
@@ -2425,6 +2428,7 @@ var LayoutPanel = /** @__PURE__ @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;
@@ -2584,7 +2588,7 @@ var LayoutPanel = /** @__PURE__ @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++) {
@@ -2685,12 +2689,15 @@ 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'
@@ -2700,12 +2707,15 @@ 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'
@@ -2715,15 +2725,18 @@ 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'
@@ -2733,15 +2746,18 @@ 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'
@@ -2751,14 +2767,17 @@ 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',
@@ -2769,15 +2788,18 @@ 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'
@@ -2787,15 +2809,18 @@ 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'
@@ -2805,15 +2830,18 @@ 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'
@@ -2823,30 +2851,78 @@ 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'
@@ -2915,7 +2991,19 @@ var Print = /** @__PURE__ @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;
     };
@@ -2973,12 +3061,23 @@ var ImageExport = /** @__PURE__ @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);
@@ -3065,10 +3164,12 @@ var PdfExport = /** @__PURE__ @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();
@@ -3199,7 +3300,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var dataModule;
         var queryModule;
-        var ajaxModule;
+        var fetchApiModule;
         var localAjax;
         if (this.dataSource instanceof DataManager) {
             dataModule = this.dataSource;
@@ -3214,12 +3315,12 @@ var TreeMap = /** @__PURE__ @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();
@@ -3321,6 +3422,7 @@ var TreeMap = /** @__PURE__ @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)) {
@@ -3747,6 +3849,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     _this.trigger(resize, args_1, function (observedArgs) {
                         _this.render();
+                        _this.refreshing = false;
                     });
                 }, 500);
             }
@@ -4540,6 +4643,7 @@ var TreeMapLegend = /** @__PURE__ @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;
@@ -4548,6 +4652,7 @@ var TreeMapLegend = /** @__PURE__ @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;
@@ -6071,7 +6176,10 @@ var TreeMapTooltip = /** @__PURE__ @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