@agnos-ui/core 0.0.1-alpha.0 → 0.0.1-alpha.10

package/utils/internal/checks.js

@@ -0,0 +1,60 @@
+/**
+ * a number type guard
+ * @param value - the value to check
+ * @returns true if the value is a number
+ */
+export function isNumber(value) {
+    return typeof value === 'number' && !isNaN(value) && Number.isFinite(value);
+}
+/**
+ * a boolean type guard
+ * @param value - the value to check
+ * @returns true if the value is a boolean
+ */
+export function isBoolean(value) {
+    return value === true || value === false;
+}
+/**
+ * a function type guard
+ * @param value - the value to check
+ * @returns true if the value is a function
+ */
+export function isFunction(value) {
+    return typeof value === 'function';
+}
+/**
+ * a string type guard
+ * @param value - the value to check
+ * @returns true if the value is a string
+ */
+export function isString(value) {
+    return typeof value === 'string';
+}
+/**
+ * an array type guard
+ * @returns true if the value is an array
+ */
+export const isArray = Array.isArray;
+// TODO should we check that max > min?
+/**
+ * Clamp the value based on a maximum and optional minimum
+ * @param value - the value to check
+ * @param max - the max to clamp to
+ * @param [min] - the min to clamp to
+ * @returns the clamped value
+ */
+export function clamp(value, max, min = 0) {
+    return Math.max(Math.min(value, max), min);
+}
+/**
+ * an html element type guard
+ * @param value - the value to check
+ * @returns true if the value is an instance of HTMLElement
+ */
+export const isHTMLElement = (value) => value instanceof HTMLElement;
+/**
+ * Returns a new type guard that is based on the provided type guard and also returns true for null values.
+ * @param isType - base type guard
+ * @returns A type guard function that returns true for null values and calls the provided type guard for other values.
+ */
+export const allowNull = (isType) => (value) => value === null || isType(value);

package/utils/internal/dom.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Returns the common ancestor of the provided DOM elements.
+ * @param elements - array of DOM elements
+ * @returns the common ancestor, or null if the array is empty or if there is no common ancestor (e.g.: if elements are detached)
+ */
+export declare const computeCommonAncestor: (elements: HTMLElement[]) => HTMLElement | null;
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element - the html element
+ */
+export declare function reflow(element?: HTMLElement): void;
+/**
+ * Attach the given css classes to the element
+ *
+ * @param element - the HTML element
+ * @param classes - the css lcasses
+ */
+export declare const addClasses: (element: HTMLElement, classes?: string[]) => void;
+/**
+ * Remove the given css classes to the element
+ *
+ * @param element - the HTML element
+ * @param classes - the css classes
+ */
+export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;

package/utils/internal/dom.js

@@ -0,0 +1,61 @@
+/**
+ * Returns the common ancestor of the provided DOM elements.
+ * @param elements - array of DOM elements
+ * @returns the common ancestor, or null if the array is empty or if there is no common ancestor (e.g.: if elements are detached)
+ */
+export const computeCommonAncestor = (elements) => {
+    const length = elements.length;
+    if (length === 0)
+        return null;
+    let ancestor = elements[0];
+    for (let i = 1; i < length && ancestor; i++) {
+        const element = elements[i];
+        while (ancestor) {
+            if (ancestor === element) {
+                break;
+            }
+            const comparison = ancestor.compareDocumentPosition(element);
+            if (comparison & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+                break;
+            }
+            else if (comparison & Node.DOCUMENT_POSITION_CONTAINS) {
+                ancestor = element;
+                break;
+            }
+            else if (comparison & Node.DOCUMENT_POSITION_DISCONNECTED) {
+                return null;
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    return ancestor;
+};
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element - the html element
+ */
+export function reflow(element = document.body) {
+    element.getBoundingClientRect();
+}
+/**
+ * Attach the given css classes to the element
+ *
+ * @param element - the HTML element
+ * @param classes - the css lcasses
+ */
+export const addClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.add(...classes);
+    }
+};
+/**
+ * Remove the given css classes to the element
+ *
+ * @param element - the HTML element
+ * @param classes - the css classes
+ */
+export const removeClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.remove(...classes);
+    }
+};

package/utils/internal/func.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A noop function
+ */
+export declare const noop: () => void;
+/**
+ * The identity function
+ *
+ * @param x - the arg
+ * @returns the arg
+ */
+export declare const identity: <T>(x: T) => T;

package/utils/internal/func.js

@@ -0,0 +1,11 @@
+/**
+ * A noop function
+ */
+export const noop = () => { };
+/**
+ * The identity function
+ *
+ * @param x - the arg
+ * @returns the arg
+ */
+export const identity = (x) => x;

