@agnos-ui/core 0.2.0 → 0.3.0

package/services/siblingsInert.js

@@ -1,40 +1,40 @@
-import { computed } from '@amadeus-it-group/tansu';
-import { noop } from '../utils/internal/func';
-import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
+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-DCYlDznf.js";
 const internalSetSiblingsInert = (element) => {
-    const inertValues = new Map();
-    const recursiveHelper = (element) => {
-        const parent = element.parentElement;
-        if (parent && element !== document.body) {
-            Array.from(parent.children).forEach((sibling) => {
-                if (sibling !== element && sibling.nodeName !== 'SCRIPT') {
-                    inertValues.set(sibling, sibling.hasAttribute('inert'));
-                    sibling.toggleAttribute('inert', true);
-                }
-            });
-            recursiveHelper(parent);
+  const inertValues = /* @__PURE__ */ new Map();
+  const recursiveHelper = (element2) => {
+    const parent = element2.parentElement;
+    if (parent && element2 !== document.body) {
+      Array.from(parent.children).forEach((sibling) => {
+        if (sibling !== element2 && sibling.nodeName !== "SCRIPT") {
+          inertValues.set(sibling, sibling.hasAttribute("inert"));
+          sibling.toggleAttribute("inert", true);
         }
-    };
-    recursiveHelper(element);
-    return () => inertValues.forEach((value, element) => {
-        element.toggleAttribute('inert', value);
-    });
+      });
+      recursiveHelper(parent);
+    }
+  };
+  recursiveHelper(element);
+  return () => inertValues.forEach((value, element2) => {
+    element2.toggleAttribute("inert", value);
+  });
 };
 let internalRevert = noop;
 const setSiblingsInert = (element) => {
-    internalRevert();
-    internalRevert = element ? internalSetSiblingsInert(element) : noop;
+  internalRevert();
+  internalRevert = element ? internalSetSiblingsInert(element) : noop;
 };
-const { directive: storeArrayDirective, elements$ } = createStoreArrayDirective();
-const lastElement$ = computed(() => {
+const { directive: storeArrayDirective, elements$ } = createBrowserStoreArrayDirective();
+const lastElement$ = computed(
+  () => {
     const elements = elements$();
     return elements[elements.length - 1];
-}, { equal: Object.is });
+  },
+  { equal: Object.is }
+);
 const inertAction$ = computed(() => setSiblingsInert(lastElement$()));
-/**
- * sliblingsInert directive
- * When used on an element, all siblings of the element and of its ancestors will be inert with the inert attribute.
- * In case it is used on multiple elements, only the last one has an effect (the directive keeps a stack of elements
- * on which it is used, so when the last one disappears, the previous one in the list becomes the one in effect).
- */
-export const sliblingsInert = mergeDirectives(storeArrayDirective, directiveSubscribe(inertAction$));
+const sliblingsInert = mergeDirectives(storeArrayDirective, directiveSubscribe(inertAction$));
+export {
+  sliblingsInert
+};

package/services/transitions/baseTransitions.cjs

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("../../writables-D46sFgGK.cjs");
+const promise = require("../../promise-BMJ8qhA8.cjs");
+const func = require("../../func-Qd3cD9a3.cjs");
+const utils_stores = require("../../utils/stores.cjs");
+const utils_directive = require("../../directive-BTSEYLF3.cjs");
+const neverEndingPromise = new Promise(func.noop);
+const noAnimation = async (element, direction) => {
+  element.style.display = direction === "show" ? "" : "none";
+};
+const defaultValues = {
+  animated: true,
+  animatedOnInit: false,
+  initDone: null,
+  visible: true,
+  transition: noAnimation,
+  onShown: func.noop,
+  onHidden: func.noop,
+  onVisibleChange: func.noop
+};
+const configValidator = {
+  animated: utils_writables.typeBoolean,
+  animatedOnInit: utils_writables.typeBoolean,
+  visible: utils_writables.typeBoolean,
+  transition: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  onHidden: utils_writables.typeFunction,
+  onVisibleChange: utils_writables.typeFunction,
+  initDone: utils_writables.typeBooleanOrNull
+};
+const createTransition = (config) => {
+  const [{ animated$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animatedOnInit$ }, patch] = utils_stores.writablesForProps(defaultValues, config, configValidator);
+  const { element$, directive: storeDirective } = utils_directive.createStoreDirective();
+  const elementPresent$ = tansu.computed(() => !!element$());
+  const visible$ = utils_stores.bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+  const currentTransition$ = tansu.writable(
+    null
+  );
+  const transitioning$ = tansu.computed(() => !!currentTransition$());
+  const stop = () => {
+    let context;
+    currentTransition$.update((currentTransition) => {
+      currentTransition == null ? void 0 : currentTransition.abort.abort();
+      context = currentTransition == null ? void 0 : currentTransition.context;
+      return null;
+    });
+    return context;
+  };
+  const runTransition = (visible, animated, element, transitionFn) => tansu.batch(() => {
+    const abort = new AbortController();
+    const signal = abort.signal;
+    const context = stop() ?? {};
+    const { promise: promise$1, resolve } = promise.promiseWithResolve();
+    const currentTransition = {
+      abort,
+      animated,
+      visible,
+      context,
+      element,
+      transitionFn,
+      promise: promise$1
+    };
+    currentTransition$.set(currentTransition);
+    resolve(
+      (async () => {
+        var _a;
+        try {
+          await transitionFn(element, visible ? "show" : "hide", animated, signal, context);
+        } finally {
+          if (signal.aborted) {
+            await neverEndingPromise;
+          } else {
+            currentTransition$.set(null);
+            (_a = (visible ? onShown$ : onHidden$)()) == null ? void 0 : _a();
+          }
+        }
+      })()
+    );
+    return currentTransition;
+  });
+  const shown$ = tansu.computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
+  const effectiveAnimation$ = tansu.computed(() => initDone$() ? animated$() : animatedOnInit$());
+  const animationFromToggle$ = tansu.writable(null);
+  let previousElement;
+  let previousVisible = requestedVisible$();
+  let pendingTransition = null;
+  const visibleAction$ = tansu.derived(
+    [visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$],
+    ([visible, element, animated, animationFromToggle, transition, currentTransition]) => {
+      const elementChanged = previousElement !== element;
+      previousElement = element;
+      const visibleChanged = previousVisible !== visible;
+      previousVisible = visible;
+      if (element) {
+        if (initDone$() == null) {
+          initDone$.set(true);
+        }
+        const interruptAnimation = animationFromToggle != null && currentTransition && currentTransition.animated != animationFromToggle;
+        if (elementChanged || visibleChanged || interruptAnimation) {
+          if (visibleChanged || animationFromToggle != null) {
+            pendingTransition = null;
+          }
+          const animate = animationFromToggle ?? (pendingTransition == null ? void 0 : pendingTransition.animated) ?? (elementChanged && !visible ? false : animated);
+          currentTransition = runTransition(visible, animate, element, transition);
+          pendingTransition == null ? void 0 : pendingTransition.resolve(currentTransition.promise);
+          pendingTransition = null;
+        }
+      } else {
+        if (elementChanged) {
+          stop();
+          currentTransition = null;
+        }
+        if (visibleChanged || visible && (pendingTransition == null ? void 0 : pendingTransition.animated) !== animationFromToggle) {
+          pendingTransition = visible && animationFromToggle != null ? {
+            // toggle was called to display the element, but the element is not yet in the DOM
+            // let's keep the animation setting from toggle and provide the promise for the end of toggle
+            animated: animationFromToggle,
+            ...promise.promiseWithResolve()
+          } : null;
+        }
+      }
+      return (pendingTransition == null ? void 0 : pendingTransition.promise) ?? (currentTransition == null ? void 0 : currentTransition.promise);
+    }
+  );
+  let lastToggle = {};
+  const toggle = async (visible = !requestedVisible$(), animated = effectiveAnimation$()) => {
+    const currentToggle = {};
+    lastToggle = currentToggle;
+    try {
+      await tansu.batch(() => {
+        try {
+          animationFromToggle$.set(animated);
+          requestedVisible$.set(visible);
+          return visibleAction$();
+        } finally {
+          animationFromToggle$.set(null);
+        }
+      });
+    } finally {
+      if (lastToggle !== currentToggle) {
+        await neverEndingPromise;
+      }
+    }
+  };
+  const directive = utils_directive.mergeDirectives(storeDirective, utils_directive.directiveUpdate(patch), utils_directive.directiveSubscribe(visibleAction$));
+  return {
+    ...utils_stores.stateStores({
+      visible$,
+      element$,
+      elementPresent$,
+      transitioning$,
+      shown$,
+      hidden$
+    }),
+    patch,
+    directives: {
+      directive
+    },
+    actions: {},
+    api: {
+      show: toggle.bind(null, true),
+      hide: toggle.bind(null, false),
+      toggle
+    }
+  };
+};
+exports.createTransition = createTransition;
+exports.noAnimation = noAnimation;

package/services/transitions/baseTransitions.d.ts

@@ -1,4 +1,4 @@
-import type { Directive, PropsConfig, Widget } from '../../types';
+import type { Directive, PropsConfig, SSRHTMLElement, Widget } from '../../types';
 /**
  * Function that implements a transition.
  */
@@ -6,7 +6,7 @@ export type TransitionFn = (
 /**
  * Element on which the transition should be applied.
  */
-element: HTMLElement, 
+element: SSRHTMLElement, 
 /**
  * Whether the element should be shown or hidden.
  */
@@ -14,7 +14,7 @@ direction: 'show' | 'hide',
 /**
  * Whether the transition should be animated.
  */
-animation: boolean, 
+animated: boolean, 
 /**
  * Signal allowing to stop the transition while running.
  */
@@ -35,17 +35,17 @@ export interface TransitionProps {
     /**
      * Whether the transition should be animated.
      */
-    animation: boolean;
+    animated: boolean;
     /**
      * If the element is initially visible, whether the element should be animated when first displayed.
      */
-    animationOnInit: boolean;
+    animatedOnInit: boolean;
     /**
-     * Whether initialization is finished. It determines which setting between {@link TransitionProps.animation}
-     * and {@link TransitionProps.animationOnInit} is used to enable or disable animations.
+     * Whether initialization is finished. It determines which setting between {@link TransitionProps.animated}
+     * and {@link TransitionProps.animatedOnInit} is used to enable or disable animations.
      * @remarks
-     * If it is `true`, initialization is considered finished, and {@link TransitionProps.animationOnInit} is no longer used.
-     * Otherwise, initialization is considered unfinished and {@link TransitionProps.animationOnInit} is used instead of {@link TransitionProps.animation}.
+     * If it is `true`, initialization is considered finished, and {@link TransitionProps.animatedOnInit} is no longer used.
+     * Otherwise, initialization is considered unfinished and {@link TransitionProps.animatedOnInit} is used instead of {@link TransitionProps.animated}.
      * If it is `null`, it will be set to `true` automatically when the directive is called with a DOM element.
      * If it is `false`, it will not be updated automatically.
      */
@@ -98,31 +98,31 @@ export interface TransitionApi {
     /**
      * Runs the transition to show the element. It is equivalent to {@link TransitionApi.toggle | toggle} with true as the first parameter.
      *
-     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animated | animated } property is used.
      *
      * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
      * already running, the promise never completes.
      */
-    show: (animation?: boolean) => Promise<void>;
+    show: (animated?: boolean) => Promise<void>;
     /**
      * Runs the transition to hide the element. It is equivalent to {@link TransitionApi.toggle | toggle} with false as the first parameter.
      *
-     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animated | animated } property is used.
      *
      * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
      * already running, the promise never completes.
      */
-    hide: (animation?: boolean) => Promise<void>;
+    hide: (animated?: boolean) => Promise<void>;
     /**
      * Runs the transition to show or hide the element depending on the first parameter.
      *
      * @param visible - whether the element should be made visible or not. If the parameter is not defined, the opposite of the current {@link TransitionProps.visible | visible } property is used.
-     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animated | animated } property is used.
      *
      * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
      * already running, the promise never completes.
      */
-    toggle: (visible?: boolean, animation?: boolean) => Promise<void>;
+    toggle: (visible?: boolean, animated?: boolean) => Promise<void>;
 }
 export interface TransitionDirectives {
     /**
@@ -132,7 +132,7 @@ export interface TransitionDirectives {
 }
 export type TransitionWidget = Widget<TransitionProps, TransitionState, TransitionApi, object, TransitionDirectives>;
 /**
- * A transition to show / hide an element without any animation. It uses the HTML `display` attribute.
+ * A transition to show / hide an element without any animated. It uses the HTML `display` attribute.
  *
  * @param element - the element to animate
  * @param direction - the direction