@agnos-ui/core 0.0.1-alpha.0

package/dist/lib/pagination.utils.js

@@ -0,0 +1,110 @@
+// Utility functions
+function _applyPagination(page, maxSize) {
+    const pp = Math.ceil(page / maxSize) - 1;
+    const start = pp * maxSize;
+    // console.log('start', start, 'pp', pp, 'page', page, 'maxSize', maxSize);
+    const end = start + maxSize;
+    return [start, end];
+}
+/**
+ * Appends ellipses and first/last page number to the displayed pages
+ * @param start - the first page number
+ * @param end - the last page number
+ * @param ellipses - apply ellipses
+ * @param pages - the pages to apply the function to
+ * @param pageCount - the total number of pages
+ */
+function _applyEllipses(start, end, ellipses, pages, pageCount) {
+    if (ellipses) {
+        if (start > 0) {
+            // The first page will always be included. If the displayed range
+            // starts after the third page, then add ellipsis. But if the range
+            // starts on the third page, then add the second page instead of
+            // an ellipsis, because the ellipsis would only hide a single page.
+            if (start > 2) {
+                pages.unshift(-1);
+            }
+            else if (start === 2) {
+                pages.unshift(2);
+            }
+            pages.unshift(1);
+        }
+        if (end < pageCount) {
+            // The last page will always be included. If the displayed range
+            // ends before the third-last page, then add ellipsis. But if the range
+            // ends on third-last page, then add the second-last page instead of
+            // an ellipsis, because the ellipsis would only hide a single page.
+            if (end < pageCount - 2) {
+                pages.push(-1);
+            }
+            else if (end === pageCount - 2) {
+                pages.push(pageCount - 1);
+            }
+            pages.push(pageCount);
+        }
+    }
+}
+/**
+ * Rotates page numbers based on maxSize items visible.
+ * Currently selected page stays in the middle:
+ *
+ * Ex. for selected page = 6:
+ * [5,*6*,7] for maxSize = 3
+ * [4,5,*6*,7] for maxSize = 4
+ *
+ * @param page - the page number
+ * @param maxSize - the max size
+ * @param pageCount - the page count
+ * @returns the rotated page numbers
+ */
+function _applyRotation(page, maxSize, pageCount) {
+    let start = 0;
+    let end = pageCount;
+    const leftOffset = Math.floor(maxSize / 2);
+    const rightOffset = maxSize % 2 === 0 ? leftOffset - 1 : leftOffset;
+    if (page <= leftOffset) {
+        // very beginning, no rotation -> [0..maxSize]
+        end = maxSize;
+    }
+    else if (pageCount - page < leftOffset) {
+        // very end, no rotation -> [len-maxSize..len]
+        start = pageCount - maxSize;
+    }
+    else {
+        // rotate
+        start = page - leftOffset - 1;
+        end = page + rightOffset;
+    }
+    return [start, end];
+}
+/**
+ * This is the pagination algorithm used by ng-bootstrap. While this is not the default implementation of our widget, we export it to ease the migration from ng-bootstrap pagination.
+ * @param maxSize - the max size
+ * @param rotate - rotate the pages
+ * @param ellipses - enable ellipses
+ * @returns the pages
+ */
+export function ngBootstrapPagination(maxSize, rotate, ellipses) {
+    return function (page, pageCount) {
+        let pages = [];
+        for (let i = 1; i <= pageCount; i++) {
+            pages.push(i);
+        }
+        // apply maxSize if necessary
+        if (maxSize > 0 && pageCount > maxSize) {
+            let start = 0;
+            let end = pageCount;
+            // either paginating or rotating page numbers
+            if (rotate) {
+                [start, end] = _applyRotation(page, maxSize, pageCount);
+            }
+            else {
+                [start, end] = _applyPagination(page, maxSize);
+            }
+            pages = pages.slice(start, end);
+            // adding ellipses
+            _applyEllipses(start, end, ellipses, pages, pageCount);
+        }
+        return pages;
+    };
+}

package/dist/lib/rating.d.ts

