@syncfusion/ej2-pivotview 19.3.48 → 19.4.38

package/styles/pivotview/_layout.scss

@@ -8,21 +8,22 @@
     .e-group-field-settings {
       max-height: 450px !important;
       border-radius: $pivotgrid-default-border-radius;
-      max-width: 400px;
-      width: auto;
+      max-width: 400px !important;
+      width: auto !important;
     }
-    // sass-lint:enable-all
 
     .e-pivot-format-dialog {
       border-radius: $pivotgrid-default-border-radius;
-      max-width: 400px;
-      width: auto;
+      max-width: 400px !important;
+      width: auto !important;
     }
+    // sass-lint:enable-all
 
     .e-value-field-settings {
-      .e-field-name-text-wrapper, .e-field-name-text-container {
+      .e-field-name-text-wrapper,
+      .e-field-name-text-container {
         display: flex;
-      }
+    }
 
       .e-field-name-title {
         flex: none;
@@ -32,9 +33,9 @@
 
       .e-field-name-content {
         flex: auto;
-        width: 100%;
         font-size: 13px;
         font-weight: 500;
+        width: 100%;
       }
 
       .e-caption-input-wrapper,
@@ -55,11 +56,7 @@
         font-weight: 500;
         width: 100%;
 
-        @if ($skin-name == 'tailwind') {
-          padding-bottom: 4px;
-        }
-
-        @if ($skin-name == 'bootstrap5') {
+        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
           padding-bottom: 4px;
         }
       }
@@ -74,10 +71,10 @@
       .e-input-option-text,
       .e-group-inerval-option-text,
       .e-checkbox-wrapper {
-        padding-bottom: $pivotgrid-grouping-padding-bottom; 
+        padding-bottom: $pivotgrid-grouping-padding-bottom;
       }
 
-      .e-group-start-option-wrapper .e-checkbox-wrapper{
+      .e-group-start-option-wrapper .e-checkbox-wrapper {
         padding-top: $pivotgrid-grouping-padding-top;
       }
 
@@ -107,7 +104,7 @@
     .e-member-editor-dialog {
       min-width: 320px;
 
-      .e-editor-search-wrapper, 
+      .e-editor-search-wrapper,
       .e-editor-search-container {
         display: flex;
         padding: 0 $pivotgrid-editor-search-padding-size 10px;
@@ -120,7 +117,7 @@
 
       @if ($pivotgrid-skin == 'bootstrap4') {
         &:not(.e-excel-filter) {
-          .e-editor-search-wrapper, 
+          .e-editor-search-wrapper,
           .e-editor-search-container {
             padding: 5px $pivotgrid-editor-search-padding-size 10px;
           }
@@ -129,7 +126,7 @@
 
       @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
         &:not(.e-excel-filter) {
-          .e-editor-search-wrapper, 
+          .e-editor-search-wrapper,
           .e-editor-search-container {
             padding: 5px $pivotgrid-editor-search-padding-size 10px;
           }
@@ -138,7 +135,7 @@
 
       @if ($skin-name == 'tailwind') {
         &:not(.e-excel-filter) {
-          .e-editor-search-wrapper, 
+          .e-editor-search-wrapper,
           .e-editor-search-container {
             padding: 5px $pivotgrid-editor-search-padding-size 10px;
           }
@@ -172,9 +169,6 @@
               color: $pivotgrid-sort-select-color;
               outline: none;
             }
-            @if ($skin-name == 'bootstrap5') {
-              box-shadow: none !important;
-            }         
           }
 
           .e-sort-ascend-icon,
@@ -190,12 +184,11 @@
             }
 
             &.e-active {
-              background-color: $pivotgrid-sort-select-background-color;
-              border-color: $pivotgrid-sort-select-border-color;
-              color: $pivotgrid-sort-select-color;
-              outline: none;
-              @if ($skin-name == 'bootstrap5') {
-                box-shadow: none !important;
+              @if ($skin-name == 'bootstrap4') {
+                background-color: $pivotgrid-sort-select-background-color;
+                border-color: $pivotgrid-sort-select-border-color;
+                color: $pivotgrid-sort-select-color;
+                outline: none;
               }
             }
           }
@@ -325,7 +318,7 @@
               height: 14px;
               min-width: 14px;
               width: 14px;
-              @if ($pivotgrid-skin == 'bootstrap4') {
+              @if ($pivotgrid-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
                 height: auto;
               }
 
@@ -352,11 +345,12 @@
 
       .e-clear-filter-button {
         float: left;
-        margin-left: -10px;
+        margin: 0;
 
-        @if($pivotgrid-skin == 'bootstrap4') or ($pivotgrid-skin == 'bootstrap') or ($pivotgrid-skin == 'bootstrap-dark') or ($pivotgrid-skin == 'material-dark') or ($pivotgrid-skin == 'material') {
-          margin: 0;
-        }            
+        @if ($skin-name == 'FluentUI') {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
 
         &.e-disable {
           display: none;
@@ -409,10 +403,7 @@
         .e-footer-content {
           .e-clear-filter-button {
             float: right;
-            margin-right: -10px;
-            @if($pivotgrid-skin == 'bootstrap4') or ($pivotgrid-skin == 'bootstrap') or ($pivotgrid-skin == 'bootstrap-dark') or ($pivotgrid-skin == 'material-dark') or ($pivotgrid-skin == 'material') {
-              margin: 0;
-            }  
+            margin: 0;
           }
         }
       }
@@ -494,11 +485,14 @@
       }
 
       .e-footer-content {
-        border-radius: $pivotgrid-default-border-radius;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        padding-bottom: 8px;
-        padding-top: 8px;
+        border-radius: $pivotgrid-default-border-radius;
+
+        @if ($skin-name != 'FluentUI') {
+          padding-bottom: 8px;
+          padding-top: 8px;
+        }
       }
 
       .e-dlg-content {
@@ -524,21 +518,32 @@
           color: $error-font-color !important;
           font-weight: 600 !important;
         }
-        // sass-lint:enable-all
       }
     }
 
     .e-member-editor-dialog,
     .e-pivot-format-dialog {
       .e-dlg-content {
-        padding: 0;
+        @if ($skin-name != 'FluentUI') {
+          padding: 0;
+        }
+
+        @if ($skin-name == 'FluentUI') {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
       }
     }
+    // sass-lint:enable-all
 
     .e-value-field-settings,
     .e-member-editor-dialog {
       .e-footer-content {
         border-top: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+
+        @if ($skin-name == 'FluentUI') {
+          border-top: 0;
+        }
       }
     }
 
@@ -557,7 +562,7 @@
 
     // sass-lint:disable-all
     .e-pivotchart-type-dialog {
-      max-width: 350px;
+      max-width: 350px !important;
       max-height: 380px !important;
 
       .e-chart-type-option-wrapper,
@@ -586,8 +591,8 @@
     }
 
     .e-pivot-format-dialog {
-      max-height: 500px !important;
-      max-width: 350px;
+      max-height: 550px !important;
+      max-width: 350px !important;
 
       .e-pivot-format-dialog-outer {
         padding: 0 $pivotgrid-editor-search-padding-size;
@@ -598,7 +603,7 @@
         .e-pivot-format-grouping-lable,
         .e-pivot-format-decimal-lable {
           font-weight: 500;
-          @if ($skin-name == 'tailwind') {
+          @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
             padding-bottom: 4px;
           }
         }
@@ -617,19 +622,33 @@
     }
 
     .e-pivot-toolbar {
+      background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
       border-style: solid;
 
+      @if($skin-name == 'FluentUI') {
+        box-shadow: none;
+      }
+
       @if ($skin-name == 'bootstrap5') ($skin-name == 'tailwind') {
         border-top: 1px solid $pivotgrid-border;
         border-left: 1px solid $pivotgrid-border;
         border-right: 1px solid $pivotgrid-border;
       }
 
-      .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
-        font-size: 16px;
-      }
+      .e-toolbar-items {
+        background: $pivotgrid-grp-bg-color;
+       }
+
+      .e-toolbar-item .e-tbar-btn.e-btn {
+        @if($skin-name == 'FluentUI') {
+          line-height: 20px;
+        }
 
+        .e-icons.e-btn-icon {
+          font-size: 16px;
+        }
+      }
 
       .e-menu-wrapper,
       .e-menu-container {
@@ -642,7 +661,9 @@
 
         // sass-lint:disable-all
         ul .e-menu-item {
-          height: $pivotgrid-menubar-height;
+          @if ($skin-name != 'tailwind') {
+            height: $pivotgrid-menubar-height;
+          }
           overflow: hidden;
           padding-left: 10px;
           @if ($pivotgrid-skin == 'bootstrap4') {
@@ -658,8 +679,16 @@
               color: #495057;
             }
 
-            @if ($skin-name == 'bootstrap5') {
-              line-height: 32px;
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
+
+            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+              line-height: $pivotgrid-menubar-height;
+            }
+
+            @if ($skin-name == 'tailwind') {
+              line-height: 40px;
             }
           }
 
@@ -668,8 +697,16 @@
               color: #495057;
             }
 
-            @if ($skin-name == 'bootstrap5') {
-              line-height: 32px;
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
+
+            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+              line-height: $pivotgrid-menubar-height;
+            }
+
+            @if ($skin-name == 'tailwind') {
+              line-height: 40px;
             }
           }
         }
@@ -677,7 +714,7 @@
         ul .e-menu-item.e-focused {
           @if ($pivotgrid-skin == 'bootstrap4') {
             background-color: #6c757d;
-            border-radius: 4px;
+            border-radius: $pivotgrid-default-border-radius;
         }
 
         .e-menu-icon,
@@ -685,6 +722,10 @@
           @if ($pivotgrid-skin == 'bootstrap4') {
             color:#ffffff;
           }
+
+          @if ($pivotgrid-skin == 'FluentUI') {
+            color: $pivotgrid-active-color;
+          }
         }
       }
       }
@@ -725,7 +766,6 @@
     .e-frozenscrollbar {
       background-color: $pivotgrid-grp-bg-color;
     }
-    // sass-lint:enable-all
   }
 
   .e-pivotview-disable-icon {
@@ -737,7 +777,7 @@
   }
 
   .e-pivotview-report-dialog {
-    max-width: 350px;
+    max-width: 350px !important;
   }
 
   .e-mdx-query-content {
@@ -753,8 +793,9 @@
   }
 
   .e-pivotview-mdx-dialog {
-    max-width: 500px;
+    max-width: 500px !important;
   }
+  // sass-lint:enable-all
 
   .e-report-outer {
     display: inline-block;
@@ -818,7 +859,6 @@
 
     .e-drillthrough-body-header-value {
       color: $pivotview-grid-header-font-color;
-      margin-left: 10px;
       margin-right: 20px;
     }
 
@@ -837,7 +877,21 @@
   .e-bigger.e-pivotview {
     .e-pivot-toolbar .e-menu-wrapper ul .e-menu-item,
     .e-pivot-toolbar .e-menu-container ul .e-menu-item {
-      height: $pivotgrid-bigger-menubar-height;
+      @if ($skin-name != 'tailwind') and ($skin-name != 'bootstrap5') {
+        height: $pivotgrid-bigger-menubar-height;
+      }
+
+      .e-menu-icon {
+        @if ($skin-name == 'tailwind') {
+          line-height: 50px;
+        }
+      }
+
+      .e-caret {
+        @if ($skin-name == 'tailwind') {
+          line-height: 50px;
+        }
+      }
     }
 
     .e-member-editor-dialog .e-dlg-content .e-member-editor-wrapper .e-member-editor-container-outer-div,
@@ -979,20 +1033,21 @@
         font-size: 14px;
       }
 
-      .e-group-start-option-wrapper .e-checkbox-wrapper{
+      .e-group-start-option-wrapper .e-checkbox-wrapper {
         padding-top: $pivotgrid-grouping-bigger-padding-top;
       }
     }
 
     .e-value-field-settings {
-      .e-field-name-text-wrapper, .e-field-name-text-container {
+      .e-field-name-text-wrapper,
+      .e-field-name-text-container {
         display: flex;
-      }
+    }
 
       .e-field-name-title,
       .e-field-name-content {
         font-size: 14px;
-        font-size: 13px;
+        // font-size: 13px;
         font-weight: 500;
       }
 

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

@@ -36,13 +36,11 @@ $pivotgrid-button-border-radius: 25px !default;
 $pivotgrid-button-background-color: $grey-800 !default;
 $pivotgrid-editor-dialog-footer-padding: 8px !default;
 $pivotgrid-button-drag-color: $accent !default;
-$pivotgrid-expand-icon: '\e859' !default;
 $pivotgrid-expand-icon-fontsize: 10px !default;
 $pivotgrid-expcoldiv-fontsize: 10px !default;
 $pivotgrid-drill-margintop: 8px !default;
-$pivotgrid-rtl-expand-icon: '\e854' !default;
+$pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
 $pivotgrid-rtl-expand-icon-font-size: 10px !default;
-$pivotgrid-collapse-icon: '\e83d' !default;
 $pivotgrid-collapse-icon-fonsize: 10px !default;
 $pivotgrid-hover-color: rgba($grey-white, .18) !default;
 $pivotgrid-focus-color: rgba($grey-white, .18) !default;
@@ -70,7 +68,6 @@ $pivotgrid-excel-member-filter-height: 151px !default;
 $pivotgrid-excel-filter-height: 248px !default;
 $pivotgrid-excel-member-filter-bigger-height: 102px !default;
 $pivotgrid-excel-filter-bigger-height: 220px !default;
-$pivotgrid-clear-filter-icon: '\ea82' !default;
 $pivotgrid-editor-label-padding-size: 14px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Roboto !default;
 $pivotgrid-editor-label-opacity: .87 !default;
@@ -104,6 +101,10 @@ $pivotview-filter-toolbar-items-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-right: 20px !default;
 $pivotgrid-header-text-margin-top: 3px !default;
 $pivotgrid-border: $grey-300 !default;
+$pivotgrid-bg-color: #5a6268;
+$pivotgrid-border-color: #545b62;
+$pivotgrid-active-border-color: #4e555b;
+$pivotgrid-box-shadow-color: rgba(108, 117, 125, .5);
 
 //enddefault
 
@@ -122,3 +123,5 @@ $pivotgrid-collapse-bigger-icon-fontsize: 10px !default;
 $pivotgrid-grouping-padding-bottom: 10px !default;
 $pivotgrid-grouping-padding-top: 0 !default;
 $pivotgrid-grouping-bigger-padding-top: 0 !default;
+$pivotgrid-button-icon-wrapper-size: 18px !default;
+$pivotgrid-bigger-button-icon-wrapper-size: 20px !default;

package/styles/pivotview/_material-definition.scss

@@ -36,13 +36,11 @@ $pivotgrid-button-border-radius: 25px !default;
 $pivotgrid-button-background-color: $grey-300 !default;
 $pivotgrid-editor-dialog-footer-padding: 8px !default;
 $pivotgrid-button-drag-color: $accent !default;
-$pivotgrid-expand-icon: '\e859' !default;
 $pivotgrid-expand-icon-fontsize: 10px !default;
 $pivotgrid-expcoldiv-fontsize: 10px !default;
 $pivotgrid-drill-margintop: 8px !default;
-$pivotgrid-rtl-expand-icon: '\e854' !default;
+$pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
 $pivotgrid-rtl-expand-icon-font-size: 10px !default;
-$pivotgrid-collapse-icon: '\e83d' !default;
 $pivotgrid-collapse-icon-fonsize: 10px !default;
 $pivotgrid-hover-color: $grey-400 !default;
 $pivotgrid-focus-color: $grey-500 !default;
@@ -70,7 +68,6 @@ $pivotgrid-excel-member-filter-height: 151px !default;
 $pivotgrid-excel-filter-height: 248px !default;
 $pivotgrid-excel-member-filter-bigger-height: 102px !default;
 $pivotgrid-excel-filter-bigger-height: 220px !default;
-$pivotgrid-clear-filter-icon: '\ea82' !default;
 $pivotgrid-editor-label-padding-size: 12px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Roboto !default;
 $pivotgrid-editor-label-opacity: .87 !default;
@@ -102,6 +99,10 @@ $pivotview-filter-toolbar-items-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-right: 20px !default;
 $pivotgrid-header-text-margin-top: 3px !default;
 $pivotgrid-border: $grey-300 !default;
+$pivotgrid-bg-color: #5a6268;
+$pivotgrid-border-color: #545b62;
+$pivotgrid-active-border-color: #4e555b;
+$pivotgrid-box-shadow-color: rgba(108, 117, 125, .5);
 
 /*! component's common definitions and variables */
 $pivotgrid-editor-search-padding-size: 20px !default;
@@ -118,3 +119,6 @@ $pivotgrid-collapse-bigger-icon-fontsize: 10px !default;
 $pivotgrid-grouping-padding-bottom: 10px !default;
 $pivotgrid-grouping-padding-top: 0 !default;
 $pivotgrid-grouping-bigger-padding-top: 0 !default;
+$pivotgrid-button-icon-wrapper-size: 18px !default;
+$pivotgrid-bigger-button-icon-wrapper-size: 20px !default;
+$pivotgrid-bigger-button-icon-wrapper-size: 20px !default;

package/styles/pivotview/_tailwind-definition.scss

@@ -22,13 +22,11 @@ $pivotgrid-button-icon-size: 12px !default;
 $pivotgrid-bigger-button-icon-size: 14px !default;
 $pivotgrid-button-border-radius: 0 !default;
 $pivotgrid-editor-dialog-footer-padding: 8px !default;
-$pivotgrid-expand-icon: '\e859' !default;
 $pivotgrid-expand-icon-fontsize: 18px !default;
 $pivotgrid-expcoldiv-fontsize: 10px !default;
-$pivotgrid-drill-margintop: 8px !default;
-$pivotgrid-rtl-expand-icon: '\e854' !default;
+$pivotgrid-drill-margintop: 1px !default;
+$pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
 $pivotgrid-rtl-expand-icon-font-size: 10px !default;
-$pivotgrid-collapse-icon: '\e83d' !default;
 $pivotgrid-collapse-icon-fonsize: 18px !default;
 $pivotgrid-vsort-mouse-margin: -28px -5px !default;
 $pivotgrid-vsort-mouse-wrap-margin: -18px !default;
@@ -47,7 +45,6 @@ $pivotgrid-excel-member-filter-height: 165px !default;
 $pivotgrid-excel-filter-height: 248px !default;
 $pivotgrid-excel-member-filter-bigger-height: 109px !default;
 $pivotgrid-excel-filter-bigger-height: 220px !default;
-$pivotgrid-clear-filter-icon: '\ea82' !default;
 $pivotgrid-editor-label-padding-size: 12px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Inter !default;
 $pivotgrid-editor-label-opacity: .87 !default;
@@ -105,6 +102,10 @@ $pivotgrid-sort-select-color: $icon-color !default;
 $pivotgrid-header-background-color: $content-bg-color-alt1 !default;
 $pivotgrid-gtot-background-color: $content-bg-color-alt1 !default;
 $pivotgrid-gtot-font-color: $content-text-color-alt2 !default;
+$pivotgrid-bg-color: #5a6268;
+$pivotgrid-border-color: #545b62;
+$pivotgrid-active-border-color: #4e555b;
+$pivotgrid-box-shadow-color: rgba(108, 117, 125, .5);
 
 /*! component's common definitions and variables */
 $pivotgrid-editor-search-padding-size: 12px !default;
@@ -121,3 +122,5 @@ $pivotgrid-collapse-bigger-icon-fontsize: 22px !default;
 $pivotgrid-grouping-padding-bottom: 12px !default;
 $pivotgrid-grouping-padding-top: 12px !default;
 $pivotgrid-grouping-bigger-padding-top: 16px !default;
+$pivotgrid-button-icon-wrapper-size: 18px !default;
+$pivotgrid-bigger-button-icon-wrapper-size: 20px !default;