@syncfusion/ej2-treemap 19.2.55 → 19.4.38

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

@@ -1,4 +1,4 @@
-import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, compile, createElement, extend, isBlazor, isNullOrUndefined, merge, print, remove, resetBlazorTemplate, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, 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';
@@ -760,6 +760,19 @@ function renderTextElement(options, font, color, parent, isMinus = false) {
     }
     return htmlObject;
 }
+function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
+    const itemSelect = targetId.split('_RectPath')[0];
+    let itemTemplate;
+    if (targetId.indexOf('_LabelTemplate') > -1) {
+        itemTemplate = targetElement;
+    }
+    else {
+        itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
+    }
+    if (!isNullOrUndefined(itemTemplate)) {
+        itemTemplate.innerHTML = contentItemTemplate;
+    }
+}
 function getElement(id) {
     return document.getElementById(id);
 }
@@ -1559,15 +1572,6 @@ function removeElement(id) {
     return element ? remove(element) : null;
 }
 
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * To calculate and render the shape layer
  */
@@ -2092,10 +2096,6 @@ class LayoutPanel {
                 cancel: false, name: itemRendering, treemap: this.treemap, text: renderText,
                 currentItem: item, RenderItems: this.renderItems, options: item['options']
             };
-            if (this.treemap.isBlazor) {
-                const { treemap, RenderItems } = eventArgs, blazorEventArgs = __rest$1(eventArgs, ["treemap", "RenderItems"]);
-                eventArgs = blazorEventArgs;
-            }
             this.treemap.trigger(itemRendering, eventArgs, (observedArgs) => {
                 if (!observedArgs.cancel) {
                     rectPath = ' M ' + rect.x + ' ' + rect.y + ' L ' + (rect.x + rect.width) + ' ' + rect.y +
@@ -2124,8 +2124,6 @@ class LayoutPanel {
         }
         if (templateGroup.childNodes.length > 0) {
             secondaryEle.appendChild(templateGroup);
-            updateBlazorTemplate(this.treemap.element.id + '_HeaderTemplate', 'HeaderTemplate', levels[levels.length - 1]);
-            updateBlazorTemplate(this.treemap.element.id + '_LabelTemplate', 'LabelTemplate', leaf);
         }
         this.treemap.svgObject.appendChild(this.layoutGroup);
     }
@@ -2397,6 +2395,74 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Inter'
             };
             break;
+        case 'bootstrap5':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#212529',
+                subTitleFontColor: '#212529',
+                tooltipFillColor: '#212529',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#212529',
+                legendTextColor: '#212529',
+                fontFamily: 'Helvetica Neue',
+                fontSize: '14px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Helvetica Neue'
+            };
+            break;
+        case 'bootstrap5dark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                tooltipFillColor: '#E9ECEF',
+                tooltipFontColor: '#212529',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                fontFamily: 'Helvetica Neue',
+                fontSize: '14px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Helvetica Neue'
+            };
+            break;
+        case 'fluentui':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#201F1E',
+                subTitleFontColor: '#201F1E',
+                tooltipFillColor: '#FFFFFF',
+                tooltipFontColor: '#323130',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#201F1E',
+                legendTextColor: '#201F1E',
+                fontFamily: 'Segoe UI',
+                fontSize: '14px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Segoe UI'
+            };
+            break;
+        case 'fluentuidark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#F3F2F1',
+                subTitleFontColor: '#F3F2F1',
+                tooltipFillColor: '#252423',
+                tooltipFontColor: '#F3F2F1',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                legendTitleColor: '#F3F2F1',
+                legendTextColor: '#F3F2F1',
+                fontFamily: 'Segoe UI',
+                fontSize: '14px',
+                legendFontSize: '12px',
+                labelFontFamily: 'Segoe UI'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',
@@ -2626,7 +2692,7 @@ class PdfExport {
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark')
+                if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark')
                     && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
@@ -2683,15 +2749,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     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;
 };
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Represents the treemap component.
  * ```html
@@ -2726,8 +2783,7 @@ let TreeMap = class TreeMap extends Component {
         this.legendId = [];
     }
     preRender() {
-        this.isBlazor = isBlazor();
-        this.trigger(load, { treemap: this.isBlazor ? null : this }, () => {
+        this.trigger(load, { treemap: this }, () => {
             this.initPrivateVariable();
             this.unWireEVents();
             this.createSvg();
@@ -2789,7 +2845,7 @@ let TreeMap = class TreeMap extends Component {
         this.layout.processLayoutPanel();
         this.element.appendChild(this.svgObject);
         this.elementChange();
-        this.trigger(loaded, this.isBlazor ? { isResized: this.isResize } : { treemap: this, isResized: this.isResize });
+        this.trigger(loaded, { treemap: this, isResized: this.isResize });
         this.isResize = false;
         this.renderComplete();
     }
@@ -2802,14 +2858,6 @@ let TreeMap = class TreeMap extends Component {
                 remove(this.svgObject);
             }
         }
-        if (this.leafItemSettings.labelTemplate) {
-            resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        }
-        for (let i = 0; i < this.levels.length; i++) {
-            if (this.levels[i].headerTemplate) {
-                resetBlazorTemplate(this.element.id + '_HeaderTemplate', 'HeaderTemplate');
-            }
-        }
         this.clearTemplate();
         const containerWidth = this.element.clientWidth;
         const containerHeight = this.element.clientHeight;
@@ -3262,12 +3310,8 @@ let TreeMap = class TreeMap extends Component {
             cancel: false,
             previousSize: this.availableSize,
             currentSize: new Size(0, 0),
-            treemap: this.isBlazor ? null : this
+            treemap: this
         };
-        if (this.isBlazor) {
-            const { treemap } = args, blazorEventArgs = __rest(args, ["treemap"]);
-            args = blazorEventArgs;
-        }
         if (this.resizeTo) {
             clearTimeout(this.resizeTo);
         }
@@ -3296,8 +3340,7 @@ let TreeMap = class TreeMap extends Component {
         let itemIndex;
         const labelText = targetEle.innerHTML;
         const clickArgs = { cancel: false, name: click, treemap: this, mouseEvent: e };
-        const clickBlazorArgs = { cancel: false, name: click, mouseEvent: e };
-        this.trigger(click, this.isBlazor ? clickBlazorArgs : clickArgs);
+        this.trigger(click, clickArgs);
         if (targetId.indexOf('_Item_Index') > -1) {
             e.preventDefault();
             itemIndex = parseFloat(targetId.split('_')[6]);
@@ -3306,22 +3349,6 @@ let TreeMap = class TreeMap extends Component {
                 groupIndex: this.layout.renderItems[itemIndex]['groupIndex'], groupName: this.layout.renderItems[itemIndex]['name'],
                 text: labelText, contentItemTemplate: labelText
             };
-            if (this.isBlazor) {
-                const data = {
-                    groupIndex: eventArgs.item['groupIndex'],
-                    groupName: eventArgs.item['groupName'],
-                    isDrilled: eventArgs.item['isDrilled'],
-                    isLeafItem: eventArgs.item['isLeafItem'],
-                    itemArea: eventArgs.item['itemArea'],
-                    levelOrderName: eventArgs.item['levelOrderName'],
-                    name: eventArgs.item['name'],
-                    options: eventArgs.item['options'],
-                    rect: eventArgs.item['rect']
-                };
-                eventArgs.item = this.layout.renderItems[itemIndex]['data'];
-                const { treemap } = eventArgs, blazorEventArgs = __rest(eventArgs, ["treemap"]);
-                eventArgs = blazorEventArgs;
-            }
             this.trigger(itemClick, eventArgs, (observedArgs) => {
                 if (observedArgs.text !== labelText || observedArgs.contentItemTemplate !== labelText) {
                     if (isNullOrUndefined(this.leafItemSettings.labelTemplate)) {
@@ -3329,26 +3356,7 @@ let TreeMap = class TreeMap extends Component {
                         targetEle.innerHTML = observedArgs.text;
                     }
                     else {
-                        const itemSelect = targetId.split('_RectPath')[0];
-                        let itemTemplate;
-                        if (targetId.indexOf('_LabelTemplate') > -1) {
-                            itemTemplate = targetEle;
-                        }
-                        else {
-                            itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
-                        }
-                        if (!isNullOrUndefined(itemTemplate)) {
-                            if (this.isBlazor) {
-                                const templateElement = createElement('div');
-                                templateElement.innerHTML = observedArgs.contentItemTemplate;
-                                const currentTemplateElement = templateElement.children[0].firstElementChild;
-                                itemTemplate['style']['left'] = Number(itemTemplate['style']['left'].split('px')[0])
-                                    - (currentTemplateElement['style']['width'].split('px')[0] / 2) + 'px';
-                                itemTemplate['style']['top'] = Number(itemTemplate['style']['top'].split('px')[0])
-                                    - (currentTemplateElement['style']['height'].split('px')[0] / 2) + 'px';
-                            }
-                            itemTemplate.innerHTML = observedArgs.contentItemTemplate;
-                        }
+                        setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
                     }
                 }
             });
@@ -3369,8 +3377,7 @@ let TreeMap = class TreeMap extends Component {
      */
     doubleClickOnTreeMap(e) {
         const doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
-        const doubleClickBlazorArgs = { cancel: false, name: doubleClick, mouseEvent: e };
-        this.trigger(doubleClick, this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
+        this.trigger(doubleClick, doubleClickArgs);
         //this.notify('dblclick', e);
     }
     /**
@@ -3380,8 +3387,7 @@ let TreeMap = class TreeMap extends Component {
      */
     rightClickOnTreeMap(e) {
         const rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
-        const rightClickBlazorArgs = { cancel: false, name: rightClick, mouseEvent: e };
-        this.trigger(rightClick, this.isBlazor ? rightClickBlazorArgs : rightClickArgs);
+        this.trigger(rightClick, rightClickArgs);
     }
     /**
      * This method handles the mouse down event in the treemap.
@@ -3406,8 +3412,7 @@ let TreeMap = class TreeMap extends Component {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let item;
         const moveArgs = { cancel: false, name: mouseMove, treemap: this, mouseEvent: e };
-        const moveBlazorArgs = { cancel: false, name: mouseMove, mouseEvent: e };
-        this.trigger(mouseMove, this.isBlazor ? moveBlazorArgs : moveArgs);
+        this.trigger(mouseMove, moveArgs);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let childItems;
         if (targetId.indexOf('_Item_Index') > -1) {
@@ -3417,22 +3422,6 @@ let TreeMap = class TreeMap extends Component {
             this.element.style.cursor = (!item['isLeafItem'] && childItems && childItems.length > 0 && this.enableDrillDown) ?
                 'pointer' : 'auto';
             eventArgs = { cancel: false, name: itemMove, treemap: this, item: item, mouseEvent: e };
-            if (this.isBlazor) {
-                const data = {
-                    isLeafItem: eventArgs.item['isLeafItem'],
-                    groupIndex: eventArgs.item['groupIndex'],
-                    groupName: eventArgs.item['groupName'],
-                    isDrilled: eventArgs.item['isDrilled'],
-                    itemArea: eventArgs.item['itemArea'],
-                    levelOrderName: eventArgs.item['levelOrderName'],
-                    name: eventArgs.item['name'],
-                    rect: eventArgs.item['rect'],
-                    options: eventArgs.item['options']
-                };
-                eventArgs.item = data;
-                const { treemap } = eventArgs, blazorEventArgs = __rest(eventArgs, ["treemap"]);
-                eventArgs = blazorEventArgs;
-            }
             this.trigger(itemMove, eventArgs);
         }
         this.notify(Browser.touchMoveEvent, e);
@@ -3548,9 +3537,10 @@ let TreeMap = class TreeMap extends Component {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const templateID = this.element.id + '_Label_Template_Group';
         let drillLevelValues;
-        let endBlazorEvent;
         if (targetId.indexOf('_Item_Index') > -1 && this.enableDrillDown && !this.drillMouseMove) {
-            e.preventDefault();
+            if (e.cancelable) {
+                e.preventDefault();
+            }
             index = parseFloat(targetId.split('_')[6]);
             item = this.layout.renderItems[index];
             const labelText = targetEle.innerHTML;
@@ -3605,18 +3595,14 @@ let TreeMap = class TreeMap extends Component {
                     newDrillItem[item['groupName']] = [item];
                 }
                 startEvent = {
-                    cancel: false, name: drillStart, treemap: this.isBlazor ? null : this,
+                    cancel: false, name: drillStart, treemap: this,
                     element: targetEle, groupIndex: this.enableBreadcrumb &&
                         this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
                         this.drilledItems[this.drilledItems.length - 1]['data']['groupIndex'] : item['groupIndex'],
                     groupName: this.enableBreadcrumb && this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
                         this.drilledItems[this.drilledItems.length - 1]['data']['name'] : item['name'],
-                    rightClick: e.which === 3 ? true : false, childItems: null, item: this.isBlazor ? null : newDrillItem
+                    rightClick: e.which === 3 ? true : false, childItems: null, item: newDrillItem
                 };
-                if (this.isBlazor) {
-                    const { treemap } = startEvent, blazorEventArgs = __rest(startEvent, ["treemap"]);
-                    startEvent = blazorEventArgs;
-                }
                 this.trigger(drillStart, startEvent, (observedArgs) => {
                     this.currentLevel = item['isDrilled'] && isNullOrUndefined(drillLevel) ? item['groupIndex'] :
                         (!isNullOrUndefined(drillLevel) && this.enableBreadcrumb && item['isDrilled']) ? drillLevel : null;
@@ -3659,8 +3645,7 @@ let TreeMap = class TreeMap extends Component {
                     }
                 });
                 endEvent = { cancel: false, name: drillEnd, treemap: this, renderItems: this.layout.renderItems };
-                endBlazorEvent = { cancel: false, name: drillEnd, renderItems: this.isBlazor ? null : this.layout.renderItems };
-                this.trigger(drillEnd, this.isBlazor ? endBlazorEvent : endEvent);
+                this.trigger(drillEnd, endEvent);
                 if (process) {
                     if (!directLevel && isNullOrUndefined(drillLevel)) {
                         this.drilledItems.push({ name: item['levelOrderName'], data: item });
@@ -3997,15 +3982,6 @@ TreeMap = __decorate([
 class LevelsData {
 }
 
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable @typescript-eslint/dot-notation */
 /* eslint-disable max-len */
@@ -4045,10 +4021,6 @@ class TreeMapLegend {
             cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
             position: this.treemap.legendSettings.position
         };
-        if (this.treemap.isBlazor) {
-            const { treemap } = eventArgs, blazorEventArgs = __rest$2(eventArgs, ["treemap"]);
-            eventArgs = blazorEventArgs;
-        }
         this.treemap.trigger(legendRendering, eventArgs, (observedArgs) => {
             // eslint-disable-next-line no-underscore-dangle
             if (!observedArgs.cancel && observedArgs._changePosition !== this.treemap.legendSettings.position) {
@@ -4650,13 +4622,9 @@ class TreeMapLegend {
                     textLocation = legendRtlLocation['textLocation'];
                 }
                 eventArgs = {
-                    cancel: false, name: legendItemRendering, treemap: this.treemap.isBlazor ? null : treemap, fill: collection['Fill'],
+                    cancel: false, name: legendItemRendering, treemap: treemap, fill: collection['Fill'],
                     shape: legend.shape, imageUrl: legend.imageUrl
                 };
-                if (this.treemap.isBlazor) {
-                    const { treemap } = eventArgs, blazorEventArgs = __rest$2(eventArgs, ["treemap"]);
-                    eventArgs = blazorEventArgs;
-                }
                 this.treemap.trigger(legendItemRendering, eventArgs, (observedArgs) => {
                     const renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth, isLineShape ? collection['Fill'] : strokeColor, legend.opacity, '');
                     legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions, legendText));
@@ -5003,15 +4971,6 @@ class TreeMapLegend {
     }
 }
 
-var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 /**
  * Performing treemap highlight
  */
@@ -5041,7 +5000,6 @@ class TreeMapHighlight {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let eventArgs;
         const items = [];
-        let eventBlazorArgs;
         const highlight = this.treemap.highlightSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let item;
@@ -5110,8 +5068,7 @@ class TreeMapHighlight {
                             this.highLightId = targetId;
                         }
                         eventArgs = { cancel: false, name: itemHighlight, treemap: treemap, items: items, elements: highLightElements };
-                        eventBlazorArgs = { cancel: false, name: itemHighlight, items: null, elements: highLightElements };
-                        treemap.trigger(itemHighlight, treemap.isBlazor ? eventBlazorArgs : eventArgs);
+                        treemap.trigger(itemHighlight, eventArgs);
                     }
                     else {
                         processHighlight = false;
@@ -5241,7 +5198,6 @@ class TreeMapSelection {
         const targetEle = e.target;
         let eventArgs;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let eventBlazorArgs;
         const treemap = this.treemap;
         treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5315,31 +5271,9 @@ class TreeMapSelection {
                     }
                     eventArgs = { cancel: false, name: itemSelected, treemap: treemap, items: items, elements: selectionElements,
                         text: labelText, contentItemTemplate: labelText };
-                    eventBlazorArgs = { cancel: false, name: itemSelected, text: labelText, contentItemTemplate: labelText };
-                    if (treemap.isBlazor) {
-                        const { treemap, items, elements } = eventArgs, blazorEventArgs = __rest$3(eventArgs, ["treemap", "items", "elements"]);
-                        eventBlazorArgs = blazorEventArgs;
-                    }
-                    treemap.trigger(itemSelected, treemap.isBlazor ? eventBlazorArgs : eventArgs, (observedArgs) => {
+                    treemap.trigger(itemSelected, eventArgs, (observedArgs) => {
                         if (observedArgs.contentItemTemplate !== labelText) {
-                            const itemSelect = targetId.split('_RectPath')[0];
-                            let itemTemplate;
-                            if (targetId.indexOf('_LabelTemplate') > -1) {
-                                itemTemplate = targetEle;
-                            }
-                            else {
-                                itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
-                            }
-                            if (!isNullOrUndefined(itemTemplate)) {
-                                if (treemap.isBlazor) {
-                                    const templateCreated = createElement('div');
-                                    templateCreated.innerHTML = observedArgs.contentItemTemplate;
-                                    const templateElement = templateCreated.children[0].firstElementChild;
-                                    itemTemplate['style']['left'] = Number(itemTemplate['style']['left'].split('px')[0]) - (templateElement['style']['width'].split('px')[0] / 2) + 'px';
-                                    itemTemplate['style']['top'] = Number(itemTemplate['style']['top'].split('px')[0]) - (templateElement['style']['height'].split('px')[0] / 2) + 'px';
-                                }
-                                itemTemplate.innerHTML = observedArgs.contentItemTemplate;
-                            }
+                            setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
                         }
                     });
                 }
@@ -5535,7 +5469,7 @@ class TreeMapSelection {
     }
 }
 
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -5627,25 +5561,9 @@ class TreeMapTooltip {
                     treemap: this.treemap,
                     element: target, eventArgs: e
                 };
-                if (this.treemap.isBlazor) {
-                    const tooltipArgs = {
-                        cancel: false,
-                        location: tootipArgs.options['location'],
-                        text: tootipArgs.options['text'],
-                        textStyle: tootipArgs.options['textStyle'],
-                        data: tootipArgs.options['data'],
-                        template: tootipArgs.options['template'],
-                        name: tooltipRendering
-                    };
-                    this.treemap.trigger(tooltipRendering, tooltipArgs, (args) => {
-                        this.addTooltip(null, markerFill, tooltipEle, tooltipArgs);
-                    });
-                }
-                else {
-                    this.treemap.trigger(tooltipRendering, tootipArgs, (args) => {
-                        this.addTooltip(tootipArgs, markerFill, tooltipEle);
-                    });
-                }
+                this.treemap.trigger(tooltipRendering, tootipArgs, (args) => {
+                    this.addTooltip(tootipArgs, markerFill, tooltipEle);
+                });
             }
         }
         else {
@@ -5659,7 +5577,7 @@ class TreeMapTooltip {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let args;
         if (!isNullOrUndefined(tootipArgs)) {
-            const { cancel: c } = tootipArgs, otherArgs = __rest$4(tootipArgs, ["cancel"]);
+            const { cancel: c } = tootipArgs, otherArgs = __rest(tootipArgs, ["cancel"]);
             cancel = c;
             args = otherArgs.options;
         }
@@ -5680,8 +5598,7 @@ class TreeMapTooltip {
                 palette: [markerFill],
                 areaBounds: this.treemap.areaRect,
                 textStyle: args['textStyle'],
-                fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
-                blazorTemplate: { name: 'TooltipTemplate', parent: this.treemap.tooltipSettings }
+                fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor
             });
             this.svgTooltip.opacity = this.treemap.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
             this.svgTooltip.appendTo(tooltipEle);
@@ -5758,5 +5675,5 @@ class TreeMapTooltip {
  * exporting all modules from tree map index
  */
 
-export { TreeMap, LevelsData, Border, Margin, Font, CommonTitleSettings, SubTitleSettings, TitleSettings, ColorMapping, LegendSettings, InitialDrillSettings, LeafItemSettings, TooltipSettings, SelectionSettings, HighlightSettings, LevelSettings, load, loaded, beforePrint, itemRendering, drillStart, drillEnd, itemSelected, itemHighlight, tooltipRendering, itemClick, itemMove, click, doubleClick, rightClick, mouseMove, legendItemRendering, legendRendering, resize, defaultFont, Theme, getThemeStyle, Size, stringToNumber, Rect, RectOption, PathOption, measureText, TextOption, textTrim, Location, findPosition, createTextStyle, renderTextElement, getElement, itemsToOrder, isContainsData, findChildren, findHightLightItems, getTemplateFunction, convertElement, findLabelLocation, measureElement, getArea, getShortestEdge, convertToContainer, convertToRect, getMousePosition, colorMap, deSaturationColor, colorCollections, rgbToHex, getColorByValue, getGradientColor, getPercentageColor, getPercentage, wordWrap, textWrap, hide, orderByArea, maintainSelection, legendMaintain, removeClassNames, applyOptions, textFormatter, formatValue, ColorValue, convertToHexCode, componentToHex, convertHexToColor, colorNameToHex, drawSymbol, renderLegendShape, isParentItem, TreeMapAjax, removeShape, removeLegend, setColor, removeSelectionWithHighlight, getLegendIndex, pushCollection, triggerDownload, removeElement, TreeMapLegend, LayoutPanel, TreeMapHighlight, TreeMapSelection, TreeMapTooltip, ImageExport, PdfExport, Print };
+export { TreeMap, LevelsData, Border, Margin, Font, CommonTitleSettings, SubTitleSettings, TitleSettings, ColorMapping, LegendSettings, InitialDrillSettings, LeafItemSettings, TooltipSettings, SelectionSettings, HighlightSettings, LevelSettings, load, loaded, beforePrint, itemRendering, drillStart, drillEnd, itemSelected, itemHighlight, tooltipRendering, itemClick, itemMove, click, doubleClick, rightClick, mouseMove, legendItemRendering, legendRendering, resize, defaultFont, Theme, getThemeStyle, Size, stringToNumber, Rect, RectOption, PathOption, measureText, TextOption, textTrim, Location, findPosition, createTextStyle, renderTextElement, setItemTemplateContent, getElement, itemsToOrder, isContainsData, findChildren, findHightLightItems, getTemplateFunction, convertElement, findLabelLocation, measureElement, getArea, getShortestEdge, convertToContainer, convertToRect, getMousePosition, colorMap, deSaturationColor, colorCollections, rgbToHex, getColorByValue, getGradientColor, getPercentageColor, getPercentage, wordWrap, textWrap, hide, orderByArea, maintainSelection, legendMaintain, removeClassNames, applyOptions, textFormatter, formatValue, ColorValue, convertToHexCode, componentToHex, convertHexToColor, colorNameToHex, drawSymbol, renderLegendShape, isParentItem, TreeMapAjax, removeShape, removeLegend, setColor, removeSelectionWithHighlight, getLegendIndex, pushCollection, triggerDownload, removeElement, TreeMapLegend, LayoutPanel, TreeMapHighlight, TreeMapSelection, TreeMapTooltip, ImageExport, PdfExport, Print };
 //# sourceMappingURL=ej2-treemap.es2015.js.map