hr-design-system-handlebars 1.110.3 → 1.110.5

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.110.5 (Mon Oct 14 2024)
+
+#### 🐛 Bug Fix
+
+- :recycle: remove unused css classes [#1109](https://github.com/mumprod/hr-design-system-handlebars/pull/1109) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.110.4 (Mon Oct 14 2024)
+
+#### 🐛 Bug Fix
+
+- add choice-group validation [#1107](https://github.com/mumprod/hr-design-system-handlebars/pull/1107) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.110.3 (Mon Oct 14 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3593,7 +3593,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728904621898;
+  counter-reset: cnt1728910132020;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4007,7 +4007,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728904621898 1;
+  counter-increment: cnt1728910132020 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4025,7 +4025,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728904621898);
+  content: counter(cnt1728910132020);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -54,7 +54,7 @@ Alpine.store('sharingBottomPos', {
 })
 Alpine.store('forms', {
     submissionAttempted: [],
-    serverErrorFields: []
+    serverErrorFields: [{}]
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/dist/assets/js/components/forms/inputHandler.alpine.js

@@ -1,11 +1,9 @@
-export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
+export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '', name) {
     return { 
         [element]: prefilledText,
-        name: document.getElementById(element).getAttribute("name"),
         valid: false, 
         wasFocused: false, 
         isFocused: false,
-        isChecked: false,
         typeMismatch: true,
         valueMissing: true,
 
@@ -21,14 +19,25 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 }
             }
         },
+        anyChecked() {
+            var formElement = document.getElementById(formId);
+            var form_data = new FormData(formElement)
+            if(form_data.has(name)){
+                this.valid = true
+            }else{
+                this.valid = false
+            }
+        },
         hideDescription() {
             switch (type) {
                 case "email":
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "select":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ))
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
+                case "choice-group":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
                 default:
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
@@ -42,12 +51,16 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             this.valueMissing  = field.validity.valueMissing;
             this.valid = field.checkValidity()
         },
