@syncfusion/ej2-pivotview 19.3.57 → 19.4.42

package/styles/pivotfieldlist/_tailwind-definition.scss

@@ -47,19 +47,17 @@ $field-list-header-content-line-height: 1.125em !default;
 $field-list-bigger-header-content-line-height: 1.6em !default;
 $field-list-header-icon-wrapper-padding: 0 !default;
 $field-list-bigger-header-icon-wrapper-padding: 7px !default;
-$field-list-static-header-icon-wrapper-padding: 4px !default;
-$field-list-static-bigger-header-icon-wrapper-padding: 7px !default;
+$field-list-static-header-icon-wrapper-padding: $field-list-header-icon-wrapper-padding !default;
+$field-list-static-bigger-header-icon-wrapper-padding: $field-list-bigger-header-icon-wrapper-padding !default;
 $pivot-calculated-icon-opacity: .87 !default;
 $field-list-bigger-button-line-height: 1.1em !default;
 $field-list-excel-member-filter-height: 151px !default;
 $field-list-excel-filter-height: 248px !default;
 $field-list-excel-member-filter-bigger-height: 91px !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-weight: 500 !default;
 $format-preview-bigger-height: 30px !default;
-$format-delete-icon: '\e5a5' !default;
 $format-outer-border-radius: 4px !default;
 $format-dialog-width: 628px !default;
 $format-dialog-bigger-width: 680px !default;
@@ -144,7 +142,7 @@ $field-list-button-height: 32px !default;
 $field-list-bigger-button-height: 36px !default;
 $field-list-axis-content-height: 133px !default;
 $field-list-header-padding: 12px !default;
-$field-list-bigger-header-padding: 20px !default;
+$field-list-bigger-header-padding: 16px !default;
 $field-list-bigger-header-font-size: 14px !default;
 $field-list-button-padding: 9px 12px !default;
 $field-list-bigger-button-padding: 9px 16px !default;
@@ -161,11 +159,10 @@ $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: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1) !default;
-$field-list-toggle-left-shadow-color: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1) !default;
-$field-list-drag-clone-shadow-color: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1) !default;
+$field-list-toggle-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-toggle-left-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-drag-clone-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
 $field-list-treeview-font-weight: 500 !default;
 $field-list-calc-formula-font-size: 13px !default;
 $field-list-calc-bigger-formula-font-size: 13px !default;

package/styles/pivotfieldlist/_theme.scss

@@ -47,7 +47,6 @@
       padding: 8px 5px;
     }
   }
-  // sass-lint:enable-all
 
   .e-bigger .e-pivotfieldlist,
   .e-bigger.e-pivotfieldlist {
@@ -64,15 +63,25 @@
   .e-pivotfieldlist-wrapper {
     font-family: $field-list-font-family;
     font-size: $field-list-content-font-size;
-    max-width: 700px;
-    min-width: 300px;
-
+    max-width: 700px !important;
+    min-width: 300px !important;
+    // sass-lint:enable-all
     .e-layout-footer {
+      display: flex;
       padding: 10px 2px 2px;
-      text-align: right;
 
-      .e-defer-apply-button {
-        margin-right: 10px;
+      .e-button-layout {
+        flex: auto;
+        text-align: end;
+
+        .e-defer-apply-button {
+          margin-right: 10px;
+        }
+
+        .e-cancel-btn,
+        .e-defer-apply-button {
+          min-width: fit-content;
+        }
       }
 
       .e-cancel-btn,
@@ -85,7 +94,7 @@
       }
 
       .e-checkbox-layout .e-label {
-        white-space: nowrap;
+        padding-right: 10px;
       }
 
       .e-checkbox-layout {
@@ -94,21 +103,19 @@
 
     }
 
+    // sass-lint:disable-all
     .e-checkbox-layout {
       float: left;
       margin-top: 6px;
 
-      @if ($skin-name == 'tailwind') {
-        margin: 0;
-        padding: 5px;
+      @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
       }
-
     }
 
     &.e-rtl {
       .e-layout-footer {
-        text-align: left;
-
         .e-defer-apply-button {
           margin-left: 10px;
         }
@@ -119,7 +126,6 @@
       }
     }
 
-    // sass-lint:disable-all
     &.e-dialog {
       max-height: 550px !important;
 
@@ -174,11 +180,11 @@
       width: 100%;
 
       .e-title-content {
+        flex: auto;
         font-size: $field-list-title-font-size;
         @if ($skin-name == 'tailwind') {
           line-height: $field-list-title-line-height;
         }
-        flex: auto;
       }
     }
 
@@ -212,17 +218,21 @@
           font-size: $field-list-header-font-size;
           font-weight: normal;
           height: $field-list-header-height;
+          line-height: $field-list-header-content-line-height;
           overflow: hidden;
           padding: $field-list-tree-header-padding 0 0 $field-list-header-padding;
           text-align: left;
           text-overflow: ellipsis;
-          word-break: break-all;
-          line-height: $field-list-header-content-line-height;
           text-transform: $field-list-header-text-transform;
+          word-break: break-all;
 
           @if ($field-list-skin == 'bootstrap4') {
             padding-left: 12px;
           }
+
+          @if ($skin-name == 'FluentUI') {
+            font-weight: 600;
+          }
         }
 
         .e-field-header-wrapper {
@@ -257,6 +267,15 @@
               font-weight: bold;
             }
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: 0 0 $field-list-icon-to-icon-padding $field-list-tree-header-padding !important;
+              transform: rotate(90deg);
+            }
+          }
+          // sass-lint:enable-all
         }
 
         .e-field-list-tree-outer-div {
@@ -414,7 +433,11 @@
             padding: 2px $field-list-header-padding 5px;
 
             @if ($skin-name == 'tailwind') {
-              padding: 5px $field-list-header-padding 5px;
+              padding: 5px $field-list-header-padding;
+            }
+
+            @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
+              border-radius: 3px 3px 0 0;
             }
 
 
