@agnos-ui/core 0.1.1 → 0.2.0

package/services/extendWidget.d.ts

@@ -2,16 +2,20 @@ import type { ConfigValidator, SlotContent, Widget, WidgetFactory, WidgetProps,
 /**
  * Type extending the original Widget props and state with ExtraProps
  */
-export type ExtendWidgetProps<W extends Widget, ExtraProps extends object> = Widget<ExtendWidgetAdaptSlotWidgetProps<WidgetProps<W>, ExtraProps>, ExtendWidgetAdaptSlotWidgetProps<WidgetState<W>, ExtraProps>, W['api'], W['actions'], W['directives']>;
+export type ExtendWidgetProps<W extends Widget, ExtraProps extends object, ExtraDirectives extends object = object> = Widget<ExtendWidgetAdaptSlotWidgetProps<WidgetProps<W>, ExtraProps, ExtraDirectives>, ExtendWidgetAdaptSlotWidgetProps<WidgetState<W>, ExtraProps, ExtraDirectives>, W['api'], W['actions'], ExtendWidgetInterfaces<W['directives'], ExtraDirectives>>;
+/**
+ * Type merging the passed interfaces together
+ */
+export type ExtendWidgetInterfaces<Interfaces, ExtraInterfaces> = Interfaces & ExtraInterfaces;
 /**
  * Type replacing the original Props with WidgetSlotContext contaning ExtraProps
  */
-export type ExtendWidgetAdaptSlotContentProps<Props extends Record<string, any>, ExtraProps extends object> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<ExtendWidgetProps<U, ExtraProps>> & Omit<Props, keyof WidgetSlotContext<any>> : Props;
+export type ExtendWidgetAdaptSlotContentProps<Props extends Record<string, any>, ExtraProps extends object, ExtraDirectives extends object> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<ExtendWidgetProps<U, ExtraProps, ExtraDirectives>> & Omit<Props, keyof WidgetSlotContext<any>> : Props;
 /**
  * Type enriching the original widget slot Props with ExtraProps slots
  */
-export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object> = Omit<Props, `slot${string}`> & ExtraProps & {
-    [K in keyof Props & `slot${string}`]: Props[K] extends SlotContent<infer U> ? SlotContent<ExtendWidgetAdaptSlotContentProps<U, ExtraProps>> : Props[K];
+export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object, ExtraDirectives extends object> = Omit<Props, `slot${string}`> & ExtraProps & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends SlotContent<infer U> ? SlotContent<ExtendWidgetAdaptSlotContentProps<U, ExtraProps, ExtraDirectives>> : Props[K];
 };
 /**
  * Method to extend the original widget with extra props with validator
@@ -20,4 +24,4 @@ export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object> =
  * @param extraPropsConfig - object verifying the type of each extra prop
  * @returns widget factory with the extra props
  */
-export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<ExtendWidgetProps<W, ExtraProps>>;
+export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object, ExtraDirectives extends object = object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<ExtendWidgetProps<W, ExtraProps, ExtraDirectives>>;

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,13 @@
+import { readable } from '@amadeus-it-group/tansu';
+/** Store exposing the location.hash string */
+export 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);
+    },
+});

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>(directiveElement: HTMLElement, config: NavManagerItemConfig<T>) => {
+        update(newConfig: NavManagerItemConfig<T>): void;
+        destroy(): void;
+    };
     focusIndex: (index: number, moveDirection?: -1 | 0 | 1) => HTMLElement | null;
     focusPrevious: ({ event, referenceElement, }?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
         referenceElement?: HTMLElement | null | undefined;
     }) => HTMLElement | null;
     focusNext: ({ event, referenceElement, }?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
         referenceElement?: HTMLElement | null | undefined;
     }) => HTMLElement | null;
     focusFirst: ({ event }?: {
-        event?: KeyboardEvent | undefined;
+        event?: Event | undefined;
     }) => 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 | undefined;
     }) => 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;
 };

package/services/navManager.js

