### File

`packages/components/eui-tree-list/toolbar/toolbar.component.ts`

### Description

Toolbar component for eui-tree-list providing filter and expand/collapse controls. Displays search input for filtering tree items and buttons for expanding or collapsing all items. Automatically emits filter events on initialization if filter value is provided. Manages toggle state for expand/collapse button display. Must be used within eui-tree-list component to control tree list behavior.

### Basic Usage

Example :

    <!-- Toolbar is typically used internally by eui-tree-list -->
    <eui-tree-list [isShowToolbar]="true">
      <eui-tree-list-item label="Item 1" />
      <eui-tree-list-item label="Item 2" />
    </eui-tree-list>

    <!-- Custom labels -->
    <eui-tree-list
      [isShowToolbar]="true"
      filterLabel="Search items..."
      expandAllLabel="Expand"
      collapseAllLabel="Collapse">
      <!-- items -->
    </eui-tree-list>

Example :

    // Listen to toolbar events
    onFilter(keyword: string): void {
      console.log('Filtering by:', keyword);
    }

    onExpandAll(): void {
      console.log('All items expanded');
    }

### Accessibility

- Search input has proper placeholder and label
- Expand/collapse buttons have aria-labels
- Icons have descriptive aria-labels
- Keyboard accessible controls

### Notes

- Automatically managed by parent eui-tree-list component
- Filter emits on initialization if filterValue is set
- Toggle button switches between expand and collapse states
- Supports icon-only buttons when labels are empty strings
- Clearable search input for easy filter reset

### Implements

`OnInit` `OnChanges`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-tree-list-toolbar`
imports | `FormsModule` `EUI_INPUT_TEXT` `EUI_BUTTON` `EUI_ICON` `EUI_ICON_INPUT`
templateUrl | `./toolbar.component.html`

### Index

###### Properties
classes
###### Inputs
collapseAllLabel e2eAttr expandAllLabel filterLabel filterValue hasLabels isFilterVisible isToggleExpanded isToggleVisible isVisible
###### Outputs
collapseAll expandAll filter
###### HostBindings
class

### Inputs

collapseAllLabel
Type : `string`
The label for the collapse all button

e2eAttr
Type : `string`
Default value : `'eui-tree-list-toolbar'`

expandAllLabel
Type : `string`
The label for the expand all button

filterLabel
Type : `string`
The value of the filter placeholder

filterValue
Type : `string`
Default value : `''`
The value of the filter input

hasLabels
Type : `boolean`
Default value : `true`

isFilterVisible
Type : `boolean`
Default value : `true`

isToggleExpanded
Type : `boolean`
Default value : `false`
Option that toggles the expanded/collapsed state of the corresponding button

isToggleVisible
Type : `boolean`
Default value : `true`

isVisible
Type : `boolean`
Default value : `false`
Shows or hides the toolbar

### Outputs

collapseAll
Type : `EventEmitter`
Event emitted when the collapse all button is clicked.

expandAll
Type : `EventEmitter`
Event emitted when the expand all button is clicked.

filter
Type : `EventEmitter`
Event emitted if there is or if a filter value changes.

### HostBindings

class
Type : `string`
Default value : `'eui-tree-list-toolbar'`

### Properties

classes
Type : `string`
Default value : `'eui-tree-list-toolbar'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""