@syncfusion/ej2-angular-inputs 21.2.9 → 22.1.34

package/styles/material.css

@@ -3166,8 +3166,8 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
 .e-bigger .e-input-group .e-clear-icon,
 .e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
-  min-height: 20px;
   min-width: 20px;
+  min-height: 20px;
   padding-bottom: 5px;
   padding-right: 8px;
   padding-top: 6px;
@@ -3183,6 +3183,19 @@ textarea.e-input.e-bigger.e-small,
   padding-top: 6px;
 }
 
+.e-input-group.e-small .e-clear-icon,
+.e-input-group .e-clear-icon.e-small,
+.e-small.e-bigger .e-input-group .e-clear-icon,
+.e-input-group.e-control-wrapper.e-small .e-clear-icon,
+.e-input-group.e-control-wrapper .e-clear-icon.e-small,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
+  min-height: 20px;
+  min-width: 20px;
+  padding-bottom: 5px;
+  padding-right: 8px;
+  padding-top: 6px;
+}
+
 .e-input-group.e-small.e-bigger .e-clear-icon,
 .e-input-group.e-small .e-clear-icon.e-bigger,
 .e-bigger .e-input-group.e-small .e-clear-icon,
@@ -3457,7 +3470,7 @@ textarea.e-input.e-bigger.e-small,
 .e-small .e-float-input.e-control-wrapper.e-input-group input,
 .e-float-input.e-control-wrapper.e-input-group.e-small input,
 .e-small .e-float-input.e-control-wrapper.e-input-group input {
-  min-height: 18px;
+  min-height: 16px;
 }
 
 .e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
@@ -3479,7 +3492,7 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
 .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small input,
 .e-small .e-float-input.e-control-wrapper.e-input-group.e-bigger input {
-  min-height: 22px;
+  min-height: 28px;
 }
 
 .e-input-group input.e-input,
@@ -4391,6 +4404,12 @@ textarea.e-outline.e-input,
   margin: 9px 12px 9px 0;
 }
 
+.e-outline.e-input-group.e-prepend .e-input-group-icon,
+.e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+  font-size: 16px;
+  margin: 9px 0 9px 12px;
+}
+
 .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
 .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
 .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
@@ -9187,76 +9206,85 @@ textarea.e-outline,
   outline: none;
 }
 
-.e-input-group.e-prepend input.e-input,
-.e-float-input.e-input-group.e-prepend input,
-.e-input-group.e-control-wrapper.e-prepend input.e-input,
-.e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-.e-float-input.e-prepend input,
-.e-float-input.e-control-wrapper.e-prepend input {
+.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append:not(.e-outline) .e-input-in-wrap,
+.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend:not(.e-outline) .e-input-in-wrap {
+  border-bottom: 1px solid;
+  border-bottom-color: rgba(0, 0, 0, 0.42);
+}
+
+.e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+.e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+  border-bottom: 1px solid;
+  border-bottom-color: #f44336;
+}
+
+.e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+.e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
   border-bottom: 1px solid;
+  border-bottom-color: #22b24b;
 }
 
-.e-input-group.e-prepend:not(.e-float-icon-left),
-.e-input-group.e-prepend.e-success:not(.e-float-icon-left),
-.e-input-group.e-prepend.e-warning:not(.e-float-icon-left),
-.e-input-group.e-prepend.e-error:not(.e-float-icon-left),
-.e-input-group.e-control-wrapper.e-prepend:not(.e-float-icon-left),
-.e-input-group.e-control-wrapper.e-prepend.e-success:not(.e-float-icon-left),
-.e-input-group.e-control-wrapper.e-prepend.e-warning:not(.e-float-icon-left),
-.e-input-group.e-control-wrapper.e-prepend.e-error:not(.e-float-icon-left) {
+.e-input-group:not(.e-outline).e-prepend:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-prepend.e-success:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-prepend.e-warning:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-prepend.e-error:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-success:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-warning:not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-error:not(.e-float-icon-left) {
   border-bottom: transparent;
 }
 
-.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
-.e-input-group.e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
-.e-float-input.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
-.e-float-input.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
-.e-float-input.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
-.e-float-input.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
-.e-float-input.e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
-.e-float-input.e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
-.e-float-input.e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
-.e-float-input.e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
-.e-float-input.e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
-.e-float-input.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
-.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
-.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
-.e-input-group.e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
-.e-input-group.e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
-.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
-.e-input-group.e-float-icon-left.e-prepend.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
-.e-input-group.e-float-icon-left.e-prepend.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
-.e-input-group.e-float-icon-left.e-prepend.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
-.e-input-group.e-float-icon-left.e-prepend.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
+.e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+.e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+.e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
+.e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
+.e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
+.e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
+.e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
+.e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
+.e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
+.e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
+.e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
+.e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
+.e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
+.e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
+.e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
+.e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
+.e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
   border-bottom: transparent;
 }
 
-.e-input-group.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-input-group.e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-float-input.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-float-input.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-.e-float-input.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
-.e-float-input.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-.e-float-input.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
-.e-float-input.e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-float-input.e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-.e-float-input.e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
-.e-float-input.e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
-.e-float-input.e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
+.e-input-group:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-input-group:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-float-input:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
+.e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
+.e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
+.e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
+.e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
   border-bottom: transparent;
 }
 
@@ -12641,6 +12669,8 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder {
   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 {
@@ -14837,6 +14867,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -14979,7 +15011,7 @@ body.e-colorpicker-overflow {
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #3f51b5;
   border-radius: 0;
 }
@@ -14991,6 +15023,7 @@ body.e-colorpicker-overflow {
 }
 .e-rating-container .e-reset.e-disabled {
   color: #9e9e9e;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -15044,6 +15077,9 @@ body.e-colorpicker-overflow {
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #9e9e9e;
 }
@@ -15062,7 +15098,7 @@ body.e-colorpicker-overflow {
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #9e9e9e var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */