### 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
eclModalBody eclModalBodyId eclModalCloseComponents eclModalHeader isOpen
###### Methods
closeModal onEscapeKeydownHandler openModal getCssClasses
###### Inputs
size variant class e2eAttr tabindex
###### Outputs
modalClose modalOpen
###### HostBindings
attr.aria-describedby attr.open class
###### HostListeners
document:keydown.escape
###### Accessors
isModalOpened hostAriaDescribedBy cssClasses

### 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
get `isModalOpened()`
Binds the `open` attribute to the modal element. Used by the native `<dialog>` element. Returns : `boolean | null`

hostAriaDescribedBy
get `hostAriaDescribedBy()`
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
get `cssClasses()`
Applies base and variant CSS classes to the modal element. Returns : `string`

# results matching ""

# No results matching ""