@syncfusion/ej2-navigations 20.2.49 → 20.3.47

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $tbar-skin: 'bootstrap' !default;
 $tbar-default-bg: $grey-darker !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
@@ -69,7 +69,7 @@ $tbar-pressed-border: transparent !default;
 $tbar-btn-border: none !default;
 
 $tbar-nav-pressed-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
-$tbar-pop-box-shadow:  0 6px 12px rgba(0 , 0 , 0 , .175) !default;
+$tbar-pop-box-shadow:  0 6px 12px rgba(0, 0, 0, .175) !default;
 $tbar-pop-radius: 4px !default;
 $tbar-item-pop-bg-color: transparent !default;
 $tbar-radius: 4px !default;
@@ -122,11 +122,11 @@ $tbar-item-nrml-padding: 4px 2.5px !default;
 $tbar-item-nrml-minwidth: 30px !default;
 
 $tbar-separator-bgr-height: calc(100% - 12px) !default;
-$tbar-separator-bgr-mrgn: 6px 6px  !default;
-$tbar-separator-nrml-mrgn: 5.5px 6px  !default;
+$tbar-separator-bgr-mrgn: 6px 6px !default;
+$tbar-separator-nrml-mrgn: 5.5px 6px !default;
 $tbar-btn-bgr-padding: 1px 7px !default;
 $tbar-btn-bgr-focus-padding: 0 6px !default;
-$tbar-btn-nrml-padding: 1px 2.5px  !default;
+$tbar-btn-nrml-padding: 1px 2.5px !default;
 $tbar-icons-bgr-font-size: 14px !default;
 $tbar-multirow-items-mrgn-bigger: 15px !default;
 $tbar-multirow-items-mrgn-small: 15px !default;
@@ -139,4 +139,5 @@ $tbar-multirow-item-mrgn: 0 !default;
 @mixin tbar-btn-animation-after {
   content: '';
 }
+
 //enddefault

package/styles/toolbar/_bootstrap-definition.scss

@@ -15,13 +15,13 @@ $tbar-separator-nrml-height: calc(100% - 15px) !default;
 $tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $tbar-border-nav-type: solid !default;
 $tbar-btn-box-shadow: none !default;
-$tbar-hover-font: $hover-font-color  !default;
+$tbar-hover-font: $hover-font-color !default;
 $tbar-hover-font-color: $tbar-hover-font !default;
-$tbar-press-font: $active-font-color  !default;
+$tbar-press-font: $active-font-color !default;
 $tbar-btn-active-font-color: $tbar-press-font !default;
-$tbar-active-font-color: $active-font-color  !default;
-$tbar-default-font-overlay: $default-font-color  !default;
-$tbar-default-icon-overlay: $default-icon-color  !default;
+$tbar-active-font-color: $active-font-color !default;
+$tbar-default-font-overlay: $default-font-color !default;
+$tbar-default-icon-overlay: $default-icon-color !default;
 $tbar-select-font: $tbar-hover-font !default;
 $tbar-pressed-font: $tbar-hover-font !default;
 
@@ -64,8 +64,8 @@ $tbar-nav-focus-border: 0 !default;
 $tbar-pressed-border: transparent !default;
 $tbar-btn-border: none !default;
 
-$tbar-nav-pressed-box-shadow: inset  0 3px 5px rgba(0 , 0 , 0 , .125) !default;
-$tbar-pop-box-shadow:  0 6px 12px rgba(0 , 0 , 0 , .175) !default;
+$tbar-nav-pressed-box-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
+$tbar-pop-box-shadow:  0 6px 12px rgba(0, 0, 0, .175) !default;
 $tbar-pop-radius: 4px !default;
 $tbar-item-pop-bg-color: transparent !default;
 $tbar-radius: 4px !default;
@@ -101,7 +101,7 @@ $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-bgr-minheight: 34px !default;
 $tbar-btn-font-size: 16px !default;
 $tbar-btn-border-radius: 4px !default;
-$tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0 , 0 , 0 , .125) !default;
+$tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $tbar-btn-icon-bgr-width: 24px !default;
 $tbar-btn-icon-bgr-height: 34px !default;
 $tbar-btn-icon-bgr-line-height: 34px !default;