@@ -72,7 +72,13 @@ const defaultSelector = (directiveElement) => [directiveElement];
 export const createNavManager = () => {
     const directiveInstances$ = registrationArray();
     const elementsRefresh$ = writable({});
-    const refreshElements = () => elementsRefresh$.set({});
+    const refreshElements = (now = true) => {
+        elementsRefresh$.set({});
+        if (now) {
+            commonAncestor$();
+            elementsInDomOrder$();
+        }
+    };
     const elements$ = computed(() => {
         elementsRefresh$();
         const res = [];
@@ -130,8 +136,8 @@ export const createNavManager = () => {
             const keyName = getKeyName(event);
             const handler = config.keys?.[keyName];
             if (handler) {
-                refreshElements();
-                handler({ event, directiveElement, navManager });
+                refreshElements(false);
+                handler({ event, directiveElement, navManager, context: config.context });
             }
         };
         directiveElement.addEventListener('keydown', onKeyDown);

package/services/resizeObserver.d.ts

@@ -0,0 +1,14 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+/**
+ * Create a resize observer object
+ * @returns An object containing the store with the dimentions of observed element (ResizeObserverEntry), the directive to be applied to the html element to be observed
+ */
+export declare const createResizeObserver: () => {
+    /**
+     * Store which contains the dimensions of the observed element (ResizeObserverEntry type)
+     * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+     */
+    dimensions$: ReadableSignal<ResizeObserverEntry | undefined>;
+    /** Directive to be attached to html element in order to listen to resize events */
+    directive: import("..").Directive;
+};

package/services/resizeObserver.js

@@ -0,0 +1,29 @@
+import { derived } from '@amadeus-it-group/tansu';
+import { createStoreDirective } from '../utils/directive';
+import { noop } from '../utils/internal/func';
+/**
+ * Create a resize observer object
+ * @returns An object containing the store with the dimentions of observed element (ResizeObserverEntry), the directive to be applied to the html element to be observed
+ */
+export const createResizeObserver = () => {
+    const { element$, directive } = createStoreDirective();
+    const observedElement$ = derived(element$, (element, set) => {
+        if (element === null) {
+            return noop;
+        }
+        const observer = new ResizeObserver((entries) => {
+            set(entries[0]);
+        });
+        observer.observe(element);
+        return () => observer?.disconnect();
+    }, undefined);
+    return {
+        /**
+         * Store which contains the dimensions of the observed element (ResizeObserverEntry type)
+         * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+         */
+        dimensions$: observedElement$,
+        /** Directive to be attached to html element in order to listen to resize events */
+        directive,
+    };
+};

package/services/transitions/bootstrap/fade.js

@@ -2,6 +2,6 @@ import { createSimpleClassTransition } from '../simpleClassTransition';
 export const fadeTransition = createSimpleClassTransition({
     animationPendingClasses: ['fade'],
     animationPendingShowClasses: ['show'],
-    showClasses: ['show'],
-    hideClasses: ['d-none'],
+    showClasses: ['show', 'fade'],
+    hideClasses: ['d-none', 'fade'],
 });

package/utils/directive.d.ts

@@ -22,6 +22,14 @@ export declare const bindDirective: <T>(directive: Directive<T>, directiveArg$:
  * @returns The resulting directive.
  */
 export declare const bindDirectiveNoArg: <T>(directive: Directive<void | T>) => Directive;
+/**
+ * Maps the argument to another argument of a directive using a provided function.
+ *
+ * @param directive - The directive to be applied.
+ * @param fn - The function to map the argument.
+ * @returns A new directive that applies the mapping function to the argument.
+ */
+export declare const mapDirectiveArg: <T, U>(directive: Directive<U>, fn: (arg: T) => U) => Directive<T>;
 /**
  * Returns a directive that subscribes to the given store while it is used on a DOM element,
  * and that unsubscribes from it when it is no longer used.

package/utils/directive.js

@@ -43,6 +43,22 @@ const noArg = readable(undefined);
  * @returns The resulting directive.
  */
 export const bindDirectiveNoArg = (directive) => bindDirective(directive, noArg);
+/**
+ * Maps the argument to another argument of a directive using a provided function.
+ *
+ * @param directive - The directive to be applied.
+ * @param fn - The function to map the argument.
+ * @returns A new directive that applies the mapping function to the argument.
+ */
+export const mapDirectiveArg = (directive, fn) => (node, arg) => {
+    const instance = directive(node, fn(arg));
+    return {
+        update: (arg) => {
+            instance?.update?.(fn(arg));
+        },
+        destroy: () => instance?.destroy?.(),
+    };
+};
 /**
  * Returns a directive that subscribes to the given store while it is used on a DOM element,
  * and that unsubscribes from it when it is no longer used.

package/utils/internal/dom.d.ts

@@ -23,3 +23,18 @@ export declare const addClasses: (element: HTMLElement, classes?: string[]) => v
  * @param classes - the css classes
  */
 export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;
+/**
+ * Adds an event listener to the specified element.
+ *
+ * @param element - The HTML element to which the event listener will be added.
+ * @param type - A string representing the event type to listen for.
+ * @param fn - The event listener function or object.
+ * @returns A function that removes the event listener from the element.
+ */
+export declare function addEvent<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, fn: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any): () => void;
+/**
+ * Generates a unique ID with the format 'auId-[counter]'.
+ *
+ * @returns The generated ID.
+ */
+export declare const generateId: () => string;

package/utils/internal/dom.js

@@ -59,3 +59,24 @@ export const removeClasses = (element, classes) => {
         element.classList.remove(...classes);
     }
 };
+/**
+ * Adds an event listener to the specified element.
+ *
+ * @param element - The HTML element to which the event listener will be added.
+ * @param type - A string representing the event type to listen for.
+ * @param fn - The event listener function or object.
+ * @returns A function that removes the event listener from the element.
+ */
+export function addEvent(element, type, fn) {
+    element.addEventListener(type, fn);
+    return function () {
+        element.removeEventListener(type, fn);
+    };
+}
+let idCount = 0;
+/**
+ * Generates a unique ID with the format 'auId-[counter]'.
+ *
+ * @returns The generated ID.
+ */
+export const generateId = () => `auId-${idCount++}`;

package/utils/internal/isFocusable.js

@@ -32,4 +32,6 @@ const isFocusableByTagName = {
  * @param element - element to test
  * @returns true if the element is programmatically focusable.
  */
-export const isFocusable = (element) => !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);
+export const isFocusable = (element) => {
+    return document.contains(element) && !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);
+};

package/utils/internal/textDirection.d.ts

@@ -4,4 +4,4 @@
  * @param element - the HTML element
  * @returns the text direction of the element, 'ltr' or 'rtl'
  */
-export declare const getTextDirection: (element: HTMLElement) => "rtl" | "ltr";
+export declare const getTextDirection: (element: HTMLElement) => "ltr" | "rtl";

package/utils/stores.d.ts

@@ -164,11 +164,22 @@ export declare const stateStores: <A extends {
     stores: { [key in `${string}$` & keyof A]: ReadableSignal<ValueOfStore<A[key]>>; };
 };
 /**
- * Creates a computed store that binds to multiple stores and triggers a callback when the value changes.
- * @param onChange$ - A readable signal callback function to execute when the value changes.
+ * Creates a derived store that binds to multiple stores and triggers a callback when the value changes for any reason.
+ * @param onChange$ - A readable signal containing a callback function to execute when the value changes.
  * @param stores - An array of Svelte stores, with the main store at index 0.
  * @param adjustValue - A function to adjust the value of the main store. By default, the value of the main store is returned.
  * @param equal - A function to determine if two values are equal. Used to compare the ajusted value with the current one.
  * @returns The derived store that reflects the combined state of the input stores.
  */
-export declare const bindableDerived: <T, U extends [WritableSignal<T, T>, ...StoreInput<any>[]]>(onChange$: ReadableSignal<(value: T) => void>, stores: U, adjustValue?: (arg: StoresInputValues<U>) => T, equal?: (currentValue: T, newValue: T) => boolean) => ReadableSignal<T>;
+export declare const bindableDerived: <T, U extends [WritableSignal<T, T>, ...StoreInput<any>[]]>(onChange$: ReadableSignal<(value: T) => void>, stores: U, adjustValue?: (arg: StoresInputValues<U>) => T, equal?: (currentValue: T, newValue: T) => boolean) => WritableSignal<T, T>;
+/**
+ * Creates a computed store that contains the adjusted value of the given store and that triggers a callback when the value changes from the set or update
+ * method of the returned writable store.
+ * @param store$ - store to be bound
+ * @param onChange$ - A readable signal containing a callback function to execute when the value changes from the set or update method of the returned writable store.
+ * @param adjustValue - A function to adjust the value of the store, called in a reactive context each time the value changes or any called dependency changes.
+ * By default, the value of store$ is returned.
+ * @param equal - A function to determine if two values are equal.
+ * @returns A writable store that contains the adjusted value of the given store, with the set or update functions that trigger the onChange$ callback.
+ */
+export declare const bindableProp: <T>(store$: WritableSignal<T, T | undefined>, onChange$: ReadableSignal<(newValue: T) => void>, adjustValue?: (value: T) => T, equal?: (a: T, b: T) => boolean) => WritableSignal<T, T>;

package/utils/stores.js

@@ -1,4 +1,4 @@
-import { asReadable, asWritable, batch, computed, derived, get, readable, writable } from '@amadeus-it-group/tansu';
+import { asReadable, asWritable, batch, computed, derived, equal as tansuDefaultEqual, get, readable, writable } from '@amadeus-it-group/tansu';
 import { INVALID_VALUE } from '../types';
 import { identity } from './internal/func';
 /**
@@ -252,8 +252,8 @@ export const stateStores = (inputStores) => {
     };
 };
 /**
- * Creates a computed store that binds to multiple stores and triggers a callback when the value changes.
- * @param onChange$ - A readable signal callback function to execute when the value changes.
+ * Creates a derived store that binds to multiple stores and triggers a callback when the value changes for any reason.
+ * @param onChange$ - A readable signal containing a callback function to execute when the value changes.
  * @param stores - An array of Svelte stores, with the main store at index 0.
  * @param adjustValue - A function to adjust the value of the main store. By default, the value of the main store is returned.
  * @param equal - A function to determine if two values are equal. Used to compare the ajusted value with the current one.
@@ -261,7 +261,7 @@ export const stateStores = (inputStores) => {
  */
 export const bindableDerived = (onChange$, stores, adjustValue = (arg) => arg[0], equal = (currentValue, newValue) => newValue === currentValue) => {
     let currentValue = stores[0]();
-    return derived(stores, {
+    return asWritable(derived(stores, {
         derive(values) {
             const newValue = adjustValue(values);
             const rectifiedValue = !equal(values[0], newValue);
@@ -277,5 +277,22 @@ export const bindableDerived = (onChange$, stores, adjustValue = (arg) => arg[0]
             return newValue;
         },
         equal,
-    });
+    }), stores[0].set.bind(stores[0]));
 };
+/**
+ * Creates a computed store that contains the adjusted value of the given store and that triggers a callback when the value changes from the set or update
+ * method of the returned writable store.
+ * @param store$ - store to be bound
+ * @param onChange$ - A readable signal containing a callback function to execute when the value changes from the set or update method of the returned writable store.
+ * @param adjustValue - A function to adjust the value of the store, called in a reactive context each time the value changes or any called dependency changes.
+ * By default, the value of store$ is returned.
+ * @param equal - A function to determine if two values are equal.
+ * @returns A writable store that contains the adjusted value of the given store, with the set or update functions that trigger the onChange$ callback.
+ */
+export const bindableProp = (store$, onChange$, adjustValue = identity, equal = tansuDefaultEqual) => asWritable(computed(() => adjustValue(store$()), { equal }), (newValue) => {
+    const adjustedValue = adjustValue(newValue);
+    if (!equal(store$(), adjustedValue)) {
+        store$.set(adjustedValue);
+        onChange$()(adjustedValue);
+    }
+});