@syncfusion/ej2-lists 24.2.8 → 25.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.8
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-lists@*",
-  "_id": "@syncfusion/ej2-lists@24.2.4",
+  "_id": "@syncfusion/ej2-lists@18.23.1",
   "_inBundle": false,
-  "_integrity": "sha512-RCMbuzBfpZPE89dDS+11qs6n4T3K7zlW1zNkiIoRDlaFTBKpr9SPODmmLYauCkSvj6SYrGvWDoZGH0GPJSjuqA==",
+  "_integrity": "sha512-i7KeGMBg94fg0nlBK0EtJyY9JwS0NBWPdthKKh84O+7hmeSSAKXe4cj08UXt7/Ro1+DjmjSuxm2hOlsnwg5WtQ==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -35,19 +35,19 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-24.2.4.tgz",
-  "_shasum": "6111ea6805342dacadab51c6ed0c6cf575cf351d",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.23.1.tgz",
+  "_shasum": "fbb8a8994add5fc4146b0902b2185bdef7aa713e",
   "_spec": "@syncfusion/ej2-lists@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-buttons": "~24.2.7",
-    "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-popups": "~24.2.8"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-data": "~25.1.35",
+    "@syncfusion/ej2-popups": "~25.1.35"
   },
   "deprecated": false,
   "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.",
@@ -87,7 +87,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "24.2.8",
+  "version": "25.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/list-base.js

@@ -301,7 +301,7 @@ export var ListBase;
                 if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
                     var htmlAttributes = fieldData[fields.htmlAttributes];
                     // Check if 'class' attribute is present and not an empty string
-                    if (htmlAttributes.hasOwnProperty('class') && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
+                    if ('class' in htmlAttributes && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
                         delete htmlAttributes['class'];
                     }
                     setAttribute(li, htmlAttributes);

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

@@ -218,12 +218,12 @@ export interface ListViewModel extends ComponentModel{
     showHeader?: boolean;
 
     /**
-     * Specifies whether HTML content should be sanitized or escaped.
-     * When set to `true`, any HTML content will be sanitized to remove potentially harmful elements.
+     * Specifies whether to display or remove the untrusted HTML values in the ListView component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
      * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 
@@ -315,10 +315,10 @@ export interface ListViewModel extends ComponentModel{
     actionFailure?: EmitType<MouseEvent>;
 
     /**
-    * Triggers when scrollbar of the ListView component reaches to the top or bottom.
-    *
-    * @event 'object'
-    */
+     * Triggers when scrollbar of the ListView component reaches to the top or bottom.
+     *
+     * @event 'object'
+     */
     scroll?: EmitType<ScrolledEventArgs>;
 
 }

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

@@ -299,12 +299,12 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      */
     showHeader: boolean;
     /**
-     * Specifies whether HTML content should be sanitized or escaped.
-     * When set to `true`, any HTML content will be sanitized to remove potentially harmful elements.
+     * Specifies whether to display or remove the untrusted HTML values in the ListView component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
      * {% codeBlock src='listview/enableHtmlSanitizer/index.md' %}{% endcodeBlock %}
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**
@@ -385,10 +385,10 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      */
     actionFailure: EmitType<MouseEvent>;
     /**
-    * Triggers when scrollbar of the ListView component reaches to the top or bottom.
-    *
-    * @event 'object'
-    */
+     * Triggers when scrollbar of the ListView component reaches to the top or bottom.
+     *
+     * @event 'object'
+     */
     scroll: EmitType<ScrolledEventArgs>;
     /**
      * Constructor for creating the widget
@@ -445,7 +445,7 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      * Refresh the height of the list item only on enabling the virtualization property.
      */
     refreshItemHeight(): void;
-    targetElement: any;
+    targetElement: Element;
     private clickHandler;
     private removeElement;
     private hoverHandler;

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

@@ -961,11 +961,13 @@ var ListView = /** @class */ (function (_super) {
         }
     };
     ListView.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element, 'keydown', this.keyActionHandler);
         EventHandler.remove(this.element, 'click', this.clickHandler);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusout);
         if (!isNullOrUndefined(this.scroll)) {
             EventHandler.remove(this.element, 'scroll', this.onListScroll);
         }
