@syncfusion/ej2-treemap 20.4.48 → 21.1.35

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

@@ -1,4 +1,4 @@
-import { Ajax, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, NotifyPropertyChanges, Property, compile, createElement, extend, 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 @@ const legendRendering = 'legendRendering';
  */
 const resize = 'resize';
 /**
- * Define the font family in treemap component.
+ * Define the font family in treemap.
  *
  * @private
  */
@@ -131,7 +131,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.
  */
 class Border extends ChildProperty {
 }
@@ -142,7 +142,7 @@ __decorate$1([
     Property(0)
 ], Border.prototype, "width", void 0);
 /**
- * Sets and gets the margin for the treemap component.
+ * Sets and gets the margin for the treemap.
  */
 class Margin extends ChildProperty {
 }
@@ -159,7 +159,7 @@ __decorate$1([
     Property(10)
 ], Margin.prototype, "bottom", void 0);
 /**
- * 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.
  */
 class Font extends ChildProperty {
 }
@@ -182,7 +182,7 @@ __decorate$1([
     Property(1)
 ], Font.prototype, "opacity", void 0);
 /**
- * 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.
  */
 class CommonTitleSettings extends ChildProperty {
 }
@@ -193,7 +193,7 @@ __decorate$1([
     Property('')
 ], CommonTitleSettings.prototype, "description", void 0);
 /**
- * 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.
  */
 class SubTitleSettings extends CommonTitleSettings {
 }
@@ -204,7 +204,7 @@ __decorate$1([
     Property('Center')
 ], SubTitleSettings.prototype, "alignment", void 0);
 /**
- * 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.
  */
 class TitleSettings extends CommonTitleSettings {
 }
@@ -218,7 +218,7 @@ __decorate$1([
     Complex({}, SubTitleSettings)
 ], TitleSettings.prototype, "subtitleSettings", void 0);
 /**
- * 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.
  */
 class ColorMapping extends ChildProperty {
 }
@@ -247,7 +247,7 @@ __decorate$1([
     Property(true)
 ], ColorMapping.prototype, "showLegend", void 0);
 /**
- * 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.
  */
 class LegendSettings extends ChildProperty {
 }
@@ -333,7 +333,7 @@ __decorate$1([
     Property(false)
 ], LegendSettings.prototype, "removeDuplicateLegend", void 0);
 /**
- * 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.
  */
 class InitialDrillSettings extends ChildProperty {
 }
@@ -344,7 +344,7 @@ __decorate$1([
     Property(null)
 ], InitialDrillSettings.prototype, "groupName", void 0);
 /**
- * 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.
  */
 class LeafItemSettings extends ChildProperty {
 }
@@ -394,7 +394,7 @@ __decorate$1([
     Collection([], ColorMapping)
 ], LeafItemSettings.prototype, "colorMapping", void 0);
 /**
- * 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.
  */
 class TooltipSettings extends ChildProperty {
 }
@@ -423,7 +423,7 @@ __decorate$1([
     Complex({ fontFamily: defaultFont, size: '13px' }, Font)
 ], TooltipSettings.prototype, "textStyle", void 0);
 /**
- * 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.
  */
 class SelectionSettings extends ChildProperty {
 }
@@ -464,7 +464,7 @@ __decorate$1([
     Property('Item')
 ], HighlightSettings.prototype, "mode", void 0);
 /**
- * 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.
  */
 class LevelSettings extends ChildProperty {
 }
@@ -515,7 +515,7 @@ __decorate$1([
 ], LevelSettings.prototype, "colorMapping", void 0);
 
 /**
- * Create the class for size
+ * Specifies the size parameters.
  */
 class Size {
     constructor(width, height) {
@@ -592,7 +592,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;
@@ -653,7 +653,7 @@ function textTrim(maxWidth, text, font) {
     return label;
 }
 /**
- * Map internal class for Point
+ * Specifies the location parameters.
  */
 class Location {
     constructor(x, y) {
@@ -669,6 +669,7 @@ class Location {
  * @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) {
     let x;
@@ -1351,6 +1352,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) {
     let hideText = text;
@@ -1671,7 +1673,7 @@ function isParentItem(data, item) {
     return isParentItem;
 }
 /**
- * Ajax support for treemap
+ * Specifies the data to be received through Ajax request for treemap.
  */
 class TreeMapAjax {
     constructor(options, type, async, contentType, sendData) {
@@ -1791,6 +1793,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', {
@@ -1825,12 +1828,12 @@ class LayoutPanel {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let data;
         let 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') {
@@ -1849,7 +1852,7 @@ class LayoutPanel {
                 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 {
@@ -1858,7 +1861,7 @@ class LayoutPanel {
                         : 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();
             }
         }
@@ -2438,18 +2441,18 @@ class LayoutPanel {
         const treemap = this.treemap;
         let itemFill = isLeafItem ? treemap.leafItemSettings.fill : treemap.levels[item['groupIndex']].fill;
         let 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
-        const parentData = findChildren(LevelsData.levelsData[0])['values'];
+        const parentData = findChildren(treemap.treemapLevelData.levelsData[0])['values'];
         const colorMapping = isLeafItem ? treemap.leafItemSettings.colorMapping :
             treemap.levels[item['groupIndex']].colorMapping;
         if (colorMapping.length > 0) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const option = colorMap(colorMapping, item['data'][this.treemap.equalColorValuePath], item['data'][this.treemap.rangeColorValuePath]);
+            const option = colorMap(colorMapping, item['data'][treemap.equalColorValuePath], item['data'][treemap.rangeColorValuePath]);
             itemFill = !isNullOrUndefined(option['fill']) ? option['fill'] : treemap.leafItemSettings.fill;
             itemOpacity = option['opacity'];
         }
@@ -2940,7 +2943,7 @@ class PdfExport {
      * @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
@@ -3012,7 +3015,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>
@@ -3023,7 +3026,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  */
 let TreeMap = class TreeMap extends Component {
     /**
-     * Constructor for TreeMap component.
+     * Constructor for TreeMap.
      *
      * @param {TreeMapModel} options - Specifies the treemap instance.
      * @param {string | HTMLElement} element - Specifies the treemap element.
@@ -3059,16 +3062,17 @@ let TreeMap = class TreeMap extends Component {
         this.renderElements();
     }
     renderElements() {
-        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();
     }
@@ -3233,7 +3237,7 @@ let TreeMap = class TreeMap extends Component {
         // 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((data) => {
                 data[this.weightValuePath] = (data[this.weightValuePath]) ? data[this.weightValuePath].toString() :
@@ -3273,28 +3277,28 @@ let TreeMap = class TreeMap extends Component {
                         }
                     }
                 }
-                LevelsData.levelsData.push(data);
+                this.treemapLevelData.levelsData.push(data);
             }
             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 (let i = 0; i < LevelsData.hierarchyData.length; i++) {
-                        this.processHierarchicalData(LevelsData.hierarchyData[i], i);
+                    this.treemapLevelData.hierarchyData = extend([], this.dataSource, this.treemapLevelData.hierarchyData, true);
+                    for (let 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');
             }
         }
     }
@@ -3355,19 +3359,19 @@ let TreeMap = class TreeMap extends Component {
                 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
-            let mainData = LevelsData.hierarchyData[0][this.levels[0].groupPath];
-            for (let k = 0; k < LevelsData.hierarchyData.length; k++) {
-                childData = findChildren(LevelsData.hierarchyData[k])['values'];
+            let mainData = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
+            for (let 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((currentData) => { mainData.push(currentData); });
-                    LevelsData.hierarchyData.splice(k, 1);
+                    this.treemapLevelData.hierarchyData.splice(k, 1);
                     k -= 1;
                 }
             }
-            mainData = LevelsData.hierarchyData[0][this.levels[0].groupPath];
+            mainData = this.treemapLevelData.hierarchyData[0][this.levels[0].groupPath];
             for (let l = 0; l < mainData.length; l++) {
                 newData[this.levels[0].groupPath] = mainData;
                 mainData[l]['parent'] = newData;
@@ -3424,7 +3428,7 @@ let TreeMap = class TreeMap extends Component {
             const level = {};
             level['level'] = i;
             level[groupPath] = [];
-            LevelsData.levelsData.push(level);
+            this.treemapLevelData.levelsData.push(level);
             for (let j = 0; j < this.dataSource.length; j++) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const currentData = {};
@@ -3446,7 +3450,7 @@ let TreeMap = class TreeMap extends Component {
                         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);
                     }
                 }
@@ -3458,15 +3462,16 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {number} start - Specifies the start value of the treemap level.
      * @returns {void}
+     * @private
      */
     reOrderLevelData(start) {
         let currentName;
         const currentPath = this.levels[start] ? this.levels[start].groupPath : this.leafItemSettings.labelPath;
         const prevPath = this.levels[start - 1].groupPath;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const currentData = LevelsData.levelsData[start][currentPath];
+        const currentData = this.treemapLevelData.levelsData[start][currentPath];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const previousData = LevelsData.levelsData[start - 1][prevPath];
+        const previousData = this.treemapLevelData.levelsData[start - 1][prevPath];
         for (let i = 0; i < currentData.length; i++) {
             currentName = currentData[i]['levelOrderName'];
             for (let j = 0; j < previousData.length; j++) {
@@ -3482,8 +3487,8 @@ let TreeMap = class TreeMap extends Component {
                 }
             }
         }
-        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);
         }
@@ -3506,6 +3511,7 @@ let TreeMap = class TreeMap extends Component {
      * @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
     findTotalWeight(processData, type) {
@@ -3535,6 +3541,7 @@ let TreeMap = class TreeMap extends Component {
      * To unbind event handlers for treemap.
      *
      * @returns {void}
+     * @private
      */
     unWireEVents() {
         EventHandler.remove(this.element, 'click', this.clickOnTreeMap);
@@ -3585,6 +3592,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {Event} e - Specifies the pointer event.
      * @returns {void}
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     resizeOnTreeMap(e) {
@@ -3620,6 +3628,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the mouse click event in the treemap.
      * @returns {void}
+     * @private
      */
     clickOnTreeMap(e) {
         const targetEle = e.target;
@@ -3641,7 +3650,7 @@ let TreeMap = class TreeMap extends Component {
                 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);
@@ -3674,6 +3683,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     rightClickOnTreeMap(e) {
         const rightClickArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
@@ -3684,6 +3694,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     mouseDownOnTreeMap(e) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
@@ -3696,6 +3707,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse click.
      * @returns {void}
+     * @private
      */
     mouseMoveOnTreeMap(e) {
         const targetEle = e.target;
@@ -3724,6 +3736,7 @@ let TreeMap = class TreeMap extends Component {
      * @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
     calculateSelectedTextLevels(labelText, item) {
@@ -3789,6 +3802,7 @@ let TreeMap = class TreeMap extends Component {
      * @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
     compareSelectedLabelWithDrillDownItems(drillLevelValues, item, i) {
@@ -3815,6 +3829,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse.
      * @returns {void}
+     * @private
      */
     mouseEndOnTreeMap(e) {
         const targetEle = e.target;
@@ -3839,7 +3854,7 @@ let TreeMap = class TreeMap extends Component {
             }
             index = parseFloat(targetId.split('_Item_Index_')[1]);
             item = this.layout.renderItems[index];
-            const labelText = targetEle.innerHTML;
+            const labelText = targetEle.textContent;
             if (this.enableBreadcrumb) {
                 drillLevelValues = this.calculateSelectedTextLevels(labelText, item);
                 drillLevel = drillLevelValues['drillLevel'];
@@ -3957,6 +3972,7 @@ let TreeMap = class TreeMap extends Component {
      *
      * @param {PointerEvent} e - Specifies the pointer event of mouse.
      * @return {void}
+     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mouseLeaveOnTreeMap(e) {
@@ -3976,7 +3992,7 @@ let TreeMap = class TreeMap extends Component {
      * 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}
      */
     selectItem(levelOrder, isSelected) {
@@ -4088,12 +4104,13 @@ let TreeMap = class TreeMap extends Component {
      * Gets component name.
      *
      * @returns {string} - return the treemap instance.
+     * @private
      */
     getModuleName() {
         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.
      */
     destroy() {
         this.unWireEVents();
@@ -4296,9 +4313,12 @@ class LevelsData {
 class TreeMapLegend {
     constructor(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 = [];
@@ -4309,8 +4329,10 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * method for legend
+     * @private
      */
     renderLegend() {
+        this.page = 0;
         this.legendRenderingCollections = [];
         this.legendCollections = [];
         this.legendNames = [];
@@ -4334,13 +4356,14 @@ class TreeMapLegend {
             }
         });
     }
+    /** @private */
     calculateLegendBounds() {
         const treemap = this.treemap;
         const 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
@@ -4826,16 +4849,16 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To draw the legend
+     * @private
      */
     drawLegend() {
-        const treemap = this.treemap;
-        const legend = treemap.legendSettings;
-        const render = treemap.renderer;
+        const legend = this.treemap.legendSettings;
+        const render = this.treemap.renderer;
         let fill;
         let textOptions;
         let gradientElement;
         const 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') {
@@ -4843,8 +4866,8 @@ class TreeMapLegend {
         }
         else {
             for (let i = 0; i < this.legendRenderingCollections.length; i++) {
-                const itemId = treemap.element.id + '_Legend_Index_' + i;
-                const textId = treemap.element.id + '_Legend_Index_' + i + '_Text';
+                const itemId = this.treemap.element.id + '_Legend_Index_' + i;
+                const textId = this.treemap.element.id + '_Legend_Index_' + i + '_Text';
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const item = this.legendRenderingCollections[i];
                 gradientElement = item['element'];
@@ -4853,8 +4876,8 @@ class TreeMapLegend {
                 const textLocation = new Location(item['textX'], item['textY']);
                 const 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);
@@ -4934,11 +4957,11 @@ class TreeMapLegend {
                     cancel: false, name: legendItemRendering, treemap: treemap, fill: collection['Fill'],
                     shape: legend.shape, imageUrl: legend.imageUrl
                 };
-                this.treemap.trigger(legendItemRendering, eventArgs, (observedArgs) => {
+                treemap.trigger(legendItemRendering, eventArgs, (observedArgs) => {
                     const renderOptions = new PathOption(shapeId, observedArgs.fill, strokeWidth, isLineShape ? collection['Fill'] : strokeColor, legend.opacity, '');
                     legendElement.appendChild(drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions, legendText));
                     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);
                 });
             }
@@ -5013,8 +5036,7 @@ class TreeMapLegend {
         treemap.svgObject.appendChild(this.legendGroup);
     }
     renderLegendTitle() {
-        const treemap = this.treemap;
-        const legend = treemap.legendSettings;
+        const legend = this.treemap.legendSettings;
         const textStyle = legend.titleStyle;
         const legendTitle = legend.title.text;
         let textOptions;
@@ -5022,7 +5044,7 @@ class TreeMapLegend {
         const trimTitle = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
         const 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);
         }
     }
@@ -5031,6 +5053,7 @@ class TreeMapLegend {
      *
      * @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
      * @returns {void}
+     * @private
      */
     renderInteractivePointer(e) {
         const treemap = this.treemap;
@@ -5172,6 +5195,7 @@ class TreeMapLegend {
             this.translate = new Location(x, y);
         }
     }
+    /** @private */
     mouseUpHandler(e) {
         this.renderInteractivePointer(e);
         clearTimeout(this.clearTimeout);
@@ -5180,6 +5204,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the interactive pointer
+     * @private
      */
     removeInteractivePointer() {
         if (document.getElementById(this.treemap.element.id + '_Interactive_Legend')) {
@@ -5192,17 +5217,24 @@ class TreeMapLegend {
      *
      * @param {PointerEvent} e - Specifies the pointer event argument.
      * @returns {void}
+     * @private
      */
     changeNextPage(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
      */
     wireEvents(element) {
         EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
@@ -5210,6 +5242,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To add the event listener
+     * @private
      */
     addEventListener() {
         if (this.treemap.isDestroyed) {
@@ -5221,6 +5254,7 @@ class TreeMapLegend {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To remove the event listener
+     * @private
      */
     removeEventListener() {
         if (this.treemap.isDestroyed) {
@@ -5266,6 +5300,7 @@ class TreeMapLegend {
      * @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
      * @param {number} legendIndex - Specifies the index of legend.
      * @returns {string} - Returns the legend color.
+     * @private
      */
     legendGradientColor(colorMap$$1, legendIndex) {
         let legendFillColor;
@@ -5321,6 +5356,7 @@ class TreeMapHighlight {
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {boolean} - return the highlight process is true or false.
+     * @private
      */
     mouseMove(e) {
         const treemap = this.treemap;
@@ -5530,6 +5566,7 @@ class TreeMapSelection {
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {void}
+     * @private
      */
     mouseDown(e) {
         const targetEle = e.target;
@@ -5865,12 +5902,12 @@ class TreeMapTooltip {
                     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);
@@ -5968,6 +6005,7 @@ class TreeMapTooltip {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To bind events for tooltip module
+     * @private
      */
     addEventListener() {
         if (this.treemap.isDestroyed) {
@@ -5979,6 +6017,7 @@ class TreeMapTooltip {
     // eslint-disable-next-line valid-jsdoc
     /**
      * To unbind events for tooltip module
+     * @private
      */
     removeEventListener() {
         if (this.treemap.isDestroyed) {