@agnos-ui/core 0.0.1-alpha.1 → 0.0.1-alpha.11

package/services/navManager.js

@@ -0,0 +1,172 @@
+import { computed, writable } from '@amadeus-it-group/tansu';
+import { registrationArray } from '../utils/directive';
+import { computeCommonAncestor } from '../utils/internal/dom';
+import { isFocusable } from '../utils/internal/isFocusable';
+import { compareDomOrder } from '../utils/internal/sort';
+import { getTextDirection } from '../utils/internal/textDirection';
+// cf https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
+const textInputTypes = new Set(['text', 'search', 'url', 'tel', 'password']);
+const isTextInput = (element) => element instanceof HTMLInputElement && textInputTypes.has(element.type);
+/**
+ * Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...),
+ * prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
+ * @param event - keyboard event
+ * @returns the name of the key, including modifiers
+ */
+export 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;
+};
+/**
+ * Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move
+ * because it is already at one end of the input)
+ * @param event - keyboard event
+ * @returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise.
+ */
+export 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)) {
+            // let the text input process the key
+            return true;
+        }
+    }
+    return false;
+};
+const defaultSelector = (directiveElement) => [directiveElement];
+/**
+ * Returns a new instance of the navigation manager.
+ *
+ * The navigation manager simplifies keyboard navigation for a set of DOM elements.
+ * It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed
+ * (either by directly putting the directive on those elements, or by putting the directive on a parent element and
+ * specifying which child elements should be included through a selector function).
+ *
+ * It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
+ *
+ * @returns a new instance of the navigation manager
+ */
+export const createNavManager = () => {
+    const directiveInstances$ = registrationArray();
+    const elementsRefresh$ = writable({});
+    const refreshElements = () => elementsRefresh$.set({});
+    const elements$ = computed(() => {
+        elementsRefresh$();
+        const res = [];
+        for (const item of directiveInstances$()) {
+            res.push(...item());
+        }
+        return res;
+    });
+    const commonAncestor$ = computed(() => computeCommonAncestor(elements$()), { equal: Object.is });
+    const elementsInDomOrder$ = computed(() => [...elements$()].sort(compareDomOrder));
+    const ancestorDirection = () => {
+        const commonAncestor = commonAncestor$();
+        return commonAncestor ? getTextDirection(commonAncestor) : 'ltr';
+    };
+    const preventDefaultIfRelevant = (value, event) => {
+        if (value) {
+            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?.target ?? document.activeElement, } = {}) => {
+        const curIndex = referenceElement ? elementsInDomOrder$().indexOf(referenceElement) : -1;
+        if (curIndex > -1) {
+            return preventDefaultIfRelevant(focusIndex(curIndex + moveDirection, moveDirection), event);
+        }
+        return null;
+    };
+    const directive = (directiveElement, config) => {
+        const onKeyDown = (event) => {
+            if (isInternalInputNavigation(event)) {
+                return;
+            }
+            const keyName = getKeyName(event);
+            const handler = config.keys?.[keyName];
+            if (handler) {
+                refreshElements();
+                handler({ event, directiveElement, navManager });
+            }
+        };
+        directiveElement.addEventListener('keydown', onKeyDown);
+        const unregister = directiveInstances$.register(() => (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;
+};

package/services/portal.d.ts

@@ -3,4 +3,11 @@ 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/services/portal.js

@@ -1,3 +1,10 @@
+/**
+ * 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 const portal = (content, newArg) => {
     let arg;
     let replaceComment;
@@ -8,14 +15,18 @@ export const portal = (content, newArg) => {
         }
     };
     const update = (newArg) => {
-        if (newArg !== arg) {
+        if (newArg !== arg && (newArg?.container !== arg?.container || newArg?.insertBefore !== arg?.insertBefore)) {
             arg = newArg;
             const container = arg?.container ?? arg?.insertBefore?.parentElement;
             if (container) {
-                if (!replaceComment) {
-                    replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                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);
                 }
-                container.insertBefore(content, arg?.insertBefore ?? null);
             }
             else {
                 removeReplaceComment();

package/services/siblingsInert.d.ts

@@ -1,7 +1,8 @@
+import type { Directive } from '../types';
 /**
  * sliblingsInert directive
  * When used on an element, all siblings of the element and of its ancestors will be inert with the inert attribute.
  * In case it is used on multiple elements, only the last one has an effect (the directive keeps a stack of elements
  * on which it is used, so when the last one disappears, the previous one in the list becomes the one in effect).
  */
-export declare const sliblingsInert: import("..").Directive<void>;
+export declare const sliblingsInert: Directive;

package/services/siblingsInert.js

@@ -1,6 +1,6 @@
 import { computed } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
-import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from './directiveUtils';
+import { noop } from '../utils/internal/func';
+import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
 const internalSetSiblingsInert = (element) => {
     const inertValues = new Map();
     const recursiveHelper = (element) => {

package/{transitions → services/transitions}/baseTransitions.d.ts

@@ -1,5 +1,4 @@
-import type { PropsConfig } from '../services';
-import type { Directive, Widget } from '../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 /**
  * Function that implements a transition.
  */
@@ -132,5 +131,19 @@ export interface TransitionDirectives {
     directive: Directive<void | Partial<TransitionProps>>;
 }
 export type TransitionWidget = Widget<TransitionProps, TransitionState, TransitionApi, object, TransitionDirectives>;
+/**
+ * A transition to show / hide an element without any animation. 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;

package/{transitions → services/transitions}/baseTransitions.js

@@ -1,8 +1,16 @@
 import { batch, computed, derived, writable } from '@amadeus-it-group/tansu';
-import { bindableDerived, createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives, stateStores, writablesForProps, } from '../services';
-import { typeBoolean, typeFunction } from '../services/writables';
-const noop = () => { };
+import { typeBoolean, typeBooleanOrNull, typeFunction } from '../../utils/writables';
+import { promiseWithResolve } from '../../utils/internal/promise';
+import { noop } from '../../utils/internal/func';
+import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives } from '../../utils/directive';
 const neverEndingPromise = new Promise(noop);
+/**
+ * A transition to show / hide an element without any animation. It uses the HTML `display` attribute.
+ *
+ * @param element - the element to animate
+ * @param direction - the direction
+ */
 export const noAnimation = async (element, direction) => {
     element.style.display = direction === 'show' ? '' : 'none';
 };
@@ -23,14 +31,17 @@ const configValidator = {
     transition: typeFunction,
     onShown: typeFunction,
     onHidden: typeFunction,
+    onVisibleChange: typeFunction,
+    initDone: typeBooleanOrNull,
 };
-const promiseWithResolve = () => {
-    let resolve;
-    const promise = new Promise((r) => {
-        resolve = r;
-    });
-    return { promise, resolve: resolve };
-};
+/**
+ * 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 const createTransition = (config) => {
     const [{ animation$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animationOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);
     const { element$, directive: storeDirective } = createStoreDirective();

package/services/transitions/bootstrap/collapse.d.ts

@@ -0,0 +1,2 @@
+export declare const collapseVerticalTransition: import("../baseTransitions").TransitionFn;
+export declare const collapseHorizontalTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap/fade.d.ts

@@ -0,0 +1 @@
+export declare const fadeTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export * from './bootstrap/collapse';
+export * from './bootstrap/fade';

package/services/transitions/bootstrap.js

@@ -0,0 +1,2 @@
+export * from './bootstrap/collapse';
+export * from './bootstrap/fade';

package/services/transitions/collapse.d.ts

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

package/{transitions → services/transitions}/collapse.js

@@ -1,6 +1,19 @@
 import { createCSSTransition } from './cssTransitions';
-import { addClasses, reflow, removeClasses } from './utils';
-export const createCollapseTransition = ({ dimension = 'height', showClasses, hideClasses, animationPendingClasses } = {}) => createCSSTransition((element, direction, animation, context) => {
+import { addClasses, reflow, removeClasses } from '../../utils/internal/dom';
+/**
+ * Create a collapse transition.
+ *
+ * The transition attaches / removes classes during the different states of the collapse transition.
+ * It also updates the dimension value when reaching a non-pending state.
+ *
+ * @param config - the collapse config
+ * @param config.dimension - the dimension, `height` or `width`, on which the collapse applies
+ * @param config.showClasses - the classes to attach when the element is fully visible
+ * @param config.hideClasses - the classes to attach when the element is fully collapsed
+ * @param config.animationPendingClasses - the classes to attach when the transition is pending
+ * @returns the collapse transition
+ */
+export const createCollapseTransition = ({ dimension = 'height', showClasses, hideClasses, animationPendingClasses, } = {}) => createCSSTransition((element, direction, animation, context) => {
     if (animation) {
         let { maxSize, minSize } = context;
         if (!maxSize) {

package/{transitions → services/transitions}/cssTransitions.d.ts

@@ -12,4 +12,10 @@ export declare function hasTransition(element: HTMLElement): boolean;
  */
 export declare function getTransitionDurationMs(element: HTMLElement): number;
 export type CSSTransitionFn = (element: HTMLElement, direction: 'show' | 'hide', animation: boolean, context: object) => void | (() => void);
+/**
+ * Create a simple css transition.
+ *
+ * @param start - a function that creates the css animation and returns a clean-up function
+ * @returns the css transition
+ */
 export declare const createCSSTransition: (start: CSSTransitionFn) => TransitionFn;

package/{transitions → services/transitions}/cssTransitions.js

@@ -1,4 +1,5 @@
-import { promiseFromEvent, promiseFromTimeout } from './utils';
+import { noop } from '../../utils/internal/func';
+import { promiseFromEvent, promiseFromTimeout } from '../../utils/internal/promise';
 /**
  * Check if the provided html element has a transition
  * @param element - the html element
@@ -18,9 +19,12 @@ export function getTransitionDurationMs(element) {
     const transitionDurationSec = parseFloat(transitionDuration);
     return (transitionDelaySec + transitionDurationSec) * 1000;
 }
-const noop = () => {
-    /* do nothing */
-};
+/**
+ * Create a simple css transition.
+ *
+ * @param start - a function that creates the css animation and returns a clean-up function
+ * @returns the css transition
+ */
 export const createCSSTransition = (start) => async (element, direction, animation, signal, context) => {
     const endFn = start(element, direction, animation, context) ?? noop;
     if (animation && hasTransition(element)) {

package/{transitions → services/transitions}/simpleClassTransition.d.ts

@@ -26,4 +26,15 @@ export interface SimpleClassTransitionContext {
      */
     started?: boolean;
 }
-export declare const createSimpleClassTransition: ({ animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses, }: SimpleClassTransitionConfig) => import("./baseTransitions").TransitionFn;
+/**
+ * Create a transition based on css classes to attach.
+ *
+ * The config includes the classes that will be attached / removed depending on the transition state.
+ * `animationPendingClasses` are the classes attached when the transition is in a pending state
+ * `animationPendingShowClasses` and `animationPendingHideClasses` are attached when transitionning towards one direction
+ * `showClasses` and `hideClasses` are attached when the transition has reached the show or hide state respectively
+ *
+ * @param config - the transition config
+ * @returns the simple class transition
+ */
+export declare const createSimpleClassTransition: (config: SimpleClassTransitionConfig) => import("./baseTransitions").TransitionFn;

package/services/transitions/simpleClassTransition.js

@@ -0,0 +1,42 @@
+import { createCSSTransition } from './cssTransitions';
+import { addClasses, reflow, removeClasses } from '../../utils/internal/dom';
+/**
+ * Create a transition based on css classes to attach.
+ *
+ * The config includes the classes that will be attached / removed depending on the transition state.
+ * `animationPendingClasses` are the classes attached when the transition is in a pending state
+ * `animationPendingShowClasses` and `animationPendingHideClasses` are attached when transitionning towards one direction
+ * `showClasses` and `hideClasses` are attached when the transition has reached the show or hide state respectively
+ *
+ * @param config - the transition config
+ * @returns the simple class transition
+ */
+export const createSimpleClassTransition = (config) => {
+    const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
+    return createCSSTransition((element, direction, animation, context) => {
+        removeClasses(element, showClasses);
+        removeClasses(element, hideClasses);
+        if (animation) {
+            removeClasses(element, direction === 'show' ? animationPendingHideClasses : animationPendingShowClasses);
+            if (!context.started) {
+                context.started = true;
+                // if the animation is starting, explicitly sets the initial state (reverse of the direction)
+                // so that it is not impacted by another reflow done somewhere else before we had time to put
+                // the right classes:
+                const classes = direction === 'show' ? hideClasses : showClasses;
+                addClasses(element, classes);
+                reflow(element);
+                removeClasses(element, classes);
+            }
+            addClasses(element, animationPendingClasses);
+            reflow(element);
+            addClasses(element, direction === 'show' ? animationPendingShowClasses : animationPendingHideClasses);
+        }
+        return () => {
+            removeClasses(element, animationPendingClasses);
+            removeClasses(element, animationPendingShowClasses);
+            removeClasses(element, animationPendingHideClasses);
+            addClasses(element, direction === 'show' ? showClasses : hideClasses);
+        };
+    });
+};

package/types.d.ts

@@ -1,5 +1,22 @@
-import type { ReadableSignal, SubscribableStore } from '@amadeus-it-group/tansu';
-import type { PropsConfig } from './services';
+import type { ReadableSignal, StoreOptions, SubscribableStore, WritableSignal } from '@amadeus-it-group/tansu';
+export type ValuesOrReadableSignals<T extends object> = {
+    [K in keyof T]?: ReadableSignal<T[K] | undefined> | T[K];
+};
+export type ValuesOrWritableSignals<T extends object> = {
+    [K in keyof T]?: WritableSignal<T[K] | undefined> | T[K];
+};
+export interface PropsConfig<U extends object> {
+    /**
+     * Object containing, for each property, either its initial value, or a store that will contain the value at any time.
+     * When the value of a property is undefined or invalid, the value from the config is used.
+     */
+    props?: ValuesOrWritableSignals<U>;
+    /**
+     * Either a store of objects containing, for each property, the default value,
+     * or an object containing, for each property, either a store containing the default value or the default value itself.
+     */
+    config?: ReadableSignal<Partial<U>> | ValuesOrReadableSignals<Partial<U>>;
+}
 export interface Widget<Props extends object = object, State extends object = object, Api extends object = object, Actions extends object = object, Directives extends object = object> {
     /**
      * the reactive state of the widget, combining all the values served by the stores
@@ -29,6 +46,7 @@ export interface Widget<Props extends object = object, State extends object = ob
      */
     api: Api;
 }
+export type ContextWidget<W extends Widget> = Pick<W, 'actions' | 'api' | 'directives' | 'state$' | 'stores'>;
 export interface WidgetSlotContext<W extends Widget> {
     /**
      * the state of the widget
@@ -37,9 +55,15 @@ export interface WidgetSlotContext<W extends Widget> {
     /**
      * the widget
      */
-    widget: Pick<W, 'actions' | 'api' | 'directives' | 'state$' | 'stores'>;
+    widget: ContextWidget<W>;
 }
-export declare const toSlotContextWidget: <W extends Widget<object, object, object, object, object>>(w: W) => Pick<W, "actions" | "api" | "directives" | "state$" | "stores">;
+/**
+ * Extract actions, api, directives, state and stores from the widget to be passed to slots as context.
+ *
+ * @param w - the widget
+ * @returns the slot context
+ */
+export declare const toSlotContextWidget: <W extends Widget<object, object, object, object, object>>(w: W) => ContextWidget<W>;
 export type WidgetState<T extends {
     state$: SubscribableStore<any>;
 }> = T extends {
@@ -56,3 +80,18 @@ export type Directive<T = void> = (node: HTMLElement, args: T) => void | {
     destroy?: () => void;
 };
 export type SlotContent<Props extends object = object> = undefined | null | string | ((props: Props) => string);
+export declare const INVALID_VALUE: unique symbol;
+export type NormalizeValue<T> = (value: T) => T | typeof INVALID_VALUE;
+export interface WritableWithDefaultOptions<T> {
+    /**
+     * the normalize value function. should return the invalidValue symbol when the provided value is invalid
+     */
+    normalizeValue?: NormalizeValue<T>;
+    /**
+     * the equal function, allowing to compare two values. used to check if a previous and current values are equals.
+     */
+    equal?: StoreOptions<T>['equal'];
+}
+export type ConfigValidator<T extends object> = {
+    [K in keyof T]?: WritableWithDefaultOptions<T[K]>;
+};

package/types.js

@@ -1,3 +1,9 @@
+/**
+ * Extract actions, api, directives, state and stores from the widget to be passed to slots as context.
+ *
+ * @param w - the widget
+ * @returns the slot context
+ */
 export const toSlotContextWidget = (w) => ({
     actions: w.actions,
     api: w.api,
@@ -5,3 +11,4 @@ export const toSlotContextWidget = (w) => ({
     state$: w.state$,
     stores: w.stores,
 });
+export const INVALID_VALUE = Symbol();

package/{services/directiveUtils.js → utils/directive.js}

@@ -1,5 +1,5 @@
 import { asReadable, batch, readable, writable } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
+import { noop } from './internal/func';
 /**
  * Binds the given directive to a store that provides its argument.
  *

package/utils/internal/checks.d.ts

@@ -0,0 +1,49 @@
+/**
+ * a number type guard
+ * @param value - the value to check
+ * @returns true if the value is a number
+ */
+export declare function isNumber(value: any): value is number;
+/**
+ * a boolean type guard
+ * @param value - the value to check
+ * @returns true if the value is a boolean
+ */
+export declare function isBoolean(value: any): value is boolean;
+/**
+ * a function type guard
+ * @param value - the value to check
+ * @returns true if the value is a function
+ */
+export declare function isFunction(value: any): value is (...args: any[]) => any;
+/**
+ * a string type guard
+ * @param value - the value to check
+ * @returns true if the value is a string
+ */
+export declare function isString(value: any): value is string;
+/**
+ * an array type guard
+ * @returns true if the value is an array
+ */
+export declare const isArray: (arg: any) => arg is any[];
+/**
+ * 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 declare function clamp(value: number, max: number, min?: number): number;
+/**
+ * an html element type guard
+ * @param value - the value to check
+ * @returns true if the value is an instance of HTMLElement
+ */
+export declare const isHTMLElement: (value: any) => value is 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 declare const allowNull: <T>(isType: (value: any) => value is T) => (value: any) => value is T | null;