@agnos-ui/core 0.10.0-next.1 → 0.10.0-next.3

package/{slider-Cx50Eghd.js → slider-B4WrdTeE.js}

@@ -1,9 +1,10 @@
 import { computed, writable, readable } from "@amadeus-it-group/tansu";
-import { l as createBrowserStoreDirective, h as createBrowserStoreArrayDirective, n as mergeDirectives, p as createAttributesDirective, b as browserDirective } from "./dom-Bcg9ORcA.js";
+import { l as createBrowserStoreDirective, h as createBrowserStoreArrayDirective, n as mergeDirectives, p as createAttributesDirective, b as browserDirective } from "./dom-DD1hAVZy.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
-import { i as typeArray, c as typeBoolean, b as typeNumberInRangeFactory, e as typeString, g as typeFunction, a as typeNumber } from "./writables-e0tyaQpe.js";
-import { createResizeObserver } from "./services/resizeObserver.js";
+import { j as typeArray, l as clamp, c as typeBoolean, b as typeNumberInRangeFactory, e as typeString, h as typeFunction, a as typeNumber } from "./writables-Is1bF1Vt.js";
+import { createResizeObserver, createResizeObserverMap } from "./services/resizeObserver.js";
+import { createPointerdownPositionDirective } from "./services/pointerdownPosition.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
 function getDecimalPrecision(number) {
@@ -175,7 +176,6 @@ const createSlider = createWidgetFactory("slider", (config) => {
     patch
   ] = writablesForProps(defaultSliderConfig, config, configValidator);
   const { vertical$, disabled$, readonly$ } = stateProps;
-  let _prevCoordinate = -1;
   const _handleElements = /* @__PURE__ */ new Map();
   const min$ = computed(() => {
     const _dirtyMinimum = _dirtyMinimum$(), _dirtyMaximum = _dirtyMaximum$();
@@ -238,20 +238,11 @@ const createSlider = createWidgetFactory("slider", (config) => {
   const { directive: sliderDirective, element$: sliderDom$ } = createBrowserStoreDirective();
   const { directive: minLabelDomDirective, element$: minLabelDom$ } = createBrowserStoreDirective();
   const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = createBrowserStoreDirective();
-  const { directive: combinedLabelDomDirective, element$: combinedLabelDom$ } = createBrowserStoreDirective();
   const { directive: handleLabelDirective, elements$: currentLabelDoms$ } = createBrowserStoreArrayDirective();
   const { directive: resizeDirective, dimensions$ } = createResizeObserver();
+  const { directive: resizeLabelsDirective, dimensionsMap$: handleDimensions$ } = createResizeObserverMap();
+  const { directive: resizeCombineLabelDirective, dimensions$: combinedDimensions$ } = createResizeObserver();
   const updateSliderSize$ = writable({});
-  const currentLabelDomsRect$ = computed(
-    () => {
-      dimensions$();
-      updateSliderSize$();
-      return currentLabelDoms$().map((element) => element.getBoundingClientRect());
-    },
-    {
-      equal: Object.is
-    }
-  );
   const sliderDomRect$ = computed(
     () => {
       dimensions$();
@@ -282,8 +273,8 @@ const createSlider = createWidgetFactory("slider", (config) => {
       equal: (a, b) => Object.is(a, b)
     }
   );
-  const sliderDomRectOffset$ = computed(() => vertical$() ? sliderDomRect$().top : sliderDomRect$().left);
-  const sliderDomRectSize$ = computed(() => vertical$() ? sliderDomRect$().height : sliderDomRect$().width);
+  const sliderDomRectOffset$ = computed(() => sliderDomRect$()[vertical$() ? "top" : "left"]);
+  const sliderDomRectSize$ = computed(() => sliderDomRect$()[vertical$() ? "height" : "width"]);
   const sortedValues$ = computed(() => [...values$()].sort((a, b) => a - b));
   const _sortedHandlesValues$ = computed(() => {
     return values$().map((val, index) => {
@@ -303,21 +294,15 @@ const createSlider = createWidgetFactory("slider", (config) => {
   });
   const valuesPercent$ = computed(() => values$().map((val) => percentCompute(val)));
   const sortedValuesPercent$ = computed(() => [...valuesPercent$()].sort((a, b) => a - b));
-  const minLabelSize$ = computed(() => {
-    const minLabelDomRect = minLabelDomRect$();
-    return pixelToPercent(vertical$() ? minLabelDomRect.height : minLabelDomRect.width);
-  });
-  const maxLabelSize$ = computed(() => {
-    const maxLabelDomRect = maxLabelDomRect$();
-    return pixelToPercent(vertical$() ? maxLabelDomRect.height : maxLabelDomRect.width);
-  });
+  const activeDimension$ = computed(() => vertical$() ? "height" : "width");
+  const activePosition$ = computed(() => vertical$() ? "top" : "left");
+  const minLabelSize$ = computed(() => pixelToPercent(minLabelDomRect$()[activeDimension$()]));
+  const maxLabelSize$ = computed(() => pixelToPercent(maxLabelDomRect$()[activeDimension$()]));
   const adjustedShowValueLabels$ = computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
   const pixelToPercent = (pixels) => pixels ? pixels / sliderDomRectSize$() * 100 : 0;
-  const combinedLabelSize$ = computed(
-    () => pixelToPercent(vertical$() ? combinedLabelDom$()?.getBoundingClientRect().height : combinedLabelDom$()?.getBoundingClientRect().width)
-  );
+  const combinedLabelSize$ = computed(() => pixelToPercent(combinedDimensions$()?.contentRect[activeDimension$()]));
   const combinedLabelPosition$ = computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
-  const currentLabelSizeByIndex = (index) => pixelToPercent(vertical$() ? currentLabelDomsRect$()[index]?.height : currentLabelDomsRect$()[index]?.width);
+  const currentLabelSizeByIndex = (index) => pixelToPercent(handleDimensions$().get(currentLabelDoms$()[index])?.contentRect[activeDimension$()]);
   const minValueLabelDisplay$ = computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
@@ -352,23 +337,34 @@ const createSlider = createWidgetFactory("slider", (config) => {
     const sortedValuesPercent = sortedValuesPercent$();
     return rtl ? 100 - sortedValuesPercent[sortedValuesPercent.length - 1] - currentLabelSizeByIndex(0) / 2 > maxLabelSize + 1 : sortedValuesPercent[sortedValuesPercent.length - 1] + currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 < 100 - maxLabelSize - 1;
   });
-  const storedLabelSize$ = writable([]);
   const combinedLabelDisplay$ = computed(() => {
-    const values = sortedValuesPercent$();
-    if (currentLabelDomsRect$().length === values.length) {
-      storedLabelSize$.set(values.map((_, index) => currentLabelSizeByIndex(index) / 2));
+    if (currentLabelDoms$().length == 2) {
+      return doLabelsIntersect();
     }
-    const storedLabelSize = storedLabelSize$();
-    const firstLabelSize = storedLabelSize?.[0] ?? 0;
-    const secondLabelSize = storedLabelSize?.[1] ?? 0;
-    const biggestLabelSize = Math.max(firstLabelSize, secondLabelSize);
-    const intersectionLimit = biggestLabelSize !== 50 ? biggestLabelSize * 2 + 2 : 15;
-    return values.length == 2 && values[1] - secondLabelSize - values[0] + firstLabelSize < intersectionLimit;
+    return false;
   });
+  function doLabelsIntersect() {
+    const handleOptions = handleDisplayOptions$();
+    const activePosition = activePosition$();
+    const labelPosition1 = labelPosition(handleOptions[0][activePosition], currentLabelSizeByIndex(0));
+    const labelPosition2 = labelPosition(handleOptions[1][activePosition], currentLabelSizeByIndex(1));
+    const labelSize1 = currentLabelSizeByIndex(0);
+    const labelSize2 = currentLabelSizeByIndex(1);
+    if (labelSize1 === 100 || labelSize2 === 100) {
+      return false;
+    }
+    const labelStart1 = labelPosition1 - labelSize1;
+    const labelEnd1 = labelPosition1 + labelSize1;
+    const labelStart2 = labelPosition2 - labelSize2;
+    const labelEnd2 = labelPosition2 + labelSize2;
+    return !(labelEnd1 < labelStart2 || labelStart1 > labelEnd2);
+  }
   const interactive$ = computed(() => !disabled$() && !readonly$());
   const combinedLabelPositionLeft$ = computed(() => {
     const sortedValuesPercent = sortedValuesPercent$();
-    const combinedPosition = (sortedValuesPercent[0] + sortedValuesPercent[1]) / 2;
+    const combinedLabelSize = combinedLabelSize$();
+    let combinedPosition = (sortedValuesPercent[0] + sortedValuesPercent[1]) / 2;
+    combinedPosition = labelPosition(combinedPosition, combinedLabelSize);
     return vertical$() || sortedValuesPercent.length != 2 ? 0 : rtl$() ? 100 - combinedPosition : combinedPosition;
   });
   const combinedLabelPositionTop$ = computed(() => {
@@ -385,6 +381,7 @@ const createSlider = createWidgetFactory("slider", (config) => {
       };
     });
   });
+  const labelPosition = (initialPosition, labelSize) => clamp(initialPosition, 100 - labelSize / 2, labelSize / 2);
   const progressDisplayOptions$ = computed(() => {
     const vertical = vertical$(), sortedValuesPercent = sortedValuesPercent$(), rtl = rtl$();
     if (sortedValuesPercent.length === 1) {
@@ -551,119 +548,76 @@ const createSlider = createWidgetFactory("slider", (config) => {
       destroy
     };
   });
-  const mouseDown = (event, handleId) => {
-    event.preventDefault();
-    const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
-    const handleDrag = (e) => {
-      e.preventDefault();
-      const newCoord = vertical$() ? e.clientY : e.clientX;
-      currentTarget?.focus();
-      if (_prevCoordinate !== newCoord) {
-        _prevCoordinate = newCoord;
-        adjustCoordinate(newCoord, handleId);
-      }
-    };
-    if (interactive$()) {
-      updateSliderSize$.set({});
-      currentTarget?.focus();
-      document.addEventListener("mousemove", handleDrag);
-      document.addEventListener(
-        "mouseup",
-        () => {
-          document.removeEventListener("mousemove", handleDrag);
-        },
-        { once: true }
-      );
-    }
-  };
-  const touchStart = (event, handleId) => {
+  const pointerMoveStart = (event, handleId) => {
     const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
-    const handleDrag = (e) => {
-      e.preventDefault();
-      const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
-      currentTarget?.focus();
-      if (_prevCoordinate !== newCoord) {
-        _prevCoordinate = newCoord;
-        adjustCoordinate(newCoord, handleId);
-      }
-    };
     if (interactive$()) {
+      const vertical = vertical$();
+      const clientXorY = vertical ? "clientY" : "clientX";
+      let _prevCoordinate = event[clientXorY];
       updateSliderSize$.set({});
       currentTarget?.focus();
-      document.addEventListener("touchmove", handleDrag, { passive: false });
-      document.addEventListener(
-        "touchend",
-        () => {
-          document.removeEventListener("touchmove", handleDrag);
-          document.removeEventListener("touchcancel", handleDrag);
-        },
-        { once: true }
-      );
-      document.addEventListener(
-        "touchcancel",
-        () => {
-          document.removeEventListener("touchmove", handleDrag);
-          document.removeEventListener("touchend", handleDrag);
-        },
-        { once: true }
-      );
+      return {
+        onMove: (event2) => {
+          currentTarget?.focus();
+          const newCoord = event2[clientXorY];
+          if (_prevCoordinate !== newCoord) {
+            _prevCoordinate = newCoord;
+            adjustCoordinate(newCoord, handleId);
+          }
+        }
+      };
     }
+    return void 0;
   };
-  const handleEventsDirective = createAttributesDirective((handleContext$) => ({
-    events: {
-      keydown: (event) => {
-        const handleIndex = handleContext$().item.id;
-        const { key } = event;
-        const rtl = rtl$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
-        if (interactive$()) {
-          switch (key) {
-            case "ArrowDown":
-              updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
-              break;
-            case "ArrowLeft":
-              updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
-              break;
-            case "ArrowUp":
-              updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
-              break;
-            case "ArrowRight":
-              updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
-              break;
-            case "Home":
-              values$.update((value) => {
-                value = [...value];
-                value[handleIndex] = min;
-                return value;
-              });
-              break;
-            case "End":
-              values$.update((value) => {
-                value = [...value];
-                value[handleIndex] = max;
-                return value;
-              });
-              break;
-            case "PageUp":
-              break;
-            case "PageDown":
-              break;
-            default:
-              return;
+  const handleEventsDirective = mergeDirectives(
+    createAttributesDirective((handleContext$) => ({
+      events: {
+        keydown: (event) => {
+          const handleIndex = handleContext$().item.id;
+          const { key } = event;
+          const rtl = rtl$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
+          if (interactive$()) {
+            switch (key) {
+              case "ArrowDown":
+                updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
+                break;
+              case "ArrowLeft":
+                updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
+                break;
+              case "ArrowUp":
+                updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
+                break;
+              case "ArrowRight":
+                updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
+                break;
+              case "Home":
+                values$.update((value) => {
+                  value = [...value];
+                  value[handleIndex] = min;
+                  return value;
+                });
+                break;
+              case "End":
+                values$.update((value) => {
+                  value = [...value];
+                  value[handleIndex] = max;
+                  return value;
+                });
+                break;
+              case "PageUp":
+                break;
+              case "PageDown":
+                break;
+              default:
+                return;
+            }
+            event.preventDefault();
           }
-          event.preventDefault();
-        }
-      },
-      mousedown: (event) => {
-        if (event.button !== 0) {
-          return;
         }
-        mouseDown(event, handleContext$().item.id);
-      },
-      touchstart: (event) => {
-        touchStart(event, handleContext$().item.id);
       }
-    }
-  }));
+    })),
+    createPointerdownPositionDirective((position, { item: { id } }) => pointerMoveStart(position, id))
+  );
   const widget = {
     ...stateStores({
       min$,
@@ -705,30 +659,21 @@ const createSlider = createWidgetFactory("slider", (config) => {
           "au-slider-progress": true$
         }
       })),
-      clickableAreaDirective: createAttributesDirective(() => ({
-        events: {
-          mousedown: (event) => {
-            if (event.button !== 0) {
-              return;
-            }
-            const clickedCoordinate = vertical$() ? event.clientY : event.clientX;
-            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
-            adjustCoordinate(clickedCoordinate, closestHandle);
-            mouseDown(event, closestHandle);
-          },
-          touchstart: (event) => {
-            const clickedCoordinate = vertical$() ? event.touches[0].clientY : event.touches[0].clientX;
-            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
-            adjustCoordinate(clickedCoordinate, closestHandle);
-            touchStart(event, closestHandle);
+      clickableAreaDirective: mergeDirectives(
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-slider-clickable-area": horizontal$,
+            "au-slider-clickable-area-vertical": vertical$,
+            "au-slider-clickable-area-with-ticks": computed(() => showTicks$() && tickInterval$() === 0)
           }
-        },
-        classNames: {
-          "au-slider-clickable-area": horizontal$,
-          "au-slider-clickable-area-vertical": vertical$,
-          "au-slider-clickable-area-with-ticks": computed(() => showTicks$() && tickInterval$() === 0)
-        }
-      })),
+        })),
+        createPointerdownPositionDirective((position) => {
+          const clickedCoordinate = vertical$() ? position.clientY : position.clientX;
+          const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
+          adjustCoordinate(clickedCoordinate, closestHandle);
+          return pointerMoveStart(position, closestHandle);
+        })
+      ),
       handleEventsDirective,
       handleDirective: mergeDirectives(
         handleElementDirective,
@@ -761,7 +706,7 @@ const createSlider = createWidgetFactory("slider", (config) => {
       minLabelDirective: mergeDirectives(minLabelDomDirective, minLabelDirective),
       maxLabelDirective: mergeDirectives(maxLabelDomDirective, maxLabelDirective),
       combinedHandleLabelDisplayDirective: mergeDirectives(
-        combinedLabelDomDirective,
+        resizeCombineLabelDirective,
         createAttributesDirective(() => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -780,6 +725,7 @@ const createSlider = createWidgetFactory("slider", (config) => {
       ),
       handleLabelDisplayDirective: mergeDirectives(
         handleLabelDirective,
+        resizeLabelsDirective,
         createAttributesDirective((labelDisplayContext$) => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -788,8 +734,13 @@ const createSlider = createWidgetFactory("slider", (config) => {
             "au-slider-label-now": horizontal$
           },
           styles: {
-            left: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
-            top: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
+            left: computed(() => {
+              const handleIndex = labelDisplayContext$().index;
+              const leftPosition = handleDisplayOptions$()[handleIndex].left;
+              return leftPosition === null ? "" : percent(labelPosition(leftPosition, currentLabelSizeByIndex(handleIndex)));
+            }),
+            top: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top)),
+            opacity: computed(() => combinedLabelDisplay$() ? "0" : "1")
           },
           attributes: {
             "aria-hidden": readable("true")