feat(ui5-slider, ui5-range-slider): add input as a tooltip

packages/main/src/RangeSlider.hbs

@@ -29,49 +29,76 @@
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle ui5-slider-handle--start"
-		part="handle"
-		style="{{styles.startHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.startHandle}}" part="handle-container">
+
+		<div class="ui5-slider-handle ui5-slider-handle--start"
+			part="handle"
+			style="{{styles.startHandle}}"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{startValue}}"
+			aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
+			aria-disabled="{{_ariaDisabled}}"
+		>
+			<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{startValue}}"
+					accessible-name-ref="{{_ariaLabelledByInputRefs}}"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					data-sap-ui-start-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
-
-	<div class="ui5-slider-handle ui5-slider-handle--end"
-		part="handle"
-		style="{{styles.endHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.endHandle}}" part="handle-container">
+		<div class="ui5-slider-handle ui5-slider-handle--end"
+			part="handle"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{endValue}}"
+			aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
+			aria-disabled="{{_ariaDisabled}}"
+		>
+			<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{endValue}}"
+					accessible-name-ref="{{_ariaLabelledByInputRefs}}"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}

packages/main/src/RangeSlider.ts

@@ -11,12 +11,15 @@ import {
 import SliderBase from "./SliderBase.js";
 import Icon from "./Icon.js";
 import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js";
+import Input from "./Input.js";
 
 // Texts
 import {
 	RANGE_SLIDER_ARIA_DESCRIPTION,
 	RANGE_SLIDER_START_HANDLE_DESCRIPTION,
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
+	RANGE_SLIDER_TOOLTIP_INPUT_LABEL,
+	RANGE_SLIDER_TOOLTIP_INPUT_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -88,7 +91,7 @@ type AffectedValue = "startValue" | "endValue";
 	languageAware: true,
 	formAssociated: true,
 	template: RangeSliderTemplate,
-	dependencies: [Icon],
+	dependencies: [Icon, Input],
 	styles: [SliderBase.styles, rangeSliderStyles],
 })
 class RangeSlider extends SliderBase implements IFormInputElement {
@@ -128,6 +131,8 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	_secondHandlePositionFromStart?: number;
 	_selectedRange?: number;
 	_reversedValues = false;
+	_lastValidStartValue: string;
+	_lastValidEndValue: string;
 
 	static i18nBundle: I18nBundle;
 
@@ -148,6 +153,8 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		super();
 		this._stateStorage.startValue = undefined;
 		this._stateStorage.endValue = undefined;
+		this._lastValidStartValue = this.min.toString();
+		this._lastValidEndValue = this.max.toString();
 	}
 
 	get tooltipStartValue() {
@@ -201,6 +208,8 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	 *
 	 */
 	onBeforeRendering() {
+		this._updateInputValues();
+
 		if (this.startValue > this.endValue) {
 			const affectedValue = this._valueAffected === "startValue" ? "endValue" : "startValue";
 
@@ -278,7 +287,7 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	 * Resets the stored Range Slider's initial values saved when it was first focused
 	 * @private
 	 */
-	_onfocusout() {
+	_onfocusout(e: FocusEvent) {
 		if (this._isFocusing()) {
 			this._preventFocusOut();
 			return;
@@ -288,11 +297,16 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		this._startValueInitial = undefined;
 		this._endValueInitial = undefined;
 
-		if (this.showTooltip) {
+		if (this.showTooltip && !(e.relatedTarget as HTMLInputElement)?.hasAttribute("ui5-input")) {
 			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
 		}
 	}
 
+	_onInputFocusOut(e: FocusEvent) {
+		this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
+		this._updateValueFromInput(e);
+	}
+
 	/**
 	* Handles keyup logic. If one of the handles came across the other
 	* swap the start and end values. Reset the affected value by the finished
@@ -428,7 +442,7 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	_onmousedown(e: TouchEvent | MouseEvent) {
 		// If step is 0 no interaction is available because there is no constant
 		// (equal for all user environments) quantitative representation of the value
-		if (this.disabled || this._effectiveStep === 0) {
+		if (this.disabled || this._effectiveStep === 0 || (e.target as HTMLElement).hasAttribute("ui5-input")) {
 			return;
 		}
 
@@ -483,7 +497,7 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		e.preventDefault();
 
 		// If 'step' is 0 no interaction is available as there is no constant quantitative representation of the value
-		if (this.disabled || this._effectiveStep === 0) {
+		if (this.disabled || this._effectiveStep === 0 || (e.target as HTMLElement).hasAttribute("ui5-input")) {
 			return;
 		}
 
@@ -524,7 +538,11 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		this.update(undefined, newValues[0], newValues[1]);
 	}
 
-	_handleUp() {
+	_handleUp(e: MouseEvent) {
+		if ((e.target as HTMLElement).hasAttribute("ui5-input")) {
+			return;
+		}
+
 		this._setAffectedValueByFocusedElement();
 		this._setAffectedValue(undefined);
 
@@ -540,6 +558,25 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		this._endValueAtBeginningOfAction = undefined;
 	}
 
+	_updateValueFromInput(e: Event) {
+		const ctor = this.constructor as typeof RangeSlider;
+
+		const input = e.target as HTMLInputElement;
+		const value = ctor.clipValue(parseFloat(input.value), this._effectiveMin, this._effectiveMax);
+		const isValueValid = value >= this._effectiveMin && value <= this._effectiveMax;
+
+		if (!isValueValid) {
+			return;
+		}
+
+		if (input.hasAttribute("data-sap-ui-start-value")) {
+			this.startValue = value;
+			return;
+		}
+
+		this.endValue = value;
+	}
+
 	/**
 	 * Determines where the press occured and which values of the Range Slider
 	 * handles should be updated on further interaction.
@@ -749,6 +786,22 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		}
 	}
 
+	_updateInputValues() {
+		const startValueInput = this.shadowRoot!.querySelector("ui5-input[data-sap-ui-start-value]") as Input;
+		const endValueInput = this.shadowRoot!.querySelector("ui5-input[data-sap-ui-end-value]") as Input;
+
+		if (this.editableTooltip && startValueInput && endValueInput) {
+			const isStartValueValid = parseFloat(startValueInput.value) >= this.min && parseFloat(startValueInput.value) <= this.max;
+			const isEndValueValid = parseFloat(endValueInput.value) >= this.min && parseFloat(endValueInput.value) <= this.max;
+
+			startValueInput.value = startValueInput.value ? startValueInput.value : this._lastValidStartValue;
+			endValueInput.value = endValueInput.value ? endValueInput.value : this._lastValidEndValue;
+
+			this._lastValidStartValue = (!!startValueInput.value && isStartValueValid) ? startValueInput.value : this._lastValidStartValue;
+			this._lastValidEndValue = (!!endValueInput.value && isEndValueValid) ? endValueInput.value : this._lastValidEndValue;
+		}
+	}
+
 	/**
 	 * Swaps the start and end values of the handles if one came accros the other:
 	 * - If the start value is greater than the endValue swap them and their handles
@@ -830,15 +883,23 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	}
 
 	get _ariaLabelledByStartHandleRefs() {
-		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+		return ["ui5-slider-accName", "ui5-slider-startHandleDesc"].join(" ").trim();
 	}
 
 	get _ariaLabelledByEndHandleRefs() {
-		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+		return ["ui5-slider-accName", "ui5-slider-endHandleDesc"].join(" ").trim();
 	}
 
 	get _ariaLabelledByProgressBarRefs() {
-		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+		return ["ui5-slider-accName", "ui5-slider-sliderDesc"].join(" ").trim();
+	}
+
+	get _ariaLabelledByInputText() {
+		return RangeSlider.i18nBundle.getText(RANGE_SLIDER_TOOLTIP_INPUT_LABEL);
+	}
+
+	get _ariaDescribedByInputText() {
+		return RangeSlider.i18nBundle.getText(RANGE_SLIDER_TOOLTIP_INPUT_DESCRIPTION);
 	}
 
 	get styles() {

packages/main/src/Slider.hbs

@@ -17,26 +17,42 @@
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle"
-		style="{{styles.handle}}"
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{value}}"
-		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-		data-sap-focus-ref
-		part="handle"
-	>
-			<ui5-icon mode="Decorative" "direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.handle}}" part="handle-container">
+		<div class="ui5-slider-handle"
+			@focusout="{{_onfocusout}}"
+			@focusin="{{_onfocusin}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{value}}"
+			aria-labelledby="{{_ariaLabelledByHandleRefs}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-keyshortcuts="F2"
+			aria-describedby="{{_ariaDescribedByHandleRefs}}"
+
+			data-sap-focus-ref
+			part="handle"
+		>
+				<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+		</div>
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					value="{{value}}"
+					type="Number"
+					accessible-name-ref="{{_ariaLabelledByInputRefs}}"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}