@syncfusion/ej2-navigations 23.2.7 → 24.1.46

package/styles/material3.scss

@@ -13,3 +13,4 @@
 @import 'menu/material3.scss';
 @import 'breadcrumb/material3.scss';
 @import 'appbar/material3.scss';
+@import 'stepper/material3.scss';

package/styles/pager/_bootstrap-dark-definition.scss

@@ -133,3 +133,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px lighten($brand-primary, 10%) inset !default;
 $pager-focus-shadow: 0 0 0 1px lighten($brand-primary, 10%) inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: -1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 5px !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: 1px !default;
+$pager-rtl-adaptive-dropdown-margin: 7px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

package/styles/pager/_bootstrap-definition.scss

@@ -133,3 +133,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $input-border-focus inset !default;
 $pager-focus-shadow: 0 0 0 1px $input-border-focus inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: -1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 5px !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 3px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: 1px !default;
+$pager-rtl-adaptive-dropdown-margin: 7px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

package/styles/pager/_bootstrap4-definition.scss

@@ -133,3 +133,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px #66afe9 inset !default;
 $pager-focus-shadow: 0 0 0 1px #66afe9 inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: 0 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 6px !default;
+$pager-rtl-adaptive-constant-top: 1px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 4px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-pager-padding: 7px !default;
+$pager-adaptive-pagermsgbar-margin-top: -3px !default;
+$pager-adaptive-dropdown-margin: 6px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-rtl-adaptive-dropdown-margin: 7px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 15px !default;

package/styles/pager/_bootstrap5-definition.scss

@@ -148,3 +148,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-bigger-adaptive-dropdown-margin: -3px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 6px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -6px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;

package/styles/pager/_fabric-dark-definition.scss

@@ -133,3 +133,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $neutral-secondary inset !default;
 $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 7px !default;
+$pager-adaptive-pagermsgbar-margin-top: -6px !default;
+$pager-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;

package/styles/pager/_fabric-definition.scss

@@ -131,3 +131,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $neutral-secondary inset !default;
 $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 7px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 4px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;

package/styles/pager/_fluent-definition.scss

@@ -135,3 +135,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-bigger-adaptive-dropdown-margin: -4px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 4px !default;
+$pager-rtl-adaptive-constant-top: 4px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 9px !default;
+$pager-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 6px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 10px !default;

package/styles/pager/_fusionnew-definition.scss

@@ -148,3 +148,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: -2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 4px !default;
+$pager-rtl-adaptive-constant-top: 4px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-adaptive-dropdown-margin: -2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -12px !default;
+$pager-rtl-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 6px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 10px !default;

package/styles/pager/_highcontrast-definition.scss

@@ -131,3 +131,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $border-default inset !default;
 $pager-focus-shadow: 0 0 0 1px $border-default inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: -2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 4px !default;
+$pager-rtl-adaptive-constant-top: 4px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-adaptive-dropdown-margin: 0 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 10px !default;

package/styles/pager/_highcontrast-light-definition.scss

@@ -133,3 +133,19 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $border-default inset !default;
 $pager-focus-shadow: 0 0 0 1px $border-default inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: -2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 4px !default;
+$pager-rtl-adaptive-constant-top: 4px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-adaptive-dropdown-margin: -2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 10px !default;

package/styles/pager/_layout.scss

@@ -269,6 +269,31 @@
     .e-np:hover {
       font-size: $pager-bigger-tripledot-font-size;
     }
+    &.e-adaptive {
+      div.e-parentmsgbar {
+        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
+      }
+      .e-pagerdropdown {
+        margin: $pager-bigger-adaptive-dropdown-margin;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-bigger-adaptive-constant-pagesizeall-top;
+      }
+    }
+
+    &.e-rtl {
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
+        }
+        div.e-pagerdropdown {
+          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
+        }
+      }
+    }
   }
 
   .e-bigger .e-responsive  #{&}.e-pager,
@@ -595,6 +620,64 @@
         padding: $pager-focus-tripledot-padding;
       }
     }
