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

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

@@ -0,0 +1,76 @@
+import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable, MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
+import type { Directive, PropsConfig, SSRHTMLElement, Widget } from '../types';
+/**
+ * Interface representing the properties for configuring Floating UI.
+ */
+export interface FloatingUIProps {
+    /**
+     * Options to use when calling computePosition from Floating UI
+     */
+    computePositionOptions: ComputePositionConfig;
+    /**
+     * Options to use when calling autoUpdate from Floating UI
+     */
+    autoUpdateOptions: AutoUpdateOptions;
+    /**
+     * Options to use when calling the arrow middleware from Floating UI
+     */
+    arrowOptions: Omit<ArrowOptions, 'element'> | Derivable<Omit<ArrowOptions, 'element'>>;
+}
+/**
+ * Represents the state of a floating UI element.
+ */
+export interface FloatingUIState {
+    /**
+     * The x coordinate of the floating ui
+     */
+    x: number | undefined;
+    /**
+     * The y coordinate of the floating ui
+     */
+    y: number | undefined;
+    /**
+     * The strategy used to position the floating element
+     */
+    strategy: Strategy | undefined;
+    /**
+     * The final chosen placement of the floating element
+     */
+    placement: Placement | undefined;
+    /**
+     * Object containing data returned from all middleware, keyed by their name
+     */
+    middlewareData: MiddlewareData | undefined;
+}
+/**
+ * Interface representing the directives used to enable floating ui.
+ */
+export interface FloatingUIDirectives {
+    /**
+     * Directive to attach to the reference element
+     */
+    referenceDirective: Directive<void, SSRHTMLElement>;
+    /**
+     * Directive to attach to the floating element
+     */
+    floatingDirective: Directive<void, SSRHTMLElement>;
+    /**
+     * Directive to attach to the arrow element
+     */
+    arrowDirective: Directive<void, SSRHTMLElement>;
+}
+/**
+ * Represents the type returned by the `createFloatingUI` function.
+ *
+ * This type is used to define the structure and behavior of the Floating UI component.
+ */
+export type FloatingUI = Widget<FloatingUIProps, FloatingUIState, object, FloatingUIDirectives>;
+/**
+ * Create a floating UI service.
+ *
+ * The returned service includes the patch method to patch the states, the stores to track the states and directives to apply.
+ *
+ * @param propsConfig - the props config for the floating UI service
+ * @returns the floating UI service
+ */
+export declare const createFloatingUI: (propsConfig?: PropsConfig<FloatingUIProps>) => FloatingUI;

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

