@agnos-ui/core 0.0.1-alpha.0

package/dist/lib/alert.js

@@ -0,0 +1,66 @@
+import { bindDirectiveNoArg, stateStores, typeBoolean, typeString, writablesForProps } from './services';
+import { createTransition } from './transitions';
+import { fadeTransition } from './transitions/bootstrap';
+import { noop } from './utils';
+const defaultConfig = {
+    visible: true,
+    dismissible: true,
+    type: 'primary',
+    ariaCloseButtonLabel: 'Close',
+    onVisibleChange: noop,
+    onShown: noop,
+    onHidden: noop,
+    slotStructure: undefined,
+    slotDefault: undefined,
+    animation: true,
+    animationOnInit: false,
+    transition: fadeTransition,
+};
+/**
+ * Retrieve a shallow copy of the default alert config
+ * @returns the default alert config
+ */
+export function getAlertDefaultConfig() {
+    return { ...defaultConfig };
+}
+const configValidator = {
+    dismissible: typeBoolean,
+    type: typeString,
+};
+/**
+ * Create an AlertWidget with given config props
+ * @param config - an optional alert config
+ * @returns an AlertWidget
+ */
+export function createAlert(config) {
+    const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
+    const transition = createTransition({
+        transition: transition$,
+        visible: requestedVisible$,
+        animation: animation$,
+        animationOnInit: animationOnInit$,
+        onVisibleChange: onVisibleChange$,
+        onHidden: onHidden$,
+        onShown: onShown$,
+    });
+    const close = () => {
+        patch({ visible: false });
+    };
+    const open = () => {
+        patch({ visible: true });
+    };
+    const visible$ = transition.stores.visible$;
+    const hidden$ = transition.stores.hidden$;
+    return {
+        ...stateStores({ ...stateProps, visible$, hidden$ }),
+        patch,
+        api: {
+            open,
+            close,
+        },
+        directives: {
+            transitionDirective: bindDirectiveNoArg(transition.directives.directive),
+        },
+        actions: {},
+    };
+}

package/dist/lib/config.d.ts

@@ -0,0 +1,71 @@
+import type { ReadableSignal, WritableSignal } from '@amadeus-it-group/tansu';
+import type { ModalProps } from './modal/modal';
+import type { AlertProps } from './alert';
+import type { PaginationProps } from './pagination';
+import type { RatingProps } from './rating';
+import type { SelectProps } from './select';
+import type { AccordionProps } from './accordion';
+export type Partial2Levels<T> = Partial<{
+    [Level1 in keyof T]: Partial<T[Level1]>;
+}>;
+export type WidgetsConfigStore<T> = WritableSignal<Partial2Levels<T>> & {
+    own$: WritableSignal<Partial2Levels<T>>;
+    parent$: undefined | WritableSignal<Partial2Levels<T>>;
+    adaptedParent$: undefined | ReadableSignal<Partial2Levels<T>>;
+};
+/**
+ * Merges source object into destination object, up to the provided number of levels.
+ * @param destination - destination object
+ * @param source - source object
+ * @param levels - number of levels to merge
+ * @returns the destination object in most cases, or the source in some cases (if the source is not undefined and either levels is smaller than 1
+ * or the source is not an object)
+ */
+export declare const mergeInto: <T>(destination: T, source: T | undefined, levels?: number) => T;
+/**
+ * Creates a new widgets default configuration store, optionally inheriting from a parent store, and containing
+ * its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The resulting store has a value computed from the parent store in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param parent$ - optional parent widgets default configuration store.
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * from parent$ (or an empty object if parent$ is not specified) and returns the widgets default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ */
+export declare const createWidgetsConfig: <T>(parent$?: WidgetsConfigStore<T> | undefined, adaptParentConfig?: (config: Partial<{ [Level1 in keyof T]: Partial<T[Level1]>; }>) => Partial<{ [Level1 in keyof T]: Partial<T[Level1]>; }>) => WidgetsConfigStore<T>;
+export interface WidgetsConfig {
+    /**
+     * the pagination widget config
+     */
+    pagination: PaginationProps;
+    /**
+     * the rating widget config
+     */
+    rating: RatingProps;
+    /**
+     * the select widget config
+     */
+    select: SelectProps<any>;
+    /**
+     * the modal widget config
+     */
+    modal: ModalProps;
+    /**
+     * the alert widget config
+     */
+    alert: AlertProps;
+    /**
+     * the accordion widget config
+     */
+    accordion: AccordionProps;
+}

