feat(ui5-number-input): introduce NumberInput component

packages/main/cypress/specs/DynamicDateRange.cy.tsx

@@ -346,6 +346,8 @@ describe("DynamicDateRange Last/Next Options", () => {
 			.should("exist");
 
 		cy.get("@stepInput")
+			.shadow()
+			.find("[ui5-number-input]")
 			.shadow()
 			.find("[ui5-input]")
 			.shadow()
@@ -396,6 +398,8 @@ describe("DynamicDateRange Last/Next Options", () => {
 			.as("stepInput");
 
 		cy.get("@stepInput")
+			.shadow()
+			.find("[ui5-number-input]")
 			.shadow()
 			.find("[ui5-input]")
 			.shadow()

packages/main/cypress/specs/FormSupport.cy.tsx

@@ -21,6 +21,7 @@ import Switch from "../../src/Switch.js";
 import TextArea from "../../src/TextArea.js";
 import TimePicker from "../../src/TimePicker.js";
 import Tokenizer from "../../src/Tokenizer.js";
+import NumberInput from "../../src/NumberInput.js";
 
 const getFormData = ($form: HTMLFormElement) => {
 	const formData = new FormData($form);
@@ -425,6 +426,34 @@ describe("Form support", () => {
 			.should("be.equal", "multi_input5=&multi_input6=ok&multi_input7=&multi_input7=ok&multi_input8=ok&multi_input8=ok&multi_input9=ok&multi_input10=ok&multi_input11=&multi_input11=ok&multi_input12=ok&multi_input12=ok");
 	});
 
+	it("ui5-number-input in form", () => {
+		cy.mount(<form method="get">
+			<NumberInput id="number_input1"></NumberInput>
+			<NumberInput id="number_input2" value={4}></NumberInput>
+			<NumberInput id="number_input3" name="number_input3"></NumberInput>
+			<NumberInput id="number_input4" name="number_input4" value={4}></NumberInput>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "number_input3=0&number_input4=4");
+	});
+
 	it("ui5-tokenizer in form", () => {
 		cy.mount(
 			<form method="get">

packages/main/cypress/specs/FormSupportSubmission.cy.tsx

@@ -22,6 +22,7 @@ import Slider from "../../src/Slider.js";
 import RangeSlider from "../../src/RangeSlider.js";
 import Select from "../../src/Select.js";
 import Option from "../../src/Option.js";
+import NumberInput from "../../src/NumberInput.js";
 
 describe("Form submission with Enter key", () => {
 
@@ -735,6 +736,57 @@ describe("Form submission with Enter key", () => {
 		});
 	});
 
+	describe("NumberInput", () => {
+		const mountNumberInputForm = () => {
+			const submit = cy.spy().as("submit");
+			const change = cy.spy().as("change");
+
+			cy.mount(
+				<form novalidate onSubmit={e => {
+					e.preventDefault();
+					submit();
+				}}>
+					<NumberInput name="date" onChange={() => change()} />
+				</form>
+			);
+			cy.get("[ui5-number-input]").as("numberInput");
+
+			cy.get("@numberInput")
+				.realClick()
+				.should("be.focused");
+		};
+
+		const assertChangeCalledBeforeSubmit = () => {
+			cy.get("@change").then((changeSpy: any) =>
+				cy.get("@submit").then((submitSpy: any) =>
+					expect(changeSpy.getCall(0))
+						.to.have.been.calledBefore(submitSpy.getCall(0))
+				)
+			);
+		};
+
+		it("submits form without firing change event when Enter is pressed on empty input", () => {
+			mountNumberInputForm();
+
+			cy.realPress("Enter");
+
+			cy.get("@submit").should("have.been.calledOnce");
+			cy.get("@change").should("not.have.been.called");
+		});
+
+		it("fires change event then submits form when Enter is pressed after typing", () => {
+			mountNumberInputForm();
+
+			cy.realType("25");
+			cy.realPress("Enter");
+
+			cy.get("@submit").should("have.been.calledOnce");
+			cy.get("@change").should("have.been.calledOnce");
+
+			assertChangeCalledBeforeSubmit();
+		});
+	});
+
 	describe("StepInput", () => {
 		const mountStepInputForm = () => {
 			const submit = cy.spy().as("submit");