@syncfusion/ej2-treemap 23.2.4 → 24.2.3

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

@@ -270,7 +270,7 @@ __decorate$1([
     Property('')
 ], LegendSettings.prototype, "height", void 0);
 __decorate$1([
-    Complex({ size: '12px', fontFamily: null, fontWeight: null }, Font)
+    Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "textStyle", void 0);
 __decorate$1([
     Property(null)
@@ -300,7 +300,7 @@ __decorate$1([
     Complex({}, CommonTitleSettings)
 ], LegendSettings.prototype, "title", void 0);
 __decorate$1([
-    Complex({ size: '14px' }, Font)
+    Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
 ], LegendSettings.prototype, "titleStyle", void 0);
 __decorate$1([
     Property('Bottom')
@@ -420,7 +420,7 @@ __decorate$1([
     Complex({}, Border)
 ], TooltipSettings.prototype, "border", void 0);
 __decorate$1([
-    Complex({ fontFamily: defaultFont, size: null, fontWeight: null }, Font)
+    Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 /**
  * Sets and gets the options for customizing the selection of the leaf items in treemap.
@@ -1557,8 +1557,6 @@ function drawSymbol(location, shape, size, url, options, label) {
     const svgRenderer = new SvgRenderer('');
     const temp = renderLegendShape(location, size, shape, options, url);
     const htmlElement = svgRenderer['draw' + temp.functionName](temp.renderOption);
-    htmlElement.setAttribute('aria-label', label);
-    htmlElement.setAttribute('role', 'region');
     return htmlElement;
 }
 /**
@@ -2370,7 +2368,7 @@ class LayoutPanel {
                     itemGroup.setAttribute('aria-label', item['name']);
                     if ((this.treemap.enableDrillDown && isLeafItem) || (this.treemap.selectionSettings.enable || this.treemap.highlightSettings.enable)) {
                         itemGroup.setAttribute('role', 'button');
-                        itemGroup.setAttribute('tabindex', (this.treemap.tabIndex + i + 2).toString());
+                        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' :
                             this.treemap.highlightSettings.enable && !this.treemap.selectionSettings.enable && !this.treemap.enableDrillDown ? 'default' : 'pointer';
                     }
@@ -3341,7 +3339,7 @@ let TreeMap = class TreeMap extends Component {
             const 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('role', '');
-            element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
+            element.setAttribute('tabindex', this.tabIndex.toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = (this.availableSize.height - titleBounds.y - titlePadding - this.margin.bottom);
                 this.areaRect = new Rect(this.margin.left, titleBounds.y + titlePadding, width, height);
@@ -3710,14 +3708,8 @@ let TreeMap = class TreeMap extends Component {
      */
     addTabIndex() {
         this.element.setAttribute('aria-label', this.description || 'TreeMap Element');
-        if (this.enableDrillDown || (this.selectionSettings.enable || this.highlightSettings.enable)) {
-            this.element.setAttribute('role', 'button');
-            this.element.setAttribute('tabindex', this.tabIndex.toString());
-            this.element.style.cursor = this.highlightSettings.enable && !this.selectionSettings.enable && !this.enableDrillDown ? 'default' : 'pointer';
-        }
-        else {
-            this.element.setAttribute('role', 'region');
-        }
+        this.element.setAttribute('role', 'region');
+        this.element.setAttribute('tabindex', this.tabIndex.toString());
     }
     /**
      * This method handles the window resize event on treemap.
@@ -3861,6 +3853,9 @@ let TreeMap = class TreeMap extends Component {
             eventArgs = { cancel: false, name: itemMove, treemap: this, item: item, mouseEvent: e };
             this.trigger(itemMove, eventArgs);
         }
+        else {
+            this.element.style.cursor = 'default';
+        }
         this.notify(Browser.touchMoveEvent, e);
     }
     /**
@@ -4372,7 +4367,7 @@ __decorate([
     Property(null)
 ], TreeMap.prototype, "description", void 0);
 __decorate([
-    Property(1)
+    Property(0)
 ], TreeMap.prototype, "tabIndex", void 0);
 __decorate([
     Property(null)
@@ -4533,9 +4528,9 @@ class TreeMapLegend {
                 * parseFloat(legend.width) : parseFloat(legend.width) : null;
             let 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.fontFamily = titleTextStyle.fontFamily || treemap.themeStyle.fontFamily;
             titleTextStyle.fontWeight = titleTextStyle.fontWeight || treemap.themeStyle.titleFontWeight;
-            titleTextStyle.size = treemap.themeStyle.legendFontSize || titleTextStyle.size;
+            titleTextStyle.size = titleTextStyle.size || treemap.themeStyle.legendFontSize;
             const legendTitleSize = measureText(legendTitle, titleTextStyle);
             let startX = 0;
             let startY = 0;
@@ -5078,8 +5073,10 @@ class TreeMapLegend {
             for (let i = 0; i < this.totalPages[page]['Collection'].length; i++) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const collection = this.totalPages[page]['Collection'][i];
-                const legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 const legendText = collection['DisplayText'];
+                const legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
+                legendElement.setAttribute('aria-label', legendText + ' Legend');
+                legendElement.setAttribute('role', 'region');
                 const shapeId = treemap.element.id + '_Legend_Shape_Index_' + i;
                 const textId = treemap.element.id + '_Legend_Text_Index_' + i;
                 let shapeLocation = collection['Shape'];
@@ -6039,12 +6036,12 @@ class TreeMapTooltip {
                     markerFill = item['options']['fill'];
                 }
                 if (this.treemap.enableRtl) {
-                    tooltipContent = [SanitizeHtmlHelper.sanitize(textFormatter(this.tooltipSettings.format, toolTipData, this.treemap)) ||
-                            SanitizeHtmlHelper.sanitize(formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString())];
+                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ? textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
+                            || formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
                 }
                 else {
-                    tooltipContent = [SanitizeHtmlHelper.sanitize(textFormatter(this.tooltipSettings.format, toolTipData, this.treemap)) ||
-                            SanitizeHtmlHelper.sanitize(this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap))];
+                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ? textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
+                            || this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap)];
                 }
                 if (document.getElementById(this.tooltipId)) {
                     tooltipEle = document.getElementById(this.tooltipId);
@@ -6060,7 +6057,7 @@ class TreeMapTooltip {
                 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.fontFamily = 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
@@ -6115,7 +6112,8 @@ class TreeMapTooltip {
                 palette: [markerFill],
                 areaBounds: this.treemap.areaRect,
                 textStyle: args['textStyle'],
-                fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor
+                fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
+                enableShadow: true
             });
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.treemap.isVue || this.treemap.isVue3) {