hr-design-system-handlebars 1.108.0 → 1.109.0

package/dist/views_static/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_static/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_static/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_static/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_static/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/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.108.0",
+  "version": "1.109.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",
@@ -102,6 +102,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
     "storybook": "^8.2.6",
+    "storybook-addon-mock": "^5.0.0",
     "storybook-conditional-toolbar-selector": "^1.0.3",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.0.23",

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

@@ -9,6 +9,10 @@
                 "isWebForm": true,
                 "hasNewWebForm": true,
                 "title": "Kontaktformular",
+                "jsonURL": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
+                "errorMessages": "errorMessages",
+                "isMultipart": "isMultipart",
+                "trackingInformations": "trackingInformations",
                 "fields":[
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
@@ -30,65 +34,8 @@
                     }
                 ]
                 
-            }
-        },
-        {
-            "isHeadline": true,
-            "text": "Noch ein Formular"
-        },
-        {
-            "paragraphBoxItem": {
-                "isWebForm": true,
-                "hasNewWebForm": true,
-                "title": "Kontaktformular",
-                "fields":[
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname-required"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-nachname-required"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "select"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-email",
-                        "@->overrides": [
-                            {
-                                "@->contentpath": "isRequired",
-                                "@->value": false
-                            }
-                        ]
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-email"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "textarea"
-                    },
-                    {
-                      "@->jsoninclude": "forms/form_fields.inc.json",
-                      "@->contentpath": "checkbox",
-                      "@->overrides": [
-                         {
-                            "@->contentpath": "label",
-                            "@->value": "Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de."
-                         }
-                      ]
-                    }
-                ]
-                
             }
         }
+        
     ]
 }

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

@@ -0,0 +1,41 @@
+import copytext from './copytext.hbs'
+
+import copytext_webform_json from './fixtures/copytext_webform.json'
+
+const Template = ({ ...args }) => {
+    return copytext({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Content/Copytext',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()} 
+                        </div>
+                    </div>`
+        },
+    ],
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                    "status":"VALIDATION_ERROR","errors":{"vorname":"form_error_required"},
+                },
+            },
+        ],
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
+}
+
+export const WithWebform = {
+    render: Template.bind({}),
+    name: 'Formular',
+    args: copytext_webform_json,
+}
+

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -17,7 +17,6 @@ import copytext_video_json from './fixtures/copytext_video.json'
 import copytext_audio_json from './fixtures/copytext_audio.json'
 import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
 import copytext_livestream_json from './fixtures/copytext_livestream.json'
-import copytext_webform_json from './fixtures/copytext_webform.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -67,12 +66,6 @@ export const WithFiledownload = {
     args: copytext_filedownload_json,
 }
 
-export const WithWebform = {
-    render: Template.bind({}),
-    name: 'Formular',
-    args: copytext_webform_json,
-}
-
 export const WithImage = {
     render: Template.bind({}),
     name: 'Image',

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}},{"isHeadline":true,"text":"Noch ein Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"140"},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonURL":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/views/components/content_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/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>