@@ -0,0 +1,209 @@
+import type { PropsConfig } from './services';
+import type { SlotContent, Widget } from './types';
+export interface StarContext {
+    /**
+     * indicates how much the current star is filled, from 0 to 100
+     */
+    fill: number;
+    /**
+     * the position of the star in the rating
+     */
+    index: number;
+}
+export interface RatingCommonPropsAndState {
+    /**
+     * The current rating. Could be a decimal value like `3.75`.
+     */
+    rating: number;
+    /**
+     * The maximum rating that can be given.
+     */
+    maxRating: number;
+    /**
+     * If `true`, the rating is disabled.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the rating can't be changed.
+     */
+    readonly: boolean;
+    /**
+     * Define if the rating can be reset.
+     *
+     * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
+     */
+    resettable: boolean;
+    /**
+     * Allows setting a custom rating tabindex.
+     * 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.
+     */
+    slotStar: SlotContent<StarContext>;
+    /**
+     * The aria label
+     */
+    ariaLabel: string;
+    /**
+     * The aria labelled by
+     */
+    ariaLabelledBy: string;
+}
+export interface RatingProps extends RatingCommonPropsAndState {
+    /**
+     * Return the value for the 'aria-value' attribute.
+     * @param rating - Current rating value.
+     * @param maxRating - maxRating value.
+     */
+    ariaValueTextFn: (rating: number, maxRating: number) => string;
+    /**
+     * An event emitted when the rating is changed.
+     *
+     * Event payload is equal to the newly selected rating.
+     */
+    onRatingChange: (rating: number) => void;
+    /**
+     * An event emitted when the user is hovering over a given rating.
+     *
+     * Event payload is equal to the rating being hovered over.
+     */
+    onHover: (rating: number) => void;
+    /**
+     * An event emitted when the user stops hovering over a given rating.
+     *
+     * Event payload is equal to the rating of the last item being hovered over.
+     */
+    onLeave: (rating: number) => void;
+}
+export interface RatingState extends RatingCommonPropsAndState {
+    /**
+     * the aria value of the rating
+     */
+    ariaValueText: string;
+    /**
+     * the visible value of the rating (it changes when hovering over the rating even though the real value did not change)
+     */
+    visibleRating: number;
+    /**
+     * is the rating interactive i.e. listening to hover, click and keyboard events
+     */
+    isInteractive: boolean;
+    /**
+     * the list of stars
+     */
+    stars: StarContext[];
+}
+export interface RatingActions {
+    /**
+     * Method to be used when a star is clicked.
+     *
+     * To be used in the onclick event of a star
+     * @param index - Star index, starting from 1
+     */
+    click(index: number): void;
+    /**
+     * Method to be used when the mouse enter in a star.
+     *
+     * To be used in the onmouseenter of a star
+     * @param index - Star index, starting from 1
+     */
+    hover(index: number): void;
+    /**
+     * Method to be used when the mouse leave the widget.
+     *
+     * To be used in the onmouseleave of the rating container
+     */
+    leave(): void;
+    /**
+     * Method to be used to handle the keyboard.
+     *
+     * To be used in the onkeydown of the rating container
+     */
+    handleKey(event: KeyboardEvent): void;
+}
+export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions>;
+/**
+ * Returns a shallow copy of the default rating config.
+ * @returns a copy of the default config
+ */
+export declare function getRatingDefaultConfig(): {
+    /**
+     * Return the value for the 'aria-value' attribute.
+     * @param rating - Current rating value.
+     * @param maxRating - maxRating value.
+     */
+    ariaValueTextFn: (rating: number, maxRating: number) => string;
+    /**
+     * An event emitted when the rating is changed.
+     *
+     * Event payload is equal to the newly selected rating.
+     */
+    onRatingChange: (rating: number) => void;
+    /**
+     * An event emitted when the user is hovering over a given rating.
+     *
+     * Event payload is equal to the rating being hovered over.
+     */
+    onHover: (rating: number) => void;
+    /**
+     * An event emitted when the user stops hovering over a given rating.
+     *
+     * Event payload is equal to the rating of the last item being hovered over.
+     */
+    onLeave: (rating: number) => void;
+    /**
+     * The current rating. Could be a decimal value like `3.75`.
+     */
+    rating: number;
+    /**
+     * The maximum rating that can be given.
+     */
+    maxRating: number;
+    /**
+     * If `true`, the rating is disabled.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the rating can't be changed.
+     */
+    readonly: boolean;
+    /**
+     * Define if the rating can be reset.
+     *
+     * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
+     */
+    resettable: boolean;
+    /**
+     * Allows setting a custom rating tabindex.
+     * 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.
+     */
+    slotStar: SlotContent<StarContext>;
+    /**
+     * The aria label
+     */
+    ariaLabel: string;
+    /**
+     * The aria labelled by
+     */
+    ariaLabelledBy: string;
+};
+/**
+ * Create a RatingWidget with given config props
+ * @param config - an optional alert config
+ * @returns a RatingWidget
+ */
+export declare function createRating(config?: PropsConfig<RatingProps>): RatingWidget;

package/dist/lib/rating.js

