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

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

@@ -0,0 +1,16 @@
+import type { Directive } from '../types';
+/**
+ * Represents the arguments for a portal directive.
+ */
+export type PortalDirectiveArg = {
+    container?: HTMLElement | null | undefined;
+    insertBefore?: HTMLElement | null | undefined;
+} | null | undefined;
+/**
+ * Creates a portal directive, allowing to attach content to any element.
+ *
+ * @param content - the content of the portal
+ * @param newArg - {@link PortalDirectiveArg} args
+ * @returns the portal directive
+ */
+export declare const portal: Directive<PortalDirectiveArg>;

package/node_modules/@agnos-ui/core/services/portal.js

@@ -0,0 +1,42 @@
+import { d as browserDirective } from "../directive-Bsreu2z1.js";
+const portal = browserDirective(
+  (content, newArg) => {
+    let arg;
+    let replaceComment;
+    const removeReplaceComment = () => {
+      if (replaceComment) {
+        replaceComment.parentNode?.replaceChild(content, replaceComment);
+        replaceComment = null;
+      }
+    };
+    const update = (newArg2) => {
+      if (newArg2 !== arg && (newArg2?.container !== arg?.container || newArg2?.insertBefore !== arg?.insertBefore)) {
+        arg = newArg2;
+        const container = arg?.container ?? arg?.insertBefore?.parentElement;
+        if (container) {
+          const insertBefore = arg?.insertBefore ?? null;
+          const moveNeeded = content.parentElement !== container || content.nextSibling !== insertBefore;
+          if (moveNeeded) {
+            if (!replaceComment) {
+              replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment("portal"), content);
+            }
+            container.insertBefore(content, insertBefore);
+          }
+        } else {
+          removeReplaceComment();
+        }
+      }
+    };
+    update(newArg);
+    return {
+      update,
+      destroy: () => {
+        removeReplaceComment();
+        content.parentNode?.removeChild(content);
+      }
+    };
+  }
+);
+export {
+  portal
+};

package/node_modules/@agnos-ui/core/services/resizeObserver.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_directive = require("../directive-DCaXmRe_.cjs");
+const utils_func = require("../utils/func.cjs");
+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) => {
+        entries.forEach((entry) => dimensionsMap.set(entry.target, entry));
+        set(dimensionsMap);
+      });
+      elements.forEach((element) => observer.observe(element));
+      return () => observer.disconnect();
+    },
+    /* @__PURE__ */ new Map()
+  );
+  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?.();
+      }
+    };
+  });
+  const dimensions$ = tansu.derived(dimensionsMap$, (map) => firstElement ? map.get(firstElement) : void 0, void 0);
+  return { dimensions$, directive };
+};
+exports.createResizeObserver = createResizeObserver;
+exports.createResizeObserverMap = createResizeObserverMap;

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

@@ -0,0 +1,18 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Directive, SSRHTMLElement } from '../types';
+/**
+ * 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>;
+    directive: Directive<void, SSRHTMLElement>;
+};

package/node_modules/@agnos-ui/core/services/resizeObserver.js

@@ -0,0 +1,54 @@
+import { derived } from "@amadeus-it-group/tansu";
+import { h as createBrowserStoreArrayDirective, d as browserDirective } from "../directive-Bsreu2z1.js";
+import { noop } from "../utils/func.js";
+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) => {
+        entries.forEach((entry) => dimensionsMap.set(entry.target, entry));
+        set(dimensionsMap);
+      });
+      elements.forEach((element) => observer.observe(element));
+      return () => observer.disconnect();
+    },
+    /* @__PURE__ */ new Map()
+  );
+  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?.();
+      }
+    };
+  });
+  const dimensions$ = derived(dimensionsMap$, (map) => firstElement ? map.get(firstElement) : void 0, void 0);
+  return { dimensions$, directive };
+};
+export {
+  createResizeObserver,
+  createResizeObserverMap
+};

