@syncfusion/ej2-angular-inputs 22.2.9 → 22.2.12-ngcc

package/styles/input/material-dark.css

@@ -1314,6 +1314,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3286,7 +3306,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3297,7 +3317,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4204,6 +4224,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4332,20 +4360,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: #00b0ff;
   box-shadow: inset 1px 1px #00b0ff, inset -1px 0 #00b0ff, inset 0 -1px #00b0ff;
 }
@@ -4359,11 +4379,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4776,6 +4812,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5162,7 +5214,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5277,6 +5329,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,

package/styles/input/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-inputs/styles/input/material-dark.scss';

package/styles/input/material.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {
@@ -1322,6 +1322,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3294,7 +3314,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3305,7 +3325,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4212,6 +4232,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4340,20 +4368,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: #e3165b;
   box-shadow: inset 1px 1px #e3165b, inset -1px 0 #e3165b, inset 0 -1px #e3165b;
 }
@@ -4367,11 +4387,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4784,6 +4820,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5170,7 +5222,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5285,6 +5337,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,

package/styles/input/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-inputs/styles/input/material.scss';

package/styles/input/material3-dark.css

@@ -1358,6 +1358,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3236,7 +3256,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3247,7 +3267,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4154,6 +4174,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4282,20 +4310,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: rgba(var(--color-sf-primary));
   box-shadow: inset 1px 1px rgba(var(--color-sf-primary)), inset -1px 0 rgba(var(--color-sf-primary)), inset 0 -1px rgba(var(--color-sf-primary));
 }
@@ -4309,11 +4329,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4728,6 +4764,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5114,7 +5166,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5229,6 +5281,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,

package/styles/input/material3-dark.scss

@@ -1,5 +1,2 @@
 @import 'ej2-base/styles/material3-dark-definition.scss';
-
-@import 'material3-dark-definition.scss';
-@import 'icons/material3-dark.scss';
-@import 'all.scss';
+@import 'ej2-inputs/styles/input/material3-dark.scss';

package/styles/input/material3.css

@@ -1414,6 +1414,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3292,7 +3312,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3303,7 +3323,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4210,6 +4230,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4338,20 +4366,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: rgba(var(--color-sf-primary));
   box-shadow: inset 1px 1px rgba(var(--color-sf-primary)), inset -1px 0 rgba(var(--color-sf-primary)), inset 0 -1px rgba(var(--color-sf-primary));
 }
@@ -4365,11 +4385,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4784,6 +4820,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5170,7 +5222,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5285,6 +5337,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,