@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/RangeSlider.js

@@ -8,7 +8,8 @@ var RangeSlider_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isEscape, isEnter, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isEscape, isEnter, isHome, isEnd, isF2, } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 import RangeSliderTemplate from "./RangeSliderTemplate.js";
 // Texts
@@ -70,6 +71,34 @@ import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
  * @csspart handle - Used to style the handles of the `ui5-range-slider`.
  */
 let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
+    /**
+     * Defines start point of a selection - position of a first handle on the slider.
+     * @default 0
+     * @formEvents change input
+     * @formProperty
+     * @public
+     */
+    set startValue(value) {
+        this._startValue = value;
+        this.tooltipStartValue = value.toString();
+    }
+    get startValue() {
+        return this._startValue;
+    }
+    /**
+     * Defines end point of a selection - position of a second handle on the slider.
+     * @default 100
+     * @formEvents change input
+     * @formProperty
+     * @public
+     */
+    set endValue(value) {
+        this._endValue = value;
+        this.tooltipEndValue = value.toString();
+    }
+    get endValue() {
+        return this._endValue;
+    }
     get formFormattedValue() {
         const formData = new FormData();
         if (!this.name) {
@@ -81,25 +110,15 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     }
     constructor() {
         super();
-        /**
-         * Defines start point of a selection - position of a first handle on the slider.
-         * @default 0
-         * @formEvents change input
-         * @formProperty
-         * @public
-         */
-        this.startValue = 0;
-        /**
-         * Defines end point of a selection - position of a second handle on the slider.
-         * @default 100
-         * @formEvents change input
-         * @formProperty
-         * @public
-         */
-        this.endValue = 100;
+        this.tooltipStartValue = "";
+        this.tooltipEndValue = "";
+        this.tooltipStartValueState = "None";
+        this.tooltipEndValueState = "None";
         this.rangePressed = false;
         this._isStartValueValid = false;
         this._isEndValueValid = false;
+        this._startValue = 0;
+        this._endValue = 100;
         this._isPressInCurrentRange = false;
         this._handeIsPressed = false;
         this._reversedValues = false;
@@ -109,16 +128,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._lastValidStartValue = this.min.toString();
         this._lastValidEndValue = this.max.toString();
     }
-    get tooltipStartValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.startValue.toFixed(stepPrecision);
-    }
-    get tooltipEndValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.endValue.toFixed(stepPrecision);
-    }
     get _ariaDisabled() {
         return this.disabled || undefined;
     }
@@ -159,9 +168,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;
         }
@@ -170,6 +176,12 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._updateHandlesAndRange(0);
         this.update(this._valueAffected, this.startValue, this.endValue);
     }
+    onAfterRendering() {
+        super.onAfterRendering();
+        [...this.getDomRef().querySelectorAll("[ui5-slider-tooltip]")].forEach(tooltip => {
+            tooltip.repositionTooltip();
+        });
+    }
     syncUIAndState() {
         // Validate step and update the stored state for the step property.
         if (this.isPropertyUpdated("step")) {
@@ -207,9 +219,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 +240,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;
         }
     }
     /**
@@ -315,6 +298,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
             this.update(affectedValue, newStartValue, newEndValue);
         }
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     /**
      * Determines affected value (start/end) depending on the currently
@@ -382,7 +367,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 +412,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
@@ -437,6 +422,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         // Updates UI and state when dragging of the whole selected range
         this._updateValueOnRangeDrag(e);
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     /**
      * Updates UI and state when dragging a single Range Slider handle
@@ -461,10 +448,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 +460,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 +545,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 +552,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,78 +649,107 @@ 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;
+    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) {
+            const frame = requestAnimationFrame(() => {
+                if (tooltip.getDomRef()?.offsetParent === null) {
+                    cancelAnimationFrame(frame);
+                    return;
+                }
+                tooltip.hidePopover();
+                tooltip.showPopover();
+            });
+        }
+    }
+    _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 isInvalid = inputValue > this._effectiveMax || inputValue < this._effectiveMin;
+        if (isInvalid) {
+            if (isStart) {
+                this.tooltipStartValueState = ValueState.Negative;
+                this.tooltipStartValue = e.detail.value;
+            }
+            else {
+                this.tooltipEndValueState = ValueState.Negative;
+                this.tooltipEndValue = e.detail.value;
             }
-            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;
-        }
-        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;
+        const clampedValue = Math.min(this.max, Math.max(this.min, inputValue));
+        if (isStart) {
+            this.startValue = clampedValue;
+            this._lastValidStartValue = clampedValue.toString();
         }
-        if (!this._isEndValueValid) {
-            endValueInput.valueState = "Negative";
-            return;
+        else {
+            this.endValue = clampedValue;
+            this._lastValidEndValue = 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;
+        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");
+    }
+    _onTooltipFocusChange(e) {
+        const tooltip = e.target;
+        const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
+        const value = isStart ? this.tooltipStartValue : this.tooltipEndValue;
+        const isInvalid = parseFloat(value) > this._effectiveMax || parseFloat(value) < this._effectiveMin;
+        if (isInvalid) {
+            if (isStart) {
+                this.tooltipStartValueState = ValueState.None;
+                this.tooltipStartValue = this.startValue.toString();
             }
-            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.tooltipEndValueState = ValueState.None;
+                this.tooltipEndValue = this.endValue.toString();
             }
         }
     }
+    _onTooltipOpen() {
+        const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        this.tooltipStartValue = this.startValue.toFixed(stepPrecision);
+        this.tooltipEndValue = this.endValue.toFixed(stepPrecision);
+    }
+    _onTooltipInput(e) {
+        const tooltip = e.target;
+        const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
+        if (isStart) {
+            this.tooltipStartValue = e.detail.value;
+        }
+        else {
+            this.tooltipEndValue = e.detail.value;
+        }
+    }
+    _onTooltipKeydown(e) {
+        if (isF2(e)) {
+            e.preventDefault();
+            e.target.followRef?.focus();
+        }
+    }
     _getFormattedValue(value) {
         const valueNumber = parseFloat(value);
         const ctor = this.constructor;
@@ -849,7 +842,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             progress: {
                 "width": `${this._selectedRange * 100}%`,
                 "transform-origin": `${this.directionStart} top`,
-                [this.directionStart]: `${this._firstHandlePositionFromStart}%`,
+                [this.directionStart]: `calc(${this._firstHandlePositionFromStart}% + var(--_ui5_slider_active_progress_left))`,
             },
             startHandle: {
                 [this.directionStart]: `${this._firstHandlePositionFromStart}%`,
@@ -857,25 +850,27 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             endHandle: {
                 [this.directionStart]: `${this._secondHandlePositionFromStart}%`,
             },
-            label: {
-                "width": `${this._labelWidth}%`,
-            },
-            labelContainer: {
-                "width": `100%`,
-                [this.directionStart]: `-${this._labelWidth / 2}%`,
-            },
-            tooltip: {
-                "visibility": `${this._tooltipVisibility}`,
-            },
         };
     }
 };
 __decorate([
     property({ type: Number })
-], RangeSlider.prototype, "startValue", void 0);
+], RangeSlider.prototype, "startValue", null);
 __decorate([
     property({ type: Number })
-], RangeSlider.prototype, "endValue", void 0);
+], RangeSlider.prototype, "endValue", null);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipStartValue", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipEndValue", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipStartValueState", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipEndValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "rangePressed", void 0);