@agnos-ui/core 0.1.1 → 0.3.0

package/components/pagination/pagination.d.ts

@@ -1,18 +1,5 @@
-import type { PropsConfig, Widget, SlotContent, WidgetSlotContext } from '../../types';
+import type { PropsConfig, Widget, Directive } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
-/**
- * A type for the slot context of the pagination widget
- */
-export type PaginationContext = WidgetSlotContext<PaginationWidget>;
-/**
- * A type for the slot context of the pagination widget when the slot is the number label
- */
-export interface PaginationNumberContext extends PaginationContext {
-    /**
-     * Displayed page
-     */
-    displayedPage: number;
-}
 export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The current page.
@@ -71,6 +58,13 @@ export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndStat
      * @defaultValue 'Action link for last page'
      */
     ariaLastLabel: string;
+    /**
+     * The label for the "Ellipsis" page.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     * @defaultValue 'Ellipsis page element'
+     */
+    ariaEllipsisLabel: string;
     /**
      * If `true`, pagination links will be disabled.
      * @defaultValue false
@@ -86,58 +80,6 @@ export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndStat
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * The template to use for the ellipsis slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '…'
-     */
-    slotEllipsis: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the first slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '«'
-     */
-    slotFirst: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the previous slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '‹'
-     */
-    slotPrevious: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the next slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '›'
-     */
-    slotNext: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the last slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '»'
-     */
-    slotLast: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the pages slot
-     * To use to customize the pages view
-     * override any configuration parameters provided for this
-     */
-    slotPages: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the number slot
-     * override any configuration parameters provided for this
-     * for I18n, we suggest to use the global configuration
-     * @defaultValue
-     * ```ts
-     * ({displayedPage}) => `${displayedPage}`
-     * ```
-     * @param displayedPage - The current page number
-     */
-    slotNumberLabel: SlotContent<PaginationNumberContext>;
 }
 export interface PaginationProps extends PaginationCommonPropsAndState {
     /**
@@ -201,6 +143,39 @@ export interface PaginationProps extends PaginationCommonPropsAndState {
      * ```
      */
     ariaPageLabel: (processPage: number, pageCount: number) => string;
+    /**
+     * Provide the label for the aria-live element
+     * This is used for accessibility purposes.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     * @param currentPage - The current page number
+     * @param pageCount - The total number of pages
+     * @defaultValue
+     * ```ts
+     * ({currentPage, pageCount}) => `Current page is ${currentPage}`
+     * ```
+     */
+    ariaLiveLabel: (currentPage: number, pageCount: number) => string;
+    /**
+     * Factory function providing the href for a "Page" page anchor,
+     * based on the current page number
+     * @param pageNumber - The index to use in the link
+     * @defaultValue
+     * ```ts
+     * (_pageNumber) => '#'
+     * ```
+     */
+    pageLink: (pageNumber: number) => string;
+}
+export interface DirectionsHrefs {
+    /**
+     * The href for the 'Previous' navigation link
+     */
+    previous: string;
+    /**
+     * The href for the 'Next' direction link
+     */
+    next: string;
 }
 export interface PaginationState extends PaginationCommonPropsAndState {
     /**
@@ -223,38 +198,64 @@ export interface PaginationState extends PaginationCommonPropsAndState {
      * The label for each "Page" page link.
      */
     pagesLabel: string[];
+    /** The hrefs for each "Page" page link */
+    pagesHrefs: string[];
+    /** The hrefs for the direction links  */
+    directionsHrefs: DirectionsHrefs;
+    /** The aria-live text */
+    ariaLiveLabelText: string;
 }
 export interface PaginationActions {
     /**
      * To "go" to a specific page
      * @param page - The page number to select
      */
-    select(page: number): void;
+    select(page: number, event?: MouseEvent): void;
     /**
      * To "go" to the first page
      */
-    first(): void;
+    first(event?: MouseEvent): void;
     /**
      * To "go" to the previous page
      */
-    previous(): void;
+    previous(event?: MouseEvent): void;
     /**
      * To "go" to the next page
      */
-    next(): void;
+    next(event?: MouseEvent): void;
     /**
      * To "go" to the last page
      */
-    last(): void;
+    last(event?: MouseEvent): void;
 }
