@syncfusion/ej2-lists 32.2.6 → 32.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.3
+*  version : 32.2.7
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-lists",
-  "version": "32.2.6",
+  "version": "32.2.7",
   "description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,9 +9,9 @@
   "es2015": "./dist/es6/ej2-lists.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~32.2.6",
-    "@syncfusion/ej2-buttons": "~32.2.3",
+    "@syncfusion/ej2-buttons": "~32.2.7",
     "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.6"
+    "@syncfusion/ej2-popups": "~32.2.7"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/list-base.d.ts

@@ -258,6 +258,8 @@ export declare namespace ListBase {
      * @returns {HTMLElement} - The modified LI element.
      */
     function generateIcon(createElement: createElementParams, liElement: HTMLElement, className?: string, options?: ListBaseOptions): HTMLElement;
+    function getDomSetter(options: ListBaseOptions): 'textContent' | 'innerHTML';
+    function getSanitizedText(text: string, options: ListBaseOptions): string;
 }
 export declare type createElementParams = (tag: string, prop?: {
     id?: string;
@@ -393,8 +395,16 @@ export interface ListBaseOptions {
     isStringTemplate?: string;
     /**
      * Defines whether to allow the cross scripting site or not.
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
      */
     enableHtmlSanitizer?: boolean;
+    /**
+     * Enables rendering of raw text content without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     */
+    disableHtmlEncode?: boolean;
     /**
      * If set true to this property then the entire list will be navigate-able instead of text element
      */

package/src/common/list-base.js

@@ -67,6 +67,7 @@ export var ListBase;
         showCheckBox: false,
         showIcon: false,
         enableHtmlSanitizer: false,
+        disableHtmlEncode: false,
         expandCollapse: false,
         fields: ListBase.defaultMappedFields,
         ariaAttributes: defaultAriaAttributes,
@@ -261,14 +262,10 @@ export var ListBase;
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 if (Object.prototype.hasOwnProperty.call(fieldData, fields.tooltip)) {
                     var tooltipText = fieldData[fields.tooltip];
-                    if (options && options.enableHtmlSanitizer) {
-                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
-                    }
-                    else {
-                        var tooltipTextElement = createElement('span', { innerHTML: tooltipText });
-                        tooltipText = tooltipTextElement.innerText;
-                        tooltipTextElement = null;
-                    }
+                    tooltipText = getSanitizedText(tooltipText, curOpt);
+                    var tooltipTextElement = createElement('span', { innerHTML: tooltipText });
+                    tooltipText = tooltipTextElement.innerText;
+                    tooltipTextElement = null;
                     li.setAttribute('title', tooltipText);
                 }
                 if (curOpt.itemNavigable && checkboxElement.length) {
@@ -285,14 +282,10 @@ export var ListBase;
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 if (Object.prototype.hasOwnProperty.call(fieldData, fields.tooltip)) {
                     var tooltipText = fieldData[fields.tooltip];
-                    if (options && options.enableHtmlSanitizer) {
-                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
-                    }
-                    else {
-                        var tooltipTextElement = createElement('span', { innerHTML: tooltipText });
-                        tooltipText = tooltipTextElement.innerText;
-                        tooltipTextElement = null;
-                    }
+                    tooltipText = getSanitizedText(tooltipText, curOpt);
+                    var tooltipTextElement = createElement('span', { innerHTML: tooltipText });
+                    tooltipText = tooltipTextElement.innerText;
+                    tooltipTextElement = null;
                     li.setAttribute('title', tooltipText);
                 }
                 if (Object.prototype.hasOwnProperty.call(fieldData, fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
@@ -824,6 +817,7 @@ export var ListBase;
                 fieldData[fields.text] : (fieldData[fields.text] || '');
             value = fieldData[fields.value];
         }
+        text = getSanitizedText(text, curOpt);
         var elementID;
         if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])
             && fieldData[fields.id] !== '') {
@@ -840,11 +834,8 @@ export var ListBase;
         if (dataSource && Object.prototype.hasOwnProperty.call(fieldData, fields.enabled) && fieldData[fields.enabled].toString() === 'false') {
             li.classList.add(cssClass.disabled);
         }
-        if (options && options.enableHtmlSanitizer) {
-            text = SanitizeHtmlHelper.sanitize(text);
-        }
         if (grpLI) {
-            li.innerText = text;
+            li[getDomSetter(curOpt)] = text;
         }
         else {
             li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);
@@ -857,7 +848,7 @@ export var ListBase;
             }
             if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&
                 fieldData[fields.urlAttributes].href))) {
-                li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable));
+                li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable, curOpt));
             }
             else {
                 if (innerElements.length && curOpt.itemNavigable) {
@@ -908,9 +899,10 @@ export var ListBase;
      * @param {string} text - The text content of the anchor tag.
      * @param {HTMLElement[]} innerElements - Optional array of inner elements to append to the anchor tag.
      * @param {boolean} isFullNavigation - Indicates whether the anchor tag should be for full navigation.
+     * @param {ListBaseOptions} [options] - Optional ListBase options.
      * @returns {HTMLElement} The created anchor tag element.
      */
-    function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {
+    function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation, options) {
         var fieldData = getFieldValues(dataSource, fields);
         var attr = { href: fieldData[fields.url] };
         if (Object.prototype.hasOwnProperty.call(fieldData, fields.urlAttributes) && fieldData[fields.urlAttributes]) {
@@ -919,8 +911,11 @@ export var ListBase;
                 fieldData[fields.urlAttributes].href;
         }
         var anchorTag;
+        var curOpt = extend({}, defaultListBaseOptions, options);
+        var safeText = getSanitizedText(text, curOpt);
         if (!isFullNavigation) {
-            anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });
+            anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });
+            anchorTag[getDomSetter(curOpt)] = safeText;
         }
         else {
             anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });
