@syncfusion/ej2-angular-inputs 21.2.9 → 22.1.34

package/styles/signature/material3.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/material3-definition.scss';
+
+@import 'material3-definition.scss';
+@import 'all.scss';

package/styles/slider/_layout.scss

@@ -27,7 +27,7 @@
   }
 
   .e-slider-tooltip.e-tooltip-wrap.e-popup {
-    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
       background-color: $slider-handle-bg-color;
       border: 0;
       border-radius: 8px;
@@ -45,9 +45,11 @@
       &.e-material-tooltip-start {
         background-color: $slider-handle-border-color;
 
-        .e-arrow-tip-inner {
-          color: $grey-black;
-          opacity: 0;
+        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
+          .e-arrow-tip-inner {
+            color: $grey-black;
+            opacity: 0;
+          }
         }
 
         .e-arrow-tip-outer.e-tip-bottom {
@@ -83,8 +85,18 @@
         height: 16px;
         overflow: hidden;
         padding: 0 8px;
-        text-align: center;
-        top: calc(50% - 8px);
+        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
+          text-align: center;
+        }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
+          top: calc(50% - 8px);
+          position: relative;
+          line-height: 16px;
+        }
+        @else {
+          top: calc(50% - 10px);
+          left: calc(50% - 36px);
+        }
         width: 100%;
 
         &.e-material-tooltip-show {
@@ -174,7 +186,13 @@
           overflow: hidden;
           padding: 0;
           text-align: center;
-          top: calc(50% - 8px);
+          @if $skin-name == 'material' or $skin-name == 'material-dark' {
+            top: calc(50% - 8px);
+          }
+          @else {
+            top: calc(50% - 10px);
+            left: calc(50% - 16px);
+          }
           width: 100%;
 
           &.e-material-tooltip-show {
@@ -286,7 +304,7 @@
         }
       }
 
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
         .e-slider-button {
           height: 18px;
           width: 18px;
@@ -304,7 +322,7 @@
 
           .e-first-button,
           .e-second-button {
-            @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
               margin-right: -12px;
             }
             @else {
@@ -346,7 +364,7 @@
         }
       }
 
-      @if ($skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
 
         &.e-horizontal,
         &.e-vertical {
@@ -355,6 +373,9 @@
             border-radius: 12px;
             height: 24px;
             width: 24px;
+            @if $skin-name == 'Material3' {
+              padding: 0;
+            }
 
             .e-button-icon::before {
               font-size: 22px;
@@ -668,7 +689,7 @@
         }
 
         .e-slider {
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
             .e-slider-track {
               height: 8px;
               top: calc(50% - 4px);
@@ -681,7 +702,7 @@
           }
 
           .e-handle {
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
               margin-left: $slider-handle-mobile-margin-left;
               top: $slider-handle-mobile-handle-top;
             }
@@ -710,6 +731,9 @@
             @if ($skin-name == 'tailwind') {
               left: calc(50% - 5px);
             }
+            @else if $skin-name == 'Material3' {
+              left: calc(50% - 14px);
+            }
             @else {
               left: calc(50% - 9px);
             }
@@ -1205,7 +1229,7 @@
             border-radius: 2px;
           }
         }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
           background: $slider-track-color;
           border-radius: 4px;
           overflow: hidden;
@@ -1438,6 +1462,10 @@
           margin-right: $slider-btn-center-align;
           right: 50%;
 
+          @if $skin-name == 'Material3' {
+            margin-right: $slider-btn-vertical-center-align;
+          }
+
           @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-vdown-bg-image;
@@ -1462,6 +1490,10 @@
                 content: '\e734';
                 font-size: 18px;
               }
+              @else if ($skin-name == 'Material3') {
+                content: '\e734';
+                font-size: 16px;
+              }
               @else {
                 content: '\e734';
                 font-size: 14px;
@@ -1487,6 +1519,10 @@
           right: 50%;
           top: 0;
 
+          @if $skin-name == 'Material3' {
+            margin-right: $slider-btn-vertical-center-align;
+          }
+
           @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-vup-bg-image;
@@ -1511,6 +1547,10 @@
                 content: '\e7dd';
                 font-size: 18px;
               }
+              @else if ($skin-name == 'Material3') {
+                content: '\e7dd';
+                font-size: 16px;
+              }
               @else {
                 content: '\e7dd';
                 font-size: 14px;
@@ -1769,8 +1809,13 @@
             box-shadow: $slider-tab-active-box-shadow;
           }
           @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-            background-color: $slider-tab-background;
-            border: $slider-tab-border;
+            @if $skin-name == 'Material3' {
+              background: $slider-tab-background;
+            }
+            @else {
+              background-color: $slider-tab-background;
+              border: $slider-tab-border;
+            }
             box-shadow: $slider-tab-active-box-shadow;
           }
           /* stylelint-enable */

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/slider/_material3-definition.scss

