@agnos-ui/core 0.9.2 → 0.9.4

package/collapse-DRp53EuG.cjs

@@ -0,0 +1,81 @@
+"use strict";
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const utils_directive = require("./dom-CuBx1JPZ.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
+const tansu = require("@amadeus-it-group/tansu");
+const utils_func = require("./utils/func.cjs");
+const utils_widget = require("./utils/widget.cjs");
+const defaultCollapseConfig = {
+  visible: false,
+  onVisibleChange: utils_func.noop,
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  animated: true,
+  animatedOnInit: false,
+  id: "",
+  transition: utils_func.noop
+};
+function getCollapseDefaultConfig() {
+  return { ...defaultCollapseConfig };
+}
+const commonCollapseConfigValidator = {
+  onVisibleChange: utils_writables.typeFunction,
+  onHidden: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  animatedOnInit: utils_writables.typeBoolean,
+  animated: utils_writables.typeBoolean,
+  visible: utils_writables.typeBoolean,
+  id: utils_writables.typeString,
+  transition: utils_writables.typeFunction
+};
+const createCollapse = utils_widget.createWidgetFactory("collapse", (config) => {
+  const [
+    { transition$, animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, id$: _dirtyId$, ...stateProps },
+    patch
+  ] = utils_stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
+  const id$ = utils_stores.idWithDefault(_dirtyId$);
+  const transition = services_transitions_baseTransitions.createTransition({
+    props: {
+      transition: transition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animatedOnInit$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...utils_stores.stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide,
+      toggle: transition.api.toggle
+    },
+    directives: {
+      collapseDirective: utils_directive.mergeDirectives(
+        transition.directives.directive,
+        utils_directive.createAttributesDirective(() => ({
+          attributes: {
+            id: id$
+          }
+        }))
+      ),
+      triggerDirective: utils_directive.createAttributesDirective(() => ({
+        attributes: {
+          "aria-expanded": tansu.computed(() => `${visible$()}`),
+          "aria-controls": id$
+        },
+        events: {
+          click: () => transition.api.toggle()
+        }
+      }))
+    }
+  };
+});
+exports.createCollapse = createCollapse;
+exports.getCollapseDefaultConfig = getCollapseDefaultConfig;

package/collapse-DwXz2kNw.js

@@ -0,0 +1,82 @@
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { writablesForProps, idWithDefault, stateStores } from "./utils/stores.js";
+import { n as createAttributesDirective, k as mergeDirectives } from "./dom-gfxqXJpK.js";
+import { g as typeFunction, e as typeString, c as typeBoolean } from "./writables-CgpOQ4hA.js";
+import { computed } from "@amadeus-it-group/tansu";
+import { noop } from "./utils/func.js";
+import { createWidgetFactory } from "./utils/widget.js";
+const defaultCollapseConfig = {
+  visible: false,
+  onVisibleChange: noop,
+  onShown: noop,
+  onHidden: noop,
+  animated: true,
+  animatedOnInit: false,
+  id: "",
+  transition: noop
+};
+function getCollapseDefaultConfig() {
+  return { ...defaultCollapseConfig };
+}
+const commonCollapseConfigValidator = {
+  onVisibleChange: typeFunction,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  animatedOnInit: typeBoolean,
+  animated: typeBoolean,
+  visible: typeBoolean,
+  id: typeString,
+  transition: typeFunction
+};
+const createCollapse = createWidgetFactory("collapse", (config) => {
+  const [
+    { transition$, animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, id$: _dirtyId$, ...stateProps },
+    patch
+  ] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
+  const id$ = idWithDefault(_dirtyId$);
+  const transition = createTransition({
+    props: {
+      transition: transition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animatedOnInit$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide,
+      toggle: transition.api.toggle
+    },
+    directives: {
+      collapseDirective: mergeDirectives(
+        transition.directives.directive,
+        createAttributesDirective(() => ({
+          attributes: {
+            id: id$
+          }
+        }))
+      ),
+      triggerDirective: createAttributesDirective(() => ({
+        attributes: {
+          "aria-expanded": computed(() => `${visible$()}`),
+          "aria-controls": id$
+        },
+        events: {
+          click: () => transition.api.toggle()
+        }
+      }))
+    }
+  };
+});
+export {
+  createCollapse as c,
+  getCollapseDefaultConfig as g
+};

package/components/collapse/collapse.d.ts

@@ -0,0 +1,132 @@
+import { type TransitionFn } from '../../services/transitions/baseTransitions';
+import type { Directive, Widget, WidgetFactory } from '../../types';
+/**
+ * Interface representing the common properties and state for a collapse component.
+ */
+interface CollapseCommonPropsAndState {
+    /**
+     * If `true` the collapse is visible to the user
+     *
+     * @defaultValue `true`
+     */
+    visible: boolean;
+}
+/**
+ * Represents the state of a Collapse component.
+ */
+export interface CollapseState extends CollapseCommonPropsAndState {
+    /**
+     * Is `true` when the collapse is hidden. Compared to `visible`, this is updated after the transition is executed.
+     */
+    hidden: boolean;
+}
+/**
+ * Properties for the Collapse component.
+ */
+export interface CollapseProps extends CollapseCommonPropsAndState {
+    /**
+     * Callback called when the collapse visibility changed.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     * @param visible - The new visibility state of the collapse.
+     */
+    onVisibleChange: (visible: boolean) => void;
+    /**
+     * Callback called when the collapse is hidden.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onHidden: () => void;
+    /**
+     * Callback called when the collapse is shown.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onShown: () => void;
+    /**
+     * If `true`, collapse opening will be animated at init time.
+     *
+     * @defaultValue `false`
+     */
+    animatedOnInit: boolean;
+    /**
+     * If `true`, collapse closing and opening will be animated.
+     *
+     * @defaultValue `true`
+     */
+    animated: boolean;
+    /**
+     * id of the collapse
+     *
+     * @defaultValue `''`
+     */
+    id: string;
+    /**
+     * The transition function will be executed when the collapse is displayed or hidden.
+     *
+     * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
+     *
+     * @defaultValue `() => {}`
+     */
+    transition: TransitionFn;
+}
+/**
+ * Interface representing the API for a collapsible component.
+ */
+export interface CollapseApi {
+    /**
+     * Triggers collapse closing programmatically.
+     */
+    close(): void;
+    /**
+     * Triggers the collapse content to be displayed for the user.
+     */
+    open(): void;
+    /**
+     * Toggles the collapse content visibility.
+     */
+    toggle(): void;
+}
+/**
+ * Interface representing the directives used in a collapse component.
+ */
+export interface CollapseDirectives {
+    /**
+     * Directive to apply the collapse.
+     */
+    collapseDirective: Directive;
+    /**
+     * Directive to apply to a trigger;
+     */
+    triggerDirective: Directive;
+}
+/**
+ * Represents a widget for handling collapse functionality.
+ *
+ * This type defines the structure of a CollapseWidget, which includes properties, state, API, and directives
+ * necessary for managing the collapse behavior in the UI.
+ *
+ * @type {Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>}
+ */
+export type CollapseWidget = Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>;
+/**
+ * Retrieve a shallow copy of the default collapse config
+ * @returns the default collapse config
+ */
+export declare function getCollapseDefaultConfig(): CollapseProps;
+/**
+ * Create an CollapseWidget factory
+ * @param transitionFn - the transition function that will be used for the collapse
+ * @returns an CollapseWidget
+ */
+export declare const createCollapse: WidgetFactory<CollapseWidget>;
+export {};

package/components/collapse/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const collapse = require("../../collapse-DRp53EuG.cjs");
+exports.createCollapse = collapse.createCollapse;
+exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;

package/components/collapse/index.d.ts

@@ -0,0 +1 @@
+export * from './collapse';

package/components/collapse/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../collapse-DwXz2kNw.js";
+export {
+  c as createCollapse,
+  g as getCollapseDefaultConfig
+};

package/components/slider/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-DSx5CAce.cjs");
+const slider = require("../../slider-BdwTKTRg.cjs");
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-BmxQ3A_u.js";
+import { c, g } from "../../slider-BZ2kIKCL.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/config.d.ts

@@ -10,6 +10,7 @@ import type { SliderProps } from './components/slider/slider';
 import type { ToastProps } from './components/toast/toast';
 import type { TreeProps } from './components/tree/tree';
 import type { CarouselProps } from './components/carousel';
+import type { CollapseProps } from './components/collapse';
 /**
  * A utility type that makes all properties of an object type `T` optional,
  * and also makes all properties of the nested objects within `T` optional.
@@ -109,4 +110,8 @@ export type WidgetsConfig = {
      * carousel widget config
      */
     carousel: CarouselProps;
+    /**
+     * collapse widget config
+     */
+    collapse: CollapseProps;
 };

package/index.cjs

@@ -3,12 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const types = require("./types.cjs");
 const accordion = require("./accordion-cR5JqWJ8.cjs");
 const alert = require("./alert-DtDozJal.cjs");
+const collapse = require("./collapse-DRp53EuG.cjs");
 const modal = require("./modal-BEnQ6c5M.cjs");
 const pagination = require("./pagination-C1TT-oea.cjs");
 const progressbar = require("./progressbar-CRvhNB5R.cjs");
 const rating = require("./rating-DAb6nR67.cjs");
 const select = require("./select-C0rJJQfl.cjs");
-const slider = require("./slider-DSx5CAce.cjs");
+const slider = require("./slider-BdwTKTRg.cjs");
 const toaster = require("./toaster-Cayg6Lbq.cjs");
 const tree = require("./tree-Pvr2rZ-D.cjs");
 const config = require("./config.cjs");
@@ -36,6 +37,8 @@ exports.factoryCreateAccordion = accordion.factoryCreateAccordion;
 exports.getAccordionDefaultConfig = accordion.getAccordionDefaultConfig;
 exports.createAlert = alert.createAlert;
 exports.getAlertDefaultConfig = alert.getAlertDefaultConfig;
+exports.createCollapse = collapse.createCollapse;
+exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
 exports.createModal = modal.createModal;
 exports.getModalDefaultConfig = modal.getModalDefaultConfig;
 exports.modalCloseButtonClick = modal.modalCloseButtonClick;
@@ -69,6 +72,7 @@ exports.getKeyName = services_navManager.getKeyName;
 exports.isInternalInputNavigation = services_navManager.isInternalInputNavigation;
 exports.portal = services_portal.portal;
 exports.createResizeObserver = services_resizeObserver.createResizeObserver;
+exports.createResizeObserverMap = services_resizeObserver.createResizeObserverMap;
 exports.siblingsInert = services_siblingsInert.siblingsInert;
 exports.hash$ = services_hash.hash$;
 exports.createTransition = services_transitions_baseTransitions.createTransition;

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/collapse';
 export * from './components/modal';
 export * from './components/pagination';
 export * from './components/progressbar';

package/index.js

@@ -1,14 +1,15 @@
 import { FACTORY_WIDGET_NAME, INVALID_VALUE } from "./types.js";
 import { a, c, f, g } from "./accordion-CoM4efp-.js";
 import { c as c2, g as g2 } from "./alert-YIlqdEPO.js";
-import { c as c3, g as g3, a as a2, m } from "./modal-D3wGIDlj.js";
-import { c as c4, g as g4 } from "./pagination-B97wBLok.js";
-import { c as c5, g as g5 } from "./progressbar-BWBlRk_Y.js";
-import { c as c6, g as g6 } from "./rating-BXvy9kXq.js";
-import { c as c7, g as g7 } from "./select-BdjpnE7_.js";
-import { c as c8, g as g8 } from "./slider-BmxQ3A_u.js";
-import { T, c as c9, d, g as g9 } from "./toaster-XfzHDqz_.js";
-import { c as c10, g as g10 } from "./tree-BFrXdJox.js";
+import { c as c3, g as g3 } from "./collapse-DwXz2kNw.js";
+import { c as c4, g as g4, a as a2, m } from "./modal-D3wGIDlj.js";
+import { c as c5, g as g5 } from "./pagination-B97wBLok.js";
+import { c as c6, g as g6 } from "./progressbar-BWBlRk_Y.js";
+import { c as c7, g as g7 } from "./rating-BXvy9kXq.js";
+import { c as c8, g as g8 } from "./select-BdjpnE7_.js";
+import { c as c9, g as g9 } from "./slider-BZ2kIKCL.js";
+import { T, c as c10, d, g as g10 } from "./toaster-XfzHDqz_.js";
+import { c as c11, g as g11 } from "./tree-BFrXdJox.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
 import { createFloatingUI } from "./services/floatingUI.js";
@@ -17,15 +18,15 @@ import { createIntersection } from "./services/intersection.js";
 import { createMatchMedia } from "./services/matchMedia.js";
 import { createNavManager, getKeyName, isInternalInputNavigation } from "./services/navManager.js";
 import { portal } from "./services/portal.js";
-import { createResizeObserver } from "./services/resizeObserver.js";
+import { createResizeObserver, createResizeObserverMap } from "./services/resizeObserver.js";
 import { siblingsInert } from "./services/siblingsInert.js";
 import { hash$ } from "./services/hash.js";
 import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
-import { o, a as a3, c as c11, b, p, n, g as g11, j, f as f2, h, q, d as d2, e, i, m as m2, k, l, r, s } from "./dom-gfxqXJpK.js";
+import { o, a as a3, c as c12, b, p, n, g as g12, j, f as f2, h, q, d as d2, e, i, m as m2, k, l, r, s } from "./dom-gfxqXJpK.js";
 import { bindableDerived, bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
-import { j as j2, t, i as i2, c as c12, d as d3, g as g12, h as h2, a as a4, b as b2, e as e2, f as f3 } from "./writables-CgpOQ4hA.js";
+import { j as j2, t, i as i2, c as c13, d as d3, g as g13, h as h2, a as a4, b as b2, e as e2, f as f3 } from "./writables-CgpOQ4hA.js";
 export {
   FACTORY_WIDGET_NAME,
   INVALID_VALUE,
@@ -33,7 +34,7 @@ export {
   activeElement$,
   o as attributesData,
   a3 as bindDirective,
-  c11 as bindDirectiveNoArg,
+  c12 as bindDirectiveNoArg,
   bindableDerived,
   bindableProp,
   b as browserDirective,
@@ -42,28 +43,30 @@ export {
   c as createAccordionItem,
   c2 as createAlert,
   n as createAttributesDirective,
-  g11 as createBrowserStoreArrayDirective,
+  g12 as createBrowserStoreArrayDirective,
   j as createBrowserStoreDirective,
   createCSSTransition,
+  c3 as createCollapse,
   createFloatingUI,
   createHasFocus,
   createIntersection,
   createMatchMedia,
-  c3 as createModal,
+  c4 as createModal,
   createNavManager,
-  c4 as createPagination,
+  c5 as createPagination,
   createPatch,
-  c5 as createProgressbar,
-  c6 as createRating,
+  c6 as createProgressbar,
+  c7 as createRating,
   createResizeObserver,
-  c7 as createSelect,
+  createResizeObserverMap,
+  c8 as createSelect,
   createSimpleClassTransition,
-  c8 as createSlider,
+  c9 as createSlider,
   f2 as createStoreArrayDirective,
   h as createStoreDirective,
-  c9 as createToast,
+  c10 as createToast,
   createTransition,
-  c10 as createTree,
+  c11 as createTree,
   j2 as createTypeEnum,
   createWidgetsConfig,
   d as defaultToasterProps,
@@ -76,16 +79,17 @@ export {
   findChangedProperties,
   g as getAccordionDefaultConfig,
   g2 as getAlertDefaultConfig,
+  g3 as getCollapseDefaultConfig,
   getKeyName,
-  g3 as getModalDefaultConfig,
-  g4 as getPaginationDefaultConfig,
-  g5 as getProgressbarDefaultConfig,
-  g6 as getRatingDefaultConfig,
-  g7 as getSelectDefaultConfig,
-  g8 as getSliderDefaultConfig,
-  g9 as getToastDefaultConfig,
+  g4 as getModalDefaultConfig,
+  g5 as getPaginationDefaultConfig,
+  g6 as getProgressbarDefaultConfig,
+  g7 as getRatingDefaultConfig,
+  g8 as getSelectDefaultConfig,
+  g9 as getSliderDefaultConfig,
+  g10 as getToastDefaultConfig,
   getTransitionDurationMs,
-  g10 as getTreeDefaultConfig,
+  g11 as getTreeDefaultConfig,
   hasTransition,
   hash$,
   idWithDefault,
@@ -111,9 +115,9 @@ export {
   toWritableStore,
   true$,
   i2 as typeArray,
-  c12 as typeBoolean,
+  c13 as typeBoolean,
   d3 as typeBooleanOrNull,
-  g12 as typeFunction,
+  g13 as typeFunction,
   h2 as typeHTMLElementOrNull,
   a4 as typeNumber,
   b2 as typeNumberInRangeFactory,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless component library.",
-	"version": "0.9.2",
+	"version": "0.9.4",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",

package/services/resizeObserver.cjs

@@ -3,30 +3,50 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
 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) {
+const createResizeObserverMap = () => {
+  const { elements$, directive } = utils_directive.createBrowserStoreArrayDirective();
+  const dimensionsMap$ = tansu.derived(
+    elements$,
+    (elements, set) => {
+      const dimensionsMap = /* @__PURE__ */ new Map();
+      if (elements.length === 0) {
+        set(dimensionsMap);
         return utils_func.noop;
       }
       const observer = new ResizeObserver((entries) => {
-        set(entries[0]);
+        entries.forEach((entry) => dimensionsMap.set(entry.target, entry));
+        set(dimensionsMap);
       });
-      observer.observe(element);
-      return () => observer == null ? void 0 : observer.disconnect();
+      elements.forEach((element) => observer.observe(element));
+      return () => observer.disconnect();
     },
-    void 0
+    /* @__PURE__ */ new Map()
   );
-  return {
-    /**
-     * Store which contains the dimensions of the observed element (ResizeObserverEntry type)
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry | MDN documentation}
-     */
-    dimensions$: observedElement$,
-    /** Directive to be attached to html element in order to listen to resize events */
-    directive
-  };
+  return { dimensionsMap$, directive };
+};
+const createResizeObserver = () => {
+  const { dimensionsMap$, directive: arrayDirective } = createResizeObserverMap();
+  let firstElement = null;
+  const directive = utils_directive.browserDirective((element) => {
+    if (firstElement === null) {
+      firstElement = element;
+    } else {
+      console.error("createResizeObserver directive can only be applied to a single element. Use createResizeObserverMap for multiple elements.");
+      return;
+    }
+    const result = arrayDirective(element);
+    if (!result) return;
+    const originalDestroy = result.destroy;
+    return {
+      ...result,
+      destroy: () => {
+        firstElement = null;
+        originalDestroy == null ? void 0 : originalDestroy();
+      }
+    };
+  });
+  const dimensions$ = tansu.derived(dimensionsMap$, (map) => firstElement ? map.get(firstElement) : void 0, void 0);
+  return { dimensions$, directive };
 };
 exports.createResizeObserver = createResizeObserver;
+exports.createResizeObserverMap = createResizeObserverMap;

package/services/resizeObserver.d.ts

@@ -1,8 +1,16 @@
 import type { ReadableSignal } from '@amadeus-it-group/tansu';
 import type { Directive, SSRHTMLElement } from '../types';
 /**
- * Create a resize observer object
- * @returns An object containing the store with the dimentions of observed element (ResizeObserverEntry), the directive to be applied to the html element to be observed
+ * Create a resize observer that can be applied to multiple elements
+ * @returns An object containing the store with the dimensions map of observed elements (ResizeObserverEntry), the directive to be applied to the html element to be observed
+ */
+export declare const createResizeObserverMap: () => {
+    dimensionsMap$: ReadableSignal<Map<HTMLElement, ResizeObserverEntry>>;
+    directive: Directive<void, SSRHTMLElement>;
+};
+/**
+ * Create a resize observer object for a single element
+ * @returns An object containing the store with the dimensions of observed element (ResizeObserverEntry), the directive to be applied to the html element to be observed
  */
 export declare const createResizeObserver: () => {
     dimensions$: ReadableSignal<ResizeObserverEntry | undefined>;

package/services/resizeObserver.js

@@ -1,32 +1,52 @@
 import { derived } from "@amadeus-it-group/tansu";
-import { j as createBrowserStoreDirective } from "../dom-gfxqXJpK.js";
+import { g as createBrowserStoreArrayDirective, b as browserDirective } from "../dom-gfxqXJpK.js";
 import { noop } from "../utils/func.js";
-const createResizeObserver = () => {
-  const { element$, directive } = createBrowserStoreDirective();
-  const observedElement$ = derived(
-    element$,
-    (element, set) => {
-      if (element === null) {
+const createResizeObserverMap = () => {
+  const { elements$, directive } = createBrowserStoreArrayDirective();
+  const dimensionsMap$ = derived(
+    elements$,
+    (elements, set) => {
+      const dimensionsMap = /* @__PURE__ */ new Map();
+      if (elements.length === 0) {
+        set(dimensionsMap);
         return noop;
       }
       const observer = new ResizeObserver((entries) => {
-        set(entries[0]);
+        entries.forEach((entry) => dimensionsMap.set(entry.target, entry));
+        set(dimensionsMap);
       });
-      observer.observe(element);
-      return () => observer == null ? void 0 : observer.disconnect();
+      elements.forEach((element) => observer.observe(element));
+      return () => observer.disconnect();
     },
-    void 0
+    /* @__PURE__ */ new Map()
   );
-  return {
-    /**
-     * Store which contains the dimensions of the observed element (ResizeObserverEntry type)
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry | MDN documentation}
-     */
-    dimensions$: observedElement$,
-    /** Directive to be attached to html element in order to listen to resize events */
-    directive
-  };
+  return { dimensionsMap$, directive };
+};
+const createResizeObserver = () => {
+  const { dimensionsMap$, directive: arrayDirective } = createResizeObserverMap();
+  let firstElement = null;
+  const directive = browserDirective((element) => {
+    if (firstElement === null) {
+      firstElement = element;
+    } else {
+      console.error("createResizeObserver directive can only be applied to a single element. Use createResizeObserverMap for multiple elements.");
+      return;
+    }
+    const result = arrayDirective(element);
+    if (!result) return;
+    const originalDestroy = result.destroy;
+    return {
+      ...result,
+      destroy: () => {
+        firstElement = null;
+        originalDestroy == null ? void 0 : originalDestroy();
+      }
+    };
+  });
+  const dimensions$ = derived(dimensionsMap$, (map) => firstElement ? map.get(firstElement) : void 0, void 0);
+  return { dimensions$, directive };
 };
 export {
-  createResizeObserver
+  createResizeObserver,
+  createResizeObserverMap
 };

package/{slider-BmxQ3A_u.js → slider-BZ2kIKCL.js}

@@ -2,8 +2,8 @@ import { computed, writable, readable } from "@amadeus-it-group/tansu";
 import { j as createBrowserStoreDirective, g as createBrowserStoreArrayDirective, k as mergeDirectives, n as createAttributesDirective, b as browserDirective } from "./dom-gfxqXJpK.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-CgpOQ4hA.js";
-import { createResizeObserver } from "./services/resizeObserver.js";
+import { i as typeArray, k as clamp, c as typeBoolean, b as typeNumberInRangeFactory, e as typeString, g as typeFunction, a as typeNumber } from "./writables-CgpOQ4hA.js";
+import { createResizeObserver, createResizeObserverMap } from "./services/resizeObserver.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
 function getDecimalPrecision(number) {
@@ -239,20 +239,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(
     () => {
       var _a;
@@ -286,8 +277,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) => {
@@ -307,26 +298,20 @@ 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(
-    () => {
-      var _a, _b;
-      return pixelToPercent(vertical$() ? (_a = combinedLabelDom$()) == null ? void 0 : _a.getBoundingClientRect().height : (_b = combinedLabelDom$()) == null ? void 0 : _b.getBoundingClientRect().width);
-    }
-  );
+  const combinedLabelSize$ = computed(() => {
+    var _a;
+    return pixelToPercent((_a = combinedDimensions$()) == null ? void 0 : _a.contentRect[activeDimension$()]);
+  });
   const combinedLabelPosition$ = computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
   const currentLabelSizeByIndex = (index) => {
-    var _a, _b;
-    return pixelToPercent(vertical$() ? (_a = currentLabelDomsRect$()[index]) == null ? void 0 : _a.height : (_b = currentLabelDomsRect$()[index]) == null ? void 0 : _b.width);
+    var _a;
+    return pixelToPercent((_a = handleDimensions$().get(currentLabelDoms$()[index])) == null ? void 0 : _a.contentRect[activeDimension$()]);
   };
   const minValueLabelDisplay$ = computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
@@ -362,23 +347,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 == null ? void 0 : storedLabelSize[0]) ?? 0;
-    const secondLabelSize = (storedLabelSize == null ? void 0 : 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(() => {
@@ -395,6 +391,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) {
@@ -771,7 +768,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$,
@@ -790,6 +787,7 @@ const createSlider = createWidgetFactory("slider", (config) => {
       ),
       handleLabelDisplayDirective: mergeDirectives(
         handleLabelDirective,
+        resizeLabelsDirective,
         createAttributesDirective((labelDisplayContext$) => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -798,8 +796,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")

package/{slider-DSx5CAce.cjs → slider-BdwTKTRg.cjs}

@@ -240,20 +240,11 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
   const { directive: sliderDirective, element$: sliderDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: minLabelDomDirective, element$: minLabelDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = utils_directive.createBrowserStoreDirective();
-  const { directive: combinedLabelDomDirective, element$: combinedLabelDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: handleLabelDirective, elements$: currentLabelDoms$ } = utils_directive.createBrowserStoreArrayDirective();
   const { directive: resizeDirective, dimensions$ } = services_resizeObserver.createResizeObserver();
+  const { directive: resizeLabelsDirective, dimensionsMap$: handleDimensions$ } = services_resizeObserver.createResizeObserverMap();
+  const { directive: resizeCombineLabelDirective, dimensions$: combinedDimensions$ } = services_resizeObserver.createResizeObserver();
   const updateSliderSize$ = tansu.writable({});
-  const currentLabelDomsRect$ = tansu.computed(
-    () => {
-      dimensions$();
-      updateSliderSize$();
-      return currentLabelDoms$().map((element) => element.getBoundingClientRect());
-    },
-    {
-      equal: Object.is
-    }
-  );
   const sliderDomRect$ = tansu.computed(
     () => {
       var _a;
@@ -287,8 +278,8 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       equal: (a, b) => Object.is(a, b)
     }
   );
-  const sliderDomRectOffset$ = tansu.computed(() => vertical$() ? sliderDomRect$().top : sliderDomRect$().left);
-  const sliderDomRectSize$ = tansu.computed(() => vertical$() ? sliderDomRect$().height : sliderDomRect$().width);
+  const sliderDomRectOffset$ = tansu.computed(() => sliderDomRect$()[vertical$() ? "top" : "left"]);
+  const sliderDomRectSize$ = tansu.computed(() => sliderDomRect$()[vertical$() ? "height" : "width"]);
   const sortedValues$ = tansu.computed(() => [...values$()].sort((a, b) => a - b));
   const _sortedHandlesValues$ = tansu.computed(() => {
     return values$().map((val, index) => {
@@ -308,26 +299,20 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
   });
   const valuesPercent$ = tansu.computed(() => values$().map((val) => percentCompute(val)));
   const sortedValuesPercent$ = tansu.computed(() => [...valuesPercent$()].sort((a, b) => a - b));
-  const minLabelSize$ = tansu.computed(() => {
-    const minLabelDomRect = minLabelDomRect$();
-    return pixelToPercent(vertical$() ? minLabelDomRect.height : minLabelDomRect.width);
-  });
-  const maxLabelSize$ = tansu.computed(() => {
-    const maxLabelDomRect = maxLabelDomRect$();
-    return pixelToPercent(vertical$() ? maxLabelDomRect.height : maxLabelDomRect.width);
-  });
+  const activeDimension$ = tansu.computed(() => vertical$() ? "height" : "width");
+  const activePosition$ = tansu.computed(() => vertical$() ? "top" : "left");
+  const minLabelSize$ = tansu.computed(() => pixelToPercent(minLabelDomRect$()[activeDimension$()]));
+  const maxLabelSize$ = tansu.computed(() => pixelToPercent(maxLabelDomRect$()[activeDimension$()]));
   const adjustedShowValueLabels$ = tansu.computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
   const pixelToPercent = (pixels) => pixels ? pixels / sliderDomRectSize$() * 100 : 0;
-  const combinedLabelSize$ = tansu.computed(
-    () => {
-      var _a, _b;
-      return pixelToPercent(vertical$() ? (_a = combinedLabelDom$()) == null ? void 0 : _a.getBoundingClientRect().height : (_b = combinedLabelDom$()) == null ? void 0 : _b.getBoundingClientRect().width);
-    }
-  );
+  const combinedLabelSize$ = tansu.computed(() => {
+    var _a;
+    return pixelToPercent((_a = combinedDimensions$()) == null ? void 0 : _a.contentRect[activeDimension$()]);
+  });
   const combinedLabelPosition$ = tansu.computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
   const currentLabelSizeByIndex = (index) => {
-    var _a, _b;
-    return pixelToPercent(vertical$() ? (_a = currentLabelDomsRect$()[index]) == null ? void 0 : _a.height : (_b = currentLabelDomsRect$()[index]) == null ? void 0 : _b.width);
+    var _a;
+    return pixelToPercent((_a = handleDimensions$().get(currentLabelDoms$()[index])) == null ? void 0 : _a.contentRect[activeDimension$()]);
   };
   const minValueLabelDisplay$ = tansu.computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
@@ -363,23 +348,34 @@ const createSlider = utils_widget.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$ = tansu.writable([]);
   const combinedLabelDisplay$ = tansu.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 == null ? void 0 : storedLabelSize[0]) ?? 0;
-    const secondLabelSize = (storedLabelSize == null ? void 0 : 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$ = tansu.computed(() => !disabled$() && !readonly$());
   const combinedLabelPositionLeft$ = tansu.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$ = tansu.computed(() => {
@@ -396,6 +392,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       };
     });
   });
+  const labelPosition = (initialPosition, labelSize) => utils_writables.clamp(initialPosition, 100 - labelSize / 2, labelSize / 2);
   const progressDisplayOptions$ = tansu.computed(() => {
     const vertical = vertical$(), sortedValuesPercent = sortedValuesPercent$(), rtl = rtl$();
     if (sortedValuesPercent.length === 1) {
@@ -772,7 +769,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       minLabelDirective: utils_directive.mergeDirectives(minLabelDomDirective, minLabelDirective),
       maxLabelDirective: utils_directive.mergeDirectives(maxLabelDomDirective, maxLabelDirective),
       combinedHandleLabelDisplayDirective: utils_directive.mergeDirectives(
-        combinedLabelDomDirective,
+        resizeCombineLabelDirective,
         utils_directive.createAttributesDirective(() => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -791,6 +788,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       ),
       handleLabelDisplayDirective: utils_directive.mergeDirectives(
         handleLabelDirective,
+        resizeLabelsDirective,
         utils_directive.createAttributesDirective((labelDisplayContext$) => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -799,8 +797,13 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
             "au-slider-label-now": horizontal$
           },
           styles: {
-            left: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
-            top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
+            left: tansu.computed(() => {
+              const handleIndex = labelDisplayContext$().index;
+              const leftPosition = handleDisplayOptions$()[handleIndex].left;
+              return leftPosition === null ? "" : percent(labelPosition(leftPosition, currentLabelSizeByIndex(handleIndex)));
+            }),
+            top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top)),
+            opacity: tansu.computed(() => combinedLabelDisplay$() ? "0" : "1")
           },
           attributes: {
             "aria-hidden": tansu.readable("true")