@syncfusion/ej2-lists 31.2.12 → 32.1.23

package/styles/fabric-dark.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
-@import 'list-view/fabric-dark-definition.scss';
-@import 'list-view/icons/fabric-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fabric-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/check-box/fabric-dark-definition' as *;
+@use 'list-view/fabric-dark-definition' as *;
+@use 'list-view/icons/fabric-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fabric-dark-definition' as *;
+@use 'sortable/all' as *;

package/styles/fabric-lite.scss

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

package/styles/fabric.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
-@import 'list-view/fabric-definition.scss';
-@import 'list-view/icons/fabric.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fabric-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/check-box/fabric-definition' as *;
+@use 'list-view/fabric-definition' as *;
+@use 'list-view/icons/fabric' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fabric-definition' as *;
+@use 'sortable/all' as *;

package/styles/fluent-dark-lite.css

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

package/styles/fluent-dark-lite.scss

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

package/styles/fluent-dark.css

@@ -502,7 +502,6 @@
   line-height: 24px;
 }
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
   outline: none;
   position: relative;

package/styles/fluent-dark.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
-@import 'list-view/fluent-dark-definition.scss';
-@import 'list-view/icons/fluent-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/check-box/fluent-dark-definition' as *;
+@use 'list-view/fluent-dark-definition' as *;
+@use 'list-view/icons/fluent-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent-dark-definition' as *;
+@use 'sortable/all' as *;

package/styles/fluent-lite.scss

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

package/styles/fluent.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/check-box/fluent-definition.scss';
-@import 'list-view/fluent-definition.scss';
-@import 'list-view/icons/fluent.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/check-box/fluent-definition' as *;
+@use 'list-view/fluent-definition' as *;
+@use 'list-view/icons/fluent' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent-definition' as *;
+@use 'sortable/all' as *;

