@syncfusion/ej2-navigations 32.1.19 → 32.1.24

package/styles/tailwind-dark.css

@@ -971,6 +971,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;
@@ -1089,6 +1101,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: #d1d5db;
@@ -1193,6 +1217,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;
@@ -1245,6 +1281,7 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -1348,6 +1385,7 @@
   width: 100%;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: #d1d5db;
@@ -1422,6 +1460,7 @@
   content: "";
 }
 
+/*! component's theme wise override definitions and variables */
 .e-bigger .e-vscroll:not(.e-scroll-device),
 .e-vscroll.e-bigger:not(.e-scroll-device) {
   padding: 48px 0;
@@ -1495,7 +1534,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 {
@@ -3985,6 +4027,28 @@
   position: relative;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   display: block;
   position: relative;
@@ -5818,6 +5882,28 @@
   margin-right: 20px;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   background: transparent;
   border: none;
@@ -6884,6 +6970,28 @@
   color: #d1d5db;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-bigger .e-tab .e-tab-header,
 .e-tab.e-bigger .e-tab-header {
   height: 48px;
@@ -8112,6 +8220,8 @@
   content: "\e839";
 }
 
+/*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -8559,6 +8669,8 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -8729,6 +8841,8 @@
   border: 1px solid #22d3ee;
 }
 
+/*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-treeview .e-ul,
 .e-treeview.e-bigger .e-ul {
   padding: 0 0 0 16px;
@@ -8975,7 +9089,6 @@
   font-size: 24px;
 }
 /* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */
 ejs-sidebar {
   display: none;
 }

package/styles/tailwind-dark.scss

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

package/styles/tailwind-lite.css

@@ -710,6 +710,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;
@@ -828,6 +840,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;
@@ -949,6 +973,7 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -1052,6 +1077,7 @@
   width: 100%;
 }
 
+/*! component's theme wise override definitions and variables */
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: #6b7280;
@@ -1178,7 +1204,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 {
@@ -3245,6 +3274,28 @@
   position: relative;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   display: block;
   position: relative;
@@ -5078,6 +5129,28 @@
   margin-right: 20px;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   background: transparent;
   border: none;
@@ -6171,6 +6244,8 @@
   content: "\e839";
 }
 
+/*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -6618,6 +6693,8 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -6788,7 +6865,6 @@
   border: 1px solid #4f46e5;
 }
 
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {
   display: none;

package/styles/tailwind-lite.scss

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