@agnos-ui/core 0.7.1 → 0.8.0-next.0

package/services/resizeObserver.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("../directive-BtOvPrmt.cjs");
-const func = require("../func-Qd3cD9a3.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
+const utils_func = require("../utils/func.cjs");
 const createResizeObserver = () => {
   const { element$, directive } = utils_directive.createBrowserStoreDirective();
   const observedElement$ = tansu.derived(
     element$,
     (element, set) => {
       if (element === null) {
-        return func.noop;
+        return utils_func.noop;
       }
       const observer = new ResizeObserver((entries) => {
         set(entries[0]);

package/services/resizeObserver.js

@@ -1,6 +1,6 @@
 import { derived } from "@amadeus-it-group/tansu";
-import { j as createBrowserStoreDirective } from "../directive-DrDJkTS5.js";
-import { n as noop } from "../func-DR0n-ShK.js";
+import { j as createBrowserStoreDirective } from "../dom-BB9jLllr.js";
+import { noop } from "../utils/func.js";
 const createResizeObserver = () => {
   const { element$, directive } = createBrowserStoreDirective();
   const observedElement$ = derived(

package/services/siblingsInert.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const func = require("../func-Qd3cD9a3.cjs");
-const utils_directive = require("../directive-BtOvPrmt.cjs");
+const utils_func = require("../utils/func.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
 const internalSetSiblingsInert = (element) => {
   const inertValues = /* @__PURE__ */ new Map();
   const recursiveHelper = (element2) => {
@@ -22,10 +22,10 @@ const internalSetSiblingsInert = (element) => {
     element2.toggleAttribute("inert", value);
   });
 };
-let internalRevert = func.noop;
+let internalRevert = utils_func.noop;
 const setSiblingsInert = (element) => {
   internalRevert();
-  internalRevert = element ? internalSetSiblingsInert(element) : func.noop;
+  internalRevert = element ? internalSetSiblingsInert(element) : utils_func.noop;
 };
 const { directive: storeArrayDirective, elements$ } = utils_directive.createBrowserStoreArrayDirective();
 const lastElement$ = tansu.computed(

package/services/siblingsInert.js

@@ -1,6 +1,6 @@
 import { computed } from "@amadeus-it-group/tansu";
-import { n as noop } from "../func-DR0n-ShK.js";
-import { g as createBrowserStoreArrayDirective, k as mergeDirectives, d as directiveSubscribe } from "../directive-DrDJkTS5.js";
+import { noop } from "../utils/func.js";
+import { g as createBrowserStoreArrayDirective, k as mergeDirectives, d as directiveSubscribe } from "../dom-BB9jLllr.js";
 const internalSetSiblingsInert = (element) => {
   const inertValues = /* @__PURE__ */ new Map();
   const recursiveHelper = (element2) => {

package/services/transitions/baseTransitions.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
 const utils_writables = require("../../writables-BPAJvaL_.cjs");
-const promise = require("../../promise-BMJ8qhA8.cjs");
-const func = require("../../func-Qd3cD9a3.cjs");
+const promise = require("../../promise-CxCD3NYv.cjs");
+const utils_func = require("../../utils/func.cjs");
 const utils_stores = require("../../utils/stores.cjs");
-const utils_directive = require("../../directive-BtOvPrmt.cjs");
-const neverEndingPromise = new Promise(func.noop);
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
+const neverEndingPromise = new Promise(utils_func.noop);
 const noAnimation = (element, direction) => {
   element.style.display = direction === "show" ? "" : "none";
 };
@@ -16,9 +16,9 @@ const defaultValues = {
   initDone: null,
   visible: true,
   transition: noAnimation,
-  onShown: func.noop,
-  onHidden: func.noop,
-  onVisibleChange: func.noop
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  onVisibleChange: utils_func.noop
 };
 const configValidator = {
   animated: utils_writables.typeBoolean,

package/services/transitions/baseTransitions.js

@@ -1,9 +1,9 @@
 import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
 import { c as typeBoolean, f as typeFunction, d as typeBooleanOrNull } from "../../writables-DCiBdIBK.js";
-import { c as promiseWithResolve } from "../../promise-CY2U8bTP.js";
-import { n as noop } from "../../func-DR0n-ShK.js";
+import { c as promiseWithResolve } from "../../promise-CBh_HbSK.js";
+import { noop } from "../../utils/func.js";
 import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
-import { h as createStoreDirective, k as mergeDirectives, d as directiveSubscribe } from "../../directive-DrDJkTS5.js";
+import { h as createStoreDirective, k as mergeDirectives, d as directiveSubscribe } from "../../dom-BB9jLllr.js";
 const neverEndingPromise = new Promise(noop);
 const noAnimation = (element, direction) => {
   element.style.display = direction === "show" ? "" : "none";

package/services/transitions/collapse.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_directive = require("../../directive-BtOvPrmt.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
 const services_transitions_cssTransitions = require("./cssTransitions.cjs");
 const createCollapseTransition = ({
   dimension = "height",

package/services/transitions/collapse.js

@@ -1,4 +1,4 @@
-import { i as isBrowserHTMLElement, v as removeClasses, w as addClasses, x as reflow } from "../../directive-DrDJkTS5.js";
+import { i as isBrowserHTMLElement, v as removeClasses, w as addClasses, x as reflow } from "../../dom-BB9jLllr.js";
 import { createCSSTransition } from "./cssTransitions.js";
 const createCollapseTransition = ({
   dimension = "height",

package/services/transitions/cssTransitions.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_directive = require("../../directive-BtOvPrmt.cjs");
-const func = require("../../func-Qd3cD9a3.cjs");
-const promise = require("../../promise-BMJ8qhA8.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
+const utils_func = require("../../utils/func.cjs");
+const promise = require("../../promise-CxCD3NYv.cjs");
 function hasTransition(element) {
   return window.getComputedStyle(element).transitionProperty !== "none";
 }
@@ -13,7 +13,7 @@ function getTransitionDurationMs(element) {
   return (transitionDelaySec + transitionDurationSec) * 1e3;
 }
 const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
-  const endFn = start(element, direction, animated, context) ?? func.noop;
+  const endFn = start(element, direction, animated, context) ?? utils_func.noop;
   if (utils_directive.isBrowserHTMLElement(element) && animated && hasTransition(element)) {
     const abort = promise.promiseFromEvent(signal, "abort");
     const transitionEnd = promise.promiseFromEvent(element, "transitionend");

package/services/transitions/cssTransitions.js

@@ -1,6 +1,6 @@
-import { i as isBrowserHTMLElement } from "../../directive-DrDJkTS5.js";
-import { n as noop } from "../../func-DR0n-ShK.js";
-import { a as promiseFromEvent, b as promiseFromTimeout } from "../../promise-CY2U8bTP.js";
+import { i as isBrowserHTMLElement } from "../../dom-BB9jLllr.js";
+import { noop } from "../../utils/func.js";
+import { a as promiseFromEvent, b as promiseFromTimeout } from "../../promise-CBh_HbSK.js";
 function hasTransition(element) {
   return window.getComputedStyle(element).transitionProperty !== "none";
 }

package/services/transitions/simpleClassTransition.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const services_transitions_cssTransitions = require("./cssTransitions.cjs");
-const utils_directive = require("../../directive-BtOvPrmt.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
 const createSimpleClassTransition = (config) => {
   const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
   return services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {

package/services/transitions/simpleClassTransition.js

@@ -1,5 +1,5 @@
 import { createCSSTransition } from "./cssTransitions.js";
-import { v as removeClasses, w as addClasses, x as reflow } from "../../directive-DrDJkTS5.js";
+import { v as removeClasses, w as addClasses, x as reflow } from "../../dom-BB9jLllr.js";
 const createSimpleClassTransition = (config) => {
   const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
   return createCSSTransition((element, direction, animated, context) => {

package/{slider-CkYsilwM.cjs → slider-B2JFXDLt.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("./directive-BtOvPrmt.cjs");
-const func = require("./func-Qd3cD9a3.cjs");
+const utils_directive = require("./dom-CuBx1JPZ.cjs");
+const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
 const utils_writables = require("./writables-BPAJvaL_.cjs");
 const services_resizeObserver = require("./services/resizeObserver.cjs");
@@ -27,10 +27,13 @@ const defaultSliderConfig = {
   ariaLabel: () => "Value",
   ariaLabelledBy: () => "",
   ariaValueText: () => "",
-  onValuesChange: func.noop,
+  onValuesChange: utils_func.noop,
   values: [0],
   showValueLabels: true,
   showMinMaxLabels: true,
+  showTicks: false,
+  showTickValues: true,
+  tickInterval: 0,
   rtl: false
 };
 function getSliderDefaultConfig() {
@@ -50,6 +53,9 @@ const configValidator = {
   values: utils_writables.typeArray,
   showValueLabels: utils_writables.typeBoolean,
   showMinMaxLabels: utils_writables.typeBoolean,
+  showTicks: utils_writables.typeBoolean,
+  showTickValues: utils_writables.typeBoolean,
+  tickInterval: utils_writables.typeNumberInRangeFactory(0, Infinity, { strict: true }),
   rtl: utils_writables.typeBoolean,
   className: utils_writables.typeString
 };
@@ -100,6 +106,9 @@ function createSlider(config) {
       onValuesChange$,
       showValueLabels$,
       showMinMaxLabels$,
+      showTicks$,
+      showTickValues$,
+      tickInterval$,
       ...stateProps
     },
     patch
@@ -195,8 +204,9 @@ function createSlider(config) {
   const sortedValuesPercent$ = tansu.computed(() => [...valuesPercent$()].sort((a, b) => a - b));
   const minLabelWidth$ = tansu.computed(() => minLabelDomRect$().width / sliderDomRectSize$() * 100);
   const maxLabelWidth$ = tansu.computed(() => maxLabelDomRect$().width / sliderDomRectSize$() * 100);
+  const adjustedShowValueLabels$ = tansu.computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
   const minValueLabelDisplay$ = tansu.computed(() => {
-    if (!showMinMaxLabels$()) {
+    if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
     } else if (!showValueLabels$()) {
       return true;
@@ -205,7 +215,7 @@ function createSlider(config) {
     return rtl$() ? !valuesPercent$().some((percent2) => 100 - percent2 > 100 - minLabelWidth - 1) : !valuesPercent$().some((percent2) => percent2 < minLabelWidth + 1);
   });
   const maxValueLabelDisplay$ = tansu.computed(() => {
-    if (!showMinMaxLabels$()) {
+    if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
     } else if (!showValueLabels$()) {
       return true;
@@ -265,9 +275,48 @@ function createSlider(config) {
       }).slice(0, sortedValuesPercent.length - 1);
     }
   });
-  const percentCompute = (value) => {
+  const computeTicks$ = tansu.computed(() => {
+    if (!showTicks$()) {
+      return [];
+    }
+    const vertical = vertical$();
     const min = min$();
-    return (value - min) * 100 / (max$() - min);
+    const max = max$();
+    const rtl = rtl$();
+    const showTickValues = showTickValues$();
+    const tickInterval = tickInterval$() || stepSize$();
+    const tickArray = [];
+    const intStepSize = _intStepSize$();
+    const decimalPrecision = _decimalPrecision$();
+    const positionCompute = (position) => {
+      return !!rtl !== !!vertical ? 100 - position : position;
+    };
+    for (let step = min; step < max; step += tickInterval) {
+      const cleanValue = computeCleanValue(step, min, max, intStepSize, decimalPrecision);
+      const stepPercent = percentCompute(cleanValue);
+      tickArray.push({ position: positionCompute(stepPercent), selected: false, value: cleanValue, displayLabel: showTickValues });
+    }
+    tickArray.push({ position: positionCompute(100), selected: false, value: max, displayLabel: showTickValues });
+    return tickArray;
+  });
+  const ticks$ = tansu.computed(() => {
+    const sortedValues = sortedValues$();
+    const isTickSelected = (value) => {
+      const isMultiHandle = sortedValues.length > 1;
+      const currentMax = isMultiHandle ? sortedValues[sortedValues.length - 1] : sortedValues[0];
+      const currentMin = isMultiHandle ? sortedValues[0] : 0;
+      return value <= currentMax && value >= currentMin;
+    };
+    return computeTicks$().map((tick) => {
+      return {
+        ...tick,
+        selected: isTickSelected(tick.value)
+      };
+    });
+  });
+  const percentCompute = (value) => {
+    const min = min$(), max = max$();
+    return (value - min) * 100 / (max - min);
   };
   const getClosestSliderHandle = (clickedPercent) => {
     const values = values$();
@@ -304,7 +353,7 @@ function createSlider(config) {
       class: stateProps.className$
     },
     classNames: {
-      "au-slider": true,
+      "au-slider": utils_stores.true$,
       "au-slider-vertical": vertical$,
       "au-slider-horizontal": horizontal$,
       disabled: disabled$
@@ -318,6 +367,9 @@ function createSlider(config) {
       "au-slider-label-min": horizontal$,
       "au-slider-rtl": rtl$,
       invisible: tansu.computed(() => !minValueLabelDisplay$())
+    },
+    attributes: {
+      "aria-hidden": tansu.readable("true")
     }
   }));
   const maxLabelDirective = utils_directive.createAttributesDirective(() => ({
@@ -328,6 +380,9 @@ function createSlider(config) {
       "au-slider-label-max": horizontal$,
       "au-slider-rtl": rtl$,
       invisible: tansu.computed(() => !maxValueLabelDisplay$())
+    },
+    attributes: {
+      "aria-hidden": tansu.readable("true")
     }
   }));
   const handleEventsDirective = utils_directive.createAttributesDirective((handleContext$) => ({
@@ -400,7 +455,6 @@ function createSlider(config) {
         }
       },
       touchstart: (event) => {
-        event.preventDefault();
         const handleDrag = (e) => {
           e.preventDefault();
           const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
@@ -450,9 +504,11 @@ function createSlider(config) {
       combinedLabelPositionTop$,
       progressDisplayOptions$,
       handleDisplayOptions$,
-      showValueLabels$,
+      showValueLabels$: adjustedShowValueLabels$,
       showMinMaxLabels$,
+      showTicks$,
       rtl$,
+      ticks$,
       ...stateProps
     }),
     patch,
@@ -469,7 +525,7 @@ function createSlider(config) {
           height: tansu.computed(() => percent(progressContext$().option.height))
         },
         classNames: {
-          "au-slider-progress": true
+          "au-slider-progress": utils_stores.true$
         }
       })),
       clickableAreaDirective: utils_directive.createAttributesDirective(() => ({
@@ -480,7 +536,8 @@ function createSlider(config) {
         },
         classNames: {
           "au-slider-clickable-area": horizontal$,
-          "au-slider-clickable-area-vertical": vertical$
+          "au-slider-clickable-area-vertical": vertical$,
+          "au-slider-clickable-area-with-ticks": tansu.computed(() => showTicks$() && tickInterval$() === 0)
         }
       })),
       handleEventsDirective,
@@ -488,7 +545,7 @@ function createSlider(config) {
         handleEventsDirective,
         utils_directive.createAttributesDirective((handleContext$) => ({
           attributes: {
-            role: "slider",
+            role: tansu.readable("slider"),
             "aria-valuemin": min$,
             "aria-valuemax": max$,
             "aria-valuenow": tansu.computed(() => handleContext$().item.value),
@@ -505,7 +562,7 @@ function createSlider(config) {
             top: tansu.computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].top))
           },
           classNames: {
-            "au-slider-handle": true,
+            "au-slider-handle": utils_stores.true$,
             "au-slider-handle-vertical": vertical$,
             "au-slider-handle-horizontal": horizontal$
           }
@@ -523,6 +580,9 @@ function createSlider(config) {
         styles: {
           left: tansu.computed(() => percent(combinedLabelPositionLeft$())),
           top: tansu.computed(() => percent(combinedLabelPositionTop$()))
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
         }
       })),
       handleLabelDisplayDirective: utils_directive.createAttributesDirective((labelDisplayContext$) => ({
@@ -535,6 +595,41 @@ function createSlider(config) {
         styles: {
           left: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
           top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
+        }
+      })),
+      tickDirective: utils_directive.createAttributesDirective((tickContext$) => ({
+        classNames: {
+          "au-slider-tick": utils_stores.true$,
+          "au-slider-tick-horizontal": horizontal$,
+          "au-slider-tick-vertical": vertical$
+        },
+        styles: {
+          left: tansu.computed(() => vertical$() ? null : percent(tickContext$().tick.position)),
+          top: tansu.computed(() => vertical$() ? percent(tickContext$().tick.position) : null)
+        },
+        events: {
+          click: (event) => {
+            adjustCoordinate(vertical$() ? event.clientY : event.clientX);
+          }
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
+        }
+      })),
+      tickLabelDirective: utils_directive.createAttributesDirective((tickContext$) => ({
+        classNames: {
+          "au-slider-tick-label": utils_stores.true$,
+          "au-slider-tick-label-vertical": vertical$
+        },
+        styles: {
+          left: tansu.computed(() => vertical$() ? null : percent(tickContext$().tick.position)),
+          top: tansu.computed(() => vertical$() ? percent(tickContext$().tick.position) : null)
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
         }
       }))
     }