@syncfusion/ej2-navigations 33.2.15 → 34.1.30

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_bootstrap5-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_bootstrap5.3-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;

package/styles/pager/_fabric-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_fluent-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_fluent2-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 5px !default;
 $pager-border-type: solid !default;

package/styles/pager/_fusionnew-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_highcontrast-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;

package/styles/pager/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin padding-bottom-right-top-styles($bottom, $right, $top) {
   padding-bottom: $bottom;
   padding-right: $right;
@@ -757,7 +757,17 @@
             padding: 7.1px 8.6px 8.5px;
           }
         }
+        &:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+        .e-last:not(.e-disable):focus {
+          box-shadow: $pager-focus-shadow;
+        }
+      }
+
+      &:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+      .e-mlast:not(.e-disable):focus {
+        box-shadow: $pager-focus-shadow;
       }
+      
       .e-spacing {
         @if $pager-skin == 'tailwind3' {
           padding: 7.6px 11.85px 7.8px 11.8px;

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-font-size: 13px !default;
 $pager-font-line-height: 1 !default;

package/styles/pager/_material-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-font-size: 13px !default;
 $pager-font-line-height: 1 !default;

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 4px !default;
 $pager-border-type: solid !default;

package/styles/pager/_material3-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 4px !default;
 $pager-border-type: solid !default;

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_tailwind-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;

package/styles/pager/_tailwind3-definition.scss

@@ -1,8 +1,7 @@
 @use 'sass:math';
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
-$pager-numericitem-border-radius: $radius-0 !default;
+$pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;
 $pager-mobile-icon-size: 11px !default;
 $pager-icon-width: 'auto' !default;

package/styles/pager/_theme.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin color-opacity-styles($color, $opacity) {
   color: $color;
   opacity: $opacity;

package/styles/pager/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

package/styles/pager/bds.css

@@ -44,10 +44,6 @@
   content: "\e765";
 }
 
-
-
-
-
 /*! Pager layout */
 .e-pager {
   border-style: solid;
@@ -57,8 +53,6 @@
   padding: 8px;
   white-space: normal;
   width: 100%;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .e-pager [class^=e-] {
   -webkit-box-sizing: border-box;
@@ -247,12 +241,18 @@
 .e-pager .e-mnext {
   text-indent: -2px;
 }
+.e-pager {
+  /* stylelint-disable */
+}
 .e-pager .e-mfirst,
 .e-pager .e-mprev,
 .e-pager .e-mnext,
 .e-pager .e-mlast {
   -webkit-tap-highlight-color: var(--color-sf-bg-primary);
 }
+.e-pager {
+  /* stylelint-enable */
+}
 .e-pager .e-pp,
 .e-pager .e-np,
 .e-pager .e-pp:hover,
@@ -390,9 +390,6 @@
     width: calc(10% + 11px);
   }
 }
-.e-pager.e-rtl {
-  direction: rtl;
-}
 .e-pager.e-rtl .e-numericitem.e-currentitem, .e-pager.e-rtl .e-numericitem.e-currentitem:hover {
   padding: 3.5px 11px 4px 10px;
 }
@@ -401,6 +398,9 @@
   border-left-style: solid;
   border-left-width: 1px;
 }
+.e-pager.e-rtl {
+  direction: rtl;
+}
 .e-pager.e-rtl .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
 .e-pager.e-rtl .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
   margin-left: 0;
@@ -552,6 +552,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 12px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+          box-shadow: 0 0 0 0.5px var(--color-sf-border-primary) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }
@@ -560,10 +570,6 @@
   margin-left: 0;
 }
 
-
-
-
-
 /*! Pager theme */
 .e-pager {
   border-color: var(--color-sf-border-secondary);
@@ -671,10 +677,6 @@
   border-left-color: var(--color-sf-border-secondary);
 }
 
