@syncfusion/ej2-lists 26.2.11 → 27.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.11
+*  version : 27.1.48
 *  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@26.2.10",
+  "_id": "@syncfusion/ej2-lists@18.23.1",
   "_inBundle": false,
-  "_integrity": "sha512-e9VZtxBNBMjvKnkR/ZCDEZoFEHNz3quZBYeTFE1anFmxMvE0/dcchRahFcctCM2l+/9XW50iTGHHdz7E9ZtM4g==",
+  "_integrity": "sha512-0OVfdXNvjkX5YKbOwLv8kH8qC3nwomBX1W7085cC/OBr07A3uWmc2fFcV70THA2p3+SzPeaDMPCZQx9RLb/wTg==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -35,19 +35,20 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-26.2.10.tgz",
-  "_shasum": "344ce6844fb6b54c1ed15b98b5d294e2cdb4c4db",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.23.1.tgz",
+  "_shasum": "032824de00c6b58ebaa649bb9cace3eee94a4486",
   "_spec": "@syncfusion/ej2-lists@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-buttons": "~26.2.10",
-    "@syncfusion/ej2-data": "~26.2.10",
-    "@syncfusion/ej2-popups": "~26.2.11"
+    "@syncfusion/ej2-base": "~27.1.48",
+    "@syncfusion/ej2-buttons": "~27.1.48",
+    "@syncfusion/ej2-data": "~27.1.48",
+    "@syncfusion/ej2-popups": "~27.1.48",
+    "markdown-spellcheck": "^1.3.1"
   },
   "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 +88,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "26.2.11",
+  "version": "27.1.48",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -445,6 +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;
+    private handleCheckboxState;
     targetElement: Element;
     private clickHandler;
     private removeElement;

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

@@ -627,6 +627,28 @@ var ListView = /** @class */ (function (_super) {
             this.virtualizationModule.refreshItemHeight();
         }
     };