@@ -1061,7 +1063,12 @@ var ListView = /** @class */ (function (_super) {
         var eventArgs = {};
         merge(eventArgs, selectedItem);
         if (e) {
-            merge(eventArgs, { isInteracted: true, event: e, cancel: false, index: this.curUL && Array.prototype.indexOf.call(this.curUL.children, li) });
+            merge(eventArgs, {
+                isInteracted: true,
+                event: e,
+                cancel: false,
+                index: this.curUL && Array.prototype.indexOf.call(this.curUL.children, li)
+            });
         }
         return eventArgs;
     };
@@ -2011,7 +2018,7 @@ var ListView = /** @class */ (function (_super) {
     ListView.prototype.requiredModules = function () {
         var modules = [];
         if (this.enableVirtualization) {
-            modules.push({ args: [this], member: 'virtualization' });
+            modules.push({ args: [this], member: 'virtualization', name: 'Virtualization' });
         }
         return modules;
     };
@@ -2081,7 +2088,7 @@ var ListView = /** @class */ (function (_super) {
         Property(false)
     ], ListView.prototype, "showHeader", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], ListView.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property('')

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

@@ -84,6 +84,7 @@ export declare class Virtualization {
      * @param {DataSource} newData - The new data source for the list view.
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
+     * @returns {void}
      */
     private onChange;
     private onNgChange;

package/src/list-view/virtualization.js

@@ -258,9 +258,10 @@ var Virtualization = /** @class */ (function () {
             }
             if (this.listViewInstance.curViewDS[index][this.listViewInstance.fields.iconCss]) {
                 var textContent = element.querySelector('.' + classNames.textContent);
+                var curViewDS = this.listViewInstance.curViewDS[index];
+                var iconCss = curViewDS[this.listViewInstance.fields.iconCss].toString();
                 var target = this.listViewInstance.createElement('div', {
-                    className: classNames.listIcon + ' ' +
-                        this.listViewInstance.curViewDS[index][this.listViewInstance.fields.iconCss]
+                    className: classNames.listIcon + ' ' + iconCss
                 });
                 textContent.insertBefore(target, element.querySelector('.' + classNames.listItemText));
             }
@@ -777,7 +778,9 @@ var Virtualization = /** @class */ (function () {
             target = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 1]) ||
                 this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);
         }
-        if (this.listViewInstance.fields.groupBy && this.listViewInstance.curViewDS[index + 1] && this.listViewInstance.curViewDS[index + 1].isHeader) {
+        if (this.listViewInstance.fields.groupBy
+            && this.listViewInstance.curViewDS[index + 1]
+            && this.listViewInstance.curViewDS[index + 1].isHeader) {
             var targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
             if (targetEle) {
                 target = targetEle.nextElementSibling;
@@ -874,6 +877,7 @@ var Virtualization = /** @class */ (function () {
      * @param {DataSource} newData - The new data source for the list view.
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
+     * @returns {void}
      */
     Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {
         var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 

package/src/sortable/sortable.js

@@ -67,7 +67,7 @@ var Sortable = /** @class */ (function (_super) {
             _this.trigger('drag', { event: e.event, element: _this.element, target: e.target });
             var newInst = _this.getSortableInstance(e.target);
             var target = _this.getSortableElement(e.target, newInst);
-            if ((_this.isValidTarget(target, newInst) || e.target.className.indexOf('e-list-group-item') > -1) && (_this.curTarget !== target ||
+            if ((_this.isValidTarget(target, newInst) || (e.target && typeof e.target.className === 'string' && e.target.className.indexOf('e-list-group-item') > -1)) && (_this.curTarget !== target ||
                 !isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target : true)) {
                 if (e.target.classList.contains('e-list-group-item')) {
                     target = e.target;
@@ -208,7 +208,7 @@ var Sortable = /** @class */ (function (_super) {
                     target: e.target, droppedElement: _this.target, helper: e.helper, cancel: false
                 };
                 _this.trigger('beforeDrop', beforeDropArgs, function (observedArgs) {
-                    if ((dropInst.element === e.target || e.target.className.indexOf('e-list-nrt') > -1 || e.target.className.indexOf('e-list-nr-template') > -1
+                    if ((dropInst.element === e.target || (typeof e.target.className === 'string' && e.target.className.indexOf('e-list-nrt') > -1) || (typeof e.target.className === 'string' && e.target.className.indexOf('e-list-nr-template') > -1)
                         || e.target.closest('.e-list-nr-template')) && !observedArgs.cancel) {
                         _this.updateItemClass(dropInst);
                         dropInst.element.appendChild(_this.target);

package/styles/list-view/_bds-definition.scss

@@ -0,0 +1,138 @@
+//layout
+$listview-icon-margin-right: 2px !default;
+$listview-item-height: 40px !default;
+$listview-item-line-height: 22px !default;
+$listview-item-padding: 8px 9px 8px 12px !default;
+$listview-rtl-item-padding: 8px 12px 8px 9px !default;
+$listview-header-padding: 6px 12px !default;
+$listview-root-border-radius: 0 !default;
+$listview-nested-icon-collapsible: 20px !default;
+$listview-icon-size: 20px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-font-size: $text-xs !default;
+$listview-header-height: 30px !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-border-top: 0 !default;
+$listview-group-border-bottom: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+
+$listview-groupheader-item-height: 30px !default;
+$listview-groupheader-item-line-height: 18px !default;
+$listview-groupheader-font-size: $text-xs !default;
+$listview-border-size: 0 !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 8px !default;
+$listview-back-icon-size: 20px !default;
+$listview-back-icon-font-size: $text-base !default;
+$listview-touch-item-height: 48px !default;
+$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-padding: 12px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 38px !default;
+$listview-touch-groupheader-line-height: 22px !default;
+$listview-touch-header-height: 38px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 5px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: -2px 12px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: -2px 8px 0 0 !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+
+//ListView In-built template variables
+$listview-template-padding: 8px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 32px !default;
+$listview-template-badge-line-height: 18px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 4px !default;
+$listview-template-multiline-content-font-size: $text-sm !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+
+//color
+$listview-font-family: $font-family !default;
+$listview-text-color: $content-text-color-alt1 !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: $content-text-color-hover !default;
+$listview-item-active-bg: $content-bg-color-selected !default;
+$listview-root-border-color: none !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $content-text-color !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: $content-bg-color-alt2 !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $transparent !default;
+$listview-hover-border-color: transparent !default;
+$listview-border-bottom-color: transparent !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: $content-text-color-alt2 !default;
+$listview-groupheader-bg: $content-bg-color-alt2 !default;
+$listview-groupheader-icon: $icon-color !default;
+
+//ListView In-built template variables
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt2 !default;
+
+/* stylelint-disable */
+.e-listview {
+  & .e-list-parent {
+    margin: 0 12px !important;
+    padding: 0;
+  }
+}
+
+.e-listview {
+  &:not(.e-list-template) .e-list-item {
+    border-radius: 6px !important;
+  }
+}

package/styles/list-view/icons/_bds.scss

@@ -0,0 +1,8 @@
+.e-icon-collapsible::before {
+  content: '\e748';
+}
+
+.e-icon-back::before {
+  content: '\e773';
+  font-size: $listview-back-icon-font-size;
+}

package/styles/sortable/_bds-definition.scss

@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */