@agnos-ui/core 0.1.1 → 0.3.0

package/services/focustrack.js

@@ -1,46 +1,47 @@
-import { computed, readable } from '@amadeus-it-group/tansu';
-import { createStoreArrayDirective } from '../utils/directive';
-const evtFocusIn = 'focusin';
-const evtFocusOut = 'focusout';
-export const activeElement$ = 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,
-});
-/**
- * Create a HasFocus
- * @returns a HasFocus
- */
-export function createHasFocus() {
-    const { elements$, directive } = createStoreArrayDirective();
-    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$,
+import { readable, computed } from "@amadeus-it-group/tansu";
+import { g as createBrowserStoreArrayDirective } from "../directive-DCYlDznf.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/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/services/hash.d.ts

@@ -0,0 +1,2 @@
+/** Store exposing the location.hash string */
+export declare const hash$: import("@amadeus-it-group/tansu").ReadableSignal<string>;

package/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/services/intersection.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const func = require("../func-Qd3cD9a3.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 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 the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+     */
+    visibleElements$: tansu.asReadable(visibleElements$),
+    patch
+  };
+};
+exports.createIntersection = createIntersection;

package/services/intersection.js

@@ -1,55 +1,53 @@
-import { asReadable, derived } from '@amadeus-it-group/tansu';
-import { noop } from '../utils/internal/func';
-import { writablesForProps } from '../utils/stores';
+import { derived, asReadable } from "@amadeus-it-group/tansu";
+import { n as noop } from "../func-DR0n-ShK.js";
+import { writablesForProps } from "../utils/stores.js";
 const defaultValues = {
-    elements: [],
-    options: undefined,
+  elements: [],
+  options: void 0
 };
-/**
- * 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 const createIntersection = (config) => {
-    const [{ elements$, options$ }, patch] = writablesForProps(defaultValues, config);
-    const visibleElements$ = derived([elements$, options$], ([elements, options], set) => {
-        if (elements.length) {
-            const visibleElements = 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);
+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);
             }
-            return () => {
-                observer.disconnect();
-            };
+          }
+          set(visibleElements);
+        }, options);
+        for (const element of elements) {
+          observer.observe(element);
         }
-        return noop;
-    }, 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 the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
-         */
-        visibleElements$: asReadable(visibleElements$),
-        patch,
-    };
+        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 the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+     */
+    visibleElements$: asReadable(visibleElements$),
+    patch
+  };
+};
+export {
+  createIntersection
 };

package/services/matchMedia.cjs

@@ -0,0 +1,13 @@
+"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-BTSEYLF3.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));
+  }
+}) : tansu.readable(false);
+exports.createMatchMedia = createMatchMedia;

package/services/matchMedia.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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) => import("@amadeus-it-group/tansu").ReadableSignal<boolean>;

package/services/matchMedia.js

@@ -0,0 +1,13 @@
+import { readable } from "@amadeus-it-group/tansu";
+import { BROWSER } from "esm-env";
+import { u as addEvent } from "../directive-DCYlDznf.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));
+  }
+}) : readable(false);
+export {
+  createMatchMedia
+};

