hr-design-system-handlebars 1.103.9 → 1.104.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.104.0 (Mon Oct 07 2024)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 3325 [#1091](https://github.com/mumprod/hr-design-system-handlebars/pull/1091) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.103.10 (Fri Oct 04 2024)
+
+#### 🐛 Bug Fix
+
+- ✨ Send Form INIT DPE-3384 [#1090](https://github.com/mumprod/hr-design-system-handlebars/pull/1090) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.103.9 (Fri Oct 04 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1986,6 +1986,27 @@ article.indexTextDS .indexTextHighlighted .link {
 .animate-none {
   animation: none;
 }
+@keyframes shake {
+
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+.animate-shake {
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+}
 @keyframes spin {
 
   to {
@@ -3478,7 +3499,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728027709494;
+  counter-reset: cnt1728287587075;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3886,7 +3907,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728027709494 1;
+  counter-increment: cnt1728287587075 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3902,7 +3923,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728027709494);
+  content: counter(cnt1728287587075);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/base/tracking/pianoHelper.subfeature.js

@@ -1,4 +1,4 @@
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature';
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature';
 
 const pianoErrorSecondLevelId = 99;
 

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -1,4 +1,4 @@
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
@@ -22,7 +22,7 @@ const DataPolicySettings = function (context) {
 
     //Überprüfung ein Settings-Cookie da ist
     const checkForExistingCookies = function () {
-    
+
         if (getJSONCookie('hrSettings')) {
             getAllToggleValuesFromSettings()
         }
@@ -31,16 +31,16 @@ const DataPolicySettings = function (context) {
             //Wenn kein Cookie vorhanden wird diese initial über die Checkbox "Dienst ist initial immer aktiviert (Whitelist)"
             //im Konfig-Dokument bestückt.
             for (var i = 0; i < toggleSwitches.length; ++i) {
-              if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
-                toggleSwitches[i].checked = true;
-              }
-              else{
-                toggleSwitches[i].checked = false;
-              }
-              setAllToggleEventListeners(toggleSwitches[i]);
-              initializeAllToggleEventListeners(i);
+                if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    toggleSwitches[i].checked = false;
+                }
+                setAllToggleEventListeners(toggleSwitches[i]);
+                initializeAllToggleEventListeners(i);
             }
-        changeProviderTitle();
+            changeProviderTitle();
         }
     }
 
@@ -62,39 +62,39 @@ const DataPolicySettings = function (context) {
         var id;
         console.log("Setze alle Settings-Regler")
         for (var i = 0; i < toggleSwitches.length; ++i) {
-          id = toggleSwitches[i].id;
-          if(settingsCookie.isSettingsCookieExistent(id)){
-            console.log("Dienst "+ id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
-            if(settingsCookie.isSettingsCookieAccepted(id)) {
-              console.log("Aktiviere den Toggle")
-              toggleSwitches[i].checked = true;
-            }
-            else{
-              console.log("Deaktiviere den Toggle")
-              toggleSwitches[i].checked = false;
-            }
-          }
-          else{
-            console.log("Dienst "+ id + " ist im Cookie nicht enthalten, prüfe daher den Default")
-            var whiteList = document.getElementById(id).getAttribute("data-whitelist")
-            if(whiteList == 'true'){
-              console.log("Ist per Default eingeschaltet")
-              console.log("Aktiviere den Toggle")
-              toggleSwitches[i].checked = true;
+            id = toggleSwitches[i].id;
+            if (settingsCookie.isSettingsCookieExistent(id)) {
+                console.log("Dienst " + id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+                if (settingsCookie.isSettingsCookieAccepted(id)) {
+                    console.log("Aktiviere den Toggle")
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    console.log("Deaktiviere den Toggle")
+                    toggleSwitches[i].checked = false;
+                }
             }
-            else{
-              console.log("Ist per Default ausgeschaltet")
-              console.log("Deaktiviere den Toggle")
-              toggleSwitches[i].checked = false;
+            else {
+                console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
+                var whiteList = document.getElementById(id).getAttribute("data-whitelist")
+                if (whiteList == 'true') {
+                    console.log("Ist per Default eingeschaltet")
+                    console.log("Aktiviere den Toggle")
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    console.log("Ist per Default ausgeschaltet")
+                    console.log("Deaktiviere den Toggle")
+                    toggleSwitches[i].checked = false;
+                }
+
             }
-    
-          }
-          setAllToggleEventListeners(toggleSwitches[i]);
-          initializeAllToggleEventListeners(i);
+            setAllToggleEventListeners(toggleSwitches[i]);
+            initializeAllToggleEventListeners(i);
         }
         toggleAllSwitch.checked = allTogglesExternalServiceChecked()
     }
-    
+
     const initializeAllToggleEventListeners = function (serviceId) {
         listen(
             'hr:externalService-activate-' + toggleSwitches[serviceId].id,

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

@@ -1,7 +1,7 @@
 export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
-        valid: false, 
+        valid: true, 
         wasFocused: false, 
         isFocused: false,
         validEmail: false,

package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -1,6 +1,6 @@
 import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 
 const ArdPlayerLoader = function (options, trackingData, rootElement) {
     'use strict'

package/dist/assets/js/utils.js

@@ -8,7 +8,6 @@
  */
 const getSnapshotsTemplate = (args) => {
     const { hbsTemplates, args: snapshotsJson } = args
-    console.log("SnapshotsJson First", snapshotsJson)
     const config = snapshotsJson.config || {}
     const renderAsGrid = undefined !== config.layout && "grid" === config.layout
     const renderSnapshotsWrapper = undefined !== config.renderSnapshotsWrapper ? config.renderSnapshotsWrapper : true
@@ -31,7 +30,6 @@ const getSnapshotsTemplate = (args) => {
         })
         template += snapshotsWrapperEnd
     } else {
-        console.log("SnapshotsJson", snapshotsJson)
         const filteredSnapshots = Object.entries(snapshotsJson).filter(([key, value]) =>
             key !== "config" && (value.config === undefined || value.config.useAsSnapshot !== false)
         )
@@ -44,20 +42,19 @@ const getSnapshotsTemplate = (args) => {
 
 const renderSnapshots = (snapshots, hbsTemplates, defaultTemplate, defaultPath, renderSnapshotsWrapper) => {
     let template = ''
-    console.log("Snapshots", snapshots)
     snapshots.forEach(([key, value]) => {
         const snapshotItemConfig = value.config || {}
-        const renderSnapshotItemWrapper = undefined !== snapshotItemConfig.renderSnapshotItemWrapper ? snapshotItemConfig.renderSnapshotItemWrapper : true
+        const renderSnapshotItemWrapper = undefined !== snapshotItemConfig.renderSnapshotItemWrapper ? snapshotItemConfig.renderSnapshotItemWrapper : renderSnapshotsWrapper
         const path = snapshotItemConfig.path ? `${snapshotItemConfig.path}` : (defaultPath ? `${defaultPath}` : "args")
         const snapshotTemplateName = snapshotItemConfig.template || defaultTemplate || "no-template"
 
-        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+        if (renderSnapshotItemWrapper) {
             template += `<div${snapshotItemConfig.css ? ` class="${snapshotItemConfig.css}"` : ''}>`
         }
 
         template += hbsTemplates[snapshotTemplateName](resolveObjectFromPath(path, value));
 
-        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+        if (renderSnapshotItemWrapper) {
             template += '</div>';
         }
     })

package/dist/views/components/content/copytext/components/externalservice.hbs

@@ -1,5 +1,5 @@
 {{#with this.toModel.externalService}}
 
-    {{> components/externalService/external_service }}
+    {{> components/external-service/external_service }}
 
 {{/with}}

package/{src/stories/views/components/externalService → dist/views/components/external-service}/components/external_service_data_policy.hbs

@@ -5,15 +5,15 @@
     <div>
         <p class="pt-4 text-base font-copy">
             {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
-            {{~> components/externalService/components/data_policy_link ~}}
+            {{~> components/external-service/components/data_policy_link ~}}
         </p>
         <div class="pt-4">
-            {{~> components/externalService/components/external_service_form_checkbox ~}}
+            {{~> components/external-service/components/external_service_form_checkbox ~}}
         </div>
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
+                 {{~> components/external-service/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"
@@ -21,7 +21,7 @@
                 </div>
             {{/with}}
             <div class="inline-flex">
-            {{~> components/externalService/components/external_service_load_content_button ~}}
+            {{~> components/external-service/components/external_service_load_content_button ~}}
             {{#*inline "htmlProperties"}}{{/inline}}
             </div>
         </div>

package/{src/stories/views/components/externalService → dist/views/components/external-service}/external_service.hbs

@@ -1,6 +1,6 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
     <!-- Embedding via JS with DataPolicyCheck-->  
-    {{> components/externalService/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
+    {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
 
 {{else}}
     
@@ -20,7 +20,7 @@
                     data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
                 </div>  
             {{/if}}    
-            {{~> components/externalService/components/external_service_caption ~}}
+            {{~> components/external-service/components/external_service_caption ~}}
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -0,0 +1,19 @@
+<div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
+                this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.makeDatapolicyCheck}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+            {{~> components/external-service/components/external_service_data_policy ~}}
+        </div>
+        {{~> components/external-service/components/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div class="hidden js-content-settings-button">
+            <div class="float-right">
+            {{~> components/external-service/components/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~#if (isStorybook)~}}
+<div id="{{this.externalServiceConfig.externalServiceId}}" data-whitelist="{{this.externalServiceConfig.makeDatapolicyCheck}}"></div>
+{{/if}}

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

@@ -3,7 +3,7 @@
     <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" />
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

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

@@ -1,4 +1,5 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+   :class="{'animate-shake': hideDescription() }"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
@@ -7,9 +8,10 @@
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
+      x-bind:data-is-valid="valid ? 'true' : 'false'" 
       {{#if _required}}
          @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
          x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"

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

@@ -1,11 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
+:class="{'animate-shake': !valid && wasFocused && !isFocused }">
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
          x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
       {{/if}}
       value=""

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

@@ -6,11 +6,59 @@
             {{this.title}}
         </h3>
         
-        <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+        <form x-data="contactForm()"
+            
+            @submit.prevent="submitData"
+            x-ref="contactFormRef" 
+            class="relative flex flex-col justify-center overflow-hidden group" 
+            id="form--{{nextRandom}}" 
+            action="{{this.url}}" 
+            method="post" 
+            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+            accept-charset="utf-8" >     
             {{> components/forms/fields }}
 
             {{> components/forms/controls }}
         </form>
+        <script>
+        function contactForm() {
+            return {
+                formData: {
+                    name: '',
+                    email: '',
+                    message: ''
+                },
+                clickHandler() {
+                    console.log('check for Error ');
+                    const form = this.$refs.contactFormRef;
+                    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
+                    fields.forEach((field) => {
+                        if (field.type !== 'submit') {  // Skip the submit button
+                            field.focus();  // Focus the field
+                            field.blur();   // Immediately unfocus (blur) the field
+                        }
+                    });
+                    if(form.reportValidity()){
+                        this.submitData();
+                    }
+                    
+                },
+                submitData() {
+                    const formData = new FormData(this.$refs.contactFormRef);
+                    // 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);
+                }
+            }
+        }
+    </script>
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/dist/views/components/teaser/teaser_external_service.hbs

@@ -1,6 +1,6 @@
 <div class="grid-cols-12 col-span-12 px-5 sm:px-0{{~inline-switch this.teasersize '["50"]' '[" md:col-span-6",""]'}}">
 
-    {{> components/externalService/external_service _isTeaser="true"}}
+    {{> components/external-service/external_service _isTeaser="true"}}
 
     {{> components/teaser/components/teaser_featured_content _size=this.realTeaserSize}}
     

package/dist/views_static/components/content/copytext/components/externalservice.hbs

@@ -1,5 +1,5 @@
 {{#with this.toModel.externalService}}
 
-    {{> components/externalService/external_service }}
+    {{> components/external-service/external_service }}
 
 {{/with}}

package/dist/{views/components/externalService → views_static/components/external-service}/components/external_service_data_policy.hbs

@@ -5,15 +5,15 @@
     <div>
         <p class="pt-4 text-base font-copy">
             {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
-            {{~> components/externalService/components/data_policy_link ~}}
+            {{~> components/external-service/components/data_policy_link ~}}
         </p>
         <div class="pt-4">
-            {{~> components/externalService/components/external_service_form_checkbox ~}}
+            {{~> components/external-service/components/external_service_form_checkbox ~}}
         </div>
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
+                 {{~> components/external-service/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"
@@ -21,7 +21,7 @@
                 </div>
             {{/with}}
             <div class="inline-flex">
-            {{~> components/externalService/components/external_service_load_content_button ~}}
+            {{~> components/external-service/components/external_service_load_content_button ~}}
             {{#*inline "htmlProperties"}}{{/inline}}
             </div>
         </div>

package/dist/{views/components/externalService → views_static/components/external-service}/external_service.hbs

@@ -1,6 +1,6 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
     <!-- Embedding via JS with DataPolicyCheck-->  
-    {{> components/externalService/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
+    {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
 
 {{else}}
     
@@ -20,7 +20,7 @@
                     data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
                 </div>  
             {{/if}}    
-            {{~> components/externalService/components/external_service_caption ~}}
+            {{~> components/external-service/components/external_service_caption ~}}
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs

@@ -0,0 +1,19 @@
+<div class="grid clear-both{{#unless _isTeaser}} mt-10{{/unless}}">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
+                this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.makeDatapolicyCheck}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+            {{~> components/external-service/components/external_service_data_policy ~}}
+        </div>
+        {{~> components/external-service/components/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div class="hidden js-content-settings-button">
+            <div class="float-right">
+            {{~> components/external-service/components/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~#if (isStorybook)~}}
+<div id="{{this.externalServiceConfig.externalServiceId}}" data-whitelist="{{this.externalServiceConfig.makeDatapolicyCheck}}"></div>
+{{/if}}

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

@@ -3,7 +3,7 @@
     <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" />
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

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

@@ -1,4 +1,5 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+   :class="{'animate-shake': hideDescription() }"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
@@ -7,9 +8,10 @@
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
+      x-bind:data-is-valid="valid ? 'true' : 'false'" 
       {{#if _required}}
          @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
          x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"

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

@@ -1,11 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
+:class="{'animate-shake': !valid && wasFocused && !isFocused }">
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
-         @blur="wasFocused = true; isFocused=false"
+         @blur="wasFocused = true; isFocused=false; textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
          x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
       {{/if}}
       value=""

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

@@ -6,11 +6,59 @@
             {{this.title}}
         </h3>
         
-        <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
+        <form x-data="contactForm()"
+            
+            @submit.prevent="submitData"
+            x-ref="contactFormRef" 
+            class="relative flex flex-col justify-center overflow-hidden group" 
+            id="form--{{nextRandom}}" 
+            action="{{this.url}}" 
+            method="post" 
+            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+            accept-charset="utf-8" >     
             {{> components/forms/fields }}
 
             {{> components/forms/controls }}
         </form>
+        <script>
+        function contactForm() {
+            return {
+                formData: {
+                    name: '',
+                    email: '',
+                    message: ''
+                },
+                clickHandler() {
+                    console.log('check for Error ');
+                    const form = this.$refs.contactFormRef;
+                    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
+                    fields.forEach((field) => {
+                        if (field.type !== 'submit') {  // Skip the submit button
+                            field.focus();  // Focus the field
+                            field.blur();   // Immediately unfocus (blur) the field
+                        }
+                    });
+                    if(form.reportValidity()){
+                        this.submitData();
+                    }
+                    
+                },
+                submitData() {
+                    const formData = new FormData(this.$refs.contactFormRef);
+                    // 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);
+                }
+            }
+        }
+    </script>
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}