@design-factory/angular 21.0.3 → 21.1.0-next.0

package/node_modules/@agnos-ui/core/services/transitions/baseTransitions.js

@@ -0,0 +1,186 @@
+import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
+import { d as typeBooleanOrNull, e as typeFunction, b as typeBoolean } from "../../writables-DYGjj5T3.js";
+import { d as promiseWithResolve } from "../../promise-D-RZVPuv.js";
+import { noop } from "../../utils/func.js";
+import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
+import { m as createStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../../directive-Bsreu2z1.js";
+const neverEndingPromise = new Promise(noop);
+const noAnimation = (element, direction) => {
+  element.style.display = direction === "show" ? "" : "none";
+};
+const defaultValues = {
+  animated: true,
+  animatedOnInit: false,
+  initDone: null,
+  visible: true,
+  transition: noAnimation,
+  onShown: noop,
+  onHidden: noop,
+  onVisibleChange: noop
+};
+const configValidator = {
+  animated: typeBoolean,
+  animatedOnInit: typeBoolean,
+  visible: typeBoolean,
+  transition: typeFunction,
+  onShown: typeFunction,
+  onHidden: typeFunction,
+  onVisibleChange: typeFunction,
+  initDone: typeBooleanOrNull
+};
+const createTransition = (config) => {
+  const [
+    {
+      animated$,
+      initDone$,
+      visible$: requestedVisible$,
+      transition$,
+      onShown$,
+      onHidden$,
+      onVisibleChange$,
+      animatedOnInit$
+    },
+    patch
+  ] = writablesForProps(defaultValues, config, configValidator);
+  const { element$, directive: storeDirective } = createStoreDirective();
+  const elementPresent$ = computed(() => !!element$());
+  const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+  const currentTransition$ = writable(
+    null
+  );
+  const stop = () => {
+    let context;
+    currentTransition$.update((currentTransition) => {
+      currentTransition?.abort.abort();
+      context = currentTransition?.context;
+      return null;
+    });
+    return context;
+  };
+  const runTransition = (visible, animated, element, transitionFn) => batch(() => {
+    const abort = new AbortController();
+    const signal = abort.signal;
+    const context = stop() ?? {};
+    const { promise, resolve } = promiseWithResolve();
+    const currentTransition = {
+      abort,
+      animated,
+      visible,
+      context,
+      element,
+      transitionFn,
+      promise
+    };
+    currentTransition$.set(currentTransition);
+    resolve(
+      (async () => {
+        try {
+          await transitionFn(element, visible ? "show" : "hide", animated, signal, context);
+        } finally {
+          if (signal.aborted) {
+            await neverEndingPromise;
+          } else {
+            currentTransition$.set(null);
+            (visible ? onShown$ : onHidden$)()?.();
+          }
+        }
+      })()
+    );
+    return currentTransition;
+  });
+  const effectiveAnimation$ = computed(() => initDone$() ? animated$() : animatedOnInit$());
+  const animationFromToggle$ = writable(null);
+  let previousElement;
+  let previousVisible = requestedVisible$();
+  let pendingTransition = null;
+  const visibleAction$ = 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?.animated ?? (elementChanged && !visible ? false : animated);
+          currentTransition = runTransition(visible, animate, element, transition);
+          pendingTransition?.resolve(currentTransition.promise);
+          pendingTransition = null;
+        }
+      } else {
+        if (elementChanged) {
+          stop();
+          currentTransition = null;
+        }
+        if (visibleChanged || visible && 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,
+            ...promiseWithResolve()
+          } : null;
+        }
+      }
+      return pendingTransition?.promise ?? currentTransition?.promise;
+    }
+  );
+  let lastToggle = {};
+  const toggle = async (visible = !requestedVisible$(), animated = effectiveAnimation$()) => {
+    const currentToggle = {};
+    lastToggle = currentToggle;
+    try {
+      await batch(() => {
+        try {
+          animationFromToggle$.set(animated);
+          requestedVisible$.set(visible);
+          return visibleAction$();
+        } finally {
+          animationFromToggle$.set(null);
+        }
+      });
+    } finally {
+      if (lastToggle !== currentToggle) {
+        await neverEndingPromise;
+      }
+    }
+  };
+  const transitioning$ = computed(() => {
+    if (elementPresent$()) {
+      void visibleAction$();
+    }
+    return !!currentTransition$();
+  });
+  const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
+  const directive = mergeDirectives(storeDirective, directiveSubscribe(visibleAction$));
+  return {
+    ...stateStores({
+      visible$,
+      element$,
+      elementPresent$,
+      transitioning$,
+      shown$,
+      hidden$
+    }),
+    patch,
+    directives: {
+      directive
+    },
+    api: {
+      show: toggle.bind(null, true),
+      hide: toggle.bind(null, false),
+      toggle
+    }
+  };
+};
+export {
+  createTransition,
+  noAnimation
+};