@@ -120,13 +120,13 @@ $tbar-item-nrml-padding: 4px 2.5px !default;
 $tbar-item-nrml-minwidth: 30px !default;
 
 $tbar-separator-bgr-height: calc(100% - 12px) !default;
-$tbar-separator-bgr-mrgn: 6px 6px  !default;
-$tbar-separator-nrml-mrgn: 5.5px 6px  !default;
-$tbar-separator-vertical-bgr-mrgn: 6px  !default;
-$tbar-separator-vertical-nrml-mrgn: 6px 5.5px  !default;
+$tbar-separator-bgr-mrgn: 6px 6px !default;
+$tbar-separator-nrml-mrgn: 5.5px 6px !default;
+$tbar-separator-vertical-bgr-mrgn: 6px !default;
+$tbar-separator-vertical-nrml-mrgn: 6px 5.5px !default;
 $tbar-btn-bgr-padding: 1px 7px !default;
 $tbar-btn-bgr-focus-padding: 0 6px !default;
-$tbar-btn-nrml-padding: 1px 2.5px  !default;
+$tbar-btn-nrml-padding: 1px 2.5px !default;
 $tbar-icons-bgr-font-size: 14px !default;
 $tbar-multirow-items-mrgn-bigger: 15px !default;
 $tbar-multirow-items-mrgn-small: 15px !default;

package/styles/toolbar/_bootstrap4-definition.scss

@@ -107,7 +107,7 @@ $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-font-size: 14px !default;
 $tbar-btn-border-radius: 4px !default;
-$tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0 , 0 , 0 , .125) !default;
+$tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $tbar-btn-icon-bgr-width: 24px !default;
 $tbar-btn-icon-bgr-height: 32px !default;
 $tbar-btn-icon-bgr-line-height: 32px !default;
@@ -125,13 +125,13 @@ $tbar-item-nrml-padding: 3px 4px !default;
 $tbar-item-nrml-minwidth: 30px !default;
 
 $tbar-separator-bgr-height: calc(100% - 12px) !default;
-$tbar-separator-bgr-mrgn: 1px 4px  !default;
-$tbar-separator-nrml-mrgn: 5.5px 6px  !default;
-$tbar-separator-vertical-bgr-mrgn: 6px  !default;
-$tbar-separator-vertical-nrml-mrgn: 6px 5.5px  !default;
+$tbar-separator-bgr-mrgn: 1px 4px !default;
+$tbar-separator-nrml-mrgn: 5.5px 6px !default;
+$tbar-separator-vertical-bgr-mrgn: 6px !default;
+$tbar-separator-vertical-nrml-mrgn: 6px 5.5px !default;
 $tbar-btn-bgr-padding: 1.5px 5.5px !default;
 $tbar-btn-bgr-focus-padding: 0 4.5px !default;
-$tbar-btn-nrml-padding: 0 3px  !default;
+$tbar-btn-nrml-padding: 0 3px !default;
 $tbar-icons-bgr-font-size: 16px !default;
 $tbar-multirow-items-mrgn-bigger: 15px !default;
 $tbar-multirow-items-mrgn-small: 15px !default;

package/styles/toolbar/_bootstrap5-definition.scss

@@ -1,5 +1,5 @@
 /*! Toolbar's bootstrap5 theme wise override definitions and variables */
-// sass-lint:disable-all
+/* stylelint-disable */
 $tbar-skin: 'bootstrap5' !default;
 
 //font definitions

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $tbar-skin: 'fabric' !default;
 $tbar-btn-bgr-line-height: 35px !default;
 $tbar-zero-value: 0 !default;
@@ -158,4 +158,5 @@ $tbar-item-nrml-padding-small: 1px 0 !default;
 @mixin tbar-btn-animation-after {
   content: '';
 }
+
 //enddefault

package/styles/toolbar/_fluent-definition.scss

@@ -120,12 +120,12 @@ $tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
 $tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
 $tbar-btn-icon-nrml-width: 12px !default;
 $tbar-btn-icon-nrml-height: 16px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 13px !default;
 $tbar-left-item-line-height: 35px !default;
 $tbar-right-item-line-height: 24px !default;
 $tbar-btn-icon-bgr-width: 13px !default;
 $tbar-btn-icon-bgr-height: 18px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 15px !default;
 $tbar-btn-txt-line-height: inherit !default;
 $tbar-nav-nrml-width: 28px !default;
 $tbar-nav-bgr-width: 36px !default;

