@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/RangeSlider.js

@@ -8,7 +8,9 @@ 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 { getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import SliderBase from "./SliderBase.js";
 import RangeSliderTemplate from "./RangeSliderTemplate.js";
 // Texts
@@ -70,6 +72,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 +111,16 @@ 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._progressFocused = false;
         this._isStartValueValid = false;
         this._isEndValueValid = false;
+        this._startValue = 0;
+        this._endValue = 100;
         this._isPressInCurrentRange = false;
         this._handeIsPressed = false;
         this._reversedValues = false;
@@ -108,16 +129,25 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._stateStorage.endValue = undefined;
         this._lastValidStartValue = this.min.toString();
         this._lastValidEndValue = this.max.toString();
+        this._onDocumentClickBound = this._onDocumentClick.bind(this);
     }
-    get tooltipStartValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.startValue.toFixed(stepPrecision);
+    onEnterDOM() {
+        document.addEventListener("mousedown", this._onDocumentClickBound, true);
     }
-    get tooltipEndValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.endValue.toFixed(stepPrecision);
+    onExitDOM() {
+        document.removeEventListener("mousedown", this._onDocumentClickBound, true);
+    }
+    /**
+     * Handles document-level clicks to clear progress focus when clicking outside.
+     * @private
+     */
+    _onDocumentClick(e) {
+        const clickedInside = e.composedPath().includes(this);
+        if (!clickedInside) {
+            if (this._tooltipsOpen) {
+                this._tooltipsOpen = false;
+            }
+        }
     }
     get _ariaDisabled() {
         return this.disabled || undefined;
@@ -167,6 +197,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")) {
@@ -225,6 +261,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._setAffectedValue(undefined);
         this._startValueInitial = undefined;
         this._endValueInitial = undefined;
+        this._progressFocused = false;
         if (this.showTooltip && !e.relatedTarget?.hasAttribute("ui5-slider-tooltip")) {
             this._tooltipsOpen = false;
         }
@@ -250,7 +287,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._startValueAtBeginningOfAction = this.startValue;
         this._endValueAtBeginningOfAction = this.endValue;
         if (isEscape(e)) {
-            this.update(undefined, this._startValueInitial, this._endValueInitial);
+            if (this._startValueInitial !== undefined && this._endValueInitial !== undefined) {
+                this.update(undefined, this._startValueInitial, this._endValueInitial);
+            }
             return;
         }
         // Set the target of the interaction based on the focused inner element
@@ -273,16 +312,19 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         // Update a single value if one of the handles is focused or the range if not already at min or max
         const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
         if (affectedValue && !this._isPressInCurrentRange) {
             const propValue = this[affectedValue];
-            const newValue = ctor.clipValue(newValueOffset + propValue, min, max);
+            const newValue = Number(ctor.clipValue(newValueOffset + propValue, min, max).toFixed(stepPrecision));
             this.update(affectedValue, newValue, undefined);
         }
         else if ((newValueOffset < 0 && this.startValue > min) || (newValueOffset > 0 && this.endValue < max)) {
-            const newStartValue = ctor.clipValue(newValueOffset + this.startValue, min, max);
-            const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
+            const newStartValue = Number(ctor.clipValue(newValueOffset + this.startValue, min, max).toFixed(stepPrecision));
+            const newEndValue = Number(ctor.clipValue(newValueOffset + this.endValue, min, max).toFixed(stepPrecision));
             this.update(affectedValue, newStartValue, newEndValue);
         }
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     /**
      * Determines affected value (start/end) depending on the currently
@@ -296,7 +338,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         if (this.shadowRoot.activeElement === this._endHandle) {
             this._setAffectedValue("endValue");
         }
-        if (this.shadowRoot.activeElement === this._progressBar) {
+        // Progress bar is inside SliderScale's shadow DOM, so check the nested activeElement
+        const sliderScale = this.shadowRoot.querySelector("[ui5-slider-scale]");
+        if (sliderScale?.shadowRoot?.activeElement === this._progressBar) {
             this._setAffectedValue(undefined);
         }
         this._setIsPressInCurrentRange(!this._valueAffected);
@@ -309,8 +353,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     _homeEndForSelectedRange(e, affectedValue, min, max) {
         const newValueOffset = this._handleActionKeyPressBase(e, affectedValue);
         const ctor = this.constructor;
-        const newStartValue = ctor.clipValue(newValueOffset + this.startValue, min, max);
-        const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        const newStartValue = Number(ctor.clipValue(newValueOffset + this.startValue, min, max).toFixed(stepPrecision));
+        const newEndValue = Number(ctor.clipValue(newValueOffset + this.endValue, min, max).toFixed(stepPrecision));
         this.update(undefined, newStartValue, newEndValue);
     }
     /**
@@ -353,12 +398,27 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         if (this.disabled || this._effectiveStep === 0 || e.target.hasAttribute("ui5-slider-tooltip")) {
             return;
         }
-        // Calculate the new value from the press position of the event
+        // Pre-calculate whether the press is in the current range before handleDownBase
+        // This is needed so focusInnerElement() knows where to focus
+        const ctor = this.constructor;
+        const pageX = ctor.getPageXValueFromEvent(e);
+        const tempValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
+        const isInRange = tempValue >= this.startValue && tempValue <= this.endValue;
+        const startHandle = this._startHandle;
+        const endHandle = this._endHandle;
+        const inStartHandle = startHandle && pageX >= startHandle.getBoundingClientRect().left && pageX <= startHandle.getBoundingClientRect().right;
+        const inEndHandle = endHandle && pageX >= endHandle.getBoundingClientRect().left && pageX <= endHandle.getBoundingClientRect().right;
         const newValue = this.handleDownBase(e);
-        // Determine the rest of the needed details from the start of the interaction.
+        if (isInRange && !inStartHandle && !inEndHandle) {
+            this._setIsPressInCurrentRange(true);
+            this._progressFocused = true;
+            this.rangePressed = true;
+        }
+        else {
+            this._progressFocused = false;
+            this.rangePressed = false;
+        }
         this._saveInteractionStartData(e, newValue);
-        this.rangePressed = this._isPressInCurrentRange;
-        // Do not yet update the RangeSlider if press is in range or over a handle.
         if (this._isPressInCurrentRange || this._handeIsPressed) {
             this._handeIsPressed = false;
             return;
@@ -376,7 +436,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @private
      */
     _saveInteractionStartData(e, newValue) {
-        const progressBarDom = this.shadowRoot.querySelector(".ui5-slider-progress").getBoundingClientRect();
+        const progressBarDom = this._progressBar?.getBoundingClientRect();
         // Save the state of the value properties on the start of the interaction
         this._startValueAtBeginningOfAction = this.startValue;
         this._endValueAtBeginningOfAction = this.endValue;
@@ -386,7 +446,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // Which element of the Range Slider is pressed and which value property to be modified on further interaction
         this._pressTargetAndAffectedValue(this._initialPageXPosition, newValue);
         // Use the progress bar to save the initial coordinates of the start-handle when the interaction begins.
-        this._initialStartHandlePageX = this.directionStart === "left" ? progressBarDom.left : progressBarDom.right;
+        if (progressBarDom) {
+            this._initialStartHandlePageX = this.directionStart === "left" ? progressBarDom.left : progressBarDom.right;
+        }
     }
     /**
      * Called when the user moves the slider
@@ -405,6 +467,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
@@ -455,8 +519,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @private
      */
     _pressTargetAndAffectedValue(clientX, value) {
-        const startHandle = this.shadowRoot.querySelector(".ui5-slider-handle--start");
-        const endHandle = this.shadowRoot.querySelector(".ui5-slider-handle--end");
+        const startHandle = this._startHandle;
+        const endHandle = this._endHandle;
         // Check if the press point is in the bounds of any of the Range Slider handles
         const handleStartDomRect = startHandle.getBoundingClientRect();
         const handleEndDomRect = endHandle.getBoundingClientRect();
@@ -529,14 +593,14 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         const isReversed = this._areValuesReversed();
         const affectedValue = this._valueAffected;
         if (this._isPressInCurrentRange || !affectedValue) {
-            this._progressBar.focus();
+            this._progressBar?.focus();
         }
         if ((affectedValue === "startValue" && !isReversed) || (affectedValue === "endValue" && isReversed)) {
-            this._startHandle.focus();
+            this._startHandle?.focus();
             this.bringToFrontTooltip("start");
         }
         if ((affectedValue === "endValue" && !isReversed) || (affectedValue === "startValue" && isReversed)) {
-            this._endHandle.focus();
+            this._endHandle?.focus();
             this.bringToFrontTooltip("end");
         }
     }
@@ -564,7 +628,10 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // And the opposite - if the start handle reaches the beginning of the slider keep the initially selected range.
         const ctor = this.constructor;
         startValue = ctor.clipValue(startValue, min, max - selectedRange);
-        return [startValue, startValue + selectedRange];
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        const endValue = Number((startValue + selectedRange).toFixed(stepPrecision));
+        startValue = Number(startValue.toFixed(stepPrecision));
+        return [startValue, endValue];
     }
     /**
      * Computes the new value based on the difference of the current cursor location from the
@@ -636,7 +703,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             : "[data-sap-ui-end-value]";
         const tooltip = this.shadowRoot.querySelector(tooltipSelector);
         if (tooltip?.hidePopover && tooltip?.showPopover) {
-            requestAnimationFrame(() => {
+            const frame = requestAnimationFrame(() => {
+                if (tooltip.getDomRef()?.offsetParent === null) {
+                    cancelAnimationFrame(frame);
+                    return;
+                }
                 tooltip.hidePopover();
                 tooltip.showPopover();
             });
@@ -647,15 +718,34 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         tooltip.followRef?.focus();
     }
     _onTooltipChange(e) {
+        // Skip if this is a focusout change event triggered by the swap focus change
+        if (this._areInputValuesSwapped) {
+            this._areInputValuesSwapped = false;
+            return;
+        }
         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;
+            }
+            return;
+        }
         const clampedValue = Math.min(this.max, Math.max(this.min, inputValue));
         if (isStart) {
+            this.tooltipStartValueState = ValueState.None;
             this.startValue = clampedValue;
             this._lastValidStartValue = clampedValue.toString();
         }
         else {
+            this.tooltipEndValueState = ValueState.None;
             this.endValue = clampedValue;
             this._lastValidEndValue = clampedValue.toString();
         }
@@ -677,6 +767,45 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         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();
+            }
+            else {
+                this.tooltipEndValueState = ValueState.None;
+                this.tooltipEndValue = this.endValue.toString();
+            }
+        }
+    }
+    _onTooltipOpen() {
+        if (!this.startValue || !this.endValue) {
+            return;
+        }
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
+    }
+    _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;
@@ -744,13 +873,14 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         return arr;
     }
     get _startHandle() {
-        return this.shadowRoot.querySelector(".ui5-slider-handle--start");
+        return this.shadowRoot.querySelector("[ui5-slider-handle][handle-type='Start']");
     }
     get _endHandle() {
-        return this.shadowRoot.querySelector(".ui5-slider-handle--end");
+        return this.shadowRoot.querySelector("[ui5-slider-handle][handle-type='End']");
     }
     get _progressBar() {
-        return this.shadowRoot.querySelector(".ui5-slider-progress");
+        const sliderScale = this.shadowRoot.querySelector("[ui5-slider-scale]");
+        return sliderScale?.shadowRoot?.querySelector(".ui5-slider-progress") ?? null;
     }
     get _ariaLabelledByStartHandleText() {
         return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-startHandleDesc"].join(" ").trim() : "ui5-slider-startHandleDesc";
@@ -758,6 +888,29 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     get _ariaLabelledByEndHandleText() {
         return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-endHandleDesc"].join(" ").trim() : "ui5-slider-endHandleDesc";
     }
+    /**
+     * @private
+     */
+    get _ariaLabelStartHandle() {
+        return this._getAriaLabelHandle(this._ariaHandlesText.startHandleText || "");
+    }
+    /**
+     * @private
+     */
+    get _ariaLabelEndHandle() {
+        return this._getAriaLabelHandle(this._ariaHandlesText.endHandleText || "");
+    }
+    _getAriaLabelHandle(handleDescription) {
+        const associatedLabelText = getAssociatedLabelForTexts(this);
+        const hasAccessibleName = !!this.accessibleName;
+        let labelText = hasAccessibleName
+            ? `${this.accessibleName} ${handleDescription}`
+            : handleDescription;
+        if (!hasAccessibleName && associatedLabelText) {
+            labelText = `${associatedLabelText} ${labelText}`;
+        }
+        return labelText;
+    }
     get _ariaLabelledByInputText() {
         return RangeSlider_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
     }
@@ -769,7 +922,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}%`,
@@ -782,13 +935,28 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
 };
 __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);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "_progressFocused", void 0);
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "_isStartValueValid", void 0);
@@ -804,7 +972,7 @@ RangeSlider = RangeSlider_1 = __decorate([
         languageAware: true,
         formAssociated: true,
         template: RangeSliderTemplate,
-        styles: [SliderBase.styles, rangeSliderStyles],
+        styles: [rangeSliderStyles],
     })
 ], RangeSlider);
 RangeSlider.define();