@design-factory/core 21.1.0-next.1

package/components/alert/alert.d.ts

@@ -0,0 +1,37 @@
+import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from './common';
+import type { Widget, WidgetFactory } from '../../types';
+/**
+ * Represents the state of an alert component.
+ */
+export interface AlertState extends CommonAlertState {
+}
+/**
+ * Represents the properties for the alert component.
+ */
+export interface AlertProps extends CommonAlertProps {
+}
+/**
+ * Represents the API for an alert component.
+ */
+export interface AlertApi extends CommonAlertApi {
+}
+/**
+ * Represents the directives for an alert component.
+ */
+export interface AlertDirectives extends CommonAlertDirectives {
+}
+/**
+ * Represents an alert widget with specific properties, state, API, and directives.
+ */
+export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, AlertDirectives>;
+/**
+ * Retrieve a shallow copy of the default alert config
+ * @returns the default alert config
+ */
+export declare function getAlertDefaultConfig(): AlertProps;
+/**
+ * Create an AlertWidget with given config props
+ * @param config - an optional alert config
+ * @returns an AlertWidget
+ */
+export declare const createAlert: WidgetFactory<AlertWidget>;

package/components/alert/common.d.ts

@@ -0,0 +1,138 @@
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+import type { Directive, PropsConfig, Widget } from '../../types';
+/**
+ * Interface representing the common properties and state for an alert component.
+ */
+export interface CommonAlertCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * If `true`, alert can be dismissed by the user.
+     * The close button (×) will be displayed and you can be notified of the event with the (close) output.
+     *
+     * @defaultValue `true`
+     */
+    dismissible: boolean;
+    /**
+     * If `true` the alert is visible to the user
+     *
+     * @defaultValue `true`
+     */
+    visible: boolean;
+    /**
+     * Accessibility close button label
+     *
+     * @defaultValue `'Close'`
+     */
+    ariaCloseButtonLabel: string;
+}
+/**
+ * Represents the state of a common alert component.
+ */
+export interface CommonAlertState extends CommonAlertCommonPropsAndState {
+    /**
+     * Is `true` when the alert is hidden. Compared to `visible`, this is updated after the transition is executed.
+     */
+    hidden: boolean;
+}
+/**
+ * Interface representing the common properties for an alert component.
+ */
+export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
+    /**
+     * Callback called when the alert visibility changed.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onVisibleChange: (visible: boolean) => void;
+    /**
+     * Callback called when the alert is hidden.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onHidden: () => void;
+    /**
+     * Callback called when the alert is shown.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onShown: () => void;
+    /**
+     * The transition function will be executed when the alert is displayed or hidden.
+     *
+     * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    transition: TransitionFn;
+    /**
+     * If `true`, alert opening will be animated.
+     *
+     * Animation is triggered  when the `.open()` function is called
+     * or the visible prop is changed
+     *
+     * @defaultValue `false`
+     */
+    animatedOnInit: boolean;
+    /**
+     * If `true`, alert closing will be animated.
+     *
+     * Animation is triggered  when clicked on the close button (×),
+     * via the `.close()` function or the visible prop is changed
+     *
+     * @defaultValue `true`
+     */
+    animated: boolean;
+}
+/**
+ * Interface representing the common API for alert components.
+ */
+export interface CommonAlertApi {
+    /**
+     * Triggers alert closing programmatically (same as clicking on the close button (×)).
+     *
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` property is used.
+     */
+    close(animated?: boolean): Promise<void>;
+    /**
+     * Triggers the alert to be displayed for the user.
+     *
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` property is used.
+     */
+    open(animated?: boolean): Promise<void>;
+}
+/**
+ * Interface representing common alert directives.
+ */
+export interface CommonAlertDirectives {
+    /**
+     * the transition directive, piloting what is the visual effect of going from hidden to visible
+     */
+    transitionDirective: Directive;
+}
+/**
+ * Represents a common alert widget with specified properties, state, API, and directives.
+ */
+export type CommonAlertWidget = Widget<CommonAlertProps, CommonAlertState, CommonAlertApi, CommonAlertDirectives>;
+/**
+ * Retrieve a shallow copy of the default alert config
+ * @returns the default alert config
+ */
+export declare function getCommonAlertDefaultConfig(): CommonAlertProps;
+/**
+ * Create an AlertWidget with given config props
+ * @param config - an optional alert config
+ * @returns an AlertWidget
+ */
+export declare function createCommonAlert(config?: PropsConfig<CommonAlertProps>): CommonAlertWidget;

package/components/alert/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const alert = require("../../alert-AhaliJ17.cjs");
+exports.createAlert = alert.createAlert;
+exports.getAlertDefaultConfig = alert.getAlertDefaultConfig;

package/components/alert/index.d.ts

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

package/components/alert/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../alert-Cb9FhbFQ.js";
+export {
+  c as createAlert,
+  g as getAlertDefaultConfig
+};

package/components/carousel/carousel.d.ts