package/styles/toolbar/_fusionnew-definition.scss

@@ -1,5 +1,5 @@
 /*! Toolbar's bootstrap5 theme wise override definitions and variables */
-// sass-lint:disable-all
+/* stylelint-disable */
 $tbar-skin: 'bootstrap5' !default;
 
 //font definitions

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $tbar-skin: 'highcontrast' !default;
 $tbar-btn-bgr-line-height: 35px !default;
 $tbar-zero-value: 0 !default;
@@ -169,4 +169,5 @@ $tbar-item-nrml-padding-small: 1px 0 !default;
 @mixin tbar-btn-animation-after {
   content: '';
 }
+
 //enddefault

package/styles/toolbar/_layout.scss

@@ -1,6 +1,7 @@
-@include export-module('toolbar-layout') {
+@include export-module('toolbar-layout') {
+
   /*! toolbar layout */
-  // sass-lint:disable no-vendor-prefixes
+  /* stylelint-disable property-no-vendor-prefix */
   .e-bigger .e-toolbar,
   .e-toolbar.e-bigger {
     height: $tbar-bgr-size;
@@ -85,12 +86,12 @@
 
           .e-toolbar-item:first-child {
             margin-left: 0;
-         }
+          }
 
           .e-toolbar-item:last-child {
             margin-left: $tbar-item-nrml-mrgn;
-         }
-      }
+          }
+        }
 
         &:not(.e-tbar-pos) {
 
@@ -98,7 +99,7 @@
             margin-left: 0;
             margin-right: $tbar-item-bgr-mrgn;
           }
-      }
+        }
       }
     }
 
@@ -144,7 +145,7 @@
         &:not(.e-separator) {
           min-width: 48px;
           padding: $tbar-item-pop-bgr-padding;
-          }
+        }
 
         .e-tbar-btn .e-icons.e-btn-icon {
           min-width: $tbar-btn-icon-bgr-width;
@@ -186,7 +187,6 @@
       min-height: $tbar-bgr-items-size;
 
       &.e-toolbar-multirow {
-
         margin-left: $tbar-multirow-items-mrgn-bigger;
         margin-right: $tbar-multirow-items-mrgn-bigger;
         white-space: normal;
@@ -205,7 +205,6 @@
         .e-toolbar-item.e-separator {
           display: inline-flex;
         }
-
       }
 
       &.e-toolbar-multirow:not(.e-tbar-pos) {
@@ -217,7 +216,6 @@
         .e-toolbar-item:last-child {
           margin-right: $tbar-multirow-item-mrgn;
         }
-
       }
 
       .e-hscroll-bar .e-hscroll-content {
@@ -250,7 +248,7 @@
 
         .e-toolbar-item:first-child {
           margin-left: $tbar-item-bgr-mrgn;
-          }
+        }
       }
 
       .e-toolbar-item {
@@ -320,14 +318,13 @@
           .e-tbar-btn-text {
             padding: $btn-txt-bgr-padding;
           }
-         }
-       }
-     }
+        }
+      }
+    }
 
     &.e-extended-toolbar {
 
       .e-toolbar-extended {
-
         min-height: $tbar-bgr-size;
         padding-bottom: 0;
         padding-left: $tbar-item-bgr-mrgn;
@@ -337,7 +334,6 @@
         @if $tbar-skin != 'material' {
           margin-left: -1px;
         }
-
       }
 
       .e-toolbar-extended.e-popup-close {
@@ -362,7 +358,6 @@
           @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
             margin: $tbar-item-bgr-padding-bigger;
           }
-
           min-width: $tbar-bgr-item-size;
           @if ($tbar-skin != 'FluentUI') {
             padding: $tbar-item-bgr-padding;
@@ -405,7 +400,6 @@
               &:active {
                 padding: 0 6px;
               }
-
             }
             @if $tbar-skin == 'bootstrap4' {
               &:hover,
@@ -419,7 +413,6 @@
           .e-tbar-btn.e-btn {
             line-height: $tbar-btn-bgr-line-height;
           }
-
         }
 
         .e-toolbar-item.e-separator {
@@ -433,7 +426,6 @@
           min-height: $tbar-btn-icon-bgr-height;
           min-width: $tbar-btn-icon-bgr-width;
         }
-
       }
     }
 
