### File

`packages/ecl/components/ecl-carousel/ecl-carousel-item.component.ts`

### Description

Represents a single item (slide) within the ECL Carousel. Each slide can optionally include an EclBannerComponent and supports click events.

### Extends

`ECLBaseDirective`

### Implements

`EclCarouselItem`

### Metadata

selector | `ecl-carousel-item`
styles | `/* TODO: remove by implementing full ECL specs */ :host:before { left: 0 !important; display: none; }`
templateUrl | `./ecl-carousel-item.component.html`

### Index

###### Properties
ariaLabel banner el Public index role roleDescription width
###### Methods
onSlideClick getCssClasses
###### Inputs
id isCurrent class e2eAttr tabindex
###### Outputs
slideClick
###### HostBindings
attr.aria-label attr.aria-roledescription attr.inert attr.role class style.width.%
###### HostListeners
click
###### Accessors
cssClasses isInert

### Inputs

id
Type : `string`
The unique identifier of the slide.

isCurrent
Type : `boolean`
Default value : `false`
Indicates whether this slide is currently active/visible. Automatically coerced to a boolean value.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

slideClick
Type : `EventEmitter`
Emits an event when the slide is clicked.

### HostBindings

attr.aria-label
Type : `string`
Sets the `aria-label` attribute on the host element for accessibility.

attr.aria-roledescription
Type : `string`
Default value : `'slide'`
Sets a more descriptive ARIA role, identifying this element as a slide.

attr.inert
Type : `boolean`
Adds the `inert` attribute if the slide is not active. This disables interaction and focus on inactive slides.

attr.role
Type : `string`
Default value : `'tabpanel'`
Sets the ARIA `role` attribute to indicate this is a tab panel.

class
Type : `string`
Computes and binds the slide's CSS class.

style.width.%
Type : `number`
Controls the width of the slide as a percentage.

### HostListeners

click
`click()`
Handles click events on the slide and emits a slideClick event.

### Methods

onSlideClick
`onSlideClick()`
Decorators : `@HostListener('click')`
Handles click events on the slide and emits a slideClick event. Returns : `void`

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

### Properties

ariaLabel
Type : `string`
Decorators : `@HostBinding('attr.aria-label')`
Sets the `aria-label` attribute on the host element for accessibility.

banner
Type : `EclBannerComponent`
Decorators : `@ContentChild(undefined)`
Optionally captures a banner component projected into the slide.

el
Type : `unknown`
Default value : `inject(ElementRef)`

Public index
Type : `number`
Internal slide index, assigned dynamically by the carousel.

role
Type : `string`
Default value : `'tabpanel'`
Decorators : `@HostBinding('attr.role')`
Sets the ARIA `role` attribute to indicate this is a tab panel.

roleDescription
Type : `string`
Default value : `'slide'`
Decorators : `@HostBinding('attr.aria-roledescription')`
Sets a more descriptive ARIA role, identifying this element as a slide.

width
Type : `number`
Decorators : `@HostBinding('style.width.%')`
Controls the width of the slide as a percentage.

### Accessors

cssClasses
get `cssClasses()`
Computes and binds the slide's CSS class. Returns : `string`

isInert
get `isInert()`
Adds the `inert` attribute if the slide is not active. This disables interaction and focus on inactive slides. Returns : `boolean`

# results matching ""

# No results matching ""