### File

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

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `ecl-timeline-item`
imports | `EUI_ECL_ICON` `EUI_ECL_BUTTON` `NgTemplateOutlet`
styles | `ecl-timeline-item { display: list-item; }`
templateUrl | `ecl-timeline-item.component.html`

### Index

###### Properties
destroy$ eclLink timelineItemToggler
###### Methods
hasDefaultToggler onTogglerClick getCssClasses
###### Inputs
collapseLabel expandLabel isCollapsed isToggler isTogglerExpanded toggleGroup class e2eAttr tabindex
###### Outputs
toggle
###### HostBindings
class
###### Accessors
cssClasses isShowExpandLabel isShowCollapseLabel

### Inputs

collapseLabel
Type : `string`
Default value : `'Collapse'`
Text label shown when the item is expanded and can be collapsed. Defaults to `'Collapse'`.

expandLabel
Type : `string`
Default value : `'Expand'`
Text label shown when the item is collapsed and can be expanded. Defaults to `'Expand'`.

isCollapsed
Type : `boolean`
Default value : `false`
Whether the item is collapsed. Adds the `ecl-timeline__item--collapsed` CSS class when true.

isToggler
Type : `boolean`
Default value : `false`
Whether the item is a toggler (e.g. expands/collapses related items). Adds the `ecl-timeline__item--toggle` CSS class when true.

isTogglerExpanded
Type : `boolean`
Default value : `false`
Indicates whether the toggler is initially expanded. Used for toggler-type items.

toggleGroup
Type : `string`
Name of the toggle group that this item belongs to. Used to coordinate collapsing/expanding related items.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

toggle
Type : `EventEmitter`
Event emitted when the toggler is clicked. Consumers can call `preventDefault()` on the event to cancel toggle behavior.

### HostBindings

class
Type : `string`
Adds the `ecl-timeline__item` class to the host element.

### Methods

hasDefaultToggler
`hasDefaultToggler()`
Checks whether the default toggler UI should be used. Returns true if this is a toggler and no custom toggler component is projected. Returns : `boolean`

onTogglerClick
`onTogglerClick(evt: MouseEvent)`
Handles click events from the default toggler element. Parameters :
Name | Type | Optional | Description
evt | `MouseEvent` | No | The mouse click event.
Returns : `void`

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

### Properties

destroy$
Type : `Subject<boolean>`
Default value : `new Subject<boolean>()`

eclLink
Type : `EclLinkDirective`
Decorators : `@ContentChild(undefined)`
Reference to a projected ECL link, used for setting focus after toggle.

timelineItemToggler
Type : `EclTimelineItemTogglerComponent`
Decorators : `@ContentChild(undefined)`
Reference to a projected custom toggler component.

### Accessors

cssClasses
get `cssClasses()`
Adds the `ecl-timeline__item` class to the host element. Returns : `string`

isShowExpandLabel
get `isShowExpandLabel()`
True if the expand label should be visible. Returns : `boolean`

isShowCollapseLabel
get `isShowCollapseLabel()`
True if the collapse label should be visible. Returns : `boolean`

# results matching ""

# No results matching ""