;
-
- _languageChanged?: boolean = false;
-
- _delimiter?: string;
-
- _groupSeparator?: string;
-
@i18n("@ui5/webcomponents")
static i18nBundle: I18nBundle;
+ get _innerNumberInput(): NumberInput {
+ return this.shadowRoot!.querySelector("[ui5-number-input]")!;
+ }
+
async formElementAnchor() {
return (await this.getFocusDomRefAsync() as UI5Element)?.getFocusDomRefAsync();
}
@@ -323,21 +241,21 @@ class StepInput extends UI5Element implements IFormInputElement {
const validity = this.formValidity;
if (validity.patternMismatch) {
- return StepInput.i18nBundle.getText(STEPINPUT_PATTER_MISSMATCH, this.valuePrecision);
+ return StepInput.i18nBundle.getText(NUMBERINPUT_PATTER_MISSMATCH, this.valuePrecision);
}
if (validity.rangeUnderflow) {
- return StepInput.i18nBundle.getText(STEPINPUT_RANGEUNDERFLOW, this.min as number);
+ return StepInput.i18nBundle.getText(NUMBERINPUT_RANGEUNDERFLOW, this.min as number);
}
if (validity.rangeOverflow) {
- return StepInput.i18nBundle.getText(STEPINPUT_RANGEOVERFLOW, this.max as number);
+ return StepInput.i18nBundle.getText(NUMBERINPUT_RANGEOVERFLOW, this.max as number);
}
- return ""; // No error
+ return "";
}
get formValidity(): ValidityStateFlags {
return {
- patternMismatch: this.value !== 0 && !this._isValueWithCorrectPrecision,
+ patternMismatch: this.value !== 0 && (this._innerNumberInput?.formValidity.patternMismatch ?? false),
rangeOverflow: this.max !== undefined && this.value >= this.max,
rangeUnderflow: this.min !== undefined && this.value <= this.min,
};
@@ -347,501 +265,58 @@ class StepInput extends UI5Element implements IFormInputElement {
return this.value.toString();
}
- get type() {
- return InputType.Text;
- }
-
- // icons-related
-
- get decIconTitle() {
- return StepInput.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
- }
-
- get incIconTitle() {
- return StepInput.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
- }
-
- get _decIconClickable() {
- return !this._decIconDisabled && !this.readonly && !this.disabled;
- }
-
- get _incIconClickable() {
- return !this._incIconDisabled && !this.readonly && !this.disabled;
- }
-
- get _isFocused() {
- return this.focused;
- }
-
- get _displayValue() {
- if (this._languageChanged) {
- this._languageChanged = false;
- this.valueState = ValueState.None; // to reset the value state visual
- return this._formatNumber(this.value);
- }
- // For the cases when there is set value precision but the input value is not with correct precision we don't need to format it
- const value = this.input?.value && !this._isValueWithCorrectPrecision ? this.input.value : this._formatNumber(this.value);
- if ((this.value === 0) || (Number.isInteger(this.value))) {
- return value;
- }
-
- if (this.input && this.value === this._parseNumber(this.input.value)) { // For the cases where the number is fractional and is ending with 0s.
- return this.input.value;
- }
-
- return value;
- }
-
- get accInfo(): InputAccInfo {
- return {
- "ariaRequired": this.required,
- "ariaLabel": getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this),
- };
- }
-
- get inputAttributes() {
- return {
- min: this.min === undefined ? undefined : this.min,
- max: this.max === undefined ? undefined : this.max,
- step: this.step,
- };
- }
-
- onBeforeRendering() {
- this._setButtonState();
- }
- onEnterDOM() {
- this._setupLanguageChangeHandler();
- }
-
- onExitDOM() {
- this._cleanupLanguageChangeHandler();
- }
-
- _setupLanguageChangeHandler() {
- if (this._languageChangeHandler) {
- return;
- }
-
- this._languageChangeHandler = () => {
- this._formatter = undefined;
- this._languageChanged = true;
- this._delimiter = undefined;
- this._groupSeparator = undefined;
-
- return Promise.resolve();
- };
- attachLanguageChange(this._languageChangeHandler);
- }
-
- _cleanupLanguageChangeHandler() {
- if (this._languageChangeHandler) {
- detachLanguageChange(this._languageChangeHandler);
- this._languageChangeHandler = undefined;
- }
+ getFocusDomRef(): HTMLElement | undefined {
+ return this._innerNumberInput?.getFocusDomRef();
}
- get formatter(): NumberFormat {
- if (!this._formatter) {
- this._formatter = NumberFormat.getFloatInstance({
- decimals: this.valuePrecision,
- });
- }
-
- return this._formatter;
+ get _associatedLabelText(): string | undefined {
+ return getAssociatedLabelForTexts(this) || undefined;
}
- get delimiter() {
- if (!this._delimiter) {
- const localeData = getCachedLocaleDataInstance(getLocale());
- this._delimiter = localeData.getNumberSymbol("decimal") || ".";
- }
-
- return this._delimiter;
+ _onNiChange(e: Event) {
+ e.stopPropagation();
+ this._syncFromInner();
+ this.fireDecoratorEvent("change");
}
- get groupSeparator() {
- if (!this._groupSeparator) {
- const localeData = getCachedLocaleDataInstance(getLocale());
- this._groupSeparator = localeData.getNumberSymbol("group") || ",";
- }
-
- return this._groupSeparator;
- }
-
- get input(): Input {
- return this.shadowRoot!.querySelector("[ui5-input]")!;
- }
-
- get innerInput(): HTMLInputElement {
- return this.input.shadowRoot!.querySelector("input")!;
- }
-
- get inputOuter() {
- return this.shadowRoot!.querySelector(".ui5-step-input-input")!;
- }
-
- _onButtonFocusOut() {
- setTimeout(() => {
- if (!this._inputFocused && !this.shadowRoot!.activeElement) {
- this.inputOuter.removeAttribute("focused");
- }
- }, 0);
- }
-
- _onInput(e: CustomEvent) {
+ _onNiInput(e: CustomEvent) {
+ e.stopPropagation();
const prevented = !this.fireDecoratorEvent("input", { inputType: e.detail.inputType });
-
if (prevented) {
e.preventDefault();
}
}
- _onInputFocusIn() {
- this._inputFocused = true;
- }
-
- _onInputFocusOut() {
- this._inputFocused = false;
- this._onInputChange();
- }
-
- _onMouseWheel(e: WheelEvent) {
- if (this.disabled || this.readonly || !this._isFocused) {
- return;
- }
-
- e.preventDefault();
-
- const isScrollUp = e.deltaY < 0;
- const modifier = isScrollUp ? this.step : -this.step;
- this._modifyValue(modifier, true);
- }
-
- _setButtonState() {
- this._decIconDisabled = this.min !== undefined && this.value <= this.min;
- this._incIconDisabled = this.max !== undefined && this.value >= this.max;
- }
-
- _validate() {
- if (this._initialValueState === undefined) {
- this._initialValueState = this.valueState;
- }
-
- this._updateValueState();
- }
-
- _updateValueState() {
- const isWithinRange = (this.min === undefined || this._parseNumber(this.input.value) >= this.min)
- && (this.max === undefined || this._parseNumber(this.input.value) <= this.max);
- const isValueWithCorrectPrecision = this._isValueWithCorrectPrecision;
- const previousValueState = this.valueState;
- const isValid = isWithinRange && isValueWithCorrectPrecision;
-
- this.valueState = isValid ? ValueState.None : ValueState.Negative;
-
- const eventPrevented = !this.fireDecoratorEvent("value-state-change", {
- valueState: this.valueState,
- valid: isValid,
+ _onNiValueStateChange(e: CustomEvent) {
+ e.stopPropagation();
+ const prevented = !this.fireDecoratorEvent("value-state-change", {
+ valueState: e.detail.valueState,
+ valid: e.detail.valid,
});
-
- if (eventPrevented) {
- this.valueState = previousValueState;
- }
- }
-
- _preciseValue(value: number) {
- const pow = 10 ** this.valuePrecision;
- return Math.round(value * pow) / pow;
- }
-
- _fireChangeEvent() {
- if (this._previousValue !== this.value) {
- this._previousValue = this.value;
- this.fireDecoratorEvent("change");
- }
- }
-
- /**
- * Value modifier - modifies the value of the component, validates the new value and enables/disables increment and
- * decrement buttons according to the value and min/max values (if set). Fires `change` event when requested
- * @private
- * @param modifier modifies the value of the component with the given modifier (positive or negative)
- * @param fireChangeEvent if `true`, fires `change` event when the value is changed
- */
- _modifyValue(modifier: number, fireChangeEvent = false) {
- let value;
- value = this.value + modifier;
- if (this.min !== undefined && value < this.min) {
- value = this.min;
- }
- if (this.max !== undefined && value > this.max) {
- value = this.max;
- }
- value = this._preciseValue(value);
- if (value !== this.value) {
- this.value = value;
- this.input.value = this._formatNumber(value);
- this._validate();
- this._setButtonState();
- this.focused = true;
- this.inputOuter.setAttribute("focused", "");
- if (fireChangeEvent) {
- this._fireChangeEvent();
- } else {
- this.input.focus();
- }
- }
- }
-
- /**
- * Formats a number with thousands separator based on current locale
- * @private
- */
- _formatNumber(value: number): string {
- return this.formatter.format(value);
- }
-
- /**
- * Parses formatted number string back to numeric value
- * @private
- */
- _parseNumber(formattedValue: string): number {
- return this.formatter.parse(formattedValue) as number;
- }
-
- _incValue() {
- if (this._incIconClickable && !this.disabled && !this.readonly) {
- this._modifyValue(this.step, true);
- this._previousValue = this.value;
- }
- }
-
- _decValue() {
- if (this._decIconClickable && !this.disabled && !this.readonly) {
- this._modifyValue(-this.step, true);
- this._previousValue = this.value;
- }
- }
-
- get _isValueWithCorrectPrecision() {
- const delimiter = this.delimiter;
- // check if the value will be displayed with correct precision
- // _displayValue has special formatting logic
- if (this.valuePrecision === 0 && !this.input?.value.includes(delimiter) && ((this.value === 0) || (Number.isInteger(this.value)))) {
- // integers and zero will be formatted with toFixed, so thex y're always valid
- return true;
- }
- const numberParts = this.input?.value?.split(delimiter);
- const decimalPartLength = numberParts?.length > 1 ? numberParts[1].length : 0;
-
- return decimalPartLength === this.valuePrecision;
- }
-
- _onInputChange() {
- this._setDefaultInputValueIfNeeded();
- const updatedValue = this._removeGroupSeparators(this.input.value);
- const inputValue = this._parseNumber(updatedValue);
- if (this._isValueChanged(inputValue)) {
- this._updateValueAndValidate(Number.isNaN(inputValue) ? this.min || 0 : inputValue);
- this.innerInput.value = this.input.value;
+ if (prevented) {
+ // Inner already applied the new valueState — revert it back to the outer's current value
+ this._innerNumberInput.valueState = this.valueState;
+ } else {
+ this.valueState = e.detail.valueState;
}
}
- _setDefaultInputValueIfNeeded() {
- if (this.input.value === "") {
- const defaultValue = this._formatNumber(this.min || 0);
- this.input.value = defaultValue;
- this.innerInput.value = defaultValue; // we need to update inner input value as well, to avoid empty input scenario
+ _syncFromInner() {
+ const ni = this._innerNumberInput;
+ if (!ni) {
+ return;
}
+ this.value = ni.value;
+ this.valueState = ni.valueState;
}
- _isValueChanged(inputValue: number) {
- const isValueWithCorrectPrecision = this._isValueWithCorrectPrecision;
- // Treat values as distinct when modified to match a specific precision (e.g., from 3.4000 to 3.40),
- // even if JavaScript sees them as equal, to correctly update valueState based on expected valuePrecision.
- const isPrecisionCorrectButValueStateError = isValueWithCorrectPrecision && this.valueState === ValueState.Negative;
-
- return this.value !== this._previousValue
- || this.value !== inputValue
- || inputValue === 0
- || !isValueWithCorrectPrecision
- || isPrecisionCorrectButValueStateError
- || Number.isNaN(inputValue);
- }
-
- _updateValueAndValidate(inputValue: number) {
- this.value = inputValue;
- this._validate();
- this._setButtonState();
- this._fireChangeEvent();
- }
-
- _onfocusin() {
- this.focused = true;
- this._previousValue = this.value;
- }
-
- _onfocusout() {
- this.focused = false;
- this._previousValue = undefined;
- }
-
- _onInputRequestSubmit() {
+ _onRequestSubmit() {
if (this._internals.form) {
submitForm(this);
}
}
-
- _onkeydown(e: KeyboardEvent) {
- let preventDefault = true;
- if (this.disabled || this.readonly) {
- return;
- }
-
- if (isEnter(e)) {
- this._onInputChange();
- return;
- }
-
- if (isUp(e)) {
- // step up
- this._modifyValue(this.step);
- } else if (isDown(e)) {
- // step down
- this._modifyValue(-this.step);
- } else if (isEscape(e)) {
- // return previous value
- if (this._previousValue === undefined) {
- this._previousValue = this.value;
- }
- this.value = this._previousValue;
- this.input.value = this.value.toFixed(this.valuePrecision);
- } else if (this.max !== undefined && (isPageUpShift(e) || isUpShiftCtrl(e))) {
- // step to max
- this._modifyValue(this.max - this.value);
- } else if (this.min !== undefined && (isPageDownShift(e) || isDownShiftCtrl(e))) {
- // step to min
- this._modifyValue(this.min - this.value);
- } else if (!isUpCtrl(e) && !isDownCtrl(e) && !isUpShift(e) && !isDownShift(e)) {
- preventDefault = false;
- }
-
- if (e.key && e.key.length !== 1) {
- return;
- }
-
- const caretPosition = this._getCaretPosition();
- const inputValue = this.innerInput.value;
- const typedValue = this._getValueOnkeyDown(e, inputValue, caretPosition!);
- const parsedValue = this._parseNumber(typedValue);
- const isValidTypedValue = this._isInputValueValid(typedValue, parsedValue);
-
- if (preventDefault || !isValidTypedValue) {
- e.preventDefault();
- }
-
- if (caretPosition === 0 && isMinus(e)) {
- this._updateValueAndValidate(parsedValue);
- }
- }
-
- _getCaretPosition() {
- return this.input.getDomRef()!.querySelector("input")!.selectionStart;
- }
-
- _getValueOnkeyDown(e: KeyboardEvent, inputValue: string, cursorPosition?: number) {
- const typedValue = `${inputValue.substring(0, cursorPosition)}${e.key}${inputValue.substring(cursorPosition!)}`;
- const updatedValue = this._removeGroupSeparators(typedValue);
- return updatedValue;
- }
-
- _removeGroupSeparators(value: string) {
- const groupSeparator = this.groupSeparator;
- return value.replaceAll(groupSeparator, "");
- }
-
- _isInputValueValid(typedValue: string, parsedValue: number) {
- return !Number.isNaN(parsedValue) && !/, {2,}/.test(typedValue);
- }
-
- _decSpin(e: MouseEvent) {
- if (this._isFocused || this._decIconDisabled) {
- e.preventDefault();
- }
- if (!this._decIconDisabled) {
- this._spinValue(false, true);
- } else {
- this.input.focus();
- }
- }
-
- _incSpin(e: MouseEvent) {
- if (this._isFocused || this._incIconDisabled) {
- e.preventDefault();
- }
- if (!this._incIconDisabled) {
- this._spinValue(true, true);
- } else {
- this.input.focus();
- }
- }
-
- /**
- * Calculates the time which should be waited until _spinValue function is called.
- */
- _calcWaitTimeout() {
- this._speed *= ACCELERATION;
- this._waitTimeout = ((this._waitTimeout - this._speed) < MIN_WAIT_TIMEOUT ? MIN_WAIT_TIMEOUT : (this._waitTimeout - this._speed));
- return this._waitTimeout;
- }
-
- /**
- * Called when the increment or decrement button is pressed and held to set new value.
- * @private
- * @param increment - is this the increment button or not so the values should be spin accordingly up or down
- * @param resetVariables - whether to reset the spin-related variables or not
- */
- _spinValue(increment: boolean, resetVariables = false) {
- if (resetVariables) {
- this._waitTimeout = INITIAL_WAIT_TIMEOUT;
- this._speed = INITIAL_SPEED;
- this._btnDown = true;
- }
- this._spinTimeoutId = setTimeout(() => {
- if (this._btnDown) {
- this._spinStarted = true;
- this._modifyValue(increment ? this.step : -this.step);
- this._setButtonState();
- if ((!this._incIconDisabled && increment) || (!this._decIconDisabled && !increment)) {
- this._spinValue(increment);
- } else {
- this._resetSpin();
- this._fireChangeEvent();
- }
- }
- }, this._calcWaitTimeout());
- }
-
- /**
- * Resets spin process
- */
- _resetSpin() {
- clearTimeout(this._spinTimeoutId);
- this._btnDown = false;
- this._spinStarted = false;
- }
-
- /**
- * Resets spin process when mouse outs + or - buttons
- */
- _resetSpinOut() {
- if (this._btnDown) {
- this._resetSpin();
- this._fireChangeEvent();
- }
- }
}
+
StepInput.define();
export default StepInput;
diff --git a/packages/main/src/StepInputTemplate.tsx b/packages/main/src/StepInputTemplate.tsx
index ade109972401e..fb362d27de4c9 100644
--- a/packages/main/src/StepInputTemplate.tsx
+++ b/packages/main/src/StepInputTemplate.tsx
@@ -1,94 +1,31 @@
import type StepInput from "./StepInput.js";
-import Icon from "./Icon.js";
-import Input from "./Input.js";
-
-import less from "@ui5/webcomponents-icons/dist/less.js";
-import add from "@ui5/webcomponents-icons/dist/add.js";
+import NumberInput from "./NumberInput.js";
export default function StepInputTemplate(this: StepInput) {
return (
-
+
);
}
diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts
index d916b641dfaca..17b1c6a2a47c5 100644
--- a/packages/main/src/bundle.esm.ts
+++ b/packages/main/src/bundle.esm.ts
@@ -106,6 +106,7 @@ import SliderHandle from "./SliderHandle.js";
import SliderScale from "./SliderScale.js";
import SplitButton from "./SplitButton.js";
import StepInput from "./StepInput.js";
+import NumberInput from "./NumberInput.js";
import RangeSlider from "./RangeSlider.js";
import Switch from "./Switch.js";
import MessageStrip from "./MessageStrip.js";
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 98ce112d64416..f4c19376b3b04 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -787,18 +787,17 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
#XACT: ARIA label for slider tooltip input
SLIDER_TOOLTIP_INPUT_LABEL = Current Value
-#XTOL: tooltip for decrease button of the StepInput
-STEPINPUT_DEC_ICON_TITLE=Decrease
+#XTOL: tooltip for decrease button of the NumberInput
+NUMBERINPUT_DEC_ICON_TITLE=Decrease
-#XTOL: tooltip for increase button of the StepInput
-STEPINPUT_INC_ICON_TITLE=Increase
+#XTOL: tooltip for increase button of the NumberInput
+NUMBERINPUT_INC_ICON_TITLE=Increase
-STEPINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
+NUMBERINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
-STEPINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of {0}.
-
-STEPINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of {0}.
+NUMBERINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of {0}.
+NUMBERINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of {0}.
#XACT: Aria information for the Split Button
SPLIT_BUTTON_DESCRIPTION=Split Button
diff --git a/packages/main/src/themes/NumberInput.css b/packages/main/src/themes/NumberInput.css
new file mode 100644
index 0000000000000..931d4c62158c9
--- /dev/null
+++ b/packages/main/src/themes/NumberInput.css
@@ -0,0 +1,321 @@
+@import "./FormComponents.css";
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+@import "./InputSharedStyles.css";
+
+:host(:not([hidden])) {
+ display: inline-block;
+ line-height: normal;
+ letter-spacing: normal;
+ word-spacing: normal;
+}
+
+:host([disabled]) {
+ opacity: var(--_ui5_input_disabled_opacity);
+ cursor: default;
+ pointer-events: none;
+ background-color: var(--_ui5-input_disabled_background);
+ border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host {
+ color: var(--sapField_TextColor);
+ background-color: var(--sapField_Background);
+ border: var(--_ui5_number_input_border_style);
+ border-radius: var(--sapField_BorderCornerRadius);
+ box-sizing: border-box;
+ height: var(--_ui5_input_height);
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ margin: var(--_ui5_input_margin_top_bottom) 0;
+ min-width: var(--_ui5_number_input_min_width);
+ text-align: right;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+[ui5-input] {
+ --ui5_input_focus_pseudo_element_content: none;
+}
+
+:host .ui5-number-input-input {
+ text-align: inherit;
+ height: inherit;
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])){
+ box-shadow: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+ border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([readonly]:not([disabled])) {
+ border-width: var(--sapElement_BorderWidth);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+ border-style: var(--_ui5_number_input_error_warning_information_border_style);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+ background-color: var(--_ui5_number_input_border_color_hover);
+ border: var(--_ui5_number_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+ background-color: var(--sapField_Hover_Background);
+ border: var(--_ui5_number_input_border_style_hover);
+ box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
+ box-shadow: var(--sapField_Hover_SuccessShadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+ box-shadow: var(--sapField_Hover_InformationShadow);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
+ box-shadow: var(--sapField_Hover_WarningShadow);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
+ box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
+ background-color: var(--_ui5_number_input_button_state_hover_background_color);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
+ background-color: var(--sapField_Focus_Background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]) {
+ background-color: var(--_ui5_number_input_error_focused_background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]:hover) {
+ background-color: var(--_ui5_number_input_error_hover_background);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+ position: absolute;
+ content: "";
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ outline: none;
+ pointer-events: none;
+ border-radius: var(--sapField_BorderCornerRadius);
+ border-style: var(--_ui5_number_input_after_border_style);
+ z-index: 0;
+ border-width: 0px;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
+ border-color: var(--sapField_InformationColor);
+ border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+ border-color: var(--sapField_WarningColor);
+ border-width: 2px;
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
+ border-color: var(--sapField_SuccessColor);
+ border-width: 1px;
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
+ border-color: var(--sapField_InvalidColor);
+ border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state])::after {
+ border-width: var(--_ui5_input_state_border_width);
+}
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input {
+ background-color: var(--_ui5_number_input_error_background_color);
+}
+
+:host([value-state]:not([value-state="None"]) .ui5-number-input-input[focused]) {
+ outline: none;
+}
+
+:host .ui5-number-input-input {
+ width: 100%;
+ color: inherit;
+ background-color: inherit;
+ border: var(--_ui5_number_input_input_border);
+ box-sizing: border-box;
+ vertical-align: top;
+ margin-top: var(--_ui5_number_input_input_margin_top);
+ min-width: var(--_ui5_number_input_min_width);
+ position: relative;
+ outline: none;
+ line-height: inherit;
+ letter-spacing: inherit;
+ word-spacing: inherit;
+}
+
+:host .ui5-number-input-root.ui5-number-input-root--with-buttons .ui5-number-input-input {
+ padding-inline-start: var(--_ui5_number_input_padding_with_step_buttons);
+ padding-inline-end: var(--_ui5_number_input_padding_with_step_buttons);
+}
+
+:host .ui5-number-input-input[readonly] {
+ padding: 0;
+}
+
+:host .ui5-number-input-input:hover,
+:host .ui5-number-input-input[focused]{
+ box-shadow: none;
+}
+
+:host .ui5-number-input-root {
+ line-height: inherit;
+ letter-spacing: inherit;
+ word-spacing: inherit;
+ height: inherit;
+}
+
+:host .ui5-number-input-input::part(input) {
+ white-space: nowrap;
+}
+
+:host .ui5-number-input-input[text-align=left]::part(input) {
+ text-align: left;
+}
+
+:host .ui5-number-input-input[text-align=center]::part(input) {
+ text-align: center;
+}
+
+:host .ui5-number-input-input[text-align=right]::part(input) {
+ text-align: right;
+}
+
+::slotted([slot="valueStateMessage"]) {
+ text-align: left;
+}
+
+:host .ui5-step-icon {
+ position: absolute;
+ display: var(--_ui5_number_input_button_display);
+ height: 2rem;
+ height: 100%;
+ background-color: var(--_ui5_number_input_button_background_color);
+ z-index: 0;
+}
+
+:host .ui5-step-icon[focused] {
+ border: none;
+ outline: none;
+}
+
+:host .ui5-step-icon.ui5-step-dec {
+ left: var(--_ui5_number_input_button_left);
+ z-index: 1;
+}
+
+:host .ui5-step-icon.ui5-step-inc {
+ right: var(--_ui5_number_input_button_right);
+}
+
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable),
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):active,
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):hover {
+ opacity: 0.5;
+ background-color: transparent;
+ color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:hover,
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:active {
+ background-color: var(--sapField_Background);
+ color: var(--sapContent_IconColor);
+}
+
+:host .ui5-number-input-input[focused]::after {
+ position: absolute;
+ content: "";
+ border: var(--_ui5_number_input_input_border_focused_after);
+ top: var(--_ui5_number_input_input_border_top_bottom_focused_after);
+ right: 0px;
+ bottom: var(--_ui5_number_input_input_border_bottom_focused_after);
+ border-radius: var(--_ui5_number_input_input_border_radius_focused_after);
+ left: 0px;
+ outline: none;
+ pointer-events: none;
+ z-index: 1;
+}
+
+:host([readonly]) .ui5-number-input-input[focused]::after{
+ top: var(--_ui5_input_readonly_focus_offset);
+ bottom: var(--_ui5_input_readonly_focus_offset);
+ left: var(--_ui5_input_readonly_focus_offset);
+ right: var(--_ui5_input_readonly_focus_offset);
+ border-radius: var(--_ui5_input_readonly_focus_border_radius);
+ border-color: var(--sapContent_FocusColor);
+}
+
+:host .ui5-number-input-input[focused] {
+ outline: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+ border-color: var(--_ui5_number_input_input_information_border_color_focused_after);
+ top: var(--_ui5_number_input_input_border_top_information_focused_after);
+ bottom: var(--_ui5_number_input_input_border_bottom_information_focused_after);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+ border-color: var(--_ui5_number_input_input_warning_border_color_focused_after);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+ border-color: var(--_ui5_number_input_input_success_border_color_focused_after);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+ border-color: var(--_ui5_number_input_input_error_border_color_focused_after);
+}
+
+/* Disable spin buttons in Chrome, Safari, Edge, Opera */
+:host .ui5-number-input-input::-webkit-outer-spin-button,
+:host .ui5-number-input-input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+:host([disabled]) .ui5-step-icon {
+ background-color: var(--_ui5_number_input_disabled_button_background);
+}
+
+:host([disabled]) .ui5-step-icon [ui5-icon] {
+ color: var(--sapField_ReadOnly_BorderColor);
+}
diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css
index 8fad78bff4bf8..deb7dfa70eb25 100644
--- a/packages/main/src/themes/StepInput.css
+++ b/packages/main/src/themes/StepInput.css
@@ -1,279 +1,3 @@
-@import "./FormComponents.css";
-@import "./InvisibleTextStyles.css";
-@import "./InputIcon.css";
-@import "./InputSharedStyles.css";
-
:host(:not([hidden])) {
display: inline-block;
- line-height: normal;
- letter-spacing: normal;
- word-spacing: normal;
-}
-
-:host {
- color: var(--sapField_TextColor);
- background-color: var(--sapField_Background);
- border: var(--_ui5_step_input_border_style);
- border-radius: var(--sapField_BorderCornerRadius);
- box-sizing: border-box;
- height: var(--_ui5_input_height);
- position: relative;
- isolation: isolate;
- margin: var(--_ui5_input_margin_top_bottom) 0;
- min-width: var(--_ui5_step_input_min_width);
- text-align: right;
- user-select: none;
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
-}
-
-[ui5-input] {
- --ui5_input_focus_pseudo_element_content: none;
-}
-
-:host .ui5-step-input-input {
- text-align: inherit;
- height: inherit;
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled])){
- box-shadow: none;
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled]):hover),
-:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
- background-color: var(--_ui5_step_input_border_color_hover);
- border: var(--_ui5_step_input_border_hover);
-}
-:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
-:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
- background-color: var(--sapField_Hover_Background);
- border: var(--_ui5_step_input_border_style_hover);
- box-shadow: var(--sapField_Hover_Shadow);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
- box-shadow: var(--sapField_Hover_SuccessShadow);
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
- box-shadow: var(--sapField_Hover_InformationShadow);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
- box-shadow: var(--sapField_Hover_WarningShadow);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
- box-shadow: var(--sapField_Hover_InvalidShadow);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
- background-color: var(--_ui5-step_input_button_state_hover_background_color);
-}
-
-:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
-:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
- background-color: var(--sapField_Focus_Background);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
-:host([value-state="None"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
- position: absolute;
- content: "";
- top: -1px;
- right: -1px;
- bottom: -1px;
- left: -1px;
- outline: none;
- pointer-events: none;
- border-radius: var(--sapField_BorderCornerRadius);
- border-style: var(--_ui5_input_error_warning_border_style);
- z-index: 0;
- border-width: 0px;
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
- border-color: var(--sapField_InformationColor);
- border-width: var(--_ui5_input_information_border_width);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
- border-color: var(--sapField_WarningColor);
- border-width: 2px;
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
- border-color: var(--sapField_SuccessColor);
- border-width: 1px;
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
- border-color: var(--sapField_InvalidColor);
- border-width: var(--_ui5_input_information_border_width);
-}
-
-:host([value-state])::after {
- border-width: var(--_ui5_input_state_border_width);
-}
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input {
- background-color: var(--_ui5_input_input_background_color);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
- background-color: var(--_ui5_step_input_input_error_background_color);
-}
-:host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
- outline: none;
-}
-
-:host .ui5-step-input-input {
- width: 100%;
- color: inherit;
- background-color: inherit;
- border: var(--_ui5_step_input_input_border);
- box-sizing: border-box;
- vertical-align: top;
- margin-top: var(--_ui5_step_input_input_margin_top);
- min-width: var(--_ui5_step_input_min_width);
- padding-inline-start: var(--_ui5_step_input_padding);
- padding-inline-end: var(--_ui5_step_input_padding);
- position: relative;
- outline: none;
- line-height: inherit;
- letter-spacing: inherit;
- word-spacing: inherit;
-}
-
-:host .ui5-step-input-input[readonly] {
- padding: 0;
-}
-
-:host .ui5-step-input-input:hover,
-:host .ui5-step-input-input[focused]{
- box-shadow: none;
-}
-
-:host .ui5-step-input-root {
- line-height: inherit;
- letter-spacing: inherit;
- word-spacing: inherit;
- height: inherit;
-}
-
-:host .ui5-step-input-input::part(input) {
- white-space: nowrap;
-}
-
-:host .ui5-step-input-input[text-align=left]::part(input) {
- text-align: left;
-}
-
-:host .ui5-step-input-input[text-align=center]::part(input) {
- text-align: center;
-}
-
-:host .ui5-step-input-input[text-align=right]::part(input) {
- text-align: right;
-}
-
-::slotted([slot="valueStateMessage"]) {
- text-align: left;
-}
-
-:host .ui5-step-icon {
- position: absolute;
- display: var(--_ui5_step_input_button_display);
- height: 2rem;
- height: 100%;
- background-color: var(--_ui5_step_input_button_background_color);
- z-index: 0;
-}
-
-:host .ui5-step-icon[focused] {
- border: none;
- outline: none;
-}
-
-:host .ui5-step-icon.ui5-step-dec {
- left: var(--_ui5_step_input_button_left);
- z-index: 1;
-}
-
-:host .ui5-step-icon.ui5-step-inc {
- right: var(--_ui5_step_input_button_right);
-}
-
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable),
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):active,
-:host .ui5-step-icon *:not(.ui5-step-input-icon--clickable):hover {
- opacity: 0.5;
- background-color: transparent;
- color: var(--sapContent_IconColor);
-}
-
-:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:hover,
-:host .ui5-step-icon :not(.ui5-step-input-icon--clickable) *:active {
- background-color: var(--sapField_Background);
- color: var(--sapContent_IconColor);
-}
-
-:host .ui5-step-input-input[focused]::after {
- position: absolute;
- content: "";
- border: var(--_ui5_step_input_input_border_focused_after);
- top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
- right: 0px;
- bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
- border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
- left: 0px;
- outline: none;
- pointer-events: none;
- z-index: 1;
-}
-
-:host .ui5-step-input-input[focused] {
- outline: none;
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
- border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
-}
-
-:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
- border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
-}
-
-:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
- border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
-}
-
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
- border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
-}
-
-/* Disable spin buttons in Chrome, Safari, Edge, Opera */
-:host .ui5-step-input-input::-webkit-outer-spin-button,
-:host .ui5-step-input-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-:host([disabled]) .ui5-step-icon {
- background-color: var(--_ui5_step_input_disabled_button_background);
-}
-
-:host([disabled]) .ui5-step-icon [ui5-icon] {
- color: var(--sapField_ReadOnly_BorderColor);
}
diff --git a/packages/main/src/themes/base/NumberInput-parameters.css b/packages/main/src/themes/base/NumberInput-parameters.css
new file mode 100644
index 0000000000000..7a89c0f0db5b4
--- /dev/null
+++ b/packages/main/src/themes/base/NumberInput-parameters.css
@@ -0,0 +1,32 @@
+:host {
+ --_ui5_number_input_error_focused_background: var(--sapField_Focus_Background);
+ --_ui5_number_input_button_state_hover_background_color: var(--sapField_Background);
+ --_ui5_number_input_error_hover_background: var(--sapField_Background);
+ --_ui5_number_input_border_style: 1px solid var(--sapField_BorderColor);;
+ --_ui5_number_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor);
+ --_ui5_number_input_error_warning_information_border_style: none;
+ --_ui5_number_input_after_border_style: var(--_ui5_input_error_warning_border_style);
+ --_ui5_number_input_error_background_color: var(--_ui5_input_input_background_color);
+ --_ui5_number_input_error_background_color_hover: var(--_ui5_number_input_input_error_background_color);
+ --_ui5_number_input_button_background_color:var(--sapField_Background);
+ --_ui5_number_input_input_border: 1px solid transparent;
+ --_ui5_number_input_input_margin_top: -0.0625rem;
+ --_ui5_number_input_button_display: inline-block;
+ --_ui5_number_input_button_left: 0;
+ --_ui5_number_input_button_right: 0;
+ --_ui5_number_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapField_Active_BorderColor);
+ --_ui5_number_input_input_border_top_bottom_focused_after: 0.0625rem;
+ --_ui5_number_input_input_border_bottom_focused_after: 0.0625rem;
+ --_ui5_number_input_input_border_top_information_focused_after: 0.0625rem;
+ --_ui5_number_input_input_border_bottom_information_focused_after: 0.0625rem;
+ --_ui5_number_input_input_border_radius_focused_after: 0;
+ --_ui5_number_input_input_information_border_color_focused_after: var(--sapField_BorderColor);
+ --_ui5_number_input_input_warning_border_color_focused_after: var(--sapField_BorderColor);
+ --_ui5_number_input_input_success_border_color_focused_after: var(--sapField_BorderColor);
+ --_ui5_number_input_input_error_border_color_focused_after: var(--sapField_BorderColor);
+ --_ui5_number_input_disabled_button_background: var(--sapField_ReadOnly_Background);
+ --_ui5_number_input_border_color_hover: var(--sapField_Hover_Background);
+ --_ui5_number_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
+ --_ui5_input_input_background_color: var(--sapField_InvalidBackground);
+ --_ui5_number_input_padding_with_step_buttons: 2.5rem;
+}
diff --git a/packages/main/src/themes/base/StepInput-parameters.css b/packages/main/src/themes/base/StepInput-parameters.css
deleted file mode 100644
index a203447b9be53..0000000000000
--- a/packages/main/src/themes/base/StepInput-parameters.css
+++ /dev/null
@@ -1,25 +0,0 @@
-:host {
- --_ui5_step_input_input_error_background_color: var(--sapField_InvalidBackground);
- --_ui5-step_input_button_state_hover_background_color: var(--sapField_Background);
- --_ui5_step_input_border_style: 1px solid var(--sapField_BorderColor);
- --_ui5_step_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor);
- --_ui5_step_input_button_background_color:var(--sapField_Background);
- --_ui5_step_input_input_border: 1px solid transparent;
- --_ui5_step_input_input_margin_top: -0.0625rem;
- --_ui5_step_input_button_display: inline-block;
- --_ui5_step_input_button_left: 0;
- --_ui5_step_input_button_right: 0;
- --_ui5_step_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
- --_ui5_step_input_input_border_top_bottom_focused_after: 0.0625rem;
- --_ui5_step_input_input_border_radius_focused_after: 0;
- --_ui5_step_input_input_information_border_color_focused_after: var(--sapField_BorderColor);
- --_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_BorderColor);
- --_ui5_step_input_input_success_border_color_focused_after: var(--sapField_BorderColor);
- --_ui5_step_input_input_error_border_color_focused_after: var(--sapField_BorderColor);
- --_ui5_step_input_disabled_button_background: var(--sapField_ReadOnly_Background);
- --_ui5_step_input_border_color_hover: var(--sapField_Hover_Background);
- --_ui5_step_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
- --_ui5_input_input_background_color: var(--sapField_InvalidBackground);
- --_ui5_step_input_min_width: 7.25rem;
- --_ui5_step_input_padding: 2.5rem;
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index c17367ca2bedd..1d4f9f8c082f4 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -351,9 +351,9 @@
/* SplitButton */
--_ui5_split_button_middle_separator_height: 1.625rem;
- /* StepInput */
- --_ui5_step_input_min_width: 6rem;
- --_ui5_step_input_padding: 2rem;
+ /* NumberInput / StepInput */
+ --_ui5_number_input_min_width: 6rem;
+ --_ui5_number_input_padding_with_step_buttons: 2rem;
/* Tree */
--_ui5-tree-indent-step: 0.5rem;
diff --git a/packages/main/src/themes/sap_fiori_3/NumverInput-parameters b/packages/main/src/themes/sap_fiori_3/NumverInput-parameters
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index e29d102d76409..dcb1e9caf17cb 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -56,6 +56,6 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
@import "../base/rtl-parameters.css";
@import "./sizes-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 02e5ef577e543..45ff5ff91d69e 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -55,6 +55,6 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
@import "../base/rtl-parameters.css";
@import "./sizes-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 2a7bfd3a340ee..776679fcd06da 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -57,6 +57,6 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
@import "./sizes-parameters.css";
@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 4c1b398cbd14c..9689bd2a4b577 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -57,6 +57,6 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
@import "./sizes-parameters.css";
@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/NumberInput-parameters.css b/packages/main/src/themes/sap_horizon/NumberInput-parameters.css
new file mode 100644
index 0000000000000..66a453ec13bd0
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon/NumberInput-parameters.css
@@ -0,0 +1,26 @@
+@import "../base/NumberInput-parameters.css";
+
+:host {
+ --_ui5_number_input_input_error_background_color: inherit;
+ --_ui5_number_input_button_state_hover_background_color: var(--sapField_Hover_Background);
+ --_ui5_number_input_border_style: none;
+ --_ui5_number_input_border_style_hover: none;
+ --_ui5_number_input_button_background_color: transparent;
+ --_ui5_number_input_input_border: none;
+ --_ui5_number_input_input_margin_top: 0;
+ --_ui5_number_input_button_display: inline-flex;
+ --_ui5_number_input_button_left: 0;
+ --_ui5_number_input_button_right: 0;
+ --_ui5_number_input_input_border_focused_after: 0.125rem solid var(--sapField_Active_BorderColor);
+ --_ui5_number_input_input_border_top_bottom_focused_after: 0;
+ --_ui5_number_input_input_border_bottom_focused_after: 0;
+ --_ui5_number_input_input_border_radius_focused_after: 0.25rem;
+ --_ui5_number_input_input_information_border_color_focused_after: var(--sapField_InformationColor);
+ --_ui5_number_input_input_warning_border_color_focused_after: var(--sapField_WarningColor);
+ --_ui5_number_input_input_success_border_color_focused_after: var(--sapField_SuccessColor);
+ --_ui5_number_input_input_error_border_color_focused_after: var(--sapField_InvalidColor);
+ --_ui5_number_input_disabled_button_background: none;
+ --_ui5_number_input_border_color_hover: none;
+ --_ui5_number_input_border_hover: none;
+ --_ui5_input_input_background_color: transparent;
+}
diff --git a/packages/main/src/themes/sap_horizon/StepInput-parameters.css b/packages/main/src/themes/sap_horizon/StepInput-parameters.css
deleted file mode 100644
index 48da6c6c504c1..0000000000000
--- a/packages/main/src/themes/sap_horizon/StepInput-parameters.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "../base/StepInput-parameters.css";
-
-:host {
- --_ui5_step_input_input_error_background_color: inherit;
- --_ui5-step_input_button_state_hover_background_color: var(--sapField_Hover_Background);
- --_ui5_step_input_border_style: none;
- --_ui5_step_input_border_style_hover: none;
- --_ui5_step_input_button_background_color: transparent;
- --_ui5_step_input_input_border: none;
- --_ui5_step_input_input_margin_top: 0;
- --_ui5_step_input_button_display: inline-flex;
- --_ui5_step_input_button_left: 0;
- --_ui5_step_input_button_right: 0;
- --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2;
- --_ui5_step_input_input_border_top_bottom_focused_after: 0;
- --_ui5_step_input_input_border_radius_focused_after: 0.25rem;
- --_ui5_step_input_input_information_border_color_focused_after: var(--sapField_InformationColor);
- --_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_WarningColor);
- --_ui5_step_input_input_success_border_color_focused_after: var(--sapField_SuccessColor);
- --_ui5_step_input_input_error_border_color_focused_after: var(--sapField_InvalidColor);
- --_ui5_step_input_disabled_button_background: none;
- --_ui5_step_input_border_color_hover: none;
- --_ui5_step_input_border_hover: none;
- --_ui5_input_input_background_color: transparent;
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 2a278265c0986..db50339dc815b 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -61,7 +61,7 @@
@import "./Slider-parameters.css";
@import "./ValueStateMessage-parameters.css";
@import "../base/Toolbar-parameters.css";
-@import "./StepInput-parameters.css";
+@import "./NumberInput-parameters.css";
@import "./GrowingButton-parameters.css";
@import "./sizes-parameters.css";
@import "./rtl-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/NumberInput-parameters.css b/packages/main/src/themes/sap_horizon_dark/NumberInput-parameters.css
new file mode 100644
index 0000000000000..66a453ec13bd0
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_dark/NumberInput-parameters.css
@@ -0,0 +1,26 @@
+@import "../base/NumberInput-parameters.css";
+
+:host {
+ --_ui5_number_input_input_error_background_color: inherit;
+ --_ui5_number_input_button_state_hover_background_color: var(--sapField_Hover_Background);
+ --_ui5_number_input_border_style: none;
+ --_ui5_number_input_border_style_hover: none;
+ --_ui5_number_input_button_background_color: transparent;
+ --_ui5_number_input_input_border: none;
+ --_ui5_number_input_input_margin_top: 0;
+ --_ui5_number_input_button_display: inline-flex;
+ --_ui5_number_input_button_left: 0;
+ --_ui5_number_input_button_right: 0;
+ --_ui5_number_input_input_border_focused_after: 0.125rem solid var(--sapField_Active_BorderColor);
+ --_ui5_number_input_input_border_top_bottom_focused_after: 0;
+ --_ui5_number_input_input_border_bottom_focused_after: 0;
+ --_ui5_number_input_input_border_radius_focused_after: 0.25rem;
+ --_ui5_number_input_input_information_border_color_focused_after: var(--sapField_InformationColor);
+ --_ui5_number_input_input_warning_border_color_focused_after: var(--sapField_WarningColor);
+ --_ui5_number_input_input_success_border_color_focused_after: var(--sapField_SuccessColor);
+ --_ui5_number_input_input_error_border_color_focused_after: var(--sapField_InvalidColor);
+ --_ui5_number_input_disabled_button_background: none;
+ --_ui5_number_input_border_color_hover: none;
+ --_ui5_number_input_border_hover: none;
+ --_ui5_input_input_background_color: transparent;
+}
diff --git a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css
deleted file mode 100644
index 48da6c6c504c1..0000000000000
--- a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "../base/StepInput-parameters.css";
-
-:host {
- --_ui5_step_input_input_error_background_color: inherit;
- --_ui5-step_input_button_state_hover_background_color: var(--sapField_Hover_Background);
- --_ui5_step_input_border_style: none;
- --_ui5_step_input_border_style_hover: none;
- --_ui5_step_input_button_background_color: transparent;
- --_ui5_step_input_input_border: none;
- --_ui5_step_input_input_margin_top: 0;
- --_ui5_step_input_button_display: inline-flex;
- --_ui5_step_input_button_left: 0;
- --_ui5_step_input_button_right: 0;
- --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2;
- --_ui5_step_input_input_border_top_bottom_focused_after: 0;
- --_ui5_step_input_input_border_radius_focused_after: 0.25rem;
- --_ui5_step_input_input_information_border_color_focused_after: var(--sapField_InformationColor);
- --_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_WarningColor);
- --_ui5_step_input_input_success_border_color_focused_after: var(--sapField_SuccessColor);
- --_ui5_step_input_input_error_border_color_focused_after: var(--sapField_InvalidColor);
- --_ui5_step_input_disabled_button_background: none;
- --_ui5_step_input_border_color_hover: none;
- --_ui5_step_input_border_hover: none;
- --_ui5_input_input_background_color: transparent;
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
index f40f6d99ae2f2..f0414c31eede0 100644
--- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -60,7 +60,7 @@
@import "./Tokenizer-parameters.css";
@import "./SliderBase-parameters.css";
@import "./ValueStateMessage-parameters.css";
-@import "./StepInput-parameters.css";
+@import "./NumberInput-parameters.css";
@import "./GrowingButton-parameters.css";
@import "./sizes-parameters.css";
@import "./rtl-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcb/NumberInput-parameters.css b/packages/main/src/themes/sap_horizon_hcb/NumberInput-parameters.css
new file mode 100644
index 0000000000000..339b92d1f55e4
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_hcb/NumberInput-parameters.css
@@ -0,0 +1,14 @@
+@import "../base/NumberInput-parameters.css";
+
+:host {
+ --_ui5_number_input_border_style: 2px solid var(--sapField_BorderColor);
+ --_ui5_number_input_border_style_hover: 2px solid var(--sapField_Hover_BorderColor);
+ --_ui5_number_input_error_warning_information_border_style: dashed;
+ --_ui5_number_input_after_border_style: none;
+ --_ui5_number_input_error_background_color: transparent;
+ --_ui5_number_input_error_hover_background: var(--sapField_InvalidBackground);
+ --_ui5_number_input_error_focused_background: var(--sapField_InvalidBackground);
+ --_ui5_number_input_border_hover: 2px solid var(--sapField_Hover_BorderColor);
+ --_ui5_number_input_input_border_top_bottom_focused_after: 0.125rem;
+ --_ui5_number_input_input_border_bottom_focused_after: 0.1875rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
index d7380e0eaed8f..14f3b393ce5d5 100644
--- a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -57,6 +57,7 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
+@import "./NumberInput-parameters.css";
@import "./sizes-parameters.css";
@import "./rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/NumberInput-parameters.css b/packages/main/src/themes/sap_horizon_hcw/NumberInput-parameters.css
new file mode 100644
index 0000000000000..339b92d1f55e4
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_hcw/NumberInput-parameters.css
@@ -0,0 +1,14 @@
+@import "../base/NumberInput-parameters.css";
+
+:host {
+ --_ui5_number_input_border_style: 2px solid var(--sapField_BorderColor);
+ --_ui5_number_input_border_style_hover: 2px solid var(--sapField_Hover_BorderColor);
+ --_ui5_number_input_error_warning_information_border_style: dashed;
+ --_ui5_number_input_after_border_style: none;
+ --_ui5_number_input_error_background_color: transparent;
+ --_ui5_number_input_error_hover_background: var(--sapField_InvalidBackground);
+ --_ui5_number_input_error_focused_background: var(--sapField_InvalidBackground);
+ --_ui5_number_input_border_hover: 2px solid var(--sapField_Hover_BorderColor);
+ --_ui5_number_input_input_border_top_bottom_focused_after: 0.125rem;
+ --_ui5_number_input_input_border_bottom_focused_after: 0.1875rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
index 0ba2a8c792640..9fdc7333cf1ed 100644
--- a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -57,6 +57,7 @@
@import "./SliderBase-parameters.css";
@import "./SliderHandle-parameters.css";
@import "./SliderScale-parameters.css";
-@import "../base/StepInput-parameters.css";
+@import "../base/NumberInput-parameters.css";
@import "./sizes-parameters.css";
@import "./rtl-parameters.css";
+@import "./NumberInput-parameters.css";
diff --git a/packages/main/test/pages/NumberInput.html b/packages/main/test/pages/NumberInput.html
new file mode 100644
index 0000000000000..487a171114bcb
--- /dev/null
+++ b/packages/main/test/pages/NumberInput.html
@@ -0,0 +1,266 @@
+
+
+
+
+
+ NumberInput test page
+
+
+
+
+
+
+
+
+ NumberInput
+ Event [change] :: N/A
+
+
+
NumberInput in Cozy
+
+
+
+
+
NumberInput in Compact
+
+
+
+
+
NumberInput with min=0, max=10 and step=1
+
+ Wrong Value
+
+
+
NumberInput with min=0, max=10, step=0.05 and valuePrecision=2
+
+ Wrong Value
+
+
+
Disabled NumberInput
+
+
+
+
+
Readonly NumberInput
+
+
+
+
+
NumberInput with valueStateChange Prevented
+
+ Value state change is prevented on this input
+
+
+
NumberInput with valueState=None
+
+
+
+
+
NumberInput with valueState=Positive
+
+
+
+
+
NumberInput with valueState=Information
+
+
+
+
+
NumberInput with valueState=Warning
+
+
+
+
+
NumberInput with valueState=Negative
+
+
+
+
+
NumberInput change event test (linked inputs)
+
+
+
+
+ 'input' event prevented
+
+
+ 'change' event count
+
+
+
+
NumberInput with large value and precision (thousands separator)
+
+
+
+
+
+
+ Accessibility
+
+
+
+
+
+
diff --git a/packages/main/test/pages/styles/NumberInput.css b/packages/main/test/pages/styles/NumberInput.css
new file mode 100644
index 0000000000000..b255e79a3af4b
--- /dev/null
+++ b/packages/main/test/pages/styles/NumberInput.css
@@ -0,0 +1,15 @@
+h3 {
+ user-select: none;
+}
+
+.numberinput-page {
+ background-color: var(--sapBackgroundColor);
+}
+
+.numberinput-field {
+ width: 250px;
+}
+
+form ui5-number-input:invalid {
+ outline: 2px solid var(--sapNegativeColor);
+}
diff --git a/packages/main/test/pages/styles/StepInput.css b/packages/main/test/pages/styles/StepInput.css
index 7471626f7e721..9c667291b678d 100644
--- a/packages/main/test/pages/styles/StepInput.css
+++ b/packages/main/test/pages/styles/StepInput.css
@@ -35,6 +35,6 @@ h3 {
width: 250px
}
-form ui5-step-input:invalid {
+form ui5-step-input:invalid ui5-number-input {
outline: 2px solid var(--sapNegativeColor);
}
diff --git a/packages/website/docs/_components_pages/main/NumberInput.mdx b/packages/website/docs/_components_pages/main/NumberInput.mdx
new file mode 100644
index 0000000000000..ae5da9b3b9dce
--- /dev/null
+++ b/packages/website/docs/_components_pages/main/NumberInput.mdx
@@ -0,0 +1,28 @@
+---
+slug: ../NumberInput
+---
+
+import Basic from "../../_samples/main/NumberInput/Basic/Basic.md";
+import ValuePrecision from "../../_samples/main/NumberInput/ValuePrecision/ValuePrecision.md";
+import MinMax from "../../_samples/main/NumberInput/MinMax/MinMax.md";
+import States from "../../_samples/main/NumberInput/States/States.md";
+
+<%COMPONENT_OVERVIEW%>
+
+## Basic Sample
+
+
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Min Max
+
+
+### Value Precision
+
+
+### States
+NumberInput supports several semantic value states, readonly, disabled, etc.
+
+
diff --git a/packages/website/docs/_samples/main/NumberInput/Basic/Basic.md b/packages/website/docs/_samples/main/NumberInput/Basic/Basic.md
new file mode 100644
index 0000000000000..0c062a836e844
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/Basic/Basic.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+
diff --git a/packages/website/docs/_samples/main/NumberInput/Basic/main.js b/packages/website/docs/_samples/main/NumberInput/Basic/main.js
new file mode 100644
index 0000000000000..0902003d9b467
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/Basic/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/NumberInput.js";
diff --git a/packages/website/docs/_samples/main/NumberInput/Basic/sample.html b/packages/website/docs/_samples/main/NumberInput/Basic/sample.html
new file mode 100644
index 0000000000000..dc42d2d9c785f
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/Basic/sample.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/docs/_samples/main/NumberInput/Basic/sample.tsx b/packages/website/docs/_samples/main/NumberInput/Basic/sample.tsx
new file mode 100644
index 0000000000000..8e9c3a295dbe3
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/Basic/sample.tsx
@@ -0,0 +1,10 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import NumberInputClass from "@ui5/webcomponents/dist/NumberInput.js";
+
+const NumberInput = createReactComponent(NumberInputClass);
+
+function App() {
+ return ;
+}
+
+export default App;
diff --git a/packages/website/docs/_samples/main/NumberInput/MinMax/MinMax.md b/packages/website/docs/_samples/main/NumberInput/MinMax/MinMax.md
new file mode 100644
index 0000000000000..04db8e927c90a
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/MinMax/MinMax.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/MinMax/main.js b/packages/website/docs/_samples/main/NumberInput/MinMax/main.js
new file mode 100644
index 0000000000000..1b847f3168257
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/MinMax/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/NumberInput.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/MinMax/sample.html b/packages/website/docs/_samples/main/NumberInput/MinMax/sample.html
new file mode 100644
index 0000000000000..b1807cc8c35e4
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/MinMax/sample.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/docs/_samples/main/NumberInput/MinMax/sample.tsx b/packages/website/docs/_samples/main/NumberInput/MinMax/sample.tsx
new file mode 100644
index 0000000000000..46970e22943d5
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/MinMax/sample.tsx
@@ -0,0 +1,10 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import NumberInputClass from "@ui5/webcomponents/dist/NumberInput.js";
+
+const NumberInput = createReactComponent(NumberInputClass);
+
+function App() {
+ return ;
+}
+
+export default App;
diff --git a/packages/website/docs/_samples/main/NumberInput/States/States.md b/packages/website/docs/_samples/main/NumberInput/States/States.md
new file mode 100644
index 0000000000000..04db8e927c90a
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/States/States.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/States/main.js b/packages/website/docs/_samples/main/NumberInput/States/main.js
new file mode 100644
index 0000000000000..1b847f3168257
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/States/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/NumberInput.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/States/sample.html b/packages/website/docs/_samples/main/NumberInput/States/sample.html
new file mode 100644
index 0000000000000..42208575f2f31
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/States/sample.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+
+ Please provide valid value
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Please provide valid value
+
+
+ );
+}
+
+export default App;
diff --git a/packages/website/docs/_samples/main/NumberInput/ValuePrecision/ValuePrecision.md b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/ValuePrecision.md
new file mode 100644
index 0000000000000..04db8e927c90a
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/ValuePrecision.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/ValuePrecision/main.js b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/main.js
new file mode 100644
index 0000000000000..1b847f3168257
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/NumberInput.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.html b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.html
new file mode 100644
index 0000000000000..fa97bdb6b80d8
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.tsx b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.tsx
new file mode 100644
index 0000000000000..e5a4d20e8e299
--- /dev/null
+++ b/packages/website/docs/_samples/main/NumberInput/ValuePrecision/sample.tsx
@@ -0,0 +1,12 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import NumberInputClass from "@ui5/webcomponents/dist/NumberInput.js";
+
+const NumberInput = createReactComponent(NumberInputClass);
+
+function App() {
+ return (
+
+ );
+}
+
+export default App;