@syncfusion/ej2-inputs 25.2.5 → 26.1.35

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

@@ -153,7 +153,7 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAI
 // dummy variable declaration to avoid compilation issue in SASS
 $slider-handle-mobile-height: none !default;
 $slider-handle-mobile-width: none !default;
-$slider-button-hleft-bg-image: none !default;
-$slider-button-hright-bg-image: none !default;
+$slider-button-hleft-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////+/v7////////+/v7+/v7////////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///8G+5iqAAAAL3RSTlMABAgMEBQYHCAkKDA0ODxETFRYYGRsdHyAh4uTm6Onr7O/w8fL09ff4+fr7/P3+/6nVicAAADJSURBVHgBldJHdoNgAANhQUjvPTHuxbgAuv/t/J5O8I82Wn27UfGaVmjvBwvsdmEDUH33JuBxYwNQ/48m4LWzAbie2QR8nkzA/coGoPodTMDzzgagae1ykHAASDgAJBwAEk4xSDgAJBwAEg4ACacYJBwAEg4ACYeAjyMEaqYQSC97CFT/DQxID2sIpK8zBLqZQyC9dRDoajIyID1tIVD10zMg3S0ZSF4IJC8GkhcDyQuB5MVA8kIgeTGQvBhIXggkLwaSFwLJK3cBRvanB71ijlkAAAAASUVORK5CYII=');
+$slider-button-hright-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////////+/v7+/v7+/v7////////+/v7////+/v7+/v7+/v7+/v7+/v7////////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///9VYKa9AAAAL3RSTlMABAgMEBQYHCAoLDQ4PEBMUFhcZGx0eICDi5Obn6ers7vDx8vP19vf4+fr7/P3++LF0fAAAADNSURBVHgBldNHbsNAGEPhkZSi9F4S915k6d3/dga8Jgjw7bkYzPeXS5ObkkX3EQ5gcRcO6H/qbACbp3AAo6twwOEtHMCsDQecvqpsAKuHcMDw12QD2L2EA/C8EFleiCwvRJYXIssLmeGFzPBCZnghM7yQGV7IDC9Eglc26D6zwfS2JIP9a/To4b8pyWD9GH1c/11FNOZthO/4nvEeX5dksH2OTnT4rUsyWN4Xk4cj8nBEHo7IwxF5OCIPR+ThiDwckYcj8nBEHo5Iw5GdAVm8p9sPUXNKAAAAAElFTkSuQmCC');
 $slider-button-vdown-bg-image:  none !default;
 $slider-button-vup-bg-image:  none !default;

package/styles/slider/_material-definition.scss

@@ -148,7 +148,7 @@ $slider-tick-font-color: $grey-light-font !default;
 // dummy variable declaration to avoid compilation issue in SASS
 $slider-handle-mobile-height: none !default;
 $slider-handle-mobile-width: none !default;
