@syncfusion/ej2-treemap 19.4.48 → 20.1.47-14088

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

@@ -121,32 +121,32 @@ var resize = 'resize';
  */
 var defaultFont = 'Roboto, Segoe UI, Noto, Sans-serif';
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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 __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 /**
  * Maps base doc
  */
 /**
  * Sets and gets the options for customizing the color and width of the border in treemap component.
  */
-var Border = /** @__PURE__ @class */ (function (_super) {
+var Border = /** @class */ (function (_super) {
     __extends$1(Border, _super);
     function Border() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -162,7 +162,7 @@ var Border = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the margin for the treemap component.
  */
-var Margin = /** @__PURE__ @class */ (function (_super) {
+var Margin = /** @class */ (function (_super) {
     __extends$1(Margin, _super);
     function Margin() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -184,7 +184,7 @@ var Margin = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options to customize the style of the text contents in the treemap component.
  */
-var Font = /** @__PURE__ @class */ (function (_super) {
+var Font = /** @class */ (function (_super) {
     __extends$1(Font, _super);
     function Font() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -212,7 +212,7 @@ var Font = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the common title of the treemap component.
  */
-var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
+var CommonTitleSettings = /** @class */ (function (_super) {
     __extends$1(CommonTitleSettings, _super);
     function CommonTitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -228,7 +228,7 @@ var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the subtitle of the treemap component.
  */
-var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
+var SubTitleSettings = /** @class */ (function (_super) {
     __extends$1(SubTitleSettings, _super);
     function SubTitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -244,7 +244,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the title of the treemap component.
  */
-var TitleSettings = /** @__PURE__ @class */ (function (_super) {
+var TitleSettings = /** @class */ (function (_super) {
     __extends$1(TitleSettings, _super);
     function TitleSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -263,7 +263,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options to customize the color-mapping in treemap component.
  */
-var ColorMapping = /** @__PURE__ @class */ (function (_super) {
+var ColorMapping = /** @class */ (function (_super) {
     __extends$1(ColorMapping, _super);
     function ColorMapping() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -297,7 +297,7 @@ var ColorMapping = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the legend of the treemap component.
  */
-var LegendSettings = /** @__PURE__ @class */ (function (_super) {
+var LegendSettings = /** @class */ (function (_super) {
     __extends$1(LegendSettings, _super);
     function LegendSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -388,7 +388,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the settings for drill to visualize the treemap rendered in the initial state.
  */
-var InitialDrillSettings = /** @__PURE__ @class */ (function (_super) {
+var InitialDrillSettings = /** @class */ (function (_super) {
     __extends$1(InitialDrillSettings, _super);
     function InitialDrillSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -404,7 +404,7 @@ var InitialDrillSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the leaf item of the treemap component.
  */
-var LeafItemSettings = /** @__PURE__ @class */ (function (_super) {
+var LeafItemSettings = /** @class */ (function (_super) {
     __extends$1(LeafItemSettings, _super);
     function LeafItemSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -459,7 +459,7 @@ var LeafItemSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the tooltip of the treemap component.
  */
-var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
+var TooltipSettings = /** @class */ (function (_super) {
     __extends$1(TooltipSettings, _super);
     function TooltipSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -493,7 +493,7 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the selection of the leaf items in treemap component.
  */
-var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
+var SelectionSettings = /** @class */ (function (_super) {
     __extends$1(SelectionSettings, _super);
     function SelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -519,7 +519,7 @@ var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
  * Sets and gets the options for customizing the highlighting of the treemap item,
  * when the mouse hover is performed in it.
  */
-var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
+var HighlightSettings = /** @class */ (function (_super) {
     __extends$1(HighlightSettings, _super);
     function HighlightSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -544,7 +544,7 @@ var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Sets and gets the options for customizing the levels of the treemap component.
  */
-var LevelSettings = /** @__PURE__ @class */ (function (_super) {
+var LevelSettings = /** @class */ (function (_super) {
     __extends$1(LevelSettings, _super);
     function LevelSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -600,7 +600,7 @@ var LevelSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Create the class for size
  */
-var Size = /** @__PURE__ @class */ (function () {
+var Size = /** @class */ (function () {
     function Size(width, height) {
         this.width = width;
         this.height = height;
@@ -618,7 +618,7 @@ function stringToNumber(value, containerSize) {
  *
  * @private
  */
-var Rect = /** @__PURE__ @class */ (function () {
+var Rect = /** @class */ (function () {
     function Rect(x, y, width, height) {
         this.x = x;
         this.y = y;
@@ -632,7 +632,7 @@ var Rect = /** @__PURE__ @class */ (function () {
  *
  * @private
  */
-var RectOption = /** @__PURE__ @class */ (function () {
+var RectOption = /** @class */ (function () {
     function RectOption(id, fill, border, opacity, rect, dashArray) {
         this.y = rect.y;
         this.x = rect.x;
@@ -647,7 +647,7 @@ var RectOption = /** @__PURE__ @class */ (function () {
     }
     return RectOption;
 }());
-var PathOption = /** @__PURE__ @class */ (function () {
+var PathOption = /** @class */ (function () {
     function PathOption(id, fill, width, color, opacity, dashArray, d) {
         this.id = id;
         this.opacity = opacity;
@@ -693,7 +693,7 @@ function measureText(text, font) {
  *
  * @private
  */
-var TextOption = /** @__PURE__ @class */ (function () {
+var TextOption = /** @class */ (function () {
     function TextOption(id, x, y, anchor, text, transform, baseLine, connectorText) {
         if (transform === void 0) { transform = ''; }
         this.transform = '';
@@ -739,7 +739,7 @@ function textTrim(maxWidth, text, font) {
 /**
  * Map internal class for Point
  */
-var Location = /** @__PURE__ @class */ (function () {
+var Location = /** @class */ (function () {
     function Location(x, y) {
         this.x = x;
         this.y = y;
@@ -1082,7 +1082,7 @@ value, weightValuePath) {
         var dataValue = value;
         if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
             && !isNullOrUndefined(colorMapping[i].value)) {
-            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) && (colorMapping[i].value === equalValue)) {
+            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) && (colorMapping[i].value.toString() === equalValue)) {
                 isEqualColor = true;
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
                     fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
@@ -1094,8 +1094,8 @@ value, weightValuePath) {
         }
         else if ((!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to))
             || !isNullOrUndefined((colorMapping[i].value))) {
-            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) || (colorMapping[i].value === equalValue)) {
-                if (colorMapping[i].value === equalValue) {
+            if ((value >= colorMapping[i].from && colorMapping[i].to >= value) || (colorMapping[i].value.toString() === equalValue)) {
+                if (colorMapping[i].value.toString() === equalValue) {
                     isEqualColor = true;
                 }
                 if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
@@ -1106,7 +1106,7 @@ value, weightValuePath) {
                 }
             }
         }
-        if (((value >= colorMapping[i].from && value <= colorMapping[i].to) || (colorMapping[i].value === equalValue))
+        if (((value >= colorMapping[i].from && value <= colorMapping[i].to) || (colorMapping[i].value.toString() === equalValue))
             && !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity) && fill) {
             opacity = deSaturationColor(weightValuePath, colorMapping[i], fill, value);
         }
@@ -1343,7 +1343,7 @@ function removeClassNames(elements, type, treemap) {
     for (var j = 0; j < elements.length; j++) {
         element = isNullOrUndefined(elements[j].childNodes[0]) ? elements[j] :
             elements[j].childNodes[0];
-        options = treemap.layout.renderItems[element.id.split('_')[6]]['options'];
+        options = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])]['options'];
         applyOptions(element, options);
         elements[j].classList.remove(type);
         j -= 1;
@@ -1386,7 +1386,7 @@ function formatValue(value, treemap) {
 /**
  * @private
  */
-var ColorValue = /** @__PURE__ @class */ (function () {
+var ColorValue = /** @class */ (function () {
     function ColorValue(r, g, b) {
         this.r = r;
         this.g = g;
@@ -1564,7 +1564,7 @@ function isParentItem(data, item) {
 /**
  * Ajax support for treemap
  */
-var TreeMapAjax = /** @__PURE__ @class */ (function () {
+var TreeMapAjax = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function TreeMapAjax(options, type, async, contentType, sendData) {
         this.dataOptions = options;
@@ -1669,7 +1669,7 @@ function removeElement(id) {
 /**
  * To calculate and render the shape layer
  */
-var LayoutPanel = /** @__PURE__ @class */ (function () {
+var LayoutPanel = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function LayoutPanel(treemap) {
         this.treemap = treemap;
@@ -2529,7 +2529,7 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Helvetica Neue'
             };
             break;
-        case 'fluentui':
+        case 'fluent':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#201F1E',
@@ -2546,7 +2546,7 @@ function getThemeStyle(theme) {
                 labelFontFamily: 'Segoe UI'
             };
             break;
-        case 'fluentuidark':
+        case 'fluentdark':
             style = {
                 backgroundColor: 'rgba(255,255,255, 0.0)',
                 titleFontColor: '#F3F2F1',
@@ -2584,7 +2584,7 @@ function getThemeStyle(theme) {
  *
  * @hidden
  */
-var Print = /** @__PURE__ @class */ (function () {
+var Print = /** @class */ (function () {
     /**
      * Constructor for Maps
      *
@@ -2671,7 +2671,7 @@ var Print = /** @__PURE__ @class */ (function () {
  *
  * @hidden
  */
-var ImageExport = /** @__PURE__ @class */ (function () {
+var ImageExport = /** @class */ (function () {
     /**
      * Constructor for Maps
      *
@@ -2760,7 +2760,7 @@ var ImageExport = /** @__PURE__ @class */ (function () {
  *
  * @hidden
  */
-var PdfExport = /** @__PURE__ @class */ (function () {
+var PdfExport = /** @class */ (function () {
     /**
      * Constructor for Maps
      *
@@ -2797,8 +2797,8 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                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')) {
+                if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark'
+                    || _this.control.theme === 'Fluent' || _this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
             }
@@ -2849,25 +2849,25 @@ var PdfExport = /** @__PURE__ @class */ (function () {
 /**
  * Tree Map Components
  */
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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 __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 /**
  * Represents the treemap component.
  * ```html
@@ -2878,7 +2878,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  * </script>
  * ```
  */
-var TreeMap = /** @__PURE__ @class */ (function (_super) {
+var TreeMap = /** @class */ (function (_super) {
     __extends(TreeMap, _super);
     /**s
      * Constructor for TreeMap component.
@@ -3396,7 +3396,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap);
         EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap);
         EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap);
-        window.removeEventListener('resize', this.resizeOnTreeMap);
+        window.removeEventListener('resize', this.resizeEvent);
     };
     /**
      * To bind event handlers for treemap.
@@ -3411,7 +3411,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap, this);
         EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap, this);
         EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap, this);
-        window.addEventListener('resize', this.resizeOnTreeMap.bind(this));
+        this.resizeEvent = this.resizeOnTreeMap.bind(this);
+        window.addEventListener('resize', this.resizeEvent);
     };
     /**
      * Method to set culture for maps
@@ -3437,28 +3438,32 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      */
     TreeMap.prototype.resizeOnTreeMap = function (e) {
         var _this = this;
-        this.isResize = true;
-        var args = {
-            name: resize,
-            cancel: false,
-            previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
-            treemap: this
-        };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-treemap')) {
-            this.resizeTo = setTimeout(function () {
-                _this.unWireEVents();
-                _this.createSvg();
-                _this.refreshing = true;
-                _this.wireEVents();
-                args.currentSize = _this.availableSize;
-                _this.trigger(resize, args, function (observedArgs) {
-                    _this.render();
-                });
-            }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = true;
+            var args_1 = {
+                name: resize,
+                cancel: false,
+                previousSize: this.availableSize,
+                currentSize: new Size(0, 0),
+                treemap: this
+            };
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-treemap')) {
+                this.resizeTo = setTimeout(function () {
+                    _this.unWireEVents();
+                    _this.createSvg();
+                    _this.refreshing = true;
+                    _this.wireEVents();
+                    args_1.currentSize = _this.availableSize;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    _this.trigger(resize, args_1, function (observedArgs) {
+                        _this.render();
+                        _this.refreshing = false;
+                    });
+                }, 500);
+            }
         }
     };
     /**
@@ -3477,7 +3482,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         this.trigger(click, clickArgs);
         if (targetId.indexOf('_Item_Index') > -1) {
             e.preventDefault();
-            itemIndex = parseFloat(targetId.split('_')[6]);
+            itemIndex = parseFloat(targetId.split('_Item_Index_')[1]);
             eventArgs = {
                 cancel: false, name: itemClick, treemap: this, item: this.layout.renderItems[itemIndex], mouseEvent: e,
                 groupIndex: this.layout.renderItems[itemIndex]['groupIndex'], groupName: this.layout.renderItems[itemIndex]['name'],
@@ -3550,7 +3555,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var childItems;
         if (targetId.indexOf('_Item_Index') > -1) {
-            item = this.layout.renderItems[parseFloat(targetId.split('_')[6])];
+            item = this.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             childItems = findChildren(item)['values'];
             this.element.style.cursor = (!item['isLeafItem'] && childItems && childItems.length > 0 && this.enableDrillDown) ?
@@ -3678,7 +3683,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             if (e.cancelable) {
                 e.preventDefault();
             }
-            index = parseFloat(targetId.split('_')[6]);
+            index = parseFloat(targetId.split('_Item_Index_')[1]);
             item = this.layout.renderItems[index];
             var labelText = targetEle.innerHTML;
             if (this.enableBreadcrumb) {
@@ -4118,7 +4123,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
 /**
  * @private
  */
-var LevelsData = /** @__PURE__ @class */ (function () {
+var LevelsData = /** @class */ (function () {
     function LevelsData() {
     }
     return LevelsData;
@@ -4130,7 +4135,7 @@ var LevelsData = /** @__PURE__ @class */ (function () {
 /**
  * Legend module class
  */
-var TreeMapLegend = /** @__PURE__ @class */ (function () {
+var TreeMapLegend = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapLegend(treemap) {
         this.page = 0;
@@ -4890,7 +4895,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             var stroke = void 0;
             var strokeWidth = void 0;
             var legendElement = void 0;
-            targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_')[6])];
+            targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_Item_Index_')[1])];
             var svgRect = treemap.svgObject.getBoundingClientRect();
             for (var i = 0; i < this.legendCollections.length; i++) {
                 currentData = this.legendCollections[i];
@@ -5125,7 +5130,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
 /**
  * Performing treemap highlight
  */
-var TreeMapHighlight = /** @__PURE__ @class */ (function () {
+var TreeMapHighlight = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapHighlight(treeMap) {
         this.target = 'highlight';
@@ -5164,14 +5169,14 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
             if (this.highLightId !== targetId) {
                 treeMapElement = document.getElementById(treemap.element.id + '_TreeMap_' + treemap.layoutType + '_Layout');
                 var selectionElements = document.getElementsByClassName('treeMapSelection');
-                item = this.treemap.layout.renderItems[parseFloat(targetId.split('_')[6])];
+                item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                 var index = void 0;
                 if (this.treemap.legendSettings.visible) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var collection = this.treemap.treeMapLegendModule.legendCollections;
                     var length_1 = this.treemap.treeMapLegendModule.legendCollections.length;
                     index = getLegendIndex(length_1, item, treemap);
-                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById('container_Legend_Shape_Index_' + index) : document.getElementById('container_Legend_Index_' + index);
+                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
                     if (this.shapeElement !== null && (selectionModule ? this.shapeElement.getAttribute('id') !== selectionModule.legendSelectId : true)) {
                         if (selectionModule ? this.shapeElement !== selectionModule.shapeElement : true) {
                             this.currentElement.push({ currentElement: this.shapeElement });
@@ -5199,7 +5204,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                         for (var i = 0; i < treeMapElement.childElementCount; i++) {
                             element = treeMapElement.childNodes[i];
                             process = true;
-                            item = treemap.layout.renderItems[element.id.split('_')[6]];
+                            item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
                             for (var j = 0; j < selectionElements.length; j++) {
                                 if (element.id === selectionElements[j].id) {
                                     process = false;
@@ -5237,7 +5242,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                     removeLegend(this.legendHighlightCollection, 'highlight');
                 }
                 this.shapeTarget = 'highlight';
-                var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_')[4]) : parseFloat(targetId.split('_')[3]);
+                var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
                 var dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var collection = this.treemap.treeMapLegendModule.legendCollections;
@@ -5247,7 +5252,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
                         if (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][i]['levelOrderName'] === this.treemap.layout.renderItems[j]['levelOrderName']) {
                             itemIndex = j;
                             groupIndex = this.treemap.layout.renderItems[j]['groupIndex'];
-                            var nodeEle = document.getElementById('container_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
+                            var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
                             if (i === 0) {
                                 this.legendHighlightCollection = [];
                                 pushCollection(this.legendHighlightCollection, legendIndex, j, targetEle, nodeEle, this.treemap.layout.renderItems, collection);
@@ -5330,7 +5335,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
 /**
  * Performing treemap selection
  */
-var TreeMapSelection = /** @__PURE__ @class */ (function () {
+var TreeMapSelection = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapSelection(treeMap) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5369,7 +5374,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
             e.preventDefault();
             if (this.treemap.selectionId !== targetId && this.legendSelect) {
                 treeMapElement = document.getElementById(layoutID);
-                item = treemap.layout.renderItems[parseFloat(targetId.split('_')[6])];
+                item = treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
                 var index = void 0;
                 if (this.treemap.legendSettings.visible) {
                     this.shapeSelect = false;
@@ -5383,7 +5388,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                         highlightModule.shapeHighlightCollection = [];
                     }
                     index = getLegendIndex(length_3, item, treemap);
-                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById('container_Legend_Shape_Index_' + index) : document.getElementById('container_Legend_Index_' + index);
+                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
                     if (this.shapeElement !== null) {
                         this.shapeSelectId = this.shapeElement.getAttribute('id');
                         this.shapeSelectionCollection.push({ legendEle: this.shapeElement, oldFill: collection[index]['legendFill'],
@@ -5396,7 +5401,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 orders = findHightLightItems(item, [], selection.mode, treemap);
                 for (var i = 0; i < treeMapElement.childElementCount; i++) {
                     element = treeMapElement.childNodes[i];
-                    item = treemap.layout.renderItems[element.id.split('_')[6]];
+                    item = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
                     if (orders.indexOf(item['levelOrderName']) > -1) {
                         selectionElements.push(element);
                         treemap.levelSelection.push(element.id);
@@ -5456,14 +5461,14 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                 if (highlightModule) {
                     highlightModule.shapeTarget = 'selection';
                 }
-                var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_')[4]) : parseFloat(targetId.split('_')[3]);
+                var index = this.treemap.legendSettings.mode === 'Default' ? parseFloat(targetId.split('_Legend_Shape_Index_')[1]) : parseFloat(targetId.split('_Legend_Index_')[1]);
                 var dataLength = this.treemap.treeMapLegendModule.legendCollections[index]['legendData'].length;
                 for (var k = 0; k < dataLength; k++) {
                     for (var l = 0; l < this.treemap.layout.renderItems.length; l++) {
                         if (this.treemap.treeMapLegendModule.legendCollections[index]['legendData'][k]['levelOrderName'] === this.treemap.layout.renderItems[l]['levelOrderName']) {
                             itemIndex = l;
                             groupIndex = this.treemap.layout.renderItems[l]['groupIndex'];
-                            var nodeEle = document.getElementById('container_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
+                            var nodeEle = document.getElementById(this.treemap.element.id + '_Level_Index_' + groupIndex + '_Item_Index_' + itemIndex + '_RectPath');
                             if (k === 0) {
                                 pushCollection(this.legendSelectionCollection, legendIndex, l, targetEle_1, nodeEle, this.treemap.layout.renderItems, collection);
                                 length_4 = this.legendSelectionCollection.length;
@@ -5515,7 +5520,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
             var orders = findHightLightItems(item, [], selection.mode, this.treemap);
             for (var i = 0; i < treeMapElement.childElementCount; i++) {
                 element = treeMapElement.childNodes[i];
-                item = this.treemap.layout.renderItems[element.id.split('_')[6]];
+                item = this.treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])];
                 if (orders.indexOf(item['levelOrderName']) > -1) {
                     selectionElements.push(element);
                     this.treemap.levelSelection.push(element.id);
@@ -5531,7 +5536,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
                     this.shapeElement = undefined;
                     removeShape(this.shapeSelectionCollection, 'selection');
                     index = getLegendIndex(length_5, items[m], this.treemap);
-                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById('container_Legend_Shape_Index_' + index) : document.getElementById('container_Legend_Index_' + index);
+                    this.shapeElement = this.treemap.legendSettings.mode === 'Default' ? document.getElementById(this.treemap.element.id + '_Legend_Shape_Index_' + index) : document.getElementById(this.treemap.element.id + '_Legend_Index_' + index);
                     if (this.shapeElement !== null) {
                         this.shapeSelectId = this.shapeElement.getAttribute('id');
                         this.treemap.legendId.push(this.shapeSelectId);
@@ -5622,19 +5627,19 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
     return TreeMapSelection;
 }());
 
-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;
-};
+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;
+};
 /**
  * Render Tooltip
  */
-var TreeMapTooltip = /** @__PURE__ @class */ (function () {
+var TreeMapTooltip = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     function TreeMapTooltip(treeMap) {
         this.treemap = treeMap;
@@ -5674,7 +5679,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
         var tooltipContent = [];
         var markerFill;
         if (targetId.indexOf('_Item_Index') > -1) {
-            item = this.treemap.layout.renderItems[parseFloat(targetId.split('_')[6])];
+            item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             if (!isNullOrUndefined(item)) {
                 toolTipHeader = item['name'];
                 value = item['weight'];
@@ -5754,6 +5759,10 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
                 textStyle: args['textStyle'],
                 fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor
             });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (this.treemap.isVue || this.treemap.isVue3) {
+                this.svgTooltip.controlInstance = this.treemap;
+            }
             this.svgTooltip.opacity = this.treemap.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
             this.svgTooltip.appendTo(tooltipEle);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any