-export interface PaginationApi {
+export interface PaginationDirectives {
+    /**
+     * A directive to be applied to each page link
+     * This will handle the click, tabindex and aria attributes
+     */
+    pageLink: Directive<{
+        page: number;
+    }>;
+    /**
+     * A directive to be applied on the previous link
+     */
+    pagePrev: Directive;
+    /**
+     * A directive to be applied on the first link
+     */
+    pageFirst: Directive;
     /**
-     * If the page number is -1 return true
-     * @param page - The page number to check
+     * A directive to be applied on the next link
      */
-    isEllipsis(page: number): boolean;
+    pageNext: Directive;
+    /**
+     * A directive to be applied on the Last link
+     */
+    pageLast: Directive;
+}
+export interface PaginationApi {
 }
-export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, PaginationActions>;
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, PaginationActions, PaginationDirectives>;
 /**
  * Returns a shallow copy of the default pagination config
  * @returns a copy of the default config
@@ -321,6 +322,29 @@ export declare function getPaginationDefaultConfig(): {
      * ```
      */
     ariaPageLabel: (processPage: number, pageCount: number) => string;
+    /**
+     * Provide the label for the aria-live element
+     * This is used for accessibility purposes.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     * @param currentPage - The current page number
+     * @param pageCount - The total number of pages
+     * @defaultValue
+     * ```ts
+     * ({currentPage, pageCount}) => `Current page is ${currentPage}`
+     * ```
+     */
+    ariaLiveLabel: (currentPage: number, pageCount: number) => string;
+    /**
+     * Factory function providing the href for a "Page" page anchor,
+     * based on the current page number
+     * @param pageNumber - The index to use in the link
+     * @defaultValue
+     * ```ts
+     * (_pageNumber) => '#'
+     * ```
+     */
+    pageLink: (pageNumber: number) => string;
     /**
      * The current page.
      *
@@ -378,6 +402,13 @@ export declare function getPaginationDefaultConfig(): {
      * @defaultValue 'Action link for last page'
      */
     ariaLastLabel: string;
+    /**
+     * The label for the "Ellipsis" page.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     * @defaultValue 'Ellipsis page element'
+     */
+    ariaEllipsisLabel: string;
     /**
      * If `true`, pagination links will be disabled.
      * @defaultValue false
@@ -393,58 +424,6 @@ export declare function getPaginationDefaultConfig(): {
      * @defaultValue false
      */
     boundaryLinks: boolean;
-    /**
-     * The template to use for the ellipsis slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '…'
-     */
-    slotEllipsis: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the first slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '«'
-     */
-    slotFirst: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the previous slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '‹'
-     */
-    slotPrevious: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the next slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '›'
-     */
-    slotNext: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the last slot
-     * for I18n, we suggest to use the global configuration
-     * override any configuration parameters provided for this
-     * @defaultValue '»'
-     */
-    slotLast: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the pages slot
-     * To use to customize the pages view
-     * override any configuration parameters provided for this
-     */
-    slotPages: SlotContent<PaginationContext>;
-    /**
-     * The template to use for the number slot
-     * override any configuration parameters provided for this
-     * for I18n, we suggest to use the global configuration
-     * @defaultValue
-     * ```ts
-     * ({displayedPage}) => `${displayedPage}`
-     * ```
-     * @param displayedPage - The current page number
-     */
-    slotNumberLabel: SlotContent<PaginationNumberContext>;
     className: string;
 };
 /**

package/components/progressbar/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const progressbar = require("../../progressbar-DH7DHYMp.cjs");
+exports.createProgressbar = progressbar.createProgressbar;
+exports.getProgressbarDefaultConfig = progressbar.getProgressbarDefaultConfig;

package/components/progressbar/index.js

@@ -1 +1,5 @@
-export * from './progressbar';
+import { c, g } from "../../progressbar-DuRX7_my.js";
+export {
+  c as createProgressbar,
+  g as getProgressbarDefaultConfig
+};

package/components/progressbar/progressbar.d.ts

@@ -1,6 +1,5 @@
-import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
-export type ProgressbarContext = WidgetSlotContext<ProgressbarWidget>;
 export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * The minimum value.
@@ -21,27 +20,12 @@ export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndSta
      * The aria label.
      */
     ariaLabel: string;
