aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/filter-bar.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/filter-bar.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/filter-bar.component.exp.ts56
1 files changed, 0 insertions, 56 deletions
diff --git a/stories/ng2-component-lab/filter-bar.component.exp.ts b/stories/ng2-component-lab/filter-bar.component.exp.ts
deleted file mode 100644
index 12a287d..0000000
--- a/stories/ng2-component-lab/filter-bar.component.exp.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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>
- `
- }
-]);