@syncfusion/ej2-pivotview 19.3.48 → 19.4.38

package/styles/pivotfieldlist/_layout.scss

@@ -104,8 +104,8 @@
       padding-right: 12px;
       padding-top: 12px;
 
-      @if($skin-name=='bootstrap5') { 
-        color: $field-list-default-font-color !important;
+      @if($skin-name == 'bootstrap5') {
+        color: $field-list-default-font-color;
       }
 
     }
@@ -154,6 +154,24 @@
       background: none;
       margin: 0 2px;
       width: 14px;
+      @if ($skin-name == 'bootstrap5') {
+        &:hover {
+          color: $field-list-active-color;
+        }
+      }
+    }
+
+    .e-colorpicker-wrapper,
+    .e-colorpicker-container {
+      .e-split-btn-wrapper .e-split-btn {
+        pointer-events: none;
+
+        .e-selected-color {
+          background: none;
+          margin: 0 2px;
+          width: 14px;
+        }
+      }
     }
 
     .e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-icon-btn,
@@ -347,7 +365,6 @@
           @if ($skin-name == 'tailwind') {
             margin-left: 30px;
           }
-
         }
       }
     }
@@ -376,12 +393,21 @@
     .e-olap-member-title {
       color: $field-list-default-header-font-color;
       font-size: $field-list-header-font-size;
+      margin-bottom: 4px;
       margin-top: 15px;
       overflow: hidden;
       padding: $pivot-calculated-header-padding 0;
       padding-bottom: 0;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      @if ($skin-name == 'tailwind') {
+        padding: 0;
+      }
+
+      @if ($skin-name == 'FluentUI') {
+        font-weight: 600;
+      }
     }
 
     .e-treeview {
@@ -394,18 +420,6 @@
       }
     }
 
-    .e-treeview .e-node-focus ul {
-      li {
-
-        .e-list-icon {
-
-          @if($skin-name == 'bootstrap5') { 
-            color: $field-list-default-fill-color;
-          }
-
-        }
-      }
-    }
     .e-treeview ul {
       overflow: hidden;
 
@@ -416,8 +430,16 @@
           font-family: $field-list-font-family;
         }
 
+        &:not(.e-active) {
+          .e-list-icon {
+            color: $field-list-tree-icon-color;
+          }
+        }
+
         .e-list-icon {
-          color: $field-list-tree-icon-color;
+          @if ($skin-name != 'bootstrap5') {
+            color: $field-list-tree-icon-color;
+          }
           margin: 0;
         }
       }
@@ -430,6 +452,12 @@
         height: 36px;
         margin-left: -10px;
         padding: 0;
+
+        @if ($skin-name == 'tailwind') {
+          .e-list-text {
+            line-height: 31px;
+          }
+        }
       }
     }
 
@@ -441,6 +469,11 @@
       padding: 2px 4px 4px;
       pointer-events: auto;
       width: 24px;
+
+      @if ($skin-name == 'tailwind') {
+        height: 20px;
+        width: 20px;
+      }
     }
 
     .e-treeview .e-list-item div.e-icons.e-format {
@@ -460,19 +493,48 @@
       padding: 2px 4px 4px;
       pointer-events: auto;
       width: 24px;
+      @if ($skin-name == 'tailwind') {
+        height: 20px;
+        width: 20px;
+      }
     }
 
