diff options
author | Michael Lando <ml636r@att.com> | 2018-05-21 20:19:48 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2018-05-21 20:19:48 +0000 |
commit | 05b37297177e8a342668c15e5d6f738b51f7aedd (patch) | |
tree | e236c96df52a13f935292db8aa73e84d0c41ad8a /stories/ng2-component-lab/filter-bar.component.exp.ts | |
parent | 884dfb789593d2a3cc319047ab1f0215778aec9f (diff) | |
parent | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff) |
Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP
Diffstat (limited to 'stories/ng2-component-lab/filter-bar.component.exp.ts')
-rw-r--r-- | stories/ng2-component-lab/filter-bar.component.exp.ts | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/filter-bar.component.exp.ts b/stories/ng2-component-lab/filter-bar.component.exp.ts new file mode 100644 index 0000000..12a287d --- /dev/null +++ b/stories/ng2-component-lab/filter-bar.component.exp.ts @@ -0,0 +1,56 @@ +import { experimentOn } from '@islavi/ng2-component-lab'; +import { SearchFilterPipe } from './pipes/search-filter-pipe'; + +const action = (e): void => { + console.log("The search query was changed to: ", e); +}; + +export default experimentOn('Filter Bar').group('FilterBar', [ + { + id: 'filterBar', + title: 'Filter bar', + description: ` + The filter bar component text is updated (after debounce time, + default 200 miliseconds) while user write something. + In this example the event on search query changed: + const action = (e): void => { + console.log("The search query was changed to: ", e); + }; + `, + context: { + onChange: action + }, + showSource: true, + template: ` + <sdc-filter-bar placeholder="filter text" + label="filter example:" + [(searchQuery)]="searchText" + (searchQueryChange)="onChange($event)"> + </sdc-filter-bar> + <br> + Text to search: {{searchText}} + ` + }, + { + id: 'filterBarWithData', + title: 'Filter bar with data', + description: ` + Example of filter bar component with debounce 100 miliseconds, + and with example pipe for filterring. + `, + context: { + data: ['apple', 'banana', 'orange', 'peach'] + }, + showSource: true, + template: ` + <sdc-filter-bar placeholder="filter text" + label="filter example:" + [debounceTime]="100" + [(searchQuery)]="searchText"> + </sdc-filter-bar> + <ul style="height: 100px; background-color: #eeeeee;"> + <li *ngFor="let item of data | PipeSearchFilter:searchText">{{item}}</li> + </ul> + ` + } +]); |