hr-design-system-handlebars 1.114.24 → 1.114.26

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 (31) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +54 -13
  3. package/dist/views/components/forms/components/choice.hbs +2 -2
  4. package/dist/views/components/forms/components/choiceGroup.hbs +9 -9
  5. package/dist/views/components/forms/components/input.hbs +5 -9
  6. package/dist/views/components/forms/components/labelClasses.hbs +1 -0
  7. package/dist/views/components/forms/components/select.hbs +7 -10
  8. package/dist/views/components/forms/components/supportingTextBox.hbs +3 -0
  9. package/dist/views/components/forms/components/textarea.hbs +5 -9
  10. package/dist/views/components/forms/components/upload.hbs +4 -4
  11. package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
  12. package/dist/views_static/components/forms/components/choice.hbs +2 -2
  13. package/dist/views_static/components/forms/components/choiceGroup.hbs +9 -9
  14. package/dist/views_static/components/forms/components/input.hbs +5 -9
  15. package/dist/views_static/components/forms/components/labelClasses.hbs +1 -0
  16. package/dist/views_static/components/forms/components/select.hbs +7 -10
  17. package/dist/views_static/components/forms/components/supportingTextBox.hbs +3 -0
  18. package/dist/views_static/components/forms/components/textarea.hbs +5 -9
  19. package/dist/views_static/components/forms/components/upload.hbs +4 -4
  20. package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
  21. package/package.json +1 -1
  22. package/src/assets/css/custom-utilities.css +7 -7
  23. package/src/stories/views/components/forms/components/choice.hbs +2 -2
  24. package/src/stories/views/components/forms/components/choiceGroup.hbs +9 -9
  25. package/src/stories/views/components/forms/components/input.hbs +5 -9
  26. package/src/stories/views/components/forms/components/labelClasses.hbs +1 -0
  27. package/src/stories/views/components/forms/components/select.hbs +7 -10
  28. package/src/stories/views/components/forms/components/supportingTextBox.hbs +3 -0
  29. package/src/stories/views/components/forms/components/textarea.hbs +5 -9
  30. package/src/stories/views/components/forms/components/upload.hbs +4 -4
  31. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.114.26 (Wed Nov 27 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 3432 - Form Bugs [#1175](https://github.com/mumprod/hr-design-system-handlebars/pull/1175) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
13
+ # v1.114.25 (Wed Nov 27 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - adds hidden in classList if context is not SectionNav [#1166](https://github.com/mumprod/hr-design-system-handlebars/pull/1166) ([@StefanVesper](https://github.com/StefanVesper) [@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 2
20
+
21
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
22
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
23
+
24
+ ---
25
+
1
26
  # v1.114.24 (Tue Nov 26 2024)
2
27
 
3
28
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -1146,18 +1146,21 @@ article.indexTextDS .indexTextHighlighted .link {
1146
1146
  .left-2\/4 {
1147
1147
  left: 50%;
1148
1148
  }
1149
+ .left-4 {
1150
+ left: 1rem;
1151
+ }
1149
1152
  .left-8 {
1150
1153
  left: 2rem;
1151
1154
  }
1152
- .left-\[16px\] {
1153
- left: 16px;
1154
- }
1155
1155
  .left-\[4px\] {
1156
1156
  left: 4px;
1157
1157
  }
1158
1158
  .right-0 {
1159
1159
  right: 0px;
1160
1160
  }
1161
+ .right-11 {
1162
+ right: 2.75rem;
1163
+ }
1161
1164
  .right-4 {
1162
1165
  right: 1rem;
1163
1166
  }
@@ -1830,6 +1833,9 @@ article.indexTextDS .indexTextHighlighted .link {
1830
1833
  .w-\[9px\] {
1831
1834
  width: 9px;
1832
1835
  }
1836
+ .w-\[calc\(133\%-64px\)\] {
1837
+ width: calc(133% - 64px);
1838
+ }
1833
1839
  .w-auto {
1834
1840
  width: auto;
1835
1841
  }
@@ -2074,9 +2080,6 @@ article.indexTextDS .indexTextHighlighted .link {
2074
2080
  .cursor-pointer {
2075
2081
  cursor: pointer;
2076
2082
  }
2077
- .cursor-text {
2078
- cursor: text;
2079
- }
2080
2083
  .resize {
2081
2084
  resize: both;
2082
2085
  }
@@ -3686,7 +3689,7 @@ article.indexTextDS .indexTextHighlighted .link {
3686
3689
  border-bottom-color: var(--color-secondary-ds);
3687
3690
  }
3688
3691
  .counter-reset {
3689
- counter-reset: cnt1732630492684;
3692
+ counter-reset: cnt1732718087499;
3690
3693
  }
3691
3694
  .placeholder-text-xs::-webkit-input-placeholder {
3692
3695
  font-size: 0.75rem;
@@ -4100,7 +4103,7 @@ article.indexTextDS .indexTextHighlighted .link {
4100
4103
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4101
4104
  }
4102
4105
  .-ordered {
4103
- counter-increment: cnt1732630492684 1;
4106
+ counter-increment: cnt1732718087499 1;
4104
4107
  }
4105
4108
  .-ordered::before {
4106
4109
  position: absolute;
@@ -4118,7 +4121,7 @@ article.indexTextDS .indexTextHighlighted .link {
4118
4121
  --tw-text-opacity: 1;
4119
4122
  color: rgba(0, 0, 0, 1);
4120
4123
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4121
- content: counter(cnt1732630492684);
4124
+ content: counter(cnt1732718087499);
4122
4125
  }
4123
4126
  /*! ****************************/
4124
4127
  /*! DataPolicy stuff */
@@ -4225,8 +4228,9 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
4225
4228
  /*! FORMULAR SELECT */
4226
4229
  /*! ****************************/
4227
4230
  /* Custom CSS to style the label when the first empty option is selected */
4228
- select + label {
4231
+ .form-select + label {
4229
4232
  top: 1px !important;
4233
+ width: calc(133.333% - 80px) !important;
4230
4234
  --tw-translate-y: 0px !important;
4231
4235
  --tw-scale-x: .75 !important;
4232
4236
  --tw-scale-y: .75 !important;
@@ -4234,8 +4238,9 @@ select + label {
4234
4238
  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)) !important;
4235
4239
  }
4236
4240
  @supports selector(:has(+ *)) {
4237
- select + label {
4241
+ .form-select + label {
4238
4242
  top: 1px !important;
4243
+ width: auto !important;
4239
4244
  --tw-translate-y: 0.75rem !important;
4240
4245
  --tw-scale-x: 1 !important;
4241
4246
  --tw-scale-y: 1 !important;
@@ -4243,15 +4248,16 @@ select + label {
4243
4248
  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)) !important;
4244
4249
  }
4245
4250
  }
4246
- select:has(option:checked:not([value=''])) + label {
4251
+ .form-select:has(option:checked:not([value=''])) + label {
4247
4252
  top: 1px !important;
4253
+ width: calc(133.333% - 80px) !important;
4248
4254
  --tw-translate-y: 0px !important;
4249
4255
  --tw-scale-x: .75 !important;
4250
4256
  --tw-scale-y: .75 !important;
4251
4257
  transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75) !important;
4252
4258
  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)) !important;
4253
4259
  }
4254
- select:has(option:checked[value='']) {
4260
+ .form-select:has(option:checked[value='']) {
4255
4261
  -webkit-user-select: none;
4256
4262
  -moz-user-select: none;
4257
4263
  user-select: none;
@@ -6286,6 +6292,18 @@ select:has(option:checked[value='']) {
6286
6292
  color: rgba(255, 255, 255, 1);
6287
6293
  color: rgba(255, 255, 255, var(--tw-text-opacity));
6288
6294
  }
6295
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:right-9 {
6296
+ right: 2.25rem;
6297
+ }
6298
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:right-9 {
6299
+ right: 2.25rem;
6300
+ }
6301
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:w-auto {
6302
+ width: auto;
6303
+ }
6304
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:w-auto {
6305
+ width: auto;
6306
+ }
6289
6307
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
6290
6308
  --tw-translate-x: 0px;
6291
6309
  transform: translate(0px, 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));
@@ -6318,9 +6336,27 @@ select:has(option:checked[value='']) {
6318
6336
  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(1) scaleY(1);
6319
6337
  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));
6320
6338
  }
6339
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:whitespace-normal {
6340
+ white-space: normal;
6341
+ }
6342
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:whitespace-normal {
6343
+ white-space: normal;
6344
+ }
6345
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:whitespace-nowrap {
6346
+ white-space: nowrap;
6347
+ }
6348
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:whitespace-nowrap {
6349
+ white-space: nowrap;
6350
+ }
6351
+ .peer:focus ~ .peer-focus\:right-0 {
6352
+ right: 0px;
6353
+ }
6321
6354
  .peer:focus ~ .peer-focus\:top-px {
6322
6355
  top: 1px;
6323
6356
  }
6357
+ .peer:focus ~ .peer-focus\:w-\[calc\(133\%-64px\)\] {
6358
+ width: calc(133% - 64px);
6359
+ }
6324
6360
  .peer:focus ~ .peer-focus\:-translate-y-0 {
6325
6361
  --tw-translate-y: -0px;
6326
6362
  transform: translate(var(--tw-translate-x), -0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6347,6 +6383,11 @@ select:has(option:checked[value='']) {
6347
6383
  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(.75) scaleY(.75);
6348
6384
  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));
6349
6385
  }
6386
+ .peer:focus ~ .peer-focus\:truncate {
6387
+ overflow: hidden;
6388
+ text-overflow: ellipsis;
6389
+ white-space: nowrap;
6390
+ }
6350
6391
  .peer:focus ~ .peer-focus\:border-l-0 {
6351
6392
  border-left-width: 0px;
6352
6393
  }
package/dist/views/components/forms/components/choice.hbs CHANGED
@@ -82,13 +82,13 @@
82
82
  {{/if}}
83
83
  </div>
84
84
  {{#unless _inGroup}}
85
- <div class="flex items-end justify-between min-h-5 font-heading">
85
+ {{#>components/forms/components/supportingTextBox }}
86
86
  {{#if _description}}
87
87
  <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
88
88
  {{/if}}
89
89
  {{#if _required}}
90
90
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
91
91
  {{/if}}
92
- </div>
92
+ {{/components/forms/components/supportingTextBox }}
93
93
  {{/unless}}
94
94
  </div>
package/dist/views/components/forms/components/choiceGroup.hbs CHANGED
@@ -5,7 +5,7 @@
5
5
  x-ignore
6
6
  {{/if}}
7
7
  >
8
- <div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
8
+ <div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
9
9
  <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
10
10
  {{#if _hasBody}}
11
11
  {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
39
39
  }}
40
40
  {{/each}}
41
41
  </div>
42
- <div class="flex items-end justify-between min-h-5 font-heading">
43
- {{#if _description}}
44
- <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
45
- {{/if}}
46
- {{#if _required}}
47
- <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
- {{/if}}
49
- </div>
42
+ {{#>components/forms/components/supportingTextBox }}
43
+ {{#if _description}}
44
+ <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
45
+ {{/if}}
46
+ {{#if _required}}
47
+ <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
+ {{/if}}
49
+ {{/components/forms/components/supportingTextBox }}
50
50
  </div>
51
51
  </fieldset>
package/dist/views/components/forms/components/input.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
1
+ <div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
4
4
  x-init="validateField()"
@@ -42,11 +42,7 @@
42
42
  data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
43
43
  >
44
44
 
45
- <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
46
-
47
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
48
-
49
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
45
+ <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
50
46
  {{#if _hasBody}}
51
47
  {{decorator_body}}
52
48
  {{else}}
@@ -64,12 +60,12 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
 
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
 
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
73
69
 
74
- </div>
70
+ {{/components/forms/components/supportingTextBox }}
75
71
  </div>
package/dist/views/components/forms/components/labelClasses.hbs ADDED
@@ -0,0 +1 @@
1
+ w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark
package/dist/views/components/forms/components/select.hbs CHANGED
@@ -1,10 +1,10 @@
1
- <div class="relative flex flex-col w-full mb-5 "
1
+ <div class="relative flex flex-col w-full mb-4 "
2
2
  ax-load
3
3
  x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
4
4
  x-ignore
5
5
  >
6
6
  <select
7
- class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
7
+ class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
8
8
  :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="select{{getRandom}}"
10
10
  id="select{{getRandom}}"
@@ -37,21 +37,18 @@
37
37
  {{/if}}
38
38
  </select>
39
39
  <label for="select{{getRandom}}"
40
- class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
41
- peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
42
- origin-top-left transform transition-transform
43
- ">
40
+ class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
44
41
  {{_label}}{{#if _required}}*{{/if}}
45
42
  </label>
46
- <div class="flex items-end justify-between min-h-5 font-heading">
43
+ {{#>components/forms/components/supportingTextBox }}
47
44
  {{#if _description}}
48
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
45
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
49
46
  {{/if}}
50
47
  {{#if _required}}
51
48
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
52
49
  {{/if}}
53
- </div>
54
- <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">
50
+ {{/components/forms/components/supportingTextBox }}
51
+ <div class="absolute bg-white 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">
55
52
  {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
56
53
  </div>
57
54
  </div>
package/dist/views/components/forms/components/supportingTextBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="flex justify-between mt-1 min-h-5 font-heading">
2
+ {{> @partial-block }}
3
+ </div>
package/dist/views/components/forms/components/textarea.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5"
1
+ <div class="relative flex flex-col w-full mb-4"
2
2
  ax-load
3
3
  x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
4
4
  x-init="validateField()"
@@ -46,11 +46,7 @@
46
46
  {{~else~}}
47
47
  {{~_defaultValue~}}
48
48
  {{~/if}}{{/if}}</textarea>
49
- <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
50
-
51
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
52
-
53
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
49
+ <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
54
50
  {{#if _locaKey}}
55
51
  {{loca _locaKey}}
56
52
  {{else}}
@@ -64,9 +60,9 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
  {{/if}}
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
  {{#if _required}}
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
74
70
  {{#if _maxLength}}
75
71
  <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
76
72
  {{/if~}}
77
- </div>
73
+ {{/components/forms/components/supportingTextBox }}
78
74
  </div>
package/dist/views/components/forms/components/upload.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
1
+ <div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
4
4
  x-init="validateUpload()"
@@ -61,13 +61,13 @@
61
61
  </button>
62
62
  </div>
63
63
  </div>
64
- <div class="flex items-end justify-between min-h-5 font-heading">
64
+ {{#>components/forms/components/supportingTextBox }}
65
65
  {{#if _description}}
66
- <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
66
+ <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
67
67
  {{/if}}
68
68
  {{#if _required}}
69
69
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
70
70
  {{/if}}
71
- </div>
71
+ {{/components/forms/components/supportingTextBox }}
72
72
  </div>
73
73
 
package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,10 +1,10 @@
1
- {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
1
+ {{#with this.subNavigation}}
2
+ <div {{#if ../_isSectionNav}} {{#unless ../this.selected}} x-cloak {{/unless}} {{else}} x-cloak {{/if}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
6
6
  @resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
7
- {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
7
+ {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
8
8
  {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class="{'hidden': shouldFlyoutBeHidden()}" {{/if}}
9
9
 
10
10
  class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
@@ -14,7 +14,7 @@
14
14
  isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 justify-center grid grid-page
15
15
  {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
16
16
  {{else}} hidden z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
17
- {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
17
+ {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
18
18
  {{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
19
19
 
20
20
  aria-labelledby="flyout-{{getRandom}}-1"
package/dist/views_static/components/forms/components/choice.hbs CHANGED
@@ -82,13 +82,13 @@
82
82
  {{/if}}
83
83
  </div>
84
84
  {{#unless _inGroup}}
85
- <div class="flex items-end justify-between min-h-5 font-heading">
85
+ {{#>components/forms/components/supportingTextBox }}
86
86
  {{#if _description}}
87
87
  <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
88
88
  {{/if}}
89
89
  {{#if _required}}
90
90
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
91
91
  {{/if}}
92
- </div>
92
+ {{/components/forms/components/supportingTextBox }}
93
93
  {{/unless}}
94
94
  </div>
package/dist/views_static/components/forms/components/choiceGroup.hbs CHANGED
@@ -5,7 +5,7 @@
5
5
  x-ignore
6
6
  {{/if}}
7
7
  >
8
- <div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
8
+ <div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
9
9
  <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
10
10
  {{#if _hasBody}}
11
11
  {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
39
39
  }}
40
40
  {{/each}}
41
41
  </div>
42
- <div class="flex items-end justify-between min-h-5 font-heading">
43
- {{#if _description}}
44
- <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
45
- {{/if}}
46
- {{#if _required}}
47
- <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
- {{/if}}
49
- </div>
42
+ {{#>components/forms/components/supportingTextBox }}
43
+ {{#if _description}}
44
+ <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
45
+ {{/if}}
46
+ {{#if _required}}
47
+ <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
+ {{/if}}
49
+ {{/components/forms/components/supportingTextBox }}
50
50
  </div>
51
51
  </fieldset>
package/dist/views_static/components/forms/components/input.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
1
+ <div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
4
4
  x-init="validateField()"
@@ -42,11 +42,7 @@
42
42
  data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
43
43
  >
44
44
 
45
- <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
46
-
47
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
48
-
49
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
45
+ <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
50
46
  {{#if _hasBody}}
51
47
  {{decorator_body}}
52
48
  {{else}}
@@ -64,12 +60,12 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
 
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
 
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
73
69
 
74
- </div>
70
+ {{/components/forms/components/supportingTextBox }}
75
71
  </div>
package/dist/views_static/components/forms/components/labelClasses.hbs ADDED
@@ -0,0 +1 @@
1
+ w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark
package/dist/views_static/components/forms/components/select.hbs CHANGED
@@ -1,10 +1,10 @@
1
- <div class="relative flex flex-col w-full mb-5 "
1
+ <div class="relative flex flex-col w-full mb-4 "
2
2
  ax-load
3
3
  x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
4
4
  x-ignore
5
5
  >
6
6
  <select
7
- class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
7
+ class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
8
8
  :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="select{{getRandom}}"
10
10
  id="select{{getRandom}}"
@@ -37,21 +37,18 @@
37
37
  {{/if}}
38
38
  </select>
39
39
  <label for="select{{getRandom}}"
40
- class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
41
- peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
42
- origin-top-left transform transition-transform
43
- ">
40
+ class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
44
41
  {{_label}}{{#if _required}}*{{/if}}
45
42
  </label>
46
- <div class="flex items-end justify-between min-h-5 font-heading">
43
+ {{#>components/forms/components/supportingTextBox }}
47
44
  {{#if _description}}
48
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
45
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
49
46
  {{/if}}
50
47
  {{#if _required}}
51
48
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
52
49
  {{/if}}
53
- </div>
54
- <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">
50
+ {{/components/forms/components/supportingTextBox }}
51
+ <div class="absolute bg-white 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">
55
52
  {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
56
53
  </div>
57
54
  </div>
package/dist/views_static/components/forms/components/supportingTextBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="flex justify-between mt-1 min-h-5 font-heading">
2
+ {{> @partial-block }}
3
+ </div>
package/dist/views_static/components/forms/components/textarea.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5"
1
+ <div class="relative flex flex-col w-full mb-4"
2
2
  ax-load
3
3
  x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
4
4
  x-init="validateField()"
@@ -46,11 +46,7 @@
46
46
  {{~else~}}
47
47
  {{~_defaultValue~}}
48
48
  {{~/if}}{{/if}}</textarea>
49
- <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
50
-
51
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
52
-
53
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
49
+ <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
54
50
  {{#if _locaKey}}
55
51
  {{loca _locaKey}}
56
52
  {{else}}
@@ -64,9 +60,9 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
  {{/if}}
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
  {{#if _required}}
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
74
70
  {{#if _maxLength}}
75
71
  <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
76
72
  {{/if~}}
77
- </div>
73
+ {{/components/forms/components/supportingTextBox }}
78
74
  </div>
package/dist/views_static/components/forms/components/upload.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
1
+ <div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
4
4
  x-init="validateUpload()"
@@ -61,13 +61,13 @@
61
61
  </button>
62
62
  </div>
63
63
  </div>
64
- <div class="flex items-end justify-between min-h-5 font-heading">
64
+ {{#>components/forms/components/supportingTextBox }}
65
65
  {{#if _description}}
66
- <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
66
+ <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
67
67
  {{/if}}
68
68
  {{#if _required}}
69
69
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
70
70
  {{/if}}
71
- </div>
71
+ {{/components/forms/components/supportingTextBox }}
72
72
  </div>
73
73
 
package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,10 +1,10 @@
1
- {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
1
+ {{#with this.subNavigation}}
2
+ <div {{#if ../_isSectionNav}} {{#unless ../this.selected}} x-cloak {{/unless}} {{else}} x-cloak {{/if}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
6
6
  @resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
7
- {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
7
+ {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
8
8
  {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class="{'hidden': shouldFlyoutBeHidden()}" {{/if}}
9
9
 
10
10
  class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
@@ -14,7 +14,7 @@
14
14
  isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 justify-center grid grid-page
15
15
  {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
16
16
  {{else}} hidden z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
17
- {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
17
+ {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
18
18
  {{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
19
19
 
20
20
  aria-labelledby="flyout-{{getRandom}}-1"
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.114.24",
9
+ "version": "1.114.26",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/css/custom-utilities.css CHANGED
@@ -447,21 +447,21 @@
447
447
  /*! FORMULAR SELECT */
448
448
  /*! ****************************/
449
449
  /* Custom CSS to style the label when the first empty option is selected */
450
- select + label {
451
- @apply !scale-75 !translate-y-0 !top-px;
450
+ .form-select + label {
451
+ @apply !scale-75 !translate-y-0 !top-px !w-[calc(133.333%-80px)];
452
452
  }
453
453
 
454
454
  @supports selector(:has(+ *)) {
455
- select + label {
456
- @apply !top-px !scale-100 !translate-y-3;
455
+ .form-select + label {
456
+ @apply !top-px !scale-100 !translate-y-3 !w-auto;
457
457
  }
458
458
  }
459
459
 
460
- select:has(option:checked:not([value=''])) + label {
461
- @apply !top-px !scale-75 !translate-y-0;
460
+ .form-select:has(option:checked:not([value=''])) + label {
461
+ @apply !top-px !scale-75 !translate-y-0 !w-[calc(133.333%-80px)];
462
462
  }
463
463
 
464
- select:has(option:checked[value='']) {
464
+ .form-select:has(option:checked[value='']) {
465
465
  @apply text-transparent select-none;
466
466
  }
467
467
 
package/src/stories/views/components/forms/components/choice.hbs CHANGED
@@ -82,13 +82,13 @@
82
82
  {{/if}}
83
83
  </div>
84
84
  {{#unless _inGroup}}
85
- <div class="flex items-end justify-between min-h-5 font-heading">
85
+ {{#>components/forms/components/supportingTextBox }}
86
86
  {{#if _description}}
87
87
  <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
88
88
  {{/if}}
89
89
  {{#if _required}}
90
90
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
91
91
  {{/if}}
92
- </div>
92
+ {{/components/forms/components/supportingTextBox }}
93
93
  {{/unless}}
94
94
  </div>
package/src/stories/views/components/forms/components/choiceGroup.hbs CHANGED
@@ -5,7 +5,7 @@
5
5
  x-ignore
6
6
  {{/if}}
7
7
  >
8
- <div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
8
+ <div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
9
9
  <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
10
10
  {{#if _hasBody}}
11
11
  {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
39
39
  }}
40
40
  {{/each}}
41
41
  </div>
42
- <div class="flex items-end justify-between min-h-5 font-heading">
43
- {{#if _description}}
44
- <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
45
- {{/if}}
46
- {{#if _required}}
47
- <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
- {{/if}}
49
- </div>
42
+ {{#>components/forms/components/supportingTextBox }}
43
+ {{#if _description}}
44
+ <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
45
+ {{/if}}
46
+ {{#if _required}}
47
+ <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
48
+ {{/if}}
49
+ {{/components/forms/components/supportingTextBox }}
50
50
  </div>
51
51
  </fieldset>
package/src/stories/views/components/forms/components/input.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
1
+ <div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
4
4
  x-init="validateField()"
@@ -42,11 +42,7 @@
42
42
  data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
43
43
  >
44
44
 
45
- <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
46
-
47
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
48
-
49
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
45
+ <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
50
46
  {{#if _hasBody}}
51
47
  {{decorator_body}}
52
48
  {{else}}
@@ -64,12 +60,12 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
 
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
 
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
73
69
 
74
- </div>
70
+ {{/components/forms/components/supportingTextBox }}
75
71
  </div>
package/src/stories/views/components/forms/components/labelClasses.hbs ADDED
@@ -0,0 +1 @@
1
+ w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark
package/src/stories/views/components/forms/components/select.hbs CHANGED
@@ -1,10 +1,10 @@
1
- <div class="relative flex flex-col w-full mb-5 "
1
+ <div class="relative flex flex-col w-full mb-4 "
2
2
  ax-load
3
3
  x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
4
4
  x-ignore
5
5
  >
6
6
  <select
7
- class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
7
+ class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
8
8
  :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="select{{getRandom}}"
10
10
  id="select{{getRandom}}"
@@ -37,21 +37,18 @@
37
37
  {{/if}}
38
38
  </select>
39
39
  <label for="select{{getRandom}}"
40
- class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
41
- peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
42
- origin-top-left transform transition-transform
43
- ">
40
+ class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
44
41
  {{_label}}{{#if _required}}*{{/if}}
45
42
  </label>
46
- <div class="flex items-end justify-between min-h-5 font-heading">
43
+ {{#>components/forms/components/supportingTextBox }}
47
44
  {{#if _description}}
48
- <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
45
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
49
46
  {{/if}}
50
47
  {{#if _required}}
51
48
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
52
49
  {{/if}}
53
- </div>
54
- <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">
50
+ {{/components/forms/components/supportingTextBox }}
51
+ <div class="absolute bg-white 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">
55
52
  {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
56
53
  </div>
57
54
  </div>
package/src/stories/views/components/forms/components/supportingTextBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="flex justify-between mt-1 min-h-5 font-heading">
2
+ {{> @partial-block }}
3
+ </div>
package/src/stories/views/components/forms/components/textarea.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5"
1
+ <div class="relative flex flex-col w-full mb-4"
2
2
  ax-load
3
3
  x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
4
4
  x-init="validateField()"
@@ -46,11 +46,7 @@
46
46
  {{~else~}}
47
47
  {{~_defaultValue~}}
48
48
  {{~/if}}{{/if}}</textarea>
49
- <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
50
-
51
- peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
52
-
53
- peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
49
+ <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
54
50
  {{#if _locaKey}}
55
51
  {{loca _locaKey}}
56
52
  {{else}}
@@ -64,9 +60,9 @@
64
60
  {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
65
61
  </div>
66
62
  {{/if}}
67
- <div class="flex items-end justify-between min-h-5 font-heading">
63
+ {{#>components/forms/components/supportingTextBox }}
68
64
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
65
+ <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
70
66
  {{/if}}
71
67
  {{#if _required}}
72
68
  <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
74
70
  {{#if _maxLength}}
75
71
  <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
76
72
  {{/if~}}
77
- </div>
73
+ {{/components/forms/components/supportingTextBox }}
78
74
  </div>
package/src/stories/views/components/forms/components/upload.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
1
+ <div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
4
4
  x-init="validateUpload()"
@@ -61,13 +61,13 @@
61
61
  </button>
62
62
  </div>
63
63
  </div>
64
- <div class="flex items-end justify-between min-h-5 font-heading">
64
+ {{#>components/forms/components/supportingTextBox }}
65
65
  {{#if _description}}
66
- <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
66
+ <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
67
67
  {{/if}}
68
68
  {{#if _required}}
69
69
  <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
70
70
  {{/if}}
71
- </div>
71
+ {{/components/forms/components/supportingTextBox }}
72
72
  </div>
73
73
 
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,10 +1,10 @@
1
- {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
1
+ {{#with this.subNavigation}}
2
+ <div {{#if ../_isSectionNav}} {{#unless ../this.selected}} x-cloak {{/unless}} {{else}} x-cloak {{/if}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
6
6
  @resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
7
- {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
7
+ {{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
8
8
  {{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class="{'hidden': shouldFlyoutBeHidden()}" {{/if}}
9
9
 
10
10
  class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
@@ -14,7 +14,7 @@
14
14
  isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 justify-center grid grid-page
15
15
  {{else}} z-120 lg:left-auto lg:w-auto {{/if}}
16
16
  {{else}} hidden z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
17
- {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
17
+ {{else}} z-120 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
18
18
  {{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
19
19
 
20
20
  aria-labelledby="flyout-{{getRandom}}-1"