-    .e-treeview .e-list-item span.e-icons {
-      color: $field-list-drag-icon-color;
-      cursor: move;
-      display: inline-block;
-      font-size: $field-list-icon-size;
-      height: 24px;
-      margin-right: 4px;
-      margin-top: 4px;
-      padding: 5px;
-      pointer-events: auto;
-      width: 24px;
+    .e-treeview .e-list-item {
+      &:not(.e-active) {
+        span.e-icons {
+          color: $field-list-drag-icon-color;
+        }
+      }
+
+      span.e-icons {
+        @if ($skin-name != 'bootstrap5') {
+          color: $field-list-drag-icon-color;
+        }
+        cursor: move;
+        display: inline-block;
+        font-size: $field-list-icon-size;
+        height: 24px;
+        margin-right: 4px;
+        @if ($skin-name != 'tailwind') {
+          padding: 5px;
+        }
+        pointer-events: auto;
+        width: 24px;
+        @if ($skin-name == 'tailwind') {
+          height: 20px;
+          margin-top: 0;
+          padding: 0 5px;
+          width: 20px;
+        }
+      }
+
+      @if ($skin-name == 'tailwind') {
+        &.e-active {
+          span.e-icons {
+            color: $field-list-tree-icon-color;
+          }
+        }
+      }
     }
 
     .e-dlg-header {
@@ -487,7 +549,7 @@
 
     .e-contextmenu {
       background-color: $pivot-formula-background;
-      border-radius: 4px;
+      border-radius: $field-list-default-border-radius;
     }
 
     .e-contextmenu .e-menu-item {
@@ -507,11 +569,10 @@
 
         @if ($skin-name == 'tailwind') {
           float: left;
-          margin-right: 0;
           margin-left: 12px;
-          padding-top: 0 !important;
+          margin-right: 0;
+          padding-top: 0;
         }
-  
       }
 
       .e-treeview .e-list-item div.e-edit.e-icons,
@@ -560,11 +621,10 @@
     .e-pivot-formula {
       background-color: $pivot-formula-background;
       border: 1px solid $pivot-formula-border;
-      border-radius: 4px;
+      border-radius: $field-list-default-border-radius;
       color: $field-list-default-formula-font-color;
       font-size: $field-list-calc-formula-font-size;
       height: 70px;
-      margin-top: 5px;
       // opacity: .38;
       padding: $pivot-calculated-formula-font-padding;
       resize: none;
@@ -587,9 +647,8 @@
     .e-pivot-treeview-outer {
       background-color: $pivot-formula-background;
       border: 1px solid $pivot-formula-border;
-      border-radius: 4px;
+      border-radius: $field-list-default-border-radius;
       height: 120px;
-      margin-top: 5px;
       overflow: auto;
     }
 
@@ -655,10 +714,6 @@
                   font-size: $field-list-icon-size;
                   width: auto;
 
-                  @if($skin-name == 'bootstrap5') { 
-                    color: $field-list-default-fill-color;
-                  }
-
                   &.e-edit {
                     cursor: pointer;
                     padding: 7px !important;
@@ -763,7 +818,7 @@
           .e-olap-format-title,
           .e-olap-member-title {
             padding-left: 0;
-            padding-right: 0; 
+            padding-right: 0;
           }
 
           .e-pivot-field-name-title {
@@ -816,6 +871,14 @@
       font-size: $field-list-bigger-header-font-size;
       padding: $pivot-calculated-bigger-header-padding 0;
       padding-bottom: 0;
+
+      @if ($skin-name == 'tailwind') {
+        padding: 0;
+      }
+
+      @if ($skin-name == 'FluentUI') {
+        font-weight: 600;
+      }
     }
 
     .e-treeview ul {
@@ -830,6 +893,9 @@
 
     .e-treeview .e-list-item span.e-icons {
       font-size: $field-list-bigger-icon-size;
+      @if ($skin-name == 'tailwind') {
+        vertical-align: sub;
+      }
     }
 
     .e-pivot-formula {
@@ -886,20 +952,20 @@
         }
       }
     }
-    // sass-lint:enable-all
   }
 
   .e-pivotfieldlist-wrapper {
     .e-adaptive-field-list-dialog,
     .e-member-editor-dialog {
-      max-width: 400px;
-      min-width: 320px;
+      max-width: 400px !important;
+      min-width: 320px !important;
 
       .e-member-prompt {
         padding: 25px $field-list-editor-search-padding-size;
         text-align: center;
         width: 100%;
       }
+      // sass-lint:enable-all
 
       .e-editor-search-wrapper {
         display: flex;
@@ -1004,6 +1070,12 @@
         float: left;
         margin: 0;
 
+        
+        @if ($skin-name == 'FluentUI') {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+
         &.e-disable {
           display: none;
         }
@@ -1051,10 +1123,6 @@
               color: $field-list-sort-select-color;
               outline: none;
             }
-            @if ($skin-name == 'bootstrap5') {
-              box-shadow: none !important;
-            }
-            
           }
 
           .e-sort-ascend-icon,
@@ -1070,20 +1138,17 @@
             }
 
             &.e-active {
-              background-color: $field-list-sort-select-background-color;
-              border-color: $field-list-sort-select-border-color;
-              color: $field-list-sort-select-color;
-              outline: none;
+              @if ($field-list-skin == 'bootstrap4') {
+                background-color: $field-list-sort-select-background-color;
+                border-color: $field-list-sort-select-border-color;
+                color: $field-list-sort-select-color;
+                outline: none;
+              }
 
-              
               @if ($skin-name == 'tailwind') {
                 background-color: $pivot-formula-border !important;
                 color: $field-list-default-header-font-color !important;
               }
-              
-              @if($skin-name == 'bootstrap5') {
-                color: $format-outer-fill-color;
-              }
             }
           }
         }
@@ -1118,7 +1183,7 @@
               height: 14px;
               min-width: 14px;
               width: 14px;
-              @if ($field-list-skin == 'bootstrap4') {
+              @if ($field-list-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
                 height: auto;
               }
 
@@ -1294,8 +1359,8 @@
     }
 
     .e-value-field-settings {
-      max-width: 400px;
-      min-width: 300px;
+      max-width: 400px !important;
+      min-width: 300px !important;
 
       .e-dlg-content {
         overflow: auto;
@@ -1359,7 +1424,7 @@
     .e-member-editor-dialog,
     .e-value-field-settings {
       border-radius: $field-list-default-border-radius;
-      width: auto;
+      width: auto !important;
 
       .e-dlg-header-content,
       .e-footer-content {
@@ -1375,12 +1440,26 @@
         border-top: $field-list-border-size $field-list-border-type $field-list-default-border-color;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        padding-top: $field-list-editor-dialog-footer-padding;
+
+        @if ($skin-name != 'FluentUI') {
+          padding-top: $field-list-editor-dialog-footer-padding;
+        }
+
+        @if ($skin-name == 'FluentUI') {
+          border-top: 0;
+        }
       }
 
       .e-dlg-content {
         overflow: hidden;
-        padding: 0;
+        @if ($skin-name != 'FluentUI') {
+          padding: 0;
+        }
+
+        @if ($skin-name == 'FluentUI') {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
 
         @if ($skin-name == 'tailwind') {
           padding-top: 12px;
@@ -1405,7 +1484,6 @@
           color: $error-font-color !important;
           font-weight: 600 !important;
         }
-        // sass-lint:enable-all
       }
     }
 
@@ -1423,14 +1501,15 @@
   .e-pivotfieldlist-container {
     .e-adaptive-field-list-dialog,
     .e-member-editor-dialog {
-      min-width: 320px;
-      max-width: 400px;
+      max-width: 400px !important;
+      min-width: 320px !important;
 
       .e-member-prompt {
         padding: 25px $field-list-editor-search-padding-size;
         text-align: center;
         width: 100%;
       }
+      // sass-lint:enable-all
 
       .e-editor-search-container {
         display: flex;
@@ -1485,7 +1564,7 @@
           }
         }
       }
-      
+
       // sass-lint:disable-all
       .e-disable {
         display: none !important;
@@ -1533,6 +1612,11 @@
         float: left;
         margin: 0;
 
+        @if ($skin-name == 'FluentUI') {
+          margin-left: 0;
+          margin-right: 0;
+        }
+
         &.e-disable {
           display: none;
         }
@@ -1580,9 +1664,6 @@
               color: $field-list-sort-select-color;
               outline: none;
             }
-            @if ($skin-name == 'bootstrap5') {
-              box-shadow: none !important;
-            }
           }
 
           .e-sort-ascend-icon,
@@ -1598,17 +1679,11 @@
             }
 
             &.e-active {
-              background-color: $field-list-sort-select-background-color;
-              border-color: $field-list-sort-select-border-color;
-              color: $field-list-sort-select-color;
-              outline: none;
-
-              @if ($skin-name == 'tailwind') {
-                background-color: $pivot-formula-border !important;
-                color: $field-list-default-header-font-color;
-              }
-              @if($skin-name == 'bootstrap5') {
-                color: $format-outer-fill-color;
+              @if ($field-list-skin == 'bootstrap4') {
+                background-color: $field-list-sort-select-background-color;
+                border-color: $field-list-sort-select-border-color;
+                color: $field-list-sort-select-color;
+                outline: none;
               }
             }
           }
@@ -1632,7 +1707,7 @@
       }
 
       .e-filter-tab-container {
-        border: none;
+        border: 0;
         // sass-lint:enable-all
 
         .e-tab-header {
@@ -1645,7 +1720,7 @@
               height: 14px;
               min-width: 14px;
               width: 14px;
-              @if ($field-list-skin == 'bootstrap4') {
+              @if ($field-list-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
                 height: auto;
               }
 
@@ -1822,8 +1897,8 @@
     }
 
     .e-value-field-settings {
-      max-width: 400px;
-      min-width: 300px;
+      max-width: 400px !important;
+      min-width: 300px !important;
 
       .e-dlg-content {
         overflow: auto;
@@ -1883,7 +1958,7 @@
     .e-member-editor-dialog,
     .e-value-field-settings {
       border-radius: $field-list-default-border-radius;
-      width: auto;
+      width: auto !important;
 
       .e-dlg-header-content,
       .e-footer-content {
@@ -1899,7 +1974,14 @@
         border-top: $field-list-border-size $field-list-border-type $field-list-default-border-color;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        padding-top: $field-list-editor-dialog-footer-padding;
+
+        @if ($skin-name != 'FluentUI') {
+          padding-top: $field-list-editor-dialog-footer-padding;
+        }
+
+        @if ($skin-name == 'FluentUI') {
+          border-top: 0;
+        }
       }
 
       .e-dlg-content {
@@ -1952,15 +2034,21 @@
     border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
     border-radius: $field-list-drag-clone-border-radius;
     box-shadow: $field-list-drag-clone-shadow-color;
-    height: 28px;
+    height: $field-list-drag-clone-height;
+    line-height: $field-list-drag-clone-line-height;
     min-width: 100px;
     padding: 5px 10px;
     @if ($field-list-skin == 'bootstrap4') {
       border: 0;
       padding: 6px 10px;
     }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+      line-height: normal;
+      padding: 0 10px;
+    }
 
     .e-text-content {
+      height: 100%;
       padding: 0;
       text-align: center;
       width: 100%;
@@ -1976,6 +2064,11 @@
         // @if ($field-list-skin == 'bootstrap4') {
         //   line-height: 0;
         // }
+        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+          display: inline;
+          line-height: normal;
+          vertical-align: sub;
+        }
       }
     }
 
@@ -2051,8 +2144,8 @@
 
     &.e-drag-restrict {
       .e-no-drop {
-          &::before {
-           padding: 4px;
+        &::before {
+          padding: 4px;
           }
         }
     }
@@ -2079,9 +2172,17 @@
       border: 0;
       padding: 6px 10px;
     }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+      line-height: normal;
+      padding: 0 10px;
+    }
 
     .e-text-content {
-      width: 100%
+      width: 100%;
+      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+        display: inline;
+        vertical-align: sub;
+      }
     }
   }
 
@@ -2094,28 +2195,17 @@
       border: 0;
       padding: 7px 12px;
     }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+      line-height: normal;
