1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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>
`
}
]);
|