@@ -928,7 +923,7 @@ export var ListBase;
             if (innerElements && innerElements.length) {
                 append(innerElements, anchorWrapper);
             }
-            anchorWrapper.appendChild(document.createTextNode(text));
+            anchorWrapper.appendChild(document.createTextNode(safeText));
             append([anchorWrapper], anchorTag);
         }
         setAttribute(anchorTag, attr);
@@ -960,9 +955,7 @@ export var ListBase;
             grpLI = (Object.prototype.hasOwnProperty.call(item, 'isHeader') && item.isHeader)
                 ? true : false;
         }
-        if (options && options.enableHtmlSanitizer) {
-            text = SanitizeHtmlHelper.sanitize(text);
-        }
+        text = getSanitizedText(text, curOpt);
         var li = createElement('li', {
             className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),
             attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?
@@ -1012,19 +1005,14 @@ export var ListBase;
             });
             if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&
                 fieldData[fields.urlAttributes].href))) {
-                innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable));
+                innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable, curOpt));
             }
             else {
                 var element = createElement('span', {
                     className: cssClass.text,
                     attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {})
                 });
-                if (options && options.enableHtmlSanitizer) {
-                    element.innerText = text;
-                }
-                else {
-                    element.innerHTML = text;
-                }
+                element[getDomSetter(curOpt)] = text;
                 innerDiv.appendChild(element);
             }
             li.appendChild(innerDiv);
@@ -1080,6 +1068,14 @@ export var ListBase;
         return liElement;
     }
     ListBase.generateIcon = generateIcon;
+    function getDomSetter(options) {
+        return options.disableHtmlEncode ? 'textContent' : 'innerHTML';
+    }
+    ListBase.getDomSetter = getDomSetter;
+    function getSanitizedText(text, options) {
+        return options.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
+    }
+    ListBase.getSanitizedText = getSanitizedText;
 })(ListBase || (ListBase = {}));
 /**
  * Used to get dataSource item from complex data using fields.

package/src/list-view/list-view-model.d.ts

@@ -237,10 +237,23 @@ export interface ListViewModel extends ComponentModel{
      *
      * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer?: boolean;
 
+    /**
+     * Enables rendering of raw text content in the ListView component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode?: boolean
+
     /**
      * Defines the height of the ListView component which accepts both string and number values.
      *

package/src/list-view/list-view.d.ts

@@ -317,9 +317,21 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      *
      * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
      *
+     * **Note:** To correctly remove untrusted HTML values, `disableHtmlEncode` must also be set to true. When `enableHtmlSanitizer` is set to false, `disableHtmlEncode` must also be set to false.
+     *
      * @default true
      */
     enableHtmlSanitizer: boolean;
+    /**
+     * Enables rendering of raw text content in the ListView component without HTML encoding.
+     * When set to true, the text will be displayed exactly as provided (including HTML tags or special characters),
+     * instead of being encoded or truncated (e.g., `hiiih<hihi` will be shown as-is).
+     *
+     * **Note:** To preserve and render raw HTML content correctly, `enableHtmlSanitizer` must also be set to false.
+     *
+     * @default true
+     */
+    disableHtmlEncode: boolean;
     /**
      * Defines the height of the ListView component which accepts both string and number values.
      *

package/src/list-view/list-view.js

@@ -302,13 +302,13 @@ var ListView = /** @class */ (function (_super) {
         if (this.headerEle === undefined && this.showHeader) {
             this.headerEle = this.createElement('div', { className: classNames.header });
             var innerHeaderEle = this.createElement('span', { className: classNames.headerText });
-            if (this.enableHtmlSanitizer) {
-                this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
-                innerHeaderEle.innerText = this.headerTitle;
-            }
-            else {
-                innerHeaderEle.innerHTML = this.headerTitle;
+            var curOpt = this.listBaseOption || {
+                enableHtmlSanitizer: this.enableHtmlSanitizer, disableHtmlEncode: this.disableHtmlEncode
+            };
+            if (curOpt.enableHtmlSanitizer) {
+                this.setProperties({ headerTitle: ListBase.getSanitizedText(this.headerTitle, curOpt) }, true);
             }
+            innerHeaderEle[ListBase.getDomSetter(curOpt)] = ListBase.getSanitizedText(this.headerTitle, curOpt);
             var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
             var hedBackButton = this.createElement('div', {
                 className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
@@ -339,10 +339,10 @@ var ListView = /** @class */ (function (_super) {
                 this.headerEle.style.display = '';
                 var textEle = this.headerEle.querySelector('.' + classNames.headerText);
                 var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
-                if (this.enableHtmlSanitizer) {
-                    text = SanitizeHtmlHelper.sanitize(text);
-                }
-                textEle.innerHTML = text;
+                var curOpt = this.listBaseOption || {
+                    enableHtmlSanitizer: this.enableHtmlSanitizer, disableHtmlEncode: this.disableHtmlEncode
+                };
+                textEle[ListBase.getDomSetter(curOpt)] = ListBase.getSanitizedText(text, curOpt);
                 if (this.headerTemplate && showBack) {
                     textEle.parentElement.classList.remove('header');
                     this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
@@ -432,7 +432,8 @@ var ListView = /** @class */ (function (_super) {
             itemCreated: this.renderCheckbox.bind(this),
             templateID: "" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY,
             groupTemplateID: "" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY,
-            enableHtmlSanitizer: this.enableHtmlSanitizer
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode
         };
         this.initialization();
     };
@@ -2120,6 +2121,9 @@ var ListView = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], ListView.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Property(true)
+    ], ListView.prototype, "disableHtmlEncode", void 0);
     __decorate([
         Property('')
     ], ListView.prototype, "height", void 0);