package/node_modules/@agnos-ui/core/services/transitions/collapse.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_directive = require("../../directive-DCaXmRe_.cjs");
+const services_transitions_cssTransitions = require("./cssTransitions.cjs");
+const createCollapseTransition = ({
+  dimension = "height",
+  showClasses,
+  hideClasses,
+  animationPendingClasses
+} = {}) => services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {
+  if (animated && utils_directive.isBrowserHTMLElement(element)) {
+    let { maxSize, minSize } = context;
+    utils_directive.removeClasses(element, animationPendingClasses);
+    utils_directive.removeClasses(element, hideClasses);
+    utils_directive.addClasses(element, showClasses);
+    maxSize = element.getBoundingClientRect()[dimension] + "px";
+    context.maxSize = maxSize;
+    utils_directive.removeClasses(element, animationPendingClasses);
+    utils_directive.removeClasses(element, showClasses);
+    utils_directive.addClasses(element, hideClasses);
+    minSize = element.getBoundingClientRect()[dimension] + "px";
+    context.minSize = minSize;
+    utils_directive.removeClasses(element, showClasses);
+    utils_directive.removeClasses(element, hideClasses);
+    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
+    element.style[dimension] = values[0];
+    utils_directive.reflow(element);
+    utils_directive.addClasses(element, animationPendingClasses);
+    utils_directive.reflow(element);
+    element.style[dimension] = values[1];
+  } else {
+    utils_directive.removeClasses(element, direction === "show" ? hideClasses : showClasses);
+  }
+  return () => {
+    utils_directive.removeClasses(element, animationPendingClasses);
+    utils_directive.addClasses(element, direction === "show" ? showClasses : hideClasses);
+    element.style[dimension] = "";
+  };
+});
+exports.createCollapseTransition = createCollapseTransition;

package/node_modules/@agnos-ui/core/services/transitions/collapse.d.ts

@@ -0,0 +1,49 @@
+import type { TransitionFn } from './baseTransitions';
+/**
+ * Represents the context for a collapsible element.
+ */
+export interface CollapseContext {
+    /**
+     * the maximum size of the collapseable content.
+     */
+    maxSize?: string;
+    /**
+     * the minimum size of the collapseable content
+     */
+    minSize?: string;
+}
+/**
+ * Configuration options for the collapse transition.
+ */
+export interface CollapseConfig {
+    /**
+     * the direction in which the collapsing is performed
+     */
+    dimension?: 'width' | 'height';
+    /**
+     * the list of classes to add to the collapsable element when shown
+     */
+    showClasses?: string[];
+    /**
+     * the list of classes to add to the collapsable element when collapsed
+     */
+    hideClasses?: string[];
+    /**
+     * the list of classes to add to the collapsable element while transitioning
+     */
+    animationPendingClasses?: string[];
+}
+/**
+ * Create a collapse transition.
+ *
+ * The transition attaches / removes classes during the different states of the collapse transition.
+ * It also updates the dimension value when reaching a non-pending state.
+ *
+ * @param config - the collapse config
+ * @param config.dimension - the dimension, `height` or `width`, on which the collapse applies
+ * @param config.showClasses - the classes to attach when the element is fully visible
+ * @param config.hideClasses - the classes to attach when the element is fully collapsed
+ * @param config.animationPendingClasses - the classes to attach when the transition is pending
+ * @returns the collapse transition
+ */
+export declare const createCollapseTransition: ({ dimension, showClasses, hideClasses, animationPendingClasses }?: CollapseConfig) => TransitionFn;

package/node_modules/@agnos-ui/core/services/transitions/collapse.js

