hr-design-system-handlebars 1.113.1 → 1.113.3

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","successText":{"richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"},"jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"&quot;form_error_required&quot;:&quot;Server: Pflichtfeld&quot;,&quot;form_error_max&quot;:&quot;Server: Zu viele Zeichen&quot;,&quot;form_error_validurl&quot;:&quot;Server: Ungültige URL&quot;,&quot;form_error_empty&quot;:&quot;Server: Darf nicht ausgefüllt werden&quot;,&quot;form_error_constants_or_null&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_constants&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_max_multivalue&quot;:&quot;Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten&quot;,&quot;vote_error_identity_already_used&quot;:&quot;Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.&quot;,&quot;vote_error_token_request_count_exceeded&quot;:&quot;Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.&quot;,&quot;form_error_email&quot;:&quot;Server: Ungültige E-Mail-Adresse&quot;","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

@@ -1,16 +1,28 @@
-<div class="flex flex-row items-center justify-between w-full">
+<div class="flex flex-col justify-between w-full gap-6 md:gap-10">
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
+                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
+                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
-        </div>
-        {{#unless _success}}
-            {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
-                <span class="text-base ds-button-label ">Nochmal versuchen</span>        
-            {{/components/button/button}}  
-        {{/unless}}   
-</div>
+        </div>      
+</div>
+<span class="font-copy">
+    {{#if _locaKeyText}}
+        {{loca _locaKeyText}}
+    {{else}}
+        {{{_text}}}
+    {{/if}}
+</span>
+{{#unless _success}}
+    <div class="flex justify-end">
+        {{#> components/button/button _variant="primary" _size="lg" }} 
+            <span class="text-base ds-button-label ">{{loca "webform_send_form_back"}}</span>        
+        {{/components/button/button}}  
+        {{#*inline "htmlProperties"}}        
+            @click="retryHandler"
+        {{/inline}}
+    </div>
+{{/unless}}  

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,43 @@
                 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/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/components/controls }}
+                    {{> components/forms/components/controls }}
+                </div>
+                <div class="flex flex-col gap-6 md:gap-10" 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
+                    >
+                    {{#if this.successText}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _text=this.successText.richtext }}
+                    {{else}}
+                        {{> components/forms/components/message _success=true _locaKeyTitle="webform_send_title_success" _locaKeyText="webform_send_text_success" }}
+                    {{/if}}
+                </div>
 
-                <template id="successMessage">
-                    {{> components/forms/components/message _success=true }}
-                </template>
+                <div class="flex flex-col gap-6 md:gap-10" 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 _locaKeyTitle="webform_send_title_error" _locaKeyText="webform_send_text_error"}}
+                </div>
 
-                <template id="errorMessage">
-                    {{> components/forms/components/message _success=false }}
-                </template>
-                
             </form>
+
+            
         </div>   
     {{/components/forms/components/backgroundBox }}
 {{~else~}}