hr-design-system-handlebars 1.107.1 → 1.108.1

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

@@ -1,4 +1,4 @@
     <input class="h-0 w-0 opacity-0 toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#if _whitelisted}}data-whitelist="true"{{else}}data-whitelist="false"{{/if}}/>    
     <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">
         <span class="sr-only">{{_screenReaderText}}</span>
-        {{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>
+        {{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px]"}}</label>

package/src/stories/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/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -31,7 +31,7 @@
             aria-controls="suggestionlist--{{getRandom}}"
         > 
         <div 
-            class="{{~#unless _footer}} absolute {{/unless}}left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
+            class="absolute left-0 w-auto min-w-full z-100{{#if _footer}} bottom-11{{else}} top-8 lg:top-10{{/if}}" 
             x-show="query.length > 1 && active && suggestions.length"
             x-cloak
             x-transition:leave="transition ease-in duration-100"
@@ -43,7 +43,7 @@
                 id="suggestionlist--{{getRandom}}" 
                 aria-label="Suche öffnen"
                 x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
-                class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl top-100"
+                class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl"
                 x-ref="list"
             >
                 
@@ -63,22 +63,16 @@
         </div>  
     </div>
     
-    {{#if _footer}}
         <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
-        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
-        </button>
-            {{else}}
-        <button 
-        aria-label='{{loca "search_input_aria_submit" }}' 
-        type="submit" 
-        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
-        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}} 
-        </button>  
-     {{/if}}
-    
+        class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer link-focus-inset md:bg-white text-primary ">
+        {{#if _footer}}
+            {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
+        {{else}}
+            {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}} 
+        {{/if}}
+        </button>    
 </form>
 
 <script type="text/javascript">

package/src/stories/views/components/site_header/service_logo.hbs

@@ -12,7 +12,7 @@
             {{/if}}     
         >   
             <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
-                class="w-auto h-full logo-compact" alt="{{loca "meta_application_name"}}">
+                class="w-auto h-full" alt="{{loca "meta_application_name"}}">
         </div>      
         
         <div 
@@ -24,7 +24,7 @@
             {{/if}}
         >
             <img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
-                class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">     
+                class="w-auto h-full" alt="{{loca "meta_application_name"}}">     
         </div>
           
 </a>

package/tailwind.config.js

@@ -146,11 +146,16 @@ module.exports = {
                 '9.5': '2.375rem',
                 '11.5': '2.875rem',
                 '13': '3.25rem',
+                '14': '3.5rem',
+                '15': '3.75rem',
                 '18': '4.5rem',
                 '22': '5.5rem',
                 '26': '6.5rem',
                 '30': '7.5rem',
                 '35': '8.75rem',
+                '37': '9.25rem',
+                '-37': '-9.25rem',
+                '38': '9.5rem',
                 '42': '10.5rem',
                 '45': '11.25rem',
                 '46': '11.5rem',
@@ -195,16 +200,6 @@ module.exports = {
             margin: {
                 'half-screen': '50vw',
             },
-            inset: {
-                '13': '3.375rem',
-                '14': '3.5rem',
-                '15': '3.75rem',
-                '35': '8.625rem',
-                '37': '9.125rem',
-                '-37': '-9.375rem',
-                '38': '9.5rem',
-                '42': '10.5rem',
-            },
             opacity: {
                 85: '.85',
             },
@@ -379,6 +374,7 @@ module.exports = {
                 'footer-heading': 'var(--color-footer-heading)',
                 'footer-border': 'var(--color-footer-border)',
                 'search-footer-text': 'var(--color-search-footer-text)',
+                'search-border-desktop': 'var(--search-border-color-desktop)',
                 'labelMedia': 'var(--color-label-media)',
                 'labelEvent': 'var(--color-label-event)',
                 'labelBreakingnews': 'var(--color-label-breakingnews)',