@syncfusion/ej2-treemap 20.4.48 → 21.1.35

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

@@ -1,4 +1,4 @@
-import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
+import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, SanitizeHtmlHelper, compile, createElement, extend, isNullOrUndefined, merge, print, remove } from '@syncfusion/ej2-base';
 import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { PdfBitmap, PdfDocument, PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
@@ -115,7 +115,7 @@ var legendRendering = 'legendRendering';
  */
 var resize = 'resize';
 /**
- * Define the font family in treemap component.
+ * Define the font family in treemap.
  *
  * @private
  */
@@ -144,7 +144,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  * Maps base doc
  */
 /**
- * Sets and gets the options for customizing the color and width of the border in treemap component.
+ * Sets and gets the options for customizing the color and width of the border in treemap.
  */
 var Border = /** @__PURE__ @class */ (function (_super) {
     __extends$1(Border, _super);
@@ -160,7 +160,7 @@ var Border = /** @__PURE__ @class */ (function (_super) {
     return Border;
 }(ChildProperty));
 /**
- * Sets and gets the margin for the treemap component.
+ * Sets and gets the margin for the treemap.
  */
 var Margin = /** @__PURE__ @class */ (function (_super) {
     __extends$1(Margin, _super);
@@ -182,7 +182,7 @@ var Margin = /** @__PURE__ @class */ (function (_super) {
     return Margin;
 }(ChildProperty));
 /**
- * Sets and gets the options to customize the style of the text contents in the treemap component.
+ * Sets and gets the options to customize the style of the text contents in the treemap.
  */
 var Font = /** @__PURE__ @class */ (function (_super) {
     __extends$1(Font, _super);
@@ -210,7 +210,7 @@ var Font = /** @__PURE__ @class */ (function (_super) {
     return Font;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the common title of the treemap component.
+ * Sets and gets the options for customizing the title of the treemap.
  */
 var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(CommonTitleSettings, _super);
@@ -226,7 +226,7 @@ var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
     return CommonTitleSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the subtitle of the treemap component.
+ * Sets and gets the options for customizing the subtitle of the treemap.
  */
 var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(SubTitleSettings, _super);
@@ -242,7 +242,7 @@ var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
     return SubTitleSettings;
 }(CommonTitleSettings));
 /**
- * Sets and gets the options for customizing the title of the treemap component.
+ * Sets and gets the options for customizing the title of the treemap.
  */
 var TitleSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(TitleSettings, _super);
@@ -261,7 +261,7 @@ var TitleSettings = /** @__PURE__ @class */ (function (_super) {
     return TitleSettings;
 }(CommonTitleSettings));
 /**
- * Sets and gets the options to customize the color-mapping in treemap component.
+ * Sets and gets the options to customize the color-mapping in treemap.
  */
 var ColorMapping = /** @__PURE__ @class */ (function (_super) {
     __extends$1(ColorMapping, _super);
@@ -295,7 +295,7 @@ var ColorMapping = /** @__PURE__ @class */ (function (_super) {
     return ColorMapping;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the legend of the treemap component.
+ * Sets and gets the options for customizing the legend of the treemap.
  */
 var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(LegendSettings, _super);
@@ -386,7 +386,7 @@ var LegendSettings = /** @__PURE__ @class */ (function (_super) {
     return LegendSettings;
 }(ChildProperty));
 /**
- * Sets and gets the settings for drill to visualize the treemap rendered in the initial state.
+ * Sets and gets the settings for drill down to visualize the treemap rendered in the initial state.
  */
 var InitialDrillSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(InitialDrillSettings, _super);
@@ -402,7 +402,7 @@ var InitialDrillSettings = /** @__PURE__ @class */ (function (_super) {
     return InitialDrillSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the leaf item of the treemap component.
+ * Sets and gets the options for customizing the leaf item of the treemap.
  */
 var LeafItemSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(LeafItemSettings, _super);
@@ -457,7 +457,7 @@ var LeafItemSettings = /** @__PURE__ @class */ (function (_super) {
     return LeafItemSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the tooltip of the treemap component.
+ * Sets and gets the options for customizing the tooltip of the treemap.
  */
 var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(TooltipSettings, _super);
@@ -491,7 +491,7 @@ var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
     return TooltipSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the selection of the leaf items in treemap component.
+ * Sets and gets the options for customizing the selection of the leaf items in treemap.
  */
 var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(SelectionSettings, _super);
@@ -542,7 +542,7 @@ var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
     return HighlightSettings;
 }(ChildProperty));
 /**
- * Sets and gets the options for customizing the levels of the treemap component.
+ * Sets and gets the options for customizing the level leaf items of the treemap.
  */
 var LevelSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$1(LevelSettings, _super);
@@ -598,7 +598,7 @@ var LevelSettings = /** @__PURE__ @class */ (function (_super) {
 }(ChildProperty));
 
 /**
- * Create the class for size
+ * Specifies the size parameters.
  */
 var Size = /** @__PURE__ @class */ (function () {
     function Size(width, height) {
@@ -679,7 +679,7 @@ function measureText(text, font) {
         measureObject = createElement('text', { id: 'treeMapMeasureText' });
         document.body.appendChild(measureObject);
     }
-    measureObject.innerHTML = text;
+    measureObject.innerHTML = SanitizeHtmlHelper.sanitize(text);
     measureObject.style.position = 'absolute';
     measureObject.style.fontSize = font.size;
     measureObject.style.fontWeight = font.fontWeight;
@@ -742,7 +742,7 @@ function textTrim(maxWidth, text, font) {
     return label;
 }
 /**
- * Map internal class for Point
+ * Specifies the location parameters.
  */
 var Location = /** @__PURE__ @class */ (function () {
     function Location(x, y) {
@@ -759,6 +759,7 @@ var Location = /** @__PURE__ @class */ (function () {
  * @param {Size} textSize - Specifies the size of the text.
  * @param {type} type - Specifies whether the provided text is title or subtitle.
  * @returns {Location} - Returns the location of text.
+ * @private
  */
 function findPosition(location, alignment, textSize, type) {
     var x;
@@ -1442,6 +1443,7 @@ function textWrap(maxWidth, label, font) {
  * @param {string} text - Specifies the text.
  * @param {FontModel} font - Specifies the font.
  * @returns {string} - Returns the hidden text.
+ * @private
  */
 function hide(maxWidth, maxHeight, text, font) {
     var hideText = text;
@@ -1764,7 +1766,7 @@ function isParentItem(data, item) {
     return isParentItem;
 }
 /**
- * Ajax support for treemap
+ * Specifies the data to be received through Ajax request for treemap.
  */
 var TreeMapAjax = /** @__PURE__ @class */ (function () {
     function TreeMapAjax(options, type, async, contentType, sendData) {
@@ -1885,6 +1887,7 @@ function pushCollection(collection, index, number, legendElement, shapeElement,
  * @param {string} url - Specifies the url
  * @param {boolean} isDownload - Specifies the boolean value
  * @returns {void}
+ * @private
  */
 function triggerDownload(fileName, type, url, isDownload) {
     createElement('a', {
@@ -1919,12 +1922,12 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var data;
         var totalRect;
-        if (LevelsData.levelsData && LevelsData.levelsData.length > 0) {
+        if (this.treemap.treemapLevelData.levelsData && this.treemap.treemapLevelData.levelsData.length > 0) {
             data = (!isNullOrUndefined(this.treemap.initialDrillDown.groupIndex) &&
                 !isNullOrUndefined(this.treemap.initialDrillDown.groupName)) &&
                 (isNullOrUndefined(this.treemap.drilledItems) ? isNullOrUndefined(this.treemap.drilledItems)
                     : this.treemap.drilledItems.length === 0) ?
-                this.getDrilldownData(LevelsData.levelsData[0], [])[0] : LevelsData.levelsData[0];
+                this.getDrilldownData(this.treemap.treemapLevelData.levelsData[0], [])[0] : this.treemap.treemapLevelData.levelsData[0];
             totalRect = extend({}, this.treemap.areaRect, totalRect, false);
             if (!isNullOrUndefined(this.treemap.treeMapLegendModule) && !isNullOrUndefined(this.treemap.totalRect)) {
                 if (this.treemap.legendSettings.position !== 'Float') {
@@ -1943,7 +1946,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                 if (!isNullOrUndefined(this.treemap.initialDrillDown.groupIndex) && !this.treemap.enableBreadcrumb) {
                     this.treemap.currentLevel = this.treemap.drilledItems[count]['data']['groupIndex'];
                 }
-                this.calculateLayoutItems(y || LevelsData.levelsData[0], totalRect);
+                this.calculateLayoutItems(y || this.treemap.treemapLevelData.levelsData[0], totalRect);
                 this.renderLayoutItems();
             }
             else {
@@ -1952,7 +1955,7 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
                         : this.treemap.drilledItems.length === 0)) {
                     this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
                 }
-                this.calculateLayoutItems(data || LevelsData.levelsData[0], totalRect);
+                this.calculateLayoutItems(data || this.treemap.treemapLevelData.levelsData[0], totalRect);
                 this.renderLayoutItems();
             }
         }
@@ -2537,18 +2540,18 @@ var LayoutPanel = /** @__PURE__ @class */ (function () {
         var treemap = this.treemap;
         var itemFill = isLeafItem ? treemap.leafItemSettings.fill : treemap.levels[item['groupIndex']].fill;
         var itemOpacity = isLeafItem ? treemap.leafItemSettings.opacity : treemap.levels[item['groupIndex']].opacity;
-        if (!isNullOrUndefined(LevelsData.defaultLevelsData)) {
-            if (LevelsData.defaultLevelsData.length > 0) {
-                LevelsData.levelsData = LevelsData.defaultLevelsData;
+        if (!isNullOrUndefined(treemap.treemapLevelData.defaultLevelsData)) {
+            if (treemap.treemapLevelData.defaultLevelsData.length > 0) {
+                treemap.treemapLevelData.levelsData = treemap.treemapLevelData.defaultLevelsData;
             }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var parentData = findChildren(LevelsData.levelsData[0])['values'];
+        var parentData = findChildren(treemap.treemapLevelData.levelsData[0])['values'];
         var colorMapping = isLeafItem ? treemap.leafItemSettings.colorMapping :
             treemap.levels[item['groupIndex']].colorMapping;
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]);
+            var option = colorMap(colorMapping, item['data'][treemap.equalColorValuePath], item['data'][treemap.rangeColorValuePath]);
             itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
             itemOpacity = option['opacity'];
         }
@@ -3042,7 +3045,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
      * @param {TreeMap} treeMap - Specifies the treemap instance.
      * @param {ExportType} type - Specifies the type of the document.
      * @param {string} fileName - Specifies the name of the document.
-     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the component.
+     * @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the treemap.
      * @param {boolean} allowDownload - Specifies whether to download the document or not.
      * @returns {Promise} - Returns the string.
      * @private
@@ -3128,7 +3131,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Represents the treemap component.
+ * Represents the treemap control. It is used to visualize both hierarchical and flat data.
  * ```html
  * <div id="container"/>
  * <script>
@@ -3140,7 +3143,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 var TreeMap = /** @__PURE__ @class */ (function (_super) {
     __extends(TreeMap, _super);
     /**
-     * Constructor for TreeMap component.
+     * Constructor for TreeMap.
      *
      * @param {TreeMapModel} options - Specifies the treemap instance.
      * @param {string | HTMLElement} element - Specifies the treemap element.
@@ -3178,16 +3181,17 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         this.renderElements();
     };
     TreeMap.prototype.renderElements = function () {
-        LevelsData.levelsData = null;
-        LevelsData.defaultLevelsData = null;
-        LevelsData.hierarchyData = null;
+        this.treemapLevelData = new LevelsData();
+        this.treemapLevelData.levelsData = null;
+        this.treemapLevelData.defaultLevelsData = null;
+        this.treemapLevelData.hierarchyData = null;
         this.createSecondaryElement();
         this.addTabIndex();
         this.themeStyle = getThemeStyle(this.theme);
         this.renderBorder();
         this.renderTitle(this.titleSettings, 'title', null, null);
-        if (!isNullOrUndefined(LevelsData.levelsData)) {
-            LevelsData.defaultLevelsData = LevelsData.levelsData;
+        if (!isNullOrUndefined(this.treemapLevelData.levelsData)) {
+            this.treemapLevelData.defaultLevelsData = this.treemapLevelData.levelsData;
         }
         this.processDataManager();
     };
@@ -3354,7 +3358,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.dataSource = this.dataSource;
         if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0 && this.weightValuePath) {
-            LevelsData.levelsData = [];
+            this.treemapLevelData.levelsData = [];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.dataSource.map(function (data) {
                 data[_this.weightValuePath] = (data[_this.weightValuePath]) ? data[_this.weightValuePath].toString() :
@@ -3394,28 +3398,28 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                 }
-                LevelsData.levelsData.push(data_1);
+                this.treemapLevelData.levelsData.push(data_1);
             }
             else {
                 if (this.isHierarchicalData) {
-                    LevelsData.hierarchyData = [];
+                    this.treemapLevelData.hierarchyData = [];
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    LevelsData.hierarchyData = extend([], this.dataSource, LevelsData.hierarchyData, true);
-                    for (var i = 0; i < LevelsData.hierarchyData.length; i++) {
-                        this.processHierarchicalData(LevelsData.hierarchyData[i], i);
+                    this.treemapLevelData.hierarchyData = extend([], this.dataSource, this.treemapLevelData.hierarchyData, true);
+                    for (var i = 0; i < this.treemapLevelData.hierarchyData.length; i++) {
+                        this.processHierarchicalData(this.treemapLevelData.hierarchyData[i], i);
                     }
-                    LevelsData.levelsData = LevelsData.hierarchyData;
+                    this.treemapLevelData.levelsData = this.treemapLevelData.hierarchyData;
                 }
                 else {
                     this.processFlatJsonData();
-                    if (LevelsData.levelsData.length > 1) {
-                        this.reOrderLevelData(LevelsData.levelsData.length - 1);
+                    if (this.treemapLevelData.levelsData.length > 1) {
+                        this.reOrderLevelData(this.treemapLevelData.levelsData.length - 1);
                     }
                 }
                 path = this.levels[0].groupPath;
             }
             if (!this.isHierarchicalData) {
-                this.findTotalWeight(LevelsData.levelsData[0][path], 'Parent');
+                this.findTotalWeight(this.treemapLevelData.levelsData[0][path], 'Parent');
             }
         }
     };
@@ -3477,19 +3481,19 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                 _this.processHierarchicalData(currentData, dataCount);
             });
         }
-        if (dataCount === LevelsData.hierarchyData.length - 1) {
+        if (dataCount === this.treemapLevelData.hierarchyData.length - 1) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var mainData_1 = LevelsData.hierarchyData[0][this.levels[0].groupPath];
-            for (var k = 0; k < LevelsData.hierarchyData.length; k++) {
-                childData = findChildren(LevelsData.hierarchyData[k])['values'];
+            var mainData_1 = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
+            for (var k = 0; k < this.treemapLevelData.hierarchyData.length; k++) {
+                childData = findChildren(this.treemapLevelData.hierarchyData[k])['values'];
                 if (k !== 0 && childData) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     childData.forEach(function (currentData) { mainData_1.push(currentData); });
-                    LevelsData.hierarchyData.splice(k, 1);
+                    this.treemapLevelData.hierarchyData.splice(k, 1);
                     k -= 1;
                 }
             }
-            mainData_1 = LevelsData.hierarchyData[0][this.levels[0].groupPath];
+            mainData_1 = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
             for (var l = 0; l < mainData_1.length; l++) {
                 newData[this.levels[0].groupPath] = mainData_1;
                 mainData_1[l]['parent'] = newData;
@@ -3547,7 +3551,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             var level = {};
             level['level'] = i;
             level[groupPath] = [];
-            LevelsData.levelsData.push(level);
+            this.treemapLevelData.levelsData.push(level);
             for (var j = 0; j < this.dataSource.length; j++) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var currentData = {};
@@ -3569,7 +3573,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                         currentData['groupName'] = groupPath;
                         currentData['data'] = this.dataSource[j];
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        LevelsData.levelsData[(LevelsData.levelsData.length - 1)][groupPath].push(currentData);
+                        this.treemapLevelData.levelsData[(this.treemapLevelData.levelsData.length - 1)][groupPath].push(currentData);
                         orderNames.push((childName) ? childName : name_1);
                     }
                 }
@@ -3581,15 +3585,16 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {number} start - Specifies the start value of the treemap level.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.reOrderLevelData = function (start) {
         var currentName;
         var currentPath = this.levels[start] ? this.levels[start].groupPath : this.leafItemSettings.labelPath;
         var prevPath = this.levels[start - 1].groupPath;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var currentData = LevelsData.levelsData[start][currentPath];
+        var currentData = this.treemapLevelData.levelsData[start][currentPath];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var previousData = LevelsData.levelsData[start - 1][prevPath];
+        var previousData = this.treemapLevelData.levelsData[start - 1][prevPath];
         for (var i = 0; i < currentData.length; i++) {
             currentName = currentData[i]['levelOrderName'];
             for (var j = 0; j < previousData.length; j++) {
@@ -3605,8 +3610,8 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
-        this.findTotalWeight(LevelsData.levelsData[LevelsData.levelsData.length - 1][currentPath], 'Child');
-        LevelsData.levelsData.splice(start, 1);
+        this.findTotalWeight(this.treemapLevelData.levelsData[this.treemapLevelData.levelsData.length - 1][currentPath], 'Child');
+        this.treemapLevelData.levelsData.splice(start, 1);
         if ((start - 1) > 0) {
             this.reOrderLevelData(start - 1);
         }
@@ -3629,6 +3634,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * @param {any[]} processData - Specifies the treemap data.
      * @param {string} type - Specifies the type of the data.
      * @returns {void}
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TreeMap.prototype.findTotalWeight = function (processData, type) {
@@ -3663,6 +3669,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * To unbind event handlers for treemap.
      *
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.unWireEVents = function () {
         EventHandler.remove(this.element, 'click', this.clickOnTreeMap);
@@ -3713,6 +3720,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {Event} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     TreeMap.prototype.resizeOnTreeMap = function (e) {
@@ -3749,6 +3757,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the mouse click event in the treemap.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.clickOnTreeMap = function (e) {
         var _this = this;
@@ -3771,7 +3780,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
                 if (observedArgs.text !== labelText || observedArgs.contentItemTemplate !== labelText) {
                     if (isNullOrUndefined(_this.leafItemSettings.labelTemplate)) {
                         observedArgs.text = textFormatter(observedArgs.text, observedArgs['item']['data'], observedArgs.treemap);
-                        targetEle.innerHTML = observedArgs.text;
+                        targetEle.textContent = observedArgs.text;
                     }
                     else {
                         setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
@@ -3804,6 +3813,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.rightClickOnTreeMap = function (e) {
         var rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
@@ -3814,6 +3824,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.mouseDownOnTreeMap = function (e) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
@@ -3826,6 +3837,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.mouseMoveOnTreeMap = function (e) {
         var targetEle = e.target;
@@ -3854,6 +3866,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * @param {string} labelText - Specifies the label text.
      * @param {any} item - Specifies the treemap item.
      * @returns {any} - Returns label of the drilled level.
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     TreeMap.prototype.calculateSelectedTextLevels = function (labelText, item) {
@@ -3921,6 +3934,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * @param {any} item - Specifies the treemap item.
      * @param {number} i - Specifies the treemap item.
      * @returns {any} - return the new drill down object.
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     TreeMap.prototype.compareSelectedLabelWithDrillDownItems = function (drillLevelValues, item, i) {
@@ -3947,6 +3961,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse.
      * @returns {void}
+     * @private
      */
     TreeMap.prototype.mouseEndOnTreeMap = function (e) {
         var _this = this;
@@ -3972,7 +3987,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
             }
             index = parseFloat(targetId.split('_Item_Index_')[1]);
             item = this.layout.renderItems[index];
-            var labelText = targetEle.innerHTML;
+            var labelText = targetEle.textContent;
             if (this.enableBreadcrumb) {
                 drillLevelValues = this.calculateSelectedTextLevels(labelText, item);
                 drillLevel = drillLevelValues['drillLevel'];
@@ -4090,6 +4105,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse.
      * @return {void}
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     TreeMap.prototype.mouseLeaveOnTreeMap = function (e) {
@@ -4109,7 +4125,7 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * This method is used to select or remove the selection of treemap item based on the provided selection settings.
      *
      * @param {string[]} levelOrder - Specifies the order of the level.
-     * @param {boolean} isSelected - check whether it is selected or not.
+     * @param {boolean} isSelected - Specifies whether the treemap item should be selected or the selection should be removed.
      * @return {void}
      */
     TreeMap.prototype.selectItem = function (levelOrder, isSelected) {
@@ -4222,12 +4238,13 @@ var TreeMap = /** @__PURE__ @class */ (function (_super) {
      * Gets component name.
      *
      * @returns {string} - return the treemap instance.
+     * @private
      */
     TreeMap.prototype.getModuleName = function () {
         return 'treemap';
     };
     /**
-     * This method is used to dispose the treemap component.
+     * This method destroys the treemap. This method removes the events associated with the treemap and disposes the objects created for rendering and updating the treemap.
      */
     TreeMap.prototype.destroy = function () {
         this.unWireEVents();
@@ -4434,9 +4451,12 @@ var LevelsData = /** @__PURE__ @class */ (function () {
 var TreeMapLegend = /** @__PURE__ @class */ (function () {
     function TreeMapLegend(treemap) {
         this.page = 0;
+        /** @private */
         this.legendBorderRect = new Rect(0, 0, 0, 0);
         this.currentPage = 0;
+        /** @private */
         this.heightIncrement = 0;
+        /** @private */
         this.widthIncrement = 0;
         this.textMaxWidth = 0;
         this.legendInteractiveGradient = [];
@@ -4447,9 +4467,11 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * method for legend
+     * @private
      */
     TreeMapLegend.prototype.renderLegend = function () {
         var _this = this;
+        this.page = 0;
         this.legendRenderingCollections = [];
         this.legendCollections = [];
         this.legendNames = [];
@@ -4473,14 +4495,15 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             }
         });
     };
+    /** @private */
     TreeMapLegend.prototype.calculateLegendBounds = function () {
         var _this = this;
         var treemap = this.treemap;
         var legend = treemap.legendSettings;
-        this.findColorMappingLegendItems(LevelsData.levelsData[0]);
-        if ((this.treemap.palette.length > 0 || !isNullOrUndefined(this.treemap.colorValuePath))
+        this.findColorMappingLegendItems(treemap.treemapLevelData.levelsData[0]);
+        if ((this.treemap.palette.length > 0 || !isNullOrUndefined(treemap.colorValuePath))
             && this.legendCollections.length === 0) {
-            this.findPaletteLegendItems(LevelsData.levelsData[0]);
+            this.findPaletteLegendItems(treemap.treemapLevelData.levelsData[0]);
         }
         if (this.legendCollections.length > 0) {
             // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -4966,16 +4989,16 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend
+     * @private
      */
     TreeMapLegend.prototype.drawLegend = function () {
-        var treemap = this.treemap;
-        var legend = treemap.legendSettings;
-        var render = treemap.renderer;
+        var legend = this.treemap.legendSettings;
+        var render = this.treemap.renderer;
         var fill;
         var textOptions;
         var gradientElement;
         var textFont = legend.textStyle;
-        this.legendGroup = render.createGroup({ id: treemap.element.id + '_Legend_Group' });
+        this.legendGroup = render.createGroup({ id: this.treemap.element.id + '_Legend_Group' });
         this.renderLegendBorder();
         this.renderLegendTitle();
         if (legend.mode === 'Default') {
@@ -4983,8 +5006,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         }
         else {
             for (var i = 0; i < this.legendRenderingCollections.length; i++) {
-                var itemId = treemap.element.id + '_Legend_Index_' + i;
-                var textId = treemap.element.id + '_Legend_Index_' + i + '_Text';
+                var itemId = this.treemap.element.id + '_Legend_Index_' + i;
+                var textId = this.treemap.element.id + '_Legend_Index_' + i + '_Text';
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var item = this.legendRenderingCollections[i];
                 gradientElement = item['element'];
@@ -4993,8 +5016,8 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                 var textLocation = new Location(item['textX'], item['textY']);
                 var rectOptions = new RectOption(itemId, fill, legend.shapeBorder, legend.opacity, bounds);
                 if (this.treemap.enableRtl) {
-                    if (treemap.legendSettings.position === 'Left' || treemap.legendSettings.position === 'Right'
-                        || (treemap.legendSettings.position === 'Auto'
+                    if (this.treemap.legendSettings.position === 'Left' || this.treemap.legendSettings.position === 'Right'
+                        || (this.treemap.legendSettings.position === 'Auto'
                             && this.treemap.availableSize.width >= this.treemap.availableSize.height)) {
                         rectOptions.y = (this.translate.y + this.legendBorderRect.y + this.legendBorderRect.height)
                             - (this.translate.y + rectOptions.height) - Math.abs(this.legendBorderRect.y - rectOptions.y);
@@ -5074,11 +5097,11 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
                     cancel: false, name: legendItemRendering, treemap: treemap, fill: collection['Fill'],
                     shape: legend.shape, imageUrl: legend.imageUrl
                 };
-                this_1.treemap.trigger(legendItemRendering, eventArgs, function (observedArgs) {
+                treemap.trigger(legendItemRendering, eventArgs, function (observedArgs) {
                     var renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth_1, isLineShape_1 ? collection['Fill'] : strokeColor_1, legend.opacity, '');
                     legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions, legendText));
                     textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
-                    renderTextElement(textOptions, legend.textStyle, legend.textStyle.color || _this.treemap.themeStyle.legendTextColor, legendElement);
+                    renderTextElement(textOptions, legend.textStyle, legend.textStyle.color || treemap.themeStyle.legendTextColor, legendElement);
                     _this.legendGroup.appendChild(legendElement);
                 });
             };
@@ -5158,8 +5181,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         treemap.svgObject.appendChild(this.legendGroup);
     };
     TreeMapLegend.prototype.renderLegendTitle = function () {
-        var treemap = this.treemap;
-        var legend = treemap.legendSettings;
+        var legend = this.treemap.legendSettings;
         var textStyle = legend.titleStyle;
         var legendTitle = legend.title.text;
         var textOptions;
@@ -5167,7 +5189,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
         var trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         var textSize = measureText(trimTitle, textStyle);
         if (legendTitle) {
-            textOptions = new TextOption(treemap.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - (spacing / 2), 'middle', trimTitle, '');
+            textOptions = new TextOption(this.treemap.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - (spacing / 2), 'middle', trimTitle, '');
             renderTextElement(textOptions, textStyle, textStyle.color || this.treemap.themeStyle.legendTitleColor, this.legendGroup);
         }
     };
@@ -5176,6 +5198,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
      * @returns {void}
+     * @private
      */
     TreeMapLegend.prototype.renderInteractivePointer = function (e) {
         var treemap = this.treemap;
@@ -5317,6 +5340,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
             this.translate = new Location(x, y);
         }
     };
+    /** @private */
     TreeMapLegend.prototype.mouseUpHandler = function (e) {
         this.renderInteractivePointer(e);
         clearTimeout(this.clearTimeout);
@@ -5325,6 +5349,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the interactive pointer
+     * @private
      */
     TreeMapLegend.prototype.removeInteractivePointer = function () {
         if (document.getElementById(this.treemap.element.id + '_Interactive_Legend')) {
@@ -5337,17 +5362,24 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     TreeMapLegend.prototype.changeNextPage = function (e) {
         this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
             (this.currentPage + 1);
-        this.drawLegend();
+        if (this.currentPage >= 0 && this.currentPage < this.totalPages.length) {
+            this.drawLegend();
+        }
+        else {
+            this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? 0 : this.totalPages.length - 1;
+        }
     };
     /**
      * Wire events for event handler
      *
      * @param {Element} element - Specifies the element.
      * @returns {void}
+     * @private
      */
     TreeMapLegend.prototype.wireEvents = function (element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -5355,6 +5387,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To add the event listener
+     * @private
      */
     TreeMapLegend.prototype.addEventListener = function () {
         if (this.treemap.isDestroyed) {
@@ -5366,6 +5399,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the event listener
+     * @private
      */
     TreeMapLegend.prototype.removeEventListener = function () {
         if (this.treemap.isDestroyed) {
@@ -5411,6 +5445,7 @@ var TreeMapLegend = /** @__PURE__ @class */ (function () {
      * @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
      * @param {number} legendIndex - Specifies the index of legend.
      * @returns {string} - Returns the legend color.
+     * @private
      */
     TreeMapLegend.prototype.legendGradientColor = function (colorMap$$1, legendIndex) {
         var legendFillColor;
@@ -5467,6 +5502,7 @@ var TreeMapHighlight = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {boolean} - return the highlight process is true or false.
+     * @private
      */
     TreeMapHighlight.prototype.mouseMove = function (e) {
         var treemap = this.treemap;
@@ -5677,6 +5713,7 @@ var TreeMapSelection = /** @__PURE__ @class */ (function () {
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {void}
+     * @private
      */
     TreeMapSelection.prototype.mouseDown = function (e) {
         var targetEle = e.target;
@@ -6014,12 +6051,12 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
                     markerFill = item['options']['fill'];
                 }
                 if (this.treemap.enableRtl) {
-                    tooltipContent = [textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) ||
-                            formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
+                    tooltipContent = [SanitizeHtmlHelper.sanitize(textFormatter(this.tooltipSettings.format, toolTipData, this.treemap)) ||
+                            SanitizeHtmlHelper.sanitize(formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString())];
                 }
                 else {
-                    tooltipContent = [textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) ||
-                            this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap)];
+                    tooltipContent = [SanitizeHtmlHelper.sanitize(textFormatter(this.tooltipSettings.format, toolTipData, this.treemap)) ||
+                            SanitizeHtmlHelper.sanitize(this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap))];
                 }
                 if (document.getElementById(this.tooltipId)) {
                     tooltipEle = document.getElementById(this.tooltipId);
@@ -6117,6 +6154,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     * @private
      */
     TreeMapTooltip.prototype.addEventListener = function () {
         if (this.treemap.isDestroyed) {
@@ -6128,6 +6166,7 @@ var TreeMapTooltip = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To unbind events for tooltip module
+     * @private
      */
     TreeMapTooltip.prototype.removeEventListener = function () {
         if (this.treemap.isDestroyed) {