package/dist/lib/config.js

@@ -0,0 +1,53 @@
+import { asReadable, computed, writable } from '@amadeus-it-group/tansu';
+import { identity } from './utils';
+/**
+ * Merges source object into destination object, up to the provided number of levels.
+ * @param destination - destination object
+ * @param source - source object
+ * @param levels - number of levels to merge
+ * @returns the destination object in most cases, or the source in some cases (if the source is not undefined and either levels is smaller than 1
+ * or the source is not an object)
+ */
+export const mergeInto = (destination, source, levels = Infinity) => {
+    if (source !== undefined) {
+        if (typeof source === 'object' && source && levels >= 1) {
+            for (const key of Object.keys(source)) {
+                destination[key] = mergeInto(destination[key] ?? {}, source[key], levels - 1);
+            }
+        }
+        else {
+            return source;
+        }
+    }
+    return destination;
+};
+/**
+ * Creates a new widgets default configuration store, optionally inheriting from a parent store, and containing
+ * its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The resulting store has a value computed from the parent store in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param parent$ - optional parent widgets default configuration store.
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * from parent$ (or an empty object if parent$ is not specified) and returns the widgets default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ */
+export const createWidgetsConfig = (parent$, adaptParentConfig = identity) => {
+    const own$ = writable({});
+    const adaptedParent$ = adaptParentConfig === identity ? parent$ : computed(() => adaptParentConfig(mergeInto({}, parent$?.(), 2)));
+    return asReadable(computed(() => mergeInto(mergeInto({}, adaptedParent$?.(), 2), own$(), 2)), {
+        ...own$,
+        own$,
+        adaptedParent$,
+        parent$,
+    });
+};

package/dist/lib/index.d.ts

@@ -0,0 +1,11 @@
+export * from './types';
+export * from './select';
+export * from './services';
+export * from './transitions';
+export * from './rating';
+export * from './pagination';
+export * from './pagination.utils';
+export * from './config';
+export * from './modal/modal';
+export * from './alert';
+export * from './accordion';

package/dist/lib/index.js

@@ -0,0 +1,11 @@
+export * from './types';
+export * from './select';
+export * from './services';
+export * from './transitions';
+export * from './rating';
+export * from './pagination';
+export * from './pagination.utils';
+export * from './config';
+export * from './modal/modal';
+export * from './alert';
+export * from './accordion';

package/dist/lib/modal/modal.d.ts

