eui documentation
  1. Components
  2. EclModalComponent

File

packages/ecl/components/ecl-modal/ecl-modal.component.ts

Extends

ECLBaseDirective

Implements

AfterContentInit

Metadata

selector dialog[eclModal]
imports A11yModule
templateUrl ./ecl-modal.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Constructor

constructor()

Inputs

size
Type : 's' | 'm' | 'l' | 'full' | string
Default value : 'l'

Defines the size of the modal. Possible values: 's', 'm', 'l' (default), 'full'.
variant
Type : 'information' | 'success' | 'warning' | 'error' | string

Defines the visual variant of the modal. Possible values: 'information', 'success', 'warning', 'error', or a custom string.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

modalClose
Type : EclModalCloseEvent<T>

Emits when the modal is closed. Carries an instance of EclModalCloseEvent.
modalOpen
Type : EclModalOpenEvent

Emits when the modal is opened. Carries an instance of EclModalOpenEvent.

HostBindings

attr.aria-describedby
Type : string

Binds the aria-describedby attribute to the modal element. Connects the dialog with the modal body via its unique ID for accessibility.
attr.open
Type : boolean | null

Binds the open attribute to the modal element. Used by the native <dialog> element.
class
Type : string

Applies base and variant CSS classes to the modal element.

HostListeners

document:keydown.escape
document:keydown.escape()

Handles ESC key press to close the modal with cancel role.

Methods

closeModal
closeModal(result?: EclModalResult<T>)

Closes the modal and emits a modalClose event with optional result data. If the event is not prevented, the modal will be hidden.

Parameters :
Name Type Optional
result EclModalResult<T> Yes
Returns : void
onEscapeKeydownHandler
onEscapeKeydownHandler()
Decorators :
@HostListener('document:keydown.escape')

Handles ESC key press to close the modal with cancel role.

Returns : void
openModal
openModal()

Opens the modal and emits a modalOpen event. If the event is not prevented, the modal will be displayed.

Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

eclModalBody
Type : unknown
Default value : contentChild(EclModalBodyComponent)

Body component projected into the modal.
eclModalBodyId
Type : string
Default value : `ecl-modal-body-${uniqueId()}`

Unique ID for the modal body. Used for accessibility (aria-describedby on the modal container).
eclModalCloseComponents
Type : unknown
Default value : contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true })

All close directives projected inside the modal.
eclModalHeader
Type : unknown
Default value : contentChild(forwardRef(() => EclModalHeaderComponent))

Header component projected into the modal.
isOpen
Type : unknown
Default value : signal(false)

Controls whether the modal is open.

Accessors

isModalOpened
getisModalOpened()

Binds the open attribute to the modal element. Used by the native <dialog> element.

Returns : boolean | null
hostAriaDescribedBy
gethostAriaDescribedBy()

Binds the aria-describedby attribute to the modal element. Connects the dialog with the modal body via its unique ID for accessibility.

Returns : string
cssClasses
getcssClasses()

Applies base and variant CSS classes to the modal element.

Returns : string

results matching ""

    No results matching ""