packages/ecl/components/ecl-banner/ecl-banner.component.ts
Component representing a banner, which can contain image, video and call-to-action (CTA) links. Allows customization of layout, alignment, and appearance through inputs.
| selector | ecl-banner |
| imports |
EUI_ECL_ICON
EUI_ECL_BUTTON
NgTemplateOutlet
|
| templateUrl | ./ecl-banner.component.html |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
constructor()
|
| 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 : "s" | "m" | "l" | string
|
Default value : 'm'
|
|
Defines the font size inside the banner content box. Allowed values: 'm' | 'l'. Default: 'm'. |
| isFullWidth |
Type : boolean
|
Default value : false
|
|
When true, the banner stretches to full width of its container. Default: false. |
| hasOverlay |
Default value : false, { transform: booleanAttribute }
|
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| class |
Type : string
|
| style.--banner-footer-height.px |
Type : any
|
Default value : null
|
| 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 :
Returns :
string
|
| 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)
|
| el |
Type : unknown
|
Default value : inject(ElementRef)
|
| isPlaying |
Type : unknown
|
Default value : signal(false)
|
| pauseBtn |
Type : EclButtonComponent
|
Decorators :
@ViewChild('pauseBtn')
|
| playBtn |
Type : EclButtonComponent
|
Decorators :
@ViewChild('playBtn')
|
| cssClasses |
getcssClasses()
|
| hasCtaLink |
gethasCtaLink()
|
|
Indicates whether the banner contains at least one call-to-action link.
Returns :
boolean
|
| hasImage |
gethasImage()
|
|
Indicates whether the banner contains an image.
Returns :
boolean
|
| hasVideo |
gethasVideo()
|
|
Indicates whether the banner contains a video.
Returns :
boolean
|
| hasMedia |
gethasMedia()
|
|
Indicates whether the banner contains any media (image or video).
Returns :
boolean
|