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

package/accordion.d.ts

@@ -39,11 +39,11 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     itemDisabled: boolean;
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      *
      * It is a prop of the accordion-item.
      */
-    itemCollapsed: boolean;
+    itemVisible: boolean;
     /**
      * If `true`, accordion-item will be animated.
      *
@@ -69,13 +69,13 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      *
      * It is a prop of the accordion-item.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
     /**
      * Structure of the accordion-item. The default item structure is: accordion-item
      * contains accordion header and accordion collapse; the accordion header contains the accordion button
@@ -135,7 +135,7 @@ export interface AccordionState extends WidgetsCommonPropsAndState {
 }
 export interface AccordionApi {
     /**
-     * Given the itemId, it will return if such item is expanded or not.
+     * Given the itemId, it will return if such item is visible (expanded) or not.
      *
      * If the itemId is not a valid id it will return `false`.
      */
@@ -169,7 +169,7 @@ export interface AccordionApi {
      */
     collapseAll(): void;
     /**
-     * Creates a new in accordionItem.
+     * Creates a new accordionItem.
      */
     registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
 }
@@ -217,9 +217,9 @@ export interface AccordionItemDirectives {
 }
 export interface AccordionItemCommonPropsAndState {
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      */
-    itemCollapsed: boolean;
+    itemVisible: boolean;
     /**
      * If `true`, the accordion-item will be disabled.
      * It will not react to user's clicks, but still will be possible to toggle programmatically.
@@ -286,16 +286,16 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
 }
 export interface AccordionItemState extends AccordionItemCommonPropsAndState {
     /**
-     * If `true` the collapse inside the accordion-item should be in DOM. Its value depends on the
-     * value of the `itemCollapse` and `itemDestroyOnHide`.
+     * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
+     * value of the `itemVisible` and `itemDestroyOnHide`.
      */
     shouldBeInDOM: boolean;
 }

package/accordion.js

@@ -1,4 +1,4 @@
-import { bindDirectiveNoArg, bindableDerived, directiveSubscribe, registrationArray, stateStores, typeBoolean, typeFunction, typeString, writablesForProps, } from './services';
+import { bindDirectiveNoArg, bindableDerived, directiveSubscribe, registrationArray, stateStores, typeBoolean, typeFunction, typeString, writablesForProps, normalizeConfigStores, mergeConfigStores, } from './services';
 import { createTransition } from './transitions';
 import { collapseVerticalTransition } from './transitions/bootstrap';
 import { computed, readable, writable } from '@amadeus-it-group/tansu';
@@ -8,21 +8,19 @@ function getItemId() {
     return `accordion-item-${itemId++}`;
 }
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
+    let keepOpen;
     if (openItems.length == 2) {
         oldOpen = oldOpen ?? openItems[0];
-        const keepOpen = openItems.find((id) => id !== oldOpen);
-        items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
-            }
-        });
+        keepOpen = openItems.find((id) => id !== oldOpen);
     }
     else if (openItems.length > 2) {
         //this case can happen when you have multiple items open and you toggle the close others
-        const keepOpen = openItems[0];
+        keepOpen = openItems[0];
+    }
+    if (keepOpen) {
         items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
+            if (item.state$().itemId !== keepOpen && item.state$().itemVisible) {
+                item.patch({ itemVisible: false });
             }
         });
     }
