hr-design-system-handlebars 1.113.1 → 1.113.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# 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/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);
@@ -2932,6 +2938,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 +2985,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 +3571,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .delay-300 {
   transition-delay: 300ms;
 }
+.delay-75 {
+  transition-delay: 75ms;
+}
 .duration-0 {
   transition-duration: 0ms;
 }
@@ -3585,6 +3595,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 +3618,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1730148870283;
+  counter-reset: cnt1730149384842;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4019,7 +4032,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1730148870283 1;
+  counter-increment: cnt1730149384842 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4037,7 +4050,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(cnt1730149384842);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4171,6 +4184,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 +5927,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 +6108,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 {

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}}"

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

@@ -9,8 +9,11 @@
             {{/if}}
         </div>
         {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
+            {{#> components/button/button _variant="primary"_size="lg" }} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
+            {{#*inline "htmlProperties"}}        
+                @click="retryHandler"
+            {{/inline}}
         {{/unless}}   
 </div>

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

@@ -6,7 +6,7 @@
 >
    <div class="w-full h-4 bg-white dark:bg-black dark:text-text-dark"></div>
    <textarea
-      class="relative w-full 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"
+      class="relative w-full py-px pl-4 placeholder-transparent bg-white placeholder:select-none dark:border-form-highlight-dark min-h-12 peer focus:border-b-2 focus:py-0 text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
@@ -35,7 +35,6 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
          :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

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

@@ -1,7 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/components/backgroundBox  }}  
-
-        
+    {{#>components/forms/components/backgroundBox  }} 
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
@@ -21,20 +19,39 @@
                 enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
                 accept-charset="utf-8"
                 
+            >
+                <div x-show="!wasPosted"             
+                    x-transition:enter="transition ease-out duration-300 delay-300"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-transition:leave="transition ease-in duration-75 delay-0"
+                    x-transition:leave-start="opacity-100 transform scale-100"
+                    x-transition:leave-end="opacity-0 transform scale-90"
                 >
-                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
-
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                <template id="successMessage">
+                    {{> components/forms/components/controls }}
+                </div>
+                <div id="successMessage" x-show="wasPostedWithSuccess"  
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak
+                    >
                     {{> components/forms/components/message _success=true }}
-                </template>
+                </div>
 
-                <template id="errorMessage">
+                <div id="errorMessage"  x-show="wasPostedWithError" 
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak>
                     {{> components/forms/components/message _success=false }}
-                </template>
-                
+                </div>
+
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}

package/dist/views_static/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_static/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}}"

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

@@ -9,8 +9,11 @@
             {{/if}}
         </div>
         {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
+            {{#> components/button/button _variant="primary"_size="lg" }} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
+            {{#*inline "htmlProperties"}}        
+                @click="retryHandler"
+            {{/inline}}
         {{/unless}}   
 </div>

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

@@ -6,7 +6,7 @@
 >
    <div class="w-full h-4 bg-white dark:bg-black dark:text-text-dark"></div>
    <textarea
-      class="relative w-full 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"
+      class="relative w-full py-px pl-4 placeholder-transparent bg-white placeholder:select-none dark:border-form-highlight-dark min-h-12 peer focus:border-b-2 focus:py-0 text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
@@ -35,7 +35,6 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
          :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

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

@@ -1,7 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/components/backgroundBox  }}  
-
-        
+    {{#>components/forms/components/backgroundBox  }} 
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
@@ -21,20 +19,39 @@
                 enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
                 accept-charset="utf-8"
                 
+            >
+                <div x-show="!wasPosted"             
+                    x-transition:enter="transition ease-out duration-300 delay-300"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-transition:leave="transition ease-in duration-75 delay-0"
+                    x-transition:leave-start="opacity-100 transform scale-100"
+                    x-transition:leave-end="opacity-0 transform scale-90"
                 >
-                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
-
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                <template id="successMessage">
+                    {{> components/forms/components/controls }}
+                </div>
+                <div id="successMessage" x-show="wasPostedWithSuccess"  
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak
+                    >
                     {{> components/forms/components/message _success=true }}
-                </template>
+                </div>
 
-                <template id="errorMessage">
+                <div id="errorMessage"  x-show="wasPostedWithError" 
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak>
                     {{> components/forms/components/message _success=false }}
-                </template>
-                
+                </div>
+
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -462,7 +462,7 @@
     }
 
     select:has(option:checked[value='']) {
-        @apply text-transparent;
+        @apply text-transparent select-none;
     }
 
     .form-checkbox:checked::after {

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

@@ -10,7 +10,12 @@
                 "hasNewWebForm": true,
                 "title": "Kontaktformular",
                 "jsonUrl": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
-                "errorMessages": "errorMessages",
+                "errorMessages": 
+                    {
+                        "@->jsoninclude": "forms/error_messages.inc.json",
+                        "@->contentpath": "error-messages"
+
+                    },
                 "isMultipart": "isMultipart",
                 "trackingInformations": "trackingInformations",
                 "fields":[

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

@@ -0,0 +1,32 @@
+{
+    "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": 
+                    {
+                        "@->jsoninclude": "forms/error_messages.inc.json",
+                        "@->contentpath": "error-messages"
+
+                    },
+                "isMultipart": "isMultipart",
+                "trackingInformations": "trackingInformations",
+                "fields":[
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-text-vorname"
+                    }
+                ]
+                
+            }
+        }
+        
+    ]
+}

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

@@ -0,0 +1,3 @@
+{
+    "error-messages": ""form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse""
+}

package/src/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/src/stories/views/components/content/copytext/copytext-form.stories.js

@@ -1,6 +1,7 @@
 import copytext from './copytext.hbs'
 
 import copytext_webform_json from './fixtures/copytext_webform.json'
+import copytext_webform_simple_json from './fixtures/copytext_webform_simple.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -40,4 +41,54 @@ export const WithWebform = {
     name: 'Formular',
     args: copytext_webform_json,
 }
-
+export const WithWebformStatusOk = {
+    render: Template.bind({}),
+    name: 'Formular Status OK',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"OK"
+                },
+            },
+        ]
+    }
+}
+export const WithWebformStatusNone = {
+    render: Template.bind({}),
+    name: 'Formular Status None',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                    "status":""
+                },
+            },
+        ]
+    }
+}
+export const WithWebformStatusValidationError = {
+    render: Template.bind({}),
+    name: 'Formular Status Validation Error',
+    args: copytext_webform_simple_json,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"VALIDATION_ERROR", "errors":{"vorname":"form_error_required"}
+                },
+            },
+        ]
+    }
+}

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"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"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":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":false,"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.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":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}]}}]}
+{"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":""form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse"","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"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"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":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":false,"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.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":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/content/copytext/fixtures/copytext_webform_simple.json

@@ -0,0 +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":""form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse"","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}}]}

