@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/styles/input/icons/_material-dark.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-material-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_material.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-material-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_material3-dark.scss

@@ -1 +1 @@
-@import './material3.scss';
+@use './material3' as *;

package/styles/input/icons/_material3.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-material3-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_tailwind-dark.scss

@@ -1 +1 @@
-@import './tailwind.scss';
+@use './tailwind' as *;

package/styles/input/icons/_tailwind.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-tailwind-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_tailwind3.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-tailwind3-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/material-dark.css

@@ -73,6 +73,7 @@ textarea.e-input,
   padding: 4px 0 4px;
   text-indent: 0;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -475,6 +476,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -668,6 +670,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -895,9 +898,9 @@ label.e-float-text,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
+  border-bottom-left-radius: 2px;
   border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
+  border-top-left-radius: 2px;
   border-top-right-radius: 0;
 }
 
@@ -906,9 +909,9 @@ label.e-float-text,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-right-radius: 2px;
   border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-right-radius: 2px;
 }
 
 .e-input-group.e-warning::before,
@@ -2091,7 +2094,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 13px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 0;
@@ -2111,6 +2114,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,

package/styles/input/material-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'icons/material-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/input/material.css

@@ -93,6 +93,7 @@ textarea.e-input,
   padding: 4px 0 4px;
   text-indent: 0;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -495,6 +496,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -688,6 +690,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -915,9 +918,9 @@ label.e-float-text,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
+  border-bottom-left-radius: 2px;
   border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
+  border-top-left-radius: 2px;
   border-top-right-radius: 0;
 }
 
@@ -926,9 +929,9 @@ label.e-float-text,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-right-radius: 2px;
   border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-right-radius: 2px;
 }
 
 .e-input-group.e-warning::before,
@@ -2111,7 +2114,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 13px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 0;
@@ -2131,6 +2134,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,

package/styles/input/material.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'icons/material' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/input/material3-dark.css

@@ -1,5 +1,85 @@
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes e-input-ripple {
   100% {
@@ -71,6 +151,7 @@ textarea.e-input,
   padding: 4px 0 4px;
   text-indent: 0;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -79,7 +160,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper,
 .e-input-group.e-disabled,
 .e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -153,7 +234,7 @@ textarea.e-input,
 .e-float-input.e-input-group textarea,
 .e-float-input.e-control-wrapper textarea,
 .e-float-input.e-control-wrapper.e-input-group textarea {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input:focus {
@@ -211,7 +292,7 @@ textarea.e-input,
   min-width: 30px;
   padding: 0;
   text-align: center;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -374,16 +455,16 @@ textarea.e-input,
 .e-input-group.e-corner .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-corner .e-input:last-child,
 .e-input-group.e-corner .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper.e-corner .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:last-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-rtl .e-input-group-icon:first-child,
@@ -445,7 +526,7 @@ textarea.e-input.e-small,
   min-height: 22px;
   min-width: 22px;
   padding: 0;
-  border-radius: 14px;
+  border-radius: calc(var(--e-radius) * 0.875);
 }
 
 label.e-float-text,
@@ -475,6 +556,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -654,7 +736,7 @@ label.e-float-text,
 .e-float-input.e-control-wrapper.e-disabled,
 .e-float-input.e-input-group.e-disabled,
 .e-float-input.e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -668,6 +750,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -895,20 +978,20 @@ label.e-float-text,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.125);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.125);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.125);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0.125);
 }
 
 .e-input-group.e-warning::before,
@@ -1157,7 +1240,7 @@ label.e-float-text,
 .e-input-group:not(.e-filled) .e-input-group-icon::after,
 .e-input-group.e-control-wrapper:not(.e-filled) .e-input-group-icon::after {
   background: #bdbdbd;
-  border-radius: 100%;
+  border-radius: 999px;
   content: "";
   display: block;
   height: 40%;
@@ -1756,7 +1839,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 30px;
   padding: 0;
   margin: 0;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -1767,7 +1850,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 34px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -2046,7 +2129,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 13px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 0;
@@ -2066,6 +2149,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
@@ -2274,7 +2358,7 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
 .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
   border: 1px solid rgba(var(--color-sf-outline));
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-width: 1px;
   fill: transparent;
   -webkit-transition: border 0.2s, -webkit-box-shadow 0.2s;
@@ -2487,7 +2571,7 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
   font-size: 16px;
-  margin: 9px 12px 9px 0;
+  margin: 2px;
 }
 
 .e-outline.e-input-group.e-prepend .e-input-group-icon,
@@ -2939,7 +3023,7 @@ textarea.e-input.e-small.e-outline,
 .e-rtl.e-outline label.e-float-text::after,
 .e-rtl.e-outline.e-float-input label.e-float-text::after,
 .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-  border-radius: 5px 0;
+  border-radius: calc(var(--e-radius) * 0.3125) 0;
   border-right: 0;
   left: -6px;
 }
@@ -2947,7 +3031,7 @@ textarea.e-input.e-small.e-outline,
 .e-outline label.e-float-text::after,
 .e-outline.e-float-input label.e-float-text::after,
 .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-  border-radius: 0 5px;
+  border-radius: 0 calc(var(--e-radius) * 0.3125);
   border-right: solid 1px transparent;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -3940,11 +4024,8 @@ textarea.e-outline,
 .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
 .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
   font-size: 16px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
-  margin: 9px 12px 9px 0;
+  margin: 0;
 }
 
 .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
@@ -6484,7 +6565,7 @@ textarea.e-input.e-bigger,
 .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
   min-height: 38px;
   min-width: 38px;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-bigger .e-input-group-icon,
@@ -6609,7 +6690,7 @@ textarea.e-input.e-bigger,
   min-height: 34px;
   min-width: 34px;
   padding: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
   margin: 0;
 }
 
@@ -7756,7 +7837,7 @@ textarea.e-input.e-bigger.e-small,
   min-height: 38px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-small.e-bigger .e-input-group .e-clear-icon,
@@ -7765,7 +7846,7 @@ textarea.e-input.e-bigger.e-small,
   min-width: 34px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-small.e-bigger .e-clear-icon,
@@ -8447,7 +8528,7 @@ e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon +
 .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-  margin: 15px 16px 15px 0;
+  margin: 2px;
 }
 
 .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
@@ -10196,11 +10277,8 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
   font-size: 16px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
-  margin: 9px 12px 9px 0;
+  margin: 12px 0 0 0;
 }
 
 .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,

package/styles/input/material3-dark.scss

@@ -1,6 +1,5 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'icons/material3-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'icons/material3-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;