@@ -445,12 +437,10 @@
       }
 
       .e-toolbar-extended {
-
         padding-right: $tbar-item-bgr-mrgn;
         @if $tbar-skin != 'material'  {
           margin-left: 0;
         }
-
       }
     }
 
@@ -500,7 +490,6 @@
     height: $tbar-nrml-size;
     min-height: $tbar-nrml-size;
     position: relative;
-    touch-action: none;
     user-select: none;
     white-space: nowrap;
 
@@ -527,9 +516,7 @@
         .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
           padding-left: 0;
         }
-
       }
-
     }
 
     &.e-extended-toolbar {
@@ -537,10 +524,9 @@
       .e-toolbar-items .e-toolbar-item {
 
         &.e-popup-text .e-tbar-btn-text {
-          display:  none;
+          display: none;
         }
-
-     }
+      }
 
       &.e-extended-toolbar.e-tbar-extended {
         border-bottom: 0;
@@ -569,7 +555,6 @@
         .e-toolbar-item.e-toolbar-text .e-tbar-btn-text {
           display: none;
         }
-
       }
 
       .e-toolbar-extended.e-popup-close {
@@ -594,7 +579,6 @@
           @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
             margin: $tbar-item-nrml-padding-small;
           }
-
           height: 100%;
           min-width: $tbar-item-nrml-minwidth;
           @if ($tbar-skin != 'FluentUI') {
@@ -652,9 +636,7 @@
                 padding: 0 1.5px;
               }
             }
-
           }
-
         }
 
         .e-toolbar-item.e-separator {
@@ -675,7 +657,6 @@
             padding: 5px 6px;
           }
         }
-
       }
 
       .e-toolbar-items {
@@ -683,7 +664,6 @@
         .e-toolbar-item.e-separator:last-of-type {
           display: inline-flex;
         }
-
       }
 
       .e-toolbar-pop.e-toolbar-extended {
@@ -710,23 +690,20 @@
             text-decoration: none;
             text-transform: none;
           }
-
         }
 
         .e-tbar-btn:first-child {
           display: inline-block;
         }
 
-        .e-toolbar-item  > * {
+        .e-toolbar-item > * {
           align-self: center;
           text-overflow: ellipsis;
         }
-
       }
-
     }
 
-    &.e-control[class*='e-toolbar'] {
+    &.e-control[class *= 'e-toolbar'] {
       box-sizing: content-box;
     }
 
@@ -735,11 +712,10 @@
       .e-toolbar-items .e-toolbar-item {
 
         &.e-popup-text .e-tbar-btn-text {
-          display:  none;
-     }
-
+          display: none;
+        }
+      }
     }
-   }
 
     &,
     .e-toolbar-items .e-toolbar-item {
@@ -747,11 +723,11 @@
       .e-tbar-btn-text {
         display: inline-block;
         padding: $btn-txt-nrml-padding;
-     }
+      }
 
       &.e-hidden {
         display: none;
-     }
+      }
     }
 
     &.e-corner {
@@ -764,14 +740,12 @@
       padding: $tbar-popup-padding;
       position: absolute;
 
-
       &.e-toolbar-extended {
 
         .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
           margin: 0;
           width: auto;
         }
-
       }
 
       .e-toolbar-item  {
@@ -825,7 +799,7 @@
           .e-icons.e-btn-icon {
             min-width: 100%;
           }
-      }
+        }
       }
 
       .e-toolbar-item {
@@ -848,9 +822,8 @@
 
       .e-toolpopup {
         text-align: center;
-       }
-
       }
+    }
 
     .e-toolbar-popup {
       text-align: center;
@@ -862,16 +835,16 @@
 
         .e-toolbar-center .e-toolbar-item {
           margin: 0;
-          }
+        }
 
         .e-toolbar-right .e-toolbar-item:last-child {
           margin: 0;
           margin-left: $tbar-item-nrml-mrgn;
-         }
+        }
 
         .e-toolbar-right .e-toolbar-item {
           margin: 0;
-         }
+        }
       }
     }
 
