@syncfusion/ej2-lists 20.4.50 → 21.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.50
+*  version : 21.1.35
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.4.48",
+  "_id": "@syncfusion/ej2-lists@18.16.5",
   "_inBundle": false,
-  "_integrity": "sha512-sixUnbQ4O3qCrAVZsBnjwZUao43Gy0aA2b0i0e1KWOQWrFvfq6oGtM9ENkNf6/2d8l+u7LsYUWOPf3u54PWJ7w==",
+  "_integrity": "sha512-ORLmP4sPs0TnR81+vVZGahFS7+jQDOsyBy16z0Y/DAG3IF68ZdWOL5qNqvthAb2d+/6D16BaGn9HmGPKFpVZ2g==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -31,21 +31,22 @@
     "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-pivotview",
     "/@syncfusion/ej2-react-lists",
+    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-20.4.48.tgz",
-  "_shasum": "6a48873abe498b8543d60051615ae1a2120c036c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.16.5.tgz",
+  "_shasum": "7ca3d2a02bca396ed7c973f32926dc7e5fd62c42",
   "_spec": "@syncfusion/ej2-lists@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.48",
-    "@syncfusion/ej2-buttons": "~20.4.50",
-    "@syncfusion/ej2-data": "~20.4.48"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-buttons": "~21.1.35",
+    "@syncfusion/ej2-data": "~21.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.",
@@ -85,7 +86,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "20.4.50",
+  "version": "21.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/list-base.js

@@ -443,11 +443,11 @@ export var ListBase;
             var grpItem = {};
             var hdr = 'isHeader';
             grpItem[curFields.text] = ds[j].key;
-            grpItem[hdr] = true;
+            grpItem["" + hdr] = true;
             var newtext = curFields.text;
             if (newtext === 'id') {
                 newtext = 'text';
-                grpItem[newtext] = ds[j].key;
+                grpItem["" + newtext] = ds[j].key;
             }
             grpItem._id = 'group-list-item-' + (ds[j].key ?
                 ds[j].key.toString().trim() : 'undefined');
