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

package/package.json

@@ -1,52 +1,38 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless widget library.",
-	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"keywords": [
 		"headless",
 		"agnostic",
 		"components",
 		"widgets",
+		"accordion",
 		"alert",
 		"modal",
 		"pagination",
 		"rating"
 	],
 	"type": "module",
-	"main": "./dist/lib/index.js",
-	"module": "./dist/lib/index.js",
-	"types": "./dist/lib/index.d.ts",
+	"main": "./index.js",
+	"module": "./index.js",
+	"types": "./index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/lib/index.d.ts",
-			"default": "./dist/lib/index.js"
+			"types": "./index.d.ts",
+			"default": "./index.js"
 		}
 	},
-	"scripts": {
-		"build": "npm run build:lib && npm run build:tsc && npm run build:api-extractor",
-		"build:lib": "node ../scripts/rm.js dist/lib && tsc -p tsconfig.lib.json",
-		"build:tsc": "tsc",
-		"build:api-extractor": "api-extractor run",
-		"test": "vitest run",
-		"tdd": "vitest",
-		"tdd:ui": "vitest --ui",
-		"test:coverage": "vitest run --coverage"
-	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.22"
+		"@amadeus-it-group/tansu": "0.0.23"
 	},
-	"files": [
-		"dist/lib"
-	],
-	"license": "MIT",
+	"sideEffects": false,
+	"version": "v0.0.1-alpha.2",
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
-		"directory": "core"
-	},
-	"devDependencies": {
-		"eslint-plugin-jsdoc": "^46.4.6"
-	},
-	"version": "0.0.1-alpha.0"
-}
+		"directory": "core/lib"
+	}
+}

package/{dist/lib/pagination.d.ts → pagination.d.ts}

@@ -1,5 +1,6 @@
 import type { PropsConfig } from './services';
 import type { Widget, SlotContent, WidgetSlotContext } from './types';
+import type { WidgetsCommonPropsAndState } from './commonProps';
 /**
  * A type for the slot context of the pagination widget
  */
@@ -13,7 +14,7 @@ export interface PaginationNumberContext extends PaginationContext {
      */
     displayedPage: number;
 }
