hr-design-system-handlebars 1.107.1 → 1.108.1

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.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
+
+- :recycle: Remove unused css classes from footer. [#1101](https://github.com/mumprod/hr-design-system-handlebars/pull/1101) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.107.1 (Wed Oct 09 2024)
 
 #### 🐛 Bug Fix

package/build/handlebars/helpers/handlebar-helpers.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs'),
     path = require('path')
+const { type } = require('os')
 let handlebars
 
 var decoratorStack
@@ -272,7 +273,6 @@ var helpers = {
         const valuesArray = eval(values)
         const defaultValue =
             casesArray.length < valuesArray.length ? valuesArray[valuesArray.length - 1] : ''
-
         return casesArray.indexOf(input) > -1
             ? valuesArray[casesArray.indexOf(input)]
             : defaultValue
@@ -558,7 +558,7 @@ var helpers = {
      * 
      * Function implementation:
      */
-    'joinStrings': function (...args) {    
+    'joinStrings': function (...args) {
         return args.filter(arg => typeof arg === 'string' || typeof arg === 'number').join('');
     }
 

package/dist/assets/index.css

@@ -1126,6 +1126,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-11 {
+  bottom: 2.75rem;
+}
 .bottom-15 {
   bottom: 3.75rem;
 }
@@ -3513,7 +3516,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728487371440;
+  counter-reset: cnt1728647677353;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3917,7 +3920,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728487371440 1;
+  counter-increment: cnt1728647677353 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3933,7 +3936,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728487371440);
+  content: counter(cnt1728647677353);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7611,6 +7614,10 @@ input[type='radio']:checked::after {
     height: 3rem;
   }
 
+  .lg\:h-15 {
+    height: 3.75rem;
+  }
+
   .lg\:h-16 {
     height: 4rem;
   }

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/dataPolicySettings/data_policy_settings.hbs

@@ -46,20 +46,20 @@
             </div>
 
             <ul class="{{#if _webview}} hidden{{/if}}">
-                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
+                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
                     <span class="text-base text-black">AGF <a
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
-                    <div class="flex w-fit toggleSwitch">
+                    <div class="flex w-fit">
                         {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
-                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
+                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
                     <span class="text-base text-black">AT Internet <a
                         class="{{if (isUserConsentNeeded 'https://www.atinternet.com/de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
-                    <div class="flex w-fit toggleSwitch">
+                    <div class="flex w-fit">
                         {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
@@ -82,9 +82,9 @@
             </div>
             <div class="bg-[#e3e3e3] py-2.5 px-6">
                 <span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
-                <div class="flex justify-between all">
+                <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
-                    <div class="flex float-right toggleSwitch">
+                    <div class="flex float-right">
                         {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
@@ -93,9 +93,9 @@
             <ul>
                 {{#with this.serviceList}}
                     {{#each this}}
-                        <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
+                        <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
-                            <div class="flex float-right toggleSwitch">
+                            <div class="flex float-right">
                                 {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>

package/dist/views/components/footer/page_footer_column.hbs

@@ -11,7 +11,7 @@
 
     <div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
         {{#each _columns}} 
-            <ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
+            <ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full">
                 {{#each this.links}}
                         {{> components/footer/page_footer_item  _css="hover:underline" _iconName="extern" }}
                 {{/each}}

package/dist/views/components/footer/page_footer_content.hbs

@@ -1,12 +1,12 @@
-<div class="flex w-full md:w-1/2 md:w-max-1/2 md:first:pr-4 --first ">
-    {{~> components/footer/page_footer_column _columns=this.groups.[0].columns _columnSize=this.groups.[0].columnSize _title=this.groups.[0].title ~}} 
+<div class="flex w-full md:w-1/2 md:first:pr-4">
+    {{~> components/footer/page_footer_column _columns=this.groups.[0].columns _title=this.groups.[0].title ~}} 
 </div>
 
-<div class="flex w-full md:w-1/4 md:w-max-1/4 -second ">
+<div class="flex w-full md:w-1/4">
     {{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}} 
 </div> 
 
-<div class="flex flex-col w-full pt-4 md:w-1/4 md:w-max-1/4 md:pt-0 md:pr-0 -third">
+<div class="flex flex-col w-full pt-4 md:w-1/4 md:pt-0 md:pr-0">
 
     <div class="p-0 pb-4 m-0 md:pt-10 md:mt-10 md:border-t border-footer-heading">
         {{> components/footer/page_footer_search }}

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/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/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"}}