package/services/navManager.cjs

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_directive = require("../directive-BTSEYLF3.cjs");
+const isInertOrInvisible = (element) => {
+  let curElement = element;
+  while (curElement) {
+    const style = getComputedStyle(curElement);
+    if (curElement.inert || curElement.hidden || style.display === "none" || style.visibility === "hidden") {
+      return true;
+    }
+    curElement = curElement.parentElement;
+  }
+  return false;
+};
+const checkNotDisabled = (element) => {
+  var _a;
+  if (element.disabled) {
+    return false;
+  }
+  const parentFieldset = (_a = element.parentElement) == null ? void 0 : _a.closest("fieldset");
+  return parentFieldset ? checkNotDisabled(parentFieldset) : true;
+};
+const isFocusableOtherTags = (element) => element.isContentEditable || !!element.hasAttribute("tabindex");
+const isFocusableByTagName = {
+  INPUT: (element) => element.type !== "hidden" && checkNotDisabled(element),
+  SELECT: checkNotDisabled,
+  TEXTAREA: checkNotDisabled,
+  BUTTON: checkNotDisabled,
+  A: (element) => !!element.href || isFocusableOtherTags(element)
+};
+const isFocusable = (element) => {
+  return document.contains(element) && !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);
+};
+const compareDomOrder = (element1, element2) => {
+  if (element1 === element2) {
+    return 0;
+  }
+  const result = element1.compareDocumentPosition(element2);
+  if (result & Node.DOCUMENT_POSITION_FOLLOWING) {
+    return -1;
+  } else if (result & Node.DOCUMENT_POSITION_PRECEDING) {
+    return 1;
+  }
+  throw new Error("failed to compare elements");
+};
+const getTextDirection = (element) => getComputedStyle(element).direction;
+const textInputTypes = /* @__PURE__ */ new Set(["text", "search", "url", "tel", "password"]);
+const isTextInput = (element) => element instanceof HTMLInputElement && textInputTypes.has(element.type);
+const getKeyName = (event) => {
+  let key = event.key;
+  if (event.shiftKey) {
+    key = `Shift+${key}`;
+  }
+  if (event.altKey) {
+    key = `Alt+${key}`;
+  }
+  if (event.ctrlKey) {
+    key = `Ctrl+${key}`;
+  }
+  if (event.metaKey) {
+    key = `Meta+${key}`;
+  }
+  return key;
+};
+const isInternalInputNavigation = (event) => {
+  const { target, key } = event;
+  if (isTextInput(target) && (key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End")) {
+    let startPosition;
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      const direction = getTextDirection(target);
+      startPosition = key === (direction === "ltr" ? "ArrowLeft" : "ArrowRight");
+    } else {
+      startPosition = key === "Home";
+    }
+    const cursorPosition = target.selectionStart === target.selectionEnd ? target.selectionStart : null;
+    if (startPosition && cursorPosition !== 0 || !startPosition && cursorPosition !== target.value.length) {
+      return true;
+    }
+  }
+  return false;
+};
+const defaultSelector = (directiveElement) => [directiveElement];
+const createNavManager = () => {
+  const directiveInstances$ = utils_directive.registrationArray();
+  const elementsRefresh$ = tansu.writable({});
+  const refreshElements = (now = true) => {
+    elementsRefresh$.set({});
+    if (now) {
+      commonAncestor$();
+      elementsInDomOrder$();
+    }
+  };
+  const elements$ = tansu.computed(() => {
+    elementsRefresh$();
+    const res = [];
+    for (const item of directiveInstances$()) {
+      res.push(...item());
+    }
+    return res;
+  });
+  const commonAncestor$ = tansu.computed(() => utils_directive.computeCommonAncestor(elements$()), { equal: Object.is });
+  const elementsInDomOrder$ = tansu.computed(() => [...elements$()].sort(compareDomOrder));
+  const ancestorDirection = () => {
+    const commonAncestor = commonAncestor$();
+    return commonAncestor ? getTextDirection(commonAncestor) : "ltr";
+  };
+  const preventDefaultIfRelevant = (value, event) => {
+    if (value) {
+      event == null ? void 0 : event.preventDefault();
+    }
+    return value;
+  };
+  const focusIndex = (index, moveDirection = 0) => {
+    const array = elementsInDomOrder$();
+    while (index >= 0 && index < array.length) {
+      const newItem = array[index];
+      if (isFocusable(newItem)) {
+        newItem.focus();
+        if (moveDirection != 0 && isTextInput(newItem)) {
+          const changeDirection = ancestorDirection() !== getTextDirection(newItem);
+          const position = moveDirection > 0 !== changeDirection ? 0 : newItem.value.length;
+          newItem.setSelectionRange(position, position, position === 0 ? "forward" : "backward");
+        }
+        return newItem;
+      }
+      if (moveDirection === 0) {
+        break;
+      } else {
+        index += moveDirection;
+      }
+    }
+    return null;
+  };
+  const createFocusNeighbour = (moveDirection) => ({
+    event,
+    referenceElement = (event == null ? void 0 : event.target) ?? document.activeElement
+  } = {}) => {
+    const curIndex = referenceElement ? elementsInDomOrder$().indexOf(referenceElement) : -1;
+    if (curIndex > -1) {
+      return preventDefaultIfRelevant(focusIndex(curIndex + moveDirection, moveDirection), event);
+    }
+    return null;
+  };
+  const directive = utils_directive.browserDirective((directiveElement, config) => {
+    const onKeyDown = (event) => {
+      var _a;
+      if (isInternalInputNavigation(event)) {
+        return;
+      }
+      const keyName = getKeyName(event);
+      const handler = (_a = config.keys) == null ? void 0 : _a[keyName];
+      if (handler) {
+        refreshElements(false);
+        handler({ event, directiveElement, navManager, context: config.context });
+      }
+    };
+    directiveElement.addEventListener("keydown", onKeyDown);
+    const unregister = directiveInstances$.register(() => ((config == null ? void 0 : config.selector) ?? defaultSelector)(directiveElement));
+    return {
+      update(newConfig) {
+        config = newConfig;
+      },
+      destroy() {
+        directiveElement.removeEventListener("keydown", onKeyDown);
+        unregister();
+      }
+    };
+  });
+  const focusPrevious = createFocusNeighbour(-1);
+  const focusNext = createFocusNeighbour(1);
+  const focusFirst = ({ event } = {}) => preventDefaultIfRelevant(focusIndex(0, 1), event);
+  const focusLast = ({ event } = {}) => preventDefaultIfRelevant(focusIndex(elementsInDomOrder$().length - 1, -1), event);
+  const focusLeft = (...args) => (ancestorDirection() === "rtl" ? focusNext : focusPrevious)(...args);
+  const focusRight = (...args) => (ancestorDirection() === "rtl" ? focusPrevious : focusNext)(...args);
+  const focusFirstLeft = (...args) => (ancestorDirection() === "rtl" ? focusLast : focusFirst)(...args);
+  const focusFirstRight = (...args) => (ancestorDirection() === "rtl" ? focusFirst : focusLast)(...args);
+  const navManager = {
+    elementsInDomOrder$,
+    directive,
+    focusIndex,
+    focusPrevious,
+    focusNext,
+    focusFirst,
+    focusFirstLeft,
+    focusFirstRight,
+    focusLast,
+    focusLeft,
+    focusRight,
+    refreshElements
+  };
+  return navManager;
+};
+exports.createNavManager = createNavManager;
+exports.getKeyName = getKeyName;
+exports.isInternalInputNavigation = isInternalInputNavigation;

