@syncfusion/ej2-angular-pivotview 20.2.45 → 20.3.47

package/styles/pivotview/_theme.scss

@@ -168,48 +168,48 @@
     /* stylelint-disable */
 
     .e-sortfilterdiv {
-      float: right;
-      margin: $pivotgrid-vsort-mouse-margin !important;
-      @if ($pivotgrid-skin == 'bootstrap4') {
-        font-size: 10px !important;
-        padding: 15px;
-      }
-      @if ($skin-name == 'bootstrap5') {
-        font-size: 12px !important;
-        padding: 15px;
-      }
-      @if ($skin-name == 'FluentUI') {
-        font-size: 14px !important;
-      }
-
-      &.e-value-sort-icon {
-        font-size: $pivotgrid-value-sort-icon-font-size !important;
-        @if ($skin-name == 'tailwind') {
-          padding-top: 14px !important;
+      .e-value-sort-icon {
+        float: right;
+        @if ($pivotgrid-skin == 'bootstrap4') {
+          font-size: 10px !important;
         }
         @if ($skin-name == 'bootstrap5') {
-          padding-right: 5px !important;
+          font-size: 12px !important;
+        }
+        @if ($skin-name == 'FluentUI') {
+          font-size: 14px !important;
+        }
+
+        &.e-value-sort-icon {
+          font-size: $pivotgrid-value-sort-icon-font-size !important;
         }
       }
+
+      &:not(.e-value-sort-icon) {
+        display: none;
+      }
+    }
+
+    .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-rowsheader .e-sortfilterdiv {
-      margin: -10px 0 !important;
+      margin: $pivotgrid-vsort-row-margin !important;
     }
 
     .e-rowsheader .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-row-margin !important;
+      margin: $pivotgrid-vsort-row-parent-margin !important;
     }
 
     .e-pivotchart > svg, .e-pivotchart-inner > svg {
       border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
     }
 
-    .e-grid .e-columnheader.e-wrap .e-sortfilterdiv,
-    .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-mouse-wrap-margin !important;
-    }
-
     .e-grid .e-icons {
       color: $pivotgrid-button-icon-color !important;
       @if ($pivotgrid-skin == 'bootstrap4') {
@@ -309,12 +309,12 @@
     }
 
     .e-stackedheadercelldiv {
-      display: inline;
+      display: block;
     }
 
     .e-stackedheadertext.e-cellvalue,
     .e-stackedheadercelldiv.e-cellvalue {
-      display: inline;
+      display: inline-block;
       padding-left: 12px !important;
       margin-top: 5px;
 
@@ -771,26 +771,27 @@
               .e-pv-filtered,
               .e-remove,
               .e-edit {
-                color: $pivotgrid-icon-hover-color !important;
+                color: $pivotgrid-icon-hover-color  !important;
               }
             }
-    
+
             &.e-btn-focused {
               background-color: $pivotgrid-focus-color;
               color: $pivotgrid-button-acitve-font-color;
-              @if ($pivotgrid-skin == 'bootstrap4') {
+
+              @if ($pivotgrid-skin =='bootstrap4') {
                 background-color: $pivotgrid-border-color;
                 border-color: $pivotgrid-active-border-color;
                 box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
               }
-    
+
               .e-sort,
               .e-dropdown-icon,
               .e-pv-filter,
               .e-pv-filtered,
               .e-remove,
               .e-edit {
-                color: $pivotgrid-icon-focus-color !important;
+                color: $pivotgrid-icon-focus-color  !important;
               }
             }
     
@@ -926,7 +927,7 @@
     .e-expand,
     .e-collapse {
       cursor: pointer;
-      display: inline;
+      display: inline-block;
       height: 18px;
       margin-top: 5px;
       text-align: center;
@@ -965,6 +966,330 @@
       font-size: $pivotgrid-expand-icon-fontsize;
     }
 
+    .e-pivot-pager {
+      padding: $pivotpager-padding;
+
+      &.e-pivot-pager-bottom {
+        border-top: 0;
+      }
+  
+      &.e-pivot-pager-top {
+        border-bottom: 0;
+      }
+
+      .e-pivotview-vseparator {
+        height: auto;
+        border-left: $pivotpager-separator-border;
+        margin: $pivotpager-v-separator-margin;
+      }
+
+      .e-pivot-pager-maindiv {
+        display: flex;
+        flex-direction: row;
+
+        .e-pivot-pager-row-maindiv,
+        .e-pivot-pager-column-maindiv {
+          display: flex;
+          flex-direction: column;
+          width: 50%;
+
+          .e-icon-first,
+          .e-icon-prev,
+          .e-icon-next,
+          .e-icon-last {
+            font-size: $pivotpager-page-icon-size;
+            padding: $pivotpager-page-icon-padding;
+           
+          /* stylelint-disable */
+          @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
+            margin: 0 !important;
+          }
+        }
+
+        /* stylelint-enable */
+
+          .e-pivotview-text-div {
+            display: flex;
+            flex-direction: row;
+          }
+          
+          .e-pivotview-row-pagerString,
+          .e-pivotview-column-pagerString {
+            color: $pivotpager-axis-title-font-color;
+            font-size: $pivotpager-title-font-size;
+            overflow: hidden;
+            text-align: initial;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 50%;
+          }
+
+          .e-pivotview-row-size,
+          .e-pivotview-column-size {
+            color: $pivotpager-size-title-font-color;
+            font-size: $pivotpager-title-font-size;
+            overflow: hidden;
+            text-align: end;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 50%;
+          }
+
+          .e-pivotview-text-div-1 {
+            flex: none;
+
+            .e-pagercontainer {
+              margin-top: $pivotpager-page-container-marging-top;
+              @if ($pivotgrid-skin == 'material-dark') or ($pivotgrid-skin == 'material') {
+                margin: $pivotpager-page-container-marging-top 0 0 0;
+              }
+
+              &.e-pivot-pager-info-container,
+              &.e-pager-dropdown {
+                border-style: none;
+                vertical-align: top;
+              }
+            }
+            
+            .e-pager-dropdown {
+              float: right;
+            }
+          }
+          
+          .e-pivot-row-of-string-maindiv,
+          .e-pivot-column-of-string-maindiv {
+            line-height: $pivotpager-single-title-line-height;
+
+            .e-pivotview-row-pagerNumber,
+            .e-pivotview-column-pagerNumber {
+              font-weight: $pivotpager-pager-number-font-weight;
+            }
+          }
+          
+          .e-pivot-row-pager-settings,
+          .e-pivot-column-pager-settings {
+            flex: none;
+
+            .e-numeric {
+              margin: $pivotpager-numeric-box-margin;
+              vertical-align: top;
+            }
+          }
+        }
+
+        &.e-pivot-pager-single-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            flex-direction: row;
+            width: 100%;
+
+            .e-pagercontainer {
+              margin-top: 0;
+
+              &.e-pivot-pager-info-container,
+              &.e-pager-dropdown {
+                border-style: none;
+              }
+            }
+
+            .e-pivotview-row-pagerString,
+            .e-pivotview-column-pagerString {
+              flex: auto;
+              font-size: $pivotpager-single-title-font-size;
+              line-height: $pivotpager-single-title-line-height;
+              text-align: center;
+            }
+
+            .e-pivotview-text-div-1 {
+              .e-pivotview-row-size,
+              .e-pivotview-column-size {
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                padding: 0 $pivotpager-single-size-title-padding 0 0;
+                width: inherit;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-compact-view {
+        .e-pivotview-vseparator {
+          margin-top: $pivotpager-v-separator-margin-top;
+        }
+
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            align-items: center;
+            flex-direction: row;
+
+            .e-pivotview-text-div,
+            .e-pivotview-text-div-1 {
+              display: flex;
+              flex-direction: row;
+              width: 50%;
+
+              .e-pagercontainer {
+                margin-top: 0;
+
+                @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
+                  margin-top: $pivotpager-touch-page-container-marging-top;
+                }
+              }
+
+              .e-pivotview-row-size,
+              .e-pivotview-column-size {
+                flex: auto;
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                padding: 0 $pivotpager-single-size-title-padding 0 0;
+                text-align: end;
+                width: inherit;
+              }
+
+              .e-pivotview-row-pagerString,
+              .e-pivotview-column-pagerString {
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                min-width: 50px;
+                text-align: initial;
+                width: inherit;
+              }
+            }
+          }
+
+          &.e-pivot-pager-single-maindiv {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              width: 100%;
+
+              .e-pagercontainer {
+                margin-top: 0;
+              }
+
+              .e-pivotview-row-pagerString,
+              .e-pivotview-column-pagerString {
+                text-align: center;
+                width: 100%;
+              }
+
+              .e-pivotview-text-div-1 {
+                width: auto;
+              }
+            }
+          }
+
+          &:not(.e-pivot-pager-single-maindiv) {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              &.e-page-size-disable {
+                .e-pivotview-text-div {
+                  width: auto;
+                }
+              }
+            }
+          }
+        }
+
+        &.e-rtl {
+          .e-pivot-pager-maindiv {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              .e-pivotview-text-div,
+              .e-pivotview-text-div-1 {
+                .e-pivot-row-pager-settings,
+                .e-pivot-column-pager-settings {
+                  padding: 0 $pivotpager-single-size-title-padding 0 0;
+                }
+  
+                .e-pivotview-row-size,
+                .e-pivotview-column-size {
+                  padding: 0 0 0 $pivotpager-single-size-title-padding;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.e-device {
+        .e-pivotview-hseparator {
+          border-top: $pivotpager-separator-border;
+          margin: $pivotpager-h-separator-margin;
+          width: auto;
+        }
+
+        .e-pivot-pager-maindiv {
+          flex-direction: column;
+
+          .e-pagercontainer {
+            display: inline-block;
+          }
+
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            width: 100%;
+          }
+
+          &:not(.e-pivot-pager-single-maindiv) {
+            .e-pagercontainer {
+              margin-top: $pivotpager-adaptive-page-container-marging-top;
+            }
+          }
+        }
+
+        /* stylelint-disable */
+        @media (max-width: 400px) {
+          .e-pivotview-row-size,
+          .e-pivotview-column-size,
+          .e-pivotview-row-pagerString,
+          .e-pivotview-column-pagerString {
+            min-width: 10px !important;
+          }
+        }
+        /* stylelint-enable */
+      }
+
+      &.e-rtl {
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            .e-pivot-row-pager-settings,
+            .e-pivot-column-pager-settings {
+              .e-numeric {
+                margin: $pivotpager-adaptive-numeric-box-margin;
+              }
+            }
+
+            .e-pager-dropdown {
+              float: left;
+            }
+          }
+
+          &.e-pivot-pager-single-maindiv {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              .e-pivotview-text-div-1 {
+                .e-pivotview-row-size,
+                .e-pivotview-column-size {
+                  padding: 0 0 0 $pivotpager-single-size-title-padding;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      @media (max-width: 769px) {
+        .e-pivot-pager-maindiv {
+          .e-pagercontainer {
+            display: inline-block;
+          }
+        }
+      }
+    }
+
     &.e-rtl {
 
       .e-expand::before,
@@ -1091,6 +1416,10 @@
       .e-sortfilterdiv {
         float: left;
       }
+
+      th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border) {
+        border-left-width: 1px !important;
+      }
       /* stylelint-enable */
     }
 
@@ -1202,6 +1531,7 @@
     .e-component-disable {
       display: none !important;
     }
+
     /* stylelint-enable */
   }
 
@@ -1313,8 +1643,7 @@
         font-size: $pivotview-bigger-grid-header-font-size !important;
       }
     }
-    .e-bigger .e-stackedheadercelldiv
-    {
+    .e-bigger .e-stackedheadercelldiv {
       padding-left: 16px !important;
     }
 
@@ -1468,7 +1797,6 @@
     }
 
     .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-touch-margin !important;
       @if ($pivotgrid-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') {
         font-size: 12px !important;
       }
@@ -1476,15 +1804,6 @@
       @if ($pivotgrid-skin == 'tailwind') {
         font-size: 16px !important;
       }
-      
-      @if ($pivotgrid-skin == 'bootstrap5') or ($skin-name == 'FluentUI') {
-        padding-top: 28px;
-      }
-    }
-
-    .e-grid .e-columnheader.e-wrap .e-sortfilterdiv,
-    .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-touch-wrap-margin !important;
     }
 
     /* stylelint-enable */