@@ -0,0 +1,97 @@
+// layout variables
+$slider-height: 4px !default;
+$slider-handle-height: 20px !default;
+$slider-handle-width: 20px !default;
+$slider-handle-border-radius: 50% !default;
+$slider-handle-top: -7px !default;
+$slider-h-handle-margin: 0 !default;
+$rtl-slider-h-handle-margin: 0 -6px 0 0 !default;
+$slider-v-handle-margin: -10px !default;
+$rtl-slider-v-handle-margin: 0 !default;
+$slider-container-height: 4px !default;
+$slider-handle-box-shadow: $shadow !default;
+$slider-tooltip-padding: 2px 4px !default;
+$tick-after-height: 6px !default;
+$tick-after-top: -10px !default;
+$largetick-before-top: -10px !default;
+$largetick-before-height: 12px !default;
+$largetick-after-height: 12px !default;
+$largetick-after-top: 5px !default;
+$tick-before-height: 6px !default;
+$tick-before-top: 1px !default;
+$slider-vertical-width: 4px !default;
+$slider-border-radius-handle: 50% !default;
+$slider-scale-font-family: $font-family !default;
+$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-shadow: $shadow-sm !default;
+$slider-button-horizon-padding: 0 28px !default;
+$slider-button-vertical-padding: 28px 0 !default;
+$tick-after-left: 5px !default;
+$largetick-before-left: 1px !default;
+$tick-before-left: 17px !default;
+$largetick-after-left: 17px !default;
+$slider-wrap-height: 26px !default;
+$slider-center-align: -5px !default;
+$slider-btn-center-align: -14px !default;
+$slider-btn-vertical-center-align: -12px !default;
+$slider-range-height: $slider-container-height !default;
+$slider-range-width: $slider-vertical-width !default;
+$slider-range-border-radius: 4px !default;
+$slider-cursor: pointer !default;
+$slider-handle-hover-cursor: pointer !default;
+$slider-scale-top: 16px !default;
+$slider-tab-border: 1px solid rgba($content-bg-color) !default;
+$slider-tab-active-box-shadow: 0 0 0 10px rgba($primary, $opacity12) !default;
+$slider-limit-bar-horizontal-height: 4px !default;
+$slider-limit-bar-top: calc(50% - 4px) !default;
+$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;
+$slider-handle-mobile-handle-top: calc(50% - 14px) !default;
+$slider-handle-mobile-top: -7px !default;
+$slider-h-handle-mobile-margin: 0 !default;
+$rtl-slider-h-handle-mobile-margin: 0 !default;
+$slider-v-handle-mobile-margin: 0 !default;
+$rtl-slider-v-handle-mobile-margin: 0 !default;
+$slider-mobile-scale-font-size: $text-sm !default;
+$tick-after-mobile-height: 8px !default;
+$tick-after-mobile-left: 18px !default;
+$tick-before-mobile-left: 2px !default;
+$largetick-before-mobile-height: 12px !default;
+$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;
+$slider-track-color: rgba($series-1) !default;
+$slider-button-bg-color: rgba($icon-color, $opacity8) !default;
+$slider-button-icon-bg-color: rgba($secondary-text-color) !default;
+$slider-normal-handle-border-color: rgba($primary) !default;
+$slider-handle-bg-color: rgba($primary) !default;
+$slider-hover-color: rgba($series-1) !default;
+$slider-handle-hover-border-color: $slider-normal-handle-border-color !default;
+$slider-handle-start-border-color: $content-bg-color-alt2 !default;
+$slider-button-border-color: $secondary-border-color !default;
+$slider-tab-background: $primary-bg-color-hover !default;
+$slider-tab-range-color: rgba($primary) !default;
+$slider-tab-track-color: $content-bg-color-alt2 !default;
+$slider-limit-bar-color: $overlay-bg-color !default;
+$slider-tick-font-color: rgba($content-text-color-alt2) !default;
+$slider-hover-handle-color: $primary-bg-color-hover !default;
+$slider-hover-handle-border-color: $primary-border-color-hover !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;

package/styles/slider/_theme.scss

@@ -2,15 +2,21 @@
 
   /*! component theme */
   .e-control-wrapper.e-slider-container {
-    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+    @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-second {
         background: transparent;
         border-color: transparent;
+        @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
+          box-shadow: none;
+        }
       }
     }
 
@@ -33,6 +39,7 @@
           height: 24px;
           width: 24px;
           padding: 4px;
+          border: none;
         }
         @else {
           height: 18px;
@@ -42,7 +49,9 @@
       box-sizing: border-box;
       cursor: pointer;
       outline: none;
-      padding: 0;
+      @if ($skin-name != 'Material3') {
+        padding: 0;
+      }
       position: absolute;
       @if ($skin-name == 'bootstrap4') {
         border: 0;

package/styles/slider/material-dark.css

@@ -60,6 +60,8 @@
   padding: 0 8px;
   text-align: center;
   top: calc(50% - 8px);
+  position: relative;
+  line-height: 16px;
   width: 100%;
 }
 .e-slider-tooltip.e-tooltip-wrap.e-popup .e-tip-content.e-material-tooltip-show {

package/styles/slider/material.css

@@ -60,6 +60,8 @@
   padding: 0 8px;
   text-align: center;
   top: calc(50% - 8px);
+  position: relative;
+  line-height: 16px;
   width: 100%;
 }
 .e-slider-tooltip.e-tooltip-wrap.e-popup .e-tip-content.e-material-tooltip-show {