+}
+export interface ProgressbarDirectives {
     /**
-     * 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`.
+     * A directive to be applied to the main container that handles aria attributes.
      */
-    animated: boolean;
+    ariaDirective: Directive;
 }
 export interface ProgressbarState extends ProgressbarCommonPropsAndState {
     /**
@@ -72,7 +56,7 @@ export interface ProgressbarProps extends ProgressbarCommonPropsAndState {
 }
 export interface ProgressbarApi {
 }
-export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, ProgressbarApi, object, object>;
+export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, ProgressbarApi, object, ProgressbarDirectives>;
 /**
  * Retrieve a shallow copy of the default Progressbar config
  * @returns the default Progressbar config

package/components/rating/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const rating = require("../../rating-CmuYUSxy.cjs");
+exports.createRating = rating.createRating;
+exports.getRatingDefaultConfig = rating.getRatingDefaultConfig;

package/components/rating/index.js

@@ -1 +1,5 @@
-export * from './rating';
+import { c, g } from "../../rating-BR5wD7y2.js";
+export {
+  c as createRating,
+  g as getRatingDefaultConfig
+};

package/components/rating/rating.d.ts

@@ -1,4 +1,4 @@
-import type { PropsConfig, SlotContent, Widget } from '../../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
 export interface StarContext {
     /**
@@ -38,10 +38,6 @@ export interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * The template to override the way each star is displayed.
-     */
-    slotStar: SlotContent<StarContext>;
     /**
      * The aria label
      */
@@ -77,6 +73,19 @@ export interface RatingProps extends RatingCommonPropsAndState {
      */
     onLeave: (rating: number) => void;
 }
+export interface RatingDirectives {
+    /**
+     * A directive to be applied to the main container
+     * This will handle the keydown, mouseleave, tabindex and aria attributes
+     */
+    containerDirective: Directive;
+    /**
+     * A directive to be applied on each star element
+     */
+    starDirective: Directive<{
+        index: number;
+    }>;
+}
 export interface RatingState extends RatingCommonPropsAndState {
     /**
      * the aria value of the rating
@@ -89,7 +98,7 @@ export interface RatingState extends RatingCommonPropsAndState {
     /**
      * is the rating interactive i.e. listening to hover, click and keyboard events
      */
-    isInteractive: boolean;
+    interactive: boolean;
     /**
      * the list of stars
      */
@@ -123,7 +132,7 @@ export interface RatingActions {
      */
     handleKey(event: KeyboardEvent): void;
 }
-export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions>;
+export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
 /**
  * Returns a shallow copy of the default rating config.
  * @returns a copy of the default config
@@ -180,10 +189,6 @@ export declare function getRatingDefaultConfig(): {
      * If the component is disabled, `tabindex` will still be set to `-1`.
      */
     tabindex: number;
-    /**
-     * The template to override the way each star is displayed.
-     */
-    slotStar: SlotContent<StarContext>;
     /**
      * The aria label
      */

package/components/select/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const select = require("../../select-CCIKn8WR.cjs");
+exports.createSelect = select.createSelect;
+exports.defaultConfig = select.defaultConfig;
+exports.getSelectDefaultConfig = select.getSelectDefaultConfig;

package/components/select/index.js

@@ -1 +1,6 @@
-export * from './select';
+import { c, d, g } from "../../select-BCs6HQWn.js";
+export {
+  c as createSelect,
+  d as defaultConfig,
+  g as getSelectDefaultConfig
+};

package/components/select/select.d.ts

@@ -1,18 +1,8 @@
 import type { Placement } from '@floating-ui/dom';
 import type { FloatingUI } from '../../services/floatingUI';
 import type { HasFocus } from '../../services/focustrack';
-import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
-/**
- * A type for the slot context of the pagination widget
- */
-export type SelectContext<Item> = WidgetSlotContext<SelectWidget<Item>>;
-export interface SelectItemContext<Item> extends SelectContext<Item> {
-    /**
-     * Contextual data related to an item
-     */
-    itemContext: ItemContext<Item>;
-}
 export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
     /**
      * id used for the input inside the select
@@ -54,16 +44,6 @@ export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndSt
      * true if a loading process is being done
      */
     loading: boolean;
-    /**
-     * The template to override the way each badge on the left of the input is displayed.
-     * This define the content of the badge inside the badge container.
-     */
-    slotBadgeLabel: SlotContent<SelectItemContext<Item>>;
-    /**
-     * The template to override the way each item is displayed in the list.
-     * This define the content of the badge inside the badge container.
-     */
-    slotItem: SlotContent<SelectItemContext<Item>>;
 }
 export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
     /**
@@ -80,6 +60,12 @@ export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
      * By default, the item is returned
      */
     itemIdFn(item: T): string;
+    /**
+     * Retrieves navigable elements within an HTML element containing badges and the input.
+     *
+     * @param node - HTMLElement that contains the badges and the input
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLSpanElement | HTMLInputElement>;
     /**
      * Callback called dropdown open state change
      * @param isOpen - updated open state
@@ -163,27 +149,6 @@ export interface SelectApi<Item> {
      * 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
@@ -215,7 +180,7 @@ export interface SelectApi<Item> {
      */
     toggle(isOpen?: boolean): void;
 }