@@ -423,6 +446,10 @@
               padding-top: $field-list-header-icon-wrapper-padding;
               width: 20px;
 
+              @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                padding-left: 3px;
+              }
+
               .e-axis-rows,
               .e-axis-columns,
               .e-axis-values,
@@ -441,8 +468,8 @@
             overflow: hidden;
             padding: 0 8px;
             text-overflow: ellipsis;
-            width: 100%;
             text-transform: $field-list-text-transform;
+            width: 100%;
 
             @if ($field-list-skin == 'bootstrap4') {
               margin-top: 3px;
@@ -451,6 +478,10 @@
             @if ($skin-name == 'bootstrap5') {
               margin-top: 3px;
             }
+
+            @if ($skin-name == 'FluentUI') {
+              font-weight: 600;
+            }
           }
 
           .e-axis-content {
@@ -751,6 +782,15 @@
           .e-sort-descend {
             padding: $field-list-tree-header-padding $field-list-icon-to-icon-padding 0 0;
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+              transform: rotate(90deg);
+            }
+          }
+          // sass-lint:enable-all
         }
       }
 
@@ -789,6 +829,10 @@
         height: 100%;
         width: 100%;
 
+        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+          line-height: 1.5;
+        }
+
         .e-field-table {
           height: 210px;
           width: 100%;
@@ -835,6 +879,10 @@
             .e-axis-wrapper {
               .e-axis-icon-wrapper {
                 padding-top: $field-list-static-header-icon-wrapper-padding;
+
+                @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                  padding-left: 3px;
+                }
               }
             }
           }
