feat(ui5-step-input): inintial implementation (#2804)

Fixes #2640

Author: NHristov-sap

packages/base/src/Keys.js

@@ -115,6 +115,22 @@ const isUp = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up
 
 const isDown = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && !hasModifierKeys(event);
 
+const isLeftCtrl = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, true, false, false);
+
+const isRightCtrl = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, true, false, false);
+
+const isUpCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, false);
+
+const isDownCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, false);
+
+const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, false, true);
+
+const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
+
+const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
+
+const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
+
 const isHome = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && !hasModifierKeys(event);
 
 const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && !hasModifierKeys(event);
@@ -176,6 +192,14 @@ export {
 	isRight,
 	isUp,
 	isDown,
+	isLeftCtrl,
+	isRightCtrl,
+	isUpCtrl,
+	isDownCtrl,
+	isUpShift,
+	isDownShift,
+	isUpShiftCtrl,
+	isDownShiftCtrl,
 	isHome,
 	isEnd,
 	isHomeCtrl,

packages/main/bundle.esm.js

@@ -67,6 +67,7 @@ import ResponsivePopover from "./dist/ResponsivePopover.js";
 import SegmentedButton from "./dist/SegmentedButton.js";
 import Select from "./dist/Select.js";
 import Slider from "./dist/Slider.js";
+import StepInput from "./dist/StepInput.js";
 import RangeSlider from "./dist/RangeSlider.js";
 import Switch from "./dist/Switch.js";
 import MessageStrip from "./dist/MessageStrip.js";

packages/main/src/Input.hbs

@@ -33,7 +33,9 @@
 			@focusin={{innerFocusIn}}
 			data-sap-no-tab-ref
 			data-sap-focus-ref
-			step="{{step}}"
+			step="{{nativeInputAttributes.step}}"
+			min="{{nativeInputAttributes.min}}"
+			max="{{nativeInputAttributes.max}}"
 		/>
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">

packages/main/src/Input.js

@@ -331,7 +331,7 @@ const metadata = {
 			type: Object,
 		},
 
-		_wrapperAccInfo: {
+		_nativeInputAttributes: {
 			type: Object,
 		},
 
@@ -1067,6 +1067,14 @@ class Input extends UI5Element {
 		};
 	}
 
+	get nativeInputAttributes() {
+		return {
+			"min": this.type === InputType.Number ? this._nativeInputAttributes.min : undefined,
+			"max": this.type === InputType.Number ? this._nativeInputAttributes.max : undefined,
+			"step": this.type === InputType.Number ? (this._nativeInputAttributes.step || "any") : undefined,
+		};
+	}
+
 	get ariaValueStateHiddenText() {
 		if (!this.hasValueStateMessage) {
 			return;

packages/main/src/StepInput.hbs

@@ -0,0 +1,79 @@
+<div
+	id="{{_id}}"
+	class="ui5-step-input-root"
+	style="{{styles}}"
+	@keydown="{{_onkeydown}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+>
+	<!-- Decrement Icon -->
+	<div
+		class="ui5-step-icon ui5-step-dec"
+		title="{{decIconTitle}}"
+	>
+		<ui5-icon
+			id="{{_id}}-dec"
+			name="{{decIconName}}"
+			tabindex="-1"
+			accessible-name="{{decIconTitle}}"
+			@click="{{_decValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_decSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_decIconClickable}}"
+		></ui5-icon>
+	</div>
+
+	<!-- INPUT -->
+	<ui5-input
+			id="{{_id}}-inner"
+			class="ui5-step-input-input"
+			placeholder="{{placeholder}}"
+			type="{{type}}"
+			value="{{_valuePrecisioned}}"
+			?disabled="{{disabled}}"
+			?required="{{required}}"
+			?readonly="{{readonly}}"
+			value-state="{{valueState}}"
+			data-sap-focus-ref
+			._inputAccInfo ="{{accInfo}}"
+			._nativeInputAttributes="{{inputAttributes}}"
+			@ui5-change="{{_onInputChange}}"
+			@ui5-submit="{{_onInputChange}}"
+			@focusout="{{_onInputFocusOut}}"
+			@focusin="{{_onInputFocusIn}}"
+	>
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
+
+	</ui5-input>
+
+	<!-- Increment Icon -->
+	<div
+		class="ui5-step-icon ui5-step-inc"
+		title="{{incIconTitle}}"
+	>
+		<ui5-icon
+			id="{{_id}}-inc"
+			name="{{incIconName}}"
+			tabindex="-1"
+			accessible-name="{{incIconTitle}}"
+			@click="{{_incValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_incSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_incIconClickable}}"
+		></ui5-icon>
+	</div>
+
+	<slot name="formSupport"></slot>
+
+</div>