@design-factory/core 21.1.0-next.1

package/components/modal/modal.d.ts

@@ -0,0 +1,245 @@
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { Directive, Widget, WidgetFactory } from '../../types';
+/**
+ * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
+ * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click inside the viewport but outside the modal.
+ */
+export declare const modalOutsideClick: unique symbol;
+/**
+ * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
+ * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click on the close button.
+ */
+export declare const modalCloseButtonClick: unique symbol;
+/**
+ * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
+ * and returned by the {@link ModalApi.open|open} method, when the modal is closed by pressing the Escape key.
+ */
+export declare const modalCloseEscape: unique symbol;
+/**
+ * Properties of the modal widget that are also in the state of the modal.
+ */
+interface ModalCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * Value of the aria-label attribute to put on the close button.
+     *
+     * @defaultValue `'Close'`
+     */
+    ariaCloseButtonLabel: string;
+    /**
+     * Classes to add on the backdrop DOM element.
+     *
+     * @defaultValue `''`
+     */
+    backdropClass: string;
+    /**
+     * Whether to display the close button.
+     *
+     * @defaultValue `true`
+     */
+    closeButton: boolean;
+    /**
+     * Which element should contain the modal and backdrop DOM elements.
+     * If it is not null, the modal and backdrop DOM elements are moved to the specified container.
+     * Otherwise, they stay where the widget is located.
+     *
+     * @defaultValue
+     * ```ts
+     * typeof window !== 'undefined' ? document.body : null
+     * ```
+     */
+    container: HTMLElement | null;
+    /**
+     * Whether the modal should be visible when the transition is completed.
+     *
+     * @defaultValue `false`
+     */
+    visible: boolean;
+}
+/**
+ * Type of the parameter of {@link ModalProps.onBeforeClose|onBeforeClose}.
+ */
+export interface ModalBeforeCloseEvent {
+    /**
+     * Result of the modal, which is the value passed to the {@link ModalApi.close|close} method
+     * and later resolved by the promise returned by the {@link ModalApi.open|open} method.
+     * If needed, it can be changed from the {@link ModalProps.onBeforeClose|onBeforeClose} event handler.
+     */
+    result: any;
+    /**
+     * Whether to cancel the close of the modal.
+     * It can be changed from the {@link ModalProps.onBeforeClose|onBeforeClose} event handler.
+     */
+    cancel: boolean;
+}
+/**
+ * Properties of the modal widget.
+ */
+export interface ModalProps extends ModalCommonPropsAndState {
+    /**
+     * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
+     *
+     * @defaultValue `true`
+     */
+    animated: boolean;
+    /**
+     * Whether a backdrop should be created behind the modal.
+     *
+     * @defaultValue `true`
+     */
+    backdrop: boolean;
+    /**
+     * The transition to use for the backdrop behind the modal (if present).
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    backdropTransition: TransitionFn;
+    /**
+     * Whether the modal should be closed when clicking on the viewport outside the modal.
+     *
+     * @defaultValue `true`
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * The transition to use for the modal.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    modalTransition: TransitionFn;
+    /**
+     * Event to be triggered when the modal is about to be closed (i.e. the {@link ModalApi.close|close} method was called).
+     *
+     * @param event - event giving access to the argument given to the {@link ModalApi.close|close} method and allowing
+     * to cancel the close process.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onBeforeClose: (event: ModalBeforeCloseEvent) => void;
+    /**
+     * Event to be triggered when the visible property changes.
+     *
+     * @param visible - new value of the visible propery
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onVisibleChange: (visible: boolean) => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is not visible.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onHidden: () => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is visible.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onShown: () => void;
+}
+/**
+ * State of the modal widget.
+ */
+export interface ModalState extends ModalCommonPropsAndState {
+    /**
+     * Whether the backdrop is fully hidden. This can be true either because {@link ModalProps.backdrop|backdrop} is false or
+     * because {@link ModalProps.visible|visible} is false and there is no current transition.
+     */
+    backdropHidden: boolean;
+    /**
+     * Whether the modal is fully hidden.
+     */
+    hidden: boolean;
+    /**
+     * Whether there is an active transition to either display or hide the modal.
+     */
+    transitioning: boolean;
+    /**
+     * DOM element of the modal.
+     */
+    modalElement: HTMLElement | null;
+}
+/**
+ * API of the modal widget.
+ */
+export interface ModalApi {
+    /**
+     * Closes the modal with the given result.
+     *
+     * @param result - result of the modal, as passed in the {@link ModalBeforeCloseEvent.result|result} property of the event passed to the
+     * {@link ModalProps.onBeforeClose|onBeforeClose} event handler (and possibly changed by it) and resolved by the promise returned by the {@link ModalApi.open|open} method.
+     */
+    close(result?: any): void;
+    /**
+     * Opens the modal and returns a promise that is resolved when the modal is closed.
+     * The resolved value is the result passed to the {@link ModalApi.close|close} method and possibly changed by the
+     * {@link ModalProps.onBeforeClose|onBeforeClose} event handler
+     */
+    open(): Promise<any>;
+    /**
+     * Method to change some modal properties.
+     */
+    patch: ModalWidget['patch'];
+}
+/**
+ * Directives of the modal widget.
+ */
+export interface ModalDirectives {
+    /**
+     * Directive to put on the modal DOM element.
+     */
+    modalDirective: Directive;
+    /**
+     * Directive to put on the backdrop DOM element.
+     */
+    backdropDirective: Directive;
+    /**
+     * Portal directive to put on the modal DOM element.
+     */
+    modalPortalDirective: Directive;
+    /**
+     * Portal directive to put on the backdrop DOM element.
+     */
+    backdropPortalDirective: Directive;
+    /**
+     * Directive that adds all the necessary attributes to the close button
+     */
+    closeButtonDirective: Directive;
+    /**
+     * Directive to apply to the dialog element when using the native {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement | HTMLDialogElement}
+     */
+    dialogDirective: Directive;
+}
+/**
+ * Modal widget.
+ */
+export type ModalWidget = Widget<ModalProps, ModalState, ModalApi, ModalDirectives>;
+/**
+ * Returns a copy of the default modal config.
+ * @returns a copy of the default modal config
+ */
+export declare function getModalDefaultConfig(): ModalProps;
+/**
+ * Creates a new modal widget instance.
+ * @param config$ - config of the modal, either as a store or as an object containing values or stores.
+ * @returns a new modal widget instance
+ */
+export declare const createModal: WidgetFactory<ModalWidget>;
+export {};

package/components/pagination/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pagination = require("../../pagination-BLVa1UsZ.cjs");
+exports.createPagination = pagination.createPagination;
+exports.getPaginationDefaultConfig = pagination.getPaginationDefaultConfig;

package/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/components/pagination/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../pagination-BQWusWXN.js";
+export {
+  c as createPagination,
+  g as getPaginationDefaultConfig
+};

package/components/pagination/pagination.d.ts

@@ -0,0 +1,313 @@
+import type { Widget, Directive, WidgetFactory } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * Interface representing the common properties and state for a pagination component.
+ */
+interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * The current page.
+     *
+     * Page numbers start with `1`.
+     *
+     * @defaultValue `1`
+     */
+    page: number;
+    /**
+     * The label for the nav element.
+     *
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue `'Page navigation'`
+     */
+    ariaLabel: string;
+    /**
+     * The label for the "active" page.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue
+     * ```ts
+     * '(current)'
+     * ```
+     */
+    activeLabel: string;
+    /**
+     * The label for the "First" page button.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue
+     * ```ts
+     * 'Action link for first page'
+     * ```
+     */
+    ariaFirstLabel: string;
+    /**
+     * The label for the "Previous" page button.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue
+     * ```ts
+     * 'Action link for previous page'
+     * ```
+     */
+    ariaPreviousLabel: string;
+    /**
+     * The label for the "Next" page button.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue
+     * ```ts
+     * 'Action link for next page'
+     * ```
+     */
+    ariaNextLabel: string;
+    /**
+     * The label for the "Last" page button.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     *
+     * @defaultValue
+     * ```ts
+     * '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`
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the "Next" and "Previous" page links are shown.
+     *
+     * @defaultValue `true`
+     */
+    directionLinks: boolean;
+    /**
+     * If `true`, the "First" and "Last" page links are shown.
+     *
+     * @defaultValue `false`
+     */
+    boundaryLinks: boolean;
+}
+/**
+ * Interface representing the properties for the Pagination component.
+ */
+export interface PaginationProps extends PaginationCommonPropsAndState {
+    /**
+     * The number of items in your paginated collection.
+     *
+     * Note, that this is not the number of pages. Page numbers are calculated dynamically based on
+     * `collectionSize` and `pageSize`.
+     *
+     * Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.
+     *
+     * Whatever the collectionSize the page number is of minimum 1.
+     *
+     * @defaultValue `0`
+     */
+    collectionSize: number;
+    /**
+     * The number of items per page.
+     * @remarks min value is 1
+     *
+     * @defaultValue `10`
+     */
+    pageSize: number;
+    /**
+     * An event fired when the page is changed.
+     *
+     * Event payload is the number of the newly selected page.
+     *
+     * Page numbers start with `1`.
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * pagesFactory returns a function computing the array of pages to be displayed
+     * as number (-1 are treated as ellipsis).
+     * @param page - The current page number
+     * @param pageCount - The total number of pages
+     *
+     * @defaultValue
+     * ```ts
+     * (_page: number, pageCount: number) => {
+     * 		const pages: number[] = [];
+     * 		for (let i = 1; i <= pageCount; i++) {
+     * 			pages.push(i);
+     * 		}
+     * 		return pages;
+     * 	}
+     * ```
+     */
+    pagesFactory: (page: number, pageCount: number) => number[];
+    /**
+     * Provide the label for each "Page" page button.
+     * This is used for accessibility purposes.
+     * for I18n, we suggest to use the global configuration
+     * override any configuration parameters provided for this
+     * @param processPage - The current page number
+     * @param pageCount - The total number of pages
+     *
+     * @defaultValue
+     * ```ts
+     * (processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`
+     * ```
+     */
+    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: number) => `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
+     * (_page: number) => PAGE_LINK_DEFAULT
+     * ```
+     */
+    pageLink: (pageNumber: number) => string;
+}
+/**
+ * Interface representing the hrefs for pagination navigation links.
+ */
+export interface DirectionsHrefs {
+    /**
+     * The href for the 'Previous' navigation link
+     */
+    previous: string;
+    /**
+     * The href for the 'Next' direction link
+     */
+    next: string;
+}
+/**
+ * Represents the state of the pagination component.
+ */
+export interface PaginationState extends PaginationCommonPropsAndState {
+    /**
+     * The number of pages.
+     */
+    pageCount: number;
+    /**
+     * The current pages, the number in the Array is the number of the page.
+     */
+    pages: number[];
+    /**
+     * true if the previous link need to be disabled
+     */
+    previousDisabled: boolean;
+    /**
+     * true if the next link need to be disabled
+     */
+    nextDisabled: boolean;
+    /**
+     * 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;
+}
+/**
+ * Interface representing pagination API for navigating through pages.
+ */
+export interface PaginationApi {
+    /**
+     * To "go" to a specific page
+     * @param page - The page number to select
+     */
+    select(page: number): void;
+    /**
+     * To "go" to the first page
+     */
+    first(): void;
+    /**
+     * To "go" to the previous page
+     */
+    previous(): void;
+    /**
+     * To "go" to the next page
+     */
+    next(): void;
+    /**
+     * To "go" to the last page
+     */
+    last(): void;
+}
+/**
+ * Interface representing the directives for pagination components.
+ */
+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;
+    /**
+     * A directive to be applied on the next link
+     */
+    pageNext: Directive;
+    /**
+     * A directive to be applied on the Last link
+     */
+    pageLast: Directive;
+}
+/**
+ * Represents a pagination widget with specific properties, state, API, actions, and directives.
+ */
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, PaginationDirectives>;
+/**
+ * Returns a shallow copy of the default pagination config
+ * @returns a copy of the default config
+ */
+export declare function getPaginationDefaultConfig(): PaginationProps;
+/**
+ * Create a PaginationWidget with given config props
+ * @param config - an optional pagination config
+ * @returns a PaginationWidget
+ */
+export declare const createPagination: WidgetFactory<PaginationWidget>;
+export {};