@@ -0,0 +1,141 @@
+import { computed, writable } from '@amadeus-it-group/tansu';
+import { INVALID_VALUE, bindableDerived, stateStores, writablesForProps } from './services';
+import { isNumber } from './services/checks';
+import { typeBoolean, typeFunction, typeNumber, typeString } from './services/writables';
+// TODO use getValueInRange
+function adjustRating(rating, maxRating) {
+    return Math.max(Math.min(rating, maxRating), 0);
+}
+const noop = () => { };
+const defaultConfig = {
+    rating: 0,
+    tabindex: 0,
+    maxRating: 10,
+    disabled: false,
+    readonly: false,
+    resettable: true,
+    ariaValueTextFn: (rating, maxRating) => `${rating} out of ${maxRating}`,
+    onHover: noop,
+    onLeave: noop,
+    onRatingChange: noop,
+    className: '',
+    slotStar: ({ fill }) => String.fromCharCode(fill === 100 ? 9733 : 9734),
+    ariaLabel: 'Rating',
+    ariaLabelledBy: '',
+};
+/**
+ * Returns a shallow copy of the default rating config.
+ * @returns a copy of the default config
+ */
+export function getRatingDefaultConfig() {
+    return { ...defaultConfig };
+}
+// TODO export normalize function in utils and test them.
+const configValidator = {
+    rating: typeNumber,
+    tabindex: typeNumber,
+    maxRating: { normalizeValue: (value) => (isNumber(value) ? Math.max(0, value) : INVALID_VALUE) },
+    disabled: typeBoolean,
+    readonly: typeBoolean,
+    resettable: typeBoolean,
+    ariaValueTextFn: typeFunction,
+    onHover: typeFunction,
+    onLeave: typeFunction,
+    onRatingChange: typeFunction,
+    className: typeString,
+    ariaLabel: typeString,
+    ariaLabelledBy: typeString,
+};
+/**
+ * Create a RatingWidget with given config props
+ * @param config - an optional alert config
+ * @returns a RatingWidget
+ */
+export function createRating(config) {
+    const [{ 
+    // dirty inputs that need adjustment:
+    rating$: _dirtyRating$, tabindex$: _dirtyTabindex$, 
+    // clean inputs with value validation:
+    ariaValueTextFn$, onHover$, onLeave$, onRatingChange$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
+    const { maxRating$, disabled$, readonly$, resettable$ } = stateProps;
+    // clean inputs adjustment to valid range
+    const tabindex$ = computed(() => (disabled$() ? -1 : _dirtyTabindex$()));
+    const rating$ = bindableDerived(onRatingChange$, [_dirtyRating$, maxRating$], ([dirtyRating, maxRating]) => adjustRating(dirtyRating, maxRating));
+    // internal inputs
+    const _hoveredRating$ = writable(0);
+    // computed
+    const isInteractive$ = computed(() => !disabled$() && !readonly$());
+    const visibleRating$ = computed(() => {
+        const rating = rating$(); // call rating unconditionnally (for the bindableDerived to stay active)
+        const hoveredRating = _hoveredRating$();
+        return hoveredRating !== 0 ? hoveredRating : rating;
+    });
+    const ariaValueText$ = computed(() => ariaValueTextFn$()(visibleRating$(), maxRating$()));
+    const stars$ = computed(() => {
+        const visibleRating = visibleRating$();
+        return Array.from({ length: maxRating$() }, (_v, i) => ({
+            fill: Math.round(Math.max(Math.min(visibleRating - i, 1), 0) * 100),
+            index: i,
+        }));
+    });
+    return {
+        ...stateStores({
+            ariaValueText$,
+            isInteractive$,
+            rating$,
+            stars$,
+            tabindex$,
+            visibleRating$,
+            ...stateProps,
+        }),
+        patch,
+        actions: {
+            click: (index) => {
+                if (isInteractive$() && index > 0 && index <= maxRating$()) {
+                    patch({ rating: rating$() === index && resettable$() ? 0 : index });
+                }
+            },
+            hover: (index) => {
+                if (isInteractive$() && index > 0 && index <= maxRating$()) {
+                    _hoveredRating$.set(index);
+                    onHover$()(index);
+                }
+            },
+            leave: () => {
+                if (isInteractive$()) {
+                    onLeave$()(_hoveredRating$());
+                    _hoveredRating$.set(0);
+                }
+            },
+            handleKey(event) {
+                if (isInteractive$()) {
+                    const { key } = event;
+                    switch (key) {
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            patch({ rating: rating$() - 1 });
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            patch({ rating: rating$() + 1 });
+                            break;
+                        case 'Home':
+                        case 'PageDown':
+                            patch({ rating: 0 });
+                            break;
+                        case 'End':
+                        case 'PageUp':
+                            patch({ rating: maxRating$() });
+                            break;
+                        default:
+                            return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            },
+        },
+        directives: {},
+        api: {},
+    };
+}

package/dist/lib/select.d.ts

@@ -0,0 +1,199 @@
+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;
+    /**
+     * List of selected items
+     */
+    selected: Item[];
+    /**
+     * Filtered text to be display in the filter input
+     */
+    filterText: string;
+    /**
+     * true if the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * true if the select is open
+     */
+    opened: boolean;
+    /**
+     * true if a loading process is being done
+     */
+    loading: boolean;
+}
+export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
+    /**
+     * List of available items for the dropdown
+     */
+    items: T[];
+    /**
+     * Custom function to filter an item.
+     * By default, item is considered as a string, and the function returns true if the text is found
+     */
+    matchFn(item: T, text: string): boolean;
+    /**
+     * Custom function to get the id of an item
+     * By default, the item is returned
+     */
+    itemId(item: T): string;
+    /**
+     * Callback called when the text filter change
+     * @param text - Filtered text
+     */
+    onFilterTextChange?(text: string): void;
+}
+/**
+ * Item representation built from the items provided in parameters
+ */
+export interface ItemCtx<T> {
+    /**
+     * Original item given in the parameters
+     */
+    item: T;
+    /**
+     * Unique id to identify the item
+     */
+    id: string;
+    /**
+     * Specify if the item is checked
+     */
+    selected: boolean;
+    /**
+     * Select the item
+     */
+    select(): void;
+    /**
+     * Unselect the item
+     */
+    unselect(): void;
+    /**
+     * Toggle the item selection
+     */
+    toggle(): void;
+}
+export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
+    /**
+     * List of visible items displayed in the menu
+     */
+    visible: ItemCtx<Item>[];
+    /**
+     * Highlighted item context.
+     * It is designed to define the highlighted item in the dropdown menu
+     */
+    highlighted: ItemCtx<Item> | undefined;
+}
+export interface SelectApi<Item> {
+    /**
+     * Clear all the selected items
+     */
+    clear(): void;
+    /**
+     * Clear the filter text
+     */
+    clearText(): void;
+    /**
+     * Highlight the given item, if there is a corresponding match among the visible list
+     */
+    highlight(item: Item): void;
+    /**
+     * Highlight the first item among the visible list
+     */
+    highlightFirst(): void;
+    /**
+     * Highlight the previous item among the visible list
+     * Loop to the last item if needed
+     */
+    highlightPrevious(): void;
+    /**
+     * Highlight the next item among the visible list.
+     * Loop to the first item if needed
+     */
+    highlightNext(): void;
+    /**
+     * Highlight the last item among the visible list
+     */
+    highlightLast(): void;
+    /**
+     * Focus the provided item among the selected list.
+     * The focus feature is designed to know what item must be focused in the UI, i.e. among the badge elements.
+     */
+    focus(item: Item): void;
+    /**
+     * Focus the first element
+     */
+    focusFirst(): void;
+    /**
+     * Focus the previous element. If no element was focused before the call, nothing happens.
+     */
+    focusPrevious(): void;
+    /**
+     * Focus the next element. If no element was focused before the call, nothing happens.
+     */
+    focusNext(): void;
+    /**
+     * Focus the last element. If no element was focused before the call, nothing happens.
+     */
+    focusLast(): void;
+    /**
+     * Select the provided item.
+     * The selected list is used to
+     * @param item - the item to select
+     */
+    select(item: Item): void;
+    /**
+     * Unselect the provided item.
+     * @param item - the item to unselect
+     */
+    unselect(item: Item): void;
+    /**
+     * Toggle the selection of an item
+     * @param item - the item to toggle
+     * @param selected - an optional boolean to enforce the selected/unselected state instead of toggling
+     */
+    toggleItem(item: Item, selected?: boolean): void;
+    /**
+     * open the select
+     */
+    open(): void;
+    /**
+     * close the select
+     */
+    close(): void;
+    /**
+     * Toggle the dropdown menu
+     * @param isOpen - If specified, set the menu in the defined state.
+     */
+    toggle(isOpen?: boolean): void;
+}
+export interface SelectDirectives {
+    /**
+     * Directive to be used in the input group and the menu containers
+     */
+    hasFocusDirective: HasFocus['directive'];
+}
+export interface SelectActions {
+    /**
+     * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
+     */
+    onInput: (e: {
+        target: any;
+    }) => void;
+    /**
+     * Method to be plugged to on an keydown event, in order to control the keyboard interactions with the highlighted item.
+     * It manages arrow keys to move the highlighted item, or enter to toggle the item.
+     */
+    onInputKeydown: (e: any) => void;
+}
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions, SelectDirectives>;
+/**
+ * Create a SelectWidget with given config props
+ * @param config - an optional alert config
+ * @returns a SelectWidget
+ */
+export declare function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): SelectWidget<Item>;