@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/material3.scss

@@ -1,52 +1,50 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'signature/material3-definition' as *;
+@use 'signature/all' as *;
 
-
-
-@import 'signature/material3-definition.scss';
-@import 'signature/all.scss';
-
-@import 'input/material3-definition.scss';
-@import 'input/icons/material3.scss';
-@import 'input/all.scss';
-@import 'input/bigger.scss';
-@import 'numerictextbox/material3-definition.scss';
-@import 'numerictextbox/icons/material3.scss';
-@import 'numerictextbox/all.scss';
-@import 'numerictextbox/bigger.scss';
-@import 'maskedtextbox/material3-definition.scss';
-@import 'maskedtextbox/all.scss';
-@import 'maskedtextbox/bigger.scss';
-@import 'ej2-popups/styles/popup/material3-definition.scss';
-@import 'ej2-popups/styles/tooltip/material3-definition.scss';
-@import 'slider/material3-definition.scss';
-@import 'slider/all.scss';
-@import 'slider/bigger.scss';
-@import 'textbox/material3-definition.scss';
-@import 'textbox/all.scss';
-@import 'textbox/bigger.scss';
-@import 'textarea/material3-definition.scss';
-@import 'textarea/all.scss';
-@import 'ej2-buttons/styles/button/material3-definition.scss';
-@import 'ej2-popups/styles/spinner/material3-definition.scss';
-@import 'uploader/material3-definition.scss';
-@import 'uploader/icons/material3.scss';
-@import 'uploader/all.scss';
-@import 'uploader/bigger.scss';
-@import 'ej2-splitbuttons/styles/split-button/material3-definition.scss';
-@import 'color-picker/material3-definition.scss';
-@import 'color-picker/icons/material3.scss';
-@import 'color-picker/all.scss';
-@import 'color-picker/bigger.scss';
-@import 'rating/material3-definition.scss';
-@import 'rating/all.scss';
-@import 'rating/bigger.scss';
-@import 'data-form/material3-definition.scss';
-@import 'data-form/all.scss';
-@import 'otp-input/material3-definition.scss';
-@import 'otp-input/all.scss';
-@import 'otp-input/bigger.scss';
-@import 'speech-to-text/material3-definition.scss';
-@import 'speech-to-text/icons/material3.scss';
-@import 'speech-to-text/all.scss';
-@import 'speech-to-text/bigger.scss';
-@import 'smart-textarea/material3-definition.scss';
-@import 'smart-textarea/all.scss';
+@use 'input/material3-definition' as *;
+@use 'input/icons/material3' as *;
+@use 'input/all' as *;
+@use 'input/bigger' as *;
+@use 'numerictextbox/material3-definition' as *;
+@use 'numerictextbox/icons/material3' as *;
+@use 'numerictextbox/all' as *;
+@use 'numerictextbox/bigger' as *;
+@use 'maskedtextbox/material3-definition' as *;
+@use 'maskedtextbox/all' as *;
+@use 'maskedtextbox/bigger' as *;
+@use 'ej2-popups/styles/popup/material3-definition' as *;
+@use 'ej2-popups/styles/tooltip/material3-definition' as *;
+@use 'slider/material3-definition' as *;
+@use 'slider/all' as *;
+@use 'slider/bigger' as *;
+@use 'textbox/material3-definition' as *;
+@use 'textbox/all' as *;
+@use 'textbox/bigger' as *;
+@use 'textarea/material3-definition' as *;
+@use 'textarea/all' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@use 'ej2-popups/styles/spinner/material3-definition' as *;
+@use 'uploader/material3-definition' as *;
+@use 'uploader/icons/material3' as *;
+@use 'uploader/all' as *;
+@use 'uploader/bigger' as *;
+@use 'ej2-splitbuttons/styles/split-button/material3-definition' as *;
+@use 'color-picker/material3-definition' as *;
+@use 'color-picker/icons/material3' as *;
+@use 'color-picker/all' as *;
+@use 'color-picker/bigger' as *;
+@use 'rating/material3-definition' as *;
+@use 'rating/all' as *;
+@use 'rating/bigger' as *;
+@use 'data-form/material3-definition' as *;
+@use 'data-form/all' as *;
+@use 'otp-input/material3-definition' as *;
+@use 'otp-input/all' as *;
+@use 'otp-input/bigger' as *;
+@use 'speech-to-text/material3-definition' as *;
+@use 'speech-to-text/icons/material3' as *;
+@use 'speech-to-text/all' as *;
+@use 'speech-to-text/bigger' as *;
+@use 'smart-textarea/material3-definition' as *;
+@use 'smart-textarea/all' as *;