@@ -849,10 +897,34 @@
         .e-axis-table {
           .e-left-axis-fields {
             padding-left: $field-list-static-padding-size;
+
+            .e-field-list-filters,
+            .e-field-list-rows {
+              .e-axis-wrapper {
+                .e-axis-icon-wrapper {
+                  @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                    padding-left: 0;
+                    padding-right: 3px;
+                  }
+                }
+              }
+            }
           }
 
           .e-right-axis-fields {
             padding: 0;
+
+            .e-field-list-columns,
+            .e-field-list-values {
+              .e-axis-wrapper {
+                .e-axis-icon-wrapper {
+                  @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                    padding-left: 0;
+                    padding-right: 3px;
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -967,7 +1039,7 @@
                   background-color: $field-list-button-color;
                   color: $field-list-default-font-color;
                 }
-                
+
                 &.e-list-selected {
                   opacity: .5;
                 }
@@ -1055,8 +1127,8 @@
                     padding-right: 10px;
 
                     @if ($skin-name == 'tailwind') {
-                      padding-right: 0;
                       margin-right: 8px;
+                      padding-right: 0;
                     }
                   }
                 }
@@ -1093,7 +1165,7 @@
             .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-font-color;
               height: 200px;
               margin-left: 20px;
@@ -1377,11 +1449,21 @@
     min-width: 300px;
 
     .e-layout-footer {
+      display: flex;
       padding: 10px 2px 2px;
-      text-align: right;
 
-      .e-defer-apply-button {
-        margin-right: 10px;
+      .e-button-layout {
+        flex: auto;
+        text-align: end;
+
+        .e-defer-apply-button {
+          margin-right: 10px;
+        }
+
+        .e-cancel-btn,
+        .e-defer-apply-button {
+          min-width: fit-content;
+        }
       }
 
       .e-cancel-btn,
@@ -1394,7 +1476,7 @@
       }
 
       .e-checkbox-layout .e-label {
-        white-space: nowrap;
+        padding-right: 10px;
       }
 
       .e-checkbox-layout {
@@ -1403,20 +1485,19 @@
 
     }
 
+    // sass-lint:disable-all
     .e-checkbox-layout {
       float: left;
       margin-top: 6px;
 
-      @if ($skin-name == 'tailwind') {
-        margin: 0;
-        padding: 5px;
+      @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
       }
     }
 
     &.e-rtl {
       .e-layout-footer {
-        text-align: left;
-
         .e-defer-apply-button {
           margin-left: 10px;
         }
@@ -1427,7 +1508,6 @@
       }
     }
 
-    // sass-lint:disable-all
     &.e-dialog {
       max-height: 550px !important;
 
@@ -1463,7 +1543,7 @@
       }
 
     }
-    
+
     .e-field-list-title {
       display: flex;
       font-size: $field-list-title-font-size;
@@ -1525,6 +1605,10 @@
           @if ($field-list-skin == 'bootstrap4') {
             padding-left: 12px;
           }
+
+          @if ($skin-name == 'FluentUI') {
+            font-weight: 600;
+          }
         }
 
         .e-field-header-container {
@@ -1559,6 +1643,15 @@
               font-weight: bold;
             }
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: 0 0 $field-list-icon-to-icon-padding $field-list-tree-header-padding !important;
+              transform: rotate(90deg);
+            }
+          }
+          // sass-lint:enable-all
         }
 
         .e-field-list-tree-outer-div {
@@ -1716,7 +1809,7 @@
             padding: 2px $field-list-header-padding 5px;
 
             @if ($skin-name == 'tailwind') {
-              padding: 5px $field-list-header-padding 5px;
+              padding: 5px $field-list-header-padding;
             }
 
 
@@ -1743,8 +1836,8 @@
             overflow: hidden;
             padding: 0 8px;
             text-overflow: ellipsis;
-            width: 100%;
             text-transform: $field-list-text-transform;
+            width: 100%;
 
             @if ($field-list-skin == 'bootstrap4') {
               margin-top: 3px;
@@ -2052,6 +2145,15 @@
           .e-sort-descend {
             padding: $field-list-tree-header-padding $field-list-icon-to-icon-padding 0 0;
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+              transform: rotate(90deg);
+            }
+          }
+          // sass-lint:enable-all
         }
       }
 
@@ -2265,8 +2367,8 @@
                 width: 100%;
 
                 @if ($skin-name == 'bootstrap5') {
-                  color: $field-list-default-font-color !important;
-                  background-color: $field-list-default-bg-color !important;
+                  background-color: $field-list-default-bg-color;
+                  color: $field-list-default-font-color;
                 }
 
                 &.e-list-selected {
@@ -2351,10 +2453,10 @@
                     padding-right: 10px;
 
                     @if ($skin-name == 'tailwind') {
-                      padding-right: 0;
                       margin-right: 8px;
+                      padding-right: 0;
                     }
-  
+
                   }
                 }
               }
@@ -2390,7 +2492,7 @@
             .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-font-color;
               height: 200px;
               margin-left: 20px;
@@ -2492,7 +2594,7 @@
                 .e-list-icon {
                   color: $field-list-tree-icon-color;
 
-                  @if($skin-name == 'bootstrap5') { 
+                  @if($skin-name == 'bootstrap5') {
                     color: $field-list-default-fill-color;
                   }
 
@@ -2709,6 +2811,13 @@
           padding: $field-list-tree-header-padding 0 0 $field-list-bigger-icon-to-icon-padding;
           width: 24px;
         }
+
+        // sass-lint:disable-all
+        @if ($skin-name == 'FluentUI') {
+          .e-sort-none {
+            padding: 0 0 $field-list-bigger-icon-to-icon-padding $field-list-tree-header-padding !important;
+          }
+        }
       }
 
       .e-field-list {
@@ -2732,7 +2841,6 @@
           }
         }
 
