@ui5/webcomponents 2.11.0-rc.4 → 2.12.0-rc.0

package/dist/PopupTemplate.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
 import PopubBlockLayerTemplate from "./PopupBlockLayerTemplate.js";
 export default function PopupTemplate(hooks) {
-    return (_jsxs(_Fragment, { children: [PopubBlockLayerTemplate.call(this), _jsxs("section", { "root-element": true, style: this.styles.root, class: this.classes.root, role: this._role, "aria-modal": this._ariaModal, "aria-label": this._ariaLabel, "aria-labelledby": this._ariaLabelledBy, onKeyDown: this._onkeydown, onFocusOut: this._onfocusout, onMouseUp: this._onmouseup, onMouseDown: this._onmousedown, children: [_jsx("span", { class: "first-fe", "data-ui5-focus-trap": true, role: "none", tabIndex: 0, onFocusIn: this.forwardToLast }), (hooks?.beforeContent || beforeContent).call(this), _jsx("div", { style: this.styles.content, class: this.classes.content, onScroll: this._scroll, part: "content", children: _jsx("slot", {}) }), (hooks?.afterContent || afterContent).call(this), _jsx("span", { class: "last-fe", "data-ui5-focus-trap": true, role: "none", tabIndex: 0, onFocusIn: this.forwardToFirst })] })] }));
+    return (_jsxs(_Fragment, { children: [PopubBlockLayerTemplate.call(this), _jsxs("section", { "root-element": true, style: this.styles.root, class: this.classes.root, role: this._role, "aria-describedby": this.ariaDescribedByIds, "aria-modal": this._ariaModal, "aria-label": this._ariaLabel, "aria-labelledby": this._ariaLabelledBy, onKeyDown: this._onkeydown, onFocusOut: this._onfocusout, onMouseUp: this._onmouseup, onMouseDown: this._onmousedown, children: [_jsx("span", { class: "first-fe", "data-ui5-focus-trap": true, role: "none", tabIndex: 0, onFocusIn: this.forwardToLast }), (hooks?.beforeContent || beforeContent).call(this), _jsx("div", { style: this.styles.content, class: this.classes.content, onScroll: this._scroll, part: "content", children: _jsx("slot", {}) }), this.ariaDescriptionText &&
+                        _jsx("span", { id: "accessibleDescription", class: "ui5-hidden-text", children: this.ariaDescriptionText }), (hooks?.afterContent || afterContent).call(this), _jsx("span", { class: "last-fe", "data-ui5-focus-trap": true, role: "none", tabIndex: 0, onFocusIn: this.forwardToFirst })] })] }));
 }
 export function beforeContent() { }
 export function afterContent() { }

