hr-design-system-handlebars 1.113.1 → 1.113.3

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.113.3 (Tue Oct 29 2024)
+
+#### 🐛 Bug Fix
+
+- added some improvements to contactform response view [#1130](https://github.com/mumprod/hr-design-system-handlebars/pull/1130) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.113.2 (Mon Oct 28 2024)
+
+#### 🐛 Bug Fix
+
+- Form validation script optimization [#1128](https://github.com/mumprod/hr-design-system-handlebars/pull/1128) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.113.1 (Mon Oct 28 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -205,6 +205,9 @@
 	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
 	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"webform_upload_label": "Datei auswählen",
+	"webform_send_title_error": "Das hat leider nicht geklappt!",
+	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
+	"webform_send_form_back": "Zurück zum Formular",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/dist/assets/index.css

@@ -1,4 +1,4 @@
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-3, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-100, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, label, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:translate-y-0, .peer-focus\:rotate-180, .peer-focus\:scale-75 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-3, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-100, .scale-50, .scale-75, .scale-90, .scale-y-100, .scale-y-90, .transform, .is-loading::after, label, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:translate-y-0, .peer-focus\:rotate-180, .peer-focus\:scale-75 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -2013,6 +2013,12 @@ article.indexTextDS .indexTextHighlighted .link {
   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);
   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));
 }
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  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(.9) scaleY(.9);
+  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));
+}
 .scale-y-100 {
   --tw-scale-y: 1;
   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(1);
@@ -2135,6 +2141,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .gap-5 {
   gap: 1.25rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-8 {
   gap: 2rem;
 }
@@ -2932,6 +2941,10 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2975,9 +2988,6 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-bottom: 16px;
   padding-bottom: var(--footer-padding-bottom);
 }
-.pb-px {
-  padding-bottom: 1px;
-}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -3564,6 +3574,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .delay-300 {
   transition-delay: 300ms;
 }
+.delay-75 {
+  transition-delay: 75ms;
+}
 .duration-0 {
   transition-duration: 0ms;
 }
@@ -3585,6 +3598,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .duration-700 {
   transition-duration: 700ms;
 }
+.duration-75 {
+  transition-duration: 75ms;
+}
 .ease-\[cubic-bezier\(0\.68\2c -0\.3\2c 0\.32\2c 1\)\] {
   transition-timing-function: cubic-bezier(0.68,-0.3,0.32,1);
 }
@@ -3605,7 +3621,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1730148870283;
+  counter-reset: cnt1730197524977;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4019,7 +4035,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1730148870283 1;
+  counter-increment: cnt1730197524977 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4037,7 +4053,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(cnt1730148870283);
+  content: counter(cnt1730197524977);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4171,6 +4187,9 @@ select:has(option:checked:not([value=''])) + label {
   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;
 }
 select:has(option:checked[value='']) {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   color: transparent;
 }
 .form-checkbox:checked::after {
@@ -5911,6 +5930,19 @@ select:has(option:checked[value='']) {
     }
   }
 }
