hr-design-system-handlebars 1.103.8 → 1.103.10
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 +24 -3
- package/dist/assets/js/components/forms/inputHandler.alpine.js +1 -1
- package/dist/views/components/forms/controls.hbs +1 -1
- package/dist/views/components/forms/input.hbs +4 -2
- package/dist/views/components/forms/textarea.hbs +4 -2
- package/dist/views/components/forms/webform.hbs +49 -1
- package/dist/views/components/pagination/pagination_button_right.hbs +6 -4
- package/dist/views/components/pagination/pagination_button_right_linked.hbs +7 -4
- package/dist/views/components/pagination/pagination_more_than_three_pages.hbs +21 -12
- package/dist/views/components/pagination/pagination_only_three_pages.hbs +14 -8
- package/dist/views/components/pagination/pagination_only_two_pages.hbs +7 -4
- package/dist/views_static/components/forms/controls.hbs +1 -1
- package/dist/views_static/components/forms/input.hbs +4 -2
- package/dist/views_static/components/forms/textarea.hbs +4 -2
- package/dist/views_static/components/forms/webform.hbs +49 -1
- package/dist/views_static/components/pagination/pagination_button_right.hbs +6 -4
- package/dist/views_static/components/pagination/pagination_button_right_linked.hbs +7 -4
- package/dist/views_static/components/pagination/pagination_more_than_three_pages.hbs +21 -12
- package/dist/views_static/components/pagination/pagination_only_three_pages.hbs +14 -8
- package/dist/views_static/components/pagination/pagination_only_two_pages.hbs +7 -4
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_webform.json +4 -0
- package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
- package/src/stories/views/components/forms/controls.hbs +1 -1
- package/src/stories/views/components/forms/input.hbs +4 -2
- package/src/stories/views/components/forms/inputHandler.alpine.js +1 -1
- package/src/stories/views/components/forms/textarea.hbs +4 -2
- package/src/stories/views/components/forms/webform.hbs +49 -1
- package/src/stories/views/components/pagination/pagination_button_right.hbs +6 -4
- package/src/stories/views/components/pagination/pagination_button_right_linked.hbs +7 -4
- package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs +21 -12
- package/src/stories/views/components/pagination/pagination_only_three_pages.hbs +14 -8
- package/src/stories/views/components/pagination/pagination_only_two_pages.hbs +7 -4
- package/tailwind.config.js +19 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.103.10 (Fri Oct 04 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- ✨ Send Form INIT DPE-3384 [#1090](https://github.com/mumprod/hr-design-system-handlebars/pull/1090) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.103.9 (Fri Oct 04 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- add empty htmlProperties in pagination [#1089](https://github.com/mumprod/hr-design-system-handlebars/pull/1089) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.103.8 (Wed Oct 02 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1986,6 +1986,27 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1986
1986
|
.animate-none {
|
|
1987
1987
|
animation: none;
|
|
1988
1988
|
}
|
|
1989
|
+
@keyframes shake {
|
|
1990
|
+
|
|
1991
|
+
10%, 90% {
|
|
1992
|
+
transform: translate3d(-1px, 0, 0);
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
20%, 80% {
|
|
1996
|
+
transform: translate3d(2px, 0, 0);
|
|
1997
|
+
}
|
|
1998
|
+
|
|
1999
|
+
30%, 50%, 70% {
|
|
2000
|
+
transform: translate3d(-4px, 0, 0);
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
40%, 60% {
|
|
2004
|
+
transform: translate3d(4px, 0, 0);
|
|
2005
|
+
}
|
|
2006
|
+
}
|
|
2007
|
+
.animate-shake {
|
|
2008
|
+
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
|
2009
|
+
}
|
|
1989
2010
|
@keyframes spin {
|
|
1990
2011
|
|
|
1991
2012
|
to {
|
|
@@ -3478,7 +3499,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3478
3499
|
border-bottom-color: var(--color-secondary-ds);
|
|
3479
3500
|
}
|
|
3480
3501
|
.counter-reset {
|
|
3481
|
-
counter-reset:
|
|
3502
|
+
counter-reset: cnt1728037554704;
|
|
3482
3503
|
}
|
|
3483
3504
|
.hyphens-auto {
|
|
3484
3505
|
-webkit-hyphens: auto;
|
|
@@ -3886,7 +3907,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3886
3907
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3887
3908
|
}
|
|
3888
3909
|
.-ordered {
|
|
3889
|
-
counter-increment:
|
|
3910
|
+
counter-increment: cnt1728037554704 1;
|
|
3890
3911
|
}
|
|
3891
3912
|
.-ordered::before {
|
|
3892
3913
|
position: absolute;
|
|
@@ -3902,7 +3923,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3902
3923
|
letter-spacing: .0125em;
|
|
3903
3924
|
--tw-text-opacity: 1;
|
|
3904
3925
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3905
|
-
content: counter(
|
|
3926
|
+
content: counter(cnt1728037554704);
|
|
3906
3927
|
}
|
|
3907
3928
|
/*! ****************************/
|
|
3908
3929
|
/*! DataPolicy stuff */
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="flex items-center">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
|
|
6
|
-
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
|
|
6
|
+
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
|
|
7
7
|
</label>
|
|
8
8
|
|
|
9
9
|
{{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
1
|
+
<div class=" relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
2
|
+
:class="{'animate-shake': hideDescription() }"
|
|
2
3
|
ax-load
|
|
3
4
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
5
|
x-ignore
|
|
@@ -7,9 +8,10 @@
|
|
|
7
8
|
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
9
|
x-model="input{{getRandom}}"
|
|
9
10
|
id="input{{getRandom}}"
|
|
11
|
+
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
10
12
|
{{#if _required}}
|
|
11
13
|
@focus="isFocused = true;"
|
|
12
|
-
@blur="wasFocused = true; isFocused=false"
|
|
14
|
+
@blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
13
15
|
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
16
|
{{/if}}
|
|
15
17
|
type="{{#if _type}}{{_type}}{{/if}}"
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
|
|
3
|
+
:class="{'animate-shake': !valid && wasFocused && !isFocused }">
|
|
2
4
|
<div class="w-full h-4 bg-white"></div>
|
|
3
5
|
<textarea
|
|
4
6
|
x-model="textarea{{getRandom}}"
|
|
5
7
|
id="textarea{{getRandom}}"
|
|
6
8
|
{{#if _required}}
|
|
7
9
|
@focus="isFocused = true"
|
|
8
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
+
@blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
9
11
|
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
12
|
{{/if}}
|
|
11
13
|
value=""
|
|
@@ -6,11 +6,59 @@
|
|
|
6
6
|
{{this.title}}
|
|
7
7
|
</h3>
|
|
8
8
|
|
|
9
|
-
<form
|
|
9
|
+
<form x-data="contactForm()"
|
|
10
|
+
|
|
11
|
+
@submit.prevent="submitData"
|
|
12
|
+
x-ref="contactFormRef"
|
|
13
|
+
class="relative flex flex-col justify-center overflow-hidden group"
|
|
14
|
+
id="form--{{nextRandom}}"
|
|
15
|
+
action="{{this.url}}"
|
|
16
|
+
method="post"
|
|
17
|
+
enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}"
|
|
18
|
+
accept-charset="utf-8" >
|
|
10
19
|
{{> components/forms/fields }}
|
|
11
20
|
|
|
12
21
|
{{> components/forms/controls }}
|
|
13
22
|
</form>
|
|
23
|
+
<script>
|
|
24
|
+
function contactForm() {
|
|
25
|
+
return {
|
|
26
|
+
formData: {
|
|
27
|
+
name: '',
|
|
28
|
+
email: '',
|
|
29
|
+
message: ''
|
|
30
|
+
},
|
|
31
|
+
clickHandler() {
|
|
32
|
+
console.log('check for Error ');
|
|
33
|
+
const form = this.$refs.contactFormRef;
|
|
34
|
+
const formData = new FormData(form);
|
|
35
|
+
const fields = Array.from(form.elements); // Array of all form fields
|
|
36
|
+
|
|
37
|
+
// Loop through each field, focus it, blur it, and serialize the data
|
|
38
|
+
fields.forEach((field) => {
|
|
39
|
+
if (field.type !== 'submit') { // Skip the submit button
|
|
40
|
+
field.focus(); // Focus the field
|
|
41
|
+
field.blur(); // Immediately unfocus (blur) the field
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if(form.reportValidity()){
|
|
45
|
+
this.submitData();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
},
|
|
49
|
+
submitData() {
|
|
50
|
+
const formData = new FormData(this.$refs.contactFormRef);
|
|
51
|
+
// Convert the FormData to a serialized string
|
|
52
|
+
const serializedData = Array.from(formData.entries())
|
|
53
|
+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
|
54
|
+
.join('&');
|
|
55
|
+
|
|
56
|
+
// Log the serialized form data
|
|
57
|
+
console.log('DATA: ' + serializedData);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
14
62
|
{{/components/forms/backgroundBox }}
|
|
15
63
|
{{~else~}}
|
|
16
64
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
{{
|
|
2
|
-
{{
|
|
3
|
-
{{
|
|
4
|
-
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
|
|
3
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
4
|
+
{{/components/button/button}}
|
|
5
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
6
|
+
{{/with}}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
{{
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
|
|
3
|
+
<span class="sr-only">Nächste Seite</span>
|
|
4
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
5
|
+
{{/components/button/link_button}}
|
|
6
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
7
|
+
{{/with}}
|
|
@@ -11,10 +11,13 @@
|
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
13
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
{{#with this}}
|
|
15
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
16
|
+
<span class="sr-only">Zur Seite: </span>
|
|
17
|
+
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
18
|
+
{{/components/button/link_button}}
|
|
19
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
20
|
+
{{/with}}
|
|
18
21
|
{{> components/pagination/pagination_button_right_linked }}
|
|
19
22
|
</div>
|
|
20
23
|
{{else}}
|
|
@@ -35,10 +38,13 @@
|
|
|
35
38
|
{{/inline}}
|
|
36
39
|
{{/with}}
|
|
37
40
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
38
|
-
{{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
{{#with this}}
|
|
42
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
43
|
+
<span class="sr-only">Zur Seite: </span>
|
|
44
|
+
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
45
|
+
{{/components/button/link_button}}
|
|
46
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
47
|
+
{{/with}}
|
|
42
48
|
{{> components/pagination/pagination_button_right_linked }}
|
|
43
49
|
</div>
|
|
44
50
|
{{else}}
|
|
@@ -62,10 +68,13 @@
|
|
|
62
68
|
{{~#if _notLastButOnePage~}}
|
|
63
69
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
64
70
|
{{~/if~}}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
{{#with this}}
|
|
72
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
73
|
+
<span class="sr-only">Zur Seite: </span>
|
|
74
|
+
{{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
|
|
75
|
+
{{/components/button/link_button}}
|
|
76
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
77
|
+
{{/with}}
|
|
69
78
|
{{~/if~}}
|
|
70
79
|
{{~#if _notLastPage~}}
|
|
71
80
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
18
21
|
<span class="sr-only">Zur Seite: </span>
|
|
19
22
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
@@ -37,10 +40,13 @@
|
|
|
37
40
|
aria-current="true"
|
|
38
41
|
{{/inline}}
|
|
39
42
|
{{/with}}
|
|
40
|
-
{{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
{{#with this}}
|
|
44
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
45
|
+
<span class="sr-only">Zur Seite: </span>
|
|
46
|
+
{{> components/button/components/button_label _label="3" _css=""}}
|
|
47
|
+
{{/components/button/link_button}}
|
|
48
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
49
|
+
{{/with}}
|
|
44
50
|
{{> components/pagination/pagination_button_right_linked }}
|
|
45
51
|
</div>
|
|
46
52
|
{{else}}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{> components/pagination/pagination_button_right_linked }}
|
|
18
21
|
</div>
|
|
19
22
|
{{else}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="flex items-center">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
|
|
6
|
-
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
|
|
6
|
+
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
|
|
7
7
|
</label>
|
|
8
8
|
|
|
9
9
|
{{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
1
|
+
<div class=" relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
2
|
+
:class="{'animate-shake': hideDescription() }"
|
|
2
3
|
ax-load
|
|
3
4
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
5
|
x-ignore
|
|
@@ -7,9 +8,10 @@
|
|
|
7
8
|
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
9
|
x-model="input{{getRandom}}"
|
|
9
10
|
id="input{{getRandom}}"
|
|
11
|
+
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
10
12
|
{{#if _required}}
|
|
11
13
|
@focus="isFocused = true;"
|
|
12
|
-
@blur="wasFocused = true; isFocused=false"
|
|
14
|
+
@blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
13
15
|
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
16
|
{{/if}}
|
|
15
17
|
type="{{#if _type}}{{_type}}{{/if}}"
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
|
|
3
|
+
:class="{'animate-shake': !valid && wasFocused && !isFocused }">
|
|
2
4
|
<div class="w-full h-4 bg-white"></div>
|
|
3
5
|
<textarea
|
|
4
6
|
x-model="textarea{{getRandom}}"
|
|
5
7
|
id="textarea{{getRandom}}"
|
|
6
8
|
{{#if _required}}
|
|
7
9
|
@focus="isFocused = true"
|
|
8
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
+
@blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
9
11
|
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
12
|
{{/if}}
|
|
11
13
|
value=""
|
|
@@ -6,11 +6,59 @@
|
|
|
6
6
|
{{this.title}}
|
|
7
7
|
</h3>
|
|
8
8
|
|
|
9
|
-
<form
|
|
9
|
+
<form x-data="contactForm()"
|
|
10
|
+
|
|
11
|
+
@submit.prevent="submitData"
|
|
12
|
+
x-ref="contactFormRef"
|
|
13
|
+
class="relative flex flex-col justify-center overflow-hidden group"
|
|
14
|
+
id="form--{{nextRandom}}"
|
|
15
|
+
action="{{this.url}}"
|
|
16
|
+
method="post"
|
|
17
|
+
enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}"
|
|
18
|
+
accept-charset="utf-8" >
|
|
10
19
|
{{> components/forms/fields }}
|
|
11
20
|
|
|
12
21
|
{{> components/forms/controls }}
|
|
13
22
|
</form>
|
|
23
|
+
<script>
|
|
24
|
+
function contactForm() {
|
|
25
|
+
return {
|
|
26
|
+
formData: {
|
|
27
|
+
name: '',
|
|
28
|
+
email: '',
|
|
29
|
+
message: ''
|
|
30
|
+
},
|
|
31
|
+
clickHandler() {
|
|
32
|
+
console.log('check for Error ');
|
|
33
|
+
const form = this.$refs.contactFormRef;
|
|
34
|
+
const formData = new FormData(form);
|
|
35
|
+
const fields = Array.from(form.elements); // Array of all form fields
|
|
36
|
+
|
|
37
|
+
// Loop through each field, focus it, blur it, and serialize the data
|
|
38
|
+
fields.forEach((field) => {
|
|
39
|
+
if (field.type !== 'submit') { // Skip the submit button
|
|
40
|
+
field.focus(); // Focus the field
|
|
41
|
+
field.blur(); // Immediately unfocus (blur) the field
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if(form.reportValidity()){
|
|
45
|
+
this.submitData();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
},
|
|
49
|
+
submitData() {
|
|
50
|
+
const formData = new FormData(this.$refs.contactFormRef);
|
|
51
|
+
// Convert the FormData to a serialized string
|
|
52
|
+
const serializedData = Array.from(formData.entries())
|
|
53
|
+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
|
54
|
+
.join('&');
|
|
55
|
+
|
|
56
|
+
// Log the serialized form data
|
|
57
|
+
console.log('DATA: ' + serializedData);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
14
62
|
{{/components/forms/backgroundBox }}
|
|
15
63
|
{{~else~}}
|
|
16
64
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
{{
|
|
2
|
-
{{
|
|
3
|
-
{{
|
|
4
|
-
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
|
|
3
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
4
|
+
{{/components/button/button}}
|
|
5
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
6
|
+
{{/with}}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
{{
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
|
|
3
|
+
<span class="sr-only">Nächste Seite</span>
|
|
4
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
5
|
+
{{/components/button/link_button}}
|
|
6
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
7
|
+
{{/with}}
|
|
@@ -11,10 +11,13 @@
|
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
13
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
{{#with this}}
|
|
15
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
16
|
+
<span class="sr-only">Zur Seite: </span>
|
|
17
|
+
{{> components/button/components/button_label _label=_totalPages _css=""}}
|
|
18
|
+
{{/components/button/link_button}}
|
|
19
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
20
|
+
{{/with}}
|
|
18
21
|
{{> components/pagination/pagination_button_right_linked }}
|
|
19
22
|
</div>
|
|
20
23
|
{{else}}
|
|
@@ -35,10 +38,13 @@
|
|
|
35
38
|
{{/inline}}
|
|
36
39
|
{{/with}}
|
|
37
40
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
38
|
-
{{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
{{#with this}}
|
|
42
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
43
|
+
<span class="sr-only">Zur Seite: </span>
|
|
44
|
+
{{> components/button/components/button_label _label=_totalPages _css=""}}
|
|
45
|
+
{{/components/button/link_button}}
|
|
46
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
47
|
+
{{/with}}
|
|
42
48
|
{{> components/pagination/pagination_button_right_linked }}
|
|
43
49
|
</div>
|
|
44
50
|
{{else}}
|
|
@@ -62,10 +68,13 @@
|
|
|
62
68
|
{{~#if _notLastButOnePage~}}
|
|
63
69
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
64
70
|
{{~/if~}}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
{{#with this}}
|
|
72
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
73
|
+
<span class="sr-only">Zur Seite: </span>
|
|
74
|
+
{{> components/button/components/button_label _label=_totalPages _css=""}}
|
|
75
|
+
{{/components/button/link_button}}
|
|
76
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
77
|
+
{{/with}}
|
|
69
78
|
{{~/if~}}
|
|
70
79
|
{{~#if _notLastPage~}}
|
|
71
80
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
18
21
|
<span class="sr-only">Zur Seite: </span>
|
|
19
22
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
@@ -37,10 +40,13 @@
|
|
|
37
40
|
aria-current="true"
|
|
38
41
|
{{/inline}}
|
|
39
42
|
{{/with}}
|
|
40
|
-
{{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
{{#with this}}
|
|
44
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
45
|
+
<span class="sr-only">Zur Seite: </span>
|
|
46
|
+
{{> components/button/components/button_label _label="3" _css=""}}
|
|
47
|
+
{{/components/button/link_button}}
|
|
48
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
49
|
+
{{/with}}
|
|
44
50
|
{{> components/pagination/pagination_button_right_linked }}
|
|
45
51
|
</div>
|
|
46
52
|
{{else}}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{> components/pagination/pagination_button_right_linked }}
|
|
18
21
|
</div>
|
|
19
22
|
{{else}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.103.
|
|
9
|
+
"version": "1.103.10",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
"hasNewWebForm": true,
|
|
11
11
|
"title": "Kontaktformular",
|
|
12
12
|
"fields":[
|
|
13
|
+
{
|
|
14
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
15
|
+
"@->contentpath": "input-text-vorname"
|
|
16
|
+
},
|
|
13
17
|
{
|
|
14
18
|
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
15
19
|
"@->contentpath": "input-text-vorname-required"
|
|
@@ -1 +1 @@
|
|
|
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}]}}]}
|
|
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 von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"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}]}}]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="flex items-center">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
|
|
6
|
-
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
|
|
6
|
+
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
|
|
7
7
|
</label>
|
|
8
8
|
|
|
9
9
|
{{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
1
|
+
<div class=" relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
2
|
+
:class="{'animate-shake': hideDescription() }"
|
|
2
3
|
ax-load
|
|
3
4
|
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
5
|
x-ignore
|
|
@@ -7,9 +8,10 @@
|
|
|
7
8
|
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
8
9
|
x-model="input{{getRandom}}"
|
|
9
10
|
id="input{{getRandom}}"
|
|
11
|
+
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
10
12
|
{{#if _required}}
|
|
11
13
|
@focus="isFocused = true;"
|
|
12
|
-
@blur="wasFocused = true; isFocused=false"
|
|
14
|
+
@blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
13
15
|
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
14
16
|
{{/if}}
|
|
15
17
|
type="{{#if _type}}{{_type}}{{/if}}"
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
<div class="relative flex flex-col w-full mb-5"
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
+
x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
|
|
3
|
+
:class="{'animate-shake': !valid && wasFocused && !isFocused }">
|
|
2
4
|
<div class="w-full h-4 bg-white"></div>
|
|
3
5
|
<textarea
|
|
4
6
|
x-model="textarea{{getRandom}}"
|
|
5
7
|
id="textarea{{getRandom}}"
|
|
6
8
|
{{#if _required}}
|
|
7
9
|
@focus="isFocused = true"
|
|
8
|
-
@blur="wasFocused = true; isFocused=false"
|
|
10
|
+
@blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
9
11
|
x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
10
12
|
{{/if}}
|
|
11
13
|
value=""
|
|
@@ -6,11 +6,59 @@
|
|
|
6
6
|
{{this.title}}
|
|
7
7
|
</h3>
|
|
8
8
|
|
|
9
|
-
<form
|
|
9
|
+
<form x-data="contactForm()"
|
|
10
|
+
|
|
11
|
+
@submit.prevent="submitData"
|
|
12
|
+
x-ref="contactFormRef"
|
|
13
|
+
class="relative flex flex-col justify-center overflow-hidden group"
|
|
14
|
+
id="form--{{nextRandom}}"
|
|
15
|
+
action="{{this.url}}"
|
|
16
|
+
method="post"
|
|
17
|
+
enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}"
|
|
18
|
+
accept-charset="utf-8" >
|
|
10
19
|
{{> components/forms/fields }}
|
|
11
20
|
|
|
12
21
|
{{> components/forms/controls }}
|
|
13
22
|
</form>
|
|
23
|
+
<script>
|
|
24
|
+
function contactForm() {
|
|
25
|
+
return {
|
|
26
|
+
formData: {
|
|
27
|
+
name: '',
|
|
28
|
+
email: '',
|
|
29
|
+
message: ''
|
|
30
|
+
},
|
|
31
|
+
clickHandler() {
|
|
32
|
+
console.log('check for Error ');
|
|
33
|
+
const form = this.$refs.contactFormRef;
|
|
34
|
+
const formData = new FormData(form);
|
|
35
|
+
const fields = Array.from(form.elements); // Array of all form fields
|
|
36
|
+
|
|
37
|
+
// Loop through each field, focus it, blur it, and serialize the data
|
|
38
|
+
fields.forEach((field) => {
|
|
39
|
+
if (field.type !== 'submit') { // Skip the submit button
|
|
40
|
+
field.focus(); // Focus the field
|
|
41
|
+
field.blur(); // Immediately unfocus (blur) the field
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if(form.reportValidity()){
|
|
45
|
+
this.submitData();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
},
|
|
49
|
+
submitData() {
|
|
50
|
+
const formData = new FormData(this.$refs.contactFormRef);
|
|
51
|
+
// Convert the FormData to a serialized string
|
|
52
|
+
const serializedData = Array.from(formData.entries())
|
|
53
|
+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
|
54
|
+
.join('&');
|
|
55
|
+
|
|
56
|
+
// Log the serialized form data
|
|
57
|
+
console.log('DATA: ' + serializedData);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
14
62
|
{{/components/forms/backgroundBox }}
|
|
15
63
|
{{~else~}}
|
|
16
64
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
{{
|
|
2
|
-
{{
|
|
3
|
-
{{
|
|
4
|
-
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
|
|
3
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
4
|
+
{{/components/button/button}}
|
|
5
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
6
|
+
{{/with}}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
{{
|
|
1
|
+
{{#with this}}
|
|
2
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
|
|
3
|
+
<span class="sr-only">Nächste Seite</span>
|
|
4
|
+
{{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
|
|
5
|
+
{{/components/button/link_button}}
|
|
6
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
7
|
+
{{/with}}
|
|
@@ -11,10 +11,13 @@
|
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
13
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
{{#with this}}
|
|
15
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
16
|
+
<span class="sr-only">Zur Seite: </span>
|
|
17
|
+
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
18
|
+
{{/components/button/link_button}}
|
|
19
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
20
|
+
{{/with}}
|
|
18
21
|
{{> components/pagination/pagination_button_right_linked }}
|
|
19
22
|
</div>
|
|
20
23
|
{{else}}
|
|
@@ -35,10 +38,13 @@
|
|
|
35
38
|
{{/inline}}
|
|
36
39
|
{{/with}}
|
|
37
40
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
38
|
-
{{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
{{#with this}}
|
|
42
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
43
|
+
<span class="sr-only">Zur Seite: </span>
|
|
44
|
+
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
45
|
+
{{/components/button/link_button}}
|
|
46
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
47
|
+
{{/with}}
|
|
42
48
|
{{> components/pagination/pagination_button_right_linked }}
|
|
43
49
|
</div>
|
|
44
50
|
{{else}}
|
|
@@ -62,10 +68,13 @@
|
|
|
62
68
|
{{~#if _notLastButOnePage~}}
|
|
63
69
|
<span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">…</span>
|
|
64
70
|
{{~/if~}}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
{{#with this}}
|
|
72
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
73
|
+
<span class="sr-only">Zur Seite: </span>
|
|
74
|
+
{{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
|
|
75
|
+
{{/components/button/link_button}}
|
|
76
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
77
|
+
{{/with}}
|
|
69
78
|
{{~/if~}}
|
|
70
79
|
{{~#if _notLastPage~}}
|
|
71
80
|
{{> components/pagination/pagination_button_right_linked }}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
18
21
|
<span class="sr-only">Zur Seite: </span>
|
|
19
22
|
{{> components/button/components/button_label _label="3" _css=""}}
|
|
@@ -37,10 +40,13 @@
|
|
|
37
40
|
aria-current="true"
|
|
38
41
|
{{/inline}}
|
|
39
42
|
{{/with}}
|
|
40
|
-
{{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
{{#with this}}
|
|
44
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
45
|
+
<span class="sr-only">Zur Seite: </span>
|
|
46
|
+
{{> components/button/components/button_label _label="3" _css=""}}
|
|
47
|
+
{{/components/button/link_button}}
|
|
48
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
49
|
+
{{/with}}
|
|
44
50
|
{{> components/pagination/pagination_button_right_linked }}
|
|
45
51
|
</div>
|
|
46
52
|
{{else}}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
aria-current="true"
|
|
11
11
|
{{/inline}}
|
|
12
12
|
{{/with}}
|
|
13
|
-
{{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
{{#with this}}
|
|
14
|
+
{{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
|
|
15
|
+
<span class="sr-only">Zur Seite: </span>
|
|
16
|
+
{{> components/button/components/button_label _label="2" _css=""}}
|
|
17
|
+
{{/components/button/link_button}}
|
|
18
|
+
{{#*inline "htmlProperties"}}{{/inline}}
|
|
19
|
+
{{/with}}
|
|
17
20
|
{{> components/pagination/pagination_button_right_linked }}
|
|
18
21
|
</div>
|
|
19
22
|
{{else}}
|
package/tailwind.config.js
CHANGED
|
@@ -44,6 +44,25 @@ module.exports = {
|
|
|
44
44
|
},
|
|
45
45
|
|
|
46
46
|
extend: {
|
|
47
|
+
animation:{
|
|
48
|
+
'shake': 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
|
|
49
|
+
},
|
|
50
|
+
keyframes: {
|
|
51
|
+
'shake' : {
|
|
52
|
+
'10%, 90%': {
|
|
53
|
+
transform: 'translate3d(-1px, 0, 0)'
|
|
54
|
+
},
|
|
55
|
+
'20%, 80%' : {
|
|
56
|
+
transform: 'translate3d(2px, 0, 0)'
|
|
57
|
+
},
|
|
58
|
+
'30%, 50%, 70%': {
|
|
59
|
+
transform: 'translate3d(-4px, 0, 0)'
|
|
60
|
+
},
|
|
61
|
+
'40%, 60%': {
|
|
62
|
+
transform: 'translate3d(4px, 0, 0)'
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
},
|
|
47
66
|
backgroundImage: {
|
|
48
67
|
'logo-footer': 'var(--bg-logo-footer)'
|
|
49
68
|
},
|