hr-design-system-handlebars 1.113.0 → 1.113.2

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# 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
+
+- add voting error-message [#1129](https://github.com/mumprod/hr-design-system-handlebars/pull/1129) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.113.0 (Fri Oct 25 2024)
 
 #### 🚀 Enhancement

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;
@@ -1454,6 +1454,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .ml-5 {
   margin-left: 1.25rem;
 }
+.ml-8 {
+  margin-left: 2rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -2010,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);
@@ -2929,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;
 }
@@ -2972,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;
 }
@@ -3325,6 +3335,11 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #005293;
   color: var(--color-primary-ds);
 }
+.text-red-thunderbird-hex {
+  --tw-text-opacity: 1;
+  color: rgba(204, 26, 20, 1);
+  color: rgba(204, 26, 20, var(--tw-text-opacity));
+}
 .text-search-footer-text {
   color: #000000;
   color: var(--color-search-footer-text);
@@ -3556,6 +3571,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .delay-300 {
   transition-delay: 300ms;
 }
+.delay-75 {
+  transition-delay: 75ms;
+}
 .duration-0 {
   transition-duration: 0ms;
 }
@@ -3577,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);
 }
@@ -3597,7 +3618,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1729881987844;
+  counter-reset: cnt1730149384842;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4011,7 +4032,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1729881987844 1;
+  counter-increment: cnt1730149384842 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4029,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(cnt1729881987844);
+  content: counter(cnt1730149384842);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4163,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 {
@@ -5903,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);
@@ -6071,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 {
@@ -6582,6 +6620,10 @@ select:has(option:checked[value='']) {
     margin-left: 2rem;
   }
 
+  .sm\:ml-9 {
+    margin-left: 2.25rem;
+  }
+
   .sm\:ml-\[1\.531rem\] {
     margin-left: 1.531rem;
   }

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/components/voting/voting_error.hbs

@@ -0,0 +1,10 @@
+{{> components/voting/voting_result
+            _title=this.title
+            _topline=this.topline
+            _resultBoxMessageTitle=(loca "votingform_title_error")
+            _resultBoxMessageText=(loca "votingform_text_error")
+            _locaKeyText="votingform_text_error"
+            _isInline=_isInline
+            _hideVotingResult=true
+            _statusDone=false
+}}

package/dist/views/components/voting/voting_result.hbs

@@ -1,5 +1,25 @@
-{{> components/voting/voting_header _title=_title _topline=_topline}}
+{{#unless _isResultOnRedirectPage}}
+    {{> components/voting/voting_header _title=_title _topline=_topline}}
+{{/unless}}
+
+{{#if _hideVotingResult}}
+    {{#if _isVotingOver}}
+        <p class="c-teaser__text text__copytext">{{{_resultBoxMessageText}}}</p>
+    {{else}}
+        {{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-red-thunderbird-hex fill-current mt-6 sm:mt-12")}}
+        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-red-thunderbird-hex sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+        <div class="mt-6 sm:mt-12">
+            {{#> components/button/link_button _size="lg" _css="float-right"}}
+                {{> components/button/components/button_label _label=(loca "votingform_form_back")}}
+            {{/components/button/link_button}}
+        </div>
+    {{/if}}
+{{else}}
+
+{{/if}}
 
 {{#if _isVotingOver}}
     <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12 dark:text-text-dark">{{loca "votingform_voting_finished"}}</p>
 {{/if}}
+
+

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>