@@ -39,12 +37,12 @@ const defaultAccordionConfig = {
     itemId: '',
     itemDestroyOnHide: false,
     itemDisabled: false,
-    itemCollapsed: true,
+    itemVisible: false,
     itemAnimation: true,
     itemTransition: collapseVerticalTransition,
     onItemShown: noop,
     onItemHidden: noop,
-    onItemCollapsedChange: noop,
+    onItemVisibleChange: noop,
     slotItemStructure: undefined,
     slotItemBody: undefined,
     slotItemHeader: undefined,
@@ -58,12 +56,12 @@ const defaultItemConfig = {
     itemId: defaultAccordionConfig.itemId,
     itemDestroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
     itemDisabled: defaultAccordionConfig.itemDisabled,
-    itemCollapsed: defaultAccordionConfig.itemCollapsed,
+    itemVisible: defaultAccordionConfig.itemVisible,
     itemAnimation: defaultAccordionConfig.itemAnimation,
     itemTransition: defaultAccordionConfig.itemTransition,
     onItemShown: defaultAccordionConfig.onItemShown,
     onItemHidden: defaultAccordionConfig.onItemHidden,
-    onItemCollapsedChange: defaultAccordionConfig.onItemCollapsedChange,
+    onItemVisibleChange: defaultAccordionConfig.onItemVisibleChange,
     slotItemStructure: defaultAccordionConfig.slotItemStructure,
     slotItemBody: defaultAccordionConfig.slotItemBody,
     slotItemHeader: defaultAccordionConfig.slotItemHeader,
@@ -73,6 +71,7 @@ const defaultItemConfig = {
     itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
     itemBodyClass: defaultAccordionConfig.itemBodyClass,
 };
+const accordionItemProps = Object.keys(defaultItemConfig);
 /**
  * Retrieve a shallow copy of the default accordion config
  * @returns the default accordion config
@@ -87,12 +86,12 @@ const configAccordionValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
@@ -103,12 +102,12 @@ const configItemValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
@@ -116,34 +115,33 @@ const configItemValidator = {
     itemBodyClass: typeString,
 };
 function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
-    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemCollapsedChange$, itemCollapsed$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
+    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
     const initDone$ = writable(false);
     const itemId$ = bindableDerived(readable(noop), [_dirtyItemId$], ([dirtyItemId]) => (dirtyItemId ? dirtyItemId : getItemId()));
     const shouldBeInDOM$ = computed(() => {
         return itemDestroyOnHide$() === false || !itemTransition.state$().hidden;
     });
     const itemTransition = createTransition({
-        transition: itemTransition$,
-        visible: computed(() => {
-            const collapsed = itemCollapsed$();
-            onItemCollapsedChange$()(collapsed);
-            return !collapsed;
-        }),
-        animation: itemAnimation$,
-        animationOnInit: false,
-        initDone: initDone$,
-        onHidden: () => {
-            accordionOnHidden()(itemId$());
-            onItemHidden$()();
-        },
-        onShown: () => {
-            accordionOnShown()(itemId$());
-            onItemShown$()();
+        props: {
+            transition: itemTransition$,
+            visible: itemVisible$,
+            onVisibleChange: onItemVisibleChange$,
+            animation: itemAnimation$,
+            animationOnInit: false,
+            initDone: initDone$,
+            onHidden: () => {
+                accordionOnHidden()(itemId$());
+                onItemHidden$()();
+            },
+            onShown: () => {
+                accordionOnShown()(itemId$());
+                onItemShown$()();
+            },
         },
     });
     return {
         ...stateStores({
-            itemCollapsed$,
+            itemVisible$,
             itemId$,
             shouldBeInDOM$,
             itemDisabled$,
@@ -153,7 +151,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
         actions: {
             click: () => {
                 if (!itemDisabled$()) {
-                    itemCollapsed$.update((c) => !c);
+                    itemVisible$.update((c) => !c);
                 }
             },
         },
@@ -162,13 +160,13 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
                 initDone$.set(true);
             },
             collapse: () => {
-                itemCollapsed$.set(true);
+                itemVisible$.set(false);
             },
             expand: () => {
-                itemCollapsed$.set(false);
+                itemVisible$.set(true);
             },
             toggle: () => {
-                itemCollapsed$.update((c) => !c);
+                itemVisible$.update((c) => !c);
             },
         },
         directives: { collapseDirective: bindDirectiveNoArg(itemTransition.directives.directive), accordionItemDirective: noop },
@@ -180,12 +178,31 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
  * @returns a new accordion widget instance
  */
 export function createAccordion(config) {
-    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemCollapsed$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemCollapsedChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const accordionItemConfig = {
+        itemId: itemId$,
+        itemClass: itemClass$,
+        itemAnimation: itemAnimation$,
+        itemDisabled: itemDisabled$,
+        itemVisible: itemVisible$,
+        itemTransition: itemTransition$,
+        itemDestroyOnHide: itemDestroyOnHide$,
+        itemBodyClass: itemBodyClass$,
+        itemButtonClass: itemButtonClass$,
+        itemCollapseClass: itemCollapseClass$,
+        itemHeaderClass: itemHeaderClass$,
+        onItemVisibleChange: onItemVisibleChange$,
+        onItemHidden: onItemHidden$,
+        onItemShown: onItemShown$,
+        slotItemStructure: slotItemStructure$,
+        slotItemBody: slotItemBody$,
+        slotItemHeader: slotItemHeader$,
+    };
     const itemsWidget$ = registrationArray();
     const openItems$ = computed(() => {
         const openItems = [];
         itemsWidget$().forEach((item) => {
-            if (!item.state$().itemCollapsed) {
+            if (item.state$().itemVisible) {
                 openItems.push(item.state$().itemId);
             }
         });
@@ -197,9 +214,6 @@ export function createAccordion(config) {
             adjustItemsCloseOthers(itemsWidget$(), openItems$(), oldOpenItem$());
             oldOpenItem$.set(openItems$()[0]);
         }
-        else {
-            itemsWidget$();
-        }
     });
     const action$ = computed(() => {
         checkCloseOthersAction$();
@@ -212,7 +226,7 @@ export function createAccordion(config) {
             isExpanded: (id) => {
                 const item = getItem(itemsWidget$(), id);
                 if (item) {
-                    return !item.state$().itemCollapsed;
+                    return item.state$().itemVisible;
                 }
                 else {
                     return false;
@@ -233,27 +247,11 @@ export function createAccordion(config) {
             collapseAll: () => {
                 itemsWidget$().forEach((i) => i.api.collapse());
             },
-            registerItem: (itemConfig) => {
-                const item = createAccordionItem(onShown$, onHidden$, computed(() => ({
-                    itemId: itemId$(),
-                    itemClass: itemClass$(),
-                    itemAnimation: itemAnimation$(),
-                    itemDisabled: itemDisabled$(),
-                    itemCollapsed: itemCollapsed$(),
-                    itemTransition: itemTransition$(),
-                    itemDestroyOnHide: itemDestroyOnHide$(),
-                    itemBodyClass: itemBodyClass$(),
-                    itemButtonClass: itemButtonClass$(),
-                    itemCollapseClass: itemCollapseClass$(),
-                    itemHeaderClass: itemHeaderClass$(),
-                    onItemCollapsedChange: onItemCollapsedChange$(),
-                    onItemHidden: onItemHidden$(),
-                    onItemShown: onItemShown$(),
-                    slotItemStructure: slotItemStructure$(),
-                    slotItemBody: slotItemBody$(),
-                    slotItemHeader: slotItemHeader$(),
-                    ...itemConfig?.(),
-                })));
+            registerItem: (propsConfig) => {
+                const item = createAccordionItem(onShown$, onHidden$, {
+                    config: mergeConfigStores(accordionItemProps, normalizeConfigStores(accordionItemProps, propsConfig?.config), accordionItemConfig),
+                    props: propsConfig?.props,
+                });
                 item.directives.accordionItemDirective = () => ({ destroy: itemsWidget$.register(item) });
                 return item;
             },

package/alert.js

@@ -36,13 +36,15 @@ const configValidator = {
 export function createAlert(config) {
     const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
     const transition = createTransition({
-        transition: transition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animationOnInit$,
-        onVisibleChange: onVisibleChange$,
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: transition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animationOnInit$,
+            onVisibleChange: onVisibleChange$,
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const close = () => {
         patch({ visible: false });

package/config.d.ts

@@ -5,6 +5,7 @@ import type { PaginationProps } from './pagination';
 import type { RatingProps } from './rating';
 import type { SelectProps } from './select';
 import type { AccordionProps } from './accordion';
+import type { ProgressbarProps } from './progressbar';
 export type Partial2Levels<T> = Partial<{
     [Level1 in keyof T]: Partial<T[Level1]>;
 }>;
@@ -68,4 +69,8 @@ export interface WidgetsConfig {
      * the accordion widget config
      */
     accordion: AccordionProps;
+    /**
+     * the progress bar widget config
+     */
+    progressbar: ProgressbarProps;
 }

package/extendWidget.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigValidator } from './services/stores';
+import type { Widget, WidgetFactory, WidgetProps, WidgetState } from './types';
+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<Widget<WidgetProps<W> & ExtraProps, WidgetState<W> & ExtraProps, W["api"], W["actions"], W["directives"]>>;

package/extendWidget.js

@@ -0,0 +1,28 @@
+import { batch } from '@amadeus-it-group/tansu';
+import { stateStores, writablesWithDefault } from './services/stores';
+export const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig) => (propsConfig) => {
+    const extraPropsWritables = writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
+    const widget = factory(propsConfig);
+    return {
+        ...widget,
+        ...stateStores({ ...widget.stores, ...extraPropsWritables }),
+        patch: (storesValues) => batch(() => {
+            let widgetProps;
+            for (const [name, value] of Object.entries(storesValues ?? {})) {
+                const extraPropsStore = extraPropsWritables[`${name}$`];
+                if (extraPropsStore) {
+                    extraPropsStore.set(value);
+                }
+                else {
+                    if (!widgetProps) {
+                        widgetProps = {};
+                    }
+                    widgetProps[name] = value;
+                }
+            }
+            if (widgetProps) {
+                widget.patch(widgetProps);
+            }
+        }),
+    };
+};

package/index.d.ts

@@ -10,3 +10,5 @@ export * from './modal/modal';
 export * from './alert';
 export * from './accordion';
 export * from './commonProps';
+export * from './progressbar';
+export * from './extendWidget';

package/index.js

@@ -10,3 +10,5 @@ export * from './modal/modal';
 export * from './alert';
 export * from './accordion';
 export * from './commonProps';
+export * from './progressbar';
+export * from './extendWidget';

package/modal/modal.js

@@ -65,22 +65,26 @@ const modalsAction$ = computed(() => {
 export const createModal = (config$) => {
     const [{ animation$, backdrop$, backdropTransition$, closeOnOutsideClick$, container$, modalTransition$, onBeforeClose$, onVisibleChange$, onHidden$, onShown$, visible$: requestedVisible$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config$);
     const modalTransition = createTransition({
-        transition: modalTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
-        onVisibleChange: onVisibleChange$,
-        // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
-        // (especially in case one of the two transitions takes more time than the other)
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: modalTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+            onVisibleChange: onVisibleChange$,
+            // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+            // (especially in case one of the two transitions takes more time than the other)
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const visible$ = modalTransition.stores.visible$;
     const backdropTransition = createTransition({
-        transition: backdropTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
+        props: {
+            transition: backdropTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+        },
     });
     const transitioning$ = computed(() => modalTransition.stores.transitioning$() || (backdrop$() && backdropTransition.stores.transitioning$()));
     const hidden$ = computed(() => !transitioning$() && !visible$());

package/package.json

@@ -23,10 +23,10 @@
 		}
 	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.22"
+		"@amadeus-it-group/tansu": "0.0.23"
 	},
 	"sideEffects": false,
-	"version": "0.0.1-alpha.1",
+	"version": "0.0.1-alpha.3",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",

package/progressbar.d.ts

@@ -0,0 +1,87 @@
+import type { PropsConfig } from './services';
+import type { SlotContent, Widget, WidgetSlotContext } from './types';
+import type { WidgetsCommonPropsAndState } from './commonProps';
+export type ProgressbarContext = WidgetSlotContext<ProgressbarWidget>;
+export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * The minimum value.
+     * @defaultValue 0
+     */
+    min: number;
+    /**
+     * The maximum value.
+     * @defaultValue 100
+     */
+    max: number;
+    /**
+     * The current value.
+     * @defaultValue 0
+     */
+    value: number;
+    /**
+     * The aria label.
+     */
+    ariaLabel: string;
+    /**
+     * Global template for the Progressbar content.
+     */
+    slotContent: SlotContent<ProgressbarContext>;
+    /**
+     * Label of the progress.
+     */
+    slotDefault: SlotContent<ProgressbarContext>;
+    /**
+     * Height of the progressbar, can be any valid css height value.
+     */
+    height: string;
+    /**
+     * If `true`, shows a striped progressbar.
+     */
+    striped: boolean;
+    /**
+     * If `true`, animates a striped progressbar.
+     * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
+     */
+    animated: boolean;
+}
+export interface ProgressbarState extends ProgressbarCommonPropsAndState {
+    /**
+     * Percentage of completion.
+     */
+    percentage: number;
+    /**
+     * `true` if the value is above its minimum value.
+     */
+    started: boolean;
+    /**
+     * `true` if the value has reached its maximum value.
+     */
+    finished: boolean;
+    /**
+     * The aria value text.
+     */
+    ariaValueText: string | undefined;
+}
+export interface ProgressbarProps extends ProgressbarCommonPropsAndState {
+    /**
+     * Return the value for the 'aria-valuetext' attribute.
+     * @param value - current value
+     * @param minimum - minimum value
+     * @param maximum - maximum value
+     */
+    ariaValueTextFn: (value: number, minimum: number, maximum: number) => string | undefined;
+}
+export interface ProgressbarApi {
+}
+export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, ProgressbarApi, object, object>;
+/**
+ * Retrieve a shallow copy of the default Progressbar config
+ * @returns the default Progressbar config
+ */
+export declare function getProgressbarDefaultConfig(): ProgressbarProps;
+/**
+ * Create an ProgressbarWidget with given config props
+ * @param config - an optional progress bar config
+ * @returns an ProgressbarWidget
+ */
+export declare function createProgressbar(config?: PropsConfig<ProgressbarProps>): ProgressbarWidget;

package/progressbar.js

@@ -0,0 +1,78 @@
+import { clamp } from './services/checks';
+import { bindableDerived, stateStores, typeBoolean, typeFunction, typeNumber, typeString, writablesForProps } from './services';
+import { computed, readable } from '@amadeus-it-group/tansu';
+import { noop } from './utils';
+const defaultConfig = {
+    min: 0,
+    max: 100,
+    value: 0,
+    ariaLabel: 'Progressbar',
+    className: '',
+    slotContent: undefined,
+    slotDefault: undefined,
+    height: '',
+    striped: false,
+    animated: false,
+    ariaValueTextFn: () => undefined,
+};
+/**
+ * Retrieve a shallow copy of the default Progressbar config
+ * @returns the default Progressbar config
+ */
+export function getProgressbarDefaultConfig() {
+    return { ...defaultConfig };
+}
+const configValidator = {
+    min: typeNumber,
+    max: typeNumber,
+    value: typeNumber,
+    ariaLabel: typeString,
+    className: typeString,
+    height: typeString,
+    striped: typeBoolean,
+    animated: typeBoolean,
+    ariaValueTextFn: typeFunction,
+};
+/**
+ * Create an ProgressbarWidget with given config props
+ * @param config - an optional progress bar config
+ * @returns an ProgressbarWidget
+ */
+export function createProgressbar(config) {
+    const [{ 
+    // dirty inputs that need adjustment:
+    max$: _dirtyMaximum$, value$: _dirtyValue$, 
+    // clean inputs
+    min$, ariaValueTextFn$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
+    const max$ = bindableDerived(readable(noop), [_dirtyMaximum$, min$], ([dirtyMaximum, minimum]) => Math.max(minimum, dirtyMaximum));
+    const value$ = bindableDerived(readable(noop), [_dirtyValue$, min$, max$], ([dirtyValue, min, max]) => clamp(dirtyValue, max, min));
+    const percentage$ = computed(() => {
+        const max = max$();
+        const min = min$();
+        if (max > min) {
+            return clamp(((value$() - min) * 100) / (max - min), 100, 0);
+        }
+        else {
+            return 0;
+        }
+    });
+    const started$ = computed(() => value$() > min$());
+    const finished$ = computed(() => value$() === max$());
+    const ariaValueText$ = computed(() => ariaValueTextFn$()(value$(), min$(), max$()));
+    return {
+        ...stateStores({
+            min$,
+            max$,
+            value$,
+            percentage$,
+            started$,
+            finished$,
+            ariaValueText$,
+            ...stateProps,
+        }),
+        patch,
+        api: {},
+        directives: {},
+        actions: {},
+    };
+}

package/rating.d.ts

@@ -54,7 +54,7 @@ export interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
 }
 export interface RatingProps extends RatingCommonPropsAndState {
     /**
-     * Return the value for the 'aria-value' attribute.
+     * Return the value for the 'aria-valuetext' attribute.
      * @param rating - Current rating value.
      * @param maxRating - maxRating value.
      */
@@ -131,7 +131,7 @@ export type RatingWidget = Widget<RatingProps, RatingState, object, RatingAction
  */
 export declare function getRatingDefaultConfig(): {
     /**
-     * Return the value for the 'aria-value' attribute.
+     * Return the value for the 'aria-valuetext' attribute.
      * @param rating - Current rating value.
      * @param maxRating - maxRating value.
      */

package/services/checks.d.ts

@@ -22,6 +22,11 @@ export declare function isFunction(value: any): value is (...args: any[]) => any
  * @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

package/services/checks.js

@@ -30,6 +30,11 @@ export function isFunction(value) {
 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

package/services/index.d.ts

@@ -5,3 +5,4 @@ export * from './intersection';
 export * from './portal';
 export * from './stores';
 export * from './writables';
+export * from './navManager';

package/services/index.js

@@ -5,3 +5,4 @@ export * from './intersection';
 export * from './portal';
 export * from './stores';
 export * from './writables';
+export * from './navManager';

package/services/navManager.d.ts

@@ -0,0 +1,5 @@
+import type { Directive } from '../types';
+export type NavManager = ReturnType<typeof createNavManager>;
+export declare const createNavManager: () => {
+    directive: Directive;
+};

package/services/navManager.js

@@ -0,0 +1,52 @@
+import { compareDomOrder } from './sortUtils';
+import { registrationArray } from './directiveUtils';
+import { computed } from '@amadeus-it-group/tansu';
+// 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);
+export const createNavManager = () => {
+    const array$ = registrationArray();
+    const sortedArray$ = computed(() => [...array$()].sort(compareDomOrder));
+    const directive = (element) => {
+        const onKeyDown = (event) => {
+            let move = 0;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    move = -1;
+                    break;
+                case 'ArrowRight':
+                    move = 1;
+                    break;
+            }
+            if (isTextInput(event.target)) {
+                const cursorPosition = event.target.selectionStart === event.target.selectionEnd ? event.target.selectionStart : null;
+                if ((cursorPosition !== 0 && move < 0) || (cursorPosition !== event.target.value.length && move > 0)) {
+                    move = 0;
+                }
+            }
+            if (move != 0) {
+                const array = sortedArray$();
+                const currentIndex = array.indexOf(element);
+                const newIndex = currentIndex + move;
+                if (newIndex < array.length && newIndex >= 0) {
+                    const newItem = array[newIndex];
+                    event.preventDefault();
+                    newItem.focus();
+                    if (isTextInput(newItem)) {
+                        const position = move < 0 ? newItem.value.length : 0;
+                        newItem.setSelectionRange(position, position);
+                    }
+                }
+            }
+        };
+        element.addEventListener('keydown', onKeyDown);
+        const unregister = array$.register(element);
+        return {
+            destroy() {
+                element.removeEventListener('keydown', onKeyDown);
+                unregister();
+            },
+        };
+    };
+    return { directive };
+};

package/services/sortUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const compareDefault: (a: any, b: any) => 0 | 1 | -1;
+export declare const compareDomOrder: (element1: Node, element2: Node) => 0 | 1 | -1;

package/services/sortUtils.js

@@ -0,0 +1,14 @@
+export const compareDefault = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+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/services/stores.d.ts

@@ -1,9 +1,15 @@
-import type { ReadableSignal, WritableSignal, StoreOptions, StoreInput, StoresInputValues } from '@amadeus-it-group/tansu';
-export type ToWritableSignal<P, V = P> = {
-    [K in keyof P & keyof V as `${K & string}$`]-?: WritableSignal<P[K], V[K] | undefined>;
+import type { ReadableSignal, StoreInput, StoreOptions, StoresInputValues, WritableSignal } from '@amadeus-it-group/tansu';
+export type ToWritableSignal<P> = {
+    [K in keyof P as `${K & string}$`]-?: WritableSignal<P[K], P[K] | undefined>;
 };
-export type ValuesOrStores<T extends object> = {
-    [K in keyof T]?: ReadableSignal<T[K]> | T[K];
+export type ReadableSignals<T extends object> = {
+    [K in keyof T]?: ReadableSignal<T[K] | undefined>;
+};
+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 type WithoutDollar<S extends `${string}$`> = S extends `${infer U}$` ? U : never;
 export type ValueOfStore<S extends ReadableSignal<any>> = S extends ReadableSignal<infer U> ? U : never;
@@ -32,7 +38,7 @@ export type ToState<S extends {
  * @param stores - object of stores
  * @returns the patch function
  */
-export declare function createPatch<T extends object, V extends object = T>(stores: ToWritableSignal<T, V>): <U extends Partial<T>>(storesValues?: void | U | undefined) => void;
+export declare function createPatch<T extends object>(stores: ToWritableSignal<T>): <U extends Partial<T>>(storesValues?: void | U | undefined) => void;
 /**
  * This utility function is designed to compare the first level of two objects.
  *
@@ -46,12 +52,12 @@ export declare function createPatch<T extends object, V extends object = T>(stor
  */
 export declare function findChangedProperties<T extends Record<string, any>>(obj1: Partial<T>, obj2: Partial<T>): Partial<T> | null;
 export declare const INVALID_VALUE: unique symbol;
-export type NormalizeValue<T, U = T> = (value: U) => T | typeof INVALID_VALUE;
-export interface WritableWithDefaultOptions<T, U = T> {
+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, U>;
+    normalizeValue?: NormalizeValue<T>;
     /**
      * the equal function, allowing to compare two values. used to check if a previous and current values are equals.
      */
@@ -66,14 +72,35 @@ export interface WritableWithDefaultOptions<T, U = T> {
  * `set` or `update` functions), or the `defValue` is used instead (if the invalid value comes from the `config$` store).
  *
  * @param defValue - Default value used when both the own value and the config$ value are undefined.
- * @param config$ - Default value used when the own value is undefined
+ * @param config$ - Store containing the default value used when the own value is undefined
  * @param options - Object which can contain the following optional functions: normalizeValue and equal
+ * @param own$ - Store containing the own value
  * @returns a writable store with the extra default value and normalization logic described above
  */
-export declare function writableWithDefault<T, U = T>(defValue: T, config$?: ReadableSignal<U | undefined>, { normalizeValue, equal }?: WritableWithDefaultOptions<T, U>): WritableSignal<T, U | undefined>;
-export type ConfigValidator<T extends object, U extends object = T> = {
-    [K in keyof T & keyof U]?: WritableWithDefaultOptions<T[K], U[K]>;
+export declare function writableWithDefault<T>(defValue: T, config$?: ReadableSignal<T | undefined>, options?: WritableWithDefaultOptions<T>, own$?: WritableSignal<T | undefined>): WritableSignal<T, T | undefined>;
+export type ConfigValidator<T extends object> = {
+    [K in keyof T]?: WritableWithDefaultOptions<T[K]>;
 };
+/**
+ * Returns true if the provided argument is a store (ReadableSignal).
+ * @param x - argument that is tested
+ * @returns true if the argument is a store (ReadableSignal)
+ */
+export declare const isStore: (x: any) => x is ReadableSignal<any>;
+/**
+ * If the provided argument is already a store, it is returned as is, otherwise, a readable store is created with the provided argument as its initial value.
+ * @param x - either a store or a simple value
+ * @returns either x if x is already a store, or readable(x) otherwise
+ */
+export declare const toReadableStore: <T>(x: T | ReadableSignal<T>) => ReadableSignal<T>;
+/**
+ * If the provided argument is already a store, it is returned as is, otherwise, a writable store is created with the provided argument as its initial value.
+ * @param x - either a writable store or a simple value
+ * @returns either x if x is already a store, or writable(x) otherwise
+ */
+export declare const toWritableStore: <T>(x: T | WritableSignal<T, T>) => WritableSignal<T, T>;
+export declare const normalizeConfigStores: <T extends object>(keys: (keyof T)[], config?: ReadableSignal<Partial<T>> | ValuesOrReadableSignals<T> | undefined) => ReadableSignals<T>;
+export declare const mergeConfigStores: <T extends object>(keys: (keyof T)[], config1?: ReadableSignals<T> | undefined, config2?: ReadableSignals<T> | undefined) => ReadableSignals<T>;
 /**
  * Returns an object containing, for each property of `defConfig`, a corresponding writable with the normalization and default value logic
  * described in {@link writableWithDefault}. Keys in the returned object are the same as the ones present in `defConfig`,
@@ -81,8 +108,7 @@ export type ConfigValidator<T extends object, U extends object = T> = {
  *
  * @param defConfig - object containing, for each property, a default value to use in case `config$` does not provide the suitable default
  * value for that property
- * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
- * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param propsConfig - object defining the config and props
  * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
  * @returns an object containing writables
  *
@@ -90,8 +116,8 @@ export type ConfigValidator<T extends object, U extends object = T> = {
  * ```ts
  * const defConfig = {propA: 1};
  * const validation = {propA: {normalizeValue: value => +value}};
- * const config$ = writable({propA: 5});
- * const {propA$} = writablesWithDefault(defConfig, config$, validation);
+ * const config = writable({propA: 5});
+ * const {propA$} = writablesWithDefault(defConfig, {config}, validation);
  * ```
  *
  * @example With an object containing a value and a store
@@ -99,15 +125,15 @@ export type ConfigValidator<T extends object, U extends object = T> = {
  * const defConfig = {propA: 1, propB: 2};
  * const validation = {propA: {normalizeValue: value => +value}};
  * const config = {propA: 5, propB: writable(3)};
- * const {propA$, propB$} = writablesWithDefault(defConfig, config, validation);
+ * const {propA$, propB$} = writablesWithDefault(defConfig, {config}, validation);
  * ```
  */
-export declare const writablesWithDefault: <T extends object, U extends object = T>(defConfig: T, config?: PropsConfig<U> | undefined, options?: ConfigValidator<T, U> | undefined) => ToWritableSignal<T, U>;
+export declare const writablesWithDefault: <T extends object>(defConfig: T, propsConfig?: PropsConfig<T> | undefined, options?: ConfigValidator<T> | undefined) => ToWritableSignal<T>;
 /**
  * Shortcut for calling both {@link writablesWithDefault} and {@link createPatch} in one call.
  * @param defConfig - object containing, for each property, a default value to use in case `config` does not provide the suitable default
  * value for that property
- * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * @param propsConfig - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
  * for each property of `defConfig` either a store containing the default value or the default value itself
  * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
  * @returns an array with two items: the first one containing the writables (returned by {@link writablesWithDefault}),
@@ -129,12 +155,23 @@ export declare const writablesWithDefault: <T extends object, U extends object =
  * const [{propA$, propB$}, patch] = writablesForProps(defConfig, config, validation);
  * ```
  */
-export declare const writablesForProps: <T extends object, U extends object = T>(defConfig: T, config?: PropsConfig<U> | undefined, options?: { [K in keyof T & keyof U]?: WritableWithDefaultOptions<T[K], U[K]> | undefined; } | undefined) => [ToWritableSignal<T, U>, <U_1 extends Partial<T>>(storesValues?: void | U_1 | undefined) => void];
-export type PropsConfig<T extends object> = ReadableSignal<Partial<T>> | ValuesOrStores<T>;
+export declare const writablesForProps: <T extends object>(defConfig: T, propsConfig?: PropsConfig<T> | undefined, options?: { [K in keyof T]?: WritableWithDefaultOptions<T[K]> | undefined; } | undefined) => [ToWritableSignal<T>, <U extends Partial<T>>(storesValues?: void | U | undefined) => void];
+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 declare const stateStores: <A extends {
     [x: `${string}$`]: ReadableSignal<any>;
 }>(inputStores: A) => {
     state$: ReadableSignal<ToState<A>>;
     stores: { [key in `${string}$` & keyof A]: ReadableSignal<ValueOfStore<A[key]>>; };
 };
-export declare const bindableDerived: <T, U extends [WritableSignal<T, T>, ...StoreInput<any>[]]>(onChange$: ReadableSignal<(value: T) => void>, stores: U, adjustValue: (arg: StoresInputValues<U>) => T) => 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) => ReadableSignal<T>;

package/services/stores.js

@@ -1,4 +1,4 @@
-import { batch, computed, derived, get, readable, writable, asReadable } from '@amadeus-it-group/tansu';
+import { asReadable, batch, computed, derived, get, readable, writable } from '@amadeus-it-group/tansu';
 import { identity } from '../utils';
 /**
  *
@@ -60,7 +60,6 @@ const update = function (updater) {
     this.set(updater(this()));
 };
 export const INVALID_VALUE = Symbol();
-/* eslint-disable jsdoc/check-param-names, jsdoc/require-param */
 /**
  * Returns a writable store whose value is either its own value (when it is not undefined) or a default value
  * that comes either from the `config$` store (when it is not undefined) or from `defValue`.
@@ -70,41 +69,81 @@ export const INVALID_VALUE = Symbol();
  * `set` or `update` functions), or the `defValue` is used instead (if the invalid value comes from the `config$` store).
  *
  * @param defValue - Default value used when both the own value and the config$ value are undefined.
- * @param config$ - Default value used when the own value is undefined
+ * @param config$ - Store containing the default value used when the own value is undefined
  * @param options - Object which can contain the following optional functions: normalizeValue and equal
+ * @param own$ - Store containing the own value
  * @returns a writable store with the extra default value and normalization logic described above
  */
-export function writableWithDefault(defValue, config$ = readable(undefined), { normalizeValue = identity, equal = Object.is } = {}) {
-    const own$ = writable(undefined);
-    const validatedDefConfig$ = computed(() => {
-        const value = config$();
+export function writableWithDefault(defValue, config$ = readable(undefined), options = {}, own$ = writable(undefined)) {
+    const { normalizeValue = identity, equal = Object.is } = options;
+    const getDefValue = () => defValue;
+    const callNormalizeValue = (value, defValue = getDefValue) => {
         const normalizedValue = value === undefined ? undefined : normalizeValue(value);
         if (normalizedValue === INVALID_VALUE) {
-            console.error('Not using invalid value from default config', value);
-            return defValue;
+            console.error('Not using invalid value', value);
+            return defValue();
         }
         if (normalizedValue === undefined) {
-            return defValue;
+            return defValue();
         }
         return normalizedValue;
-    }, { equal });
-    return asReadable(computed(() => {
-        const ownValue = own$();
-        return ownValue !== undefined ? ownValue : validatedDefConfig$();
-    }, { equal }), {
+    };
+    const validatedDefConfig$ = computed(() => callNormalizeValue(config$()), { equal });
+    const validatedOwnValue$ = computed(() => callNormalizeValue(own$(), validatedDefConfig$), { equal });
+    return asReadable(validatedOwnValue$, {
         set(value) {
-            const normalizedValue = value === undefined ? undefined : normalizeValue(value);
-            if (normalizedValue === INVALID_VALUE) {
-                console.error('Not setting invalid value', value);
-            }
-            else {
-                own$.set(normalizedValue);
+            if (value !== undefined) {
+                const normalizedValue = normalizeValue(value);
+                if (normalizedValue === INVALID_VALUE) {
+                    console.error('Not setting invalid value', value);
+                    return;
+                }
+                value = normalizedValue;
             }
+            own$.set(value);
         },
         update,
     });
 }
-const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
+/**
+ * Returns true if the provided argument is a store (ReadableSignal).
+ * @param x - argument that is tested
+ * @returns true if the argument is a store (ReadableSignal)
+ */
+export const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
+/**
+ * If the provided argument is already a store, it is returned as is, otherwise, a readable store is created with the provided argument as its initial value.
+ * @param x - either a store or a simple value
+ * @returns either x if x is already a store, or readable(x) otherwise
+ */
+export const toReadableStore = (x) => (isStore(x) ? x : readable(x));
+/**
+ * If the provided argument is already a store, it is returned as is, otherwise, a writable store is created with the provided argument as its initial value.
+ * @param x - either a writable store or a simple value
+ * @returns either x if x is already a store, or writable(x) otherwise
+ */
+export const toWritableStore = (x) => (isStore(x) ? x : writable(x));
+export const normalizeConfigStores = (keys, config) => {
+    const res = {};
+    if (config) {
+        const configIsStore = isStore(config);
+        for (const key of keys) {
+            res[key] = configIsStore
+                ? computed(() => config()[key])
+                : toReadableStore(config[key]);
+        }
+    }
+    return res;
+};
+export const mergeConfigStores = (keys, config1, config2) => {
+    const res = {};
+    for (const key of keys) {
+        const config1Store = config1?.[key];
+        const config2Store = config2?.[key];
+        res[key] = config1Store && config2Store ? computed(() => config1Store() ?? config2Store()) : config1Store || config2Store;
+    }
+    return res;
+};
 /**
  * Returns an object containing, for each property of `defConfig`, a corresponding writable with the normalization and default value logic
  * described in {@link writableWithDefault}. Keys in the returned object are the same as the ones present in `defConfig`,
@@ -112,8 +151,7 @@ const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
  *
  * @param defConfig - object containing, for each property, a default value to use in case `config$` does not provide the suitable default
  * value for that property
- * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
- * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param propsConfig - object defining the config and props
  * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
  * @returns an object containing writables
  *
@@ -121,8 +159,8 @@ const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
  * ```ts
  * const defConfig = {propA: 1};
  * const validation = {propA: {normalizeValue: value => +value}};
- * const config$ = writable({propA: 5});
- * const {propA$} = writablesWithDefault(defConfig, config$, validation);
+ * const config = writable({propA: 5});
+ * const {propA$} = writablesWithDefault(defConfig, {config}, validation);
  * ```
  *
  * @example With an object containing a value and a store
@@ -130,19 +168,17 @@ const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
  * const defConfig = {propA: 1, propB: 2};
  * const validation = {propA: {normalizeValue: value => +value}};
  * const config = {propA: 5, propB: writable(3)};
- * const {propA$, propB$} = writablesWithDefault(defConfig, config, validation);
+ * const {propA$, propB$} = writablesWithDefault(defConfig, {config}, validation);
  * ```
  */
-export const writablesWithDefault = (defConfig, config, options) => {
+export const writablesWithDefault = (defConfig, propsConfig, options) => {
     const res = {};
-    const configIsStore = isStore(config);
-    for (const key of Object.keys(defConfig)) {
-        let store = configIsStore ? computed(() => config()[key]) : undefined;
-        if (!configIsStore && config) {
-            const value = config[key];
-            store = isStore(value) ? value : readable(value);
-        }
-        res[`${key}$`] = writableWithDefault(defConfig[key], store, options?.[key]);
+    const keys = Object.keys(defConfig);
+    const configStores = normalizeConfigStores(keys, propsConfig?.config);
+    const props = propsConfig?.props;
+    for (const key of keys) {
+        const propValue = props?.[key];
+        res[`${key}$`] = writableWithDefault(defConfig[key], configStores[key], options?.[key], toWritableStore(propValue));
     }
     return res;
 };
@@ -150,7 +186,7 @@ export const writablesWithDefault = (defConfig, config, options) => {
  * Shortcut for calling both {@link writablesWithDefault} and {@link createPatch} in one call.
  * @param defConfig - object containing, for each property, a default value to use in case `config` does not provide the suitable default
  * value for that property
- * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * @param propsConfig - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
  * for each property of `defConfig` either a store containing the default value or the default value itself
  * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
  * @returns an array with two items: the first one containing the writables (returned by {@link writablesWithDefault}),
@@ -172,8 +208,8 @@ export const writablesWithDefault = (defConfig, config, options) => {
  * const [{propA$, propB$}, patch] = writablesForProps(defConfig, config, validation);
  * ```
  */
-export const writablesForProps = (defConfig, config, options) => {
-    const stores = writablesWithDefault(defConfig, config, options);
+export const writablesForProps = (defConfig, propsConfig, options) => {
+    const stores = writablesWithDefault(defConfig, propsConfig, options);
     return [stores, createPatch(stores)];
 };
 export const stateStores = (inputStores) => {
@@ -200,20 +236,23 @@ export const stateStores = (inputStores) => {
         }),
     };
 };
-export const bindableDerived = (onChange$, stores, adjustValue) => {
+export const bindableDerived = (onChange$, stores, adjustValue, equal = (currentValue, newValue) => newValue === currentValue) => {
     let currentValue = stores[0]();
-    return derived(stores, (values) => {
-        const newValue = adjustValue(values);
-        const rectifiedValue = newValue !== values[0];
-        if (rectifiedValue) {
-            stores[0].set(newValue);
-        }
-        if (rectifiedValue || newValue !== currentValue) {
-            currentValue = newValue;
-            // TODO check if we should do this async to avoid issue
-            // with angular and react only when rectifiedValue is true?
-            onChange$()(newValue);
-        }
-        return newValue;
+    return derived(stores, {
+        derive(values) {
+            const newValue = adjustValue(values);
+            const rectifiedValue = !equal(values[0], newValue);
+            if (rectifiedValue) {
+                stores[0].set(newValue);
+            }
+            if (rectifiedValue || !equal(currentValue, newValue)) {
+                currentValue = newValue;
+                // TODO check if we should do this async to avoid issue
+                // with angular and react only when rectifiedValue is true?
+                onChange$()(newValue);
+            }
+            return newValue;
+        },
+        equal,
     });
 };

package/services/writables.d.ts

@@ -3,5 +3,6 @@ import { INVALID_VALUE } from './stores';
 export declare const testToNormalizeValue: <T>(filter: (value: T) => boolean) => (value: T) => typeof INVALID_VALUE | T;
 export declare const typeNumber: WritableWithDefaultOptions<number>;
 export declare const typeBoolean: WritableWithDefaultOptions<boolean>;
-export declare const typeString: WritableWithDefaultOptions<string, any>;
+export declare const typeString: WritableWithDefaultOptions<string>;
 export declare const typeFunction: WritableWithDefaultOptions<(...args: any[]) => any>;
+export declare const typeArray: WritableWithDefaultOptions<any[]>;

package/services/writables.js

@@ -1,4 +1,4 @@
-import { isBoolean, isFunction, isNumber, isString } from './checks';
+import { isArray, isBoolean, isFunction, isNumber, isString } from './checks';
 import { INVALID_VALUE } from './stores';
 export const testToNormalizeValue = (filter) => (value) => filter(value) ? value : INVALID_VALUE;
 export const typeNumber = {
@@ -14,3 +14,17 @@ export const typeFunction = {
     normalizeValue: testToNormalizeValue(isFunction),
     equal: Object.is,
 };
+export const typeArray = {
+    normalizeValue: testToNormalizeValue(isArray),
+    equal: (a, b) => {
+        if (a === b) {
+            return true;
+        }
+        else {
+            if (a?.length !== b?.length) {
+                return false;
+            }
+            return a.every((val, index) => val === b[index]);
+        }
+    },
+};