@syncfusion/ej2-inputs 28.2.11 → 29.1.34

package/styles/fluent2.css

@@ -9973,12 +9973,12 @@ input.e-input.e-bigger.e-small,
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-tick-after.e-scale.e-h-scale .e-tick,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-tick-after.e-scale.e-h-scale .e-tick {
   height: 8px;
-  top: 4px;
+  top: 14px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-tick-after.e-scale.e-h-scale .e-large,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-tick-after.e-scale.e-h-scale .e-large {
   height: 12px;
-  top: 8px;
+  top: 14px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-tick-both.e-scale .e-tick,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-tick-both.e-scale .e-tick {
@@ -12761,6 +12761,119 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e91c";
+}
+
+.e-listen-stop::before {
+  content: "\e919";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 14px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 14px;
+  margin-top: 2px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-bigger .e-speech-to-text.e-btn,
+.e-bigger.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 52px;
+  min-height: 52px;
+  padding: 0 20px;
+}
+.e-bigger .e-speech-to-text.e-btn.e-round,
+.e-bigger.e-speech-to-text.e-btn.e-round {
+  width: 52px;
+  height: 52px;
+  padding: 0;
+}
+.e-bigger .e-speech-to-text.e-btn .e-btn-icon,
+.e-bigger.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+  margin-top: 2px;
+}
+
+.e-bigger .e-speech-to-text.e-round .e-btn-icon,
+.e-bigger.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 22px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fluent2.scss

@@ -42,5 +42,9 @@
 @import 'otp-input/fluent2-definition.scss';
 @import 'otp-input/all.scss';
 @import 'otp-input/bigger.scss';
+@import 'speech-to-text/fluent2-definition.scss';
+@import 'speech-to-text/icons/fluent2.scss';
+@import 'speech-to-text/all.scss';
+@import 'speech-to-text/bigger.scss';
 @import 'smart-textarea/fluent2-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/highcontrast-light-lite.css

@@ -5166,6 +5166,87 @@ body.e-colorpicker-overflow {
   border-color: rgb(145, 76, 0);
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 14px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/highcontrast-light-lite.scss

@@ -33,5 +33,8 @@
 @import 'data-form/all.scss';
 @import 'otp-input/highcontrast-light-definition.scss';
 @import 'otp-input/all.scss';
+@import 'speech-to-text/highcontrast-light-definition.scss';
+@import 'speech-to-text/icons/highcontrast-light.scss';
+@import 'speech-to-text/all.scss';
 @import 'smart-textarea/highcontrast-light-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/highcontrast-light.css

@@ -7896,6 +7896,117 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 14px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-bigger .e-speech-to-text.e-btn,
+.e-bigger.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 52px;
+  min-height: 52px;
+  padding: 0 19px;
+}
+.e-bigger .e-speech-to-text.e-btn.e-round,
+.e-bigger.e-speech-to-text.e-btn.e-round {
+  width: 52px;
+  height: 52px;
+  padding: 0;
+}
+.e-bigger .e-speech-to-text.e-btn .e-btn-icon,
+.e-bigger.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+}
+
+.e-bigger .e-speech-to-text.e-round .e-btn-icon,
+.e-bigger.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/highcontrast-light.scss

@@ -42,5 +42,9 @@
 @import 'otp-input/highcontrast-light-definition.scss';
 @import 'otp-input/all.scss';
 @import 'otp-input/bigger.scss';
+@import 'speech-to-text/highcontrast-light-definition.scss';
+@import 'speech-to-text/icons/highcontrast-light.scss';
+@import 'speech-to-text/all.scss';
+@import 'speech-to-text/bigger.scss';
 @import 'smart-textarea/highcontrast-light-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/highcontrast-lite.css

@@ -5166,6 +5166,87 @@ body.e-colorpicker-overflow {
   border-color: #ff7d1a;
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 14px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 14px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/highcontrast-lite.scss

@@ -33,5 +33,8 @@
 @import 'data-form/all.scss';
 @import 'otp-input/highcontrast-definition.scss';
 @import 'otp-input/all.scss';
+@import 'speech-to-text/highcontrast-definition.scss';
+@import 'speech-to-text/icons/highcontrast.scss';
+@import 'speech-to-text/all.scss';
 @import 'smart-textarea/highcontrast-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/highcontrast.css

@@ -7896,6 +7896,117 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 14px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 14px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-bigger .e-speech-to-text.e-btn,
+.e-bigger.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 52px;
+  min-height: 52px;
+  padding: 0 20px;
+}
+.e-bigger .e-speech-to-text.e-btn.e-round,
+.e-bigger.e-speech-to-text.e-btn.e-round {
+  width: 52px;
+  height: 52px;
+  padding: 0;
+}
+.e-bigger .e-speech-to-text.e-btn .e-btn-icon,
+.e-bigger.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+}
+
+.e-bigger .e-speech-to-text.e-round .e-btn-icon,
+.e-bigger.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 20px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/highcontrast.scss

