@syncfusion/ej2-angular-navigations 20.4.38 → 20.4.40-ngcc

package/styles/h-scroll/bootstrap-dark.css

@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -213,22 +214,34 @@
   border: 0;
   color: #fff;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #393939;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #393939;
   border: 0;
   color: #fff;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #f0f0f0;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #393939;
   border: 0;
   color: #fff;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #f0f0f0;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #2a2a2a;
   border: 0;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #f0f0f0;
+}
 .e-hscroll .e-scroll-nav {
   background: #131313;
 }

package/styles/h-scroll/bootstrap-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap-dark.scss';

package/styles/h-scroll/bootstrap.css

@@ -166,6 +166,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -214,22 +215,34 @@
   border: 0;
   color: #333;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #e6e6e6;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #e6e6e6;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #e6e6e6;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #e6e6e6;
   border: 0;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #333;
+}
 .e-hscroll .e-scroll-nav {
   background: #f8f8f8;
 }

package/styles/h-scroll/bootstrap.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap.scss';

package/styles/h-scroll/bootstrap4.css

@@ -166,6 +166,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -214,6 +215,9 @@
   border: 1px #545b62;
   color: #fff;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #5a6268;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #5a6268;
   border: 1px #545b62;
@@ -236,6 +240,9 @@
   box-shadow: none;
   color: #fff;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #333;
+}
 .e-hscroll .e-scroll-nav {
   background: #f8f8f8;
 }

package/styles/h-scroll/bootstrap4.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap4.scss';

package/styles/h-scroll/bootstrap5-dark.css

@@ -224,22 +224,34 @@
   border: 0;
   color: #adb5bd;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #495057;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #495057;
   border: 0;
   color: #adb5bd;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #adb5bd;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #495057;
   border: 0;
   color: #adb5bd;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #adb5bd;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #343a40;
   border: 0;
   box-shadow: none;
   color: #ced4da;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #adb5bd;
+}
 .e-hscroll .e-scroll-nav {
   background: #343a40;
 }

package/styles/h-scroll/bootstrap5-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap5-dark.scss';

package/styles/h-scroll/bootstrap5.css

@@ -224,22 +224,34 @@
   border: 0;
   color: #6c757d;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #dee2e6;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #dee2e6;
   border: 0;
   color: #6c757d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #6c757d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #dee2e6;
   border: 0;
   color: #6c757d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #6c757d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #e9ecef;
   border: 0;
   box-shadow: none;
   color: #495057;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #6c757d;
+}
 .e-hscroll .e-scroll-nav {
   background: #e9ecef;
 }

package/styles/h-scroll/bootstrap5.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/bootstrap5.scss';

package/styles/h-scroll/fabric-dark.css

@@ -18,11 +18,11 @@
   content: "\e904";
 }
 .e-hscroll .e-nav-left-arrow::before {
-  content: "\e829";
+  content: "\e98f";
   line-height: normal;
 }
 .e-hscroll .e-nav-right-arrow::before {
-  content: "\e830";
+  content: "\e219";
   line-height: normal;
 }
 
@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 14px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -213,22 +214,34 @@
   border: 0;
   color: #dadada;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #414040;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #414040;
   border: 0;
   color: #dadada;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #fff;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #414040;
   border: 0;
   color: #dadada;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #fff;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #514f4f;
   border: 0;
   box-shadow: none;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #fff;
+}
 .e-hscroll .e-scroll-nav {
   background: #333232;
 }

package/styles/h-scroll/fabric-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fabric-dark.scss';

package/styles/h-scroll/fabric.css

@@ -18,11 +18,11 @@
   content: "\e904";
 }
 .e-hscroll .e-nav-left-arrow::before {
-  content: "\e829";
+  content: "\e98f";
   line-height: normal;
 }
 .e-hscroll .e-nav-right-arrow::before {
-  content: "\e830";
+  content: "\e219";
   line-height: normal;
 }
 
@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 14px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -213,22 +214,34 @@
   border: 0;
   color: #333;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #f4f4f4;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #f4f4f4;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #f4f4f4;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #d1ebff;
   border: 0;
   box-shadow: none;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #333;
