@syncfusion/ej2-lists 32.2.3 → 32.2.7

package/dist/es6/ej2-lists.es2015.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)) {
                     let tooltipText = fieldData[fields.tooltip];
-                    if (options && options.enableHtmlSanitizer) {
-                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
-                    }
-                    else {
-                        let tooltipTextElement = createElement('span', { innerHTML: tooltipText });
-                        tooltipText = tooltipTextElement.innerText;
-                        tooltipTextElement = null;
-                    }
+                    tooltipText = getSanitizedText(tooltipText, curOpt);
+                    let 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)) {
                     let tooltipText = fieldData[fields.tooltip];
-                    if (options && options.enableHtmlSanitizer) {
-                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
-                    }
-                    else {
-                        let tooltipTextElement = createElement('span', { innerHTML: tooltipText });
-                        tooltipText = tooltipTextElement.innerText;
-                        tooltipTextElement = null;
-                    }
+                    tooltipText = getSanitizedText(tooltipText, curOpt);
+                    let 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]) {
@@ -821,6 +814,7 @@ var ListBase;
                 fieldData[fields.text] : (fieldData[fields.text] || '');
             value = fieldData[fields.value];
         }
+        text = getSanitizedText(text, curOpt);
         let elementID;
         if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])
             && fieldData[fields.id] !== '') {
@@ -837,11 +831,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);
@@ -854,7 +845,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) {
@@ -905,9 +896,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) {
         const fieldData = getFieldValues(dataSource, fields);
         const attr = { href: fieldData[fields.url] };
         if (Object.prototype.hasOwnProperty.call(fieldData, fields.urlAttributes) && fieldData[fields.urlAttributes]) {
@@ -916,8 +908,11 @@ var ListBase;
                 fieldData[fields.urlAttributes].href;
         }
         let anchorTag;
+        const curOpt = extend({}, defaultListBaseOptions, options);
+        const 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 });
@@ -925,7 +920,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);
@@ -957,9 +952,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);
         const li = createElement('li', {
             className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),
             attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?
@@ -1009,19 +1002,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 {
                 const 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);
@@ -1077,6 +1065,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.
@@ -1398,13 +1394,13 @@ let ListView = class ListView extends Component {
         if (this.headerEle === undefined && this.showHeader) {
             this.headerEle = this.createElement('div', { className: classNames.header });
             const 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;
+            const 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);
             const textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
             const hedBackButton = this.createElement('div', {
                 className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
@@ -1435,10 +1431,10 @@ let ListView = class ListView extends Component {
                 this.headerEle.style.display = '';
                 const textEle = this.headerEle.querySelector('.' + classNames.headerText);
                 const hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
-                if (this.enableHtmlSanitizer) {
-                    text = SanitizeHtmlHelper.sanitize(text);
-                }
-                textEle.innerHTML = text;
+                const 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');
@@ -1527,7 +1523,8 @@ let ListView = class ListView extends Component {
             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();
     }
@@ -3200,6 +3197,9 @@ __decorate([
 __decorate([
     Property(true)
 ], ListView.prototype, "enableHtmlSanitizer", void 0);
+__decorate([
+    Property(true)
+], ListView.prototype, "disableHtmlEncode", void 0);
 __decorate([
     Property('')
 ], ListView.prototype, "height", void 0);