package/utils/internal/isFocusable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export declare const isFocusable: (element: HTMLElement) => boolean;

package/utils/internal/isFocusable.js

@@ -0,0 +1,35 @@
+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) => {
+    if (element.disabled) {
+        return false;
+    }
+    const parentFieldset = element.parentElement?.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),
+};
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export const isFocusable = (element) => !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);

package/utils/internal/math.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param number - decimal number
+ * @returns the decimal precision of the number
+ */
+export declare function getDecimalPrecision(number: number): number;

package/utils/internal/math.js

@@ -0,0 +1,13 @@
+const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
+/**
+ * @param number - decimal number
+ * @returns the decimal precision of the number
+ */
+export function getDecimalPrecision(number) {
+    const matches = ('' + number).match(decimalRegExp);
+    return Math.max(0, 
+    // Number of digits right of decimal point.
+    (matches[1]?.length ?? 0) -
+        // Adjust for exponential notation.
+        (+matches[2] || 0));
+}

package/utils/internal/promise.d.ts

@@ -0,0 +1,87 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+export interface PromisePendingResult {
+    /** Pending status */
+    status: 'pending';
+}
+export declare const promisePending: PromisePendingResult;
+export type PromiseState<T> = PromiseFulfilledResult<T> | PromiseRejectedResult | PromisePendingResult;
+/**
+ * Create a readable promise state store from a promise.
+ *
+ * The state of the returned store tracks the state of the promise and the resolved value or rejection reason.
+ *
+ * @param value - the promise
+ * @returns the readable promise state store
+ */
+export declare const promiseStateStore: <T>(value: T) => ReadableSignal<Readonly<PromiseState<Awaited<T>>>>;
+/**
+ * Create a readable promise state store from a promise store.
+ *
+ * @param promiseStore$ - the promise store
+ * @returns the readable promise state store
+ */
+export declare const promiseStoreToPromiseStateStore: <T>(promiseStore$: ReadableSignal<T>) => ReadableSignal<PromiseState<Awaited<T>>>;
+/**
+ * Create a value store from a promise state store
+ *
+ * The returned value store is only updated if the promise is fulfilled.
+ *
+ * @param store$ - the promise state store
+ * @param initialValue - the initial value of the returned value store
+ * @param equal - an equal function to compare values
+ * @returns the value store
+ */
+export declare const promiseStateStoreToValueStore: <T>(store$: ReadableSignal<PromiseState<T>>, initialValue: T, equal?: ((a: T, b: T) => boolean) | undefined) => ReadableSignal<T>;
+/**
+ * Create a value store from a promise store
+ *
+ * The returned value store is only updated if the promise is fulfilled.
+ *
+ * @param promiseStore$ - the promise store
+ * @param initialValue - the initial value of the returned value store
+ * @param equal - an equal function to compare values
+ * @returns the value store
+ */
+export declare const promiseStoreToValueStore: <T>(promiseStore$: ReadableSignal<T>, initialValue: Awaited<T>, equal?: ((a: Awaited<T>, b: Awaited<T>) => boolean) | undefined) => ReadableSignal<Awaited<T>>;
+/**
+ * Create a promise from a readable store and a fulfilled condition function.
+ *
+ * The promise is fulfilled when the state of the store respects the provided condition function.
+ *
+ * @param store - the readable store
+ * @param condition - the condition function
+ * @returns the promise and an unsubscribe function
+ */
+export declare const promiseFromStore: <T>(store: ReadableSignal<T>, condition?: (value: T) => boolean) => {
+    promise: Promise<T>;
+    unsubscribe(): void;
+};
+/**
+ * Create a promise from an HTML element event.
+ *
+ * @param element - the event target
+ * @param event - the event to listen to
+ * @returns the promise and an unsubscribe function
+ */
+export declare const promiseFromEvent: (element: EventTarget, event: string) => {
+    promise: Promise<Event>;
+    unsubscribe(): void;
+};
+/**
+ * Create a promise that resolves once a timeout has been reached.
+ *
+ * @param delay - the delay in milli seconds
+ * @returns a promise and an unsubscribe function
+ */
+export declare const promiseFromTimeout: (delay: number) => {
+    promise: Promise<void>;
+    unsubscribe(): void;
+};
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export declare const promiseWithResolve: () => {
+    promise: Promise<void>;
+    resolve: (value: void | Promise<void>) => void;
+};

package/utils/internal/promise.js