@@ -0,0 +1,247 @@
+import type { Directive, Widget, WidgetFactory } from '../../types';
+import type { EmblaCarouselType, EmblaPluginsType, EmblaPluginType } from 'embla-carousel';
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+/**
+ * Represents the Embla carousel options
+ */
+interface EmblaOptions {
+    /**
+     * Align the slides relative to the carousel viewport
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#align}
+     * @defaultValue `'center'`
+     */
+    align: 'start' | 'center' | 'end';
+    /**
+     * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#container}
+     *
+     * @defaultValue `null`
+     */
+    container: string | null;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#containScroll}
+     * @defaultValue `'trimSnaps'`
+     */
+    containScroll: false | 'trimSnaps' | 'keepSnaps';
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * Enables momentum scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragFree}
+     * @defaultValue `false`
+     */
+    dragFree: boolean;
+    /**
+     * Drag threshold in pixels
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragThreshold}
+     * @defaultValue `10`
+     */
+    dragThreshold: number;
+    /**
+     * Set scroll duration when triggered by any of the API methods
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#duration}
+     * @defaultValue `25`
+     */
+    duration: number;
+    /**
+     * Enables infinite looping
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#loop}
+     * @defaultValue `false`
+     */
+    loop: boolean;
+    /**
+     * Allow the carousel to skip scroll snaps if it's dragged vigorously
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#skipsnaps}
+     * @defaultValue `false`
+     */
+    skipSnaps: boolean;
+}
+interface CarouselCommonPropsState extends Pick<EmblaOptions, 'direction'> {
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     *
+     * @defaultValue `true`
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     *
+     * @defaultValue `true`
+     */
+    showNavigationIndicators: boolean;
+}
+/**
+ * Represents the properties for the carousel component.
+ */
+export interface CarouselProps extends EmblaOptions, CarouselCommonPropsState {
+    /**
+     * Plugins to extend the carousel with additional features
+     * @defaultValue `[]`
+     */
+    plugins: EmblaPluginType[];
+    /**
+     * Aria label for navigation indicators
+     *
+     * @defaultValue
+     * ```ts
+     * (index: number) => `Select slide ${index + 1}`
+     * ```
+     */
+    ariaIndicatorLabel: (index: number) => string;
+    /**
+     * Aria label for previous button
+     *
+     * @defaultValue `'Select previous slide'`
+     */
+    ariaPrevLabel: string;
+    /**
+     * Aria label for next button
+     *
+     * @defaultValue `'Select next slide'`
+     */
+    ariaNextLabel: string;
+}
+/**
+ * Represents the state of a carousel component.
+ */
+export interface CarouselState extends CarouselCommonPropsState {
+    /**
+     * is the carousel currently scrolling
+     */
+    scrolling: boolean;
+    /**
+     * can carousel scroll to previous slide
+     */
+    canScrollPrev: boolean;
+    /**
+     * can carousel scroll to next slide
+     */
+    canScrollNext: boolean;
+    /**
+     * selected scroll snap
+     */
+    selectedScrollSnap: number;
+    /**
+     * is the carousel initialized
+     */
+    initialized: boolean;
+}
+/**
+ * Represents the API for a carousel component.
+ */
+export interface CarouselApi {
+    /**
+     * Scroll to the previous snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollPrev: (jump?: boolean) => void;
+    /**
+     * Scroll to the next snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollNext: (jump?: boolean) => void;
+    /**
+     * Scroll to a snap point by index
+     * @param index - the snap point index
+     * @param jump - scroll instantly
+     */
+    scrollTo: (index: number, jump?: boolean) => void;
+    /**
+     * Retrieve the enabled plugins
+     */
+    plugins: () => EmblaPluginsType | undefined;
+    /**
+     * Retrieve the inner EmblaApi object
+     */
+    emblaApi: () => EmblaCarouselType | undefined;
+}
+/**
+ * Represents the directives for a carousel component.
+ */
+export interface CarouselDirectives {
+    /**
+     * the root directive
+     */
+    root: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the previous slide.
+     */
+    scrollPrev: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the next slide.
+     */
+    scrollNext: Directive;
+    /**
+     * A directive to be applied to each slide in the carousel.
+     */
+    slide: Directive<{
+        id: string;
+        index: number;
+    }>;
+    /**
+     * A directive to be applied to a tab list allowing to navigate to the corresponding slide.
+     * This directive adds the role `tablist` and is recommended to be used together with {@link tabIndicator}.
+     */
+    tabList: Directive;
+    /**
+     * A directive to be applied to a navigation indicator allowing to scroll to the corresponding slide.
+     * As this directive adds the role `tab` to the element, it is recommended to use it on a button or a link and the parent element should have the {@link tabList} directive attached.
+     */
+    tabIndicator: Directive<{
+        index: number;
+        id: string;
+        jump?: boolean;
+    }>;
+}
+/**
+ * Represents a carousel widget with specific properties, state, API, and directives.
+ */
+export type CarouselWidget = Widget<CarouselProps, CarouselState, CarouselApi, CarouselDirectives>;
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+export declare function getCarouselDefaultConfig(): CarouselProps;
+/**
+ * An Embla Carousel widget factory.
+ *
+ * @internal
+ * @param options$ - the store of Embla options
+ * @param plugins$ - the store of Embla plugins
+ * @returns the Embla carousel widget
+ */
+export declare function createEmblaCarousel(options$: ReadableSignal<Partial<EmblaOptions>>, plugins$?: ReadableSignal<EmblaPluginType[]>): {
+    directive: Directive;
+    stores: {
+        scrolling$: ReadableSignal<boolean>;
+        canScrollPrev$: ReadableSignal<boolean>;
+        canScrollNext$: ReadableSignal<boolean>;
+        selectedScrollSnap$: ReadableSignal<number>;
+        initialized$: ReadableSignal<boolean>;
+        slideNodes$: ReadableSignal<HTMLElement[]>;
+    };
+    api: EmblaCarouselType | undefined;
+};
+/**
+ * Create an CarouselWidget with given config props
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+export declare const createCarousel: WidgetFactory<CarouselWidget>;
+export {};