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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
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 { ValidationModule } from '../../src/angular/form-elements/validation/validation.module';
import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
import { RegexPatterns } from '../../src/angular/common/enums';
import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
let stories = storiesOf('Validation', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
],
imports: [
ValidationModule,
FormElementsModule,
ButtonsModule
]
})
)
let containRequiredValid = true;
let containRegexValid = true;
let containCustomValid = true;
let containValidationDisabled = true;
let containValidatorsDisabled = true;
createStory(stories, "All options", containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled,
containValidatorsDisabled, "Validations", "Full example of validation.");
createStory(stories, "Required validator", containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled,
!containValidatorsDisabled, "Validations", "Example of validation with required validator.");
createStory(stories, "Regex validator", !containRequiredValid, containRegexValid, !containCustomValid, !containValidationDisabled,
!containValidatorsDisabled, "Validations", "Example of validation with regex validator.");
createStory(stories, "Custom validator", !containRequiredValid, !containRegexValid, containCustomValid, !containValidationDisabled,
!containValidatorsDisabled, "Validations", "Example of validation with custom validator.");
createStory(stories, "Validation disabled", !containRequiredValid, !containRegexValid, !containCustomValid, containValidationDisabled,
!containValidatorsDisabled, "Validations", "Example of validation with validation disabled.");
createStory(stories, "Validator disabled", !containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled,
containValidatorsDisabled, "Validations", "Example of validation with validators disabled.");
let containEnterValue = true
createEmailStory(stories, "Email validation", !containEnterValue, "Validations", "Example of email validation.");
createEmailStory(stories, "Value entered", containEnterValue, "Validations", "Example of validation with value already entered.");
function createStory(stories, title, containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled,
containValidatorsDisabled, notesTitle, notesText){
stories.add(title, () => {
const _validationDisabled = containValidationDisabled ? boolean('Validation disabled', false): false;
const _requiredMessage = containRequiredValid ? text('Required Validator message', 'Field is required!'): 'Field is required!';
const _regexMessage = containRegexValid ? text('Regex Validator message', 'This is not a number!'): 'This is not a number!';
const _customMessage = containCustomValid ? text('custom Validator message', 'The number should be 100'): 'The number should be 100';
const _pattern = containRegexValid ? text('Regex Validator pattern', RegexPatterns.numbers): RegexPatterns.numbers;
const requiredValidDisabled = containValidatorsDisabled ? boolean('Required Validator disabled', false): false;
const regexValidDisabled = containValidatorsDisabled ? boolean('Regex Validator disabled', false): false;
const customValidDisabled = containValidatorsDisabled ? boolean('Custom Validator disabled', false): false;
const _customCallback = containCustomValid ? text ('*(Callback)', 'User function that define a validation'): null;
const _validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
return {
props: {
displayRequiredValid: containRequiredValid || containValidationDisabled || containValidatorsDisabled,
displayRegexValid: containRegexValid || containValidatorsDisabled,
displayCustomValid: containCustomValid || containValidatorsDisabled,
onChange: action('validation valids'),
isValueHundred: (value: any) => {
return (Number(value) === 100) ? true : false;
},
_validationDisabled, _requiredMessage, _regexMessage, _customMessage, _pattern,
requiredValidDisabled, regexValidDisabled, customValidDisabled
},
template: `
<sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
<sdc-validation [validateElement]="numberValidator" (validityChanged)="onChange($event)" [disabled]="_validationDisabled">
<sdc-required-validator *ngIf="this.displayRequiredValid" [message]="_requiredMessage" [disabled]="requiredValidDisabled"></sdc-required-validator>
<sdc-regex-validator *ngIf="this.displayRegexValid" [message]="_regexMessage" [pattern]="_pattern" [disabled]="regexValidDisabled"></sdc-regex-validator>
<sdc-custom-validator *ngIf="this.displayCustomValid" [message]="_customMessage" [callback]="isValueHundred" [disabled]="customValidDisabled"></sdc-custom-validator>
</sdc-validation>
`
}
},
{ notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
}
)
}
function createEmailStory(stories, title, conatainsEnterValue, notesTitle, notesText){
stories.add(title, () => {
const _message = text('Validation message','This is not a valid email!');
const _pattern = text('Regex validation pattern', RegexPatterns.email);
const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
return {
props: {
inputValue: conatainsEnterValue ? "firstName@" : "",
onChange: action('Email validation valids'),
_message, _pattern
},
template: `
<sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" [value]="inputValue"></sdc-input>
<sdc-validation [validateElement]="email" (validityChanged)="onChange($event)">
<sdc-regex-validator [message]="_message" [pattern]="_pattern" ></sdc-regex-validator>
</sdc-validation>
`
}
},
{ notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
}
)
}
stories.add('Validation in drop down', () => {
const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
return {
props: {
options:[
{
"label": "First Option Label",
"value": "firstOptionValue"
},
{
"label": "Second Option Label",
"value": "secondOptionValue"
},
{
"label": "Third Option Label",
"value": "thirdOptionValue",
"type": "Simple"
}
],
onChange: action('Dropdown validation valids'),
isThirdOption: (value: any) => {
return value === 'thirdOptionValue';
}
},
template: `
<sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"
(changed)="onChange(validation.validate())"></sdc-dropdown>
<sdc-validation #validation [validateElement]="mydropdown" (validityChanged)="onChange($event)">
<sdc-required-validator message="Field is required!"></sdc-required-validator>
<sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
</sdc-validation>
`
}
},
{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.`
}
)
stories.add('Validation group', () => {
const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
return {
props: {
emailPattern: RegexPatterns.email,
numberPattern: RegexPatterns.numbers,
checkValidateGroup: action('Group validation valids')
},
template: `
<sdc-validation-group #validationGroup>
<sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
<sdc-validation [validateElement]="email">
<sdc-required-validator message="Field is required!"></sdc-required-validator>
<sdc-regex-validator message="This is not a valid email!" [pattern]="this.emailPattern"></sdc-regex-validator>
</sdc-validation>
<sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
<sdc-validation [validateElement]="numberValidator">
<sdc-required-validator message="Field is required!"></sdc-required-validator>
<sdc-regex-validator message="This is not a number!" [pattern]="this.numberPattern"></sdc-regex-validator>
</sdc-validation>
<sdc-button text="validate group" (click)="checkValidateGroup(validationGroup.validate())"></sdc-button>
`
}
},
{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.`
}
)
|