+    ListView.prototype.handleCheckboxState = function (li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, isSetCheckboxLI, textAreaFocus) {
+        this.trigger('select', eventArgs, function (observedArgs) {
+            if (observedArgs.cancel) {
+                if (isSetCheckboxLI ? isCheckedBefore : !isCheckedBefore) {
+                    checkIcon.classList.add(classNames.checked);
+                    li.classList.add(classNames.selected);
+                }
+                else {
+                    checkIcon.classList.remove(classNames.checked);
+                    li.classList.remove(classNames.selected);
+                }
+                checkboxElement.setAttribute('aria-checked', isSetCheckboxLI ? (isCheckedBefore ? 'true' : 'false') : (isCheckedBefore ? 'false' : 'true'));
+                merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
+                if (isFocusedBefore) {
+                    li.classList.remove(classNames.focused);
+                    if (textAreaFocus) {
+                        textAreaFocus.classList.remove('e-focused');
+                    }
+                }
+            }
+        });
+    };
     ListView.prototype.clickHandler = function (e) {
         if (Array.isArray(this.dataSource) && this.dataSource.length === 0) {
             return;
@@ -668,7 +690,10 @@ var ListView = /** @class */ (function (_super) {
                         var eventArgs = this.selectEventData(li, e);
                         var checkIcon = li.querySelector('.' + classNames.checkboxIcon);
                         merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
-                        this.trigger('select', eventArgs);
+                        var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
+                        var isCheckedBefore = checkIcon.classList.contains(classNames.checked);
+                        var isFocusedBefore = li.classList.contains(classNames.focused);
+                        this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
                     }
                 }
                 else if (li.classList.contains(classNames.hasChild)) {
@@ -889,7 +914,13 @@ var ListView = /** @class */ (function (_super) {
             }
             var eventArgs = this.selectEventData(li, e);
             merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });
-            this.trigger('select', eventArgs);
+            if (!isNullOrUndefined(li)) {
+                var cbElement = li.querySelector('.' + classNames.checkboxWrapper);
+                var checkboxIcon = li.querySelector('.' + classNames.checkboxIcon);
+                var isCheckedBefore = checkboxIcon.classList.contains(classNames.checked);
+                var isFocusedBefore = li.classList.contains(classNames.focused);
+                this.handleCheckboxState(li, checkboxIcon, cbElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
+            }
             this.updateSelectedId();
         }
     };
@@ -1019,7 +1050,9 @@ var ListView = /** @class */ (function (_super) {
             var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
             var checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
             this.removeHover();
-            if (!checkIcon.classList.contains(classNames.checked)) {
+            var isCheckedBefore = checkIcon.classList.contains(classNames.checked);
+            var isFocusedBefore = li.classList.contains(classNames.focused);
+            if (!isCheckedBefore) {
                 checkIcon.classList.add(classNames.checked);
                 li.classList.add(classNames.selected);
             }
@@ -1034,7 +1067,7 @@ var ListView = /** @class */ (function (_super) {
             if (this.enableVirtualization) {
                 this.virtualizationModule.setCheckboxLI(li, e);
             }
-            this.trigger('select', eventArgs);
+            this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, true, textAreaFocus);
             this.setSelectedItemData(li);
             this.renderSubList(li);
         }
@@ -1103,6 +1136,10 @@ var ListView = /** @class */ (function (_super) {
                     _this.selectedLI = li;
                     _this.renderSubList(li);
                 }
+                else {
+                    li.classList.remove(classNames.selected);
+                    _this.selectedLI = li;
+                }
             });
         }
     };
@@ -1321,6 +1358,9 @@ var ListView = /** @class */ (function (_super) {
             var ele = this.element.querySelector('[pid=\'' + uID + '\']');
             this.curDSLevel.push(uID);
             this.setViewDataSource(this.getSubDS());
+            if (this.enableVirtualization) {
+                this.virtualizationModule.updateDOMItemCount();
+            }
             if (!ele) {
                 var data = this.curViewDS;
                 ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
@@ -1429,6 +1469,9 @@ var ListView = /** @class */ (function (_super) {
         }
         this.curDSLevel.pop();
         this.setViewDataSource(this.getSubDS());
+        if (this.enableVirtualization) {
+            this.virtualizationModule.updateDOMItemCount();
+        }
         var toUL = this.element.querySelector('[data-uid=\'' + pID + '\']');
         var fromUL = this.curUL;
         if (!toUL) {

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

@@ -50,6 +50,7 @@ export declare class Virtualization {
     uiVirtualization(): void;
     private wireScrollEvent;
     private ValidateItemCount;
+    updateDOMItemCount(): void;
     private uiIndicesInitialization;
     refreshItemHeight(): void;
     private getscrollerHeight;

package/src/list-view/virtualization.js

@@ -42,7 +42,7 @@ var Virtualization = /** @class */ (function () {
         this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
         this.listItemHeight = this.listViewInstance.ulElement.firstElementChild.getBoundingClientRect().height;
         this.expectedDomItemCount = this.ValidateItemCount(10000);
-        this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
+        this.updateDOMItemCount();
         var lastIndex = isRendered && !isNullOrUndefined(this.uiLastIndex) ? this.uiLastIndex : this.domItemCount - 1;
         this.uiFirstIndex = firstIndex;
         this.uiLastIndex = lastIndex;
@@ -104,6 +104,9 @@ var Virtualization = /** @class */ (function () {
         }
         return itemCount;
     };
+    Virtualization.prototype.updateDOMItemCount = function () {
+        this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
+    };
     Virtualization.prototype.uiIndicesInitialization = function () {
         this.uiIndices = { 'activeIndices': [], 'disabledItemIndices': [], 'hiddenItemIndices': [] };
         var data = this.listViewInstance.curViewDS;
@@ -403,18 +406,19 @@ var Virtualization = /** @class */ (function () {
         }
     };
     Virtualization.prototype.selectItem = function (obj) {
+        var _this = this;
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             var isSelected = this.activeIndex === resutJSON.index;
-            var isChecked = void 0;
+            var isChecked_1;
             this.activeIndex = resutJSON.index;
             if (this.listViewInstance.showCheckBox) {
                 if (this.uiIndices.activeIndices.indexOf(resutJSON.index) === -1) {
-                    isChecked = true;
+                    isChecked_1 = true;
                     this.uiIndices.activeIndices.push(resutJSON.index);
                 }
                 else {
-                    isChecked = false;
+                    isChecked_1 = false;
                     this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(resutJSON.index), 1);
                 }
                 if (this.listViewInstance.curUL.querySelector('.' + classNames.focused)) {
@@ -430,10 +434,10 @@ var Virtualization = /** @class */ (function () {
                 }
             }
             else {
-                var eventArgs = void 0;
+                var eventArgs_1;
                 if (typeof this.listViewInstance.dataSource[0] === 'string' ||
                     typeof this.listViewInstance.dataSource[0] === 'number') {
-                    eventArgs = {
+                    eventArgs_1 = {
                         text: this.listViewInstance.curViewDS[this.activeIndex],
                         data: this.listViewInstance.curViewDS[this.activeIndex],
                         index: this.activeIndex
@@ -441,19 +445,33 @@ var Virtualization = /** @class */ (function () {
                 }
                 else {
                     var curViewDS = this.listViewInstance.curViewDS;
-                    eventArgs = {
+                    eventArgs_1 = {
                         text: curViewDS[this.activeIndex][this.listViewInstance.fields.text],
                         data: curViewDS[this.activeIndex],
                         index: this.activeIndex
                     };
                 }
                 if (this.listViewInstance.showCheckBox) {
-                    eventArgs.isChecked = isChecked;
-                    this.listViewInstance.trigger('select', eventArgs);
+                    this.listViewInstance.trigger('select', eventArgs_1, function (observedArgs) {
+                        if (observedArgs.cancel) {
+                            if (!isChecked_1) {
+                                eventArgs_1.isChecked = isChecked_1;
+                                _this.uiIndices.activeIndices.push(resutJSON.index);
+                            }
+                            else {
+                                eventArgs_1.isChecked = !isChecked_1;
+                                _this.uiIndices.activeIndices.splice(_this.uiIndices.activeIndices.indexOf(resutJSON.index), 1);
+                            }
+                        }
+                    });
                 }
                 else if (!isSelected) {
                     this.listViewInstance.removeSelect();
-                    this.listViewInstance.trigger('select', eventArgs);
+                    this.listViewInstance.trigger('select', eventArgs_1, function (observedArgs) {
+                        if (observedArgs.cancel) {
+                            _this.activeIndex = undefined;
+                        }
+                    });
                 }
             }
         }

package/src/sortable/sortable.js

@@ -164,8 +164,8 @@ var Sortable = /** @class */ (function (_super) {
         };
         _this.onDragStop = function (e) {
             var dropInst = _this.getSortableInstance(_this.curTarget);
-            var curIdx;
             var prevIdx;
+            var curIdx;
             var handled;
             prevIdx = _this.getIndex(_this.target);
             var isPlaceHolderPresent = _this.isPlaceHolderPresent(dropInst);

package/styles/bootstrap-dark-lite.css

@@ -0,0 +1,396 @@
+.e-listview .e-icon-collapsible::before {
+  content: "\e943";
+}
+.e-listview .e-icon-back::before {
+  content: "\e94b";
+  font-size: 14px;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.e-listview {
+  -webkit-overflow-scrolling: touch;
+  border: 0 solid;
+  border-radius: 0;
+  display: block;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.e-listview:not(.e-list-template) .e-list-item {
+  height: 40px;
+  line-height: 36px;
+  position: relative;
+  padding: 0 15px;
+}
+.e-listview .e-list-item {
+  border-bottom: 0 solid;
+  cursor: pointer;
+}
+
+.e-listview .e-list-parent {
+  margin: 0;
+  padding: 0;
+}
+
+.e-listview .e-icon-back {
+  margin-top: -2px;
+}
+
+.e-listview .e-list-header {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: bold;
+  height: 40px;
+  border-bottom: 1px solid;
+  padding: 0 20px;
+}
+.e-listview .e-list-header .e-text.header,
+.e-listview .e-list-header .e-headertemplate-text.nested-header {
+  display: none;
+}
+.e-listview .e-list-header.e-list-navigation .e-text {
+  cursor: pointer;
+}
+.e-listview .e-list-header .e-text {
+  cursor: default;
+  text-indent: 0;
+}
+
+.e-listview .e-has-header > .e-view {
+  top: 45px;
+}
+
+.e-listview .e-back-button {
+  cursor: pointer;
+  padding-right: 10px;
+}
+
+.e-listview .e-list-group-item {
+  border-bottom: 1px solid #414141;
+  border-top: 0 solid;
+  height: 40px;
+  line-height: 36px;
+  font-weight: 600;
+  padding: 0 15px;
+}
+.e-listview .e-list-group-item .e-list-text {
+  cursor: default;
+}
+.e-listview .e-list-group-item:first-child {
+  border: 0;
+  border-bottom: 1px solid #414141;
+}
+
+.e-listview .e-icon-collapsible {
+  cursor: pointer;
+  font-size: 12px;
+  position: absolute;
+  right: 0%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.e-listview .e-text-content {
+  height: 100%;
+  position: relative;
+  vertical-align: middle;
+}
+.e-listview .e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 40px);
+}
+.e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
+  width: calc(100% - 90px);
+}
+.e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
+  width: calc(100% - 80px);
+}
+
+.e-listview .e-text-content * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
+  width: calc(100% - 92px);
+}
+
+.e-listview .e-checkbox .e-checkbox-left {
+  margin: -4px 10px 0 0;
+}
+.e-listview .e-checkbox .e-checkbox-right {
+  margin: -4px 0 0 10px;
+}
+
+.e-listview .e-list-text {
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.e-listview .e-list-icon + .e-list-text, .e-listview .e-icon-wrapper .e-list-text, .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 60px);
+}
+
+.e-listview .e-list-icon {
+  margin-right: 10px;
+  height: 30px;
+  width: 30px;
+}
+
+.e-listview .e-list-container {
+  overflow: hidden;
+  position: relative;
+}
+
+.e-listview .e-text .e-headertext {
+  display: inline-block;
+  line-height: 1px;
+}
+
+.e-listview.e-rtl {
+  direction: rtl;
+}
+.e-listview.e-rtl .e-list-icon {
+  margin-left: 16px;
+  margin-right: 0;
+}
+.e-listview.e-rtl .e-icon-collapsible {
+  left: 0%;
+  right: initial;
+  top: 50%;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
+}
+.e-listview.e-rtl .e-list-header .e-text {
+  cursor: pointer;
+}
+.e-listview.e-rtl .e-back-button {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.e-listview.e-rtl .e-icon-back {
+  margin-top: -1px;
+}
+.e-listview.e-rtl .e-checkbox .e-checkbox-left {
+  margin: -4px 0 0 10px;
+}
+.e-listview.e-rtl .e-checkbox .e-checkbox-right {
+  margin: -4px 10px 0 0;
+}
+
+.e-listview {
+  border-color: rgba(26, 26, 26, 0.1);
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+  font-size: 14px;
+}
+.e-listview .e-list-header {
+  background-color: #6e6e6e;
+  color: rgba(255, 255, 255, 0.95);
+  border-color: #414141;
+  font-size: 14px;
+}
+
+.e-listview .e-icons:not(.e-primary .e-btn-icon, .e-check) {
+  color: #f0f0f0;
+}
+
+.e-listview .e-list-item {
+  border-bottom: 1px solid #414141;
+  border-left: 0 solid transparent;
+  border-right: 0 solid transparent;
+  border-top: 0 solid transparent;
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+}
+.e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
+  background-color: #313131;
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+}
+.e-listview .e-list-item.e-active {
+  background-color: #414141;
+  color: rgba(255, 255, 255, 0.87);
+}
+.e-listview .e-list-item.e-active.e-checklist {
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+}
+.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
+  background-color: #414141;
+  color: rgba(255, 255, 255, 0.87);
+}
+.e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+  border-color: #f0f0f0;
+}
+
+.e-listview .e-list-group-item {
+  background-color: #1a1a1a;
+  color: #3e98ff;
+  border-color: #414141;
+  font-size: 14px;
+}
+
+.e-listview.e-list-template .e-list-wrapper {
+  height: inherit;
+  position: relative;
+}
+.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
+  padding: 0.7142em 1.0714em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
+  padding: 0.7142em 1.0714em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
+  color: #fff;
+  display: block;
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+  overflow: hidden;
+  padding: 0.038em 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
+  color: #393939;
+  display: block;
+  font-size: 14px;
+  margin: 0;
+  padding: 0.038em 0;
+  word-wrap: break-word;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
+  height: 2.8571em;
+  width: 2.8571em;
+  top: 0.7142em;
+  left: 1.0667em;
+  position: absolute;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
+  padding-left: 4.6428em;
+  padding-right: 1.0714em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
+  padding-left: 1.0714em;
+  padding-right: 4.6428em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
+  height: 2.8571em;
+  width: 2.8571em;
+  top: 0.7142em;
+  right: 1.0667em;
+  position: absolute;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
+  top: 0.7142em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
+  top: 0.7142em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
+  font-size: 15px;
+  height: 1.333em;
+  width: 2em;
+  top: 50%;
+  right: 1em;
+  line-height: 1.433em;
+  padding: 0;
+  position: absolute;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
+  padding-left: 4.6428em;
+  padding-right: 3.9285em;
+}
+.e-listview.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
+  padding-left: 1.0714em;
+  padding-right: 3.9285em;
+}
+.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
+  display: block;
+  margin: 0;
+  overflow: hidden;
+  padding: 0.83em 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.e-listview.e-list-template .e-list-item.e-hover .e-list-item-header, .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
+  color: rgba(255, 255, 255, 0.87);
+}
+.e-listview.e-list-template .e-list-item.e-active .e-list-item-header, .e-listview.e-list-template .e-list-item.e-active .e-list-content {
+  color: rgba(255, 255, 255, 0.87);
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
+  left: inherit;
+  right: 1.0667em;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
+  padding-left: 1.0714em;
+  padding-right: 4.6428em;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
+  padding-left: 4.6428em;
+  padding-right: 1.0714em;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
+  left: 1.0667em;
+  right: inherit;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
+  left: 1em;
+  right: inherit;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
+  padding-left: 3.9285em;
+  padding-right: 4.6428em;
+}
+.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
+  padding-left: 3.9285em;
+  padding-right: 1.0714em;
+}
+
+/* stylelint-disable-line no-empty-source */
+.e-sortable {
+  outline: none;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.e-sortable .e-disabled {
+  background-image: none;
+  cursor: default;
+  opacity: 0.35;
+}
+.e-sortable * {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.e-sortable *:focus {
+  outline: none;
+}
+
+/* stylelint-disable */
+.e-sortableclone {
+  position: fixed !important;
+}
+
+/* stylelint-enable */

package/styles/bootstrap-dark-lite.scss

@@ -0,0 +1,7 @@
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
+@import 'list-view/bootstrap-dark-definition.scss';
+@import 'list-view/icons/bootstrap-dark.scss';
+@import 'list-view/all.scss';
+@import 'sortable/bootstrap-dark-definition.scss';
+@import 'sortable/all.scss';