hr-design-system-handlebars 1.105.0 → 1.105.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.105.1 (Mon Oct 07 2024)
+
+#### 🐛 Bug Fix
+
+- ♻️ Refactor Send Button Validation check - DPE-3384 Refactoring [#1093](https://github.com/mumprod/hr-design-system-handlebars/pull/1093) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.105.0 (Mon Oct 07 2024)
 
 #### 🚀 Enhancement

package/build/handlebars/helpers/handlebar-helpers.js

@@ -538,6 +538,30 @@ var helpers = {
     'strip': function (input, param) {
         return input
     },
+    /**
+     * Handlebars Helper: joinString
+     * 
+     * This helper function concatenates multiple strings or numbers into a single string.
+     * It filters out non-string and non-numeric values (such as objects, arrays, or null) 
+     * to prevent invalid data from being included in the final result.
+     * 
+     * Usage:
+     * {{joinString 'form' (generateRandom)}}
+     * 
+     * Example Output:
+     * If 'form' is passed as the first argument and the `generateRandom` function returns 408,
+     * the output will be: 'form408'.
+     * 
+     * Notes:
+     * - Strings and numbers are included in the final concatenation.
+     * - Objects, arrays, and other non-string, non-number types are ignored.
+     * 
+     * Function implementation:
+     */
+    'joinStrings': function (...args) {    
+        return args.filter(arg => typeof arg === 'string' || typeof arg === 'number').join('');
+    }
+
 }
 
 // Export helpers

package/dist/assets/index.css

@@ -1139,9 +1139,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
-.right-14 {
-  right: 3.5rem;
-}
 .right-4 {
   right: 1rem;
 }
@@ -1986,27 +1983,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .animate-none {
   animation: none;
 }
-@keyframes shake {
-
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-.animate-shake {
-  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-}
 @keyframes spin {
 
   to {
@@ -2246,6 +2222,10 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
 .rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2307,6 +2287,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-0 {
+  border-top-width: 0px;
+}
 .border-t-\[3px\] {
   border-top-width: 3px;
 }
@@ -2400,9 +2383,9 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-primary-ds);
 }
-.border-red-500 {
+.border-red-400 {
   --tw-border-opacity: 1;
-  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
 }
 .border-red-700 {
   --tw-border-opacity: 1;
@@ -2601,6 +2584,14 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: #005293;
   background-color: var(--color-primary-ds);
 }
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
+}
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
@@ -3209,6 +3200,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgba(22, 101, 52, var(--tw-text-opacity));
+}
 .text-inherit {
   color: inherit;
 }
@@ -3499,7 +3494,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728311675728;
+  counter-reset: cnt1728316535820;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3907,7 +3902,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728311675728 1;
+  counter-increment: cnt1728316535820 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3923,7 +3918,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728311675728);
+  content: counter(cnt1728316535820);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -8223,7 +8218,7 @@ input[type="radio"]:checked::after {
         .lg\:first-of-type\:pl-0:first-of-type {
     padding-left: 0px;
   }
-        .lg\:hover\:underline:hover {
+        .hover\:lg\:underline:hover {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
   }

package/dist/assets/js/alpine.js

@@ -20,7 +20,7 @@ AsyncAlpine.init(Alpine)
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('selectHandler', ()=> import('components/forms/selectHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine
@@ -52,6 +52,9 @@ Alpine.store('sharingIsOpen', {
 Alpine.store('sharingBottomPos', {
     current: '0'
 })
+Alpine.store('forms', {
+    submissionAttempted: []
+})
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
 Alpine.data('overlayHandler', overlayHandler)

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

@@ -0,0 +1,36 @@
+export default function contactForm(formId) {
+    return {
+        formInit(){
+            this.$store.forms.submissionAttempted[formId] = false;
+            console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
+        },
+        clickHandler() {
+            console.log('check for Error:',formId);
+            const form = this.$refs[formId];
+            console.log('form',form);
+            const formData = new FormData(form);
+            const fields = Array.from(form.elements); // Array of all form fields
+
+            // Loop through each field, focus it, blur it, and serialize the data
+        
+            if(form.reportValidity()){
+                this.submitData();
+            } else {
+                this.$store.forms.submissionAttempted[formId] = true;
+            }
+        },
+        submitData() {
+            const formData = new FormData(this.$refs[formId]);
+            // Convert the FormData to a serialized string
+            const serializedData = Array.from(formData.entries())
+                .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+                .join('&');
+
+            // Log the serialized form data
+            console.log('DATA: ' + serializedData);
+        },
+        getSubmissionAttempted() {
+            return this.$store.forms.submissionAttempted[formId]
+        }
+    }
+}

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

@@ -1,14 +1,16 @@
-export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
+export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
-        valid: true, 
+        valid: false, 
         wasFocused: false, 
         isFocused: false,
-        validEmail: false,
         isChecked: false,
+        typeMismatch: true,
+        valueMissing: true,
+
         errorMessage() { 
             if( type == "email"){
-                return !this.valid ? errorMandatory : errorEmail
+                return this.valueMissing ? errorMandatory : errorEmail
             } 
             else {
                 return errorMandatory
@@ -17,19 +19,23 @@ export default function inputHandler(element, errorMandatory, type, errorEmail,
         hideDescription() {
             switch (type) {
                 case "email":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked);
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                case "select":
+                    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);
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
             }
         },
         hideError() { 
-                return Boolean(!this.hideDescription())  
+            return Boolean(!this.hideDescription())  
         },
-        validateEmail() {
-            var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
-            this.validEmail = emailRegex.test( this[element]);  
-        }  
+        validateField() {
+            var field = document.getElementById(element)  
+            this.typeMismatch = field.validity.typeMismatch;
+            this.valueMissing  = field.validity.valueMissing;
+            this.valid = field.checkValidity()
+        }
     };
 }

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

@@ -1,12 +1,12 @@
 <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}}','{{_errorMandatory}}','{{_type}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
 <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="validateInput"
+      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
       x-model="isChecked"
       id="input{{getRandom}}"
       {{#if _required}}

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

@@ -13,7 +13,6 @@
         {{/if}}
         
     {{else}}
-
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
                 {{~> components/forms/textarea
@@ -27,6 +26,7 @@
                     _required=this.isRequired
                     _maxLength=this.maxLength
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input
@@ -43,6 +43,7 @@
                     _maxLength=this.maxLength
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
+                    _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/select
@@ -53,6 +54,7 @@
                     _items=this.options
                     _required=this.isRequired
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -66,7 +68,7 @@
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
-
+                        _formId=../_formId  
                     }}
                 {{else}}
                     {{~> components/forms/choice
@@ -79,6 +81,7 @@
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                        _formId=../_formId
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
@@ -89,6 +92,7 @@
                     _multiple=false
                     _required=this.isRequired
                     _locaKeyButton="uploadForm_label_file_button"
+                    _formId=../_formId
                 }}
             {{/if}}
         </div>

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

@@ -1,19 +1,17 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
-   :class="{'animate-shake': hideDescription() }"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   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-init="validateField()"
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none" 
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
-      x-bind:data-is-valid="valid ? 'true' : 'false'" 
-      {{#if _required}}
-         @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-      {{/if}}
+      x-bind:data-is-valid="valid ? 'true' : 'false'"     
+      @focus="isFocused = true;"
+      @blur="wasFocused = true; isFocused=false; validateField();"
+      x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -61,20 +59,35 @@
         {{/if}}
       {{/if}}
    </label> 
-   {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-  {{/if}}
+   
+   <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+      {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+   </div>
+ 
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
-      {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-      {{#if _maxLength}}
-         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
-      {{/if~}}
+      
+      <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      
+   </div>
+   <div class="hidden">
+      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+         DEBUG
+      </div>
+      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+        
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
+         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
+         <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> 
    </div>
 </div>

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

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 "
    ax-load
-   x-data="selectHandler('select{{nextRandom}}')"
+   x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
@@ -43,17 +43,12 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
-            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-    {{/if}}
     <div class="flex items-end justify-between h-5 font-heading">     
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <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">

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

@@ -1,6 +1,9 @@
 <div class="relative flex flex-col w-full mb-5"
-x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
-:class="{'animate-shake': !valid && wasFocused && !isFocused }">
+   ax-load
+   x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
+   x-ignore
+>
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
@@ -33,7 +36,7 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+         :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -57,16 +60,16 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{/if}}
    </label>
    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
-      </div>
+         <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+         </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

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

@@ -6,59 +6,37 @@
             {{this.title}}
         </h3>
         
-        <form x-data="contactForm()"
-            
+        <form
+            x-ref="form{{nextRandom}}"
+            ax-load
+            x-data="contactForm('form{{getRandom}}')"
+            x-init="formInit()"
+            x-ignore
+
             @submit.prevent="submitData"
-            x-ref="contactFormRef" 
+            id="form{{getRandom}}"     
             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 }}
+            accept-charset="utf-8"
+            
+            >
+           
+            <div class="">
+                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                    DEBUG
+                </div>
+                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                </div> 
+            </div>
+            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
             {{> components/forms/controls }}
-        </form>
-        <script>
-        function contactForm() {
-            return {
-                formData: {
-                    name: '',
-                    email: '',
-                    message: ''
-                },
-                clickHandler() {
-                    console.log('check for Error ');
-                    const form = this.$refs.contactFormRef;
-                    const formData = new FormData(form);
-                    const fields = Array.from(form.elements); // Array of all form fields
 
-                    // Loop through each field, focus it, blur it, and serialize the data
-                    fields.forEach((field) => {
-                        if (field.type !== 'submit') {  // Skip the submit button
-                            field.focus();  // Focus the field
-                            field.blur();   // Immediately unfocus (blur) the field
-                        }
-                    });
-                    if(form.reportValidity()){
-                        this.submitData();
-                    }
-                    
-                },
-                submitData() {
-                    const formData = new FormData(this.$refs.contactFormRef);
-                    // Convert the FormData to a serialized string
-                    const serializedData = Array.from(formData.entries())
-                        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-                        .join('&');
-
-                    // Log the serialized form data
-                    console.log('DATA: ' + serializedData);
-                }
-            }
-        }
-    </script>
+        </form>
+        
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block hover:lg:underline active:font-bold active:text-primary">   
    <a class="{{if (isUserConsentNeeded (resourceUrl "index.html" _site=this.site)) 'js-user-consent-needed ' ''}}link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,7 +2,7 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' hover:lg:underline'" 
         class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}

package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -8,7 +8,7 @@
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
                 x-data="dropdown"
                 id="{{getRandom}}"
-                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
+                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 hover:lg:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
                 aria-owns="flyout-{{getRandom}}" 

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

@@ -1,12 +1,12 @@
 <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}}','{{_errorMandatory}}','{{_type}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
 <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="validateInput"
+      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
       x-model="isChecked"
       id="input{{getRandom}}"
       {{#if _required}}