package/dist/PopupTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTemplate.js","sourceRoot":"","sources":["../src/PopupTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAc,KAGlD;IACA,OAAO,CAAC,8BACN,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,yCAEC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EACvB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,gBACJ,IAAI,CAAC,UAAU,gBACf,IAAI,CAAC,UAAU,qBACV,IAAI,CAAC,eAAe,EACrC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,aAG9B,eAAM,KAAK,EAAC,UAAU,+BAAqB,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,GAAS,EAEzG,CAAC,KAAK,EAAE,aAAa,IAAI,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEnD,cAAK,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,YACnG,gBAAa,GACR,EAEL,CAAC,KAAK,EAAE,YAAY,IAAI,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,eAAM,KAAK,EAAC,SAAS,+BAAqB,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAS,IAEjG,IAER,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,aAAa,KAAgB,CAAC;AAC9C,MAAM,UAAU,YAAY,KAAgB,CAAC","sourcesContent":["import type { JsxTemplate } from \"@ui5/webcomponents-base\";\nimport type Popup from \"./Popup.js\";\nimport PopubBlockLayerTemplate from \"./PopupBlockLayerTemplate.js\";\n\nexport default function PopupTemplate(this: Popup, hooks?: {\n\tbeforeContent?: JsxTemplate\n\tafterContent?: JsxTemplate\n}) {\n\treturn (<>\n\t\t{PopubBlockLayerTemplate.call(this)}\n\t\t<section\n\t\t\troot-element\n\t\t\tstyle={this.styles.root}\n\t\t\tclass={this.classes.root}\n\t\t\trole={this._role}\n\t\t\taria-modal={this._ariaModal}\n\t\t\taria-label={this._ariaLabel}\n\t\t\taria-labelledby={this._ariaLabelledBy}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t>\n\n\t\t\t<span class=\"first-fe\" data-ui5-focus-trap role=\"none\" tabIndex={0} onFocusIn={this.forwardToLast}></span>\n\n\t\t\t{(hooks?.beforeContent || beforeContent).call(this)}\n\n\t\t\t<div style={this.styles.content} class={this.classes.content} onScroll={this._scroll} part=\"content\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\n\t\t\t{(hooks?.afterContent || afterContent).call(this)}\n\n\t\t\t<span class=\"last-fe\" data-ui5-focus-trap role=\"none\" tabIndex={0} onFocusIn={this.forwardToFirst}></span>\n\n\t\t</section>\n\n\t</>);\n}\n\nexport function beforeContent(this: Popup) { }\nexport function afterContent(this: Popup) { }\n"]}
+{"version":3,"file":"PopupTemplate.js","sourceRoot":"","sources":["../src/PopupTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAc,KAGlD;IACA,OAAO,CAAC,8BACN,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,yCAEC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EACvB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,sBACE,IAAI,CAAC,kBAAkB,gBAC7B,IAAI,CAAC,UAAU,gBACf,IAAI,CAAC,UAAU,qBACV,IAAI,CAAC,eAAe,EACrC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,aAG9B,eAAM,KAAK,EAAC,UAAU,+BAAqB,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,GAAS,EAEzG,CAAC,KAAK,EAAE,aAAa,IAAI,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEnD,cAAK,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,YACnG,gBAAa,GACR,EAEL,IAAI,CAAC,mBAAmB;wBACtB,eAAM,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,mBAAmB,GAAQ,EAG5F,CAAC,KAAK,EAAE,YAAY,IAAI,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,eAAM,KAAK,EAAC,SAAS,+BAAqB,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAS,IAEjG,IAER,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,aAAa,KAAgB,CAAC;AAC9C,MAAM,UAAU,YAAY,KAAgB,CAAC","sourcesContent":["import type { JsxTemplate } from \"@ui5/webcomponents-base\";\nimport type Popup from \"./Popup.js\";\nimport PopubBlockLayerTemplate from \"./PopupBlockLayerTemplate.js\";\n\nexport default function PopupTemplate(this: Popup, hooks?: {\n\tbeforeContent?: JsxTemplate\n\tafterContent?: JsxTemplate\n}) {\n\treturn (<>\n\t\t{PopubBlockLayerTemplate.call(this)}\n\t\t<section\n\t\t\troot-element\n\t\t\tstyle={this.styles.root}\n\t\t\tclass={this.classes.root}\n\t\t\trole={this._role}\n\t\t\taria-describedby={this.ariaDescribedByIds}\n\t\t\taria-modal={this._ariaModal}\n\t\t\taria-label={this._ariaLabel}\n\t\t\taria-labelledby={this._ariaLabelledBy}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t>\n\n\t\t\t<span class=\"first-fe\" data-ui5-focus-trap role=\"none\" tabIndex={0} onFocusIn={this.forwardToLast}></span>\n\n\t\t\t{(hooks?.beforeContent || beforeContent).call(this)}\n\n\t\t\t<div style={this.styles.content} class={this.classes.content} onScroll={this._scroll} part=\"content\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\n\t\t\t{this.ariaDescriptionText &&\n\t\t\t\t\t\t<span id=\"accessibleDescription\" class=\"ui5-hidden-text\">{this.ariaDescriptionText}</span>\n\t\t\t}\n\n\t\t\t{(hooks?.afterContent || afterContent).call(this)}\n\n\t\t\t<span class=\"last-fe\" data-ui5-focus-trap role=\"none\" tabIndex={0} onFocusIn={this.forwardToFirst}></span>\n\n\t\t</section>\n\n\t</>);\n}\n\nexport function beforeContent(this: Popup) { }\nexport function afterContent(this: Popup) { }\n"]}

package/dist/RangeSlider.d.ts

@@ -130,7 +130,6 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @private
      */
     _onfocusout(e: FocusEvent): void;
-    _onInputFocusOut(e: FocusEvent): void;
     /**
     * 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
@@ -188,8 +187,7 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @private
      */
     _updateValueOnRangeDrag(event: TouchEvent | MouseEvent): void;
-    _handleUp(e: MouseEvent): void;
-    _updateValueFromInput(e: Event): void;
+    _handleUp(): void;
     /**
      * Determines where the press occured and which values of the Range Slider
      * handles should be updated on further interaction.
@@ -268,9 +266,9 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @private
      */
     _updateHandlesAndRange(newValue: number): void;
-    _onInputKeydown(e: KeyboardEvent): void;
-    _updateInputValue(): void;
-    _saveInputValues(): void;
+    bringToFrontTooltip(handle: "start" | "end"): void;
+    _onTooltopForwardFocus(e: CustomEvent): void;
+    _onTooltipChange(e: CustomEvent): void;
     _getFormattedValue(value: string): string;
     /**
      * Swaps the start and end values of the handles if one came accros the other:
@@ -320,9 +318,6 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
             [x: string]: string;
             width: string;
         };
-        tooltip: {
-            visibility: string;
-        };
     };
 }
 export default RangeSlider;

package/dist/RangeSlider.js

@@ -159,9 +159,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             this._setAffectedValue(affectedValue);
             this.update(affectedValue, this.startValue, this.endValue);
         }
-        if (this.editableTooltip) {
-            this._saveInputValues();
-        }
         if (!this.isCurrentStateOutdated()) {
             return;
         }
@@ -207,9 +204,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             this._startValueInitial = this.startValue;
             this._endValueInitial = this.endValue;
         }
-        if (this.showTooltip) {
-            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
-        }
+        this._tooltipsOpen = this.showTooltip;
     }
     /**
      * Handles focus out event of the focusable components inner elements.
@@ -230,35 +225,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._setAffectedValue(undefined);
         this._startValueInitial = undefined;
         this._endValueInitial = undefined;
-        if (this.showTooltip && !e.relatedTarget?.hasAttribute("ui5-input")) {
-            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
-        }
-    }
-    _onInputFocusOut(e) {
-        const tooltipInput = e.target;
-        const oppositeTooltipInput = tooltipInput.hasAttribute("data-sap-ui-start-value") ? this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]") : this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
-        const relatedTarget = e.relatedTarget;
-        if (this.startValue > this.endValue) {
-            this._areInputValuesSwapped = true;
-            oppositeTooltipInput.focus();
-            return;
-        }
-        if (tooltipInput.hasAttribute("data-sap-ui-start-value")) {
-            this._setAffectedValue("startValue");
-        }
-        else {
-            this._setAffectedValue("endValue");
-        }
-        if (!this._areInputValuesSwapped || !this.shadowRoot.contains(relatedTarget)) {
-            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
-        }
-        this._updateValueFromInput(e);
-        this._updateInputValue();
-        this.update(this._valueAffected, parseFloat(this._lastValidStartValue), parseFloat(this._lastValidEndValue));
-        const isTooltipInputValueValid = parseFloat(tooltipInput.value) >= this.min && parseFloat(tooltipInput.value) <= this.max;
-        if (!isTooltipInputValueValid) {
-            tooltipInput.value = tooltipInput.hasAttribute("data-sap-ui-start-value") ? this._lastValidStartValue : this._lastValidEndValue;
-            tooltipInput.valueState = "None";
+        if (this.showTooltip && !e.relatedTarget?.hasAttribute("ui5-slider-tooltip")) {
+            this._tooltipsOpen = false;
         }
     }
     /**
@@ -382,7 +350,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         // 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 || e.target.hasAttribute("ui5-input")) {
+        if (this.disabled || this._effectiveStep === 0 || e.target.hasAttribute("ui5-slider-tooltip")) {
             return;
         }
         // Calculate the new value from the press position of the event
@@ -427,7 +395,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     _handleMove(e) {
         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 || e.target.hasAttribute("ui5-input")) {
+        if (this.disabled || this._effectiveStep === 0) {
             return;
         }
         // Update UI and state when dragging a single Range Slider handle
@@ -461,10 +429,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // Update the UI and the state according to the calculated new values
         this.update(undefined, newValues[0], newValues[1]);
     }
-    _handleUp(e) {
-        if (e.target.hasAttribute("ui5-input")) {
-            return;
-        }
+    _handleUp() {
         this._setAffectedValueByFocusedElement();
         this._setAffectedValue(undefined);
         if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
@@ -476,25 +441,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._startValueAtBeginningOfAction = undefined;
         this._endValueAtBeginningOfAction = undefined;
     }
-    _updateValueFromInput(e) {
-        if (this._areInputValuesSwapped) {
-            return;
-        }
-        const input = e.target;
-        const inputValue = parseFloat(input.value);
-        const isValueValid = inputValue >= this._effectiveMin && inputValue <= this._effectiveMax;
-        if (!isValueValid) {
-            return;
-        }
-        if (input.hasAttribute("data-sap-ui-start-value")) {
-            this.startValue = inputValue;
-            return;
-        }
-        this.endValue = inputValue;
-        if (this.startValue > this.endValue) {
-            this._areInputValuesSwapped = true;
-        }
-    }
     /**
      * Determines where the press occured and which values of the Range Slider
      * handles should be updated on further interaction.
@@ -580,9 +526,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @protected
      */
     focusInnerElement() {
-        if (this.editableTooltip && this._tooltipVisibility === SliderBase.TOOLTIP_VISIBILITY.HIDDEN) {
-            return;
-        }
         const isReversed = this._areValuesReversed();
         const affectedValue = this._valueAffected;
         if (this._isPressInCurrentRange || !affectedValue) {
@@ -590,9 +533,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         if ((affectedValue === "startValue" && !isReversed) || (affectedValue === "endValue" && isReversed)) {
             this._startHandle.focus();
+            this.bringToFrontTooltip("start");
         }
         if ((affectedValue === "endValue" && !isReversed) || (affectedValue === "startValue" && isReversed)) {
             this._endHandle.focus();
+            this.bringToFrontTooltip("end");
         }
     }
     /**
@@ -685,77 +630,52 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             this._secondHandlePositionFromStart = ((this.endValue - min) / (max - min)) * 100;
         }
     }
-    _onInputKeydown(e) {
-        const targetedInput = e.target;
-        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
-        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
-        const startValue = parseFloat(startValueInput.value);
-        const endValue = parseFloat(endValueInput.value);
-        const affectedValue = targetedInput.hasAttribute("data-sap-ui-start-value") ? "startValue" : "endValue";
-        super._onInputKeydown(e);
-        if (isEnter(e) && startValue > endValue) {
-            const swappedInput = affectedValue === "startValue" ? endValueInput : startValueInput;
-            const isValueValid = parseFloat(targetedInput.value) >= this.min && parseFloat(startValueInput.value) <= this.max;
-            if (!isValueValid) {
-                targetedInput.valueState = "Negative";
-                return;
-            }
-            this._isEndValueValid = parseFloat(endValueInput.value) >= this.min && parseFloat(endValueInput.value) <= this.max;
-            this._areInputValuesSwapped = true;
-            this._setAffectedValue(affectedValue === "startValue" ? "endValue" : "startValue");
-            startValueInput.value = this._getFormattedValue(this.endValue.toString());
-            endValueInput.value = this._getFormattedValue(this.startValue.toString());
-            swappedInput.focus();
-            return;
+    bringToFrontTooltip(handle) {
+        const tooltipSelector = handle === "start"
+            ? "[data-sap-ui-start-value]"
+            : "[data-sap-ui-end-value]";
+        const tooltip = this.shadowRoot.querySelector(tooltipSelector);
+        if (tooltip?.hidePopover && tooltip?.showPopover) {
+            requestAnimationFrame(() => {
+                tooltip.hidePopover();
+                tooltip.showPopover();
+            });
         }
-        this._setAffectedValue(affectedValue);
     }
-    _updateInputValue() {
-        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
-        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
-        if (!startValueInput && !endValueInput) {
-            return;
-        }
-        this._isStartValueValid = parseFloat(startValueInput.value) >= this.min && parseFloat(startValueInput.value) <= this.max;
-        this._isEndValueValid = parseFloat(endValueInput.value) >= this.min && parseFloat(endValueInput.value) <= this.max;
-        if (!this._isStartValueValid) {
-            startValueInput.valueState = "Negative";
-            return;
-        }
-        if (!this._isEndValueValid) {
-            endValueInput.valueState = "Negative";
-            return;
+    _onTooltopForwardFocus(e) {
+        const tooltip = e.target;
+        tooltip.followRef?.focus();
+    }
+    _onTooltipChange(e) {
+        const tooltip = e.target;
+        const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
+        const inputValue = parseFloat(e.detail.value);
+        const clampedValue = Math.min(this.max, Math.max(this.min, inputValue));
+        if (isStart) {
+            this.startValue = clampedValue;
+            this._lastValidStartValue = clampedValue.toString();
         }
-        this._lastValidStartValue = startValueInput.value;
-        this._lastValidEndValue = endValueInput.value;
-        startValueInput.valueState = "None";
-        endValueInput.valueState = "None";
-    }
-    _saveInputValues() {
-        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
-        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
-        if (this.editableTooltip && startValueInput && endValueInput) {
-            const inputStartValue = parseFloat(startValueInput.value);
-            const inputEndValue = parseFloat(endValueInput.value);
-            const isStartValueValid = inputStartValue >= this.min && inputStartValue <= this.max;
-            const isEndValueValid = inputEndValue >= this.min && inputEndValue <= this.max;
-            if (this._isUserInteraction) {
-                startValueInput.value = isStartValueValid ? this._getFormattedValue(this.startValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
-                endValueInput.value = isEndValueValid ? this._getFormattedValue(this.endValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
-                this.startValue = parseFloat(this._getFormattedValue(this.startValue.toString()));
-                this.endValue = parseFloat(this._getFormattedValue(this.endValue.toString()));
-                this.syncUIAndState();
-                this._updateHandlesAndRange(0);
-                this.update(this._valueAffected, this.startValue, this.endValue);
-                return;
-            }
-            this._lastValidStartValue = isStartValueValid ? this._getFormattedValue(inputStartValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
-            this._lastValidEndValue = isEndValueValid ? this._getFormattedValue(inputEndValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
-            if (startValueInput.valueState !== "Negative" && endValueInput.valueState !== "Negative") {
-                startValueInput.value = isStartValueValid ? this._getFormattedValue(inputStartValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
-                endValueInput.value = isEndValueValid ? this._getFormattedValue(inputEndValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
-            }
+        else {
+            this.endValue = clampedValue;
+            this._lastValidEndValue = clampedValue.toString();
         }
+        if (this.startValue > this.endValue) {
+            this._areInputValuesSwapped = true;
+            const temp = this.startValue;
+            this.startValue = this.endValue;
+            this.endValue = temp;
+            const tempValid = this._lastValidStartValue;
+            this._lastValidStartValue = this._lastValidEndValue;
+            this._lastValidEndValue = tempValid;
+            const oppositeSelector = isStart
+                ? "[data-sap-ui-end-value]"
+                : "[data-sap-ui-start-value]";
+            const oppositeInput = this.shadowRoot.querySelector(oppositeSelector);
+            oppositeInput?.focus();
+        }
+        this.bringToFrontTooltip(isStart ? "start" : "end");
+        this.update("value", this.startValue, this.endValue);
+        this.fireDecoratorEvent("change");
     }
     _getFormattedValue(value) {
         const valueNumber = parseFloat(value);
@@ -864,9 +784,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
                 "width": `100%`,
                 [this.directionStart]: `-${this._labelWidth / 2}%`,
             },
-            tooltip: {
-                "visibility": `${this._tooltipVisibility}`,
-            },
         };
     }
 };