hr-design-system-handlebars 1.108.0 → 1.109.0

package/.storybook/main.js

@@ -13,6 +13,7 @@ const config = {
     addons: [
         '@storybook/addon-themes',
         '@storybook/addon-links',
+        'storybook-addon-mock',
         {
             name: '@storybook/addon-essentials',
             options: {

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.109.0 (Fri Oct 11 2024)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 2897 [#1099](https://github.com/mumprod/hr-design-system-handlebars/pull/1099) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.108.1 (Fri Oct 11 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 3384 server errors [#1100](https://github.com/mumprod/hr-design-system-handlebars/pull/1100) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.108.0 (Fri Oct 11 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -18,7 +18,7 @@
   --tw-scale-y: 1;
 }
 
-.from-\[\{\{_bgcolor\}\}\], .from-black, .from-white, .md\:from-white {
+.from-\[--color-brandnavigation-bg\], .from-\[--color-navigation-bg\], .from-black, .from-white, .md\:from-white {
   --tw-gradient-from-position:  ;
   --tw-gradient-via-position:  ;
   --tw-gradient-to-position:  ;
@@ -2662,8 +2662,13 @@ article.indexTextDS .indexTextHighlighted .link {
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
-.from-\[\{\{_bgcolor\}\}\] {
-  --tw-gradient-from: {{ bgcolor}} var(--tw-gradient-from-position);
+.from-\[--color-brandnavigation-bg\] {
+  --tw-gradient-from: var(--color-brandnavigation-bg) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-\[--color-navigation-bg\] {
+  --tw-gradient-from: var(--color-navigation-bg) var(--tw-gradient-from-position);
   --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
@@ -3516,7 +3521,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728647115212;
+  counter-reset: cnt1728649888110;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3920,7 +3925,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728647115212 1;
+  counter-increment: cnt1728649888110 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3936,7 +3941,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728647115212);
+  content: counter(cnt1728649888110);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

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

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

@@ -1,36 +1,199 @@
-export default function contactForm(formId) {
+export default function contactForm(formId, jsonURL, errorMessages, multipart, trackingInformations, jsonp = false) {
     return {
+        isPosting: false,
+        isWebview:false,
+        ajaxTimeout: 60 * 1000,
+        form: this.$refs[formId],
+        formWrapper: this.$refs[formId].closest("#formWrapper"),
+        actionUrl: this.form && this.form.getAttribute('action'),
+        checkForJsonURL () {
+            if (jsonURL) {
+                this.actionUrl = jsonURL
+            }
+        },
         formInit(){
-            this.$store.forms.submissionAttempted[formId] = false;
-            console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
+            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; 
         },
-        clickHandler() {
-            console.log('check for Error:',formId);
-            const form = this.$refs[formId];
-            console.log('form',form);
-            const formData = new FormData(form);
-            const fields = Array.from(form.elements); // Array of all form fields
-
-            // Loop through each field, focus it, blur it, and serialize the data
-        
-            if(form.reportValidity()){
-                this.submitData();
+        clickHandler(event) {
+            console.log("event:",event);
+            console.log('check for Error:',formId); 
+            console.log('form:',this.form);
+     
+            if(this.form.reportValidity()){
+               // this.logData(event,form);
+                this.handleSubmit(event,this.form)
             } else {
                 this.$store.forms.submissionAttempted[formId] = true;
             }
         },
-        submitData() {
-            const formData = new FormData(this.$refs[formId]);
+        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('DATA: ' + serializedData);
+            console.log('serialized DATA: ' + serializedData);
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+            
+        },
+        // TODO - Validation error handler (adapt to your case)
+        handleValidationErrors(errors) {
+            console.log('Validation Errors:', errors);
+            this.$store.forms.serverErrorFields[formId] = errors;
+            console.log('Validation Errors in Store:', this.$store.forms.serverErrorFields);
+        },
+        resetValidationErrors() {    
+            this.$store.forms.serverErrorFields[formId] = {}
+        },
+        
+        handleSubmit(event, form ) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {
+                //uxAction(trackingInformations); // Assuming this is a tracking library
+            }
+        
+            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: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                timeout: this.ajaxTimeout,
+                body: new URLSearchParams(new FormData(form)),
+            };
+        
+            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
+            } else if (multipart) {
+                ajaxOptions = {
+                    method: 'POST',
+                    url: this.actionUrl,
+                    timeout: 600 * 1000,
+                    body: new FormData(form), // No URLSearchParams, we use FormData for multipart
+                    processData: false,
+                    headers: {}
+                };
+            } else {
+                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
+                    if (response.ok) {
+                        console.log('Done');
+                        console.log(data);
+                        if (jsonURL) {
+                            const responseData = JSON.parse(data);
+                            switch (responseData.status) {
+                                case 'VALIDATION_ERROR':
+                                    this.resetValidationErrors();
+                                    this.handleValidationErrors(responseData.errors);
+                                    break;
+                                case 'OK':
+                                    console.log("OK");
+                                    this.replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#successMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                                default:
+                                    console.log("default");
+                                    replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#errorMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                            }
+                        } else {
+                            replaceAnimated(this.formWrapper, data, true);
+                        }
+/*         
+                        if (eventOnSuccess) {
+                            fireEvent(eventOnSuccess, true);
+                        } */
+        
+/*                         if (rootElement.id) {
+                            window.location.hash = rootElement.id;
+                        } */
+                    } else {
+                        throw new Error('Network response was not ok.');
+                    }
+                })
+                .catch((error) => {
+                    console.error('Fail:', error);
+                    replaceAnimated(
+                        this.formWrapper,
+                        '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
+                        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/inputHandler.alpine.js

@@ -1,6 +1,7 @@
 export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
+        name: document.getElementById(element).getAttribute("name"),
         valid: false, 
         wasFocused: false, 
         isFocused: false,
@@ -13,19 +14,23 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 return this.valueMissing ? errorMandatory : errorEmail
             } 
             else {
-                return errorMandatory
+                if(this.hasServerError()){
+                    return this.getServerError()
+                } else {
+                    return errorMandatory
+                }
             }
         },
         hideDescription() {
             switch (type) {
                 case "email":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "select":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]))
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ))
                 default:
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
         },
         hideError() { 
@@ -36,6 +41,48 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             this.typeMismatch = field.validity.typeMismatch;
             this.valueMissing  = field.validity.valueMissing;
             this.valid = field.checkValidity()
+        },
+        hasServerError() {
+            return Boolean(this.$store.forms.serverErrorFields[formId][this.name])
+        },
+        getServerError() {
+            let serverError = "Server Error: "
+            switch (this.$store.forms.serverErrorFields[formId][this.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     
+            }
+            return serverError
         }
     };
 }

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -4,7 +4,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"

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

@@ -2,8 +2,9 @@
     <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <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'}}">     
-            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
+            <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)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

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

@@ -77,6 +77,7 @@
          DEBUG
       </div>
       <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>name:<span x-text="name" class="font-bold" ></span></div>
          <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
@@ -88,6 +89,9 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
       </div> 
    </div>
 </div>

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

@@ -5,38 +5,46 @@
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
             {{this.title}}
         </h3>
-        
-        <form
-            x-ref="form{{nextRandom}}"
-            ax-load
-            x-data="contactForm('form{{getRandom}}')"
-            x-init="formInit()"
-            x-ignore
+        <div id="formWrapper">
+            <form
+                x-ref="form{{nextRandom}}"
+                ax-load
+                x-data="contactForm('form{{getRandom}}','{{this.jsonURL}}','{{this.errorMessages}}','{{this.isMultipart}}','{{this.trackingInformations}}')"
+                x-init="formInit()"
+                x-ignore
 
-            @submit.prevent="submitData"
-            id="form{{getRandom}}"     
-            class="relative flex flex-col justify-center overflow-hidden group" 
-            action="{{this.url}}" 
-            method="post" 
-            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
-            accept-charset="utf-8"
-            
-            >
-           
-            <div class="">
-                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-                    DEBUG
+                @submit.prevent="submitData"
+                id="form{{getRandom}}"     
+                class="relative flex flex-col justify-center overflow-hidden group" 
+                action="{{this.url}}" 
+                method="post" 
+                enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+                accept-charset="utf-8"
+                
+                >
+        
+                <div class="">
+                    <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                        DEBUG
+                    </div>
+                    <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                        <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                        <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
+                    </div> 
                 </div>
-                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
-                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
-                </div> 
-            </div>
-            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-            {{> components/forms/controls }}
-
-        </form>
-        
+                {{> components/forms/controls }}
+                <template id="successMessage">
+                    <h2>SUPER DAS HAT ALLES FUNKTIONIERT</h2>
+                </template>
+                <template id="errorMessage">
+                    <h2>DAS HAT LEIDER NICHT FUNKTIONIERT</h2>
+                </template>
+                
+            </form>
+        </div>   
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -9,12 +9,12 @@
             <button style="background-image: linear-gradient(90deg, {{_bgcolor}} 50%, transparent);" class="absolute left-0 z-10 flex items-center justify-start w-10 h-full text-{{_iconcolor}} disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" tabindex="-1" aria-hidden="true" >
                 {{> components/base/image/icon _icon="arrow-left"  _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button> 
-            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l from-[{{_bgcolor}}] absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
+            <button style="background-image: linear-gradient(270deg, {{_bgcolor}} 50%, transparent);" class="bg-gradient-to-l absolute right-0 z-10 flex items-center justify-end w-10 h-full text-{{_iconcolor}} disabled:hidden group{{_css}}" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" tabindex="-1" aria-hidden="true">
                 {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-3.5 h-3.5 fill-current" }}
             </button>
         </div>
     </template>
-    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
+    <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar">
         {{> @partial-block }} 
     </div> 
 </div>

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -1,5 +1,5 @@
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
@@ -8,7 +8,7 @@
 {{/components/horizontal_scroll_container/horizontal_scroll_container}}
 </div>
 <div class="w-full h-auto mb-10">
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     
     <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
         <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>

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

@@ -1,5 +1,5 @@
 <div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
-    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
+    {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _css=" from-[--color-brandnavigation-bg]" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <nav class="flex w-full text-xs list-none text-grey-scorpion">
                 <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
                 {{#with this.brandNavigationItems}}

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

@@ -3,7 +3,7 @@
     class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
-{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _css=" from-[--color-navigation-bg]" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
     <div class="flex w-full">
         <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
 

package/dist/views_static/components/content_nav/content_nav_container.hbs

@@ -4,7 +4,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex mx-0 w-full h-10 border-primary {{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 border-primary{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"

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

@@ -2,8 +2,9 @@
     <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <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'}}">     
-            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
+            <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)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

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

@@ -77,6 +77,7 @@
          DEBUG
       </div>
       <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>name:<span x-text="name" class="font-bold" ></span></div>
          <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
@@ -88,6 +89,9 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
       </div> 
    </div>
 </div>