@syncfusion/ej2-lists 32.2.3 → 32.2.7

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

@@ -67,6 +67,7 @@ var ListBase;
         showCheckBox: false,
         showIcon: false,
         enableHtmlSanitizer: false,
+        disableHtmlEncode: false,
         expandCollapse: false,
         fields: ListBase.defaultMappedFields,
         ariaAttributes: defaultAriaAttributes,
@@ -261,14 +262,10 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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 @@ 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.
@@ -1423,13 +1419,13 @@ var ListView = /** @__PURE__ @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,
@@ -1460,10 +1456,10 @@ var ListView = /** @__PURE__ @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');
@@ -1553,7 +1549,8 @@ var ListView = /** @__PURE__ @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();
     };
@@ -3241,6 +3238,9 @@ var ListView = /** @__PURE__ @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);