gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
101 lines (100 loc) • 3.37 kB
TypeScript
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/**
* The SearchBar component should be the primary search input for the app. It should be
* located near the top of the screen, below the [TopBar](#/top-bar).
*
* ```html
* <gtx-search-bar [query]="searchQuery"
* (change)="onChange($event)"
* (search)="search($event)">
* </gtx-search-bar>
* ```
*
* ## Use With NgModel
* The search query can be bound with `NgModel`, which can be useful for implementing a reset function:
*
* ```html
* <gtx-search-bar [(ngModel)]="searchQuery"
* (clear)="searchQuery = ''">
* </gtx-search-bar>
* ```
*
* ## Content Projection
* Content inside the `<gtx-search-bar>` tags will be projected inside the component, to the left of the
* search bar. This can be used, for example, to display current filters being applied to the search.
*
* ```html
* <gtx-search-bar>
* <div class="chip">Tag 1<i class="material-icons">close</i></div>
* </gtx-search-bar>
* ```
*
* ## Custom Icons
* Icons in the `<gtx-search-bar>` can be replaced with custom ones.
*
* ```html
* <gtx-search-bar submitIcon="filter_list"
* clearIcon="undo">
* </gtx-search-bar>
* ```
*/
export declare class SearchBar implements ControlValueAccessor {
private changeDetector;
/**
* Sets the input field to be auto-focused. Handled by `AutofocusDirective`.
*/
autofocus: boolean;
/**
* Value that pre-fills the search input with a string value.
*/
query: string;
/**
* Sets the icon displayed for the submit button
*/
submitIcon: string;
/**
* Sets the icon displayed for the clear button
*/
clearIcon: string;
/**
* Placeholder text which is shown when no text is entered.
*/
placeholder: string;
/**
* Setting this attribute will prevent the "clear" button from being displayed
* when the query is non-empty.
*/
get hideClearButton(): boolean;
set hideClearButton(val: boolean);
/**
* Fired when either the search button is clicked, or
* the "enter" key is pressed while the input has focus.
*/
search: EventEmitter<string>;
/**
* Fired whenever the value of the input changes.
*/
change: EventEmitter<string>;
/**
* Fired when the clear button is clicked.
*/
clear: EventEmitter<boolean>;
private _hideClearButton;
onChange: any;
onTouched: any;
constructor(changeDetector: ChangeDetectorRef);
doSearch(): void;
/**
* Handler for pressing "enter" key.
*/
onKeyDown(event: KeyboardEvent): void;
onInputChange(event: string): void;
onInputBlur(event: string): void;
writeValue(value: any): void;
registerOnChange(fn: Function): void;
registerOnTouched(fn: Function): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SearchBar, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SearchBar, "gtx-search-bar", never, { "autofocus": "autofocus"; "query": "query"; "submitIcon": "submitIcon"; "clearIcon": "clearIcon"; "placeholder": "placeholder"; "hideClearButton": "hideClearButton"; }, { "search": "search"; "change": "change"; "clear": "clear"; }, never, ["*"]>;
}