@@ -0,0 +1,111 @@
+import { computed, derived } from "@amadeus-it-group/tansu";
+import { arrow, autoUpdate, computePosition } from "@floating-ui/dom";
+import { i as createBrowserStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../directive-Bsreu2z1.js";
+import { a as promiseStoreToValueStore } from "../promise-D-RZVPuv.js";
+import { writablesForProps, stateStores } from "../utils/stores.js";
+const defaultConfig = {
+  computePositionOptions: {},
+  autoUpdateOptions: {},
+  arrowOptions: {}
+};
+const createFloatingUI = (propsConfig) => {
+  const [
+    { autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ },
+    patch
+  ] = writablesForProps(defaultConfig, propsConfig);
+  const { directive: floatingDirective, element$: floatingElement$ } = createBrowserStoreDirective();
+  const { directive: referenceDirective, element$: referenceElement$ } = createBrowserStoreDirective();
+  const { directive: arrowDirective, element$: arrowElement$ } = createBrowserStoreDirective();
+  const arrowOptions$ = computed(() => {
+    const arrowElement = arrowElement$();
+    if (!arrowElement) {
+      return null;
+    }
+    const arrowInputOptions = arrowInputOptions$();
+    return typeof arrowInputOptions === "function" ? (state) => ({ ...arrowInputOptions(state), element: arrowElement }) : { ...arrowInputOptions, element: arrowElement };
+  });
+  const computePositionOptions$ = computed(() => {
+    let options = computePositionInputOptions$();
+    const arrowOptions = arrowOptions$();
+    if (arrowOptions) {
+      options = {
+        ...options,
+        middleware: [...options.middleware ?? [], arrow(arrowOptions)]
+      };
+    }
+    return options;
+  });
+  const promisePosition$ = derived(
+    [floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$],
+    ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
+      if (floatingElement && referenceElement) {
+        const clean = autoUpdate(
+          referenceElement,
+          floatingElement,
+          () => {
+            set(computePosition(referenceElement, floatingElement, computePositionOptions));
+          },
+          autoUpdateOptions
+        );
+        return () => {
+          set(null);
+          clean();
+        };
+      }
+      return void 0;
+    },
+    null
+  );
+  const position$ = promiseStoreToValueStore(promisePosition$, null);
+  const placement$ = computed(() => position$()?.placement);
+  const middlewareData$ = computed(() => position$()?.middlewareData);
+  const x$ = computed(() => position$()?.x);
+  const y$ = computed(() => position$()?.y);
+  const strategy$ = computed(() => position$()?.strategy);
+  const arrowX$ = computed(() => middlewareData$()?.arrow?.x);
+  const arrowY$ = computed(() => middlewareData$()?.arrow?.y);
+  const floatingStyleApplyAction$ = computed(() => {
+    const floatingElement = floatingElement$();
+    if (floatingElement) {
+      floatingElement.style.left = `${x$() ?? 0}px`;
+      floatingElement.style.top = `${y$() ?? 0}px`;
+    }
+  });
+  const arrowStyleApplyAction$ = computed(() => {
+    const arrowElement = arrowElement$();
+    if (arrowElement) {
+      const arrowX = arrowX$();
+      const arrowY = arrowY$();
+      arrowElement.style.left = arrowX != null ? `${arrowX}px` : "";
+      arrowElement.style.top = arrowY != null ? `${arrowY}px` : "";
+    }
+  });
+  return {
+    patch,
+    ...stateStores({
+      x$,
+      y$,
+      strategy$,
+      placement$,
+      middlewareData$
+    }),
+    directives: {
+      /**
+       * Directive to be used on the reference element from where the floating element will be positioned
+       */
+      referenceDirective,
+      /**
+       * Directive to be used on the floating element
+       */
+      floatingDirective: mergeDirectives(floatingDirective, directiveSubscribe(floatingStyleApplyAction$)),
+      /**
+       * Directive to be used on the arrow element, if any
+       */
+      arrowDirective: mergeDirectives(arrowDirective, directiveSubscribe(arrowStyleApplyAction$))
+    },
+    api: {}
+  };
+};
+export {
+  createFloatingUI
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_directive = require("../directive-DCaXmRe_.cjs");
+const isFocusable = require("../isFocusable-DfzDLeAN.cjs");
+const stack = [];
+let stackProcessPlanned = false;
+const processStack = () => {
+  stackProcessPlanned = false;
+  const candidates = [];
+  while (stack.length > 0) {
+    const top = stack[stack.length - 1];
+    if (top.element) {
+      candidates.push(top.element);
+      break;
+    } else {
+      if (top.previousElement) {
+        candidates.push(top.previousElement);
+      }
+      stack.pop();
+    }
+  }
+  for (const candidate of candidates) {
+    if (isFocusable.isFocusable(candidate)) {
+      candidate.focus();
+      return;
+    }
+  }
+};
+const planProcessStack = () => {
+  if (!stackProcessPlanned) {
+    stackProcessPlanned = true;
+    setTimeout(processStack, 0);
+  }
+};
+const focusElement = utils_directive.browserDirective((element) => {
+  const stackEntry = { element, previousElement: document.activeElement };
+  stack.push(stackEntry);
+  planProcessStack();
+  return {
+    destroy() {
+      stackEntry.element = null;
+      planProcessStack();
+    }
+  };
+});
+exports.focusElement = focusElement;

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

@@ -0,0 +1,9 @@
+import type { Directive } from '../types';
+/**
+ * Directive to focus an element and manage focus stack.
+ * When the element is destroyed, focus returns to the previous focusable element in the stack.
+ *
+ * @param element - The HTML element to focus.
+ * @returns An object with a destroy method to remove the element from the focus stack.
+ */
+export declare const focusElement: Directive;

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

@@ -0,0 +1,46 @@
+import { d as browserDirective } from "../directive-Bsreu2z1.js";
+import { i as isFocusable } from "../isFocusable-Ckwus82R.js";
+const stack = [];
+let stackProcessPlanned = false;
+const processStack = () => {
+  stackProcessPlanned = false;
+  const candidates = [];
+  while (stack.length > 0) {
+    const top = stack[stack.length - 1];
+    if (top.element) {
+      candidates.push(top.element);
+      break;
+    } else {
+      if (top.previousElement) {
+        candidates.push(top.previousElement);
+      }
+      stack.pop();
+    }
+  }
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      candidate.focus();
+      return;
+    }
+  }
+};
+const planProcessStack = () => {
+  if (!stackProcessPlanned) {
+    stackProcessPlanned = true;
+    setTimeout(processStack, 0);
+  }
+};
+const focusElement = browserDirective((element) => {
+  const stackEntry = { element, previousElement: document.activeElement };
+  stack.push(stackEntry);
+  planProcessStack();
+  return {
+    destroy() {
+      stackEntry.element = null;
+      planProcessStack();
+    }
+  };
+});
+export {
+  focusElement
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_directive = require("../directive-DCaXmRe_.cjs");
+const esmEnv = require("esm-env");
+const evtFocusIn = "focusin";
+const evtFocusOut = "focusout";
+const activeElement$ = !esmEnv.BROWSER ? tansu.readable(null) : tansu.readable(null, {
+  onUse({ set }) {
+    function setActiveElement() {
+      set(document.activeElement);
+    }
+    setActiveElement();
+    const container = document.documentElement;
+    function onFocusOut() {
+      setTimeout(setActiveElement);
+    }
+    container.addEventListener(evtFocusIn, setActiveElement, { capture: true });
+    container.addEventListener(evtFocusOut, onFocusOut, { capture: true });
+    return () => {
+      container.removeEventListener(evtFocusIn, setActiveElement, { capture: true });
+      container.removeEventListener(evtFocusOut, onFocusOut, { capture: true });
+    };
+  },
+  equal: Object.is
+});
+function createHasFocus() {
+  const { elements$, directive } = utils_directive.createBrowserStoreArrayDirective();
+  const hasFocus$ = tansu.computed(() => {
+    const activeElement = activeElement$();
+    if (!activeElement) {
+      return false;
+    }
+    for (const element of elements$()) {
+      if (element === activeElement || element.contains(activeElement)) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return {
+    directive,
+    hasFocus$
+  };
+}
+exports.activeElement$ = activeElement$;
+exports.createHasFocus = createHasFocus;

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

@@ -0,0 +1,40 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Directive } from '../types';
+/**
+ * A readable store that tracks the currently active (focused) element in the document.
+ *
+ * This store is only active in a browser environment. When not in a browser environment,
+ * it will be a readable store with a `null` value.
+ *
+ * @example
+ * ```typescript
+ * import { activeElement$ } from './focustrack';
+ *
+ * activeElement$.subscribe((element) => {
+ *   console.log('Active element:', element);
+ * });
+ * ```
+ *
+ * The store updates whenever the active element changes, such as when the user focuses
+ * on a different input field or clicks on a different part of the document.
+ */
+export declare const activeElement$: ReadableSignal<Element | null>;
+/**
+ * Interface representing an element that can have focus tracking.
+ */
+export interface HasFocus {
+    /**
+     * Directive to put on some elements.
+     */
+    directive: Directive;
+    /**
+     * Store that contains true if the activeElement is one of the elements which has the directive,
+     * or any of their descendants.
+     */
+    hasFocus$: ReadableSignal<boolean>;
+}
+/**
+ * Create a HasFocus
+ * @returns a HasFocus
+ */
+export declare function createHasFocus(): HasFocus;

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

@@ -0,0 +1,47 @@
+import { readable, computed } from "@amadeus-it-group/tansu";
+import { h as createBrowserStoreArrayDirective } from "../directive-Bsreu2z1.js";
+import { BROWSER } from "esm-env";
+const evtFocusIn = "focusin";
+const evtFocusOut = "focusout";
+const activeElement$ = !BROWSER ? readable(null) : readable(null, {
+  onUse({ set }) {
+    function setActiveElement() {
+      set(document.activeElement);
+    }
+    setActiveElement();
+    const container = document.documentElement;
+    function onFocusOut() {
+      setTimeout(setActiveElement);
+    }
+    container.addEventListener(evtFocusIn, setActiveElement, { capture: true });
+    container.addEventListener(evtFocusOut, onFocusOut, { capture: true });
+    return () => {
+      container.removeEventListener(evtFocusIn, setActiveElement, { capture: true });
+      container.removeEventListener(evtFocusOut, onFocusOut, { capture: true });
+    };
+  },
+  equal: Object.is
+});
+function createHasFocus() {
+  const { elements$, directive } = createBrowserStoreArrayDirective();
+  const hasFocus$ = computed(() => {
+    const activeElement = activeElement$();
+    if (!activeElement) {
+      return false;
+    }
+    for (const element of elements$()) {
+      if (element === activeElement || element.contains(activeElement)) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return {
+    directive,
+    hasFocus$
+  };
+}
+export {
+  activeElement$,
+  createHasFocus
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const hash$ = tansu.readable("", {
+  onUse({ set }) {
+    function handleHashChange() {
+      const hash = location.hash;
+      set(hash ? hash.substring(1) : "");
+    }
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }
+});
+exports.hash$ = hash$;

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

@@ -0,0 +1,3 @@
+import { type ReadableSignal } from '@amadeus-it-group/tansu';
+/** Store exposing the location.hash string */
+export declare const hash$: ReadableSignal<string>;

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

@@ -0,0 +1,15 @@
+import { readable } from "@amadeus-it-group/tansu";
+const hash$ = readable("", {
+  onUse({ set }) {
+    function handleHashChange() {
+      const hash = location.hash;
+      set(hash ? hash.substring(1) : "");
+    }
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }
+});
+export {
+  hash$
+};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_func = require("../utils/func.cjs");
+const utils_stores = require("../utils/stores.cjs");
+const defaultValues = {
+  elements: [],
+  options: void 0
+};
+const createIntersection = (config) => {
+  const [{ elements$, options$ }, patch] = utils_stores.writablesForProps(defaultValues, config);
+  const visibleElements$ = tansu.derived(
+    [elements$, options$],
+    ([elements, options], set) => {
+      if (elements.length) {
+        const visibleElements = /* @__PURE__ */ new Map();
+        const observer = new IntersectionObserver((entries) => {
+          for (const entry of entries) {
+            const { target, isIntersecting } = entry;
+            if (isIntersecting) {
+              visibleElements.set(target, entry);
+            } else {
+              visibleElements.delete(target);
+            }
+          }
+          set(visibleElements);
+        }, options);
+        for (const element of elements) {
+          observer.observe(element);
+        }
+        return () => {
+          observer.disconnect();
+        };
+      }
+      return utils_func.noop;
+    },
+    /* @__PURE__ */ new Map()
+  );
+  return {
+    /**
+     * Readable of observed elements
+     */
+    elements$: tansu.asReadable(elements$),
+    /**
+     * Store of map that contains the visible elements (for the key) and the corresponding entries
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry | MDN documentation}
+     */
+    visibleElements$: tansu.asReadable(visibleElements$),
+    patch
+  };
+};
+exports.createIntersection = createIntersection;

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

@@ -0,0 +1,30 @@
+import { type ReadableSignal } from '@amadeus-it-group/tansu';
+import type { PropsConfig } from '../types';
+/**
+ * Interface representing the properties for the Intersection service.
+ */
+export interface IntersectionProps {
+    /**
+     * elements to observe
+     */
+    elements: HTMLElement[];
+    /**
+     * IntersectionObserverInit used in the {@link IntersectionObserver}
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options | MDN documentation}
+     */
+    options: Partial<IntersectionObserverInit> | undefined;
+}
+/**
+ * Create an intersection service.
+ *
+ * The returned service includes the patch method to set the elements to observe / intersection options and the states to track the visible elements.
+ *
+ * @param config - the props config for the intersection service
+ * @returns the intersection service
+ */
+export declare const createIntersection: (config?: PropsConfig<IntersectionProps>) => {
+    elements$: ReadableSignal<HTMLElement[]>;
+    visibleElements$: ReadableSignal<Map<Element, IntersectionObserverEntry>>;
+    patch: (storesValues: Partial<IntersectionProps>) => void;
+};

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

@@ -0,0 +1,53 @@
+import { derived, asReadable } from "@amadeus-it-group/tansu";
+import { noop } from "../utils/func.js";
+import { writablesForProps } from "../utils/stores.js";
+const defaultValues = {
+  elements: [],
+  options: void 0
+};
+const createIntersection = (config) => {
+  const [{ elements$, options$ }, patch] = writablesForProps(defaultValues, config);
+  const visibleElements$ = derived(
+    [elements$, options$],
+    ([elements, options], set) => {
+      if (elements.length) {
+        const visibleElements = /* @__PURE__ */ new Map();
+        const observer = new IntersectionObserver((entries) => {
+          for (const entry of entries) {
+            const { target, isIntersecting } = entry;
+            if (isIntersecting) {
+              visibleElements.set(target, entry);
+            } else {
+              visibleElements.delete(target);
+            }
+          }
+          set(visibleElements);
+        }, options);
+        for (const element of elements) {
+          observer.observe(element);
+        }
+        return () => {
+          observer.disconnect();
+        };
+      }
+      return noop;
+    },
+    /* @__PURE__ */ new Map()
+  );
+  return {
+    /**
+     * Readable of observed elements
+     */
+    elements$: asReadable(elements$),
+    /**
+     * Store of map that contains the visible elements (for the key) and the corresponding entries
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry | MDN documentation}
+     */
+    visibleElements$: asReadable(visibleElements$),
+    patch
+  };
+};
+export {
+  createIntersection
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const esmEnv = require("esm-env");
+const utils_directive = require("../directive-DCaXmRe_.cjs");
+const utils_stores = require("../utils/stores.cjs");
+const createMatchMedia = (query) => esmEnv.BROWSER ? tansu.readable(false, {
+  onUse({ set }) {
+    const mql = window.matchMedia(query.trim());
+    set(mql.matches);
+    return utils_directive.addEvent(mql, "change", (val) => set(val.matches));
+  }
+}) : utils_stores.false$;
+exports.createMatchMedia = createMatchMedia;

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

@@ -0,0 +1,8 @@
+import { type ReadableSignal } from '@amadeus-it-group/tansu';
+/**
+ * Create a store tracking the state of a {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia | matchMedia} query.
+ *
+ * @param query - the query to match
+ * @returns a readable store tracking the match media query state
+ */
+export declare const createMatchMedia: (query: string) => ReadableSignal<boolean>;

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

@@ -0,0 +1,14 @@
+import { readable } from "@amadeus-it-group/tansu";
+import { BROWSER } from "esm-env";
+import { w as addEvent } from "../directive-Bsreu2z1.js";
+import { false$ } from "../utils/stores.js";
+const createMatchMedia = (query) => BROWSER ? readable(false, {
+  onUse({ set }) {
+    const mql = window.matchMedia(query.trim());
+    set(mql.matches);
+    return addEvent(mql, "change", (val) => set(val.matches));
+  }
+}) : false$;
+export {
+  createMatchMedia
+};