+    
+    &.e-adaptive {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $pager-bigger-adaptive-pager-padding;
+
+      div.e-parentmsgbar {
+        margin: 0 5px;
+        margin-top: $pager-adaptive-pagermsgbar-margin-top;
+        flex-grow: 1;
+        min-width: 10px;
+        white-space: nowrap;
+      }
+      .e-pagesizes {
+        display: inline-flex;
+        width: auto;
+      }
+      .e-pagerdropdown {
+        margin: $pager-adaptive-dropdown-margin;
+        width: $pager-bigger-adaptive-dropdown-min-width;
+        min-width: $pager-bigger-adaptive-dropdown-min-width;
+        order: 2;
+        height: 40px;
+        padding-right: 5px;
+      }
+      .e-pagerconstant {
+        font-size: 12px;
+        position: relative;
+        top: $pager-bigger-adaptive-constant-top;
+        order: 1;
+        min-width: 52px;
+        @if $pager-skin == 'tailwind' {
+          max-height: 42px;
+        }
+        @else {
+          max-height: 34px;
+        }
+        margin: 0 8px 0 10px;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-adaptive-constant-pagesizeall-top;
+        text-align: center;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        padding: 1% 2%;
+        width: 5%;
+      }
+
+      .e-mfirst,
+      .e-mlast {
+        width: calc(5% + 11px);
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -862,6 +945,37 @@
         }
       }
 
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin: 0 5px;
+          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
+          padding-top: 0;
+        }
+        div.e-pagerconstant {
+          margin: $pager-rtl-adaptive-constant-top;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-adaptive-constant-pagesizeall-top;
+        }
+        div.e-pagerdropdown {
+          min-width: 92px;
+          margin: $pager-rtl-adaptive-dropdown-margin;
+          padding: 0 0 0 5px;
+        }
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          padding: 1% 2%;
+          width: 5%;
+        }
+
+        .e-mfirst,
+        .e-mlast {
+          width: calc(5% + 11px);
+        }
+      }
+
       @media (max-width: 769px) {
         .e-mfirst,
         .e-mprev,

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

@@ -134,3 +134,19 @@ $pager-focus-tripledot-padding: 2.5px 0 9px !default;
 $pager-focus-tripledot-line-height: 14px !default;
 $pager-focus-active-box-shadow: none !default;
 $pager-focus-shadow: 0 0 0 1px rgba($grey-white, .5) inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 9px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 6px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 8px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

package/styles/pager/_material-definition.scss

@@ -132,3 +132,19 @@ $pager-focus-tripledot-padding: 2.5px 0 9px !default;
 $pager-focus-tripledot-line-height: 14px !default;
 $pager-focus-active-box-shadow: none !default;
 $pager-focus-shadow: 0 0 0 1px $grey-500 inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 9px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 6px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 8px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

package/styles/pager/_material3-definition.scss

@@ -148,3 +148,19 @@ $pager-focus-tripledot-padding: 8px 9.5px 8px 9.5px !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px rgba($primary) inset !default;
 $pager-focus-shadow: 0 0 0 1px rgba($primary) inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 10px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 3px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -7px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

package/styles/pager/_tailwind-definition.scss

@@ -134,3 +134,19 @@ $pager-focus-tripledot-padding: 4.5px 8.7px 7px 8.7px !default;
 $pager-focus-tripledot-line-height: 18px !default;
 $pager-focus-active-box-shadow: none !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: 0 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 90px !default;
+$pager-bigger-adaptive-constant-top: 2px !default;
+$pager-rtl-adaptive-constant-top: -1px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 12px !default;

package/styles/pager/bootstrap-dark.css

@@ -193,6 +193,30 @@
 .e-pager.e-bigger .e-np:hover {
   font-size: 16px;
 }
+.e-bigger .e-pager.e-adaptive div.e-parentmsgbar,
+.e-pager.e-bigger.e-adaptive div.e-parentmsgbar {
+  margin-top: 2px;
+}
+.e-bigger .e-pager.e-adaptive .e-pagerdropdown,
+.e-pager.e-bigger.e-adaptive .e-pagerdropdown {
+  margin: -1px 2px 0 4px;
+}
+.e-bigger .e-pager.e-adaptive .e-pagerconstant.e-page-all,
+.e-pager.e-bigger.e-adaptive .e-pagerconstant.e-page-all {
+  top: 12px;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar {
+  margin-top: 5px;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown {
+  margin: 3px 4px 0 2px;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all {
+  top: 14px;
+}
 
 .e-pager {
   border-style: solid;
@@ -377,6 +401,62 @@
   line-height: 1;
   padding: 8px 11px 9px;
 }
+.e-pager.e-adaptive {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  padding: 6px;
+}
+.e-pager.e-adaptive div.e-parentmsgbar {
+  margin: 0 5px;
+  margin-top: -4px;
+  -ms-flex-positive: 1;
+      flex-grow: 1;
+  min-width: 10px;
+  white-space: nowrap;
+}
+.e-pager.e-adaptive .e-pagesizes {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: auto;
+}
+.e-pager.e-adaptive .e-pagerdropdown {
+  margin: 1px 2px 0 4px;
+  width: 77px;
+  min-width: 77px;
+  -ms-flex-order: 2;
+      order: 2;
+  height: 40px;
+  padding-right: 5px;
+}
+.e-pager.e-adaptive .e-pagerconstant {
+  font-size: 12px;
+  position: relative;
+  top: 8px;
+  -ms-flex-order: 1;
+      order: 1;
+  min-width: 52px;
+  max-height: 34px;
+  margin: 0 8px 0 10px;
+}
+.e-pager.e-adaptive .e-pagerconstant.e-page-all {
+  top: 14px;
+  text-align: center;
+}
+.e-pager.e-adaptive .e-mfirst,
+.e-pager.e-adaptive .e-mprev,
+.e-pager.e-adaptive .e-mnext,
+.e-pager.e-adaptive .e-mlast {
+  padding: 1% 2%;
+  width: 5%;
+}
+.e-pager.e-adaptive .e-mfirst,
+.e-pager.e-adaptive .e-mlast {
+  width: calc(5% + 11px);
+}
 @media (max-width: 769px) {
   .e-pager {
     padding: 13px 0;
@@ -517,6 +597,33 @@
   margin-top: 2px;
   padding: 8px 11px 9px 11px;
 }
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar {
+  margin: 0 5px;
+  margin-top: 1px;
+  padding-top: 0;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant {
+  margin: 2px 10px 0 8px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all {
+  top: 15px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown {
+  min-width: 92px;
+  margin: 7px 4px 0 2px;
+  padding: 0 0 0 5px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mfirst,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mprev,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mnext,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mlast {
+  padding: 1% 2%;
+  width: 5%;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mfirst,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mlast {
+  width: calc(5% + 11px);
+}
 @media (max-width: 769px) {
   .e-pager.e-rtl .e-mfirst,
   .e-pager.e-rtl .e-mprev,