@@ -916,11 +889,11 @@
 
           .e-toolbar-item:first-child {
             margin-left: 0;
-            }
+          }
 
           .e-toolbar-item:last-child {
             margin-left: $tbar-item-nrml-mrgn;
-            }
+          }
         }
 
         &:not(.e-tbar-pos) {
@@ -1010,7 +983,7 @@
 
     .e-hor-nav {
       align-items: center;
-      border-radius: 0 $tbar-radius $tbar-radius 0 ;
+      border-radius: 0 $tbar-radius $tbar-radius 0;
       cursor: pointer;
       display: flex;
       height: 100%;
@@ -1023,8 +996,8 @@
 
       &.e-ie-align {
         display: table;
-        }
       }
+    }
 
     .e-popup-down-icon.e-icons,
     .e-popup-up-icon.e-icons {
@@ -1052,7 +1025,7 @@
     }
 
     .e-toolbar-items {
-      border-radius:  $tbar-radius 0 0 $tbar-radius;
+      border-radius: $tbar-radius 0 0 $tbar-radius;
       display: inline-block;
       height: 100%;
       min-height: $tbar-nrml-items-size;
@@ -1078,7 +1051,6 @@
         .e-toolbar-item.e-separator {
           display: inline-flex;
         }
-
       }
 
       &.e-multirow-pos {
@@ -1099,7 +1071,6 @@
         .e-toolbar-item:last-child {
           margin-right: $tbar-multirow-item-mrgn;
         }
-
       }
 
       &.e-tbar-pos {
@@ -1111,7 +1082,7 @@
           display: table;
           height: 100%;
           top: 0;
-       }
+        }
 
         .e-toolbar-right,
         .e-toolbar-left {
@@ -1136,7 +1107,7 @@
       .e-toolbar-center,
       .e-toolbar-right {
         display: inline-block;
-        }
+      }
 
       .e-toolbar-left {
 
@@ -1155,7 +1126,7 @@
 
           .e-toolbar-item:first-child {
             margin-left: 0;
-        }
+          }
         }
       }
 
@@ -1167,17 +1138,17 @@
 
             .e-toolbar-item:last-child {
               margin-right: 0;
-              }
+            }
 
             .e-toolbar-item:first-child {
               margin-left: $tbar-item-nrml-mrgn;
-              }
+            }
           }
 
           .e-toolbar-center {
             .e-toolbar-item:last-child {
               margin-right: 0;
-          }
+            }
           }
 
           .e-toolbar-right {
@@ -1202,10 +1173,11 @@
         > .e-toolbar-item:last-child,
         > .e-toolbar-right .e-toolbar-item:last-child {
           margin-right: $tbar-item-nrml-mrgn;
-     }
-    }
+        }
+      }
 
       .e-hscroll-bar .e-hscroll-content {
+        touch-action: pan-y pinch-zoom;
 
         > .e-toolbar-item:last-child {
           margin-right: $tbar-item-nrml-mrgn;
@@ -1247,7 +1219,7 @@
           min-width: 1px;
         }
 
-        input[type='checkbox'] {
+        input[type = 'checkbox'] {
           height: auto;
         }
 
@@ -1324,7 +1296,7 @@
               padding-bottom: 4px;
             }
           }
-         }
+        }
 
         > * {
           align-self: center;
@@ -1342,14 +1314,14 @@
           &:last-of-type,
           &:first-of-type {
             display: none;
-         }
           }
         }
+      }
     }
 
-    .e-tbar-btn  > :first-child {
+    .e-tbar-btn > :first-child {
       display: inline-block;
-      }
+    }
 
     .e-tbar-btn {
       border: $tbar-btn-border;
@@ -1379,7 +1351,7 @@
         line-height: inherit;
         vertical-align: middle;
         width: auto;
-       }
+      }
     }
 
     &.e-vertical {
@@ -1401,6 +1373,10 @@
 
       .e-toolbar-items {
 
+        .e-vscroll-bar .e-vscroll-content {
+          touch-action: pan-x pinch-zoom;
+        }
+
         &.e-tbar-pos {
 
           .e-toolbar-left,