1 files changed, 127 insertions, 0 deletions
diff --git a/stories/angular/autocomplete.stories.ts b/stories/angular/autocomplete.stories.ts
new file mode 100644
index 0000000..89f1c23
--- /dev/null
+++ b/stories/angular/autocomplete.stories.ts
@@ -0,0 +1,127 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { AutoCompleteComponent, AutocompletePipe } from '../../src/angular/components';
+import { FilterBarModule } from '../../src/angular/filterbar/filter-bar.module';
+import { HttpClient, HttpHandler } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+storiesOf('AutoComplete', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+          AutoCompleteComponent
+      ],
+      imports: [
+          FilterBarModule,
+          BrowserAnimationsModule
+      ],
+      providers: [
+          HttpClient, HttpHandler, AutocompletePipe
+      ]
+    })
+  )
+  .add('Simple data', () => {
+    const sampleData = ['red', 'yellow', 'orange', 'green', 'white', 'black'];
+
+    const _label = text('label', 'Simple data (Array)');
+    const _placeholder = text('placeholder', 'Simple data');
+    const _data = array('data', sampleData, ',');
+    const _event = text('(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _data, _event
+        },
+        template: `
+        <div class='storybook-component-wrapper'>
+            <div class='storybook-component-info'>Start writing name of color to see autocomplete in action</div>
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [data]="_data"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Simple data</h2>
+        Using simple data (array), do not need to pass dataSchema.
+        `
+    }
+).add('Complex data', () => {
+    const sampleData = [
+        {id: 'redId', color: 'red'},
+        {id: 'yellowId', color: 'yellow'},
+        {id: 'orangeId', color: 'orange'},
+        {id: 'greenId', color: 'green'},
+        {id: 'whiteId', color: 'white'},
+        {id: 'blackId', color: 'black'}
+    ];
+    const sampleSchema = {key: 'id', value: 'color'};
+
+    const _label = text('label', 'Complex data (Object)');
+    const _placeholder = text('placeholder', 'Complex data');
+    const _data = array('*data', sampleData, ',');
+    const _dataSchema = object('dataSchema', sampleSchema);
+    const _event = text('*(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _data, _dataSchema, _event
+        },
+        template: `
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [data]="_data"
+                [dataSchema]="_dataSchema"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+            `
+        }
+    },
+    { notes: `<h2>Complex data</h2>
+        Using complex data (object), need to pass also dataSchema.
+        `
+    }
+).add('Backend data', () => {
+    const sampleSchema = {key: 'id', value: 'color'};
+
+    const _label = text('label', 'Complex data (Object)');
+    const _placeholder = text('placeholder', 'Complex data');
+    const _dataUrl = text('dataUrl', '../angular/helpers/autocomplete-server-mock.json');
+    const _dataSchema = object('dataSchema', sampleSchema);
+    const _event = text('*(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _dataSchema, _dataUrl, _event
+        },
+        template: `
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [dataUrl]="_dataUrl"
+                [dataSchema]="_dataSchema"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+            `
+        }
+    },
+    { notes: `<h2>Data from server</h2>
+        Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data).
+        `
+    }
+);