@syncfusion/ej2-lists 32.1.23 → 32.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.1.23
+*  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.23",
+  "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.23",
-    "@syncfusion/ej2-buttons": "~32.1.23",
-    "@syncfusion/ej2-data": "~32.1.23",
-    "@syncfusion/ej2-popups": "~32.1.19"
+    "@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);

package/styles/bds-lite.css

@@ -21,6 +21,20 @@
   font-size: 16px;
 }
 
+
+
+
+
+/* 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;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 .e-listview {
   -webkit-overflow-scrolling: touch;
@@ -249,6 +263,20 @@
   cursor: 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;
+}
+
 .e-listview {
   border-color: var(--color-sf-border-secondary);
   font-family: "Inter";
@@ -436,6 +464,7 @@
   padding-right: 16px;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bds-lite.scss

@@ -1,6 +1,6 @@
 @use 'ej2-buttons/styles/check-box/bds-definition' as *;
 @use 'list-view/bds-definition' as *;
 @use 'list-view/icons/bds' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bds' as *;
 @use 'sortable/bds-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bds' as *;

package/styles/bds.css

@@ -21,6 +21,20 @@
   font-size: 16px;
 }
 
+
+
+
+
+/* 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;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 .e-listview {
   -webkit-overflow-scrolling: touch;
@@ -249,6 +263,20 @@
   cursor: 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;
+}
+
 .e-listview {
   border-color: var(--color-sf-border-secondary);
   font-family: "Inter";
@@ -436,6 +464,20 @@
   padding-right: 16px;
 }
 
+
+
+
+
+/* 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;
+}
+
 .e-bigger .e-listview .e-list-item,
 .e-listview.e-bigger .e-list-item {
   border-bottom: 0 solid transparent;
@@ -592,6 +634,7 @@
   width: calc(100% - 40px);
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bds.scss

@@ -1,7 +1,7 @@
 @use 'ej2-buttons/styles/check-box/bds-definition' as *;
 @use 'list-view/bds-definition' as *;
 @use 'list-view/icons/bds' as *;
-@use 'list-view/all' as *;
-@use 'list-view/bigger' as *;
+@use 'list-view/all.bds' as *;
+@use 'list-view/bigger.bds' as *;
 @use 'sortable/bds-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bds' as *;

package/styles/bootstrap-dark-lite.css

@@ -397,6 +397,7 @@
   padding-right: 1.0714em;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap-dark-lite.scss

@@ -1,6 +1,6 @@
 @use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
 @use 'list-view/bootstrap-dark-definition' as *;
 @use 'list-view/icons/bootstrap-dark' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bootstrap-dark' as *;
 @use 'sortable/bootstrap-dark-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap-dark' as *;

package/styles/bootstrap-dark.css

@@ -445,6 +445,7 @@
   width: calc(100% - 40px);
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap-dark.scss

@@ -1,7 +1,7 @@
 @use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
 @use 'list-view/bootstrap-dark-definition' as *;
 @use 'list-view/icons/bootstrap-dark' as *;
-@use 'list-view/all' as *;
-@use 'list-view/bigger' as *;
+@use 'list-view/all.bootstrap-dark' as *;
+@use 'list-view/bigger.bootstrap-dark' as *;
 @use 'sortable/bootstrap-dark-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap-dark' as *;

package/styles/bootstrap-lite.css

@@ -398,6 +398,7 @@
   padding-right: 1.0714em;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap-lite.scss

@@ -1,6 +1,6 @@
 @use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
 @use 'list-view/bootstrap-definition' as *;
 @use 'list-view/icons/bootstrap' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bootstrap' as *;
 @use 'sortable/bootstrap-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap' as *;

package/styles/bootstrap.css

@@ -446,6 +446,7 @@
   width: calc(100% - 40px);
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap.scss

@@ -1,7 +1,7 @@
 @use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
 @use 'list-view/bootstrap-definition' as *;
 @use 'list-view/icons/bootstrap' as *;
-@use 'list-view/all' as *;
-@use 'list-view/bigger' as *;
+@use 'list-view/all.bootstrap' as *;
+@use 'list-view/bigger.bootstrap' as *;
 @use 'sortable/bootstrap-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap' as *;

package/styles/bootstrap4-lite.css

@@ -402,6 +402,7 @@
   padding-right: 1.0714em;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap4-lite.scss

@@ -1,6 +1,6 @@
 @use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
 @use 'list-view/bootstrap4-definition' as *;
 @use 'list-view/icons/bootstrap4' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bootstrap4' as *;
 @use 'sortable/bootstrap4-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap4' as *;

package/styles/bootstrap4.css

@@ -489,6 +489,7 @@
   width: calc(100% - 40px);
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap4.scss

@@ -1,7 +1,7 @@
 @use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
 @use 'list-view/bootstrap4-definition' as *;
 @use 'list-view/icons/bootstrap4' as *;
-@use 'list-view/all' as *;
-@use 'list-view/bigger' as *;
+@use 'list-view/all.bootstrap4' as *;
+@use 'list-view/bigger.bootstrap4' as *;
 @use 'sortable/bootstrap4-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap4' as *;

package/styles/bootstrap5-dark-lite.scss

@@ -1,6 +1,6 @@
 @use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
 @use 'list-view/bootstrap5-dark-definition' as *;
 @use 'list-view/icons/bootstrap5-dark' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bootstrap5-dark' as *;
 @use 'sortable/bootstrap5-dark-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap5-dark' as *;

package/styles/bootstrap5-dark.scss

@@ -1,7 +1,7 @@
 @use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
 @use 'list-view/bootstrap5-dark-definition' as *;
 @use 'list-view/icons/bootstrap5-dark' as *;
-@use 'list-view/all' as *;
-@use 'list-view/bigger' as *;
+@use 'list-view/all.bootstrap5-dark' as *;
+@use 'list-view/bigger.bootstrap5-dark' as *;
 @use 'sortable/bootstrap5-dark-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap5-dark' as *;

package/styles/bootstrap5-lite.css

@@ -423,6 +423,7 @@
   padding-right: 16px;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;

package/styles/bootstrap5-lite.scss

@@ -2,6 +2,6 @@
 @use 'ej2-buttons/styles/check-box/bootstrap5-definition' as *;
 @use 'list-view/bootstrap5-definition' as *;
 @use 'list-view/icons/bootstrap5' as *;
-@use 'list-view/all' as *;
+@use 'list-view/all.bootstrap5' as *;
 @use 'sortable/bootstrap5-definition' as *;
-@use 'sortable/all' as *;
+@use 'sortable/all.bootstrap5' as *;

package/styles/bootstrap5.3-lite.css

@@ -91,6 +91,90 @@
   font-size: 12px;
 }
 
+
+
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable property-no-vendor-prefix */
 .e-listview {
   -webkit-overflow-scrolling: touch;
@@ -303,6 +387,90 @@
   cursor: default;
 }
 
+
+
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-listview {
   border-color: var(--color-sf-border-light);
   font-family: var(--e-font-family);
@@ -483,6 +651,7 @@
   padding-right: 16px;
 }
 
+/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;