package/services/navManager.d.ts

@@ -1,4 +1,3 @@
-import type { Directive } from '../types';
 export type NavManager = ReturnType<typeof createNavManager>;
 /**
  * Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...),
@@ -23,27 +22,32 @@ export declare const isInternalInputNavigation: (event: KeyboardEvent) => boolea
  * - directiveElement: DOM element which has the navigation manager directive
  * - navManager: navigation manager instance
  */
-export type NavManagerKeyHandler = (info: {
+export type NavManagerKeyHandler<T = any> = (info: {
     directiveElement: HTMLElement;
-    event: KeyboardEvent;
+    event: Event;
     navManager: NavManager;
+    context?: T;
 }) => void;
 /**
  * Type of the parameter of the navigation manager directive.
  */
-export interface NavManagerItemConfig {
+export interface NavManagerItemConfig<T = any> {
     /**
      * Map of key handlers.
      * The key in the map should match the result of calling {@link getKeyName} on the key event (for example "ArrowLeft" or "Ctrl+PageDown").
      * The value in the map is the corresponding key handler.
      */
-    keys?: Record<string, NavManagerKeyHandler>;
+    keys?: Record<string, NavManagerKeyHandler<T>>;
     /**
      * Function returning DOM elements to include in the navigation manager.
      * It receives as a parameter the DOM element on which the navigation manager directive is used.
      * If not specified, the default selector function only returns the element on which the navigation manager directive is used.
      */
     selector?: (directiveElement: HTMLElement) => Iterable<HTMLElement>;
+    /**
+     *
+     */
+    context?: T;
 }
 /**
  * Returns a new instance of the navigation manager.
@@ -59,35 +63,38 @@ export interface NavManagerItemConfig {
  */
 export declare const createNavManager: () => {
     elementsInDomOrder$: import("@amadeus-it-group/tansu").ReadableSignal<HTMLElement[]>;
-    directive: Directive<NavManagerItemConfig>;
+    directive: <T = any>(node: import("..").SSRHTMLElement, args: NavManagerItemConfig<T>) => void | {
+        update?: ((args: NavManagerItemConfig<T>) => void) | undefined;
+        destroy?: (() => void) | undefined;
+    };
     focusIndex: (index: number, moveDirection?: -1 | 0 | 1) => HTMLElement | null;
     focusPrevious: ({ event, referenceElement, }?: {
-        event?: KeyboardEvent | undefined;
-        referenceElement?: HTMLElement | null | undefined;
+        event?: Event;
+        referenceElement?: HTMLElement | null;
     }) => HTMLElement | null;
     focusNext: ({ event, referenceElement, }?: {
-        event?: KeyboardEvent | undefined;
-        referenceElement?: HTMLElement | null | undefined;
+        event?: Event;
+        referenceElement?: HTMLElement | null;
     }) => HTMLElement | null;
     focusFirst: ({ event }?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event;
     }) => HTMLElement | null;
     focusFirstLeft: (args_0?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
     } | undefined) => HTMLElement | null;
     focusFirstRight: (args_0?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
     } | undefined) => HTMLElement | null;
     focusLast: ({ event }?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event;
     }) => HTMLElement | null;
     focusLeft: (args_0?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
         referenceElement?: HTMLElement | null | undefined;
     } | undefined) => HTMLElement | null;
     focusRight: (args_0?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
         referenceElement?: HTMLElement | null | undefined;
     } | undefined) => HTMLElement | null;
-    refreshElements: () => void;
+    refreshElements: (now?: boolean) => void;
 };