comand-component-library 4.0.18 → 4.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.js +3222 -3159
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +27 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon-logos.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.eot +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.svg +46 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.ttf +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/icomoon-logos.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/selection.json +1 -1
- package/src/assets/styles/component-library-global-styles.scss +1 -41
- package/src/assets/styles/logos-iconfont.css +44 -33
- package/src/assets/styles/transitions.css +0 -6
- package/src/componentSettingsDataAndControls.vue +7 -7
- package/src/components/CmdBackToTopButton.vue +1 -1
- package/src/components/CmdBasicForm.vue +62 -19
- package/src/components/CmdBox.vue +2 -2
- package/src/components/CmdBoxWrapper.vue +2 -2
- package/src/components/CmdFakeSelect.vue +2 -2
- package/src/components/CmdForm.vue +13 -5
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +2 -2
- package/src/components/CmdMultistepFormProgressBar.vue +1 -1
- package/src/components/CmdPagination.vue +2 -2
- package/src/components/CmdSidebar.vue +4 -4
- package/src/components/CmdSiteHeader.vue +2 -2
- package/src/components/CmdSiteSearch.vue +2 -2
- package/src/components/CmdSlideButton.vue +4 -4
- package/src/components/CmdSlideshow.vue +8 -3
- package/src/components/CmdTable.vue +3 -3
- package/src/components/CmdThumbnailScroller.vue +2 -2
- package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +1 -1
- package/src/index.js +1 -1
- package/src/mixins/CmdBasicForm/DefaultMessageProperties.js +2 -2
- package/src/pages/PageWrapper.vue +1 -1
- package/src/utils/ContactFormValidation.js +45 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-cn.svg +0 -26
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-de.svg +0 -76
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-en.svg +0 -76
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-es.svg +0 -83
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-fr.svg +0 -76
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-it.svg +0 -76
- package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-ru.svg +0 -76
@@ -10,6 +10,7 @@
|
|
10
10
|
novalidate="novalidate"
|
11
11
|
:textLegend="getMessage('basic_form.legend')"
|
12
12
|
:submitButton="submitButton"
|
13
|
+
:formAction="formAction"
|
13
14
|
>
|
14
15
|
<div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
|
15
16
|
<!-- begin cmd-form-element -->
|
@@ -20,7 +21,7 @@
|
|
20
21
|
:name="configuration.salutation?.name || 'salutation'"
|
21
22
|
inputValue="m"
|
22
23
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
23
|
-
v-model="formData.salutation"
|
24
|
+
v-model="formData.salutation.value"
|
24
25
|
@validate="onValidate"
|
25
26
|
/>
|
26
27
|
<!-- end cmd-form-element -->
|
@@ -33,7 +34,7 @@
|
|
33
34
|
:name="configuration.salutation?.name || 'salutation'"
|
34
35
|
inputValue="f"
|
35
36
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
36
|
-
v-model="formData.salutation"
|
37
|
+
v-model="formData.salutation.value"
|
37
38
|
@validate="onValidate"
|
38
39
|
/>
|
39
40
|
<!-- end cmd-form-element -->
|
@@ -181,7 +182,7 @@
|
|
181
182
|
:labelText="getMessage('basic_form.labeltext.city')"
|
182
183
|
:placeholder="getMessage('basic_form.placeholder.city')"
|
183
184
|
:required="configuration.city?.required"
|
184
|
-
:name="configuration.city?.name || '
|
185
|
+
:name="configuration.city?.name || 'city'"
|
185
186
|
v-model="formData.city.value"
|
186
187
|
:status="formData.city.error ? 'error' : ''"
|
187
188
|
@validate="onValidate"
|
@@ -207,14 +208,14 @@
|
|
207
208
|
|
208
209
|
<!-- begin cmd-form-element -->
|
209
210
|
<CmdFormElement
|
210
|
-
v-if="configuration.
|
211
|
-
:element="configuration.
|
212
|
-
:labelText="getMessage('basic_form.labeltext.
|
213
|
-
:placeholder="getMessage('basic_form.placeholder.
|
214
|
-
:required="configuration.
|
215
|
-
:name="configuration.
|
216
|
-
v-model="formData.
|
217
|
-
:status="formData.
|
211
|
+
v-if="configuration.userMessage"
|
212
|
+
:element="configuration.userMessage?.element || 'textarea'"
|
213
|
+
:labelText="getMessage('basic_form.labeltext.user_message')"
|
214
|
+
:placeholder="getMessage('basic_form.placeholder.user_message')"
|
215
|
+
:required="configuration.userMessage?.required"
|
216
|
+
:name="configuration.userMessage?.name || 'user-message'"
|
217
|
+
v-model="formData.userMessage.value"
|
218
|
+
:status="formData.userMessage.error ? 'error' : ''"
|
218
219
|
@validate="onValidate"
|
219
220
|
/>
|
220
221
|
<!-- end cmd-form-element -->
|
@@ -249,8 +250,10 @@
|
|
249
250
|
import I18n from "../mixins/I18n.js"
|
250
251
|
import DefaultMessageProperties from "../mixins/CmdBasicForm/DefaultMessageProperties.js"
|
251
252
|
import FieldValidation from "../mixins/FieldValidation.js"
|
253
|
+
import {ContactFormValidator} from "@/utils/ContactFormValidation.js";
|
252
254
|
|
253
255
|
export default {
|
256
|
+
emits: ["submit"],
|
254
257
|
mixins: [
|
255
258
|
I18n,
|
256
259
|
DefaultMessageProperties,
|
@@ -263,8 +266,9 @@ export default {
|
|
263
266
|
},
|
264
267
|
data() {
|
265
268
|
return {
|
269
|
+
validator: new ContactFormValidator(label => label),
|
266
270
|
formData: {
|
267
|
-
salutation: this.configuration.salutation.default,
|
271
|
+
salutation: {value: this.configuration.salutation.default},
|
268
272
|
lastName: {value: ''},
|
269
273
|
firstName: {value: ''},
|
270
274
|
email: {value: ''},
|
@@ -275,13 +279,27 @@ export default {
|
|
275
279
|
pobox: {value: ''},
|
276
280
|
country: {value: ''},
|
277
281
|
additionalAddressInfo: {value: ''},
|
278
|
-
|
282
|
+
userMessage: {value: ''},
|
279
283
|
acceptPrivacy: {value: false}
|
280
284
|
},
|
281
285
|
cityBeforeZip: this.showCityBeforeZip
|
282
286
|
}
|
283
287
|
},
|
284
288
|
props: {
|
289
|
+
/**
|
290
|
+
* activate if native submit-event should be used
|
291
|
+
*/
|
292
|
+
useNativeSubmit: {
|
293
|
+
type: Boolean,
|
294
|
+
default: false
|
295
|
+
},
|
296
|
+
/**
|
297
|
+
* set url for form-action
|
298
|
+
*/
|
299
|
+
formAction: {
|
300
|
+
type: String,
|
301
|
+
required: false
|
302
|
+
},
|
285
303
|
/**
|
286
304
|
* configuration for form-elements used in form
|
287
305
|
*/
|
@@ -345,7 +363,7 @@ export default {
|
|
345
363
|
required: false,
|
346
364
|
type: "text"
|
347
365
|
},
|
348
|
-
|
366
|
+
userMessage: {
|
349
367
|
required: false,
|
350
368
|
element: "textarea"
|
351
369
|
},
|
@@ -406,15 +424,40 @@ export default {
|
|
406
424
|
},
|
407
425
|
methods: {
|
408
426
|
onSubmit(event) {
|
409
|
-
this.onValidate()
|
427
|
+
this.onValidate()
|
410
428
|
|
411
429
|
this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
|
412
|
-
|
413
|
-
|
414
|
-
|
430
|
+
|
431
|
+
if (this.formData.error || this.useNativeSubmit) {
|
432
|
+
if(this.formData.error) {
|
433
|
+
// prevent original event from CmdForm (to avoid submit and reload)
|
434
|
+
event.originalEvent.preventDefault()
|
435
|
+
}
|
436
|
+
return
|
437
|
+
}
|
438
|
+
|
439
|
+
// custom submit of form-data
|
440
|
+
const customSubmitFormData = new FormData()
|
441
|
+
// get keys for form-elements from configuration
|
442
|
+
const configurationEntries = Object.keys(this.configuration)
|
443
|
+
|
444
|
+
for(let i = 0; i < configurationEntries.length; i++) {
|
445
|
+
// assign formData values to form-element key
|
446
|
+
customSubmitFormData.set(configurationEntries[i], this.formData[configurationEntries[i]].value)
|
415
447
|
}
|
416
448
|
|
417
|
-
|
449
|
+
fetch(this.formAction, {method: "POST", body: customSubmitFormData}).then((response) => {
|
450
|
+
if(response.ok) {
|
451
|
+
console.log("CmdBasicForm", "ok")
|
452
|
+
} else {
|
453
|
+
console.log("CmdBasicForm", "fail")
|
454
|
+
}
|
455
|
+
}).catch((error) => {
|
456
|
+
console.error(error)
|
457
|
+
})
|
458
|
+
|
459
|
+
// prevent original levent form CmdForm (to avoid submit and reload)
|
460
|
+
event.originalEvent.preventDefault()
|
418
461
|
},
|
419
462
|
onCountrySelect(event) {
|
420
463
|
this.cityBeforeZip = event === 'us' || event === 'uk';
|
@@ -395,7 +395,7 @@ export default {
|
|
395
395
|
type: Object,
|
396
396
|
default: function () {
|
397
397
|
return {
|
398
|
-
iconClass: "icon-
|
398
|
+
iconClass: "icon-chevron-one-stripe-up",
|
399
399
|
tooltip: "Close content",
|
400
400
|
iconType: "auto"
|
401
401
|
}
|
@@ -410,7 +410,7 @@ export default {
|
|
410
410
|
type: Object,
|
411
411
|
default: function () {
|
412
412
|
return {
|
413
|
-
iconClass: "icon-
|
413
|
+
iconClass: "icon-chevron-one-stripe-down",
|
414
414
|
tooltip: "Show content",
|
415
415
|
iconType: "auto"
|
416
416
|
}
|
@@ -103,7 +103,7 @@ export default {
|
|
103
103
|
type: Object,
|
104
104
|
default() {
|
105
105
|
return {
|
106
|
-
iconClass: "icon-
|
106
|
+
iconClass: "icon-chevron-two-stripes-down",
|
107
107
|
tooltip: "Collapse all boxes"
|
108
108
|
}
|
109
109
|
}
|
@@ -115,7 +115,7 @@ export default {
|
|
115
115
|
type: Object,
|
116
116
|
default() {
|
117
117
|
return {
|
118
|
-
iconClass: "icon-
|
118
|
+
iconClass: "icon-chevron-two-stripes-up",
|
119
119
|
tooltip: "Expand all boxes"
|
120
120
|
}
|
121
121
|
}
|
@@ -279,13 +279,13 @@ export default {
|
|
279
279
|
* icon for dropdown-icon (i.e. an angle/arrow)
|
280
280
|
*
|
281
281
|
* @requiredForAccessibility: partial
|
282
|
-
* @defaultIcon: icon-
|
282
|
+
* @defaultIcon: icon-chevron-one-stripe-down
|
283
283
|
*/
|
284
284
|
iconDropdown: {
|
285
285
|
type: Object,
|
286
286
|
default() {
|
287
287
|
return {
|
288
|
-
iconClass: "icon-
|
288
|
+
iconClass: "icon-chevron-one-stripe-down",
|
289
289
|
tooltip: "Toggle dropdown visibility",
|
290
290
|
iconType: "auto"
|
291
291
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
|
2
|
+
<form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
|
3
3
|
<template v-if="useFieldset">
|
4
4
|
<fieldset class="flex-container">
|
5
5
|
<legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
|
@@ -73,6 +73,13 @@ export default {
|
|
73
73
|
}
|
74
74
|
},
|
75
75
|
props: {
|
76
|
+
/**
|
77
|
+
* set url for form-action
|
78
|
+
*/
|
79
|
+
formAction: {
|
80
|
+
type: String,
|
81
|
+
required: false
|
82
|
+
},
|
76
83
|
/**
|
77
84
|
* activate if form-elements should be given by slot
|
78
85
|
*/
|
@@ -153,10 +160,11 @@ export default {
|
|
153
160
|
submitFormData(event) {
|
154
161
|
// fill formdata with names and value
|
155
162
|
let formdata = {}
|
156
|
-
this.formElements
|
157
|
-
|
158
|
-
|
159
|
-
|
163
|
+
if(this.formElements) {
|
164
|
+
this.formElements.forEach((element) => {
|
165
|
+
formdata[element.name] = this.formValues[element.name]
|
166
|
+
})
|
167
|
+
}
|
160
168
|
this.$emit("submit", {originalEvent: event, formdata: formdata})
|
161
169
|
},
|
162
170
|
onSubmit(event) {
|
@@ -247,14 +247,14 @@ export default {
|
|
247
247
|
*/
|
248
248
|
subentriesIconClass: {
|
249
249
|
type: String,
|
250
|
-
default: "icon-
|
250
|
+
default: "icon-chevron-one-stripe-down"
|
251
251
|
},
|
252
252
|
/**
|
253
253
|
* icon to show if a sub-entry has further sub-entries
|
254
254
|
*/
|
255
255
|
subSubentriesIconClass: {
|
256
256
|
type: String,
|
257
|
-
default: "icon-
|
257
|
+
default: "icon-chevron-one-stripe-right"
|
258
258
|
}
|
259
259
|
},
|
260
260
|
methods: {
|
@@ -105,7 +105,7 @@ export default {
|
|
105
105
|
type: Object,
|
106
106
|
default: function () {
|
107
107
|
return {
|
108
|
-
iconClass: "icon-
|
108
|
+
iconClass: "icon-chevron-one-stripe-left",
|
109
109
|
text: "prev",
|
110
110
|
showText: true
|
111
111
|
}
|
@@ -120,7 +120,7 @@ export default {
|
|
120
120
|
type: Object,
|
121
121
|
default: function () {
|
122
122
|
return {
|
123
|
-
iconClass: "icon-
|
123
|
+
iconClass: "icon-chevron-one-stripe-right",
|
124
124
|
text: "next",
|
125
125
|
showText: true
|
126
126
|
}
|
@@ -94,14 +94,14 @@ export default {
|
|
94
94
|
iconClassOpenCollapse() {
|
95
95
|
if (this.collapseToLeft) {
|
96
96
|
if (this.open) {
|
97
|
-
return "icon-
|
97
|
+
return "icon-chevron-one-stripe-left"
|
98
98
|
}
|
99
|
-
return "icon-
|
99
|
+
return "icon-chevron-one-stripe-right"
|
100
100
|
} else {
|
101
101
|
if (this.open) {
|
102
|
-
return "icon-
|
102
|
+
return "icon-chevron-one-stripe-right"
|
103
103
|
}
|
104
|
-
return "icon-
|
104
|
+
return "icon-chevron-one-stripe-left"
|
105
105
|
}
|
106
106
|
}
|
107
107
|
},
|
@@ -257,8 +257,8 @@ export default {
|
|
257
257
|
}
|
258
258
|
|
259
259
|
header {
|
260
|
-
padding-top:
|
261
|
-
padding-bottom:
|
260
|
+
padding-top: var(--default-padding);
|
261
|
+
padding-bottom: var(--default-padding);
|
262
262
|
row-gap: 0;
|
263
263
|
|
264
264
|
&.has-navigation {
|
@@ -294,11 +294,11 @@ export default {
|
|
294
294
|
default() {
|
295
295
|
return {
|
296
296
|
showFilters: {
|
297
|
-
iconClass: "icon-
|
297
|
+
iconClass: "icon-chevron-one-stripe-up",
|
298
298
|
type: "auto"
|
299
299
|
},
|
300
300
|
hideFilters: {
|
301
|
-
iconClass: "icon-
|
301
|
+
iconClass: "icon-chevron-one-stripe-down",
|
302
302
|
type: "auto"
|
303
303
|
}
|
304
304
|
}
|
@@ -39,19 +39,19 @@ export default {
|
|
39
39
|
default: function() {
|
40
40
|
return {
|
41
41
|
prev: {
|
42
|
-
iconClass: "icon-
|
42
|
+
iconClass: "icon-chevron-one-stripe-left",
|
43
43
|
tooltip: "Previous"
|
44
44
|
},
|
45
45
|
next: {
|
46
|
-
iconClass: "icon-
|
46
|
+
iconClass: "icon-chevron-one-stripe-right",
|
47
47
|
tooltip: "Next"
|
48
48
|
},
|
49
49
|
up: {
|
50
|
-
iconClass: "icon-
|
50
|
+
iconClass: "icon-chevron-one-stripe-up",
|
51
51
|
tooltip: "Previous"
|
52
52
|
},
|
53
53
|
down: {
|
54
|
-
iconClass: "icon-
|
54
|
+
iconClass: "icon-chevron-one-stripe-down",
|
55
55
|
tooltip: "Next"
|
56
56
|
}
|
57
57
|
}
|
@@ -164,14 +164,14 @@ export default {
|
|
164
164
|
return {
|
165
165
|
next: {
|
166
166
|
next: {
|
167
|
-
"iconClass": "icon-
|
167
|
+
"iconClass": "icon-chevron-one-stripe-right",
|
168
168
|
"tooltip": "Next"
|
169
169
|
}
|
170
170
|
},
|
171
171
|
prev: {
|
172
172
|
prev: {
|
173
173
|
"type": "prev",
|
174
|
-
"iconClass": "icon-
|
174
|
+
"iconClass": "icon-chevron-one-stripe-left",
|
175
175
|
"tooltip": "Previous"
|
176
176
|
}
|
177
177
|
}
|
@@ -367,6 +367,7 @@ export default {
|
|
367
367
|
justify-content: center;
|
368
368
|
|
369
369
|
> a:not(.button) {
|
370
|
+
display: block;
|
370
371
|
text-decoration: none;
|
371
372
|
|
372
373
|
figcaption {
|
@@ -417,9 +418,9 @@ export default {
|
|
417
418
|
padding: .2rem;
|
418
419
|
list-style-type: none;
|
419
420
|
margin: 0;
|
420
|
-
border: var(--default-border-reduced-opacity);
|
421
421
|
border-radius: var(--full-circle);
|
422
422
|
background: var(--light-gray);
|
423
|
+
border: var(--default-border-reduced-opacity);
|
423
424
|
|
424
425
|
a {
|
425
426
|
display: block;
|
@@ -473,6 +474,10 @@ export default {
|
|
473
474
|
background: var(--pure-white-reduced-opacity);
|
474
475
|
}
|
475
476
|
}
|
477
|
+
|
478
|
+
.fade-enter-from, .fade-leave-to {
|
479
|
+
position: absolute;
|
480
|
+
}
|
476
481
|
}
|
477
482
|
|
478
483
|
.edit-mode .cmd-slideshow .image-wrapper.edit-items {
|
@@ -141,7 +141,7 @@ export default {
|
|
141
141
|
type: Object,
|
142
142
|
default: function () {
|
143
143
|
return {
|
144
|
-
iconClass: "icon-
|
144
|
+
iconClass: "icon-chevron-one-stripe-down",
|
145
145
|
tooltip: "Expand table"
|
146
146
|
}
|
147
147
|
}
|
@@ -155,7 +155,7 @@ export default {
|
|
155
155
|
type: Object,
|
156
156
|
default: function () {
|
157
157
|
return {
|
158
|
-
iconClass: "icon-
|
158
|
+
iconClass: "icon-chevron-one-stripe-up",
|
159
159
|
tooltip: "Collapse table"
|
160
160
|
}
|
161
161
|
}
|
@@ -183,7 +183,7 @@ export default {
|
|
183
183
|
type: Object,
|
184
184
|
default: function () {
|
185
185
|
return {
|
186
|
-
iconClass: "icon-
|
186
|
+
iconClass: "icon-chevron-one-stripe-right",
|
187
187
|
tooltip: "Stretch table"
|
188
188
|
}
|
189
189
|
}
|
@@ -230,14 +230,14 @@ export default {
|
|
230
230
|
next: {
|
231
231
|
next: {
|
232
232
|
type: "next",
|
233
|
-
iconClass: "icon-
|
233
|
+
iconClass: "icon-chevron-one-stripe-right",
|
234
234
|
tooltip: "Next"
|
235
235
|
}
|
236
236
|
},
|
237
237
|
prev: {
|
238
238
|
prev: {
|
239
239
|
type: "prev",
|
240
|
-
iconClass: "icon-
|
240
|
+
iconClass: "icon-chevron-one-stripe-left",
|
241
241
|
tooltip: "Previous"
|
242
242
|
}
|
243
243
|
}
|
package/src/index.js
CHANGED
@@ -2,6 +2,7 @@
|
|
2
2
|
export { default as CmdAddressData } from '@/components/CmdAddressData.vue'
|
3
3
|
export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton.vue'
|
4
4
|
export { default as CmdBankAccountData } from '@/components/CmdBankAccountData.vue'
|
5
|
+
export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
|
5
6
|
export { default as CmdBox } from '@/components/CmdBox.vue'
|
6
7
|
export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper.vue'
|
7
8
|
export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs.vue'
|
@@ -51,7 +52,6 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
|
|
51
52
|
export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'
|
52
53
|
|
53
54
|
// export page-components
|
54
|
-
export { default as BasicForm } from '@/components/CmdBasicForm.vue'
|
55
55
|
export { default as ContactInformation } from '@/pages/ContactInformation.vue'
|
56
56
|
export { default as MultipleBoxWrapper } from '@/pages/MultipleBoxWrapper.vue'
|
57
57
|
export { default as MultipleListsOfLinks } from '@/pages/MultipleListsOfLinks.vue'
|
@@ -24,8 +24,8 @@ export default {
|
|
24
24
|
"basic_form.labeltext.country": "Country:",
|
25
25
|
"basic_form.labeltext.additional_address_info": "Additional address information:",
|
26
26
|
"basic_form.placeholder.additional_address_info": "Additional address information",
|
27
|
-
"basic_form.labeltext.
|
28
|
-
"basic_form.placeholder.
|
27
|
+
"basic_form.labeltext.user_message": "Your message:",
|
28
|
+
"basic_form.placeholder.user_message": "Your message",
|
29
29
|
"basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
|
30
30
|
}
|
31
31
|
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
// noinspection CommaExpressionJS
|
2
|
+
class ContactFormValidator {
|
3
|
+
static PATTERN_SURNAME = /^[a-züöäßáéíóàèìòêîô '-]+$/i
|
4
|
+
static PATTERN_EMAIL = /^[a-z\d._%+-]+@[a-z\d._%+-]+\.[a-z]{2,}$/i
|
5
|
+
static PATTERN_MESSAGE = /^.{2,500}$/
|
6
|
+
|
7
|
+
label
|
8
|
+
|
9
|
+
constructor(label) {
|
10
|
+
this.label = label
|
11
|
+
}
|
12
|
+
|
13
|
+
validate(formData) {
|
14
|
+
[formData.lastName.error, formData.lastName.errorMessage] = this.validateRequired(
|
15
|
+
formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
|
16
|
+
[formData.email.error, formData.email.errorMessage] = this.validateRequired(
|
17
|
+
formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
|
18
|
+
[formData.additionalText.error, formData.additionalText.errorMessage] = this.validateRequired(
|
19
|
+
formData.additionalText.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
|
20
|
+
formData.acceptPrivacy.error = false
|
21
|
+
formData.error = formData.lastName.error
|
22
|
+
|| formData.email.error
|
23
|
+
|| formData.additionalText.error
|
24
|
+
return formData
|
25
|
+
}
|
26
|
+
|
27
|
+
validatePrivacy(formData) {
|
28
|
+
formData.acceptPrivacy.error = !formData.acceptPrivacy.value
|
29
|
+
formData.acceptPrivacy.errorMessage = formData.acceptPrivacy.error ? this.label('form_error_missing_privacy_consent') : ''
|
30
|
+
formData.error = formData.error || formData.acceptPrivacy.error
|
31
|
+
return formData
|
32
|
+
}
|
33
|
+
|
34
|
+
validateRequired(value, pattern, errorMessage) {
|
35
|
+
if (!value || value.trim().length === 0) {
|
36
|
+
return [true, this.label('form_error_empty')]
|
37
|
+
}
|
38
|
+
if (pattern && !pattern.test(value)) {
|
39
|
+
return [true, errorMessage || this.label('form_error_invalid')]
|
40
|
+
}
|
41
|
+
return [false, '']
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
export { ContactFormValidator }
|
@@ -1,26 +0,0 @@
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
2
|
-
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
4
|
-
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
5
|
-
width="850.395px" height="566.929px" viewBox="0 0 850.395 566.929" enable-background="new 0 0 850.395 566.929"
|
6
|
-
xml:space="preserve">
|
7
|
-
<symbol id="Stern" viewBox="-80.297 -76.367 160.595 152.734">
|
8
|
-
<polygon fill="#FFDE08" points="0,76.367 20.678,20.397 80.298,18.027 33.457,-18.934 49.627,-76.367 0,-43.241 -49.626,-76.367
|
9
|
-
-33.457,-18.934 -80.297,18.027 -20.677,20.397 "/>
|
10
|
-
</symbol>
|
11
|
-
<g id="cn">
|
12
|
-
<g>
|
13
|
-
<rect fill="#DF2B14" width="850.395" height="566.929"/>
|
14
|
-
|
15
|
-
<use xlink:href="#Stern" width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(1 0 0 -1 141.4941 133.5356)" overflow="visible"/>
|
16
|
-
|
17
|
-
<use xlink:href="#Stern" width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 282.7402 57.1685)" overflow="visible"/>
|
18
|
-
|
19
|
-
<use xlink:href="#Stern" width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 -0.1158 -0.1158 -0.318 341.1777 115.0728)" overflow="visible"/>
|
20
|
-
|
21
|
-
<use xlink:href="#Stern" width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 284.2407 256.6177)" overflow="visible"/>
|
22
|
-
|
23
|
-
<use xlink:href="#Stern" width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.3384 0 0 -0.3384 340.73 194.541)" overflow="visible"/>
|
24
|
-
</g>
|
25
|
-
</g>
|
26
|
-
</svg>
|