-
-
-
-
 /*! Pager bigger */
 .e-bigger .e-pager,
 .e-pager.e-bigger {

package/styles/pager/bds.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bds' as *;
 @use 'bds-definition' as *;
 @use 'icons/bds' as *;
-@use 'all.bds' as *;
-@use 'bigger.bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap-dark.css

@@ -49,8 +49,6 @@
   padding: 8px;
   white-space: normal;
   width: 100%;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .e-pager [class^=e-] {
   -webkit-box-sizing: border-box;
@@ -209,12 +207,18 @@
 .e-pager .e-mnext {
   text-indent: -2px;
 }
+.e-pager {
+  /* stylelint-disable */
+}
 .e-pager .e-mfirst,
 .e-pager .e-mprev,
 .e-pager .e-mnext,
 .e-pager .e-mlast {
   -webkit-tap-highlight-color: #1a1a1a;
 }
+.e-pager {
+  /* stylelint-enable */
+}
 .e-pager .e-pp,
 .e-pager .e-np,
 .e-pager .e-pp:hover,
@@ -489,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+          box-shadow: 0 0 0 1px rgb(36, 138.2, 255) inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/pager/bootstrap-dark.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
 @use 'bootstrap-dark-definition' as *;
 @use 'icons/bootstrap-dark' as *;
-@use 'all.bootstrap-dark' as *;
-@use 'bigger.bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap.css

@@ -49,8 +49,6 @@
   padding: 8px;
   white-space: normal;
   width: 100%;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .e-pager [class^=e-] {
   -webkit-box-sizing: border-box;
@@ -209,12 +207,18 @@
 .e-pager .e-mnext {
   text-indent: -2px;
 }
+.e-pager {
+  /* stylelint-disable */
+}
 .e-pager .e-mfirst,
 .e-pager .e-mprev,
 .e-pager .e-mnext,
 .e-pager .e-mlast {
   -webkit-tap-highlight-color: #fff;
 }
+.e-pager {
+  /* stylelint-enable */
+}
 .e-pager .e-pp,
 .e-pager .e-np,
 .e-pager .e-pp:hover,
@@ -489,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 12px;
 }

package/styles/pager/bootstrap.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
 @use 'bootstrap-definition' as *;
 @use 'icons/bootstrap' as *;
-@use 'all.bootstrap' as *;
-@use 'bigger.bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap4.css

@@ -49,8 +49,6 @@
   padding: 8px;
   white-space: normal;
   width: 100%;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .e-pager [class^=e-] {
   -webkit-box-sizing: border-box;
@@ -209,12 +207,18 @@
 .e-pager .e-mnext {
   text-indent: -2px;
 }
+.e-pager {
+  /* stylelint-disable */
+}
 .e-pager .e-mfirst,
 .e-pager .e-mprev,
 .e-pager .e-mnext,
 .e-pager .e-mlast {
   -webkit-tap-highlight-color: #fff;
 }
+.e-pager {
+  /* stylelint-enable */
+}
 .e-pager .e-pp,
 .e-pager .e-np,
 .e-pager .e-pp:hover,
@@ -489,6 +493,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 10px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #66afe9 inset;
+          box-shadow: 0 0 0 1px #66afe9 inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/pager/bootstrap4.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
 @use 'bootstrap4-definition' as *;
 @use 'icons/bootstrap4' as *;
-@use 'all.bootstrap4' as *;
-@use 'bigger.bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap5-dark.css

@@ -49,8 +49,6 @@
   padding: 7px 8px;
   white-space: normal;
   width: 100%;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .e-pager [class^=e-] {
   -webkit-box-sizing: border-box;
@@ -213,12 +211,18 @@
 .e-pager .e-mnext {
   text-indent: -2px;
 }
+.e-pager {
+  /* stylelint-disable */
+}
 .e-pager .e-mfirst,
 .e-pager .e-mprev,
 .e-pager .e-mnext,
 .e-pager .e-mlast {
   -webkit-tap-highlight-color: #212529;
 }
+.e-pager {
+  /* stylelint-enable */
+}
 .e-pager .e-pp,
 .e-pager .e-np,
 .e-pager .e-pp:hover,
@@ -350,9 +354,6 @@
     width: calc(10% + 11px);
   }
 }
-.e-pager.e-rtl {
-  direction: rtl;
-}
 .e-pager.e-rtl .e-numericitem.e-currentitem, .e-pager.e-rtl .e-numericitem.e-currentitem:hover {
   padding: 8px 10.5px 8.5px 9.5px;
 }
@@ -361,6 +362,9 @@
   border-left-style: solid;
   border-left-width: 3px;
 }
+.e-pager.e-rtl {
+  direction: rtl;
+}
 .e-pager.e-rtl .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
 .e-pager.e-rtl .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
   margin-left: 0;
@@ -496,6 +500,16 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 9px;
 }
+.e-pager.sf-pager .e-pagercontainer:has(.e-last.e-disable) .e-numericcontainer .e-link:last-child:focus,
+.e-pager.sf-pager .e-pagercontainer .e-last:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
+.e-pager.sf-pager:has(.e-mlast.e-disable) .e-mprev:not(.e-disable):focus,
+.e-pager.sf-pager .e-mlast:not(.e-disable):focus {
+  -webkit-box-shadow: 0 0 0 1px #0d6efd inset;
+          box-shadow: 0 0 0 1px #0d6efd inset;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }

package/styles/pager/bootstrap5-dark.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
 @use 'bootstrap5-dark-definition' as *;
 @use 'icons/bootstrap5-dark' as *;
-@use 'all.bootstrap5-dark' as *;
-@use 'bigger.bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;