@syncfusion/ej2-inputs 27.2.2 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,46 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'signature/bds-definition.scss';
+@import 'signature/all.scss';
+
+@import 'input/bds-definition.scss';
+@import 'input/icons/bds.scss';
+@import 'input/all.scss';
+@import 'input/bigger.scss';
+@import 'numerictextbox/bds-definition.scss';
+@import 'numerictextbox/icons/bds.scss';
+@import 'numerictextbox/all.scss';
+@import 'numerictextbox/bigger.scss';
+@import 'maskedtextbox/bds-definition.scss';
+@import 'maskedtextbox/all.scss';
+@import 'maskedtextbox/bigger.scss';
+@import 'ej2-popups/styles/popup/bds-definition.scss';
+@import 'ej2-popups/styles/tooltip/bds-definition.scss';
+@import 'slider/bds-definition.scss';
+@import 'slider/all.scss';
+@import 'slider/bigger.scss';
+@import 'textbox/bds-definition.scss';
+@import 'textbox/all.scss';
+@import 'textbox/bigger.scss';
+@import 'textarea/bds-definition.scss';
+@import 'textarea/all.scss';
+@import 'ej2-buttons/styles/button/bds-definition.scss';
+@import 'ej2-popups/styles/spinner/bds-definition.scss';
+@import 'uploader/bds-definition.scss';
+@import 'uploader/icons/bds.scss';
+@import 'uploader/all.scss';
+@import 'uploader/bigger.scss';
+@import 'ej2-splitbuttons/styles/split-button/bds-definition.scss';
+@import 'color-picker/bds-definition.scss';
+@import 'color-picker/icons/bds.scss';
+@import 'color-picker/all.scss';
+@import 'color-picker/bigger.scss';
+@import 'rating/bds-definition.scss';
+@import 'rating/all.scss';
+@import 'rating/bigger.scss';
+@import 'data-form/bds-definition.scss';
+@import 'data-form/all.scss';
+@import 'otp-input/bds-definition.scss';
+@import 'otp-input/all.scss';
+@import 'otp-input/bigger.scss';
+@import 'smart-textarea/bds-definition.scss';
+@import 'smart-textarea/all.scss';

package/styles/bootstrap-dark-lite.css

@@ -2919,6 +2919,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -4275,6 +4276,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap-dark.css

@@ -4746,6 +4746,7 @@ textarea.e-input.e-bigger.e-small,
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -6629,6 +6630,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap-lite.css

@@ -2909,6 +2909,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -4265,6 +4266,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap.css

@@ -4728,6 +4728,7 @@ textarea.e-input.e-bigger.e-small,
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -6611,6 +6612,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap4-lite.css

@@ -2928,7 +2928,7 @@ textarea.e-input::selection,
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -4307,6 +4307,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap4.css

@@ -4745,7 +4745,7 @@ textarea.e-input.e-bigger.e-small,
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -6710,6 +6710,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap5-dark-lite.css

