# TdSearchBoxComponent: td-search-box

`td-search-box` element to generate a search box with animations.

## API Summary

#### Inputs

- backIcon?: string
  - The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
- searchIcon?: string
  - The icon used to open/focus the search toggle. Defaults to 'search' icon.
- clearIcon?: string
  - The icon used to clear the search input. Defaults to 'cancel' icon.
- showUnderline?: boolean
  - Sets if the input underline should be visible. Defaults to 'false'.
- debounce?: number
  - Debounce timeout between keypresses. Defaults to 400.
- alwaysVisible?: boolean
  - Sets if the input should always be visible. Defaults to 'false'.
- placeholder?: string
  - Placeholder for the underlying input component.

#### Events

- searchDebounce?: string
  - Event emitted after the [debounce] timeout.
  - Emits a [string].
- search?: string
  - Event emitted after the key enter has been pressed.
  - Emits a [string].
- clear?: string
  - Event emitted after the clear icon has been clicked.
  - Emits [void].
- blur: function
  - Event emitted after the blur event has been called in underlying input.
  - Emits [void].

## Usage

Example for HTML usage:

```html
<td-search-box
  backIcon="arrow_back"
  placeholder="Search here"
  [(ngModel)]="searchInputTerm"
  [showUnderline]="false|true"
  [debounce]="500"
  [alwaysVisible]="false|true"
  (searchDebounce)="searchInputTerm = $event"
  (search)="searchInputTerm = $event"
  (clear)="searchInputTerm = ''"
  (blur)="onBlurEvent()"
>
</td-search-box>
```

# TdSearchInputComponent: td-search-input

`td-search-input` element to generate a search input with its animated cancel button.

## API Summary

#### Inputs

- debounce?: number
  - Debounce timeout between keypresses. Defaults to 400.
- placeholder?: string
  - Placeholder for the underlying input component.
- showUnderline?: boolean
  - Sets if the input underline should be visible. Defaults to 'false'.
- clearIcon?: string
  - The icon used to clear the search input. Defaults to 'cancel' icon.
- appearance?: MatFormFieldAppearance
  - Appearance style for the underlying input component.

#### Events

- searchDebounce: function
  - Event emitted after the [debounce] timeout.
  - Emits a [string].
- search: function
  - Event emitted after the key enter has been pressed.
  - Emits a [string].
- clear: function
  - Event emitted after the clear icon has been clicked.
  - Emits [void].
- blur: function
  - Event emitted after the blur event has been called in underlying input.
  - Emits [void].

#### Methods

- focus: function
  - Method to focus to underlying input.
- clearSearch: function
  - Method to clear the underlying input.

## Usage

Example for HTML usage:

```html
<td-search-input
  appearance="fill|outline"
  placeholder="Search here"
  [(ngModel)]="searchInputTerm"
  [showUnderline]="false|true"
  [debounce]="500"
  (searchDebounce)="searchInputTerm = $event"
  (search)="searchInputTerm = $event"
  (clear)="searchInputTerm = ''"
>
</td-search-input>
```

## Setup

Import the [CovalentSearchModule] in your NgModule:

```typescript
import { CovalentSearchModule } from '@covalent/core/search';
@NgModule({
  imports: [
    CovalentSearchModule,
    ...
  ],
  ...
})
export class MyModule {}
```