package/styles/numerictextbox/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/numerictextbox/_bds-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 18px !default;
 $numeric-input-bigger-icon-size: 22px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 17px !default;
+$numeric-prepend-label-top-top: 18px !default;
+$numeric-prepend-outline-label-bottom-top: 16px !default;
+$numeric-prepend-outline-label-top-top: 17px !default;
+$numeric-prepend-filled-label-bottom-top: 16px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-label-top-top: -15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-outline-label-top-top: -15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: -15px !default;

package/styles/numerictextbox/_bigger.scss

@@ -1,9 +1,12 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@use '../input/theme-variables' as *;
 @include export-module('numerictextbox-bigger') {
 
   .e-bigger.e-content-placeholder.e-numeric.e-placeholder-numeric,
   .e-bigger .e-content-placeholder.e-numeric.e-placeholder-numeric {
     background-size: 300px 40px;
-    min-height: 40px;
+    min-height: $numeric-bigger-min-height;
   }
   
   .e-bigger {
@@ -21,4 +24,40 @@
       font-size: $numeric-input-bigger-small-icon-size;
     }
   }
+
+  div.e-bigger.e-numeric.e-input-group,
+  .e-bigger div.e-numeric.e-input-group,
+  span.e-bigger.e-numeric.e-input-group,
+  .e-bigger span.e-numeric.e-input-group {
+    &.e-prepend-wrapper,
+    &.e-append-wrapper {
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+        top: $numeric-bigger-prepend-label-bottom-top;
+      }
+
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+        top: $numeric-bigger-prepend-label-top-top;
+      }
+
+      &.e-outline {
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+          top: $numeric-bigger-prepend-outline-label-bottom-top;
+        }
+
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+          top: $numeric-bigger-prepend-outline-label-top-top;
+        }
+      }
+
+      &.e-filled {
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+          top: $numeric-bigger-prepend-filled-label-bottom-top;
+        }
+
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+          top: $numeric-bigger-prepend-filled-label-top-top;
+        }
+      }
+    }
+  }
 }

package/styles/numerictextbox/_bootstrap-dark-definition.scss

@@ -1,6 +1,26 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $numeric-skin-name: 'bootstrap' !default;
 $numeric-input-icon-size: 12px !default;
 $numeric-input-bigger-icon-size: 14px !default;
+$numric-zero-padding-margin: 0 !default;
 
 //enddefault
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 17px !default;
+$numeric-prepend-label-top-top: 18px !default;
+$numeric-prepend-outline-label-bottom-top: 16px !default;
+$numeric-prepend-outline-label-top-top: 17px !default;
+$numeric-prepend-filled-label-bottom-top: 16px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-label-top-top: -15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-outline-label-top-top: -15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: -15px !default;

package/styles/numerictextbox/_bootstrap-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $numeric-skin-name: 'bootstrap' !default;
 $numeric-input-icon-size: 12px !default;
 $numeric-input-bigger-icon-size: 14px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 17px !default;
+$numeric-prepend-label-top-top: 18px !default;
+$numeric-prepend-outline-label-bottom-top: 16px !default;
+$numeric-prepend-outline-label-top-top: 17px !default;
+$numeric-prepend-filled-label-bottom-top: 16px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-label-top-top: 18px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-outline-label-top-top: 17px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 20px !default;