@@ -4315,6 +4315,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
@@ -5157,10 +5160,10 @@ body.e-colorpicker-overflow {
   }
 }
 .smart-textarea-suggestion-overlay {
-  background-color: #fff;
-  color: #212529;
-  -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
-          box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
+  background-color: #212529;
+  color: #fff;
+  -webkit-box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 
 [data-suggestion-visible]::-moz-selection {

package/styles/bootstrap5-dark.css

@@ -6890,6 +6890,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
@@ -8073,10 +8076,10 @@ body.e-colorpicker-overflow {
   }
 }
 .smart-textarea-suggestion-overlay {
-  background-color: #fff;
-  color: #212529;
-  -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
-          box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
+  background-color: #212529;
+  color: #fff;
+  -webkit-box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 
 [data-suggestion-visible]::-moz-selection {

package/styles/bootstrap5-lite.css

@@ -4315,6 +4315,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
@@ -5159,8 +5162,8 @@ body.e-colorpicker-overflow {
 .smart-textarea-suggestion-overlay {
   background-color: #fff;
   color: #212529;
-  -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
-          box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
+  -webkit-box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 
 [data-suggestion-visible]::-moz-selection {

package/styles/bootstrap5.3-lite.css

@@ -2919,7 +2919,7 @@ input.e-input::-webkit-input-placeholder {
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -4312,6 +4312,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap5.3.css

@@ -4817,7 +4817,7 @@ textarea.e-input.e-bigger.e-small,
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -6889,6 +6889,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);

package/styles/bootstrap5.css

@@ -6890,6 +6890,9 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-selected-value .e-float-input input {
   padding-right: 0;
 }
+.e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
+  right: -12px !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
@@ -8075,8 +8078,8 @@ body.e-colorpicker-overflow {
 .smart-textarea-suggestion-overlay {
   background-color: #fff;
   color: #212529;
-  -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
-          box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.176);
+  -webkit-box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 1.25px 4px 0 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 
 [data-suggestion-visible]::-moz-selection {

package/styles/color-picker/_bigger.scss

@@ -9,7 +9,9 @@
       }
       & .e-split-colorpicker.e-split-btn {
         line-height: $cpicker-bigger-split-line-height;
-        padding: $cpicker-bigger-split-btn-padding;
+        @if $skin-name != 'tailwind3' {
+          padding: $cpicker-bigger-split-btn-padding;
+        }
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           background-color: $content-bg-color;
           border: $cpicker-split-btn-border;
@@ -23,7 +25,9 @@
 
       &.e-rtl {
         & .e-split-colorpicker.e-split-btn {
-          padding: $cpicker-bigger-split-btn-padding;
+          @if $skin-name != 'tailwind3' {
+            padding: $cpicker-bigger-split-btn-padding;
+          }
         }
       }
     }
@@ -51,6 +55,9 @@
         @if $skin-name == 'bootstrap5.3' {
           width: 85.913%;
         }
+        @if $skin-name == 'tailwind3' {
+          font-size: 16px;
+        }
       }
 
       &.e-color-picker {
@@ -75,6 +82,10 @@
           @if $skin-name == 'fluent2' {
             padding: 13px 12px;
           }
+          @if $skin-name == 'tailwind3' {
+            height: 64px;
+            align-content: center;
+          }
         }
 
         & .e-switch-ctrl-btn .e-mode-switch-btn {
@@ -126,6 +137,10 @@
             height: 12px;
             width: 12px;
           }
+          @if $skin-name == 'tailwind3' {
+            height: 20px;
+            width: 20px;
+          }
         }
 
         & .e-hsv-color {
@@ -146,13 +161,27 @@
           margin-left: $cpicker-bigger-preview-margin-left;
           vertical-align: super;
           width: $cpicker-bigger-preview-size;
-
+          @if $skin-name == 'tailwind3' {
+            height: 42px;
+            & .e-preview {
+              &.e-current {
+                height: 20px;
+              }
+              &.e-previous {
+                height: 21px;
+                top: 20px;
+              }
+            }
+          }
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
             top: 5px;
           }
           @else if $skin-name == 'FluentUI' {
             top: $cpicker-preview-container-top;
           }
+          @else if $skin-name == 'tailwind3' {
+            top: 10px;
+          }
           @else {
             top: 0;
           }
@@ -182,7 +211,7 @@
               @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
                 border-radius: 6px;
               }
-              @if $skin-name == 'bootstrap5.3' {
+              @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
                 height: 8px !important; /* stylelint-disable-line declaration-no-important */
               }
             }
@@ -192,7 +221,7 @@
                 @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                   height: 12px;
                 }
-                @if $skin-name == 'bootstrap5.3' {
+                @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
                   height: 8px !important; /* stylelint-disable-line declaration-no-important */
                 }
               }
@@ -291,7 +320,13 @@
 
         & .e-float-input {
           margin-right: $cpicker-bigger-label-margin;
-
+          @if $skin-name == 'tailwind3' {
+            .e-float-text {
+              font-weight: $font-weight-normal;
+              font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
+              right: 0 !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
           &:first-child {
             width: $cpicker-bigger-hex-label-width;
 
@@ -332,7 +367,7 @@
         @if $skin-name == 'Material3' {
           border: none;
         }
-        @if $skin-name == 'bootstrap4' or $skin-name == 'fluent2' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'fluent2' or $skin-name == 'tailwind3'{
           height: $cpicker-bigger-switch-btn-width;
         }
         @if $skin-name == 'bootstrap5.3' {
@@ -342,6 +377,10 @@
           font-size: 22px;
           line-height: 22px;
         }
+        @else if $skin-name == 'tailwind3' {
+          font-size: 16px;
+          line-height: 16px;
+        }
         @else {
           font-size: 18px;
           line-height: 18px;

package/styles/color-picker/_layout.scss

@@ -353,7 +353,7 @@
             @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
               border-radius: 6px;
             }
-            @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+            @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
               border-radius: 4px;
             }
             @else if $skin-name == 'Material3' {
@@ -406,6 +406,9 @@
             @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
               border-radius: 6px;
             }
+            @if $skin-name == 'tailwind3' {
+              border-radius: 4px;
+            }
           }
         }
 
@@ -437,9 +440,12 @@
         position: relative;
         top: $cpicker-preview-container-top;
         width: $cpicker-preview-size;
-        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' {
           height: 36px;
         }
+        @if $skin-name == 'tailwind3' {
+          border-radius: $cpicker-preview-container-radius;
+        }
 
         & .e-preview {
           display: block;
@@ -450,6 +456,10 @@
           &.e-current {
             border-bottom: $cpicker-preview-border;
             top: 0;
+            @if $skin-name == 'tailwind3' {
+              border-top-right-radius: $cpicker-preview-container-radius;
+              border-top-left-radius: $cpicker-preview-container-radius;
+            }
           }
 
           &.e-previous {
@@ -463,6 +473,10 @@
             @else {
               top: $cpicker-preview-height;
             }
+            @if $skin-name == 'tailwind3' {
+              border-bottom-right-radius: $cpicker-preview-container-radius;
+              border-bottom-left-radius: $cpicker-preview-container-radius;
+            }
           }
         }
       }