+      padding: 0 12px;
+    }
   }
 
-  // sass-lint:enable-all
   .e-pivot-error-dialog {
-    max-width: 400px;
-    width: auto;
-
-    .e-dlg-header-content,
-    .e-footer-content {
-      border: 0;
-    }
-
-    .e-dlg-header {
-      font-weight: $pivot-dialog-font-weight;
-      opacity: $pivot-calculated-header-opacity;
-    }
-
-    .e-dlg-content {
-      font-weight: normal;
-      opacity: $pivot-dialog-content-opacity;
-    }
+    max-width: 400px !important;
+    width: auto !important;
   }
+  // sass-lint:enable-all
 
   .e-bigger .e-pivotfieldlist-wrapper,
   .e-bigger.e-pivotfieldlist-wrapper {
@@ -2208,7 +2298,7 @@
 
       .e-excelfilter {
         .e-member-editor-container-outer-div {
-          height: $field-list-excel-member-filter-bigger-height !important;
+          height: $field-list-excel-member-filter-bigger-height;
         }
 
         @if ($skin-name == 'tailwind') {

package/styles/pivotfieldlist/_material-dark-definition.scss

@@ -32,7 +32,7 @@ $field-list-drag-clone-text-color: $grey-dark-font !default;
 $field-list-drag-clone-bg-color: rgba($grey-white, .18) !default;
 $field-list-drag-clone-border-radius: 20px !default;
 $field-list-drag-clone-font-size: 14px !default;
-$field-list-drag-clone-line-height: 1.0em !default;
+$field-list-drag-clone-line-height: 1em !default;
 $field-list-drag-clone-height: 28px !default;
 $field-list-button-font-size: 13px !default;
 $field-list-toggle-icon-bigger-size: 20px !default;
@@ -86,13 +86,11 @@ $field-list-excel-member-filter-height: 149px !default;
 $field-list-excel-filter-height: 248px !default;
 $field-list-excel-member-filter-bigger-height: 100px !default;
 $field-list-excel-filter-bigger-height: 220px !default;
-$field-list-clear-filter-icon: '\ea82' !default;
 $format-label-font-opacity: .87 !default;
 $format-label-font-color: $grey-dark-font !default;
 $format-label-font-weight: 500 !default;
 $format-preview-bigger-height: 30px !default;
 $format-preview-border-color: $grey-300 !default;
-$format-delete-icon: '\e5a5' !default;
 $format-outer-border-color: $grey-700 !default;
 $format-outer-fill-color: $grey-dark !default;
 $format-outer-border-radius: 4px !default;
@@ -157,7 +155,6 @@ $field-list-adaptive-icon-height: 50px !default;
 $field-list-adaptive-drag-prompt-height: 200px !default;
 $field-list-adaptive-pivot-button-height: 36px !default;
 $field-list-adaptive-pivot-button-padding: 9px 16px !default;
-$field-list-toggle-icon: '\e434' !default;
 $pivot-dialog-font-weight: normal !default;
 $field-list-toggle-shadow-color: -1px 1px 4px 0 rgba($shadow, .12) !default;
 $field-list-toggle-left-shadow-color: 1px 1px 4px 0 rgba($shadow, .12) !default;

package/styles/pivotfieldlist/_material-definition.scss

@@ -32,7 +32,7 @@ $field-list-drag-clone-text-color: rgba($content-font-color, .87) !default;
 $field-list-drag-clone-bg-color: $content-bg-color !default;
 $field-list-drag-clone-border-radius: 20px !default;
 $field-list-drag-clone-font-size: 14px !default;
-$field-list-drag-clone-line-height: 1.0em !default;
+$field-list-drag-clone-line-height: 1em !default;
 $field-list-drag-clone-height: 28px !default;
 $field-list-button-font-size: 13px !default;
 $field-list-toggle-icon-bigger-size: 20px !default;
@@ -86,13 +86,11 @@ $field-list-excel-member-filter-height: 149px !default;
 $field-list-excel-filter-height: 248px !default;
 $field-list-excel-member-filter-bigger-height: 100px !default;
 $field-list-excel-filter-bigger-height: 220px !default;
-$field-list-clear-filter-icon: '\ea82' !default;
 $format-label-font-opacity: .87 !default;
 $format-label-font-color: $grey-light-font !default;
 $format-label-font-weight: 500 !default;
 $format-preview-bigger-height: 30px !default;
 $format-preview-border-color: $grey-300 !default;
-$format-delete-icon: '\e5a5' !default;
 $format-outer-border-color: $grey-300 !default;
 $format-outer-fill-color: $grey-white !default;
 $format-outer-border-radius: 4px !default;
@@ -157,7 +155,6 @@ $field-list-adaptive-icon-height: 50px !default;
 $field-list-adaptive-drag-prompt-height: 200px !default;
 $field-list-adaptive-pivot-button-height: 36px !default;
 $field-list-adaptive-pivot-button-padding: 9px 16px !default;
-$field-list-toggle-icon: '\e434' !default;
 $pivot-dialog-font-weight: normal !default;
 $field-list-toggle-shadow-color: -1px 1px 4px 0 rgba($shadow, .12) !default;
 $field-list-toggle-left-shadow-color: 1px 1px 4px 0 rgba($shadow, .12) !default;