hr-design-system-handlebars 1.100.0 → 1.100.1
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/.storybook/main.js +1 -0
- package/CHANGELOG.md +14 -0
- package/dist/assets/index.css +136 -5
- package/dist/views/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views/components/forms/fields.hbs +94 -0
- package/dist/views/components/forms/input_single_line.hbs +71 -0
- package/dist/views/components/forms/webform.hbs +20 -0
- package/dist/views_static/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views_static/components/forms/fields.hbs +94 -0
- package/dist/views_static/components/forms/input_single_line.hbs +71 -0
- package/dist/views_static/components/forms/webform.hbs +20 -0
- package/package.json +2 -1
- package/src/assets/fixtures/content/copytext/components/form/form_input.json +17 -0
- package/src/assets/fixtures/content/copytext/copytext_webform.json +24 -0
- package/src/assets/fixtures/forms/form_fields.inc.json +44 -0
- package/src/assets/fixtures/forms/form_input.json +16 -0
- package/src/stories/views/components/content/copytext/components/form/fixtures/form_input.json +1 -0
- package/src/stories/views/components/content/copytext/copytext.stories.js +7 -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 -0
- package/src/stories/views/components/forms/fields.hbs +94 -0
- package/src/stories/views/components/forms/fixtures/form_input.json +1 -0
- package/src/stories/views/components/forms/form.mdx +26 -0
- package/src/stories/views/components/forms/form.stories.js +39 -0
- package/src/stories/views/components/forms/input_single_line.hbs +71 -0
- package/src/stories/views/components/forms/webform.hbs +20 -0
- package/dist/views/components/content/copytext/components/webform.hbs +0 -5
- package/dist/views_static/components/content/copytext/components/webform.hbs +0 -5
- package/src/stories/views/components/content/copytext/components/webform.hbs +0 -5
package/.storybook/main.js
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# v1.100.1 (Mon Sep 09 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- add form input [#1057](https://github.com/mumprod/hr-design-system-handlebars/pull/1057) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 3
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
11
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
1
15
|
# v1.100.0 (Mon Sep 09 2024)
|
|
2
16
|
|
|
3
17
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -426,7 +426,17 @@ video {
|
|
|
426
426
|
font-stretch: condensed;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
-
.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
|
|
429
|
+
.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:scale-75 {
|
|
430
|
+
--tw-translate-x: 0;
|
|
431
|
+
--tw-translate-y: 0;
|
|
432
|
+
--tw-rotate: 0;
|
|
433
|
+
--tw-skew-x: 0;
|
|
434
|
+
--tw-skew-y: 0;
|
|
435
|
+
--tw-scale-x: 1;
|
|
436
|
+
--tw-scale-y: 1;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.peer-focus\:-translate-y-0 {
|
|
430
440
|
--tw-translate-x: 0;
|
|
431
441
|
--tw-translate-y: 0;
|
|
432
442
|
--tw-rotate: 0;
|
|
@@ -449,7 +459,7 @@ video {
|
|
|
449
459
|
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
450
460
|
}
|
|
451
461
|
|
|
452
|
-
.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
|
|
462
|
+
.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .ring-1, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
|
|
453
463
|
--tw-ring-inset: ;
|
|
454
464
|
--tw-ring-offset-width: 0px;
|
|
455
465
|
--tw-ring-offset-color: #fff;
|
|
@@ -1117,6 +1127,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1117
1127
|
.left-8 {
|
|
1118
1128
|
left: 2rem;
|
|
1119
1129
|
}
|
|
1130
|
+
.left-\[16px\] {
|
|
1131
|
+
left: 16px;
|
|
1132
|
+
}
|
|
1120
1133
|
.left-\[4px\] {
|
|
1121
1134
|
left: 4px;
|
|
1122
1135
|
}
|
|
@@ -1175,6 +1188,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1175
1188
|
.top-full {
|
|
1176
1189
|
top: 100%;
|
|
1177
1190
|
}
|
|
1191
|
+
.top-px {
|
|
1192
|
+
top: 1px;
|
|
1193
|
+
}
|
|
1178
1194
|
.-z-40 {
|
|
1179
1195
|
z-index: -40;
|
|
1180
1196
|
}
|
|
@@ -1873,6 +1889,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1873
1889
|
.basis-full {
|
|
1874
1890
|
flex-basis: 100%;
|
|
1875
1891
|
}
|
|
1892
|
+
.origin-top-left {
|
|
1893
|
+
transform-origin: top left;
|
|
1894
|
+
}
|
|
1876
1895
|
.-translate-x-1\/2 {
|
|
1877
1896
|
--tw-translate-x: -50%;
|
|
1878
1897
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1885,6 +1904,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1885
1904
|
--tw-translate-y: -50%;
|
|
1886
1905
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1887
1906
|
}
|
|
1907
|
+
.translate-x-0 {
|
|
1908
|
+
--tw-translate-x: 0px;
|
|
1909
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1910
|
+
}
|
|
1888
1911
|
.translate-y-0 {
|
|
1889
1912
|
--tw-translate-y: 0px;
|
|
1890
1913
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1914,6 +1937,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1914
1937
|
--tw-scale-y: .5;
|
|
1915
1938
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1916
1939
|
}
|
|
1940
|
+
.scale-75 {
|
|
1941
|
+
--tw-scale-x: .75;
|
|
1942
|
+
--tw-scale-y: .75;
|
|
1943
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1944
|
+
}
|
|
1917
1945
|
.scale-y-100 {
|
|
1918
1946
|
--tw-scale-y: 1;
|
|
1919
1947
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -2248,6 +2276,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2248
2276
|
--tw-border-opacity: 1;
|
|
2249
2277
|
border-color: rgba(227, 227, 227, var(--tw-border-opacity));
|
|
2250
2278
|
}
|
|
2279
|
+
.border-blue-500 {
|
|
2280
|
+
--tw-border-opacity: 1;
|
|
2281
|
+
border-color: rgba(59, 130, 246, var(--tw-border-opacity));
|
|
2282
|
+
}
|
|
2251
2283
|
.border-brandnavigation-border-color {
|
|
2252
2284
|
border-color: #005293;
|
|
2253
2285
|
border-color: var(--color-brandnavigation-border-color);
|
|
@@ -2333,6 +2365,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2333
2365
|
border-bottom-color: #606060;
|
|
2334
2366
|
border-bottom-color: var(--color-secondary-ds);
|
|
2335
2367
|
}
|
|
2368
|
+
.border-t-transparent {
|
|
2369
|
+
border-top-color: transparent;
|
|
2370
|
+
}
|
|
2336
2371
|
.bg-\[\#d8e9f6\] {
|
|
2337
2372
|
--tw-bg-opacity: 1;
|
|
2338
2373
|
background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
|
|
@@ -2768,6 +2803,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2768
2803
|
.pb-6 {
|
|
2769
2804
|
padding-bottom: 1.5rem;
|
|
2770
2805
|
}
|
|
2806
|
+
.pb-8 {
|
|
2807
|
+
padding-bottom: 2rem;
|
|
2808
|
+
}
|
|
2771
2809
|
.pb-9 {
|
|
2772
2810
|
padding-bottom: 2.25rem;
|
|
2773
2811
|
}
|
|
@@ -2829,6 +2867,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2829
2867
|
.pt-1\.5 {
|
|
2830
2868
|
padding-top: 0.375rem;
|
|
2831
2869
|
}
|
|
2870
|
+
.pt-10 {
|
|
2871
|
+
padding-top: 2.5rem;
|
|
2872
|
+
}
|
|
2832
2873
|
.pt-2 {
|
|
2833
2874
|
padding-top: 0.5rem;
|
|
2834
2875
|
}
|
|
@@ -3060,6 +3101,14 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3060
3101
|
color: #000000;
|
|
3061
3102
|
color: var(--color-footer-text);
|
|
3062
3103
|
}
|
|
3104
|
+
.text-gray-500 {
|
|
3105
|
+
--tw-text-opacity: 1;
|
|
3106
|
+
color: rgba(107, 114, 128, var(--tw-text-opacity));
|
|
3107
|
+
}
|
|
3108
|
+
.text-gray-800 {
|
|
3109
|
+
--tw-text-opacity: 1;
|
|
3110
|
+
color: rgba(31, 41, 55, var(--tw-text-opacity));
|
|
3111
|
+
}
|
|
3063
3112
|
.text-gray-dark {
|
|
3064
3113
|
--tw-text-opacity: 1;
|
|
3065
3114
|
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
@@ -3103,6 +3152,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3103
3152
|
color: #005293;
|
|
3104
3153
|
color: var(--color-primary-ds);
|
|
3105
3154
|
}
|
|
3155
|
+
.text-red-700 {
|
|
3156
|
+
--tw-text-opacity: 1;
|
|
3157
|
+
color: rgba(185, 28, 28, var(--tw-text-opacity));
|
|
3158
|
+
}
|
|
3106
3159
|
.text-search-footer-text {
|
|
3107
3160
|
color: #000000;
|
|
3108
3161
|
color: var(--color-search-footer-text);
|
|
@@ -3199,6 +3252,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3199
3252
|
color: #000000;
|
|
3200
3253
|
color: var(--color-search-footer-text);
|
|
3201
3254
|
}
|
|
3255
|
+
.placeholder-transparent::-webkit-input-placeholder {
|
|
3256
|
+
color: transparent;
|
|
3257
|
+
}
|
|
3258
|
+
.placeholder-transparent::-moz-placeholder {
|
|
3259
|
+
color: transparent;
|
|
3260
|
+
}
|
|
3261
|
+
.placeholder-transparent::placeholder {
|
|
3262
|
+
color: transparent;
|
|
3263
|
+
}
|
|
3202
3264
|
.placeholder-opacity-100::-webkit-input-placeholder {
|
|
3203
3265
|
--tw-placeholder-opacity: 1;
|
|
3204
3266
|
}
|
|
@@ -3244,6 +3306,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3244
3306
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
|
|
3245
3307
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
|
|
3246
3308
|
}
|
|
3309
|
+
.ring-1 {
|
|
3310
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
3311
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
3312
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
|
|
3313
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
|
|
3314
|
+
}
|
|
3315
|
+
.ring-gray-900\/5 {
|
|
3316
|
+
--tw-ring-color: rgba(17, 24, 39, 0.05);
|
|
3317
|
+
}
|
|
3247
3318
|
.ring-podcast {
|
|
3248
3319
|
--tw-ring-color: var(--color-podcast);
|
|
3249
3320
|
}
|
|
@@ -3297,6 +3368,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3297
3368
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3298
3369
|
transition-duration: 150ms;
|
|
3299
3370
|
}
|
|
3371
|
+
.transition-transform {
|
|
3372
|
+
transition-property: transform;
|
|
3373
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3374
|
+
transition-duration: 150ms;
|
|
3375
|
+
}
|
|
3300
3376
|
.delay-0 {
|
|
3301
3377
|
transition-delay: 0s;
|
|
3302
3378
|
}
|
|
@@ -3336,12 +3412,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3336
3412
|
.ease-out {
|
|
3337
3413
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3338
3414
|
}
|
|
3415
|
+
.border-t-transparent {
|
|
3416
|
+
border-top-color: transparent;
|
|
3417
|
+
}
|
|
3339
3418
|
.border-b-secondary {
|
|
3340
3419
|
border-bottom-color: #606060;
|
|
3341
3420
|
border-bottom-color: var(--color-secondary-ds);
|
|
3342
3421
|
}
|
|
3343
3422
|
.counter-reset {
|
|
3344
|
-
counter-reset:
|
|
3423
|
+
counter-reset: cnt1725891148652;
|
|
3345
3424
|
}
|
|
3346
3425
|
.hyphens-auto {
|
|
3347
3426
|
-webkit-hyphens: auto;
|
|
@@ -3749,7 +3828,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3749
3828
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3750
3829
|
}
|
|
3751
3830
|
.-ordered {
|
|
3752
|
-
counter-increment:
|
|
3831
|
+
counter-increment: cnt1725891148652 1;
|
|
3753
3832
|
}
|
|
3754
3833
|
.-ordered::before {
|
|
3755
3834
|
position: absolute;
|
|
@@ -3765,7 +3844,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3765
3844
|
letter-spacing: .0125em;
|
|
3766
3845
|
--tw-text-opacity: 1;
|
|
3767
3846
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3768
|
-
content: counter(
|
|
3847
|
+
content: counter(cnt1725891148652);
|
|
3769
3848
|
}
|
|
3770
3849
|
/*! ****************************/
|
|
3771
3850
|
/*! DataPolicy stuff */
|
|
@@ -5790,6 +5869,49 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
5790
5869
|
--tw-text-opacity: 1;
|
|
5791
5870
|
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
|
5792
5871
|
}
|
|
5872
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
|
|
5873
|
+
--tw-translate-x: 0px;
|
|
5874
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5875
|
+
}
|
|
5876
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
|
|
5877
|
+
--tw-translate-x: 0px;
|
|
5878
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5879
|
+
}
|
|
5880
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
|
|
5881
|
+
--tw-translate-y: 0.75rem;
|
|
5882
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5883
|
+
}
|
|
5884
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
|
|
5885
|
+
--tw-translate-y: 0.75rem;
|
|
5886
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5887
|
+
}
|
|
5888
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
|
|
5889
|
+
--tw-scale-x: 1;
|
|
5890
|
+
--tw-scale-y: 1;
|
|
5891
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5892
|
+
}
|
|
5893
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
|
|
5894
|
+
--tw-scale-x: 1;
|
|
5895
|
+
--tw-scale-y: 1;
|
|
5896
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5897
|
+
}
|
|
5898
|
+
.peer:focus ~ .peer-focus\:-translate-y-0 {
|
|
5899
|
+
--tw-translate-y: -0px;
|
|
5900
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5901
|
+
}
|
|
5902
|
+
.peer:focus ~ .peer-focus\:translate-x-0 {
|
|
5903
|
+
--tw-translate-x: 0px;
|
|
5904
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5905
|
+
}
|
|
5906
|
+
.peer:focus ~ .peer-focus\:scale-75 {
|
|
5907
|
+
--tw-scale-x: .75;
|
|
5908
|
+
--tw-scale-y: .75;
|
|
5909
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5910
|
+
}
|
|
5911
|
+
.peer:focus ~ .peer-focus\:text-blue-500 {
|
|
5912
|
+
--tw-text-opacity: 1;
|
|
5913
|
+
color: rgba(59, 130, 246, var(--tw-text-opacity));
|
|
5914
|
+
}
|
|
5793
5915
|
.aria-hidden\:hidden[aria-hidden="true"] {
|
|
5794
5916
|
display: none;
|
|
5795
5917
|
}
|
|
@@ -6399,6 +6521,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6399
6521
|
column-gap: 0.5rem;
|
|
6400
6522
|
}
|
|
6401
6523
|
|
|
6524
|
+
.sm\:rounded-lg {
|
|
6525
|
+
border-radius: 0.5rem;
|
|
6526
|
+
}
|
|
6527
|
+
|
|
6402
6528
|
.sm\:bg-transparent {
|
|
6403
6529
|
background-color: transparent;
|
|
6404
6530
|
}
|
|
@@ -6447,6 +6573,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6447
6573
|
padding-right: 2.375rem;
|
|
6448
6574
|
}
|
|
6449
6575
|
|
|
6576
|
+
.sm\:py-12 {
|
|
6577
|
+
padding-top: 3rem;
|
|
6578
|
+
padding-bottom: 3rem;
|
|
6579
|
+
}
|
|
6580
|
+
|
|
6450
6581
|
.sm\:py-4 {
|
|
6451
6582
|
padding-top: 1rem;
|
|
6452
6583
|
padding-bottom: 1rem;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
}}
|
|
46
|
+
{{else if this.type.isSelect}}
|
|
47
|
+
{{~> modules/forms/select
|
|
48
|
+
_name=this.name
|
|
49
|
+
_label=this.label
|
|
50
|
+
_labelClass="hide"
|
|
51
|
+
_description=this.description
|
|
52
|
+
_items=this.options
|
|
53
|
+
_required=this.isRequired
|
|
54
|
+
}}
|
|
55
|
+
{{else if this.type.isChoice}}
|
|
56
|
+
{{#if this.isGrouped }}
|
|
57
|
+
{{~> modules/forms/choiceGroup
|
|
58
|
+
_type=this.type.asString
|
|
59
|
+
_name=this.name
|
|
60
|
+
_label=this.label
|
|
61
|
+
_description=this.description
|
|
62
|
+
_items=this.options
|
|
63
|
+
_required=this.isRequired
|
|
64
|
+
_multipleChoice=../_multipleChoice
|
|
65
|
+
_addClass=../_addClass
|
|
66
|
+
|
|
67
|
+
}}
|
|
68
|
+
{{else}}
|
|
69
|
+
{{~> modules/forms/choice
|
|
70
|
+
_type=this.type.asString
|
|
71
|
+
_name=this.name
|
|
72
|
+
_label=this.label
|
|
73
|
+
_labelClass=(if this.isMeta "-meta")
|
|
74
|
+
_description=this.description
|
|
75
|
+
_value=this.options.[0].value
|
|
76
|
+
_required=this.isRequired
|
|
77
|
+
_selected= this.options.[0].isSelected
|
|
78
|
+
}}
|
|
79
|
+
{{/if}}
|
|
80
|
+
{{else if this.type.isUpload}}
|
|
81
|
+
{{~> modules/forms/upload
|
|
82
|
+
_name=this.name
|
|
83
|
+
_label=this.label
|
|
84
|
+
_description=this.description
|
|
85
|
+
_multiple=false
|
|
86
|
+
_required=this.isRequired
|
|
87
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
88
|
+
}}
|
|
89
|
+
{{/if}}
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
{{/if}}
|
|
93
|
+
|
|
94
|
+
{{/each}}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div x-text="valid"></div>
|
|
41
|
+
<div x-text="input{{getRandom}}.length "></div>
|
|
42
|
+
</div>
|
|
43
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
|
+
|
|
45
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
46
|
+
|
|
47
|
+
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">
|
|
48
|
+
{{#if _hasBody}}
|
|
49
|
+
{{decorator_body}}
|
|
50
|
+
{{else}}
|
|
51
|
+
{{#if _locaKey}}
|
|
52
|
+
{{loca _locaKey}}
|
|
53
|
+
{{else}}
|
|
54
|
+
{{#if _label}}
|
|
55
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
</label>
|
|
60
|
+
<div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
|
|
61
|
+
{{#if _description}}
|
|
62
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
|
|
63
|
+
{{/if}}
|
|
64
|
+
{{#if _required}}
|
|
65
|
+
<div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
|
|
66
|
+
{{/if}}
|
|
67
|
+
{{#if _maxLength}}
|
|
68
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
|
+
{{/if~}}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
<form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
|
|
3
|
+
|
|
4
|
+
<div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
|
|
5
|
+
|
|
6
|
+
{{> components/forms/fields }}
|
|
7
|
+
|
|
8
|
+
{{!-- {{~> modules/forms/controls }}
|
|
9
|
+
|
|
10
|
+
<script type="text/html" class="js-successMessage">
|
|
11
|
+
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
+
</script>
|
|
13
|
+
<script type="text/html" class="js-errorMessage">
|
|
14
|
+
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
+
</script> --}}
|
|
16
|
+
</div>
|
|
17
|
+
</form>
|
|
18
|
+
{{~else~}}
|
|
19
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
|
+
{{~/if~}}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
}}
|
|
46
|
+
{{else if this.type.isSelect}}
|
|
47
|
+
{{~> modules/forms/select
|
|
48
|
+
_name=this.name
|
|
49
|
+
_label=this.label
|
|
50
|
+
_labelClass="hide"
|
|
51
|
+
_description=this.description
|
|
52
|
+
_items=this.options
|
|
53
|
+
_required=this.isRequired
|
|
54
|
+
}}
|
|
55
|
+
{{else if this.type.isChoice}}
|
|
56
|
+
{{#if this.isGrouped }}
|
|
57
|
+
{{~> modules/forms/choiceGroup
|
|
58
|
+
_type=this.type.asString
|
|
59
|
+
_name=this.name
|
|
60
|
+
_label=this.label
|
|
61
|
+
_description=this.description
|
|
62
|
+
_items=this.options
|
|
63
|
+
_required=this.isRequired
|
|
64
|
+
_multipleChoice=../_multipleChoice
|
|
65
|
+
_addClass=../_addClass
|
|
66
|
+
|
|
67
|
+
}}
|
|
68
|
+
{{else}}
|
|
69
|
+
{{~> modules/forms/choice
|
|
70
|
+
_type=this.type.asString
|
|
71
|
+
_name=this.name
|
|
72
|
+
_label=this.label
|
|
73
|
+
_labelClass=(if this.isMeta "-meta")
|
|
74
|
+
_description=this.description
|
|
75
|
+
_value=this.options.[0].value
|
|
76
|
+
_required=this.isRequired
|
|
77
|
+
_selected= this.options.[0].isSelected
|
|
78
|
+
}}
|
|
79
|
+
{{/if}}
|
|
80
|
+
{{else if this.type.isUpload}}
|
|
81
|
+
{{~> modules/forms/upload
|
|
82
|
+
_name=this.name
|
|
83
|
+
_label=this.label
|
|
84
|
+
_description=this.description
|
|
85
|
+
_multiple=false
|
|
86
|
+
_required=this.isRequired
|
|
87
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
88
|
+
}}
|
|
89
|
+
{{/if}}
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
{{/if}}
|
|
93
|
+
|
|
94
|
+
{{/each}}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div x-text="valid"></div>
|
|
41
|
+
<div x-text="input{{getRandom}}.length "></div>
|
|
42
|
+
</div>
|
|
43
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
|
+
|
|
45
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
46
|
+
|
|
47
|
+
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">
|
|
48
|
+
{{#if _hasBody}}
|
|
49
|
+
{{decorator_body}}
|
|
50
|
+
{{else}}
|
|
51
|
+
{{#if _locaKey}}
|
|
52
|
+
{{loca _locaKey}}
|
|
53
|
+
{{else}}
|
|
54
|
+
{{#if _label}}
|
|
55
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
</label>
|
|
60
|
+
<div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
|
|
61
|
+
{{#if _description}}
|
|
62
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
|
|
63
|
+
{{/if}}
|
|
64
|
+
{{#if _required}}
|
|
65
|
+
<div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
|
|
66
|
+
{{/if}}
|
|
67
|
+
{{#if _maxLength}}
|
|
68
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
|
+
{{/if~}}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
<form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
|
|
3
|
+
|
|
4
|
+
<div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
|
|
5
|
+
|
|
6
|
+
{{> components/forms/fields }}
|
|
7
|
+
|
|
8
|
+
{{!-- {{~> modules/forms/controls }}
|
|
9
|
+
|
|
10
|
+
<script type="text/html" class="js-successMessage">
|
|
11
|
+
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
+
</script>
|
|
13
|
+
<script type="text/html" class="js-errorMessage">
|
|
14
|
+
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
+
</script> --}}
|
|
16
|
+
</div>
|
|
17
|
+
</form>
|
|
18
|
+
{{~else~}}
|
|
19
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
|
+
{{~/if~}}
|
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.100.
|
|
9
|
+
"version": "1.100.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
"async-alpine": "^1.0.0",
|
|
123
123
|
"checkcss": "^2.0.9",
|
|
124
124
|
"dialog-polyfill": "^0.5.6",
|
|
125
|
+
"storybook-addon-pseudo-states": "^4.0.2",
|
|
125
126
|
"tailwindcss-counter": "^1.1.3"
|
|
126
127
|
},
|
|
127
128
|
"prettier": {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"copytextParagraph": [
|
|
3
|
+
{
|
|
4
|
+
"isHeadline": true,
|
|
5
|
+
"text": "Copytext mit Formular"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"paragraphBoxItem": {
|
|
9
|
+
"isWebForm": true,
|
|
10
|
+
"fields":[
|
|
11
|
+
{
|
|
12
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
13
|
+
"@->contentpath": "input-text-vorname"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
17
|
+
"@->contentpath": "input-text-nachname"
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"input-text-vorname":
|
|
3
|
+
{
|
|
4
|
+
"type":{
|
|
5
|
+
"isText":true,
|
|
6
|
+
"asString":"text"
|
|
7
|
+
},
|
|
8
|
+
"name":"vorname",
|
|
9
|
+
"label":"Vorname",
|
|
10
|
+
"description":"Das ist der Beschreibungstext von Vorname",
|
|
11
|
+
"defaultValue":"",
|
|
12
|
+
"isHidden":false,
|
|
13
|
+
"isRequired":false
|
|
14
|
+
|
|
15
|
+
},
|
|
16
|
+
"input-text-vorname-required":
|
|
17
|
+
{
|
|
18
|
+
"type":{
|
|
19
|
+
"isText":true,
|
|
20
|
+
"asString":"text"
|
|
21
|
+
},
|
|
22
|
+
"name":"vorname",
|
|
23
|
+
"label":"Vorname",
|
|
24
|
+
"description":"",
|
|
25
|
+
"defaultValue":"",
|
|
26
|
+
"isHidden":false,
|
|
27
|
+
"isRequired":true,
|
|
28
|
+
"maxLength":"20"
|
|
29
|
+
},
|
|
30
|
+
"input-text-nachname":
|
|
31
|
+
{
|
|
32
|
+
"type":{
|
|
33
|
+
"isText":true,
|
|
34
|
+
"asString":"text"
|
|
35
|
+
},
|
|
36
|
+
"name":"nachname",
|
|
37
|
+
"label":"Nachname",
|
|
38
|
+
"description":"Das ist der Beschreibungstext von Nachname",
|
|
39
|
+
"defaultValue":"",
|
|
40
|
+
"isHidden":false,
|
|
41
|
+
"isRequired":true,
|
|
42
|
+
"maxLength":"140"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"fields":[
|
|
3
|
+
{
|
|
4
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
5
|
+
"@->contentpath": "input-text-vorname"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
9
|
+
"@->contentpath": "input-text-vorname-required"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
13
|
+
"@->contentpath": "input-text-nachname"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
}
|
package/src/stories/views/components/content/copytext/components/form/fixtures/form_input.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"type":{"isText":true,"asString":"text"},"name":"name","label":"Name","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
|
|
@@ -17,6 +17,7 @@ import copytext_video_json from './fixtures/copytext_video.json'
|
|
|
17
17
|
import copytext_audio_json from './fixtures/copytext_audio.json'
|
|
18
18
|
import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
|
|
19
19
|
import copytext_livestream_json from './fixtures/copytext_livestream.json'
|
|
20
|
+
import copytext_webform_json from './fixtures/copytext_webform.json'
|
|
20
21
|
|
|
21
22
|
const Template = ({ ...args }) => {
|
|
22
23
|
return copytext({ ...args })
|
|
@@ -66,6 +67,12 @@ export const WithFiledownload = {
|
|
|
66
67
|
args: copytext_filedownload_json,
|
|
67
68
|
}
|
|
68
69
|
|
|
70
|
+
export const WithWebform = {
|
|
71
|
+
render: Template.bind({}),
|
|
72
|
+
name: 'Formular',
|
|
73
|
+
args: copytext_webform_json,
|
|
74
|
+
}
|
|
75
|
+
|
|
69
76
|
export const WithImage = {
|
|
70
77
|
render: Template.bind({}),
|
|
71
78
|
name: 'Image',
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +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 von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}}]}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
}}
|
|
46
|
+
{{else if this.type.isSelect}}
|
|
47
|
+
{{~> modules/forms/select
|
|
48
|
+
_name=this.name
|
|
49
|
+
_label=this.label
|
|
50
|
+
_labelClass="hide"
|
|
51
|
+
_description=this.description
|
|
52
|
+
_items=this.options
|
|
53
|
+
_required=this.isRequired
|
|
54
|
+
}}
|
|
55
|
+
{{else if this.type.isChoice}}
|
|
56
|
+
{{#if this.isGrouped }}
|
|
57
|
+
{{~> modules/forms/choiceGroup
|
|
58
|
+
_type=this.type.asString
|
|
59
|
+
_name=this.name
|
|
60
|
+
_label=this.label
|
|
61
|
+
_description=this.description
|
|
62
|
+
_items=this.options
|
|
63
|
+
_required=this.isRequired
|
|
64
|
+
_multipleChoice=../_multipleChoice
|
|
65
|
+
_addClass=../_addClass
|
|
66
|
+
|
|
67
|
+
}}
|
|
68
|
+
{{else}}
|
|
69
|
+
{{~> modules/forms/choice
|
|
70
|
+
_type=this.type.asString
|
|
71
|
+
_name=this.name
|
|
72
|
+
_label=this.label
|
|
73
|
+
_labelClass=(if this.isMeta "-meta")
|
|
74
|
+
_description=this.description
|
|
75
|
+
_value=this.options.[0].value
|
|
76
|
+
_required=this.isRequired
|
|
77
|
+
_selected= this.options.[0].isSelected
|
|
78
|
+
}}
|
|
79
|
+
{{/if}}
|
|
80
|
+
{{else if this.type.isUpload}}
|
|
81
|
+
{{~> modules/forms/upload
|
|
82
|
+
_name=this.name
|
|
83
|
+
_label=this.label
|
|
84
|
+
_description=this.description
|
|
85
|
+
_multiple=false
|
|
86
|
+
_required=this.isRequired
|
|
87
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
88
|
+
}}
|
|
89
|
+
{{/if}}
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
{{/if}}
|
|
93
|
+
|
|
94
|
+
{{/each}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
|
+
import * as formStories from './form.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={formStories} />
|
|
5
|
+
|
|
6
|
+
# Formular
|
|
7
|
+
|
|
8
|
+
## Beschreibung
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Parameter
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<ArgTypes story="default" />
|
|
15
|
+
|
|
16
|
+
## Verwendung
|
|
17
|
+
|
|
18
|
+
Das Formular wird in handlebars wie folgt eingebaut:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
{{> components/forms/form }}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<Canvas withToolbar>
|
|
25
|
+
<Story of={formStories.Default} />
|
|
26
|
+
</Canvas>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import contentbox from './fields.hbs'
|
|
2
|
+
import inputJson from './fixtures/form_input.json'
|
|
3
|
+
|
|
4
|
+
const Template = ({ ...args }) => {
|
|
5
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
|
+
// return `<span>${topline}</span>`;
|
|
7
|
+
return contentbox({ ...args })
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Komponenten/Formulare/Input',
|
|
12
|
+
decorators: [
|
|
13
|
+
(Story) => {
|
|
14
|
+
return `<div class="relative flex flex-col justify-center overflow-hidden py-6 sm:py-12">
|
|
15
|
+
<div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
|
|
16
|
+
${Story()}
|
|
17
|
+
</div>
|
|
18
|
+
</div>`
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const Input = {
|
|
24
|
+
render: Template.bind({}),
|
|
25
|
+
name: 'Input - Einzeiliger Text',
|
|
26
|
+
args: inputJson,
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export const InputFocused = {
|
|
30
|
+
render: Template.bind({}),
|
|
31
|
+
name: 'Input - Einzeiliger Text Focus',
|
|
32
|
+
args: inputJson,
|
|
33
|
+
parameters: {
|
|
34
|
+
pseudo: {
|
|
35
|
+
focus: ["input"],
|
|
36
|
+
|
|
37
|
+
},
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div x-text="valid"></div>
|
|
41
|
+
<div x-text="input{{getRandom}}.length "></div>
|
|
42
|
+
</div>
|
|
43
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
|
+
|
|
45
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
46
|
+
|
|
47
|
+
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">
|
|
48
|
+
{{#if _hasBody}}
|
|
49
|
+
{{decorator_body}}
|
|
50
|
+
{{else}}
|
|
51
|
+
{{#if _locaKey}}
|
|
52
|
+
{{loca _locaKey}}
|
|
53
|
+
{{else}}
|
|
54
|
+
{{#if _label}}
|
|
55
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
56
|
+
{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
</label>
|
|
60
|
+
<div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
|
|
61
|
+
{{#if _description}}
|
|
62
|
+
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
|
|
63
|
+
{{/if}}
|
|
64
|
+
{{#if _required}}
|
|
65
|
+
<div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
|
|
66
|
+
{{/if}}
|
|
67
|
+
{{#if _maxLength}}
|
|
68
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
69
|
+
{{/if~}}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
<form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
|
|
3
|
+
|
|
4
|
+
<div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
|
|
5
|
+
|
|
6
|
+
{{> components/forms/fields }}
|
|
7
|
+
|
|
8
|
+
{{!-- {{~> modules/forms/controls }}
|
|
9
|
+
|
|
10
|
+
<script type="text/html" class="js-successMessage">
|
|
11
|
+
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
+
</script>
|
|
13
|
+
<script type="text/html" class="js-errorMessage">
|
|
14
|
+
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
+
</script> --}}
|
|
16
|
+
</div>
|
|
17
|
+
</form>
|
|
18
|
+
{{~else~}}
|
|
19
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
|
+
{{~/if~}}
|