@@ -42,5 +42,9 @@
 @import 'otp-input/highcontrast-definition.scss';
 @import 'otp-input/all.scss';
 @import 'otp-input/bigger.scss';
+@import 'speech-to-text/highcontrast-definition.scss';
+@import 'speech-to-text/icons/highcontrast.scss';
+@import 'speech-to-text/all.scss';
+@import 'speech-to-text/bigger.scss';
 @import 'smart-textarea/highcontrast-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/input/_bootstrap4-definition.scss

@@ -1,10 +1,12 @@
+@use 'sass:color';
+
 $input-skin-name: 'bootstrap4' !default;
 $zero-value: 0 !default;
 $one-value: 1px !default;
 $border-type: solid !default;
 $border-size: 1px !default;
-$hover-border-color: darken($gray-600, 10%) !default;
-$pressed-border-color: darken($gray-600, 12.5%) !default;
+$hover-border-color: color.adjust($gray-600, $lightness: -10%) !default;
+$pressed-border-color: color.adjust($gray-600, $lightness: -12.5%) !default;
 $input-child-padding-bottom: $zero-value !default;
 $input-child-small-bigger-padding-bottom: $zero-value !default;
 $input-child-small-padding-bottom: $zero-value !default;
@@ -27,7 +29,7 @@ $input-bigger-text-indent: 12px !default;
 $input-small-text-indent: 8px !default;
 $input-small-bigger-text-indent: 8px !default;
 $input-bg-color: $content-bg !default;
-$input-box-border-focus: lighten($primary, 25%) !default;
+$input-box-border-focus: color.adjust($primary, $lightness: 25%) !default;
 $input-success-color: $success !default;
 $input-warning-color:  $warning !default;
 $input-error-color: $danger !default;
@@ -113,8 +115,8 @@ $input-group-active-border: transparent !default;
 $input-group-border: 1px $border-type !default;
 $input-group-border-width: $zero-value !default;
 $input-group-border-radius: $zero-value !default;
-$input-group-pressed-bg: darken($gray-600, 10%) !default;
-$input-hover-bg-color: darken($gray-600, 7.5%) !default;
+$input-group-pressed-bg: color.adjust($gray-600, $lightness: -10%) !default;
+$input-hover-bg-color: color.adjust($gray-600, $lightness: -7.5%) !default;
 $input-valid-group-border-width: 2px !default;
 $input-header-font-color: $gray-600 !default;
 $input-child-margin-bottom: $zero-value !default;
@@ -139,7 +141,7 @@ $input-opacity-filter: 100 !default;
 $input-group-border-width-focus: $one-value !default;
 $input-group-border-type-focus: $border-type !default;
 $input-group-border-color-focus: $input-box-border-focus !default;
-$input-group-border-color-hover: darken($gray-600, 10%) !default;
+$input-group-border-color-hover: color.adjust($gray-600, $lightness: -10%) !default;
 $input-group-border-width-hover: 1px !default;
 $input-group-border-right-focus: transparent !default;
 $input-group-border-left-focus: transparent !default;

package/styles/input/_layout.scss

@@ -1581,7 +1581,14 @@
   .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
   .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
-    background: $input-disable-bg-color;
+    @if ($input-skin-name == 'tailwind3')
+    {
+      background: $input-readonly-bg-color;
+    }
+    @if $input-skin-name != 'tailwind3'
+    {
+      background: $input-disable-bg-color;
+    }
     color: $input-disable-font-color;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);

package/styles/input/_theme.scss

@@ -65,9 +65,13 @@
   .e-float-input.e-control-wrapper textarea[disabled],
   .e-float-input.e-disabled,
   .e-float-input.e-control-wrapper.e-disabled  {
-    @if ($input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3') {
+    @if ($input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3') {
       -webkit-text-fill-color: $input-disable-font-color;
     }
+    @if $input-skin-name == 'tailwind3'
+    {
+      -webkit-text-fill-color: $content-text-color-disabled;
+    }
     background: $input-disable-bg-color;
     color: $input-disable-font-color;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {