### File

`packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`

### Description

This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits events on search and search toggle.

### Extends

`ECLBaseDirective`

### Implements

`ControlValueAccessor` `AfterViewInit` `OnDestroy`

### Metadata

providers | `ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR`
selector | `ecl-site-header-search`
imports | `FormsModule` `TranslateModule` `EUI_ECL_SEARCH_FORM` `EUI_ECL_ICON`
styles | `:host { display: block; }`
templateUrl | `./ecl-site-header-search.component.html`

### Index

###### Properties
class Public isSearchBoxActive role Public searchArrowPosition searchLinkElement
###### Methods
getSearchBoxCssClasses onModelChange onSearch onSearchBoxToggle registerOnChange registerOnTouched writeValue getCssClasses
###### Inputs
searchButtonLabel searchInputPlaceholder searchInputText class e2eAttr tabindex
###### Outputs
searchEvent searchToggle
###### HostBindings
attr.role class

### Inputs

searchButtonLabel
Type : `string`

searchInputPlaceholder
Type : `string`

searchInputText
Type : `string`

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

searchEvent
Type : `EventEmitter`

searchToggle
Type : `EventEmitter`

### HostBindings

attr.role
Type : `string`
Default value : `'search'`
The default role of the component is 'search', should not be changed.

class
Type : `string`
Default value : `'ecl-site-header__search-container'`

### Methods

getSearchBoxCssClasses
`getSearchBoxCssClasses()`
Returns : `string` The classes for the ecl search form.

onModelChange
`onModelChange(newValue: string)`
Parameters :
Name | Type | Optional
newValue | `string` | No
Returns : `void`

onSearch
`onSearch(evt: EclSearchFormEvent)`
Parameters :
Name | Type | Optional
evt | `EclSearchFormEvent` | No
Returns : `boolean`

onSearchBoxToggle
`onSearchBoxToggle(evt: MouseEvent)`
Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

registerOnChange
`registerOnChange(fn: any)`
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

writeValue
`writeValue(value: any)`
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

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

### Properties

class
Type : `string`
Default value : `'ecl-site-header__search-container'`
Decorators : `@HostBinding('class')`

Public isSearchBoxActive
Type : `unknown`
Default value : `false`

role
Type : `string`
Default value : `'search'`
Decorators : `@HostBinding('attr.role')`
The default role of the component is 'search', should not be changed.

Public searchArrowPosition
Type : `string`
The arrow position of the serahc dropdown, when in mobile mode.

searchLinkElement
Type : `ElementRef<HTMLAnchorElement>`
Decorators : `@ViewChild('searchLink', {read: ElementRef})`
The search link element from the view, i.e. the search button.

# results matching ""

# No results matching ""