package/styles/numerictextbox/_bootstrap4-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $numeric-skin-name: 'bootstrap4' !default;
 $numeric-input-icon-size: 8px !default;
 $numeric-input-bigger-icon-size: 10px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-outline-label-top-top: 15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: 15px !default;

package/styles/numerictextbox/_bootstrap5-dark-definition.scss

@@ -1 +1,23 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+$numeric-skin-name: $skin-name !default;
+$numeric-input-icon-size: 14px !default;
+$numeric-input-bigger-icon-size: 16px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 17px !default;
+$numeric-bigger-prepend-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-outline-label-top-top: 15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: 17px !default;

package/styles/numerictextbox/_bootstrap5-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 16px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 17px !default;
+$numeric-bigger-prepend-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-outline-label-top-top: 15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: 17px !default;

package/styles/numerictextbox/_bootstrap5.3-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 16px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 17px !default;
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-outline-label-top-top: 15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: 17px !default;

package/styles/numerictextbox/_fabric-dark-definition.scss

@@ -1,6 +1,26 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 //default
 $numeric-skin-name: 'fabric' !default;
 $numeric-input-icon-size: 12px !default;
 $numeric-input-bigger-icon-size: 12px !default;
+$numric-zero-padding-margin: 0 !default;
 
 //enddefault
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 20px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 20px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 25px !default;
+$numeric-bigger-prepend-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-label-top-top: -15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-outline-label-top-top: -15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-filled-label-top-top: -15px !default;

package/styles/numerictextbox/_fabric-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $numeric-skin-name: 'fabric' !default;
 $numeric-input-icon-size: 12px !default;
 $numeric-input-bigger-icon-size: 12px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 20px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 20px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 25px !default;
+$numeric-bigger-prepend-label-bottom-top: 20px !default;
+$numeric-bigger-prepend-label-top-top: 20px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-outline-label-top-top: 20px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 20px !default;
+$numeric-bigger-prepend-filled-label-top-top: 20px !default;

package/styles/numerictextbox/_fluent-dark-definition.scss

@@ -1 +1,24 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+$numeric-skin-name: $skin-name !default;
+$numeric-input-icon-size: 16px !default;
+$numeric-input-bigger-icon-size: 20px !default;
+$numeric-input-small-icon-size: 14px !default;
+$numeric-input-bigger-small-icon-size: 18px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-outline-label-top-top: 18px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/numerictextbox/_fluent-definition.scss

@@ -1,5 +1,24 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 16px !default;
 $numeric-input-bigger-icon-size: 20px !default;
 $numeric-input-small-icon-size: 14px !default;
 $numeric-input-bigger-small-icon-size: 18px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-outline-label-top-top: 18px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/numerictextbox/_fluent2-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 18px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: -10px !default;
+$numeric-prepend-label-top-top: -15px !default;
+$numeric-prepend-outline-label-bottom-top: -11px !default;
+$numeric-prepend-outline-label-top-top: -15px !default;
+$numeric-prepend-filled-label-bottom-top: 7px !default;
+$numeric-prepend-filled-label-top-top: -10px !default;
+$numeric-bigger-prepend-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-label-top-top: -15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: -10px !default;
+$numeric-bigger-prepend-outline-label-top-top: -15px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 10px !default;
+$numeric-bigger-prepend-filled-label-top-top: -15px !default;

package/styles/numerictextbox/_fusionnew-definition.scss

@@ -1,3 +1,22 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
 $numeric-skin-name: $skin-name !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 16px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 15px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 15px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-outline-label-top-top: 18px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/numerictextbox/_highcontrast-definition.scss

