@syncfusion/ej2-treegrid 20.4.54 → 21.1.37

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

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { Aggregate, Cell, CellRenderer, CellType, Clipboard, ColumnChooser, ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, ColumnMenu, ColumnVirtualFreezeRenderer, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, FreezeContentRender, FreezeRender, FreezeRowModelGenerator, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualFreezeHdrRenderer, VirtualFreezeRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, setDebounce, templateCompiler } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { CacheAdaptor, DataManager, DataUtil, Deferred, JsonAdaptor, ODataAdaptor, Predicate, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor } from '@syncfusion/ej2-data';
@@ -1601,7 +1601,7 @@ class Render {
                 addClass([expandIcon], (expand) ? 'e-treegridexpand' : 'e-treegridcollapse');
                 totalIconsWidth += 18;
                 container.appendChild(expandIcon);
-                emptyExpandIcon.style.width = '7px';
+                emptyExpandIcon.style.width = '4px';
                 totalIconsWidth += 7;
                 container.appendChild(emptyExpandIcon.cloneNode());
             }
@@ -1728,7 +1728,7 @@ class Render {
                 }
                 else {
                     const str = 'isStringTemplate';
-                    const result = args.column[`${templateFn}`](extend$1({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent[`${str}`], undefined, undefined, this.parent['root']);
+                    const result = args.column[`${templateFn}`](extend$1({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent[`${str}`]);
                     appendChildren(cellElement, result);
                 }
                 delete args.column.template;
@@ -3800,6 +3800,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         if (this.isVue) {
             this.grid.isVue = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.grid.vueInstance = this.vueInstance;
         }
         createSpinner({ target: this.element }, this.createElement);
         this.log(['mapping_fields_missing']);
@@ -3963,6 +3965,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid[`${templateInstance}`] = this[`${templateInstance}`];
         const isJsComponent = 'isJsComponent';
         this.grid[`${isJsComponent}`] = true;
+        const enableHtmlSanitizer = 'enableHtmlSanitizer';
+        this.grid[`${enableHtmlSanitizer}`] = this.enableHtmlSanitizer;
     }
     triggerEvents(args) {
         this.trigger(getObject('name', args), args);
@@ -3970,7 +3974,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     IsExpandCollapseClicked(args) {
         if (!isNullOrUndefined(args.target) && (args.target.classList.contains('e-treegridexpand')
             || args.target.classList.contains('e-treegridcollapse') || args.target.classList.contains('e-summarycell'))
-            && (!isNullOrUndefined(args.data) && args.data['hasChildRecords'])) {
+            && (!isNullOrUndefined(args.data) && args.data['hasChildRecords']) && !this.selectionSettings.checkboxOnly) {
             args.cancel = true;
             return;
         }
@@ -5457,13 +5461,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             for (let i = 0; i < this.columns.length; i++) {
                 if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].columns)) {
                     for (let j = 0; j < this.columns[parseInt(i.toString(), 10)].columns.length; j++) {
-                        const stackedColumn = this.columns[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)];
+                        const stackedColumn = this.columns[parseInt(i.toString(), 10)]
+                            .columns[parseInt(j.toString(), 10)];
                         const currentColumn = this.grid.getColumnByField(stackedColumn.field);
                         stackedColumn.width = currentColumn.width;
                     }
                 }
                 else if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].field)) {
-                    const currentColumn = this.grid.getColumnByField(this.columns[parseInt(i.toString(), 10)].field);
+                    const fieldName = this.columns[parseInt(i.toString(), 10)].field;
+                    const currentColumn = this.grid.getColumnByField(fieldName);
                     this.columns[parseInt(i.toString(), 10)].width = currentColumn.width;
                 }
             }
@@ -6373,8 +6379,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         }
         for (let i = 0; i < detailrows.length; i++) {
-            if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
-                || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
+            if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization ||
+                this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
                 gridRowsObject[detailrows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
                 detailrows[parseInt(i.toString(), 10)].style.display = displayAction;
             }
@@ -6471,6 +6477,20 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         }
     }