@@ -511,6 +525,9 @@
           font-size: 16px;
           line-height: 16px;
         }
+        @if $skin-name == 'tailwind3' {
+          font-size: 14px;
+        }
 
         &::before {
           @if $skin-name == 'Material3' {
@@ -556,6 +573,11 @@
           @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
             text-align: left;
           }
+          @if $skin-name == 'tailwind3' {
+            text-align: left;
+            font-weight: $font-weight-normal !important; /* stylelint-disable-line declaration-no-important */
+            color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
+          }
         }
       }
     }
@@ -565,6 +587,9 @@
       padding: $cpicker-ctrl-btn-padding;
       white-space: nowrap;
       width: 100%;
+      @if $skin-name == 'tailwind3' {
+        border-top: 1px $border-light solid;
+      }
 
       & .e-ctrl-btn {
         float: right;
@@ -573,6 +598,9 @@
         @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           width: 86.913%;
         }
+        @else if $skin-name == 'tailwind3' {
+          width: 84.913%;
+        }
         @else if $skin-name == 'fluent2' {
           width: 88%;
           margin: 4px 0;
@@ -592,6 +620,10 @@
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
             height: 30px;
           }
+          @if $skin-name == 'tailwind3' {
+            font-size: $text-sm;
+            line-height: 18px;
+          }
 
           &.e-cancel {
             margin-left: $cpicker-cancel-btn-margin;
@@ -665,7 +697,9 @@
         &:hover,
         &:active {
           border-color: transparent;
-          box-shadow: none;
+          @if $skin-name != 'tailwind3' {
+            box-shadow: none;
+          }
           outline: none;
         }
 
@@ -878,6 +912,10 @@
           & input {
             padding-right: 0;
           }
+
+          .e-float-text {
+            right: -12px !important; /* stylelint-disable-line declaration-no-important */
+          }
         }
 
         & .e-value-switch-btn {