@@ -0,0 +1,169 @@
+import { asReadable, computed, derived, equal, readable, writable } from '@amadeus-it-group/tansu';
+import { noop } from './func';
+export const promisePending = { status: 'pending' };
+const isThenable = (value) => {
+    // cf https://tc39.es/ecma262/#sec-promise-resolve-functions
+    const type = typeof value;
+    return (type === 'object' && value !== null) || type === 'function' ? typeof value.then === 'function' : false;
+};
+const createPromiseStateStore = (promise) => {
+    const store = writable(promisePending);
+    Promise.resolve(promise).then((value) => store.set({ status: 'fulfilled', value }), (reason) => store.set({ status: 'rejected', reason }));
+    return asReadable(store);
+};
+const promiseWeakMap = new WeakMap();
+/**
+ * Create a readable promise state store from a promise.
+ *
+ * The state of the returned store tracks the state of the promise and the resolved value or rejection reason.
+ *
+ * @param value - the promise
+ * @returns the readable promise state store
+ */
+export const promiseStateStore = (value) => {
+    if (!isThenable(value)) {
+        return readable({ status: 'fulfilled', value: value });
+    }
+    let response = promiseWeakMap.get(value);
+    if (!response) {
+        response = createPromiseStateStore(value);
+        promiseWeakMap.set(value, response);
+    }
+    return response;
+};
+const promiseStateStoreEqual = (a, b) => Object.is(a, b) ||
+    (a.status === b.status &&
+        (a.status !== 'fulfilled' || equal(a.value, b.value)) &&
+        (a.status !== 'rejected' || equal(a.reason, b.reason)));
+/**
+ * Create a readable promise state store from a promise store.
+ *
+ * @param promiseStore$ - the promise store
+ * @returns the readable promise state store
+ */
+export const promiseStoreToPromiseStateStore = (promiseStore$) => computed(() => promiseStateStore(promiseStore$())(), { equal: promiseStateStoreEqual });
+/**
+ * Create a value store from a promise state store
+ *
+ * The returned value store is only updated if the promise is fulfilled.
+ *
+ * @param store$ - the promise state store
+ * @param initialValue - the initial value of the returned value store
+ * @param equal - an equal function to compare values
+ * @returns the value store
+ */
+export const promiseStateStoreToValueStore = (store$, initialValue, equal) => derived(store$, {
+    derive: (state, set) => {
+        if (state.status === 'fulfilled') {
+            set(state.value);
+        }
+    },
+    equal,
+}, initialValue);
+/**
+ * Create a value store from a promise store
+ *
+ * The returned value store is only updated if the promise is fulfilled.
+ *
+ * @param promiseStore$ - the promise store
+ * @param initialValue - the initial value of the returned value store
+ * @param equal - an equal function to compare values
+ * @returns the value store
+ */
+export const promiseStoreToValueStore = (promiseStore$, initialValue, equal) => promiseStateStoreToValueStore(promiseStoreToPromiseStateStore(promiseStore$), initialValue, equal);
+const truthyValue = (value) => !!value;
+/**
+ * Create a promise from a readable store and a fulfilled condition function.
+ *
+ * The promise is fulfilled when the state of the store respects the provided condition function.
+ *
+ * @param store - the readable store
+ * @param condition - the condition function
+ * @returns the promise and an unsubscribe function
+ */
+export const promiseFromStore = (store, condition = truthyValue) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        storeUnsubscribe();
+        unsubscribe = noop;
+    };
+    let storeUnsubscribe = noop;
+    storeUnsubscribe = store.subscribe((value) => {
+        if (condition(value)) {
+            resolve(value);
+            unsubscribe();
+        }
+    });
+    if (unsubscribe === noop) {
+        storeUnsubscribe();
+    }
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+/**
+ * Create a promise from an HTML element event.
+ *
+ * @param element - the event target
+ * @param event - the event to listen to
+ * @returns the promise and an unsubscribe function
+ */
+export const promiseFromEvent = (element, event) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        element.removeEventListener(event, eventListener);
+        unsubscribe = noop;
+    };
+    const eventListener = (event) => {
+        if (event.target === element) {
+            resolve(event);
+            unsubscribe();
+        }
+    };
+    element.addEventListener(event, eventListener);
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+/**
+ * Create a promise that resolves once a timeout has been reached.
+ *
+ * @param delay - the delay in milli seconds
+ * @returns a promise and an unsubscribe function
+ */
+export const promiseFromTimeout = (delay) => {
+    let timeout;
+    return {
+        promise: new Promise((r) => {
+            timeout = setTimeout(() => {
+                timeout = undefined;
+                r();
+            }, delay);
+        }),
+        unsubscribe() {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
+        },
+    };
+};
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export const promiseWithResolve = () => {
+    let resolve;
+    const promise = new Promise((r) => {
+        resolve = r;
+    });
+    return { promise, resolve: resolve };
+};