+        validateChoice() {
+            var choice = document.getElementById(element)  
+            this.valid = choice.checkValidity()
+        },
         hasServerError() {
-            return Boolean(this.$store.forms.serverErrorFields[formId][this.name])
+            return Boolean(this.$store.forms.serverErrorFields[formId]?.[name]);
         },
         getServerError() {
             let serverError = "Server Error: "
-            switch (this.$store.forms.serverErrorFields[formId][this.name]) {
+            switch (this.$store.forms.serverErrorFields[formId][name]) {
 
                 case 'form_error_required':
                     serverError += "Pflichtfeld"

package/dist/views/components/forms/choice.hbs

@@ -1,13 +1,21 @@
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
-   ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
-   x-ignore
+   {{#unless _inGroup}}
+      {{#if _required}}
+         ax-load
+         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-init="validateChoice()"
+         x-ignore
+      {{/if}}
+   {{/unless}}
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '["  border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent","  border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
-      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
-      x-model="isChecked"
+      {{#if _inGroup }}
+         @change="anyChecked()"
+      {{else}}
+         @change="validateChoice()"
+      {{/if}}
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
@@ -59,7 +67,7 @@
       {{/if}}
    </label>
 </div>  
-   {{#unless _inGroup}}
+{{#unless _inGroup}}
    <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
@@ -68,5 +76,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-   {{/unless}}
+{{/unless}}
 </div>

package/dist/views/components/forms/choiceGroup.hbs

@@ -1,4 +1,10 @@
-<fieldset>
+<fieldset
+    {{#if _required}}
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','choice-group','', '', '{{_name}}')"
+        x-ignore
+    {{/if}}
+>
 <div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
     <legend class="text-lg font-bold text-black md:text-xl font-heading">
         {{#if _hasBody}}
@@ -19,19 +25,21 @@
                 {{> components/forms/choice
                         _type=../_type
                         _name=../_name
+                        _required=(if ../_isRadio ../_required false)
                         _value=this.value
                         _inGroup=true
                         _label=this.label
                         _selected=this.selected
                         _title=this.title
                         _multipleChoice=../_multipleChoice
+                        _formId=../_formId  
                 }}
             </div>  
         {{/each}}
     </div>
     <div class="font-heading">     
       {{#if _description}}  
-         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>

package/dist/views/components/forms/fields.hbs

@@ -65,6 +65,7 @@
                         _description=this.description
                         _items=this.options
                         _required=this.isRequired
+                        _isRadio=this.type.isRadioChoice
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
@@ -85,7 +86,7 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> modules/forms/upload
+                {{~> components/forms/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description

package/dist/views/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   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}}')"
+   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}}')"
    x-init="validateField()"
    x-ignore
    >
@@ -89,7 +89,6 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
          <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
                     
       </div> 

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,4 +1,4 @@
-{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus ") "block group") }} 
+{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem " ds-teaser-focus ") "block group") }} 
     {{#if this.label}}
         {{#> components/label/label_group _css=(if ../../_ordered-adjust_context "pl-8")}}
             {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,9 +18,9 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
                 <li class="ui-test-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">

package/dist/views_static/components/forms/choice.hbs

@@ -1,13 +1,21 @@
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
-   ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
-   x-ignore
+   {{#unless _inGroup}}
+      {{#if _required}}
+         ax-load
+         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-init="validateChoice()"
+         x-ignore
+      {{/if}}
+   {{/unless}}
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '["  border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent","  border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
-      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
-      x-model="isChecked"
+      {{#if _inGroup }}
+         @change="anyChecked()"
+      {{else}}
+         @change="validateChoice()"
+      {{/if}}
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
@@ -59,7 +67,7 @@
       {{/if}}
    </label>
 </div>  
-   {{#unless _inGroup}}
+{{#unless _inGroup}}
    <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
@@ -68,5 +76,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-   {{/unless}}
+{{/unless}}
 </div>

package/dist/views_static/components/forms/choiceGroup.hbs

@@ -1,4 +1,10 @@
-<fieldset>
+<fieldset
+    {{#if _required}}
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','choice-group','', '', '{{_name}}')"
+        x-ignore
+    {{/if}}
+>
 <div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
     <legend class="text-lg font-bold text-black md:text-xl font-heading">
         {{#if _hasBody}}
@@ -19,19 +25,21 @@
                 {{> components/forms/choice
                         _type=../_type
                         _name=../_name
+                        _required=(if ../_isRadio ../_required false)
                         _value=this.value
                         _inGroup=true
                         _label=this.label
                         _selected=this.selected
                         _title=this.title
                         _multipleChoice=../_multipleChoice
+                        _formId=../_formId  
                 }}
             </div>  
         {{/each}}
     </div>
     <div class="font-heading">     
       {{#if _description}}  
-         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>

package/dist/views_static/components/forms/fields.hbs

@@ -65,6 +65,7 @@
                         _description=this.description
                         _items=this.options
                         _required=this.isRequired
+                        _isRadio=this.type.isRadioChoice
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
@@ -85,7 +86,7 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> modules/forms/upload
+                {{~> components/forms/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description

package/dist/views_static/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   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}}')"
+   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}}')"
    x-init="validateField()"
    x-ignore
    >
@@ -89,7 +89,6 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
          <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
                     
       </div> 

package/dist/views_static/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,4 +1,4 @@
-{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus ") "block group") }} 
+{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem " ds-teaser-focus ") "block group") }} 
     {{#if this.label}}
         {{#> components/label/label_group _css=(if _ordered "pl-8")}}
             {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}

package/dist/views_static/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,9 +18,9 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
                 <li class="ui-test-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.110.3",
+  "version": "1.110.5",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -22,6 +22,14 @@
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "input-text-nachname-required"
                     },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "checkbox-group"
+                    },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "radio-group"
+                    },
                     {
                       "@->jsoninclude": "forms/form_fields.inc.json",
                       "@->contentpath": "checkbox",

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -104,7 +104,7 @@
         "label":"Wählen Sie Ihre Interessen",
         "isMeta":false,
         "description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.",
-        "isRequired":true,
+        "isRequired":false,
         "options":[
             {
                 "value":"sport",
@@ -161,6 +161,7 @@
         "isGrouped":true,
         "type":{
             "isChoice":true,
+            "isRadioChoice":true,
             "asString":"radio"
         },
         "name":"lieblingsfarbe",
@@ -234,5 +235,16 @@
         },
         "caption": "Eine Gruppe mit Überschrift",
         "fields": []
+    },
+    "upload":
+    {
+        "type":{
+            "isUpload":true,
+            "asString":"upload"
+        },
+        "name":"lieblingsfarbe",
+        "label":"Wählen Sie Ihre Lieblingsfarbe",
+        "description":"Bitte wählen Sie eine der folgenden Farben aus.",
+        "isRequired":false
     }
 }

package/src/assets/js/alpine.js

@@ -54,7 +54,7 @@ Alpine.store('sharingBottomPos', {
 })
 Alpine.store('forms', {
     submissionAttempted: [],
-    serverErrorFields: []
+    serverErrorFields: [{}]
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/views/components/forms/choice.hbs

@@ -1,13 +1,21 @@
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
-   ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
-   x-ignore
+   {{#unless _inGroup}}
+      {{#if _required}}
+         ax-load
+         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-init="validateChoice()"
+         x-ignore
+      {{/if}}
+   {{/unless}}
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '["  border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent","  border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
-      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
-      x-model="isChecked"
+      {{#if _inGroup }}
+         @change="anyChecked()"
+      {{else}}
+         @change="validateChoice()"
+      {{/if}}
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
@@ -59,7 +67,7 @@
       {{/if}}
    </label>
 </div>  
-   {{#unless _inGroup}}
+{{#unless _inGroup}}
    <div class="font-heading">     
       {{#if _description}}  
          <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
@@ -68,5 +76,5 @@
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
-   {{/unless}}
+{{/unless}}
 </div>

package/src/stories/views/components/forms/choiceGroup.hbs

@@ -1,4 +1,10 @@
-<fieldset>
+<fieldset
+    {{#if _required}}
+        ax-load
+        x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','choice-group','', '', '{{_name}}')"
+        x-ignore
+    {{/if}}
+>
 <div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
     <legend class="text-lg font-bold text-black md:text-xl font-heading">
         {{#if _hasBody}}
@@ -19,19 +25,21 @@
                 {{> components/forms/choice
                         _type=../_type
                         _name=../_name
+                        _required=(if ../_isRadio ../_required false)
                         _value=this.value
                         _inGroup=true
                         _label=this.label
                         _selected=this.selected
                         _title=this.title
                         _multipleChoice=../_multipleChoice
+                        _formId=../_formId  
                 }}
             </div>  
         {{/each}}
     </div>
     <div class="font-heading">     
       {{#if _description}}  
-         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>

package/src/stories/views/components/forms/fields.hbs

@@ -65,6 +65,7 @@
                         _description=this.description
                         _items=this.options
                         _required=this.isRequired
+                        _isRadio=this.type.isRadioChoice
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
@@ -85,7 +86,7 @@
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
-                {{~> modules/forms/upload
+                {{~> components/forms/upload
                     _name=this.name
                     _label=this.label
                     _description=this.description

package/src/stories/views/components/forms/fixtures/form_checkbox_grouped.json

@@ -1 +1 @@
-{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":true,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]}]}
+{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]}]}

package/src/stories/views/components/forms/fixtures/form_radio_grouped.json

@@ -1 +1 @@
-{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]}]}
+{"fields":[{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]}]}

package/src/stories/views/components/forms/form_checkbox.stories.js

@@ -19,8 +19,8 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
     {{/components/forms/backgroundBox }}
   `)

package/src/stories/views/components/forms/form_checkbox_grouped.stories.js

@@ -19,8 +19,8 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+                 {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
     {{/components/forms/backgroundBox }}
   `)

package/src/stories/views/components/forms/form_group.stories.js

@@ -19,7 +19,7 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
                 {{> components/forms/fields }}
             </form>
     {{/components/forms/backgroundBox }}

package/src/stories/views/components/forms/form_radio_grouped.stories.js

@@ -19,8 +19,8 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
-                {{> components/forms/fields }}
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
             </form>
     {{/components/forms/backgroundBox }}
   `)

package/src/stories/views/components/forms/form_select.stories.js

@@ -19,7 +19,7 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
                 {{> components/forms/fields }}
             </form>
     {{/components/forms/backgroundBox }}

package/src/stories/views/components/forms/form_textfields.stories.js

@@ -23,7 +23,7 @@ export default {
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>components/forms/backgroundBox  }}  
-            <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+            <form class="relative flex flex-col justify-center overflow-hidden group" id="form{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
                 {{> components/forms/fields }}
             </form>
     {{/components/forms/backgroundBox }}

package/src/stories/views/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   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}}')"
+   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}}')"
    x-init="validateField()"
    x-ignore
    >
@@ -89,7 +89,6 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
          <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
                     
       </div> 

package/src/stories/views/components/forms/inputHandler.alpine.js

@@ -1,11 +1,9 @@
-export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
+export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '', name) {
     return { 
         [element]: prefilledText,
-        name: document.getElementById(element).getAttribute("name"),
         valid: false, 
         wasFocused: false, 
         isFocused: false,
-        isChecked: false,
         typeMismatch: true,
         valueMissing: true,
 
@@ -21,14 +19,25 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 }
             }
         },
+        anyChecked() {
+            var formElement = document.getElementById(formId);
+            var form_data = new FormData(formElement)
+            if(form_data.has(name)){
+                this.valid = true
+            }else{
+                this.valid = false
+            }
+        },
         hideDescription() {
             switch (type) {
                 case "email":
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "select":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ))
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
+                case "choice-group":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
                 default:
                     return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
@@ -42,12 +51,16 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             this.valueMissing  = field.validity.valueMissing;
             this.valid = field.checkValidity()
         },
+        validateChoice() {
+            var choice = document.getElementById(element)  
+            this.valid = choice.checkValidity()
+        },
         hasServerError() {
-            return Boolean(this.$store.forms.serverErrorFields[formId][this.name])
+            return Boolean(this.$store.forms.serverErrorFields[formId]?.[name]);
         },
         getServerError() {
             let serverError = "Server Error: "
-            switch (this.$store.forms.serverErrorFields[formId][this.name]) {
+            switch (this.$store.forms.serverErrorFields[formId][name]) {
 
                 case 'form_error_required':
                     serverError += "Pflichtfeld"

package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,4 +1,4 @@
-{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus ") "block group") }} 
+{{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem " ds-teaser-focus ") "block group") }} 
     {{#if this.label}}
         {{#> components/label/label_group _css=(if _ordered-adjust_context "pl-8")}}
             {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,9 +18,9 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="ui-test-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="ui-test-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
                 <li class="ui-test-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">