@syncfusion/blazor-themes 22.1.39 → 22.2.7

package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss

@@ -168,6 +168,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 //enddefault
 
@@ -873,6 +874,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1382,6 +1389,32 @@ $pivotpager-single-size-title-padding: 8px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1530,19 +1563,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1576,12 +1597,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/bootstrap.scss

@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 28px !default;
@@ -870,6 +871,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1379,6 +1386,32 @@ $pivotpager-single-size-title-padding: 8px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1527,19 +1560,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1573,12 +1594,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss

@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 30px !default;
@@ -870,6 +871,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1379,6 +1386,32 @@ $pivotpager-single-size-title-padding: 8px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1527,19 +1560,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1573,12 +1594,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss

@@ -119,6 +119,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
+$pivotgrid-cell-value-margin-top: 2px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -875,6 +876,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1384,6 +1391,32 @@ $pivotpager-single-size-title-padding: 8px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1532,19 +1565,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1578,12 +1599,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss

@@ -119,6 +119,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
+$pivotgrid-cell-value-margin-top: 2px !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -875,6 +876,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1384,6 +1391,32 @@ $pivotpager-single-size-title-padding: 8px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1532,19 +1565,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1578,12 +1599,12 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss

@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 //enddefault
 
@@ -872,6 +873,12 @@ $pivotpager-single-size-title-padding: 4px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1381,6 +1388,32 @@ $pivotpager-single-size-title-padding: 4px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1529,19 +1562,7 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1575,12 +1596,12 @@ $pivotpager-single-size-title-padding: 4px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {

package/SCSS-Themes/pivotview/pivotview/fabric.scss

@@ -166,6 +166,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
+$pivotgrid-cell-value-margin-top: 5px !default;
 
 /*! component's common definitions and variables */
 $pivotgrid-grouping-height: 30px !default;
@@ -869,6 +870,12 @@ $pivotpager-single-size-title-padding: 4px !default;
       }
     }
 
+    &.sf-pivotview {
+      .e-pivot-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
     .e-pivot-toolbar {
       background: $pivotgrid-grp-bg-color;
       border-bottom: 0;
@@ -1378,6 +1385,32 @@ $pivotpager-single-size-title-padding: 4px !default;
 
   /*! PivotView theme */
   .e-pivotview {
+    .e-pivotcell-container {
+      display: flex;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
     .e-nextspan {
       display: inline-block;
       width: $pivotview-indent-space-size;
@@ -1526,19 +1559,7 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     div {
       &.e-cellvalue {
-        margin-top: 5px;
-  
-        @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
-          margin-top: 0;
-        }
-  
-        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
-          margin-top: 2px;
-        }
-  
-        @if ($skin-name == 'FluentUI') {
-          margin-top: 1px;
-        }
+        margin-top: $pivotgrid-cell-value-margin-top;
       }
 
       div span.e-value-sort-icon {
@@ -1572,12 +1593,12 @@ $pivotpager-single-size-title-padding: 4px !default;
       }
     }
 
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin-left: auto !important;
+        margin-top: $pivotgrid-cell-value-margin-top !important;
+      }
     }
 
     .e-rowsheader .e-sortfilterdiv {