API modal

• config$?: PropsConfig<ModalProps>

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

ModalWidget

a new modal widget instance

ModalProps

a copy of the default modal config

patch: (parameters) => void

Method to change some modal properties.

Modify the parameter values, and recalculate the stores accordingly

• parameters: Partial<ModalProps>

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.

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.

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).

async () => {}

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

modalTransition: TransitionFn

The transition to use for the modal.

async () => {}

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

() => {}

visible: boolean

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

false

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.

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

hidden: boolean

Whether the modal is fully hidden.

modalElement: null | HTMLElement

DOM element 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