@@ -1,3 +1,23 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $numeric-skin-name: 'highcontrast' !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 12px !default;
+$numric-zero-padding-margin: 0 !default;
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: 20px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: 20px !default;
+$numeric-prepend-filled-label-bottom-top: 15px !default;
+$numeric-prepend-filled-label-top-top: 20px !default;
+
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 20px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 20px !default;
+$numeric-bigger-prepend-outline-label-top-top: 18px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 20px !default;

package/styles/numerictextbox/_highcontrast-light-definition.scss

@@ -1,6 +1,26 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 //default
 $numeric-skin-name: 'highcontrast' !default;
 $numeric-input-icon-size: 14px !default;
 $numeric-input-bigger-icon-size: 12px !default;
+$numric-zero-padding-margin: 0 !default;
 
 //enddefault
+$numeric-bigger-min-height: 40px !default;
+$numeric-min-height: 33px !default;
+$numeric-zero-height: 0 !default;
+
+$numeric-prepend-label-bottom-top: 15px !default;
+$numeric-prepend-label-top-top: -15px !default;
+$numeric-prepend-outline-label-bottom-top: 15px !default;
+$numeric-prepend-outline-label-top-top: -15px !default;
+$numeric-prepend-filled-label-bottom-top: 17px !default;
+$numeric-prepend-filled-label-top-top: -8px !default;
+$numeric-bigger-prepend-label-bottom-top: 18px !default;
+$numeric-bigger-prepend-label-top-top: 20px !default;
+$numeric-bigger-prepend-outline-label-bottom-top: 20px !default;
+$numeric-bigger-prepend-outline-label-top-top: 18px !default;
+$numeric-bigger-prepend-filled-label-bottom-top: 19px !default;
+$numeric-bigger-prepend-filled-label-top-top: 20px !default;

package/styles/numerictextbox/_layout.scss

@@ -1,10 +1,13 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+
 .e-numeric-container {
   width: 100%;
 }
 
 .e-content-placeholder.e-numeric.e-placeholder-numeric {
   background-size: 300px 33px;
-  min-height: 33px;
+  min-height: $numeric-min-height;
 }
 
 // Hidden element styles
@@ -15,10 +18,69 @@
 .e-input-group.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden,
 .e-float-input.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden {
   border: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
+  height: $numeric-zero-height;
+  margin: $numric-zero-padding-margin;
+  padding: $numric-zero-padding-margin;
   text-indent: 0;
   visibility: hidden;
-  width: 0;
+  width: $numric-zero-padding-margin;
+}
+
+div.e-numeric.e-input-group,
+span.e-numeric.e-input-group {
+  &.e-prepend-wrapper,
+  &.e-append-wrapper {
+    &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+      top: $numeric-prepend-label-bottom-top;
+    }
+
+    &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+      top: $numeric-prepend-label-top-top;
+    }
+
+    &.e-outline {
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+        top: $numeric-prepend-outline-label-bottom-top;
+      }
+
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+        top: $numeric-prepend-outline-label-top-top;
+      }
+    }
+
+    &.e-filled {
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+        top: $numeric-prepend-filled-label-bottom-top;
+      }
+
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+        top: $numeric-prepend-filled-label-top-top;
+      }
+      @if ($skin-name == 'Material3') {
+        div.e-prepend-template {
+          padding: 18px 8px 8px 0;
+        }
+        div.e-append-template {
+          padding: 18px 0 8px 8px;
+        }
+      }
+    }
+  }
+}
+
+@if ($skin-name == 'tailwind3' or $skin-name == 'fluent2' or $skin-name == 'FluentUI') {
+  .e-numeric.e-input-group.e-prepend-wrapper.e-filled input,
+  .e-numeric.e-input-group.e-append-wrapper.e-filled input {
+    height: auto;
+  }
+}
+
+.e-numeric.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
+.e-numeric.e-input-group.e-prepend-wrapper input.e-input {
+  padding-left: 0;
+}
+
+.e-numeric.e-rtl.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
+.e-numeric.e-rtl.e-input-group.e-prepend-wrapper input.e-input {
+  padding-right: 0;
 }