@@ -706,7 +706,7 @@ export var ListBase;
         for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {
             var header = headerItems_1[_i];
             var headerData = {};
-            headerData[category] = header.textContent;
+            headerData["" + category] = header.textContent;
             header.innerHTML = '';
             if (componentInstance && componentInstance.getModuleName() !== "listview") {
                 // eslint-disable-next-line
@@ -1002,11 +1002,11 @@ export function getFieldValues(dataItem, fields) {
     else {
         for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {
             var field = _a[_i];
-            var dataField = fields[field];
+            var dataField = fields["" + field];
             var value = !isNullOrUndefined(dataField) &&
                 typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;
             if (!isNullOrUndefined(value)) {
-                fieldData[dataField] = value;
+                fieldData["" + dataField] = value;
             }
         }
     }

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

@@ -100,11 +100,39 @@ export interface AnimationSettings {
 /**
  * An enum type that denotes the effects of the ListView. Available options are as follows None, SlideLeft, SlideDown, Zoom, Fade;
  */
-export declare type ListViewEffect = 'None' | 'SlideLeft' | 'SlideDown' | 'Zoom' | 'Fade';
+export declare type ListViewEffect = 
+/**
+ * No animation is applied when items are added or removed from the ListView.
+ */
+'None' | 
+/**
+ * Items slide in from the left when added and slide out to the left when removed.
+ */
+'SlideLeft' | 
+/**
+ * Items slide in from the top when added and slide out to the top when removed.
+ */
+'SlideDown' | 
+/**
+ * Items zoom in or out when added or removed.
+ */
+'Zoom' | 
+/**
+ *  Items fade in or out when added or removed.
+ */
+'Fade';
 /**
  * An enum type that denotes the position of checkbox of the ListView. Available options are as follows Left and Right;
  */
-export declare type checkBoxPosition = 'Left' | 'Right';
+export declare type checkBoxPosition = 
+/**
+ *  The checkbox is positioned on the left side of the ListView item.
+ */
+'Left' | 
+/**
+ *  The checkbox is positioned on the right side of the ListView item.
+ */
+'Right';
 /**
  * Represents the EJ2 ListView control.
  * ```html

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

@@ -375,7 +375,7 @@ var ListView = /** @class */ (function (_super) {
             }
             else {
                 var slideLeft = 'SlideLeft';
-                anim = effectsConfig[slideLeft];
+                anim = effectsConfig["" + slideLeft];
                 reverse = this.enableRtl;
                 duration = 0;
             }
@@ -1183,11 +1183,11 @@ var ListView = /** @class */ (function (_super) {
             // eslint-disable-next-line
             for (var _i = 0, _a = Object.keys(this.fields.properties); _i < _a.length; _i++) {
                 var column = _a[_i];
-                if (column !== 'tableName' && !!(this.fields[column]) &&
-                    this.fields[column] !==
-                        ListBase.defaultMappedFields[column]
-                    && columns.indexOf(this.fields[column]) === -1) {
-                    columns.push(this.fields[column]);
+                if (column !== 'tableName' && !!(this.fields["" + column]) &&
+                    this.fields["" + column] !==
+                        ListBase.defaultMappedFields["" + column]
+                    && columns.indexOf(this.fields["" + column]) === -1) {
+                    columns.push(this.fields["" + column]);
                 }
             }
             query.select(columns);

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

@@ -92,7 +92,7 @@ export declare class Virtualization {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    private onVuechange;
+    private onVueChange;
     private onNgChange;
     getModuleName(): string;
     destroy(): void;

package/src/list-view/virtualization.js

@@ -394,7 +394,7 @@ var Virtualization = /** @class */ (function () {
                 if (this.listViewInstance.showCheckBox) {
                     var indexArray = this.uiIndices.activeIndices;
                     for (var i = 0; i < indexArray.length; i++) {
-                        textCollection.push(curViewDS_2[indexArray[i]][text]);
+                        textCollection.push(curViewDS_2[indexArray[i]]["" + text]);
                         // eslint-disable-next-line
                         dataCollection.push(curViewDS_2[indexArray[i]]);
                     }
@@ -1107,7 +1107,7 @@ var Virtualization = /** @class */ (function () {
     };
     Virtualization.prototype.updateUI = function (element, index, targetElement) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVuechange : this.onChange;
+        var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -1131,7 +1131,7 @@ var Virtualization = /** @class */ (function () {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    Virtualization.prototype.onVuechange = function (newData, listElement, virtualThis) {
+    Virtualization.prototype.onVueChange = function (newData, listElement, virtualThis) {
         var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
         // eslint-disable-next-line
         [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);

package/src/sortable/sortable-model.d.ts

@@ -42,7 +42,7 @@ export interface SortableModel {
      * @event 'object'
      */
 
- 
+
     drag?: (e: any) => void;
 
     /**
@@ -50,7 +50,7 @@ export interface SortableModel {
      *
      *  @event 'object'
      */
- 
+
     beforeDragStart?: (e: any) => void;
 
     /**
@@ -58,6 +58,7 @@ export interface SortableModel {
      *
      *  @event 'object'
      */
+
     dragStart?: (e: any) => void;
 
     /**
@@ -65,6 +66,7 @@ export interface SortableModel {
      *
      *  @event 'object'
      */
+
     beforeDrop?: (e: any) => void;
 
     /**

package/src/sortable/sortable.js

@@ -17,7 +17,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Base, Event, getUniqueID, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
 import { closest, Draggable, remove, compareElementParent } from '@syncfusion/ej2-base';
 import { addClass, isNullOrUndefined, getComponent, isBlazor } from '@syncfusion/ej2-base';
@@ -39,10 +38,8 @@ import { addClass, isNullOrUndefined, getComponent, isBlazor } from '@syncfusion
  */
 var Sortable = /** @class */ (function (_super) {
     __extends(Sortable, _super);
-    /* es-lint enable  */
     function Sortable(element, options) {
         var _this = _super.call(this, options, element) || this;
-        // eslint-disable-next-line
         _this.getHelper = function (e) {
             // eslint-disable-next-line prefer-const
             var target = _this.getSortableElement(e.sender.target);
@@ -64,14 +61,14 @@ var Sortable = /** @class */ (function (_super) {
         };
         // eslint-disable-next-line
         _this.onDrag = function (e) {
-            if (!e.target)
+            if (!e.target) {
                 return;
+            }
             _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 ||
-                !isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target :
-                true)) {
+                !isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target : true)) {
                 if (e.target.className.indexOf('e-list-group-item') > -1) {
                     target = e.target;
                 }

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

@@ -7,7 +7,7 @@ $listview-item-line-height: 18px !default;
 $listview-item-padding: 7px 9px 7px 12px !default;
 $listview-rtl-item-padding: 7px 12px 7px 12px !default;
 $listview-header-padding: 6px 12px !default;
-$listview-back-icon-font-size: 12px !default;
+$listview-back-icon-font-size: $text-xs !default;
 $listview-root-border-radius: 4px !default;
 $listview-nested-icon-collapsible: 12px !default;
 $listview-icon-size: 20px !default;

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

@@ -8,7 +8,7 @@ $listview-item-line-height: 22px !default;
 $listview-item-padding: 7px 12px 7px 12px !default;
 $listview-rtl-item-padding: 7px 12px 7px 9px !default;
 $listview-header-padding: 6px 12px !default;
-$listview-back-icon-font-size: 14px !default;
+$listview-back-icon-font-size: $text-sm !default;
 $listview-root-border-radius: 0 !default;
 $listview-nested-icon-collapsible: 12px !default;
 $listview-icon-size: 20px !default;

package/styles/list-view/_layout.scss

@@ -49,7 +49,7 @@
       }
 
       .e-text-content {
-        @if ($skin-name == 'tailwind') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'Material3') {
           font-size: $listview-touch-header-font-size;
           line-height: $listview-touch-groupheader-line-height;
         }
@@ -355,7 +355,7 @@
         @else {
           margin-top: $listview-icon-back-margin;
         }
-        @if ($skin-name == 'FluentUI') {
+        @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
           margin-right: $listview-icon-back-margin-right;
         }
       }
@@ -377,7 +377,7 @@
           }
         }
         @else {
-          @if ($skin-name != 'FluentUI') {
+          @if ($skin-name != 'FluentUI' and $skin-name != 'Material3') {
             border-bottom: 1px solid;
           }
           padding: 0 $listview-header-text-padding;
@@ -425,6 +425,11 @@
           padding: $listview-item-padding;
         }
 
+        @if ($skin-name == 'Material3') {
+          border-top: $listview-group-border-bottom solid $listview-border-bottom-color;
+          border-bottom: $listview-group-border-top solid;
+        }
+
         .e-list-text {
           cursor: default;
         }

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

@@ -28,7 +28,7 @@ $listview-border-size: 1px !default;
 $listview-font-size: $text-sm !default;
 $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
-$listview-back-icon-font-size: 16px !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;

package/styles/list-view/_theme.scss

@@ -65,7 +65,7 @@
 
       & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
       & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
-        @if ($skin-name != 'tailwind') {
+        @if ($skin-name != 'tailwind' and $skin-name != 'Material3') {
           background-color: $checkmark-bgcolor;
           border-color: $checkmark-border-color;
           color: $checkmark-color;

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

@@ -1,132 +0,0 @@
-//layout
-$listview-icon-margin-right: 8px !default;
-$listview-icon-back-margin: 0 !default;
-$listview-rtl-icon-back-margin: 0 !default;
-$listview-item-height: 36px !default;
-$listview-item-line-height: 18px !default;
-$listview-item-padding: 7px 9px 7px 12px !default;
-$listview-rtl-item-padding: 7px 12px 7px 12px !default;
-$listview-header-padding: 6px 12px !default;
-$listview-back-icon-font-size: 12px !default;
-$listview-root-border-radius: 4px !default;
-$listview-nested-icon-collapsible: 12px !default;
-$listview-icon-size: 20px !default;
-$listview-header-text-padding: 12px !default;
-$listview-header-height: 36px !default;
-$listview-header-line-height: 18px !default;
-$listview-border-bottom: 1px !default;
-$listview-border-top: 0 !default;
-$listview-border-left: 0 !default;
-$listview-border-right: 0 !default;
-$listview-group-first-border-bottom: 1px !default;
-$listview-group-border-top: 0 !default;
-$listview-group-border-bottom: 1px !default;
-$listview-groupheader-item-height: 36px !default;
-$listview-groupheader-item-line-height: 20px !default;
-$listview-groupheader-font-size: $text-xs !default;
-$listview-border-size: 1px !default;
-$listview-font-size: $text-sm !default;
-$listview-back-padding-right: 8px !default;
-$listview-back-icon-size: 20px !default;
-$listview-touch-item-height: 40px !default;
-$listview-touch-item-line-height: 21px !default;
-$listview-touch-item-size: 24px !default;
-$listview-touch-item-padding: 16px 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: 40px !default;
-$listview-touch-groupheader-line-height: 20px !default;
-$listview-touch-header-height: 40px !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: 12px !default;
-$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
-$listview-touch-checkbox-left-margin: 0 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: 0 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: 10px 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: 20px !default;
-$listview-template-badge-line-height: 16px !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 !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: $border-light !default;
-$listview-text-active-color: $content-text-color-selected !default;
-$listview-header-text-color: $content-text-color-alt3 !default;
-$listview-header-text-disabled: $content-text-color-disabled !default;
-$listview-header-bg: transparent !default;
-$listview-header-icon-color: $icon-color !default;
-$listview-header-icon-disabled: $icon-color-disabled !default;
-$listview-header-border: $border-light !default;
-$listview-header-font-size: $text-xs !default;
-$listview-header-font-weight: $font-weight-medium !default;
-$listview-hover-border-color: $border-light !default;
-$listview-border-bottom-color: $border-light !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-alt3 !default;
-$listview-groupheader-bg: transparent !default;
-$listview-groupheader-icon: $icon-color !default;
-$listview-focused-collapsible-color: $content-text-color-selected !default;
-$listview-icon-hover: $icon-color-hover !default;
-$listview-icon-pressed: $icon-color-pressed !default;
-$checkmark-bgcolor: $content-bg-color !default;
-$checkmark-border-color: $content-bg-color !default;
-$checkmark-color: $primary !default;
-
-//ListView In-built template variables
-$listview-template-multiline-header-color: $content-text-color !default;
-$listview-template-multiline-content-color: $content-text-color-alt3 !default;
-$listview-template-focused-multiline-content-color: $content-text-color-selected !default;

package/styles/sortable/_material3-definition.scss

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