### File

`packages/ecl/components/ecl-notification/ecl-notification.component.ts`

### Extends

`ECLBaseDirective`

### Metadata

selector | `ecl-notification`
imports | `AsyncPipe` `TitleCasePipe` `EUI_ECL_ICON` `EUI_ECL_BUTTON` `TranslateModule`
templateUrl | `./ecl-notification.component.html`

### Index

###### Properties
eclThemeService Readonly hasCustomIcon notificationCustomIcon role
###### Methods
onCloseClick getCssClasses
###### Inputs
isCloseable isVisible notificationTitle variant class e2eAttr tabindex
###### Outputs
close
###### HostBindings
attr.role class class.ecl-u-d-none
###### Accessors
isHidden cssClasses title icon titleAndIconBaseOnVariant

### Inputs

isCloseable
Type : `boolean`
Default value : `true`
Indicates whether the close button is displayed.

isVisible
Type : `boolean`
Default value : `true`
Controls the visibility of the notification. When false, the component is hidden using CSS utility class.

notificationTitle
Type : `string`
The title of the notification. This is displayed inside the component.

variant
Type : `"info" | "success" | "warning" | "error"`
Default value : `'info'`
Defines the visual style of the notification. Can be one of: 'info' | 'success' | 'warning' | 'error'. Default is 'info'.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

close
Type : `EventEmitter`
Emits an event when the close button is clicked. Consumers can call `preventDefault()` on the emitted event to prevent the notification from closing.

### HostBindings

attr.role
Type : `string`
Default value : `'alert'`
The ARIA role for the component. Set to "alert" by default.

class
Type : `string`
Computes the CSS classes applied to the host element, including the modifier for the current variant.

class.ecl-u-d-none
Type : `boolean`
Applies the `ecl-u-d-none` utility class when the notification is not visible.

### Methods

onCloseClick
`onCloseClick(evt: Event)`
Handles the click event on the close button. Emits a `close` event with an instance of `EclNotificationCloseEvent`. If the event is not prevented, the notification is hidden. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

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

### Properties

eclThemeService
Type : `unknown`
Default value : `inject(EclThemeService)`

Readonly hasCustomIcon
Type : `unknown`
Default value : `computed(() => this.notificationCustomIcon() !== undefined)`

notificationCustomIcon
Type : `unknown`
Default value : `contentChild(EclNotificationIconDirective)`

role
Type : `string`
Default value : `'alert'`
Decorators : `@HostBinding('attr.role')`
The ARIA role for the component. Set to "alert" by default.

### Accessors

isHidden
get `isHidden()`
Applies the `ecl-u-d-none` utility class when the notification is not visible. Returns : `boolean`

cssClasses
get `cssClasses()`
Computes the CSS classes applied to the host element, including the modifier for the current variant. Returns : `string`

title
get `title()`
Returns the default title text based on the current variant. Returns : `string`

icon
get `icon()`
Returns the icon name based on the current variant. Returns : `string`

titleAndIconBaseOnVariant
get `titleAndIconBaseOnVariant()`
Returns a mapping of title and icon based on the current variant. Returns : `literal type`

# results matching ""

# No results matching ""