package/utils/internal/scrollbars.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A function to remove the scrollbars on the body element. It can be reverted using the {@link revertScrollbars} function.
+ */
+export declare const removeScrollbars: () => void;
+/**
+ * A function to revert the removal of scrollbars performed by the {@link removeScrollbars} function.
+ */
+export declare const revertScrollbars: () => void;

package/{dist/lib/modal → utils/internal}/scrollbars.js

@@ -1,4 +1,4 @@
-import { noop } from '../utils';
+import { noop } from './func';
 const internalRemoveScrollbars = () => {
     const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
     const body = document.body;
@@ -17,10 +17,16 @@ const internalRemoveScrollbars = () => {
     };
 };
 let internalRevert = noop;
+/**
+ * A function to remove the scrollbars on the body element. It can be reverted using the {@link revertScrollbars} function.
+ */
 export const removeScrollbars = () => {
     internalRevert();
     internalRevert = internalRemoveScrollbars();
 };
+/**
+ * A function to revert the removal of scrollbars performed by the {@link removeScrollbars} function.
+ */
 export const revertScrollbars = () => {
     internalRevert();
     internalRevert = noop;

package/utils/internal/sort.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The default comparision between two values, using the javascript < and > signs.
+ *
+ * @param a - the first input
+ * @param b - the second input
+ * @returns 1, 0 or -1 depending on the default compare
+ */
+export declare const compareDefault: (a: any, b: any) => 0 | 1 | -1;
+/**
+ * A comparision function between DOM elements, based on [Node.compareDocumentPosition](https://developer.mozilla.org/fr/docs/Web/API/Node/compareDocumentPosition).
+ *
+ * @param element1 - the first node
+ * @param element2 - the second node
+ * @returns 1, 0 or -1
+ */
+export declare const compareDomOrder: (element1: Node, element2: Node) => 0 | 1 | -1;

package/utils/internal/sort.js

@@ -0,0 +1,28 @@
+/**
+ * The default comparision between two values, using the javascript < and > signs.
+ *
+ * @param a - the first input
+ * @param b - the second input
+ * @returns 1, 0 or -1 depending on the default compare
+ */
+export const compareDefault = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+/**
+ * A comparision function between DOM elements, based on [Node.compareDocumentPosition](https://developer.mozilla.org/fr/docs/Web/API/Node/compareDocumentPosition).
+ *
+ * @param element1 - the first node
+ * @param element2 - the second node
+ * @returns 1, 0 or -1
+ */
+export 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');
+};

package/utils/internal/textDirection.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns the text direction of an element, using a call to `getComputedStyle`.
+ *
+ * @param element - the HTML element
+ * @returns the text direction of the element, 'ltr' or 'rtl'
+ */
+export declare const getTextDirection: (element: HTMLElement) => "rtl" | "ltr";

package/utils/internal/textDirection.js

@@ -0,0 +1,7 @@
+/**
+ * Returns the text direction of an element, using a call to `getComputedStyle`.
+ *
+ * @param element - the HTML element
+ * @returns the text direction of the element, 'ltr' or 'rtl'
+ */
+export const getTextDirection = (element) => getComputedStyle(element).direction;

package/utils/internal/traversal.d.ts

@@ -0,0 +1,54 @@
+interface TraversalFnOptions {
+    /**
+     * Remove symbol to return to remove the value
+     */
+    removeSymbol?: symbol;
+    /**
+     * index of the array, when looping on the elements
+     */
+    index?: number;
+}
+type TraversalFn = (key: string, value: any, options: TraversalFnOptions) => any;
+/**
+ * Creates a JSON walker function that can be used to traverse and transform
+ * the properties of a JSON object.
+ *
+ * @param fn - The callback function called for each property in the JSON object.
+ * @returns A function that takes a JSON object as input and applies the provided
+ * callback function to each property.
+ *
+ * @example
+ * ```typescript
+ * const json = {
+ *   name: 'John',
+ *   age: 30,
+ *   address: {
+ *     city: 'New York',
+ *     country: 'USA',
+ *   },
+ *   useless: '',
+ * };
+ *
+ * const transform = createTraversal((key, value, {removeSymbol}) => {
+ *   if (key === 'age') {
+ *     return value * 2; // Double the age
+ *   }
+ *   if (key === 'useless') {
+ * 	   return removeSymbol;
+ *   }
+ *   return value;
+ * });
+ *
+ * const transformedJson = transform(json);
+ * ```
+ */
+export declare function createTraversal(fn: TraversalFn): (json: any) => any;
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export declare const promiseWithResolve: () => {
+    promise: Promise<void>;
+    resolve: (value: void | Promise<void>) => void;
+};
+export {};