File

src/table/toolbar/table-toolbar-search.component.ts

Extends

Search

Implements

AfterViewInit

Metadata

providers	`{ provide: NG_VALUE_ACCESSOR, useExisting: TableToolbarSearch, multi: true }`
selector	`cds-table-toolbar-search, ibm-table-toolbar-search`
templateUrl	`../../search/search.component.html`

Index

Inputs

active
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:79`
Set to `true` to expand the toolbar search component.

ariaLabel
Type : `string`
Inherited from `Search`
Defined in `Search:124`
Sets the aria label on the `div` element with the `search` role.

autocomplete
Type : `string`
Default value : `"on"`
Inherited from `Search`
Defined in `Search:104`
Sets the autocomplete attribute on the `input` element. For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

clearButtonTitle
Type : `any`
Default value : `this.i18n.get().SEARCH.CLEAR_BUTTON`
Inherited from `Search`
Defined in `Search:116`
Used to set the `title` attribute of the clear button.

disabled
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:62`
Set to `true` for a disabled search input.

expandable
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:71`
Set to `true` to make the search component expandable. `expandable` would override `toolbar` property behaviours.

fluid
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:128`
Experimental: enable fluid state

id
Type : `string`
Default value : `search-${Search.searchCount}`
Inherited from `Search`
Defined in `Search:91`
The unique id for the search component.

label
Type : `any`
Default value : `this.i18n.get().SEARCH.LABEL`
Inherited from `Search`
Defined in `Search:108`
Sets the text inside the `label` tag.

name
Type : `string`
Inherited from `Search`
Defined in `Search:87`
Sets the name attribute on the `input` element.

placeholder
Type : `any`
Default value : `this.i18n.get().SEARCH.PLACEHOLDER`
Inherited from `Search`
Defined in `Search:112`
Sets the placeholder attribute on the `input` element.

required
Type : `boolean`
Inherited from `Search`
Defined in `Search:95`
Reflects the required attribute of the `input` element.

searchTitle
Type : `string`
Default value : `""`
Inherited from `Search`
Defined in `Search:120`
Title for the search trigger

size
Type : `"sm" \| "md" \| "lg"`
Default value : `"md"`
Inherited from `Search`
Defined in `Search:57`
Size of the search field.

skeleton
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:75`
Set to `true` for a loading search component.

tableSearch
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:83`
Specifies whether the search component is used in the table toolbar.

theme
Type : `"light" \| "dark"`
Default value : `"dark"`
Inherited from `Search`
Defined in `Search:52`

toolbar
Type : `boolean`
Default value : `false`
Inherited from `Search`
Defined in `Search:66`
Set to `true` for a toolbar search component.

value
Type : `string`
Default value : `""`
Inherited from `Search`
Defined in `Search:99`
Sets the value attribute on the `input` element.

Outputs

clear
Type : `EventEmitter`
Inherited from `Search`
Defined in `Search:137`
Emits an event when the clear button is clicked.

open
Type : `EventEmitter`
Inherited from `Search`
Defined in `Search:133`

search
Type : `EventEmitter`
Inherited from `Search`
Defined in `Search:141`
Emits an event on enter.

valueChange
Type : `EventEmitter`
Inherited from `Search`
Defined in `Search:132`
Emits an event when value is changed.

HostBindings

class.cds--toolbar-content

Type : boolean

Default value : true

Defined in src/table/toolbar/table-toolbar-search.component.ts:27

class.cds--form-item

Type : boolean

Inherited from Search

Defined in Search:40

class.cds--text-input--fluid__skeleton

Type : boolean

Inherited from Search

Defined in Search:44

HostListeners

compositionend

Arguments : '$event'

compositionend(event)

Inherited from Search

Defined in Search:285

Called when IME composition finishes.

compositionstart

Arguments : '$event'

compositionstart(event)

Inherited from Search

Defined in Search:277

Called when using IME composition.

focusin

Arguments : '$event'

focusin(event)

Inherited from Search

Defined in Search:263

focusout

Arguments : '$event'

focusout(event)

Inherited from Search

Defined in Search:251

keydown

Arguments : '$event'

keydown(event: KeyboardEvent)

Inherited from Search

Defined in Search:231

Methods

ngAfterViewInit

ngAfterViewInit()

Defined in src/table/toolbar/table-toolbar-search.component.ts:29

Returns : void

clearSearch

clearSearch()

Inherited from Search

Defined in Search:213

Called when clear button is clicked.

Returns : void

compositionEnd

compositionEnd(event)

Decorators :

@HostListener('compositionend', ['$event'])

Inherited from Search

Defined in Search:285

Called when IME composition finishes.

Parameters :

Name	Optional
event	No

Returns : void

compositionStart

compositionStart(event)

Decorators :

@HostListener('compositionstart', ['$event'])

Inherited from Search

Defined in Search:277

Called when using IME composition.

Parameters :

Name	Optional
event	No

Returns : void

doValueChange

doValueChange()

Inherited from Search

Defined in Search:219

Returns : void

focusIn

focusIn(event)

Decorators :

@HostListener('focusin', ['$event'])

Inherited from Search

Defined in Search:263

Parameters :

Name	Optional
event	No

Returns : void

focusOut

focusOut(event)

Decorators :

@HostListener('focusout', ['$event'])

Inherited from Search

Defined in Search:251

Parameters :

Name	Optional
event	No

Returns : void

keyDown

keyDown(event: KeyboardEvent)

