hr-design-system-handlebars 1.100.7 → 1.101.0
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/CHANGELOG.md +24 -0
- package/dist/assets/index.css +26 -3
- package/dist/assets/js/alpine.js +2 -0
- package/dist/assets/js/components/forms/inputHandler.alpine.js +30 -0
- package/dist/views/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views/components/forms/fields.hbs +4 -4
- package/dist/views/components/forms/input.hbs +98 -0
- package/dist/views/components/forms/textarea.hbs +19 -9
- package/dist/views/components/forms/webform.hbs +12 -6
- package/dist/views_static/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views_static/components/forms/fields.hbs +4 -4
- package/dist/views_static/components/forms/input.hbs +98 -0
- package/dist/views_static/components/forms/textarea.hbs +19 -9
- package/dist/views_static/components/forms/webform.hbs +12 -6
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_webform.json +8 -2
- package/src/assets/fixtures/forms/form_fields.inc.json +15 -1
- package/src/assets/js/alpine.js +2 -0
- package/src/stories/views/components/content/copytext/copytext_body.hbs +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
- package/src/stories/views/components/forms/fields.hbs +4 -4
- package/src/stories/views/components/forms/fixtures/form_input_mandatory.json +1 -1
- package/src/stories/views/components/forms/input.hbs +98 -0
- package/src/stories/views/components/forms/inputHandler.alpine.js +30 -0
- package/src/stories/views/components/forms/textarea.hbs +19 -9
- package/src/stories/views/components/forms/webform.hbs +12 -6
- package/dist/views/components/forms/input_single_line.hbs +0 -117
- package/dist/views_static/components/forms/input_single_line.hbs +0 -117
- package/src/stories/views/components/forms/input_single_line.hbs +0 -117
package/src/assets/js/alpine.js
CHANGED
|
@@ -17,7 +17,9 @@ AsyncAlpine.init(Alpine)
|
|
|
17
17
|
.data('slider', () =>
|
|
18
18
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
19
19
|
)
|
|
20
|
+
|
|
20
21
|
.data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
|
|
22
|
+
.data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
|
|
21
23
|
.start()
|
|
22
24
|
|
|
23
25
|
window.Alpine = Alpine
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/forms/webform }}
|
|
25
|
+
{{> components/forms/webform _newWebForm=this.hasNewWebForm}}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true}]}}]}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
{{else}}
|
|
18
18
|
|
|
19
|
-
<div class="
|
|
19
|
+
<div class="js-wrapper-{{this.name}}">
|
|
20
20
|
{{#if this.type.isTextarea}}
|
|
21
21
|
{{~> components/forms/textarea
|
|
22
22
|
_name=this.name
|
|
@@ -31,15 +31,15 @@
|
|
|
31
31
|
_errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
32
32
|
}}
|
|
33
33
|
{{else if this.type.isText}}
|
|
34
|
-
{{~> components/forms/
|
|
34
|
+
{{~> components/forms/input
|
|
35
35
|
_type=this.type.asString
|
|
36
36
|
_isEmail=this.type.isEmail
|
|
37
37
|
_name=this.name
|
|
38
38
|
_label=this.label
|
|
39
|
-
_labelClass="
|
|
39
|
+
_labelClass=""
|
|
40
40
|
_description=this.description
|
|
41
41
|
_defaultValue=this.defaultValue
|
|
42
|
-
|
|
42
|
+
_wrapperClass=(if this.isHidden "hidden")
|
|
43
43
|
_tabindex=(if this.isHidden "-1")
|
|
44
44
|
_required=this.isRequired
|
|
45
45
|
_maxLength=this.maxLength
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"
|
|
1
|
+
{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
2
|
+
ax-load
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-ignore
|
|
5
|
+
>
|
|
6
|
+
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
7
|
+
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
|
+
x-model="input{{getRandom}}"
|
|
9
|
+
id="input{{getRandom}}"
|
|
10
|
+
{{#if _required}}
|
|
11
|
+
@focus="isFocused = true;"
|
|
12
|
+
@blur="wasFocused = true; isFocused=false"
|
|
13
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
|
+
{{/if}}
|
|
15
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
16
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
17
|
+
{{#if _locaKey}}
|
|
18
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
19
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
20
|
+
{{else}}
|
|
21
|
+
{{#if _label}}
|
|
22
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
23
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{/if}}
|
|
26
|
+
{{#if _formField.forHtmlAttribute}}
|
|
27
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
28
|
+
{{else}}
|
|
29
|
+
{{#if _value}}
|
|
30
|
+
value="{{_value}}"
|
|
31
|
+
{{else}}
|
|
32
|
+
value="{{_defaultValue}}"
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{#if _maxLength}}
|
|
36
|
+
maxlength="{{_maxLength}}"
|
|
37
|
+
{{/if~}}
|
|
38
|
+
{{#if _required}} required{{/if}}
|
|
39
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
40
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
41
|
+
{{#if _autoSuggestFeature}}
|
|
42
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
|
+
>
|
|
44
|
+
|
|
45
|
+
<label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
46
|
+
|
|
47
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
|
+
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
50
|
+
{{#if _hasBody}}
|
|
51
|
+
{{decorator_body}}
|
|
52
|
+
{{else}}
|
|
53
|
+
{{#if _locaKey}}
|
|
54
|
+
{{loca _locaKey}}
|
|
55
|
+
{{else}}
|
|
56
|
+
{{#if _label}}
|
|
57
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
{{/if}}
|
|
61
|
+
</label>
|
|
62
|
+
{{#if _required}}
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
65
|
+
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
{{/if}}
|
|
69
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
70
|
+
{{#if _description}}
|
|
71
|
+
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
72
|
+
{{/if}}
|
|
73
|
+
{{#if _required}}
|
|
74
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
75
|
+
{{/if}}
|
|
76
|
+
{{#if _maxLength}}
|
|
77
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
78
|
+
{{/if~}}
|
|
79
|
+
</div>
|
|
80
|
+
<div class="hidden">
|
|
81
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
82
|
+
DEBUG
|
|
83
|
+
</div>
|
|
84
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
85
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
86
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
87
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
88
|
+
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
89
|
+
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
90
|
+
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
91
|
+
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
92
|
+
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
93
|
+
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
94
|
+
<div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
|
|
2
|
+
return {
|
|
3
|
+
[element]: prefilledText,
|
|
4
|
+
valid: false,
|
|
5
|
+
wasFocused: false,
|
|
6
|
+
isFocused: false,
|
|
7
|
+
validEmail: false,
|
|
8
|
+
errorMessage() {
|
|
9
|
+
if( Boolean(isEmail)){
|
|
10
|
+
return !this.valid ? errorMandatory : errorEmail
|
|
11
|
+
} else {
|
|
12
|
+
return errorMandatory
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
hideDescription() {
|
|
16
|
+
if( Boolean(isEmail)){
|
|
17
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
|
|
18
|
+
} else {
|
|
19
|
+
return Boolean(!this.valid && this.wasFocused && !this.isFocused)
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
hideError() {
|
|
23
|
+
return Boolean(!this.hideDescription())
|
|
24
|
+
},
|
|
25
|
+
validateEmail() {
|
|
26
|
+
var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
|
|
27
|
+
this.validEmail = emailRegex.test( this[element]);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
<textarea
|
|
4
4
|
x-model="textarea{{getRandom}}"
|
|
5
5
|
id="textarea{{getRandom}}"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
{{#if _required}}
|
|
7
|
+
@focus="isFocused = true"
|
|
8
|
+
@blur="wasFocused = true; isFocused=false"
|
|
9
|
+
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
|
+
{{/if}}
|
|
9
11
|
value=""
|
|
10
12
|
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
13
|
{{#if _locaKey}}
|
|
@@ -28,7 +30,9 @@
|
|
|
28
30
|
{{/if~}}
|
|
29
31
|
{{#if _required}}required{{/if}}
|
|
30
32
|
class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
31
|
-
|
|
33
|
+
{{#if _required}}
|
|
34
|
+
:class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
|
|
35
|
+
{{/if}}
|
|
32
36
|
>{{#if _formField.isValid}}
|
|
33
37
|
{{{_formField.forHtmlContent}}}
|
|
34
38
|
{{else}}
|
|
@@ -62,16 +66,22 @@
|
|
|
62
66
|
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
|
|
63
67
|
{{/if}}
|
|
64
68
|
{{#if _required}}
|
|
65
|
-
<div class="hidden pl-4 text-xs
|
|
69
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
|
|
66
70
|
{{/if}}
|
|
67
71
|
{{#if _maxLength}}
|
|
68
72
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
73
|
{{/if~}}
|
|
70
74
|
</div>
|
|
75
|
+
|
|
71
76
|
<div class="hidden">
|
|
72
|
-
<div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div
|
|
77
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
78
|
+
DEBUG
|
|
79
|
+
</div>
|
|
80
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
81
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
+
<div>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
|
|
85
|
+
</div>
|
|
76
86
|
</div>
|
|
77
87
|
</div>
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
{{~#if
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
{{~#if _newWebForm ~}}
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
|
|
6
|
+
{{this.title}}
|
|
7
|
+
</h3>
|
|
8
|
+
|
|
9
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
10
|
+
{{> components/forms/fields }}
|
|
11
|
+
</form>
|
|
12
|
+
{{/components/forms/backgroundBox }}
|
|
7
13
|
{{~else~}}
|
|
8
14
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
9
15
|
{{~/if~}}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
x-data="inputHandler">
|
|
3
|
-
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
4
|
-
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
5
|
-
x-model="input{{nextRandom}}"
|
|
6
|
-
id="input{{getRandom}}"
|
|
7
|
-
{{#if _required}}
|
|
8
|
-
@focus="isFocused = true"
|
|
9
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
11
|
-
{{/if}}
|
|
12
|
-
type="{{#if _type}}{{_type}}{{/if}}"
|
|
13
|
-
name="{{#if _name}}{{_name}}{{/if}}"
|
|
14
|
-
{{#if _locaKey}}
|
|
15
|
-
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
16
|
-
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
17
|
-
{{else}}
|
|
18
|
-
{{#if _label}}
|
|
19
|
-
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
20
|
-
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
21
|
-
{{/if}}
|
|
22
|
-
{{/if}}
|
|
23
|
-
{{#if _formField.forHtmlAttribute}}
|
|
24
|
-
value="{{_formField.forHtmlAttribute}}"
|
|
25
|
-
{{else}}
|
|
26
|
-
{{#if _value}}
|
|
27
|
-
value="{{_value}}"
|
|
28
|
-
{{else}}
|
|
29
|
-
value="{{_defaultValue}}"
|
|
30
|
-
{{/if}}
|
|
31
|
-
{{/if}}
|
|
32
|
-
{{#if _maxLength}}
|
|
33
|
-
maxlength="{{_maxLength}}"
|
|
34
|
-
{{/if~}}
|
|
35
|
-
{{#if _required}} required{{/if}}
|
|
36
|
-
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
37
|
-
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
38
|
-
{{#if _autoSuggestFeature}}
|
|
39
|
-
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
40
|
-
>
|
|
41
|
-
|
|
42
|
-
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
43
|
-
|
|
44
|
-
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
45
|
-
|
|
46
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
47
|
-
{{#if _hasBody}}
|
|
48
|
-
{{decorator_body}}
|
|
49
|
-
{{else}}
|
|
50
|
-
{{#if _locaKey}}
|
|
51
|
-
{{loca _locaKey}}
|
|
52
|
-
{{else}}
|
|
53
|
-
{{#if _label}}
|
|
54
|
-
{{{_label}}}{{#if _required}}*{{/if}}
|
|
55
|
-
{{/if}}
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{/if}}
|
|
58
|
-
</label>
|
|
59
|
-
{{#if _required}}
|
|
60
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
61
|
-
<div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
|
|
62
|
-
{{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
{{/if}}
|
|
66
|
-
<div class="flex items-end justify-between h-5 font-heading">
|
|
67
|
-
{{#if _description}}
|
|
68
|
-
<div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
|
|
69
|
-
{{/if}}
|
|
70
|
-
{{#if _required}}
|
|
71
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
72
|
-
{{/if}}
|
|
73
|
-
{{#if _maxLength}}
|
|
74
|
-
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
75
|
-
{{/if~}}
|
|
76
|
-
</div>
|
|
77
|
-
<div class="hidden">
|
|
78
|
-
<b>DEBUGG</b>
|
|
79
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
80
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
-
<div>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
84
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
86
|
-
<div>input:<span x-text="input{{getRandom}} " class="font-bold" ></span></div>
|
|
87
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
88
|
-
</div>
|
|
89
|
-
<script>
|
|
90
|
-
function inputHandler() {
|
|
91
|
-
return {
|
|
92
|
-
input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' ,
|
|
93
|
-
valid: false,
|
|
94
|
-
wasFocused: false,
|
|
95
|
-
isFocused: false,
|
|
96
|
-
{{#if _isEmail}}
|
|
97
|
-
validEmail: false,
|
|
98
|
-
errorMessage(){ return !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
|
|
99
|
-
hideDescription() { return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))},
|
|
100
|
-
hideError() { return Boolean(!this.hideDescription())},
|
|
101
|
-
validateEmail(){
|
|
102
|
-
var email = this.input{{getRandom}}.trim();
|
|
103
|
-
// https://github.com/colinaut/alpinejs-plugin-simple-validate/blob/main/src/index.js slashes are double because webpack removes them
|
|
104
|
-
var emailRegexEscaped = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
|
|
105
|
-
//https://emailregex.com/index.html slashes are double because webpack removes them
|
|
106
|
-
var emailRegexV2Escaped = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/;
|
|
107
|
-
this.validEmail = emailRegexV2Escaped.test(email);
|
|
108
|
-
}
|
|
109
|
-
{{else}}
|
|
110
|
-
hideError() {return (this.valid || !this.wasFocused || this.isFocused)},
|
|
111
|
-
hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
|
|
112
|
-
errorMessage: "{{_errorMandatory}}"
|
|
113
|
-
{{/if}}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</div>
|