-export interface SelectDirectives {
+export interface SelectDirectives<Item> {
     /**
      * Directive to be used in the input group and the menu containers
      */
@@ -228,8 +193,24 @@ export interface SelectDirectives {
      * A directive to be applied to the input group element serves as the base for menu positioning
      */
     referenceDirective: FloatingUI['directives']['referenceDirective'];
+    /**
+     * A directive to be applied to the element that contains the badges and the input
+     */
+    inputContainerDirective: Directive;
+    /**
+     * A directive that applies all the necessary attributes to the container badges
+     */
+    badgeAttributesDirective: Directive<ItemContext<Item>>;
+    /**
+     * A directive that applies all the necessary attributes to the dropdown menu
+     */
+    menuAttributesDirective: Directive;
+    /**
+     * A directive that applies all the necessary attributes to the dropdown item
+     */
+    itemAttributesDirective: Directive<ItemContext<Item>>;
 }
-export interface SelectActions {
+export interface SelectActions<Item> {
     /**
      * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
      */
@@ -237,12 +218,23 @@ export interface SelectActions {
         target: any;
     }) => void;
     /**
-     * Method to be plugged to on an keydown event, in order to control the keyboard interactions with the highlighted item.
+     * Method to be attached to the node element to close a badge on click.
+     */
+    onRemoveBadgeClick: (event: MouseEvent, item: Item) => void;
+    /**
+     * Method to be plugged to on an keydown event of the main input, 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;
+    onInputKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.
+     *
+     * @param event - keyboard event
+     * @param item - corresponding item
+     */
+    onBadgeKeydown: (event: KeyboardEvent, item: Item) => void;
 }
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions, SelectDirectives>;
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
 export declare const defaultConfig: SelectProps<any>;
 /**
  * Returns a shallow copy of the default select config.
@@ -263,6 +255,12 @@ export declare function getSelectDefaultConfig(): {
      * By default, the item is returned
      */
     itemIdFn(item: any): string;
+    /**
+     * Retrieves navigable elements within an HTML element containing badges and the input.
+     *
+     * @param node - HTMLElement that contains the badges and the input
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLInputElement | HTMLSpanElement>;
     /**
      * Callback called dropdown open state change
      * @param isOpen - updated open state
@@ -317,16 +315,6 @@ export declare function getSelectDefaultConfig(): {
      * true if a loading process is being done
      */
     loading: boolean;
-    /**
-     * The template to override the way each badge on the left of the input is displayed.
-     * This define the content of the badge inside the badge container.
-     */
-    slotBadgeLabel: SlotContent<SelectItemContext<any>>;
-    /**
-     * The template to override the way each item is displayed in the list.
-     * This define the content of the badge inside the badge container.
-     */
-    slotItem: SlotContent<SelectItemContext<any>>;
     className: string;
 };
 /**

package/components/slider/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const slider = require("../../slider-DsLvT87U.cjs");
+exports.createSlider = slider.createSlider;
+exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1 +1,5 @@
-export * from './slider';
+import { c, g } from "../../slider-CA_fszn7.js";
+export {
+  c as createSlider,
+  g as getSliderDefaultConfig
+};