Decorators :

@HostListener('keydown', ['$event'])

Inherited from Search

Defined in Search:231

Parameters :

Name	Type	Optional
event	`KeyboardEvent`	No

Returns : void

onEnter

onEnter()

Inherited from Search

Defined in Search:206

Called on enter.

Returns : void

onSearch

onSearch(search: string)

Inherited from Search

Defined in Search:195

Called when text is written in the input.

Parameters :

Name	Type	Optional	Description
search	`string`	No	The input text.

Returns : void

openSearch

openSearch()

Inherited from Search

Defined in Search:224

Returns : void

Public registerOnChange

registerOnChange(fn: any)

Inherited from Search

Defined in Search:169

Sets a method in order to propagate changes back to the form.

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

Public registerOnTouched

registerOnTouched(fn: any)

Inherited from Search

Defined in Search:177

Registers a callback to be triggered when the control has been touched.

Parameters :

Name	Type	Optional	Description
fn	`any`	No	Callback to be triggered when the search input is touched.

Returns : void

Public writeValue

writeValue(value: any)

Inherited from Search

Defined in Search:162

This is the initial value set to the component

Parameters :

Name	Type	Optional	Description
value	`any`	No	The input value.

Returns : void

Properties

hostClass

Default value : true

Decorators :


                            @HostBinding('class.cds--toolbar-content')

Defined in src/table/toolbar/table-toolbar-search.component.ts:27

size

Type : "sm" | "md" | "lg"

Default value : "lg"

Defined in src/table/toolbar/table-toolbar-search.component.ts:25

tableSearch

Default value : true

Defined in src/table/toolbar/table-toolbar-search.component.ts:23

inputRef

Type : ElementRef

Decorators :


                            @ViewChild('input')

Inherited from Search

Defined in Search:143

Protected isComposing

Default value : false

Inherited from Search

Defined in Search:148

Sets true when composing text via IME.

onTouched

Type : function

Default value : () => {...}

Inherited from Search

Defined in Search:184

Called when search input is blurred. Needed to properly implement ControlValueAccessor.

propagateChange

Default value : () => {...}

Inherited from Search

Defined in Search:189

Method set in registerOnChange to propagate changes back to the form.

Static searchCount

Type : number

Default value : 0

Inherited from Search

Defined in Search:38

Variable used for creating unique ids for search components.

import { Search } from "carbon-components-angular/search";
import {
	Component,
	HostBinding,
	Input,
	OnInit,
	AfterViewInit
} from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";

@Component({
	selector: "cds-table-toolbar-search, ibm-table-toolbar-search",
	templateUrl: "../../search/search.component.html",
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: TableToolbarSearch,
			multi: true
		}
	]
})
export class TableToolbarSearch extends Search implements AfterViewInit {
	tableSearch = true;

	size: "sm" | "md" | "lg" = "lg";

	@HostBinding("class.cds--toolbar-content") hostClass = true;

	ngAfterViewInit() {
		setTimeout(() => {
			if (this.value) {
				this.openSearch();
			}
		});
	}
}

<div
	class="cds--search"
	[ngClass]="{
		'cds--search--sm': size === 'sm',
		'cds--search--md': size === 'md',
		'cds--search--lg': size === 'lg',
		'cds--search--light': theme === 'light',
		'cds--skeleton': skeleton && !fluid,
		'cds--search--expandable': expandable && !tableSearch,
		'cds--search--expanded': expandable && !tableSearch && active,
		'cds--toolbar-search': toolbar && !expandable,
		'cds--toolbar-search--active': toolbar && !expandable && active,
		'cds--toolbar-search-container-persistent': tableSearch && !expandable,
		'cds--toolbar-search-container-expandable': tableSearch && expandable,
		'cds--toolbar-search-container-active': tableSearch && expandable && active,
		'cds--search--fluid': fluid,
		'cds--search--disabled': disabled
	}"
	role="search"
	[attr.aria-label]="ariaLabel"
	(click)="openSearch()">
	<label
		class="cds--label"
		[for]="id"
		[ngClass]="{ 'cds--skeleton': skeleton && fluid }">
		{{ !skeleton ? label : ''}}
	</label>

	<div *ngIf="skeleton; else enableInput" class="cds--text-input cds--skeleton"></div>
	<ng-template #enableInput>
		<input
			#input
			class="cds--search-input"
			[type]="tableSearch || !toolbar ? 'text' : 'search'"
			[id]="id"
			[value]="value"
			[autocomplete]="autocomplete"
			[placeholder]="placeholder"
			[disabled]="disabled"
			[required]="required"
			(input)="onSearch($event.target.value)"
			(keyup.enter)="onEnter()"/>
		<button
			*ngIf="!tableSearch && toolbar"
			class="cds--toolbar-search__btn"
			(click)="openSearch()"
			aria-label="Open search">
			<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>
		</button>
		<svg
			cdsIcon="search"
			*ngIf="tableSearch || !toolbar"
			class="cds--search-magnifier-icon"
			size="16">
		</svg>
	</ng-template>

	<button
		*ngIf="tableSearch || !toolbar"
		class="cds--search-close"
		[ngClass]="{
			'cds--search-close--hidden': !value || value.length === 0
		}"
		[title]="clearButtonTitle"
		(click)="clearSearch()">
		<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>
		<svg cdsIcon="close" size="16"></svg>
	</button>
</div>

Legend

Html element

Component

Html element with directive

File

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

results matching ""

No results matching ""