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
|
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 { ChecklistComponent, CheckboxComponent } from '../../src/angular/components';
import { ChecklistModel, ChecklistItemModel } from '../../src/angular/common';
import { RippleAnimationAction } from '../../src/angular/animations/ripple-click.animation.directive';
const checkListModelExample: ChecklistModel = new ChecklistModel([],[
new ChecklistItemModel('apple'),
new ChecklistItemModel('banana'),
new ChecklistItemModel('orange')
]);
storiesOf('Form elements|Checklist', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
ChecklistComponent,
RippleAnimationAction,
CheckboxComponent
],
imports: [
]
})
)
.add('Simple checklist', () => {
//const _checklistModel = object('checklistModel', checkListModelExample);
const _checkedChange = text('*(checkedChange)', 'Event throws when checklist changed, see in Action logger tab.');
return {
props: {
checkedChange: action('Checklist changed '),
checkListModelExample
},
template: `
<sdc-checklist
[checklistModel]="checkListModelExample">
(checkedChange)="checkedChange($event)"
</sdc-checklist>
`
}
},
{ notes: `<h2>Checklist</h2>
Full example of checklist.
Use the KNOBS tab to change values.`
}
)
|