+}
 .e-hscroll .e-scroll-nav {
   background: #fff;
 }

package/styles/h-scroll/fabric.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fabric.scss';

package/styles/h-scroll/fluent-dark.css

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,22 +224,34 @@
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #292827;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #292827;
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #292827;
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #252423;
   border: 0;
   box-shadow: none;
   color: #c8c6c4;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll .e-scroll-nav {
   background: #252423;
 }

package/styles/h-scroll/fluent-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fluent-dark.scss';

package/styles/h-scroll/fluent.css

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,22 +224,34 @@
   border: 0;
   color: #605e5c;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #edebe9;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #edebe9;
   border: 0;
   color: #605e5c;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #605e5c;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #edebe9;
   border: 0;
   color: #605e5c;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #605e5c;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #f3f2f1;
   border: 0;
   box-shadow: none;
   color: #3b3a39;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #605e5c;
+}
 .e-hscroll .e-scroll-nav {
   background: #f3f2f1;
 }

package/styles/h-scroll/fluent.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/fluent.scss';

package/styles/h-scroll/highcontrast-light.css

@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -218,19 +219,19 @@
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #ecf;
-  border: 0;
-  color: #000;
   border: 2px solid #000;
+  color: #000;
 }
-.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover:active {
-  border: 0;
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #400074;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
-  background: #ecf;
-  border: 0;
-  color: #000;
   background: inherit;
   border: 2px solid #fff;
+  color: #000;
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #400074;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #400074;

package/styles/h-scroll/highcontrast-light.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/highcontrast-light.scss';

package/styles/h-scroll/highcontrast.css

@@ -6,10 +6,10 @@
   content: "\e913";
 }
 .e-hscroll.e-rtl .e-nav-left-arrow::before {
-  content: "\e830";
+  content: "\e98f";
 }
 .e-hscroll.e-rtl .e-nav-right-arrow::before {
-  content: "\e829";
+  content: "\e219";
 }
 .e-hscroll.e-scroll-device .e-nav-right-arrow::before {
   content: "\e913";
@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -218,19 +219,19 @@
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #685708;
-  border: 0;
-  color: #fff;
   border: 2px solid #fff;
+  color: #fff;
 }
-.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover:active {
-  border: 0;
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #fff;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
-  background: #685708;
-  border: 0;
-  color: #fff;
   background: inherit;
   border: 2px solid #fff;
+  color: #fff;
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #fff;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #ffd939;

package/styles/h-scroll/highcontrast.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/highcontrast.scss';

package/styles/h-scroll/material-dark.css

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -222,18 +223,25 @@
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
-  border-color: rgba(255, 255, 255, 0.1);
+}
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: rgba(255, 255, 255, 0.1);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: rgba(255, 255, 255, 0.54);
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
-  border-color: rgba(255, 255, 255, 0.1);
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: rgba(255, 255, 255, 0.54);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: rgba(255, 255, 255, 0.18);
@@ -241,6 +249,9 @@
   box-shadow: none;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: rgba(255, 255, 255, 0.54);
+}
 .e-hscroll .e-scroll-nav {
   background: #212121;
 }

package/styles/h-scroll/material-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material-dark.scss';

package/styles/h-scroll/material.css

@@ -176,6 +176,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,18 +224,25 @@
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.12);
+}
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: rgba(0, 0, 0, 0.12);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: rgba(0, 0, 0, 0.54);
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.12);
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: rgba(0, 0, 0, 0.54);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #bdbdbd;
@@ -242,6 +250,9 @@
   box-shadow: none;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: rgba(0, 0, 0, 0.54);
+}
 .e-hscroll .e-scroll-nav {
   background: #fafafa;
 }

package/styles/h-scroll/material.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/h-scroll/material.scss';

package/styles/h-scroll/tailwind-dark.css

@@ -225,22 +225,34 @@
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #4b5563;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #4b5563;
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #4b5563;
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #374151;
   border: 0;
   box-shadow: none;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll .e-scroll-nav {
   background: #374151;
 }