hr-design-system-handlebars 1.103.7 → 1.103.9

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.
Files changed (42) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/icons/icons/svgmap/error-ds.svg +6 -0
  3. package/dist/assets/icons/icons/svgmap/send-ds.svg +5 -0
  4. package/dist/assets/icons/icons/svgmap.min.svg +1 -1
  5. package/dist/assets/index.css +3 -26
  6. package/dist/views/components/forms/controls.hbs +14 -0
  7. package/dist/views/components/forms/error_icon.hbs +3 -0
  8. package/dist/views/components/forms/input.hbs +1 -21
  9. package/dist/views/components/forms/select.hbs +2 -17
  10. package/dist/views/components/forms/textarea.hbs +7 -21
  11. package/dist/views/components/forms/webform.hbs +2 -0
  12. package/dist/views/components/pagination/pagination_button_right.hbs +6 -4
  13. package/dist/views/components/pagination/pagination_button_right_linked.hbs +7 -4
  14. package/dist/views/components/pagination/pagination_more_than_three_pages.hbs +21 -12
  15. package/dist/views/components/pagination/pagination_only_three_pages.hbs +14 -8
  16. package/dist/views/components/pagination/pagination_only_two_pages.hbs +7 -4
  17. package/dist/views_static/components/forms/controls.hbs +14 -0
  18. package/dist/views_static/components/forms/error_icon.hbs +3 -0
  19. package/dist/views_static/components/forms/input.hbs +1 -21
  20. package/dist/views_static/components/forms/select.hbs +2 -17
  21. package/dist/views_static/components/forms/textarea.hbs +7 -21
  22. package/dist/views_static/components/forms/webform.hbs +2 -0
  23. package/dist/views_static/components/pagination/pagination_button_right.hbs +6 -4
  24. package/dist/views_static/components/pagination/pagination_button_right_linked.hbs +7 -4
  25. package/dist/views_static/components/pagination/pagination_more_than_three_pages.hbs +21 -12
  26. package/dist/views_static/components/pagination/pagination_only_three_pages.hbs +14 -8
  27. package/dist/views_static/components/pagination/pagination_only_two_pages.hbs +7 -4
  28. package/package.json +1 -1
  29. package/src/assets/icons/icons/svgmap/error-ds.svg +6 -0
  30. package/src/assets/icons/icons/svgmap/send-ds.svg +5 -0
  31. package/src/assets/icons/icons/svgmap.min.svg +1 -1
  32. package/src/stories/views/components/forms/controls.hbs +14 -0
  33. package/src/stories/views/components/forms/error_icon.hbs +3 -0
  34. package/src/stories/views/components/forms/input.hbs +1 -21
  35. package/src/stories/views/components/forms/select.hbs +2 -17
  36. package/src/stories/views/components/forms/textarea.hbs +7 -21
  37. package/src/stories/views/components/forms/webform.hbs +2 -0
  38. package/src/stories/views/components/pagination/pagination_button_right.hbs +6 -4
  39. package/src/stories/views/components/pagination/pagination_button_right_linked.hbs +7 -4
  40. package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs +21 -12
  41. package/src/stories/views/components/pagination/pagination_only_three_pages.hbs +14 -8
  42. package/src/stories/views/components/pagination/pagination_only_two_pages.hbs +7 -4