package/node_modules/@agnos-ui/core/services/siblingsInert.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_directive = require("../directive-DCaXmRe_.cjs");
+const utils_func = require("../utils/func.cjs");
+const ignoreInertAttributeName = "data-agnos-ignore-inert";
+const applyInertToSiblingsRecursively = (element) => {
+  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" && !sibling.hasAttribute(ignoreInertAttributeName)) {
+          inertValues.set(sibling, sibling.hasAttribute("inert"));
+          sibling.toggleAttribute("inert", true);
+        }
+      });
+      recursiveHelper(parent);
+    }
+  };
+  recursiveHelper(element);
+  return () => inertValues.forEach((value, element2) => {
+    element2.toggleAttribute("inert", value);
+  });
+};
+let internalRevert = utils_func.noop;
+const setSiblingsInert = (element) => {
+  internalRevert();
+  internalRevert = element ? applyInertToSiblingsRecursively(element) : utils_func.noop;
+};
+const { directive: storeArrayDirective, elements$ } = utils_directive.createConditionalBrowserStoreArrayDirective();
+const lastTrackedElement$ = tansu.computed(
+  () => {
+    const elements = elements$();
+    return elements[elements.length - 1];
+  },
+  { equal: Object.is }
+);
+const updateInertState$ = tansu.computed(() => setSiblingsInert(lastTrackedElement$()));
+const siblingsInert = utils_directive.mergeDirectives(
+  storeArrayDirective,
+  utils_directive.directiveSubscribe(updateInertState$)
+);
+exports.siblingsInert = siblingsInert;

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

@@ -0,0 +1,16 @@
+import type { Directive } from '../types';
+/**
+ * Directive to manage focus trapping by setting the `inert` attribute on sibling elements.
+ * This is useful for modal dialogs or overlays where interaction should be limited to a specific subtree.
+ *
+ * - Recursively traverses up the DOM tree.
+ * - Sets `inert` on all siblings except the target element and `<script>` tags.
+ * - Use `data-agnos-ignore-inert` to avoid inert attribute for a specified element.
+ *
+ * Takes boolean or undefined as value:
+ * - `true` or `undefined`: Apply inert to siblings.
+ * - `false`: Do not apply inert to siblings.
+ *
+ * Automatically reverts when the target element changes or is removed.
+ */
+export declare const siblingsInert: Directive<boolean | undefined>;

package/node_modules/@agnos-ui/core/services/siblingsInert.js