-$slider-button-hleft-bg-image: none !default;
-$slider-button-hright-bg-image: none !default;
-$slider-button-vdown-bg-image:  none !default;
-$slider-button-vup-bg-image:  none !default;
+$slider-button-hleft-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////+/v7////////+/v7+/v7////////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///8G+5iqAAAAL3RSTlMABAgMEBQYHCAkKDA0ODxETFRYYGRsdHyAh4uTm6Onr7O/w8fL09ff4+fr7/P3+/6nVicAAADJSURBVHgBldJHdoNgAANhQUjvPTHuxbgAuv/t/J5O8I82Wn27UfGaVmjvBwvsdmEDUH33JuBxYwNQ/48m4LWzAbie2QR8nkzA/coGoPodTMDzzgagae1ykHAASDgAJBwAEk4xSDgAJBwAEg4ACacYJBwAEg4ACYeAjyMEaqYQSC97CFT/DQxID2sIpK8zBLqZQyC9dRDoajIyID1tIVD10zMg3S0ZSF4IJC8GkhcDyQuB5MVA8kIgeTGQvBhIXggkLwaSFwLJK3cBRvanB71ijlkAAAAASUVORK5CYII=');
+$slider-button-hright-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////////+/v7+/v7+/v7////////+/v7////+/v7+/v7+/v7+/v7+/v7////////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///9VYKa9AAAAL3RSTlMABAgMEBQYHCAoLDQ4PEBMUFhcZGx0eICDi5Obn6ers7vDx8vP19vf4+fr7/P3++LF0fAAAADNSURBVHgBldNHbsNAGEPhkZSi9F4S915k6d3/dga8Jgjw7bkYzPeXS5ObkkX3EQ5gcRcO6H/qbACbp3AAo6twwOEtHMCsDQecvqpsAKuHcMDw12QD2L2EA/C8EFleiCwvRJYXIssLmeGFzPBCZnghM7yQGV7IDC9Eglc26D6zwfS2JIP9a/To4b8pyWD9GH1c/11FNOZthO/4nvEeX5dksH2OTnT4rUsyWN4Xk4cj8nBEHo7IwxF5OCIPR+ThiDwckYcj8nBEHo5Iw5GdAVm8p9sPUXNKAAAAAElFTkSuQmCC');
+$slider-button-vdown-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////+/v7////+/v7////////+/v7////////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////1kjJ6AAAALnRSTlMABAgMEBQYHCAkKDA4QERITFRcYGRodHyDj5OXn6Ons7e7v8vP09ff5+vv8/f7zZvJMAAAAItJREFUeAHdyVcagjAQBsAfUVTAXsTeSTRm7388i/kUQjYHYF4H9bAUXjuEV/KQEdC98f9I8dLXxJngY879CsbG/ccARuPsetHCT1tWXyUoSDXZRiiZ2p/Bsi7/HrbgVPw8REUk/n+P4ZAoMvQATmMyFmBk39+CExzefwnBauZEsgOPWOkevIYz1NEToo45F58KJy0AAAAASUVORK5CYII=');
+$slider-button-vup-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////////////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////wrNfvAAAALnRSTlMABAgMEBQYICgsMDQ4QERITFBcYGhseHyDi5Obn6Ort7u/x8/X29/j5+vv8/f77y3LJgAAAI1JREFUeAHdyVeagjAUBtCbYQTsXewFENGYf//LsyB8kORmAZzXQ600mLrfz2XX9X8xcO0Qb4+3s2B/ia8N9yOFwtz+wR0/z77tvQSVm0+mI2piYXyEhp3+E2gWzQ8lNGpY//8UhjygijjBIvGotIbVofwZGFHxPQmGGn/ez8B6hETiAofUo1XmtKVWeAEhzjgqqZr/lwAAAABJRU5ErkJggg==');

package/styles/slider/_material3-definition.scss

@@ -1,4 +1,3 @@
-// layout variables
 $slider-height: 4px !default;
 $slider-handle-height: 20px !default;
 $slider-handle-width: 20px !default;
@@ -26,6 +25,7 @@ $slider-scale-font-size: $text-xs !default;
 $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AztTa/whsA3yqMpmsAAAAAElFTkSuQmCC');
 $slider-scale-tick-image-dark: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC');
 $slider-disabled-handle-show: none !default;
+$slider-button-size: 24px !default;
 $slider-button-shadow: $shadow-sm !default;
 $slider-button-horizon-padding: 0 28px !default;
 $slider-button-vertical-padding: 28px 0 !default;
@@ -51,7 +51,6 @@ $slider-limit-bar-vertical-width: 4px !default;
 $slider-limit-bar-left: calc(50% - 2px) !default;
 $slider-handle-border-color: rgba($primary) !default;
 $slider-material-tooltip-content-color: $grey-white !default;
-
 $slider-handle-mobile-height: 28px !default;
 $slider-handle-mobile-width: 28px !default;
 $slider-handle-mobile-margin-left: -10px !default;
@@ -70,8 +69,6 @@ $largetick-before-mobile-left: -2px !default;
 $tick-before-mobile-top: -12px !default;
 $largetick-after-mobile-top: 8px !default;
 $tick-after-mobile-top: 4px !default;
