File

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

Extends

Search

Implements

OnInit

Metadata

selector	`ibm-table-toolbar-search`
templateUrl	`../../search/search.component.html`

Index

Inputs

`expandable`	Default value : `false`
Defined in src/table/toolbar/table-toolbar-search.component.ts:16

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

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

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

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

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

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

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

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

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

`size`	Size of the search field.
Inherited from `Search`
Defined in Search:60

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

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

theme

light or dark search theme.

Type : "light" | "dark"

Default value : "dark"

Inherited from Search

Defined in Search:56

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

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

Outputs

`change`	`$event` Type: `EventEmitter`
Inherited from `Search`
Defined in Search:128

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

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

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

HostBindings

class.bx--toolbar-search-container-active

class.bx--toolbar-search-container-active:

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

class.bx--toolbar-search-container-persistent

class.bx--toolbar-search-container-persistent:

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

class.bx--form-item

class.bx--form-item:

Inherited from Search

Defined in Search:51

HostListeners

focusout

Arguments : '$event'

focusout(event)

Inherited from Search

Defined in Search:229

keydown

Arguments : '$event'

keydown(event: KeyboardEvent)

Inherited from Search

Defined in Search:218

Methods

ngOnInit

ngOnInit()

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

Returns : void

clearSearch

clearSearch()

Inherited from Search

Defined in Search:196

Called when clear button is clicked.

Returns : void

doValueChange

doValueChange()

Inherited from Search

Defined in Search:202

Returns : void

onSearch

onSearch(search: string)

Inherited from Search

Defined in Search:188

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:211

Returns : void

Public registerOnChange

registerOnChange(fn: any)

Inherited from Search

Defined in Search:162

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:170

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:155

This is the initial value set to the component

Parameters :

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

Returns : void

Properties

tableSearch

tableSearch:

Default value : true

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

Protected _size

_size:     "sm" | "xl"

Type : "sm" | "xl"

Default value : "xl"

Inherited from Search

Defined in Search:141

inputRef

inputRef:     ElementRef

Type : ElementRef

Decorators :


                                @ViewChild('input')

Inherited from Search

Defined in Search:139

onTouched

onTouched:     function

Type : function

Default value : () => {}

Inherited from Search

Defined in Search:177

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

propagateChange

propagateChange:

Default value : (_: any) => {}

Inherited from Search

Defined in Search:182

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

Static searchCount

searchCount:     number

Type : number

Default value : 0

Inherited from Search

Defined in Search:49

Variable used for creating unique ids for search components.

import { Search } from "./../../search/search.component";
import {
	Component,
	HostBinding,
	Input,
	OnInit
} from "@angular/core";

@Component({
	selector: "ibm-table-toolbar-search",
	templateUrl: "../../search/search.component.html"
})
export class TableToolbarSearch extends Search implements OnInit {
	tableSearch = true;

	@HostBinding("class.bx--toolbar-search-container-expandable") @Input() expandable = false;

	@HostBinding("class.bx--toolbar-search-container-persistent") get persistentClass() { return !this.expandable; }

	@HostBinding("class.bx--toolbar-search-container-active") get activeClass() {
		return this.active && (this.value !== null || this.value !== "");
	}

	ngOnInit() {
		this.size = "sm";
		if (this.expandable) {
			this.toolbar = true;
		}
	}
}

<div
	class="bx--search"
	[ngClass]="{
		'bx--search--sm': size === 'sm',
		'bx--search--xl': size === 'xl',
		'bx--search--light': theme === 'light',
		'bx--skeleton': skeleton,
		'bx--toolbar-search': toolbar,
		'bx--toolbar-search--active': toolbar && active
	}"
	role="search">
	<label class="bx--label" [for]="id">{{label}}</label>

	<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>
	<ng-template #enableInput>
		<input
			#input
			*ngIf="!toolbar || active || value !== ''"
			class="bx--search-input"
			[type]="tableSearch || !toolbar ? 'text' : 'search'"
			[id]="id"
			[value]="value"
			[autocomplete]="autocomplete"
			[placeholder]="placeholder"
			[disabled]="disabled"
			[required]="required"
			(input)="onSearch($event.target.value)"/>
		<button *ngIf="!tableSearch && toolbar" class="bx--toolbar-search__btn" (click)="openSearch()">
			<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>
		</button>
		<ibm-icon-search16 *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="bx--search-magnifier"></ibm-icon-search16>
	</ng-template>

	<button
		*ngIf="tableSearch || !toolbar"
		class="bx--search-close"
		[ngClass]="{
			'bx--search-close--hidden': !value || value.length === 0
		}"
		[title]="clearButtonTitle"
		[attr.aria-label]="clearButtonTitle"
		(click)="clearSearch()">
		<ibm-icon-close16></ibm-icon-close16>
	</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

result-matching ""

No results matching ""