@@ -0,0 +1,44 @@
+import { computed } from "@amadeus-it-group/tansu";
+import { j as createConditionalBrowserStoreArrayDirective, s as mergeDirectives, o as directiveSubscribe } from "../directive-Bsreu2z1.js";
+import { noop } from "../utils/func.js";
+const ignoreInertAttributeName = "data-agnos-ignore-inert";
+const applyInertToSiblingsRecursively = (element) => {
+  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" && !sibling.hasAttribute(ignoreInertAttributeName)) {
+          inertValues.set(sibling, sibling.hasAttribute("inert"));
+          sibling.toggleAttribute("inert", true);
+        }
+      });
+      recursiveHelper(parent);
+    }
+  };
+  recursiveHelper(element);
+  return () => inertValues.forEach((value, element2) => {
+    element2.toggleAttribute("inert", value);
+  });
+};
+let internalRevert = noop;
+const setSiblingsInert = (element) => {
+  internalRevert();
+  internalRevert = element ? applyInertToSiblingsRecursively(element) : noop;
+};
+const { directive: storeArrayDirective, elements$ } = createConditionalBrowserStoreArrayDirective();
+const lastTrackedElement$ = computed(
+  () => {
+    const elements = elements$();
+    return elements[elements.length - 1];
+  },
+  { equal: Object.is }
+);
+const updateInertState$ = computed(() => setSiblingsInert(lastTrackedElement$()));
+const siblingsInert = mergeDirectives(
+  storeArrayDirective,
+  directiveSubscribe(updateInertState$)
+);
+export {
+  siblingsInert
+};

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("../../writables-Dt68gADJ.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-DCaXmRe_.cjs");
+const neverEndingPromise = new Promise(utils_func.noop);
+const noAnimation = (element, direction) => {
+  element.style.display = direction === "show" ? "" : "none";
+};
+const defaultValues = {
+  animated: true,
+  animatedOnInit: false,
+  initDone: null,
+  visible: true,
+  transition: noAnimation,
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  onVisibleChange: utils_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 stop = () => {
+    let context;
+    currentTransition$.update((currentTransition) => {
+      currentTransition?.abort.abort();
+      context = 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 () => {
+        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$ = 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?.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,
+            ...promise.promiseWithResolve()
+          } : null;
+        }
+      }
+      return pendingTransition?.promise ?? 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 transitioning$ = tansu.computed(() => {
+    if (elementPresent$()) {
+      void visibleAction$();
+    }
+    return !!currentTransition$();
+  });
+  const shown$ = tansu.computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
+  const directive = utils_directive.mergeDirectives(storeDirective, utils_directive.directiveSubscribe(visibleAction$));
+  return {
+    ...utils_stores.stateStores({
+      visible$,
+      element$,
+      elementPresent$,
+      transitioning$,
+      shown$,
+      hidden$
+    }),
+    patch,
+    directives: {
+      directive
+    },
+    api: {
+      show: toggle.bind(null, true),
+      hide: toggle.bind(null, false),
+      toggle
+    }
+  };
+};
+exports.createTransition = createTransition;
+exports.noAnimation = noAnimation;

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

@@ -0,0 +1,166 @@
+import type { Directive, PropsConfig, SSRHTMLElement, Widget } from '../../types';
+/**
+ * Function that implements a transition.
+ */
+export type TransitionFn = (
+/**
+ * Element on which the transition should be applied.
+ */
+element: SSRHTMLElement, 
+/**
+ * Whether the element should be shown or hidden.
+ */
+direction: 'show' | 'hide', 
+/**
+ * Whether the transition should be animated.
+ */
+animated: boolean, 
+/**
+ * Signal allowing to stop the transition while running.
+ */
+signal: AbortSignal, 
+/**
+ * Context of the current transition. It is reused between calls if the previous transition was stopped while running on the same element.
+ */
+context: object) => Promise<void> | void;
+/**
+ * Properties for configuring a transition.
+ */
+export interface TransitionProps {
+    /**
+     * Transition to be called.
+     */
+    transition: TransitionFn;
+    /**
+     * Whether the element should be visible when the transition is completed.
+     */
+    visible: boolean;
+    /**
+     * Whether the transition should be animated.
+     */
+    animated: boolean;
+    /**
+     * If the element is initially visible, whether the element should be animated when first displayed.
+     */
+    animatedOnInit: boolean;
+    /**
+     * 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.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.
+     */
+    initDone: boolean | null;
+    /**
+     * Function to be called when the transition is completed and the element is visible.
+     */
+    onShown: () => void;
+    /**
+     * Function to be called when the transition is completed and the element is not visible.
+     */
+    onHidden: () => void;
+    /**
+     * Function to be called when the visible property changes.
+     *
+     * @param visible - new value of the visible property
+     */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Transition state.
+ */
+export interface TransitionState {
+    /**
+     * Whether the element is visible or will be visible when the transition is completed.
+     */
+    visible: boolean;
+    /**
+     * Whether the element to be animated is present in the DOM.
+     */
+    elementPresent: boolean;
+    /**
+     * Reference to the DOM element.
+     */
+    element: HTMLElement | null;
+    /**
+     * Whether a transition is currently running.
+     */
+    transitioning: boolean;
+    /**
+     * Equals: {@link TransitionState.visible | visible} && ! {@link TransitionState.transitioning | transitioning}
+     */
+    shown: boolean;
+    /**
+     * Equals: ! {@link TransitionState.visible | visible} && ! {@link TransitionState.transitioning | transitioning}
+     */
+    hidden: boolean;
+}
+/**
+ * Interface representing the API for managing transitions of an element.
+ */
+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 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: (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 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: (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 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, animated?: boolean) => Promise<void>;
+}
+/**
+ * Interface representing transition directives.
+ */
+export interface TransitionDirectives {
+    /**
+     * the transition directive
+     */
+    directive: Directive;
+}
+/**
+ * Represents a widget that handles transitions.
+ *
+ * @template TransitionProps - The properties required for the transition.
+ * @template TransitionState - The state management for the transition.
+ * @template TransitionApi - The API interface for the transition.
+ * @template TransitionDirectives - The directives used in the transition.
+ */
+export type TransitionWidget = Widget<TransitionProps, TransitionState, TransitionApi, TransitionDirectives>;
+/**
+ * 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
+ */
+export declare const noAnimation: TransitionFn;
+/**
+ * Create a transition widget.
+ *
+ * The widget will include a patch function, stores to track the animation states and a directive to apply the animation to an element.
+ *
+ * @param config - the props config of the transition
+ * @returns the transition widget
+ */
+export declare const createTransition: (config?: PropsConfig<TransitionProps>) => TransitionWidget;