-
-//color variables
 $slider-button-icon-color: rgba($secondary-text-color) !default;
 $slider-range-bar-color: rgba($primary) !default;
 $slider-range-bar-hover-color: $primary-bg-color-hover !default;

package/styles/slider/_tailwind-definition.scss

@@ -27,6 +27,7 @@ $slider-scale-font-size: $text-xs !default;
 $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8A0tXa/wh/A4H6PSX0AAAAAElFTkSuQmCC');
 $slider-scale-tick-image-dark: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8Aa3KA/wUGAl0jqQq1AAAAAElFTkSuQmCC');
 $slider-disabled-handle-show: none !default;
+$slider-button-size: 20px !default;
 $slider-button-shadow: $shadow-sm !default;
 $slider-button-horizon-padding: 0 28px !default;
 $slider-button-vertical-padding: 28px 0 !default;

package/styles/slider/_theme.scss

@@ -1,16 +1,18 @@
+@mixin button-size($size) {
+  height: $size;
+  width: $size;
+}
+
+@mixin handle-style($bg-color, $border-color) {
+  background-color: $bg-color;
+  border-color: $border-color;
+}
+
 @include export-module('slider-theme') {
 
-  /*! component theme */
   .e-control-wrapper.e-slider-container {
     @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
-      &.e-material-slider .e-slider .e-handle.e-handle-first {
-        background: transparent;
-        border-color: transparent;
-        @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
-          box-shadow: none;
-        }
-      }
-
+      &.e-material-slider .e-slider .e-handle.e-handle-first,
       &.e-material-slider .e-slider .e-handle.e-handle-second {
         background: transparent;
         border-color: transparent;
@@ -23,64 +25,66 @@
     .e-slider-button {
       background-color: $slider-button-bg-color;
       border: 1px solid $slider-button-border-color;
+      box-sizing: border-box;
+      cursor: pointer;
+      outline: none;
+      position: absolute;
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'Material3') {
+        @include button-size($slider-button-size);
+      }
+      @else {
+        @include button-size(18px);
+      }
       @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
         border-radius: 10px;
         box-shadow: $slider-button-shadow;
-        height: 20px;
-        width: 20px;
       }
       @else {
         border-radius: 50%;
-        @if ($skin-name == 'FluentUI') {
-          height: 16px;
-          width: 16px;
-        }
-        @else if ($skin-name == 'Material3') {
-          height: 24px;
-          width: 24px;
-          padding: 4px;
-          border: none;
-        }
-        @else {
-          height: 18px;
-          width: 18px;
-        }
       }
-      box-sizing: border-box;
-      cursor: pointer;
-      outline: none;
-      @if ($skin-name != 'Material3') {
+      @if ($skin-name == 'Material3') {
+        padding: 4px;
+        border: none;
+      }
+      @else if $skin-name == 'fluent2' {
+        padding: 4px;
+      }
+      @else if ($skin-name != 'Material3') {
         padding: 0;
       }
-      position: absolute;
       @if ($skin-name == 'bootstrap4') {
         border: 0;
-        height: 16px;
-        width: 16px;
       }
-    }
 
-    .e-slider-button:hover {
       @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        background-color: $slider-range-bar-color;
-        border-color: $slider-range-bar-color;
-      }
-
-      .e-button-icon::before {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          color: $slider-button-icon-font-color;
+        &:hover {
+          border-color: $slider-range-bar-color;
+        }
+  
+        &:hover,
+        &:active {
+          background-color: $slider-range-bar-color;
+    
+          .e-button-icon::before {
+            color: $slider-button-icon-font-color;
+          }
         }
       }
-    }
 
-    .e-slider-button:active {
-      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        background-color: $slider-range-bar-color;
-      }
-
-      .e-button-icon::before {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          color: $slider-button-icon-font-color;
+      @if ($skin-name == 'fluent2') {
+        &:hover {
+          background-color: $slider-button-hover-bg-color;
+          border-color: $slider-button-hover-border-color;
+          .e-button-icon::before {
+            color: $slider-button-icon-hover-color;
+          }
+        }
+        &:active {
+          background-color: $slider-button-active-bg-color;
+          border-color: $slider-button-active-border-color;
+          .e-button-icon::before {
+            color: $slider-button-icon-active-color;
+          }
         }
       }
     }