package/src/stories/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/src/stories/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}}"

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

@@ -9,8 +9,11 @@
             {{/if}}
         </div>
         {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
+            {{#> components/button/button _variant="primary"_size="lg" }} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
+            {{#*inline "htmlProperties"}}        
+                @click="retryHandler"
+            {{/inline}}
         {{/unless}}   
 </div>

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

@@ -6,7 +6,7 @@
 >
    <div class="w-full h-4 bg-white dark:bg-black dark:text-text-dark"></div>
    <textarea
-      class="relative w-full 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"
+      class="relative w-full py-px pl-4 placeholder-transparent bg-white placeholder:select-none dark:border-form-highlight-dark min-h-12 peer focus:border-b-2 focus:py-0 text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
@@ -35,7 +35,6 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
          :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/src/stories/views/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/src/stories/views/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/src/stories/views/components/forms/webform.hbs

@@ -1,7 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/components/backgroundBox  }}  
-
-        
+    {{#>components/forms/components/backgroundBox  }} 
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
@@ -21,20 +19,39 @@
                 enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
                 accept-charset="utf-8"
                 
+            >
+                <div x-show="!wasPosted"             
+                    x-transition:enter="transition ease-out duration-300 delay-300"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-transition:leave="transition ease-in duration-75 delay-0"
+                    x-transition:leave-start="opacity-100 transform scale-100"
+                    x-transition:leave-end="opacity-0 transform scale-90"
                 >
-                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
-
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                <template id="successMessage">
+                    {{> components/forms/components/controls }}
+                </div>
+                <div id="successMessage" x-show="wasPostedWithSuccess"  
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak
+                    >
                     {{> components/forms/components/message _success=true }}
-                </template>
+                </div>
 
-                <template id="errorMessage">
+                <div id="errorMessage"  x-show="wasPostedWithError" 
+                    x-transition:enter="transition ease-out duration-300 delay-75"
+                    x-transition:enter-start="opacity-0 transform scale-90"
+                    x-transition:enter-end="opacity-100 transform scale-100"
+                    x-cloak>
                     {{> components/forms/components/message _success=false }}
-                </template>
-                
+                </div>
+
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}