@@ -0,0 +1,40 @@
+import { q as isBrowserHTMLElement, x as removeClasses, y as addClasses, z as reflow } from "../../directive-Bsreu2z1.js";
+import { createCSSTransition } from "./cssTransitions.js";
+const createCollapseTransition = ({
+  dimension = "height",
+  showClasses,
+  hideClasses,
+  animationPendingClasses
+} = {}) => createCSSTransition((element, direction, animated, context) => {
+  if (animated && isBrowserHTMLElement(element)) {
+    let { maxSize, minSize } = context;
+    removeClasses(element, animationPendingClasses);
+    removeClasses(element, hideClasses);
+    addClasses(element, showClasses);
+    maxSize = element.getBoundingClientRect()[dimension] + "px";
+    context.maxSize = maxSize;
+    removeClasses(element, animationPendingClasses);
+    removeClasses(element, showClasses);
+    addClasses(element, hideClasses);
+    minSize = element.getBoundingClientRect()[dimension] + "px";
+    context.minSize = minSize;
+    removeClasses(element, showClasses);
+    removeClasses(element, hideClasses);
+    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
+    element.style[dimension] = values[0];
+    reflow(element);
+    addClasses(element, animationPendingClasses);
+    reflow(element);
+    element.style[dimension] = values[1];
+  } else {
+    removeClasses(element, direction === "show" ? hideClasses : showClasses);
+  }
+  return () => {
+    removeClasses(element, animationPendingClasses);
+    addClasses(element, direction === "show" ? showClasses : hideClasses);
+    element.style[dimension] = "";
+  };
+});
+export {
+  createCollapseTransition
+};

package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_directive = require("../../directive-DCaXmRe_.cjs");
+const utils_func = require("../../utils/func.cjs");
+const promise = require("../../promise-CxCD3NYv.cjs");
+function hasTransition(element) {
+  return window.getComputedStyle(element).transitionProperty !== "none";
+}
+function getTransitionDurationMs(element) {
+  const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+  const transitionDelaySec = parseFloat(transitionDelay);
+  const transitionDurationSec = parseFloat(transitionDuration);
+  return (transitionDelaySec + transitionDurationSec) * 1e3;
+}
+const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
+  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");
+    const timer = promise.promiseFromTimeout(getTransitionDurationMs(element));
+    await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
+    abort.unsubscribe();
+    transitionEnd.unsubscribe();
+    timer.unsubscribe();
+  }
+  if (!signal.aborted) {
+    endFn();
+  }
+};
+exports.createCSSTransition = createCSSTransition;
+exports.getTransitionDurationMs = getTransitionDurationMs;
+exports.hasTransition = hasTransition;

package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.d.ts

@@ -0,0 +1,25 @@
+import type { SSRHTMLElement } from '../../types';
+import type { TransitionFn } from './baseTransitions';
+/**
+ * Check if the provided html element has a transition
+ * @param element - the html element
+ * @returns true if the element has a transition
+ */
+export declare function hasTransition(element: HTMLElement): boolean;
+/**
+ * Retrieve the transition duration of the provided html element in milli seconds
+ * @param element - the html element
+ * @returns transition duration in milli seconds
+ */
+export declare function getTransitionDurationMs(element: HTMLElement): number;
+/**
+ * Defines a function type for CSS transitions.
+ */
+export type CSSTransitionFn = (element: SSRHTMLElement, direction: 'show' | 'hide', animated: boolean, context: object) => void | (() => void);
+/**
+ * Create a simple css transition.
+ *
+ * @param start - a function that creates the css animation and returns a clean-up function
+ * @returns the css transition
+ */
+export declare const createCSSTransition: (start: CSSTransitionFn) => TransitionFn;

package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.js

@@ -0,0 +1,32 @@
+import { q as isBrowserHTMLElement } from "../../directive-Bsreu2z1.js";
+import { noop } from "../../utils/func.js";
+import { b as promiseFromEvent, c as promiseFromTimeout } from "../../promise-D-RZVPuv.js";
+function hasTransition(element) {
+  return window.getComputedStyle(element).transitionProperty !== "none";
+}
+function getTransitionDurationMs(element) {
+  const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+  const transitionDelaySec = parseFloat(transitionDelay);
+  const transitionDurationSec = parseFloat(transitionDuration);
+  return (transitionDelaySec + transitionDurationSec) * 1e3;
+}
+const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
+  const endFn = start(element, direction, animated, context) ?? noop;
+  if (isBrowserHTMLElement(element) && animated && hasTransition(element)) {
+    const abort = promiseFromEvent(signal, "abort");
+    const transitionEnd = promiseFromEvent(element, "transitionend");
+    const timer = promiseFromTimeout(getTransitionDurationMs(element));
+    await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
+    abort.unsubscribe();
+    transitionEnd.unsubscribe();
+    timer.unsubscribe();
+  }
+  if (!signal.aborted) {
+    endFn();
+  }
+};
+export {
+  createCSSTransition,
+  getTransitionDurationMs,
+  hasTransition
+};

