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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { experimentOn } from '@islavi/ng2-component-lab';
export default experimentOn('Autocomplete').group('Autocomplete',
[
{
id: 'simpleAutocomplete',
title: 'Simple autocomplete data',
description: 'Example of auto complete with simple data',
showSource: true,
context: {
data: ['red', 'yellow', 'orange', 'green', 'white', 'black'],
selectedOption: '',
showSelectedItem: ((value: string) => {
alert(value);
})
},
template: `
<sdc-autocomplete
placeholder="search text"
label="search by color:"
[data]="data"
(itemSelected)="showSelectedItem($event)"
>
</sdc-autocomplete>
`
},
{
id: 'complexAutocomplete',
title: 'Complex autocomplete data',
description: 'Example of auto complete with complex data',
showSource: true,
context: {
data: [
{id: 'redId', color: 'red'},
{id: 'yellowId', color: 'yellow'},
{id: 'orangeId', color: 'orange'},
{id: 'greenId', color: 'green'},
{id: 'whiteId', color: 'white'},
{id: 'blackId', color: 'black'}
],
showSelectedItem: ((value: string) => {
alert(value);
})
},
template: `
<sdc-autocomplete
placeholder="search text"
label="search by color:"
[data]="data"
[dataSchema]="{key: 'id', value: 'color'}"
(itemSelected)="showSelectedItem($event)"
>
</sdc-autocomplete>
`
},
{
id: 'complexAutocompleteWithBeData',
title: 'Complex autocomplete data from server',
description: 'Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data)',
showSource: true,
context: {
showSelectedItem: ((value: string) => {
alert(value);
})
},
template: `
<sdc-autocomplete
placeholder="search text"
label="search by color:"
dataUrl="../../../stories/ng2-component-lab/utils/mock.json"
[dataSchema]="{key: 'id', value: 'color'}"
(itemSelected)="showSelectedItem($event)"
>
</sdc-autocomplete>
`
}
]);
|