-export interface PaginationCommonPropsAndState {
+export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The current page.
      *
@@ -86,11 +87,6 @@ export interface PaginationCommonPropsAndState {
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * An input to add a custom class to the UL
-     * @defaultValue ''
-     */
-    className: string;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration
@@ -398,11 +394,6 @@ export declare function getPaginationDefaultConfig(): {
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * An input to add a custom class to the UL
-     * @defaultValue ''
-     */
-    className: string;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration
@@ -455,10 +446,11 @@ export declare function getPaginationDefaultConfig(): {
      * @param displayedPage - The current page number
      */
     slotNumberLabel: SlotContent<PaginationNumberContext>;
+    className: string;
 };
 /**
  * Create a PaginationWidget with given config props
- * @param config - an optional alert config
+ * @param config - an optional pagination config
  * @returns a PaginationWidget
  */
 export declare function createPagination(config?: PropsConfig<PaginationProps>): PaginationWidget;

package/{dist/lib/pagination.js → pagination.js}

@@ -64,7 +64,7 @@ const configValidator = {
 };
 /**
  * Create a PaginationWidget with given config props
- * @param config - an optional alert config
+ * @param config - an optional pagination config
  * @returns a PaginationWidget
  */
 export function createPagination(config) {

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/{dist/lib/rating.d.ts → rating.d.ts}

@@ -1,5 +1,6 @@
 import type { PropsConfig } from './services';
 import type { SlotContent, Widget } from './types';
+import type { WidgetsCommonPropsAndState } from './commonProps';
 export interface StarContext {
     /**
      * indicates how much the current star is filled, from 0 to 100
@@ -10,7 +11,7 @@ export interface StarContext {
      */
     index: number;
 }
-export interface RatingCommonPropsAndState {
+export interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The current rating. Could be a decimal value like `3.75`.
      */
@@ -38,10 +39,6 @@ export interface RatingCommonPropsAndState {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * Classname to be applied on the rating container
-     */
-    className: string;
     /**
      * The template to override the way each star is displayed.
      */
@@ -57,7 +54,7 @@ export interface RatingCommonPropsAndState {
 }
 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.
      */
@@ -134,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.
      */
@@ -184,10 +181,6 @@ export declare function getRatingDefaultConfig(): {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * Classname to be applied on the rating container
-     */
-    className: string;
     /**
      * The template to override the way each star is displayed.
      */
@@ -200,6 +193,7 @@ export declare function getRatingDefaultConfig(): {
      * The aria labelled by
      */
     ariaLabelledBy: string;
+    className: string;
 };
 /**
  * Create a RatingWidget with given config props

package/{dist/lib/select.d.ts → select.d.ts}

@@ -1,11 +1,8 @@
 import type { HasFocus } from './services/focustrack';
 import type { PropsConfig } from './services/stores';
 import type { Widget } from './types';
-export interface SelectCommonPropsAndState<Item> {
-    /**
-     * the class to attach to the select DOM element
-     */
-    className: string;
+import type { WidgetsCommonPropsAndState } from './commonProps';
+export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
     /**
      * List of selected items
      */

package/{dist/lib/services → 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/{dist/lib/services → 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/{dist/lib/services → services}/index.d.ts

@@ -1,6 +1,8 @@
 export * from './siblingsInert';
 export * from './directiveUtils';
 export * from './focustrack';
+export * from './intersection';
 export * from './portal';
 export * from './stores';
 export * from './writables';
+export * from './navManager';

package/{dist/lib/services → services}/index.js

@@ -1,6 +1,8 @@
 export * from './siblingsInert';
 export * from './directiveUtils';
 export * from './focustrack';
+export * from './intersection';
 export * from './portal';
 export * from './stores';
 export * from './writables';
+export * from './navManager';

package/services/intersection.d.ts

@@ -0,0 +1,26 @@
+import type { PropsConfig } from './stores';
+export interface IntersectionProps {
+    /**
+     * elements to observe
+     */
+    elements: HTMLElement[];
+    /**
+     * IntersectionObserverInit used in the IntersectionObserver
+     *
+     * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)
+     */
+    options: Partial<IntersectionObserverInit> | undefined;
+}
+export declare const createIntersection: (config?: PropsConfig<IntersectionProps>) => {
+    /**
+     * Readable of observed elements
+     */
+    elements$: import("@amadeus-it-group/tansu").ReadableSignal<HTMLElement[]>;
+    /**
+     * Store of map that contains the visible elements (for the key) and the corresponding entries
+     *
+     * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+     */
+    visibleElements$: import("@amadeus-it-group/tansu").ReadableSignal<Map<Element, IntersectionObserverEntry>>;
+    patch: <U extends Partial<IntersectionProps>>(storesValues?: void | U | undefined) => void;
+};

package/services/intersection.js

@@ -0,0 +1,47 @@
+import { asReadable, derived } from '@amadeus-it-group/tansu';
+import { noop } from '../utils';
+import { writablesForProps } from './stores';
+const defaultValues = {
+    elements: [],
+    options: undefined,
+};
+export const createIntersection = (config) => {
+    const [{ elements$, options$ }, patch] = writablesForProps(defaultValues, config);
+    const visibleElements$ = derived([elements$, options$], ([elements, options], set) => {
+        if (elements.length) {
+            const visibleElements = new Map();
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    const { target, isIntersecting } = entry;
+                    if (isIntersecting) {
+                        visibleElements.set(target, entry);
+                    }
+                    else {
+                        visibleElements.delete(target);
+                    }
+                }
+                set(visibleElements);
+            }, options);
+            for (const element of elements) {
+                observer.observe(element);
+            }
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return noop;
+    }, new Map());
+    return {
+        /**
+         * Readable of observed elements
+         */
+        elements$: asReadable(elements$),
+        /**
+         * Store of map that contains the visible elements (for the key) and the corresponding entries
+         *
+         * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+         */
+        visibleElements$: asReadable(visibleElements$),
+        patch,
+    };
+};

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');
+};