@@ -105,11 +109,11 @@
         @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
           border-radius: 4px;
         }
-      }
 
-      .e-range.e-tab-range {
-        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
-          background-color: $slider-tab-range-color;
+        &.e-tab-range {
+          @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
+            background-color: $slider-tab-range-color;
+          }
         }
       }
 
@@ -118,10 +122,7 @@
         @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
           border: 1px solid $slider-normal-handle-border-color;
         }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-          border: 2px solid $slider-normal-handle-border-color;
-        }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
           border: 2px solid $slider-normal-handle-border-color;
         }
         @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap-dark' and $skin-name != 'bootstrap5' or $skin-name != 'FluentUI') {
@@ -129,69 +130,42 @@
         }
 
         &.e-material-tooltip {
-          background-color: transparent;
-          border-color: transparent;
+          @include handle-style(transparent, transparent);
         }
 
-        &.e-handle-first {
-          &:hover {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              background-color: $slider-handle-active-bg-color;
-              border-color: $slider-handle-active-border-color;
-            }
-          }
-
+        &.e-handle-first,
+        &.e-handle-second {
+          &:hover,
           &:active {
             @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              background-color: $slider-handle-active-bg-color;
-              border-color: $slider-handle-active-border-color;
+              @include handle-style($slider-handle-active-bg-color, $slider-handle-active-border-color);
             }
           }
         }
 
-        &.e-handle-second {
-          &:hover {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              background-color: $slider-handle-active-bg-color;
-              border-color: $slider-handle-active-border-color;
-            }
+        &:hover {
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            @include handle-style($slider-hover-handle-color, null);
           }
-
-          &:active {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              background-color: $slider-handle-active-bg-color;
-              border-color: $slider-handle-active-border-color;
-            }
+          @if ($skin-name == 'bootstrap5') {
+            @include handle-style($slider-hover-handle-color, $slider-hover-handle-border-color);
           }
         }
-      }
-    }
 
-    .e-slider {
-      .e-handle:hover {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          background-color: $slider-hover-handle-color;
-        }
-        @if ($skin-name == 'bootstrap5') {
-          background-color: $slider-hover-handle-color;
-          border-color: $slider-hover-handle-border-color;
-        }
-      }
-
-      .e-handle:active {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          background-color: $slider-active-handle-bg-color;
-        }
-        @if ($skin-name == 'bootstrap5') {
-          background-color: $slider-hover-handle-color;
-          border-color: $slider-hover-handle-border-color;
+        &:active {
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            @include handle-style($slider-active-handle-bg-color, null);
+          }
+          @if ($skin-name == 'bootstrap5') {
+            @include handle-style($slider-hover-handle-color, $slider-hover-handle-border-color);
+          }
         }
       }
     }
 
     &.e-slider-hover {
       .e-slider-track {
-        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4') {
+        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4' and $skin-name != 'fluent2') {
           background-color: $slider-hover-color;
         }
       }
@@ -223,26 +197,24 @@
         }
       }
     }
-  }
-}
 
-.e-control-wrapper.e-slider-container {
-  &:not(.e-disabled):not(.e-read-only):active {
-    .e-handle {
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-        border-color: $slider-tab-border-color;
+    &:not(.e-disabled):not(.e-read-only):active {
+      .e-handle {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+          border-color: $slider-tab-border-color;
+        }
       }
-    }
-
-    .e-range {
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-        background-color: $slider-tab-range-color;
+  
+      .e-range {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+          background-color: $slider-tab-range-color;
+        }
       }
-    }
-
-    .e-slider-track {
-      @if ($skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark') {
-        background-color: $slider-tab-track-color;
+  
+      .e-slider-track {
+        @if ($skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          background-color: $slider-tab-track-color;
+        }
       }
     }
   }