API modal

• Data

• config?: PropsConfig<ModalProps<Data>>

config of the modal, either as a store or as an object containing values or stores.

ModalWidget<Data>

a new modal widget instance

ModalProps<any>

the default modal config

closeButtonClick(event): void

Action to be called when the user clicks on the close button. It closes the modal with the modalCloseButtonClick result.

• event: Pick<MouseEvent, never>

mouse event

void

modalClick(event): 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 closeOnOutsideClick prop, the modal is or isn't closed (with the modalOutsideClick result).

• event: Pick<MouseEvent, "currentTarget" | "target">

mouse event

void

• Data

patch: (parameters) => void

Modify the parameter values, and recalculate the stores accordingly

• parameters: Partial<ModalProps<Data>>

void

close(result?): void

Closes the modal with the given result.

• result?: any

result of the modal, as passed in the result property of the event passed to the onBeforeClose event handler (and possibly changed by it) and resolved by the promise returned by the open method.

void

open(): Promise<any>

Opens the modal and returns a promise that is resolved when the modal is closed. The resolved value is the result passed to the close method and possibly changed by the onBeforeClose event handler

Promise<any>

cancel: boolean

Whether to cancel the close of the modal. It can be changed from the onBeforeClose event handler.

result: any

Result of the modal, which is the value passed to the close method and later resolved by the promise returned by the open method. If needed, it can be changed from the onBeforeClose event handler.

• Data

backdropDirective: Directive

Directive to put on the backdrop DOM element.

backdropPortalDirective: Directive

Portal directive to put on the backdrop DOM element.

closeButtonDirective: Directive

Directive that adds all the necessary attributes to the close button

dialogDirective: Directive

Directive to apply to the dialog element when using the native HTMLDialogElement

modalDirective: Directive

Directive to put on the modal DOM element.

modalPortalDirective: Directive

Portal directive to put on the modal DOM element.

• Data

animated: boolean

Whether the modal and its backdrop (if present) should be animated when shown or hidden.

true

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdrop: boolean

Whether a backdrop should be created behind the modal.

true

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropTransition: TransitionFn

The transition to use for the backdrop behind the modal (if present).

fadeTransition

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

closeOnOutsideClick: boolean

Whether the modal should be closed when clicking on the viewport outside the modal.

true

container: null | HTMLElement

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.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

modalTransition: TransitionFn

The transition to use for the modal.

fadeTransition

onBeforeClose: (event) => void

Event to be triggered when the modal is about to be closed (i.e. the close method was called).

• event: ModalBeforeCloseEvent

event giving access to the argument given to the close method and allowing to cancel the close process.

void

() => {}

onHidden: () => void

Event to be triggered when the transition is completed and the modal is not visible.

void

() => {}

onShown: () => void

Event to be triggered when the transition is completed and the modal is visible.

void

() => {}

onVisibleChange: (visible) => void

Event to be triggered when the visible property changes.

• visible: boolean

new value of the visible propery

void

() => {}

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

default: ModalContext<any>

footer: ModalContext<any>

header: ModalContext<any>

structure: ModalContext<any>

title: ModalContext<any>

• Data

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropHidden: boolean

Whether the backdrop is fully hidden. This can be true either because backdrop is false or because visible is false and there is no current transition.

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

container: null | HTMLElement

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.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

hidden: boolean

Whether the modal is fully hidden.

modalElement: null | HTMLElement

DOM element of the modal.

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

transitioning: boolean

Whether there is an active transition to either display or hide the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

• Data

• Data

• options: Partial<ModalProps<Data>>

• __namedParameters = {}

• __namedParameters.context?: Map<any, any>

Promise<any>