@@ -1573,6 +1892,106 @@
         font-size: $pivotgrid-collapse-bigger-icon-fontsize;
       }
     }
+
+    .e-pivot-pager,
+    #{&}.e-pivot-pager.e-bigger {
+      padding: $pivotpage-touch-padding;
+
+      .e-pivotview-vseparator {
+        margin: $pivotpager-touch-v-separator-margin;
+      }
+
+      .e-pivot-pager-maindiv {
+        .e-pivot-pager-row-maindiv,
+        .e-pivot-pager-column-maindiv {
+
+          .e-icon-first,
+          .e-icon-prev,
+          .e-icon-next,
+          .e-icon-last {
+            font-size: $pivotpager-touch-page-icon-size;
+            padding: $pivotpager-touch-page-icon-padding;
+          }
+
+          .e-pivot-row-of-string-maindiv,
+          .e-pivot-column-of-string-maindiv {
+            line-height: $pivotpager-touch-single-title-line-height;
+          }
+
+          .e-pivotview-row-pagerString,
+          .e-pivotview-column-pagerString,
+          .e-pivotview-row-size,
+          .e-pivotview-column-size {
+            font-size: $pivotpager-string-font-touch-size;
+          }
+
+          .e-pivotview-text-div-1 {
+            .e-pagercontainer {
+              margin-top: $pivotpager-touch-page-container-marging-top;
+            }
+          }
+          
+          .e-pivot-row-pager-settings,
+          .e-pivot-column-pager-settings {
+            .e-numeric {
+              margin: $pivotpager-touch-numeric-boc-margin;
+            }
+          }
+        }
+
+        &.e-pivot-pager-single-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            .e-pagercontainer {
+              margin-top: 0;
+            }
+
+            .e-pivotview-row-pagerString,
+            .e-pivotview-column-pagerString,
+            .e-pivotview-row-size,
+            .e-pivotview-column-size {
+              font-size: $pivotpager-touch-single-title-font-size;
+            }
+          }
+        }
+      }
+
+      &.e-compact-view {
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            .e-pagercontainer {
+              margin-top: 0;
+
+              @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
+                margin-top: $pivotpager-touch-page-container-marging-top;
+              }
+            }
+
+            .e-pivotview-row-pagerString,
+            .e-pivotview-column-pagerString,
+            .e-pivotview-row-size,
+            .e-pivotview-column-size {
+              font-size: $pivotpager-touch-single-title-font-size;
+            }
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            .e-pivot-row-pager-settings,
+            .e-pivot-column-pager-settings {
+              .e-numeric {
+                margin: $pivotpager-touch-numeric-boc-margin;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .e-content-placeholder.e-pivotview.e-placeholder-pivotview {