@syncfusion/ej2-navigations 32.1.19 → 32.1.24

package/styles/h-scroll/tailwind.css

@@ -49,6 +49,18 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 /*! h-scroll layout */
 .e-hscroll {
   display: block;
@@ -167,6 +179,18 @@
   pointer-events: none;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 /*! h-scroll theme */
 .e-hscroll .e-scroll-nav .e-icons {
   color: #6b7280;
@@ -271,6 +295,18 @@
   visibility: visible;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 .e-bigger .e-hscroll,
 .e-hscroll.e-bigger {
   min-height: 48px;

package/styles/h-scroll/tailwind.scss

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

package/styles/h-scroll/tailwind3.css

@@ -123,6 +123,92 @@
   line-height: normal;
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 /*! h-scroll layout */
 .e-hscroll {
   display: block;
@@ -241,6 +327,92 @@
   pointer-events: none;
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 /*! h-scroll theme */
 .e-hscroll .e-scroll-nav .e-icons {
   color: var(--color-sf-secondary-text-color);
@@ -265,12 +437,12 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-secondary-bg-color-disabled), 1)), to(rgba(var(--color-sf-secondary-bg-color-disabled), 0)));
-  background-image: linear-gradient(-270deg, rgba(var(--color-sf-secondary-bg-color-disabled), 1) 0%, rgba(var(--color-sf-secondary-bg-color-disabled), 0) 100%);
+  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-sf-secondary-bg-color-disabled)), to(transparent));
+  background-image: linear-gradient(-270deg, var(--color-sf-secondary-bg-color-disabled) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-secondary-bg-color-disabled), 0)), to(rgba(var(--color-sf-secondary-bg-color-disabled), 1)));
-  background-image: linear-gradient(-270deg, rgba(var(--color-sf-secondary-bg-color-disabled), 0) 0%, rgba(var(--color-sf-secondary-bg-color-disabled), 1) 100%);
+  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--color-sf-secondary-bg-color-disabled)));
+  background-image: linear-gradient(-270deg, transparent 0%, var(--color-sf-secondary-bg-color-disabled) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
   background: var(--color-sf-content-bg-color-alt1);
@@ -345,6 +517,92 @@
   visibility: visible;
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 .e-bigger .e-hscroll,
 .e-hscroll.e-bigger {
   min-height: 56px;

package/styles/h-scroll/tailwind3.scss

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

package/styles/highcontrast-light-lite.css

@@ -1085,7 +1085,10 @@
 .e-toolbar.e-hidden {
   display: none;
 }
-.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) > * {
+  pointer-events: none;
+}
+.e-toolbar.e-overlay.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-toolbar-item > * {
   pointer-events: none;
 }
 .e-toolbar .e-toolbar-items {
@@ -6015,6 +6018,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -6452,6 +6456,7 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -6624,7 +6629,6 @@
   border-left-color: transparent;
 }
 
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {
   display: none;

package/styles/highcontrast-light-lite.scss

@@ -1,47 +1,47 @@
 @use 'ej2-base/styles/definition/highcontrast-light' as *;
 @use 'pager/highcontrast-light-definition' as *;
 @use 'pager/icons/highcontrast-light' as *;
-@use 'pager/all' as *;
+@use 'pager/all.highcontrast-light' as *;
 @use 'h-scroll/highcontrast-light-definition' as *;
 @use 'h-scroll/icons/highcontrast-light' as *;
-@use 'h-scroll/all' as *;
+@use 'h-scroll/all.highcontrast-light' as *;
 @use 'v-scroll/highcontrast-light-definition' as *;
 @use 'v-scroll/icons/highcontrast-light' as *;
-@use 'v-scroll/all' as *;
+@use 'v-scroll/all.highcontrast-light' as *;
 @use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
 @use 'toolbar/highcontrast-light-definition' as *;
 @use 'toolbar/icons/highcontrast-light' as *;
-@use 'toolbar/all' as *;
+@use 'toolbar/all.highcontrast-light' as *;
 @use 'accordion/highcontrast-light-definition' as *;
 @use 'accordion/icons/highcontrast-light' as *;
-@use 'accordion/all' as *;
+@use 'accordion/all.highcontrast-light' as *;
 @use 'carousel/highcontrast-light-definition' as *;
 @use 'carousel/icons/highcontrast-light' as *;
-@use 'carousel/all' as *;
+@use 'carousel/all.highcontrast-light' as *;
 
 @use 'context-menu/highcontrast-light-definition' as *;
 @use 'context-menu/icons/highcontrast-light' as *;
-@use 'context-menu/all' as *;
+@use 'context-menu/all.highcontrast-light' as *;
 @use 'tab/highcontrast-light-definition' as *;
 @use 'tab/icons/highcontrast-light' as *;
-@use 'tab/all' as *;
+@use 'tab/all.highcontrast-light' as *;
 @use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
 @use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
 @use 'treeview/highcontrast-light-definition' as *;
 @use 'treeview/icons/highcontrast-light' as *;
-@use 'treeview/all' as *;
+@use 'treeview/all.highcontrast-light' as *;
 @use 'sidebar/highcontrast-light-definition' as *;
-@use 'sidebar/all' as *;
+@use 'sidebar/all.highcontrast-light' as *;
 @use 'menu/highcontrast-light-definition' as *;
 @use 'menu/icons/highcontrast-light' as *;
-@use 'menu/all' as *;
+@use 'menu/all.highcontrast-light' as *;
 @use 'breadcrumb/highcontrast-light-definition' as *;
 @use 'breadcrumb/icons/highcontrast-light' as *;
-@use 'breadcrumb/all' as *;
+@use 'breadcrumb/all.highcontrast-light' as *;
 @use 'appbar/highcontrast-light-definition' as *;
-@use 'appbar/all' as *;
+@use 'appbar/all.highcontrast-light' as *;
 @use 'ej2-popups/styles/tooltip/highcontrast-light-definition' as *;
 @use 'stepper/highcontrast-light-definition' as *;
 @use 'stepper/icons/highcontrast-light' as *;
-@use 'stepper/all' as *;
+@use 'stepper/all.highcontrast-light' as *;

package/styles/highcontrast-light.css

@@ -1348,7 +1348,10 @@
 .e-toolbar.e-hidden {
   display: none;
 }
-.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) > * {
+  pointer-events: none;
+}
+.e-toolbar.e-overlay.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-toolbar-item > * {
   pointer-events: none;
 }
 .e-toolbar .e-toolbar-items {
@@ -7901,6 +7904,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -8338,6 +8342,7 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -8510,6 +8515,7 @@
   border-left-color: transparent;
 }
 
+/* stylelint-disable */
 .e-bigger .e-treeview .e-navigable .e-list-text,
 .e-treeview.e-bigger .e-navigable .e-list-text {
   padding: 0;
@@ -8661,7 +8667,6 @@
   font-size: 12px;
 }
 /* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */
 ejs-sidebar {
   display: none;
 }

package/styles/highcontrast-light.scss

@@ -1,59 +1,59 @@
 @use 'ej2-base/styles/definition/highcontrast-light' as *;
 @use 'pager/highcontrast-light-definition' as *;
 @use 'pager/icons/highcontrast-light' as *;
-@use 'pager/all' as *;
-@use 'pager/bigger' as *;
+@use 'pager/all.highcontrast-light' as *;
+@use 'pager/bigger.highcontrast-light' as *;
 @use 'h-scroll/highcontrast-light-definition' as *;
 @use 'h-scroll/icons/highcontrast-light' as *;
-@use 'h-scroll/all' as *;
-@use 'h-scroll/bigger' as *;
+@use 'h-scroll/all.highcontrast-light' as *;
+@use 'h-scroll/bigger.highcontrast-light' as *;
 @use 'v-scroll/highcontrast-light-definition' as *;
 @use 'v-scroll/icons/highcontrast-light' as *;
-@use 'v-scroll/all' as *;
-@use 'v-scroll/bigger' as *;
+@use 'v-scroll/all.highcontrast-light' as *;
+@use 'v-scroll/bigger.highcontrast-light' as *;
 @use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
 @use 'toolbar/highcontrast-light-definition' as *;
 @use 'toolbar/icons/highcontrast-light' as *;
-@use 'toolbar/all' as *;
-@use 'toolbar/bigger' as *;
+@use 'toolbar/all.highcontrast-light' as *;
+@use 'toolbar/bigger.highcontrast-light' as *;
 @use 'accordion/highcontrast-light-definition' as *;
 @use 'accordion/icons/highcontrast-light' as *;
-@use 'accordion/all' as *;
-@use 'accordion/bigger' as *;
+@use 'accordion/all.highcontrast-light' as *;
+@use 'accordion/bigger.highcontrast-light' as *;
 @use 'carousel/highcontrast-light-definition' as *;
 @use 'carousel/icons/highcontrast-light' as *;
-@use 'carousel/all' as *;
+@use 'carousel/all.highcontrast-light' as *;
 
 @use 'context-menu/highcontrast-light-definition' as *;
 @use 'context-menu/icons/highcontrast-light' as *;
-@use 'context-menu/all' as *;
-@use 'context-menu/bigger' as *;
+@use 'context-menu/all.highcontrast-light' as *;
+@use 'context-menu/bigger.highcontrast-light' as *;
 @use 'tab/highcontrast-light-definition' as *;
 @use 'tab/icons/highcontrast-light' as *;
-@use 'tab/all' as *;
-@use 'tab/bigger' as *;
+@use 'tab/all.highcontrast-light' as *;
+@use 'tab/bigger.highcontrast-light' as *;
 @use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
 @use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
 @use 'treeview/highcontrast-light-definition' as *;
 @use 'treeview/icons/highcontrast-light' as *;
-@use 'treeview/all' as *;
-@use 'treeview/bigger' as *;
+@use 'treeview/all.highcontrast-light' as *;
+@use 'treeview/bigger.highcontrast-light' as *;
 @use 'sidebar/highcontrast-light-definition' as *;
-@use 'sidebar/all' as *;
+@use 'sidebar/all.highcontrast-light' as *;
 @use 'menu/highcontrast-light-definition' as *;
 @use 'menu/icons/highcontrast-light' as *;
-@use 'menu/all' as *;
-@use 'menu/bigger' as *;
+@use 'menu/all.highcontrast-light' as *;
+@use 'menu/bigger.highcontrast-light' as *;
 @use 'breadcrumb/highcontrast-light-definition' as *;
 @use 'breadcrumb/icons/highcontrast-light' as *;
-@use 'breadcrumb/all' as *;
-@use 'breadcrumb/bigger' as *;
+@use 'breadcrumb/all.highcontrast-light' as *;
+@use 'breadcrumb/bigger.highcontrast-light' as *;
 @use 'appbar/highcontrast-light-definition' as *;
-@use 'appbar/all' as *;
-@use 'appbar/bigger' as *;
+@use 'appbar/all.highcontrast-light' as *;
+@use 'appbar/bigger.highcontrast-light' as *;
 @use 'ej2-popups/styles/tooltip/highcontrast-light-definition' as *;
 @use 'stepper/highcontrast-light-definition' as *;
 @use 'stepper/icons/highcontrast-light' as *;
-@use 'stepper/all' as *;
-@use 'stepper/bigger' as *;
+@use 'stepper/all.highcontrast-light' as *;
+@use 'stepper/bigger.highcontrast-light' as *;

package/styles/highcontrast-lite.css

@@ -858,6 +858,7 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -961,6 +962,7 @@
   width: 100%;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: #ffd939;
@@ -1086,7 +1088,10 @@
 .e-toolbar.e-hidden {
   display: none;
 }
-.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) > * {
+  pointer-events: none;
+}
+.e-toolbar.e-overlay.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-toolbar-item > * {
   pointer-events: none;
 }
 .e-toolbar .e-toolbar-items {
@@ -6023,6 +6028,8 @@
   content: "\e22a";
 }
 
+/*! TreeView's high contrast theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -6464,6 +6471,8 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/*! TreeView's high contrast theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -6664,7 +6673,6 @@
   border-left-color: transparent;
 }
 
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {
   display: none;