package/styles/fluent2-lite.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* 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-icon-collapsible::before {
   content: "\e748";
   padding: 4px;
@@ -19,7 +99,7 @@
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   overflow: auto;
   position: relative;
@@ -33,7 +113,7 @@
 .e-listview .e-list-item {
   border-bottom: 1px solid;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin: 4px;
   padding: 0;
 }
@@ -234,7 +314,7 @@
 
 .e-listview {
   border-color: var(--color-sf-border-light);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
 }
 .e-listview .e-list-header {
@@ -356,7 +436,7 @@
   position: absolute;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
 .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   padding-left: 68px;

package/styles/fluent2-lite.scss

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

package/styles/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* 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-icon-collapsible::before {
   content: "\e748";
   padding: 4px;
@@ -19,7 +99,7 @@
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   overflow: auto;
   position: relative;
@@ -33,7 +113,7 @@
 .e-listview .e-list-item {
   border-bottom: 1px solid;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin: 4px;
   padding: 0;
 }
@@ -234,7 +314,7 @@
 
 .e-listview {
   border-color: var(--color-sf-border-light);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
 }
 .e-listview .e-list-header {
@@ -356,7 +436,7 @@
   position: absolute;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
 .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   padding-left: 68px;
@@ -445,7 +525,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 38px;
 }
 .e-bigger .e-listview .e-list-header .e-text.header,
@@ -460,7 +540,7 @@
 }
 .e-bigger .e-listview .e-icon-collapsible,
 .e-listview.e-bigger .e-icon-collapsible {
-  font-size: 14px;
+  font-size: 12px;
 }
 .e-bigger .e-listview .e-icon-collapsible::before,
 .e-listview.e-bigger .e-icon-collapsible::before {

package/styles/fluent2.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
-@import 'list-view/fluent2-definition.scss';
-@import 'list-view/icons/fluent2.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent2-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/check-box/fluent2-definition' as *;
+@use 'list-view/fluent2-definition' as *;
+@use 'list-view/icons/fluent2' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent2-definition' as *;
+@use 'sortable/all' as *;

package/styles/highcontrast-light-lite.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
-@import 'list-view/highcontrast-light-definition.scss';
-@import 'list-view/icons/highcontrast-light.scss';
-@import 'list-view/all.scss';
-@import 'sortable/highcontrast-light-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
+@use 'list-view/highcontrast-light-definition' as *;
+@use 'list-view/icons/highcontrast-light' as *;
+@use 'list-view/all' as *;
+@use 'sortable/highcontrast-light-definition' as *;
+@use 'sortable/all' as *;

package/styles/highcontrast-light.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
-@import 'list-view/highcontrast-light-definition.scss';
-@import 'list-view/icons/highcontrast-light.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/highcontrast-light-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
+@use 'list-view/highcontrast-light-definition' as *;
+@use 'list-view/icons/highcontrast-light' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/highcontrast-light-definition' as *;
+@use 'sortable/all' as *;

package/styles/highcontrast-lite.scss

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

package/styles/highcontrast.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import 'list-view/highcontrast-definition.scss';
-@import 'list-view/icons/highcontrast.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/highcontrast-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-definition' as *;
+@use 'list-view/highcontrast-definition' as *;
+@use 'list-view/icons/highcontrast' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/highcontrast-definition' as *;
+@use 'sortable/all' as *;

package/styles/list-view/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 //layout
 $listview-icon-margin-right: 2px !default;
 $listview-item-height: 40px !default;
@@ -8,6 +11,7 @@ $listview-header-padding: 6px 12px !default;
 $listview-root-border-radius: 0 !default;
 $listview-nested-icon-collapsible: 20px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
 $listview-header-font-size: $text-xs !default;
 $listview-header-height: 30px !default;
@@ -51,6 +55,25 @@ $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-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
 
 //ListView In-built template variables
 $listview-template-padding: 8px 16px !default;
@@ -90,6 +113,7 @@ $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;
+$listview-template-height: inherit !default;
 
 //color
 $listview-font-family: $font-family !default;

package/styles/list-view/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin list-style($height, $line-height, $position) {
   height: $height;
   line-height: $line-height;
@@ -110,7 +112,7 @@
         font-size: 16px;
       }
       @if ($skin-name == 'tailwind3') {
-        padding-top: 9px;
+        padding-top: $listview-touch-group-item-padding-top;
       }
 
       .e-text-content {
@@ -131,7 +133,7 @@
         padding: $listview-template-padding;
       }
       @if ($skin-name == 'tailwind3') {
-        padding: 0 16px;
+        padding: $listview-touch-list-header-padding-top;
       }
 
       .e-text {
@@ -154,28 +156,28 @@
         margin-right: 12px;
       }
       @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
-        @include size($listview-touch-item-size, $listview-touch-item-size);
+        @include size($listview-touch-item-height, $listview-touch-item-size);
         margin-right: $listview-touch-icon-margin-right;
       }
     }
 
     .e-icon-collapsible {
       @if ($skin-name == 'bootstrap4') {
-        font-size: 12px;
+        font-size: $listview-icon-collapsible-font-size;
       }
       @else if $skin-name == 'fluent2' {
-        font-size: 14px;
+        font-size: $listview-icon-collapsible-font-size;
 
         &::before {
-          padding: 5px;
+          padding: $listview-icon-collapsible-before-padding;
         }
       }
       @if ($skin-name == 'tailwind') {
         font-size: $listview-touch-item-size;
-        @include size($listview-touch-item-size, $listview-touch-item-size);
+        @include size($listview-touch-item-height, $listview-touch-item-size);
       }
       @if ($skin-name == 'tailwind3') {
-        font-size: 22px;
+        font-size: $listview-touch-collapsible-icon-font-size;
       }
     }
 
@@ -197,8 +199,8 @@
 
     & .e-icon-back {
       @if $skin-name == 'tailwind3' {
-        margin: 10px 12px 10px 0;
-        @include size($listview-icon-size, $listview-icon-size);
+        margin: $listview-touch-back-icon-margin;
+        @include size($listview-icon-height, $listview-icon-size);
         &::before {
           font-size: $listview-touch-back-icon-font-size;
         }
@@ -241,10 +243,10 @@
 
       @if $skin-name == 'tailwind3' {
         & .e-list-icon {
-          margin-right: 12px;
+          margin-right: $listview-rtl-touch-list-icon-margin-right;
         }
         & .e-icon-back {
-          margin: 0 12px;
+          margin: $listview-rtl-touch-back-icon-margin;
         }
       }
 
@@ -276,8 +278,8 @@
       .e-list-wrapper {
         &.e-list-avatar {
           .e-avatar {
-            @include avatar-size($listview-touch-template-avatar-size, $listview-touch-template-avatar-size, -5px, $listview-template-avatar-left, null);
-            margin: 10px 10px 10px 0;
+            @include avatar-size($listview-touch-template-avatar-height, $listview-touch-template-avatar-size, -5px, $listview-template-avatar-left, null);
+            margin: $listview-touch-list-avatar-margin;
           }
         }
 
@@ -293,7 +295,7 @@
             @include text-style($listview-touch-template-multiline-header-font-size, $listview-touch-template-multiline-header-line-height);
           }
           .e-list-content {
-            padding-top: 3px;
+            padding-top: $listview-touch-template-multiline-content-padding-top;
           }
         }
       }