eui documentation
  1. Components
  2. EclModalComponent

File

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

Extends

ECLBaseDirective

Implements

OnChanges AfterContentInit OnDestroy

Metadata

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

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

isOpen
Type : boolean | any

Controls whether the modal is open.

Can be set to any truthy value to open the modal.
size
Type : "s" | "m" | "l" | "full" | string
Default value : 'l'

Defines the size of the modal.

Possible values:

  • 's' – small
  • 'm' – medium
  • 'l' – large (default)
  • 'full' – full width
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 : EventEmitter

Emits when the modal is closed.

Carries an instance of EclModalCloseEvent.
modalOpen
Type : EventEmitter

Emits when the modal is opened.

Carries an instance of EclModalOpenEvent.

HostBindings

attr.open
Type : boolean

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

eclModalCloseComponents
Type : QueryList<EclModalCloseDirective<T>>
Decorators :
@ContentChildren(undefined, {descendants: true})

All close directives projected inside the modal.
eclModalHeader
Type : EclModalHeaderComponent<T>
Decorators :
@ContentChild(undefined)

Header component projected into the modal.

Accessors

isOpen
getisOpen()

Returns the open state of the modal.

Returns : boolean | null
setisOpen(value: boolean | any)

Controls whether the modal is open.

Can be set to any truthy value to open the modal.

Parameters :
Name Type Optional
value boolean | any No
Returns : void
isModalOpened
getisModalOpened()

Binds the open attribute to the modal element.

Used by the native <dialog> element.

Returns : boolean
cssClasses
getcssClasses()

Applies base and variant CSS classes to the modal element.

Returns : string

results matching ""

    No results matching ""