@syncfusion/ej2-lists 32.1.24 → 32.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.1.24
+*  version : 32.2.3
 *  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.1.24",
+  "version": "32.2.3",
   "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",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-lists.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.1.24",
-    "@syncfusion/ej2-buttons": "~32.1.24",
-    "@syncfusion/ej2-data": "~32.1.24",
-    "@syncfusion/ej2-popups": "~32.1.24"
+    "@syncfusion/ej2-base": "~32.2.3",
+    "@syncfusion/ej2-buttons": "~32.2.3",
+    "@syncfusion/ej2-data": "~32.2.3",
+    "@syncfusion/ej2-popups": "~32.2.3"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -110,12 +110,26 @@ export interface ListViewModel extends ComponentModel{
      * If `enable` set to true, the list items are enabled.
      * And, we can disable the component using this property by setting its value as false.
      *
+     * Remark: This property is deprecated after the Vol 4 2025 main release. Use `enabled` instead.
+     *
+     *
      * {% codeBlock src='listview/enable/index.md' %}{% endcodeBlock %}
      *
+
      * @default true
      */
     enable?: boolean;
 
+    /**
+     * If `enabled` set to true, the list items are enabled.
+     * And, we can disable the component using this property by setting its value as false.
+     *
+     *
+     *
+     * @default true
+     */
+    enabled?: boolean;
+
     /**
      * The `dataSource` provides the data to render the ListView component which is mapped with the fields of ListView.
      *

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

@@ -200,11 +200,24 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      * If `enable` set to true, the list items are enabled.
      * And, we can disable the component using this property by setting its value as false.
      *
+     * Remark: This property is deprecated after the Vol 4 2025 main release. Use `enabled` instead.
+     *
+     *
      * {% codeBlock src='listview/enable/index.md' %}{% endcodeBlock %}
      *
+
      * @default true
      */
     enable: boolean;
+    /**
+     * If `enabled` set to true, the list items are enabled.
+     * And, we can disable the component using this property by setting its value as false.
+     *
+     *
+     *
+     * @default true
+     */
+    enabled: boolean;
     /**
      * The `dataSource` provides the data to render the ListView component which is mapped with the fields of ListView.
      *
@@ -601,6 +614,7 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      * Get the properties to be maintained in the persisted state.
      */
     protected getPersistData(): string;
+    private readonly isComponentEnabled;
 }
 /** @hidden */
 export interface ClassNames {

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

@@ -179,6 +179,7 @@ var ListView = /** @class */ (function (_super) {
                     this.setCSSClass(oldProp.cssClass);
                     break;
                 case 'enable':
+                case 'enabled':
                     this.setEnable();
                     break;
                 case 'width':
@@ -278,7 +279,7 @@ var ListView = /** @class */ (function (_super) {
         this.isWindow = this.element.clientHeight ? false : true;
     };
     ListView.prototype.setEnable = function () {
-        this.enableElement(this.element, this.enable);
+        this.enableElement(this.element, this.enabled && this.enable);
     };
     ListView.prototype.setEnableRTL = function () {
         if (this.enableRtl) {
@@ -676,7 +677,7 @@ var ListView = /** @class */ (function (_super) {
                 li = target;
             }
             this.removeFocus();
-            if (this.enable && this.showCheckBox && this.isValidLI(li)) {
+            if (this.isComponentEnabled && this.showCheckBox && this.isValidLI(li)) {
                 if (e.target.classList.contains(classNames.checkboxIcon)) {
                     li.classList.add(classNames.focused);
                     if (isNullOrUndefined(li.querySelector('.' + classNames.checked))) {
@@ -902,7 +903,7 @@ var ListView = /** @class */ (function (_super) {
         }
     };
     ListView.prototype.spaceKeyHandler = function (e) {
-        if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
+        if (this.isComponentEnabled && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
             e.preventDefault();
             var li = this.curUL.querySelector('.' + classNames.focused);
             var checkboxElement = void 0;
@@ -1043,7 +1044,7 @@ var ListView = /** @class */ (function (_super) {
             && !li.classList.contains(classNames.disable));
     };
     ListView.prototype.setCheckboxLI = function (li, e) {
-        if (this.isValidLI(li) && this.enable && this.showCheckBox) {
+        if (this.isValidLI(li) && this.isComponentEnabled && this.showCheckBox) {
             if (this.curUL.querySelector('.' + classNames.focused)) {
                 this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
             }
@@ -1127,7 +1128,7 @@ var ListView = /** @class */ (function (_super) {
     };
     ListView.prototype.setSelectLI = function (li, e) {
         var _this = this;
-        if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.enable) {
+        if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.isComponentEnabled) {
             if (!this.showCheckBox) {
                 this.removeSelect();
             }
@@ -1151,7 +1152,7 @@ var ListView = /** @class */ (function (_super) {
         }
     };
     ListView.prototype.setHoverLI = function (li) {
-        if (this.isValidLI(li) && !li.classList.contains(classNames.hover) && this.enable) {
+        if (this.isValidLI(li) && !li.classList.contains(classNames.hover) && this.isComponentEnabled) {
             var lastLi = this.element.querySelectorAll('.' + classNames.hover);
             if (lastLi && lastLi.length) {
                 removeClass(lastLi, classNames.hover);
@@ -2061,9 +2062,16 @@ var ListView = /** @class */ (function (_super) {
      */
     ListView.prototype.getPersistData = function () {
         return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',
-            'enable', 'fields', 'animation', 'headerTitle',
+            'enable', 'enabled', 'fields', 'animation', 'headerTitle',
             'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition', 'selectedId']);
     };
+    Object.defineProperty(ListView.prototype, "isComponentEnabled", {
+        get: function () {
+            return this.enabled && this.enable;
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
         Property('')
     ], ListView.prototype, "cssClass", void 0);
@@ -2076,6 +2084,9 @@ var ListView = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], ListView.prototype, "enable", void 0);
+    __decorate([
+        Property(true)
+    ], ListView.prototype, "enabled", void 0);
     __decorate([
         Property([])
     ], ListView.prototype, "dataSource", void 0);