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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import { storiesOf } from '@storybook/angular';
import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
import { withNotes } from '@storybook/addon-notes';
import { action, configureActions } from '@storybook/addon-actions';
import { moduleMetadata } from '@storybook/angular';
import { CheckboxComponent, InputComponent } from '../../src/angular/components';
import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive';
import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
storiesOf('Form elements|Input', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
],
imports: [
FormElementsModule
]
})
)
.add('Simple', () => {
const _label = text('label', 'Please Enter value');
const _name = text('name', 'InputName');
const _testId = text('testId', 'sample-test-id');
return {
props: {
checkedChange: action('Checkbox value changed '),
_label, _name, _testId
},
template: `
<sdc-input
[label]="_label"
[name]="_name"
[testId]="_testId"
>
</sdc-input>
`
}
},
{ notes: `<h2>Simple Input</h2>
Simple input example.
Use the KNOBS tab to change values.`
}
)
.add('With debounce', () => {
const _label = text('label', 'Please Enter value');
const _name = text('name', 'InputName');
const _testId = text('testId', 'sample-test-id');
const _debounceTime = number('debounceTime', 1000);
const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
return {
props: {
onValueChanged: action('Input value changed '),
_label, _name, _testId, _debounceTime
},
template: `
<sdc-input
[label]="_label"
[name]="_name"
[testId]="_testId"
[debounceTime]="_debounceTime"
(valueChange)=onValueChanged($event);
>
</sdc-input>
`
}
},
{ notes: `<h2>Input with debounce</h2>
Wait for 1000 miliseconds for value changed event .
Use the KNOBS tab to change values.`
}
)
.add('Full options', () => {
const _label = text('label', 'Please Enter value');
const _name = text('name', 'InputName');
const _placeHolder = text('placeHolder', 'Input placeHolder');
const _value = text('value', 'Some value');
const _type = select('type', ['text', 'number', 'email']);
const _disabled = boolean('disabled', false);
const _required = boolean('required', false);
const _testId = text('testId', 'sample-test-id');
const _debounceTime = number('debounceTime', 1000);
const _minLength = number('minLength', 4);
const _maxLength = number('maxLength', 10);
const _classNames = text('classNames', 'custom-input-class');
const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
return {
props: {
onValueChanged: action('Input value changed '),
_label, _name, _value, _testId, _debounceTime, _type, _disabled, _placeHolder, _required, _maxLength, _minLength, _classNames
},
template: `
<sdc-input
[label]="_label"
[name]="_name"
[placeHolder]="_placeHolder"
[type]="_type"
[value]="_value"
[disabled]="_disabled"
[required]="_required"
[testId]="_testId"
[minLength]="_minLength"
[maxLength]="_maxLength"
[debounceTime]="_debounceTime"
[classNames]="_classNames"
(valueChange)=onValueChanged($event);
>
</sdc-input>
`
}
},
{ notes: `<h2>Input with debounce</h2>
Wait for 1000 miliseconds for value changed event .
Use the KNOBS tab to change values.`
}
)
|