@@ -0,0 +1,318 @@
+import type { PropsConfig } from '../services';
+import type { TransitionFn } from '../transitions';
+import type { Widget, Directive, SlotContent, WidgetSlotContext } 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;
+/**
+ * Context of the modal slots.
+ */
+export type ModalContext = WidgetSlotContext<ModalWidget>;
+/**
+ * Properties of the modal widget that are also in the state of the modal.
+ */
+export interface ModalCommonPropsAndState {
+    /**
+     * Value of the aria-label attribute to put on the close button.
+     */
+    ariaCloseButtonLabel: string;
+    /**
+     * Classes to add on the backdrop DOM element.
+     */
+    backdropClass: string;
+    /**
+     * Whether to display the close button.
+     */
+    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.
+     */
+    container: HTMLElement | null;
+    /**
+     * Classes to add on the modal DOM element.
+     */
+    modalClass: string;
+    /**
+     * Body of the modal.
+     */
+    slotDefault: SlotContent<ModalContext>;
+    /**
+     * Footer of the modal.
+     */
+    slotFooter: SlotContent<ModalContext>;
+    /**
+     * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
+     */
+    slotHeader: SlotContent<ModalContext>;
+    /**
+     * Structure of the modal.
+     * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
+     */
+    slotStructure: SlotContent<ModalContext>;
+    /**
+     * Title of the modal.
+     */
+    slotTitle: SlotContent<ModalContext>;
+    /**
+     * Whether the modal should be visible when the transition is completed.
+     */
+    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.
+     */
+    animation: boolean;
+    /**
+     * Whether a backdrop should be created behind the modal.
+     */
+    backdrop: boolean;
+    /**
+     * The transition to use for the backdrop behind the modal (if present).
+     */
+    backdropTransition: TransitionFn;
+    /**
+     * Whether the modal should be closed when clicking on the viewport outside the modal.
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * The transition to use for the modal.
+     */
+    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.
+     */
+    onBeforeClose: (event: ModalBeforeCloseEvent) => void;
+    /**
+     * Event to be triggered when the visible property changes.
+     *
+     * @param visible - new value of the visible propery
+     */
+    onVisibleChange: (visible: boolean) => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is not visible.
+     */
+    onHidden: () => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is visible.
+     */
+    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 ModalCommonPropsAndState.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'];
+}
+/**
+ * Actions of the modal widget.
+ */
+export interface ModalActions {
+    /**
+     * Action to be called when the user clicks on the close button. It closes the modal with the {@link modalCloseButtonClick} result.
+     * @param event - mouse event
+     */
+    closeButtonClick(event: Pick<MouseEvent, never>): void;
+    /**
+     * Action to be called when the user clicks on the modal DOM element (which is supposed to have the size of the full viewport).
+     * If the click is not done on a descendant of the modal DOM element, it is considered to be done outside the modal
+     * and, depending on the value of the {@link ModalProps.closeOnOutsideClick|closeOnOutsideClick} prop, the modal is or isn't closed
+     * (with the {@link modalOutsideClick} result).
+     * @param event - mouse event
+     */
+    modalClick(event: Pick<MouseEvent, 'target' | 'currentTarget'>): void;
+}
+/**
+ * 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;
+}
+/**
+ * Modal widget.
+ */
+export type ModalWidget = Widget<ModalProps, ModalState, ModalApi, ModalActions, ModalDirectives>;
+/**
+ * Returns a copy of the default modal config.
+ * @returns a copy of the default modal config
+ */
+export declare function getModalDefaultConfig(): {
+    /**
+     * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
+     */
+    animation: boolean;
+    /**
+     * Whether a backdrop should be created behind the modal.
+     */
+    backdrop: boolean;
+    /**
+     * The transition to use for the backdrop behind the modal (if present).
+     */
+    backdropTransition: TransitionFn;
+    /**
+     * Whether the modal should be closed when clicking on the viewport outside the modal.
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * The transition to use for the modal.
+     */
+    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.
+     */
+    onBeforeClose: (event: ModalBeforeCloseEvent) => void;
+    /**
+     * Event to be triggered when the visible property changes.
+     *
+     * @param visible - new value of the visible propery
+     */
+    onVisibleChange: (visible: boolean) => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is not visible.
+     */
+    onHidden: () => void;
+    /**
+     * Event to be triggered when the transition is completed and the modal is visible.
+     */
+    onShown: () => void;
+    /**
+     * Value of the aria-label attribute to put on the close button.
+     */
+    ariaCloseButtonLabel: string;
+    /**
+     * Classes to add on the backdrop DOM element.
+     */
+    backdropClass: string;
+    /**
+     * Whether to display the close button.
+     */
+    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.
+     */
+    container: HTMLElement | null;
+    /**
+     * Classes to add on the modal DOM element.
+     */
+    modalClass: string;
+    /**
+     * Body of the modal.
+     */
+    slotDefault: SlotContent<ModalContext>;
+    /**
+     * Footer of the modal.
+     */
+    slotFooter: SlotContent<ModalContext>;
+    /**
+     * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
+     */
+    slotHeader: SlotContent<ModalContext>;
+    /**
+     * Structure of the modal.
+     * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
+     */
+    slotStructure: SlotContent<ModalContext>;
+    /**
+     * Title of the modal.
+     */
+    slotTitle: SlotContent<ModalContext>;
+    /**
+     * Whether the modal should be visible when the transition is completed.
+     */
+    visible: boolean;
+};
+/**
+ * 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: (config$?: PropsConfig<ModalProps>) => ModalWidget;

package/dist/lib/modal/modal.js

@@ -0,0 +1,156 @@
+import { computed, readable } from '@amadeus-it-group/tansu';
+import { sliblingsInert, bindDirective, bindDirectiveNoArg, directiveSubscribe, mergeDirectives, portal, registrationArray, stateStores, writablesForProps, } from '../services';
+import { createTransition } from '../transitions';
+import { fadeTransition } from '../transitions/bootstrap/fade';
+import { promiseFromStore } from '../transitions/utils';
+import { noop } from '../utils';
+import { removeScrollbars, revertScrollbars } from './scrollbars';
+/**
+ * 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 const modalOutsideClick = 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 const modalCloseButtonClick = Symbol();
+const defaultConfig = {
+    animation: true,
+    ariaCloseButtonLabel: 'Close',
+    backdrop: true,
+    backdropClass: '',
+    backdropTransition: fadeTransition,
+    closeButton: true,
+    closeOnOutsideClick: true,
+    container: typeof window !== 'undefined' ? document.body : null,
+    modalClass: '',
+    modalTransition: fadeTransition,
+    onBeforeClose: noop,
+    onVisibleChange: noop,
+    onHidden: noop,
+    onShown: noop,
+    slotDefault: undefined,
+    slotFooter: undefined,
+    slotHeader: undefined,
+    slotStructure: undefined,
+    slotTitle: undefined,
+    visible: false,
+};
+/**
+ * Returns a copy of the default modal config.
+ * @returns a copy of the default modal config
+ */
+export function getModalDefaultConfig() {
+    return { ...defaultConfig };
+}
+const modals$ = registrationArray();
+const hasModals$ = computed(() => modals$().length > 0);
+const scrollbarsAction$ = computed(() => {
+    if (hasModals$()) {
+        removeScrollbars();
+    }
+    else {
+        revertScrollbars();
+    }
+});
+const modalsAction$ = computed(() => {
+    scrollbarsAction$();
+});
+/**
+ * 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 const createModal = (config$) => {
+    const [{ animation$, backdrop$, backdropTransition$, closeOnOutsideClick$, container$, modalTransition$, onBeforeClose$, onVisibleChange$, onHidden$, onShown$, visible$: requestedVisible$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config$);
+    const modalTransition = createTransition({
+        transition: modalTransition$,
+        visible: requestedVisible$,
+        animation: animation$,
+        animationOnInit: animation$,
+        onVisibleChange: onVisibleChange$,
+        // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+        // (especially in case one of the two transitions takes more time than the other)
+        onHidden: onHidden$,
+        onShown: onShown$,
+    });
+    const visible$ = modalTransition.stores.visible$;
+    const backdropTransition = createTransition({
+        transition: backdropTransition$,
+        visible: requestedVisible$,
+        animation: animation$,
+        animationOnInit: animation$,
+    });
+    const transitioning$ = computed(() => modalTransition.stores.transitioning$() || (backdrop$() && backdropTransition.stores.transitioning$()));
+    const hidden$ = computed(() => !transitioning$() && !visible$());
+    const backdropHidden$ = computed(() => !backdrop$() || hidden$());
+    let hideResult;
+    const close = (result) => {
+        hideResult = result;
+        const beforeCloseEvent = {
+            get result() {
+                return hideResult;
+            },
+            set result(value) {
+                hideResult = value;
+            },
+            cancel: false,
+        };
+        onBeforeClose$()(beforeCloseEvent);
+        if (beforeCloseEvent.cancel) {
+            return;
+        }
+        patch({ visible: false });
+    };
+    const modalPortalDirective = bindDirective(portal, computed(() => ({ container: container$() })));
+    const backdropPortalDirective = bindDirective(portal, computed(() => ({
+        container: container$(),
+        insertBefore: container$() && modalTransition.stores.element$()?.parentElement === container$() ? modalTransition.stores.element$() : undefined,
+    })));
+    const registerModalAction$ = readable(undefined, () => modals$.register(res));
+    const action$ = computed(() => {
+        if (modalTransition.stores.elementPresent$() && !hidden$()) {
+            registerModalAction$();
+        }
+        modalsAction$();
+    });
+    const res = {
+        ...stateStores({
+            backdropHidden$,
+            container$,
+            hidden$,
+            transitioning$,
+            visible$,
+            modalElement$: modalTransition.stores.element$,
+            ...stateProps,
+        }),
+        directives: {
+            modalPortalDirective,
+            backdropPortalDirective,
+            backdropDirective: bindDirectiveNoArg(backdropTransition.directives.directive),
+            modalDirective: mergeDirectives(bindDirectiveNoArg(modalTransition.directives.directive), sliblingsInert, directiveSubscribe(action$)),
+        },
+        patch,
+        api: {
+            close,
+            async open() {
+                patch({ visible: true });
+                await promiseFromStore(hidden$).promise;
+                return hideResult;
+            },
+            patch,
+        },
+        actions: {
+            modalClick(event) {
+                if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+                    close(modalOutsideClick);
+                }
+            },
+            closeButtonClick(event) {
+                close(modalCloseButtonClick);
+            },
+        },
+    };
+    return res;
+};