@syncfusion/ej2-treemap 19.2.60 → 19.4.48

package/src/treemap/treemap.js

@@ -24,23 +24,14 @@ 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;
 };
-var __rest = (this && this.__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;
-};
-import { Component, NotifyPropertyChanges, Property, extend, Ajax, isBlazor } from '@syncfusion/ej2-base';
-import { Complex, Collection, resetBlazorTemplate } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, extend, Ajax } 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';
 import { isNullOrUndefined, createElement, EventHandler, Browser, remove } from '@syncfusion/ej2-base';
 import { Border, Margin, TitleSettings, LegendSettings, InitialDrillSettings } from './model/base';
 import { SelectionSettings, TooltipSettings, LevelSettings, LeafItemSettings, HighlightSettings } from './model/base';
-import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement } from '../treemap/utils/helper';
+import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent } from '../treemap/utils/helper';
 import { removeClassNames, removeShape, textFormatter } from '../treemap/utils/helper';
 import { findPosition, TextOption, renderTextElement, isContainsData, TreeMapAjax } from '../treemap/utils/helper';
 import { load, loaded, drillStart, drillEnd } from '../treemap/model/constants';
@@ -88,8 +79,7 @@ var TreeMap = /** @class */ (function (_super) {
     }
     TreeMap.prototype.preRender = function () {
         var _this = this;
-        this.isBlazor = isBlazor();
-        this.trigger(load, { treemap: this.isBlazor ? null : this }, function () {
+        this.trigger(load, { treemap: this }, function () {
             _this.initPrivateVariable();
             _this.unWireEVents();
             _this.createSvg();
@@ -152,7 +142,7 @@ var TreeMap = /** @class */ (function (_super) {
         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();
     };
@@ -165,14 +155,6 @@ var TreeMap = /** @class */ (function (_super) {
                 remove(this.svgObject);
             }
         }
-        if (this.leafItemSettings.labelTemplate) {
-            resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        }
-        for (var i = 0; i < this.levels.length; i++) {
-            if (this.levels[i].headerTemplate) {
-                resetBlazorTemplate(this.element.id + '_HeaderTemplate', 'HeaderTemplate');
-            }
-        }
         this.clearTemplate();
         var containerWidth = this.element.clientWidth;
         var containerHeight = this.element.clientHeight;
@@ -210,7 +192,8 @@ var TreeMap = /** @class */ (function (_super) {
         }
     };
     TreeMap.prototype.elementChange = function () {
-        if (this.treeMapLegendModule && this.legendSettings.visible && this.treeMapLegendModule.legendGroup && this.layout.layoutGroup) {
+        if (this.treeMapLegendModule && this.legendSettings.visible && this.treeMapLegendModule.legendGroup && this.layout.layoutGroup
+            && !isNullOrUndefined(this.svgObject)) {
             this.svgObject.insertBefore(this.layout.layoutGroup, this.treeMapLegendModule.legendGroup);
         }
     };
@@ -642,12 +625,8 @@ var TreeMap = /** @class */ (function (_super) {
             cancel: false,
             previousSize: this.availableSize,
             currentSize: new Size(0, 0),
-            treemap: this.isBlazor ? null : this
+            treemap: this
         };
-        if (this.isBlazor) {
-            var treemap = args.treemap, blazorEventArgs = __rest(args, ["treemap"]);
-            args = blazorEventArgs;
-        }
         if (this.resizeTo) {
             clearTimeout(this.resizeTo);
         }
@@ -677,8 +656,7 @@ var TreeMap = /** @class */ (function (_super) {
         var itemIndex;
         var labelText = targetEle.innerHTML;
         var clickArgs = { cancel: false, name: click, treemap: this, mouseEvent: e };
-        var 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]);
@@ -687,22 +665,6 @@ var TreeMap = /** @class */ (function (_super) {
                 groupIndex: this.layout.renderItems[itemIndex]['groupIndex'], groupName: this.layout.renderItems[itemIndex]['name'],
                 text: labelText, contentItemTemplate: labelText
             };
-            if (this.isBlazor) {
-                var 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'];
-                var treemap = eventArgs.treemap, blazorEventArgs = __rest(eventArgs, ["treemap"]);
-                eventArgs = blazorEventArgs;
-            }
             this.trigger(itemClick, eventArgs, function (observedArgs) {
                 if (observedArgs.text !== labelText || observedArgs.contentItemTemplate !== labelText) {
                     if (isNullOrUndefined(_this.leafItemSettings.labelTemplate)) {
@@ -710,26 +672,7 @@ var TreeMap = /** @class */ (function (_super) {
                         targetEle.innerHTML = observedArgs.text;
                     }
                     else {
-                        var itemSelect = targetId.split('_RectPath')[0];
-                        var itemTemplate = void 0;
-                        if (targetId.indexOf('_LabelTemplate') > -1) {
-                            itemTemplate = targetEle;
-                        }
-                        else {
-                            itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
-                        }
-                        if (!isNullOrUndefined(itemTemplate)) {
-                            if (_this.isBlazor) {
-                                var templateElement = createElement('div');
-                                templateElement.innerHTML = observedArgs.contentItemTemplate;
-                                var 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);
                     }
                 }
             });
@@ -750,8 +693,7 @@ var TreeMap = /** @class */ (function (_super) {
      */
     TreeMap.prototype.doubleClickOnTreeMap = function (e) {
         var doubleClickArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
-        var doubleClickBlazorArgs = { cancel: false, name: doubleClick, mouseEvent: e };
-        this.trigger(doubleClick, this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
+        this.trigger(doubleClick, doubleClickArgs);
         //this.notify('dblclick', e);
     };
     /**
@@ -761,8 +703,7 @@ var TreeMap = /** @class */ (function (_super) {
      */
     TreeMap.prototype.rightClickOnTreeMap = function (e) {
         var rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
-        var 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.
@@ -787,8 +728,7 @@ var TreeMap = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var item;
         var moveArgs = { cancel: false, name: mouseMove, treemap: this, mouseEvent: e };
-        var 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
         var childItems;
         if (targetId.indexOf('_Item_Index') > -1) {
@@ -798,22 +738,6 @@ var TreeMap = /** @class */ (function (_super) {
             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) {
-                var 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;
-                var treemap = eventArgs.treemap, blazorEventArgs = __rest(eventArgs, ["treemap"]);
-                eventArgs = blazorEventArgs;
-            }
             this.trigger(itemMove, eventArgs);
         }
         this.notify(Browser.touchMoveEvent, e);
@@ -932,9 +856,10 @@ var TreeMap = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var templateID = this.element.id + '_Label_Template_Group';
         var drillLevelValues;
-        var 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];
             var labelText = targetEle.innerHTML;
@@ -989,18 +914,14 @@ var TreeMap = /** @class */ (function (_super) {
                     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) {
-                    var treemap = startEvent.treemap, blazorEventArgs = __rest(startEvent, ["treemap"]);
-                    startEvent = blazorEventArgs;
-                }
                 this.trigger(drillStart, startEvent, function (observedArgs) {
                     _this.currentLevel = item['isDrilled'] && isNullOrUndefined(drillLevel) ? item['groupIndex'] :
                         (!isNullOrUndefined(drillLevel) && _this.enableBreadcrumb && item['isDrilled']) ? drillLevel : null;
@@ -1043,8 +964,7 @@ var TreeMap = /** @class */ (function (_super) {
                     }
                 });
                 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 });

package/src/treemap/user-interaction/highlight-selection.js

@@ -1,15 +1,6 @@
-var __rest = (this && this.__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;
-};
-import { Browser, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
+import { Browser } from '@syncfusion/ej2-base';
 import { itemHighlight, itemSelected } from '../model/constants';
-import { findHightLightItems, removeClassNames, applyOptions, removeShape, removeLegend, removeSelectionWithHighlight, setColor, getLegendIndex, pushCollection } from '../utils/helper';
+import { findHightLightItems, removeClassNames, applyOptions, removeShape, removeLegend, removeSelectionWithHighlight, setColor, getLegendIndex, pushCollection, setItemTemplateContent } from '../utils/helper';
 /**
  * Performing treemap highlight
  */
@@ -39,7 +30,6 @@ var TreeMapHighlight = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var eventArgs;
         var items = [];
-        var eventBlazorArgs;
         var highlight = this.treemap.highlightSettings;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var item;
@@ -108,8 +98,7 @@ var TreeMapHighlight = /** @class */ (function () {
                             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;
@@ -241,7 +230,6 @@ var TreeMapSelection = /** @class */ (function () {
         var targetEle = e.target;
         var eventArgs;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var eventBlazorArgs;
         var treemap = this.treemap;
         treemap.levelSelection = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -316,31 +304,9 @@ var TreeMapSelection = /** @class */ (function () {
                     }
                     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) {
-                        var treemap_1 = eventArgs.treemap, items_1 = eventArgs.items, elements = eventArgs.elements, blazorEventArgs = __rest(eventArgs, ["treemap", "items", "elements"]);
-                        eventBlazorArgs = blazorEventArgs;
-                    }
-                    treemap.trigger(itemSelected, treemap.isBlazor ? eventBlazorArgs : eventArgs, function (observedArgs) {
+                    treemap.trigger(itemSelected, eventArgs, function (observedArgs) {
                         if (observedArgs.contentItemTemplate !== labelText) {
-                            var itemSelect = targetId.split('_RectPath')[0];
-                            var itemTemplate = void 0;
-                            if (targetId.indexOf('_LabelTemplate') > -1) {
-                                itemTemplate = targetEle;
-                            }
-                            else {
-                                itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
-                            }
-                            if (!isNullOrUndefined(itemTemplate)) {
-                                if (treemap.isBlazor) {
-                                    var templateCreated = createElement('div');
-                                    templateCreated.innerHTML = observedArgs.contentItemTemplate;
-                                    var 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);
                         }
                     });
                 }

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

@@ -95,25 +95,9 @@ var TreeMapTooltip = /** @class */ (function () {
                     treemap: this.treemap,
                     element: target, eventArgs: e
                 };
-                if (this.treemap.isBlazor) {
-                    var tooltipArgs_1 = {
-                        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_1, function (args) {
-                        _this.addTooltip(null, markerFill, tooltipEle, tooltipArgs_1);
-                    });
-                }
-                else {
-                    this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
-                        _this.addTooltip(tootipArgs, markerFill, tooltipEle);
-                    });
-                }
+                this.treemap.trigger(tooltipRendering, tootipArgs, function (args) {
+                    _this.addTooltip(tootipArgs, markerFill, tooltipEle);
+                });
             }
         }
         else {
@@ -148,8 +132,7 @@ var TreeMapTooltip = /** @class */ (function () {
                 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);

package/src/treemap/utils/enum.d.ts

@@ -193,7 +193,11 @@ export declare type TreeMapTheme =
 /**  Render a treemap with Tailwind theme. */
 'Tailwind' | 
 /**  Render a treemap with TailwindDark theme. */
-'TailwindDark';
+'TailwindDark' | 
+/** Render a treemap with Bootstrap5 theme. */
+'Bootstrap5' | 
+/**  Render a treemap with Bootstrap5 dark theme. */
+'Bootstrap5Dark';
 /**
  * Defines the rendering directions to render the treemap items in the treemap.
  */

package/src/treemap/utils/helper.d.ts

@@ -126,6 +126,7 @@ export declare function createTextStyle(renderer: SvgRenderer, renderOptions: an
  * @private
  */
 export declare function renderTextElement(options: TextOption, font: FontModel, color: string, parent: HTMLElement | Element, isMinus?: boolean): Element;
+export declare function setItemTemplateContent(targetId: string, targetElement: Element, contentItemTemplate: string): void;
 export declare function getElement(id: string): Element;
 export declare function itemsToOrder(a: any, b: any): number;
 export declare function isContainsData(source: string[], pathName: string, processData: any, treemap: TreeMap): boolean;

package/src/treemap/utils/helper.js

@@ -260,6 +260,19 @@ export function renderTextElement(options, font, color, parent, isMinus) {
     }
     return htmlObject;
 }
+export function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
+    var itemSelect = targetId.split('_RectPath')[0];
+    var itemTemplate;
+    if (targetId.indexOf('_LabelTemplate') > -1) {
+        itemTemplate = targetElement;
+    }
+    else {
+        itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
+    }
+    if (!isNullOrUndefined(itemTemplate)) {
+        itemTemplate.innerHTML = contentItemTemplate;
+    }
+}
 export function getElement(id) {
     return document.getElementById(id);
 }