### File

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

### Description

Component representing a banner, which can contain image, video and call-to-action (CTA) links. Allows customization of layout, alignment, and appearance through inputs.

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

selector | `ecl-banner`
imports | `EUI_ECL_ICON` `EUI_ECL_BUTTON` `NgTemplateOutlet`
templateUrl | `./ecl-banner.component.html`

### Index

###### Properties
bannerContainer bannerFooter bannerFooterHeight eclBannerImage eclBannerVideo eclLinkComponents Public el isPlaying pauseBtn playBtn
###### Methods
onKeydownEnterPause onKeydownEnterPlay onVideoPause onVideoPlay getCssClasses
###### Inputs
boxBackground copyright eclSize fontColor fontSize horizontalAlignment isFullWidth verticalAlignment class e2eAttr tabindex
###### HostBindings
class style.--banner-footer-height.px
###### Accessors
cssClasses hasCtaLink hasImage hasVideo

### Constructor

`constructor(el: ElementRef, renderer: Renderer2, cdkBreakpointObserver: BreakpointObserver)`
Parameters :
Name | Type | Optional
el | `ElementRef` | No
renderer | `Renderer2` | No
cdkBreakpointObserver | `BreakpointObserver` | No

### Inputs

boxBackground
Type : `"none" | "light" | "dark" | string`
Default value : `'light'`
Defines the background color of the banner content box. Allowed values: 'none' | 'light' | 'dark'. Default: 'light'.

copyright
Type : `string`
Default value : `''`
Sets the copyright text displayed in the banner.

eclSize
Type : `"xs" | "s" | "m" | "l" | string`
Default value : `'m'`
Defines the size of the banner. Affects its height-to-width aspect ratio. Allowed values: 'xs' | 's' | 'm' | 'l'. Default: 'm'.

fontColor
Type : `"light" | "dark" | string`
Default value : `'dark'`
Defines the color of the font inside the banner content box. Allowed values: 'light' | 'dark'. Default: 'dark'.

fontSize
Type : `"m" | "l" | string`
Default value : `'m'`
Defines the font size inside the banner content box. Allowed values: 'm' | 'l'. Default: 'm'.

horizontalAlignment
Type : `"right" | "left" | "center" | string`
Default value : `'left'`
Sets the horizontal alignment of the content inside the banner. Allowed values: 'left' | 'center' | 'right'. Default: 'left'.

isFullWidth
Type : `boolean`
Default value : `false`
When true, the banner stretches to full width of its container. Default: false.

verticalAlignment
Type : `"top" | "center" | "bottom" | string`
Default value : `'center'`
Sets the vertical alignment of the content inside the banner. Allowed values: 'top' | 'center' | 'bottom'. Default: 'center'.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

class
Type : `string`

style.--banner-footer-height.px
Type : `any`
Default value : `null`

### Methods

onKeydownEnterPause
`onKeydownEnterPause()`
Handles keyboard activation (Enter key) to pause video. Moves focus to play button after pausing. Returns : `void`

onKeydownEnterPlay
`onKeydownEnterPlay()`
Handles keyboard activation (Enter key) to play video. Moves focus to pause button after playing starts. Returns : `void`

onVideoPause
`onVideoPause()`
Pauses the embedded banner video. Triggered via interaction (e.g., button). Returns : `void`

onVideoPlay
`onVideoPlay()`
Plays the embedded banner video. Triggered via interaction (e.g., button). Returns : `void`

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

### Properties

bannerContainer
Type : `ElementRef`
Decorators : `@ViewChild('bannerContainer')`

bannerFooter
Type : `ElementRef`
Decorators : `@ViewChild('bannerFooter')`

bannerFooterHeight
Type : `null`
Default value : `null`
Decorators : `@HostBinding('style.--banner-footer-height.px')`

eclBannerImage
Type : `EclBannerImageDirective`
Decorators : `@ContentChild(EclBannerImageDirective)`

eclBannerVideo
Type : `EclBannerVideoDirective`
Decorators : `@ContentChild(EclBannerVideoDirective)`

eclLinkComponents
Type : `QueryList<EclLinkDirective>`
Decorators : `@ContentChildren(undefined)`

Public el
Type : `ElementRef`

isPlaying
Default value : `false`

pauseBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('pauseBtn')`

playBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('playBtn')`

### Accessors

cssClasses
get `cssClasses()`

hasCtaLink
get `hasCtaLink()`
Indicates whether the banner contains at least one call-to-action link. Returns : `boolean`

hasImage
get `hasImage()`
Indicates whether the banner contains an image. Returns : `boolean`

hasVideo
get `hasVideo()`
Indicates whether the banner contains a video. Returns : `boolean`

# results matching ""

# No results matching ""