+.placeholder\:select-none::-webkit-input-placeholder {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.placeholder\:select-none::-moz-placeholder {
+  -moz-user-select: none;
+       user-select: none;
+}
+.placeholder\:select-none::placeholder {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 .placeholder\:text-gray-dark::-webkit-input-placeholder {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, 1);
@@ -6079,7 +6111,8 @@ select:has(option:checked[value='']) {
   background-color: rgba(0, 0, 0, 1);
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
-.focus\:pb-0:focus {
+.focus\:py-0:focus {
+  padding-top: 0px;
   padding-bottom: 0px;
 }
 .focus\:text-white:focus {
@@ -7181,6 +7214,10 @@ select:has(option:checked[value='']) {
     justify-content: space-between;
   }
 
+  .md\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .md\:gap-x-3 {
     -moz-column-gap: 0.75rem;
          column-gap: 0.75rem;

package/dist/assets/js/alpine.js

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

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

@@ -1,7 +1,12 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
 export default function contactForm(formId, jsonUrl, errorMessages, multipart, trackingInformations, jsonp = false) {
     return {
         isPosting: false,
-        isWebview:false,
+        wasPosted: false,
+        wasPostedWithSuccess: false,
+        wasPostedWithError: false,
+        isWebview: window.parent.document.documentElement.classList.contains('webview'),
         ajaxTimeout: 60 * 1000,
         form: this.$refs[formId],
         formWrapper: this.$refs[formId].closest("#formWrapper"),
@@ -13,47 +18,20 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         formInit(){
             this.checkForJsonURL()
-            console.log("%cformId:", 'color: green' ,formId);
-            console.log("%cform:", 'color: green' ,this.form);
-            console.log("%cformWrapper:", 'color: green' ,this.formWrapper);
-            console.log("%cactionUrl:", 'color: green' ,this.actionUrl);
-            console.log("%cjsonUrl:", 'color: green', jsonUrl);
-            console.log("%cerrorMessages:", 'color: green', errorMessages);
-            console.log("%cmultipart:", 'color: green', multipart);
-            console.log("%ctrackingInformations:", 'color: green', trackingInformations);
-            
             this.$store.forms.submissionAttempted[formId] = false; 
+            this.$store.forms.errorMessages = JSON.parse( "{" + errorMessages.replace(/"/g,'"') + "}")
         },
-        clickHandler(event) {
-            console.log("event:",event);
-            console.log('check for Error:',formId); 
-            console.log('form:',this.form);
-     
+        submitButtonHandler(event) {
             if(this.form.reportValidity()){
-               // this.logData(event,form);
                 this.handleSubmit(event,this.form)
             } else {
                 this.$store.forms.submissionAttempted[formId] = true;
             }
         },
-        logData(event,form) {
-            // TODO - FOR DEBUGGIN CN BE REMOVED AT THE END
-            const formData = new FormData(form);
-            const fields = Array.from(form.elements);
-            // Log the serialized form data
-            console.log(fields);
-
-            // 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('serialized DATA: ' + serializedData);
-            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
-            
+        retryHandler() {
+            this.wasPosted = false;
+            this.wasPostedWithError = false;  
         },
-        // TODO - Validation error handler (adapt to your case)
         handleValidationErrors(errors) {
             console.log('Validation Errors:', errors);
             this.$store.forms.serverErrorFields[formId] = errors;
@@ -61,29 +39,19 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         resetValidationErrors() {    
             this.$store.forms.serverErrorFields[formId] = {}
-        },
-        
+        },   
         handleSubmit(event, form ) {
             event.preventDefault();
         
-            if (!this.isWebview) {
-                //uxAction(trackingInformations); // Assuming this is a tracking library
+            if (!this.isWebview) {    
+                uxAction(trackingInformations); 
             }
         
             if (this.isPosting) return;
             this.isPosting = true;
             
-            // TODO mit alpine umsetzen
-            //const preloadIcon = formWrapper.querySelector('.js-preloadIcon');
-            //const loadingIcon = formWrapper.querySelector('.js-loadingIcon');
-        
-            // Show loading indicator
-            //preloadIcon.classList.add('-isHidden');
-            //loadingIcon.classList.remove('-isHidden');
-        
             console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
         
-            // Define ajaxOptions based on form type (without jQuery $.ajax)
             let ajaxOptions = {
                 method: jsonp ? 'GET' : 'POST',
                 headers: {
@@ -96,13 +64,13 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
             if (jsonp) {
                 ajaxOptions.url = this.actionUrl;
                 ajaxOptions.headers['Content-Type'] = 'application/json; charset=utf-8';
-                ajaxOptions.body = new URLSearchParams(new FormData(form)).toString(); // For JSONP case
+                ajaxOptions.body = new URLSearchParams(new FormData(form)).toString(); 
             } else if (multipart) {
                 ajaxOptions = {
                     method: 'POST',
                     url: this.actionUrl,
                     timeout: 600 * 1000,
-                    body: new FormData(form), // No URLSearchParams, we use FormData for multipart
+                    body: new FormData(form), 
                     processData: false,
                     headers: {}
                 };
@@ -110,10 +78,9 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
                 ajaxOptions.url = `${this.actionUrl}?${responseFormatParam}`;
             }
         
-            // Using fetch API instead of $.ajax
             fetch(ajaxOptions.url, ajaxOptions)
                 .then(async (response) => {
-                    const data = await response.text(); // Assuming the rponse is text or JSON
+                    const data = await response.text();
                     if (response.ok) {
                         console.log('Done');
                         console.log(data);
@@ -126,74 +93,42 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
                                     break;
                                 case 'OK':
                                     console.log("OK");
-                                    this.replaceAnimated(
-                                        this.formWrapper,
-                                        this.form.querySelector('#successMessage').innerHTML,
-                                        true
-                                    ); 
+                                    this.wasPosted = true;
+                                    this.wasPostedWithSuccess = true;
                                     break;
                                 default:
                                     console.log("default");
-                                    this.replaceAnimated(
-                                        this.formWrapper,
-                                        this.form.querySelector('#errorMessage').innerHTML,
-                                        true
-                                    ); 
+                                    this.wasPosted = true;
+                                    this.wasPostedWithError = true;
                                     break;
                             }
                         } else {
-                            this.replaceAnimated(this.formWrapper, data, true);
+                            
+                            this.wasPosted = true;
+                            this.wasPostedWithError = true;
                         }
-/*         
-                        if (eventOnSuccess) {
-                            fireEvent(eventOnSuccess, true);
-                        } */
-        
-/*                         if (rootElement.id) {
-                            window.location.hash = rootElement.id;
-                        } */
+                        if (formId) {
+                            window.location.hash = formId;
+                        } 
                     } else {
+                        this.wasPosted = true;
+                        this.wasPostedWithError = true;
                         throw new Error('Network response was not ok.');
+                        
                     }
                 })
                 .catch((error) => {
                     console.error('Fail:', error);
-                    this.replaceAnimated(
-                        this.formWrapper,
-                        '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
-                        true
-                    );
+                    this.wasPosted = true;
+                    this.wasPostedWithError = true;
                 })
                 .finally(() => {
                     console.log('Always');
-                    // TODO MIT ALPINE UMSETZEN
-                    //preloadIcon.classList.remove('-isHidden');
-                    //loadingIcon.classList.add('-isHidden');
                     this.isPosting = false;
                 });
         },
-        // Helper function to replace content with animation (replacing hrQuery's replaceAnimated)
-        replaceAnimated(wrapper, newContent, withFade = true)  {
-            if (withFade) {
-                wrapper.style.opacity = 0;
-                setTimeout(() => {
-                    wrapper.innerHTML = newContent;
-                    wrapper.style.opacity = 1;
-                }, 300);
-            } else {
-                wrapper.innerHTML = newContent;
-            }
-        },
-        // Fire event utility (could be Alpine.js specific or custom)
-        fireEvent(eventName, success){
-            const event = new CustomEvent(eventName, { detail: success });
-            document.dispatchEvent(event);
-        },
         getSubmissionAttempted() {
             return this.$store.forms.submissionAttempted[formId]
-        }
-        
+        }        
     }
-}
-
-
+}

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

@@ -90,42 +90,8 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             return Boolean(this.$store.forms.serverErrorFields[formId]?.[name]);
         },
         getServerError() {
-            let serverError = "Server Error: "
-            switch (this.$store.forms.serverErrorFields[formId][name]) {
-
-                case 'form_error_required':
-                    serverError += "Pflichtfeld"
-                    break
-                case 'form_error_max':
-                    serverError += "Zu viele Zeichen"
-                    break
-                case 'form_error_validurl':
-                    serverError += "Ungültige URL"
-                    break
-                case 'form_error_empty':
-                    serverError += "Darf nicht ausgefüllt werden"
-                    break
-                case 'form_error_constants_or_null':
-                    serverError += "Ungültiger Wert"
-                    break
-                case 'form_error_constants':
-                    serverError += "Ungültiger Wert"
-                    break
-                case 'form_error_max_multivalue':
-                    serverError += "Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten"
-                    break
-                case 'vote_error_identity_already_used':
-                    serverError += "Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich."
-                    break
-                case 'vote_error_token_request_count_exceeded':
-                    serverError += "Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt."   
-                    break               
-                case 'form_error_email':
-                    serverError += "Ungültige E-Mail-Adresse"   
-                    break 
-                default:
-                    return false     
-            }
+            let errorName = this.$store.forms.serverErrorFields[formId][name]
+            let serverError = this.$store.forms.errorMessages[errorName] 
             return serverError
         }
     };

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

@@ -4,7 +4,7 @@
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

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

@@ -4,7 +4,7 @@
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
+   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
       :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"