package/dist/assets/index.css CHANGED
@@ -2225,10 +2225,6 @@ article.indexTextDS .indexTextHighlighted .link {
2225
2225
  .rounded-lg {
2226
2226
  border-radius: 0.5rem;
2227
2227
  }
2228
- .rounded-b {
2229
- border-bottom-right-radius: 0.25rem;
2230
- border-bottom-left-radius: 0.25rem;
2231
- }
2232
2228
  .rounded-l {
2233
2229
  border-top-left-radius: 0.25rem;
2234
2230
  border-bottom-left-radius: 0.25rem;
@@ -2290,9 +2286,6 @@ article.indexTextDS .indexTextHighlighted .link {
2290
2286
  .border-t {
2291
2287
  border-top-width: 1px;
2292
2288
  }
2293
- .border-t-0 {
2294
- border-top-width: 0px;
2295
- }
2296
2289
  .border-t-\[3px\] {
2297
2290
  border-top-width: 3px;
2298
2291
  }
@@ -2386,10 +2379,6 @@ article.indexTextDS .indexTextHighlighted .link {
2386
2379
  border-color: #005293;
2387
2380
  border-color: var(--color-primary-ds);
2388
2381
  }
2389
- .border-red-400 {
2390
- --tw-border-opacity: 1;
2391
- border-color: rgba(248, 113, 113, var(--tw-border-opacity));
2392
- }
2393
2382
  .border-red-500 {
2394
2383
  --tw-border-opacity: 1;
2395
2384
  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
@@ -2591,14 +2580,6 @@ article.indexTextDS .indexTextHighlighted .link {
2591
2580
  background-color: #005293;
2592
2581
  background-color: var(--color-primary-ds);
2593
2582
  }
2594
- .bg-red-100 {
2595
- --tw-bg-opacity: 1;
2596
- background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
2597
- }
2598
- .bg-red-500 {
2599
- --tw-bg-opacity: 1;
2600
- background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
2601
- }
2602
2583
  .bg-slate-200 {
2603
2584
  --tw-bg-opacity: 1;
2604
2585
  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
@@ -3207,10 +3188,6 @@ article.indexTextDS .indexTextHighlighted .link {
3207
3188
  --tw-text-opacity: 1;
3208
3189
  color: rgba(22, 163, 74, var(--tw-text-opacity));
3209
3190
  }
3210
- .text-green-800 {
3211
- --tw-text-opacity: 1;
3212
- color: rgba(22, 101, 52, var(--tw-text-opacity));
3213
- }
3214
3191
  .text-inherit {
3215
3192
  color: inherit;
3216
3193
  }
@@ -3501,7 +3478,7 @@ article.indexTextDS .indexTextHighlighted .link {
3501
3478
  border-bottom-color: var(--color-secondary-ds);
3502
3479
  }
3503
3480
  .counter-reset {
3504
- counter-reset: cnt1727879605712;
3481
+ counter-reset: cnt1728027709494;
3505
3482
  }
3506
3483
  .hyphens-auto {
3507
3484
  -webkit-hyphens: auto;
@@ -3909,7 +3886,7 @@ article.indexTextDS .indexTextHighlighted .link {
3909
3886
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3910
3887
  }
3911
3888
  .-ordered {
3912
- counter-increment: cnt1727879605712 1;
3889
+ counter-increment: cnt1728027709494 1;
3913
3890
  }
3914
3891
  .-ordered::before {
3915
3892
  position: absolute;
@@ -3925,7 +3902,7 @@ article.indexTextDS .indexTextHighlighted .link {
3925
3902
  letter-spacing: .0125em;
3926
3903
  --tw-text-opacity: 1;
3927
3904
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3928
- content: counter(cnt1727879605712);
3905
+ content: counter(cnt1728027709494);
3929
3906
  }
3930
3907
  /*! ****************************/
3931
3908
  /*! DataPolicy stuff */
package/dist/views/components/forms/controls.hbs ADDED
@@ -0,0 +1,14 @@
1
+ <div class="flex items-center justify-between">
2
+ <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
3
+ <div class="flex items-center">
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
+ {{> 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" />
7
+ </label>
8
+
9
+ {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
10
+ <span class="text-base ds-button-label ">Zurücksetzen</span>
11
+ {{/components/button/button}}
12
+
13
+ </div>
14
+ </div>
package/dist/views/components/forms/error_icon.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
2
+ {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
3
+ </div>
package/dist/views/components/forms/input.hbs CHANGED
@@ -61,9 +61,7 @@
61
61
  </label>
62
62
  {{#if _required}}
63
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>
64
+ {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
67
65
  </div>
68
66
  {{/if}}
69
67
  <div class="flex items-end justify-between h-5 font-heading">
@@ -77,22 +75,4 @@
77
75
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
78
76
  {{/if~}}
79
77
  </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
78
  </div>
package/dist/views/components/forms/select.hbs CHANGED
@@ -45,9 +45,7 @@
45
45
  </label>
46
46
  {{#if _required}}
47
47
  <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
48
- <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
49
- {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
50
- </div>
48
+ {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
51
49
  </div>
52
50
  {{/if}}
53
51
  <div class="flex items-end justify-between h-5 font-heading">
@@ -60,18 +58,5 @@
60
58
  </div>
61
59
  <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
62
60
  {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
63
- </div>
64
- <div class="hidden">
65
- <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
66
- DEBUG
67
- </div>
68
- <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
69
- <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
70
- <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
71
- <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
72
- <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
73
- <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
74
- <div>select:<span x-text="select{{getRandom}}" class="font-bold" ></span></div>
75
- </div>
76
- </div>
61
+ </div>
77
62
  </div>
package/dist/views/components/forms/textarea.hbs CHANGED
@@ -33,14 +33,14 @@
33
33
  {{#if _required}}
34
34
  :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
35
35
  {{/if}}
36
- >{{#if _formField.isValid}}
36
+ >{{~#if _formField.isValid~}}
37
37
  {{{_formField.forHtmlContent}}}
38
- {{else}}
39
- {{#if _value}}
38
+ {{~else~}}
39
+ {{~#if _value~}}
40
40
  {{_value}}
41
- {{else}}
42
- {{_defaultValue}}
43
- {{/if}}{{/if}}</textarea>
41
+ {{~else~}}
42
+ {{~_defaultValue~}}
43
+ {{~/if}}{{/if}}</textarea>
44
44
  <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
45
45
 
46
46
  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
@@ -56,9 +56,7 @@
56
56
  </label>
57
57
  {{#if _required}}
58
58
  <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
59
- <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
60
- {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
61
- </div>
59
+ {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
62
60
  </div>
63
61
  {{/if}}
64
62
  <div class="flex items-end justify-between h-5 font-heading">
@@ -72,16 +70,4 @@
72
70
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
73
71
  {{/if~}}
74
72
  </div>
75
-
76
- <div class="hidden">
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>
86
- </div>
87
73
  </div>
package/dist/views/components/forms/webform.hbs CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
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
10
  {{> components/forms/fields }}
11
+
12
+ {{> components/forms/controls }}
11
13
  </form>
12
14
  {{/components/forms/backgroundBox }}
13
15
  {{~else~}}
package/dist/views/components/pagination/pagination_button_right.hbs CHANGED
@@ -1,4 +1,6 @@
1
- {{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
2
- {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
3
- {{/components/button/button}}
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}}
package/dist/views/components/pagination/pagination_button_right_linked.hbs CHANGED
@@ -1,4 +1,7 @@
1
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
2
- <span class="sr-only">Nächste Seite</span>
3
- {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
4
- {{/components/button/link_button}}
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}}
package/dist/views/components/pagination/pagination_more_than_three_pages.hbs CHANGED
@@ -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">&hellip;</span>
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=../../_totalPages-adjust_context _css=""}}
17
- {{/components/button/link_button}}
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">&hellip;</span>
38
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
39
- <span class="sr-only">Zur Seite: </span>
40
- {{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
41
- {{/components/button/link_button}}
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">&hellip;</span>
64
70
  {{~/if~}}
65
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
66
- <span class="sr-only">Zur Seite: </span>
67
- {{> components/button/components/button_label _label=../../_totalPages-adjust_context _css=""}}
68
- {{/components/button/link_button}}
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 }}
package/dist/views/components/pagination/pagination_only_three_pages.hbs CHANGED
@@ -10,10 +10,13 @@
10
10
  aria-current="true"
11
11
  {{/inline}}
12
12
  {{/with}}
13
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
14
- <span class="sr-only">Zur Seite: </span>
15
- {{> components/button/components/button_label _label="2" _css=""}}
16
- {{/components/button/link_button}}
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
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
41
- <span class="sr-only">Zur Seite: </span>
42
- {{> components/button/components/button_label _label="3" _css=""}}
43
- {{/components/button/link_button}}
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}}
package/dist/views/components/pagination/pagination_only_two_pages.hbs CHANGED
@@ -10,10 +10,13 @@
10
10
  aria-current="true"
11
11
  {{/inline}}
12
12
  {{/with}}
13
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
14
- <span class="sr-only">Zur Seite: </span>
15
- {{> components/button/components/button_label _label="2" _css=""}}
16
- {{/components/button/link_button}}
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/dist/views_static/components/forms/controls.hbs ADDED
@@ -0,0 +1,14 @@
1
+ <div class="flex items-center justify-between">
2
+ <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
3
+ <div class="flex items-center">
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
+ {{> 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" />
7
+ </label>
8
+
9
+ {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
10
+ <span class="text-base ds-button-label ">Zurücksetzen</span>
11
+ {{/components/button/button}}
12
+
13
+ </div>
14
+ </div>
package/dist/views_static/components/forms/error_icon.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
2
+ {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
3
+ </div>
package/dist/views_static/components/forms/input.hbs CHANGED
@@ -61,9 +61,7 @@
61
61
  </label>
62
62
  {{#if _required}}
63
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>
64
+ {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
67
65
  </div>
68
66
  {{/if}}
69
67
  <div class="flex items-end justify-between h-5 font-heading">
@@ -77,22 +75,4 @@
77
75
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
78
76
  {{/if~}}
79
77
  </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
78
  </div>
package/dist/views_static/components/forms/select.hbs CHANGED
@@ -45,9 +45,7 @@
45
45
  </label>
46
46
  {{#if _required}}
47
47
  <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
48
- <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
49
- {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
50
- </div>
48
+ {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
51
49
  </div>
52
50
  {{/if}}
53
51
  <div class="flex items-end justify-between h-5 font-heading">
@@ -60,18 +58,5 @@
60
58
  </div>
61
59
  <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
62
60
  {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
63
- </div>
64
- <div class="hidden">
65
- <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
66
- DEBUG
67
- </div>
68
- <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
69
- <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
70
- <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
71
- <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
72
- <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
73
- <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
74
- <div>select:<span x-text="select{{getRandom}}" class="font-bold" ></span></div>
75
- </div>
76
- </div>
61
+ </div>
77
62
  </div>
package/dist/views_static/components/forms/textarea.hbs CHANGED
@@ -33,14 +33,14 @@
33
33
  {{#if _required}}
34
34
  :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
35
35
  {{/if}}
36
- >{{#if _formField.isValid}}
36
+ >{{~#if _formField.isValid~}}
37
37
  {{{_formField.forHtmlContent}}}
38
- {{else}}
39
- {{#if _value}}
38
+ {{~else~}}
39
+ {{~#if _value~}}
40
40
  {{_value}}
41
- {{else}}
42
- {{_defaultValue}}
43
- {{/if}}{{/if}}</textarea>
41
+ {{~else~}}
42
+ {{~_defaultValue~}}
43
+ {{~/if}}{{/if}}</textarea>
44
44
  <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
45
45
 
46
46
  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
@@ -56,9 +56,7 @@
56
56
  </label>
57
57
  {{#if _required}}
58
58
  <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
59
- <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
60
- {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
61
- </div>
59
+ {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
62
60
  </div>
63
61
  {{/if}}
64
62
  <div class="flex items-end justify-between h-5 font-heading">
@@ -72,16 +70,4 @@
72
70
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
73
71
  {{/if~}}
74
72
  </div>
75
-
76
- <div class="hidden">
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>
86
- </div>
87
73
  </div>
package/dist/views_static/components/forms/webform.hbs CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
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
10
  {{> components/forms/fields }}
11
+
12
+ {{> components/forms/controls }}
11
13
  </form>
12
14
  {{/components/forms/backgroundBox }}
13
15
  {{~else~}}
package/dist/views_static/components/pagination/pagination_button_right.hbs CHANGED
@@ -1,4 +1,6 @@
1
- {{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
2
- {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
3
- {{/components/button/button}}
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}}
package/dist/views_static/components/pagination/pagination_button_right_linked.hbs CHANGED
@@ -1,4 +1,7 @@
1
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
2
- <span class="sr-only">Nächste Seite</span>
3
- {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
4
- {{/components/button/link_button}}
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}}
package/dist/views_static/components/pagination/pagination_more_than_three_pages.hbs CHANGED
@@ -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">&hellip;</span>
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=_totalPages _css=""}}
17
- {{/components/button/link_button}}
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">&hellip;</span>
38
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
39
- <span class="sr-only">Zur Seite: </span>
40
- {{> components/button/components/button_label _label=_totalPages _css=""}}
41
- {{/components/button/link_button}}
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">&hellip;</span>
64
70
  {{~/if~}}
65
- {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
66
- <span class="sr-only">Zur Seite: </span>
67
- {{> components/button/components/button_label _label=_totalPages _css=""}}
68
- {{/components/button/link_button}}
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 }}