package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const services_transitions_cssTransitions = require("./cssTransitions.cjs");
+const utils_directive = require("../../directive-DCaXmRe_.cjs");
+const createSimpleClassTransition = (config) => {
+  const {
+    animationPendingClasses,
+    animationPendingShowClasses,
+    animationPendingHideClasses,
+    showClasses,
+    hideClasses
+  } = config;
+  return services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {
+    utils_directive.removeClasses(element, showClasses);
+    utils_directive.removeClasses(element, hideClasses);
+    if (animated) {
+      utils_directive.removeClasses(element, direction === "show" ? animationPendingHideClasses : animationPendingShowClasses);
+      if (!context.started) {
+        context.started = true;
+        const classes = direction === "show" ? hideClasses : showClasses;
+        utils_directive.addClasses(element, classes);
+        utils_directive.reflow(element);
+        utils_directive.removeClasses(element, classes);
+      }
+      utils_directive.addClasses(element, animationPendingClasses);
+      utils_directive.reflow(element);
+      utils_directive.addClasses(element, direction === "show" ? animationPendingShowClasses : animationPendingHideClasses);
+    }
+    return () => {
+      utils_directive.removeClasses(element, animationPendingClasses);
+      utils_directive.removeClasses(element, animationPendingShowClasses);
+      utils_directive.removeClasses(element, animationPendingHideClasses);
+      utils_directive.addClasses(element, direction === "show" ? showClasses : hideClasses);
+    };
+  });
+};
+exports.createSimpleClassTransition = createSimpleClassTransition;

package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.d.ts

@@ -0,0 +1,47 @@
+import type { TransitionFn } from './baseTransitions';
+/**
+ * Configuration interface for simple class-based transitions.
+ */
+export interface SimpleClassTransitionConfig {
+    /**
+     * a list of classes to add to the collapsable element while transitioning
+     */
+    animationPendingClasses?: string[];
+    /**
+     * a list of classes to add to the collapsable element while transitioning towards the show state
+     */
+    animationPendingShowClasses?: string[];
+    /**
+     * a list of classes to add to the collapsable element while transitioning towards the hide state
+     */
+    animationPendingHideClasses?: string[];
+    /**
+     * the list of classes to add to the element when shown
+     */
+    showClasses?: string[];
+    /**
+     * the list of classes to add to the element when hidden
+     */
+    hideClasses?: string[];
+}
+/**
+ * Represents the context for a simple class transition.
+ */
+export interface SimpleClassTransitionContext {
+    /**
+     * `true` is the transition has started
+     */
+    started?: boolean;
+}
+/**
+ * Create a transition based on css classes to attach.
+ *
+ * The config includes the classes that will be attached / removed depending on the transition state.
+ * `animationPendingClasses` are the classes attached when the transition is in a pending state
+ * `animationPendingShowClasses` and `animationPendingHideClasses` are attached when transitioning towards one direction
+ * `showClasses` and `hideClasses` are attached when the transition has reached the show or hide state respectively
+ *
+ * @param config - the transition config
+ * @returns the simple class transition
+ */
+export declare const createSimpleClassTransition: (config: SimpleClassTransitionConfig) => TransitionFn;

package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.js

@@ -0,0 +1,37 @@
+import { createCSSTransition } from "./cssTransitions.js";
+import { x as removeClasses, y as addClasses, z as reflow } from "../../directive-Bsreu2z1.js";
+const createSimpleClassTransition = (config) => {
+  const {
+    animationPendingClasses,
+    animationPendingShowClasses,
+    animationPendingHideClasses,
+    showClasses,
+    hideClasses
+  } = config;
+  return createCSSTransition((element, direction, animated, context) => {
+    removeClasses(element, showClasses);
+    removeClasses(element, hideClasses);
+    if (animated) {
+      removeClasses(element, direction === "show" ? animationPendingHideClasses : animationPendingShowClasses);
+      if (!context.started) {
+        context.started = true;
+        const classes = direction === "show" ? hideClasses : showClasses;
+        addClasses(element, classes);
+        reflow(element);
+        removeClasses(element, classes);
+      }
+      addClasses(element, animationPendingClasses);
+      reflow(element);
+      addClasses(element, direction === "show" ? animationPendingShowClasses : animationPendingHideClasses);
+    }
+    return () => {
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, animationPendingShowClasses);
+      removeClasses(element, animationPendingHideClasses);
+      addClasses(element, direction === "show" ? showClasses : hideClasses);
+    };
+  });
+};
+export {
+  createSimpleClassTransition
+};