aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/autocomplete.component.exp.ts
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /stories/ng2-component-lab/autocomplete.component.exp.ts
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/ng2-component-lab/autocomplete.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/autocomplete.component.exp.ts77
1 files changed, 77 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/autocomplete.component.exp.ts b/stories/ng2-component-lab/autocomplete.component.exp.ts
new file mode 100644
index 0000000..a1fa3dd
--- /dev/null
+++ b/stories/ng2-component-lab/autocomplete.component.exp.ts
@@ -0,0 +1,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>
+ `
+ }
+]);