-        // sass-lint:disable-all
         .e-calc-measure-icon,
         .e-calc-dimension-icon,
         .e-attributeCDB-icon,
@@ -2777,6 +2885,10 @@
             padding-top: $field-list-bigger-header-icon-wrapper-padding;
             width: 24px;
 
+            @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+              padding-left: 4px;
+            }
+
             .e-axis-rows,
             .e-axis-columns,
             .e-axis-values,
@@ -2808,10 +2920,11 @@
               height: $field-list-bigger-button-height !important;
               padding: $field-list-bigger-button-padding !important;
 
+              // sass-lint:enable-all
               .e-content {
                 font-size: $field-list-bigger-button-font-size;
                 line-height: $field-list-bigger-button-line-height;
-                padding: 0 10px
+                padding: 0 10px;
               }
 
               .e-draggable {
@@ -2874,6 +2987,7 @@
             margin-top: $field-list-default-bigger-padding-size;
           }
 
+          // sass-lint:disable-all
           .e-left-axis-fields .e-field-list-filters,
           .e-left-axis-fields .e-field-list-rows,
           .e-right-axis-fields .e-field-list-columns,
@@ -2881,6 +2995,10 @@
             .e-axis-wrapper {
               .e-axis-icon-wrapper {
                 padding-top: $field-list-static-bigger-header-icon-wrapper-padding;
+
+                @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                  padding-left: 4px;
+                }
               }
             }
           }
@@ -2891,11 +3009,34 @@
         .e-axis-table {
           .e-left-axis-fields {
             padding-left: $field-list-default-bigger-padding-size;
+
+            .e-field-list-filters,
+            .e-field-list-rows {
+              .e-axis-wrapper {
+                .e-axis-icon-wrapper {
+                  @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                    padding-left: 0;
+                    padding-right: 4px;
+                  }
+                }
+              }
+            }
           }
 
-          // sass-lint:disable-all
           .e-right-axis-fields {
             padding: 0 !important;
+
+            .e-field-list-columns,
+            .e-field-list-values {
+              .e-axis-wrapper {
+                .e-axis-icon-wrapper {
+                  @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+                    padding-left: 0 !important;
+                    padding-right: 4px !important;
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -2942,6 +3083,14 @@
           .e-sort-descend {
             padding: $field-list-tree-header-padding $field-list-bigger-icon-to-icon-padding 0 0;
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-bigger-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+            }
+          }
+          // sass-lint:enable-all
         }
       }
 
@@ -3011,6 +3160,13 @@
           padding: $field-list-tree-header-padding 0 0 $field-list-bigger-icon-to-icon-padding;
           width: 24px;
         }
+        
+        // sass-lint:disable-all
+        @if ($skin-name == 'FluentUI') {
+          .e-sort-none {
+            padding: 0 0 $field-list-bigger-icon-to-icon-padding $field-list-tree-header-padding !important;
+          }
+        }
       }
 
       .e-field-list {
@@ -3030,7 +3186,6 @@
           width: 24px !important;
         }
 
-        // sass-lint:disable-all
         .e-calc-measure-icon,
         .e-calc-dimension-icon,
         .e-attributeCDB-icon,
@@ -3053,6 +3208,7 @@
           }
         }
       }
+      // sass-lint:enable-all
 
       .e-left-axis-fields .e-field-list-rows,
       .e-right-axis-fields .e-field-list-values {
@@ -3100,16 +3256,18 @@
             height: 126px;
           }
 
+          // sass-lint:disable-all
           .e-pvt-btn-div {
             .e-pivot-button {
               font-size: $field-list-bigger-button-font-size;
               height: $field-list-bigger-button-height !important;
               padding: $field-list-bigger-button-padding !important;
 
+              // sass-lint:enable-all
               .e-content {
                 font-size: $field-list-bigger-button-font-size;
                 line-height: $field-list-bigger-button-line-height;
-                padding: 0 10px
+                padding: 0 10px;
               }
 
               .e-draggable {
@@ -3240,6 +3398,14 @@
           .e-sort-descend {
             padding: $field-list-tree-header-padding $field-list-bigger-icon-to-icon-padding 0 0;
           }
+
+          // sass-lint:disable-all
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-bigger-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+            }
+          }
+          // sass-lint:enable-all
         }
       }