package/components/progressbar/index.cjs

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

package/components/progressbar/index.d.ts

@@ -0,0 +1 @@
+export * from './progressbar';

package/components/progressbar/index.js

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

package/components/progressbar/progressbar.d.ts

@@ -0,0 +1,91 @@
+import type { Directive, Widget, WidgetFactory } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+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.
+     *
+     * @defaultValue `'Progressbar'`
+     */
+    ariaLabel: string;
+}
+/**
+ * Interface representing directives for a progress bar component.
+ */
+export interface ProgressbarDirectives {
+    /**
+     * A directive to be applied to the main container that handles aria attributes.
+     */
+    ariaDirective: Directive;
+}
+/**
+ * Represents the state of a progress bar component.
+ */
+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;
+}
+/**
+ * Interface representing the properties for the Progressbar component.
+ */
+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
+     *
+     * @defaultValue
+     * ```ts
+     * () => undefined
+     * ```
+     */
+    ariaValueTextFn: (value: number, minimum: number, maximum: number) => string | undefined;
+}
+/**
+ * Represents a Progressbar widget with specific properties, state, API, and directives.
+ */
+export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, object, ProgressbarDirectives>;
+/**
+ * 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 const createProgressbar: WidgetFactory<ProgressbarWidget>;
+export {};

package/components/rating/index.cjs

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

package/components/rating/index.d.ts

@@ -0,0 +1 @@
+export * from './rating';

package/components/rating/index.js

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