+    /**
+     * Method to sanitize html element
+     *
+     * @param {any} value - Specifies the html value to sanitize
+     * @returns {any} Returns the sanitized html value
+     * @hidden
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sanitize(value) {
+        if (this.enableHtmlSanitizer && typeof (value) === 'string') {
+            return SanitizeHtmlHelper.sanitize(value);
+        }
+        return value;
+    }
     /**
      * Updates the rows and cells
      *
@@ -7042,6 +7062,9 @@ __decorate([
 __decorate([
     Property(false)
 ], TreeGrid.prototype, "enableColumnVirtualization", void 0);
+__decorate([
+    Property(false)
+], TreeGrid.prototype, "enableHtmlSanitizer", void 0);
 __decorate([
     Property(false)
 ], TreeGrid.prototype, "enableInfiniteScrolling", void 0);
@@ -7957,6 +7980,7 @@ class RowDD$1 {
     addErrorElem() {
         const dragelem = document.getElementsByClassName('e-cloneproperties')[0];
         const errorelem = dragelem.querySelectorAll('.e-errorelem').length;
+        const sanitize = 'sanitize';
         if (!errorelem && !this.parent.rowDropSettings.targetID) {
             const ele = document.createElement('div');
             classList(ele, ['e-errorcontainer'], []);
@@ -7964,14 +7988,14 @@ class RowDD$1 {
             const errorVal = dragelem.querySelector('.errorValue');
             let content$$1 = dragelem.querySelector('.e-rowcell').innerHTML;
             if (errorVal) {
-                content$$1 = errorVal.innerHTML;
+                content$$1 = this.parent[`${sanitize}`](errorVal.innerHTML);
                 errorVal.parentNode.removeChild(errorVal);
             }
             dragelem.querySelector('.e-rowcell').innerHTML = '';
             const spanContent = document.createElement('span');
             spanContent.className = 'errorValue';
             spanContent.style.paddingLeft = '16px';
-            spanContent.innerHTML = content$$1;
+            spanContent.innerHTML = this.parent[`${sanitize}`](content$$1);
             dragelem.querySelector('.e-rowcell').appendChild(ele);
             dragelem.querySelector('.e-rowcell').appendChild(spanContent);
             const dropItemSpan = document.querySelector('.e-dropitemscount');
@@ -8362,13 +8386,14 @@ class RowDD$1 {
                             const childRecords = rec[0].childRecords;
                             const droppedRecordIndex = childRecords.indexOf(droppedRecord) + 1;
                             childRecords.splice(droppedRecordIndex, 0, draggedRecord);
-                            draggedRecord.parentItem = droppedRecord.parentItem;
+                            if (this.parent.enableImmutableMode || this.parent['isIndentEnabled'] && !this.parent.parentIdMapping) {
+                                draggedRecord.parentItem = droppedRecord.parentItem;
+                                draggedRecord.level = droppedRecord.level;
+                            }
                             draggedRecord.parentUniqueID = droppedRecord.parentUniqueID;
-                            draggedRecord.level = droppedRecord.level;
                             if (this.parent.parentIdMapping) {
                                 draggedRecord[this.parent.parentIdMapping] = droppedRecord[this.parent.parentIdMapping];
-                                draggedRecord.parentItem = droppedRecord.parentItem;
-                                draggedRecord.level = droppedRecord.level;
+                                draggedRecord.parentUniqueID = droppedRecord.parentUniqueID;
                             }
                         }
                         if (draggedRecord.hasChildRecords) {
@@ -13218,12 +13243,15 @@ class Freeze$1 {
             rows = args.detailrows;
         }
         for (let i = 0; i < rows.length; i++) {
-            let row = rows[parseInt(i.toString(), 10)];
+            const row = rows[parseInt(i.toString(), 10)];
             const rData = this.parent.grid.getRowObjectFromUID(row.getAttribute('data-Uid')).data;
             if (!isNullOrUndefined(movableRows) && row.parentElement.firstElementChild.clientHeight > 0) {
                 row.style.height = row.parentElement.firstElementChild.clientHeight + 'px';
             }
             row.style.display = args.action;
+            if (freeze && frozenRightRows.length) {
+                frozenRightRows[parseInt(i.toString(), 10)].style.display = args.action;
+            }
             const queryselector = args.action === 'none' ? '.e-treecolumn-container .e-treegridcollapse'
                 : '.e-treecolumn-container .e-treegridexpand';
             if (frozenrows[row.rowIndex].querySelector(queryselector)) {