hr-design-system-handlebars 1.105.0 → 1.105.2

package/src/stories/views/components/forms/input.hbs

@@ -1,19 +1,17 @@
 <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-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none" 
       :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; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-      {{/if}}
+      x-bind:data-is-valid="valid ? 'true' : 'false'"     
+      @focus="isFocused = true;"
+      @blur="wasFocused = true; isFocused=false; validateField();"
+      x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -61,20 +59,35 @@
         {{/if}}
       {{/if}}
    </label> 
-   {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-  {{/if}}
+   
+   <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+      {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+   </div>
+ 
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
-      {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-      {{#if _maxLength}}
-         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
-      {{/if~}}
+      
+      <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      
+   </div>
+   <div class="hidden">
+      <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>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>
+        
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
+         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
+         <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> 
    </div>
 </div>

package/src/stories/views/components/forms/inputHandler.alpine.js

@@ -1,14 +1,16 @@
-export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
+export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
-        valid: true, 
+        valid: false, 
         wasFocused: false, 
         isFocused: false,
-        validEmail: false,
         isChecked: false,
+        typeMismatch: true,
+        valueMissing: true,
+
         errorMessage() { 
             if( type == "email"){
-                return !this.valid ? errorMandatory : errorEmail
+                return this.valueMissing ? errorMandatory : errorEmail
             } 
             else {
                 return errorMandatory
@@ -17,19 +19,23 @@ export default function inputHandler(element, errorMandatory, type, errorEmail,
         hideDescription() {
             switch (type) {
                 case "email":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked);
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                case "select":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]))
                 default:
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused);
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
             }
         },
         hideError() { 
-                return Boolean(!this.hideDescription())  
+            return Boolean(!this.hideDescription())  
         },
-        validateEmail() {
-            var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
-            this.validEmail = emailRegex.test( this[element]);  
-        }  
+        validateField() {
+            var field = document.getElementById(element)  
+            this.typeMismatch = field.validity.typeMismatch;
+            this.valueMissing  = field.validity.valueMissing;
+            this.valid = field.checkValidity()
+        }
     };
 }

package/src/stories/views/components/forms/select.hbs

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 "
    ax-load
-   x-data="selectHandler('select{{nextRandom}}')"
+   x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
@@ -43,17 +43,12 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
-            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-    {{/if}}
     <div class="flex items-end justify-between h-5 font-heading">     
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">

package/src/stories/views/components/forms/textarea.hbs

@@ -1,6 +1,9 @@
 <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 }">
+   ax-load
+   x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
+   x-ignore
+>
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
@@ -33,7 +36,7 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+         :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -57,16 +60,16 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{/if}}
    </label>
    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
-      </div>
+         <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+         </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

package/src/stories/views/components/forms/webform.hbs

@@ -6,59 +6,37 @@
             {{this.title}}
         </h3>
         
-        <form x-data="contactForm()"
-            
+        <form
+            x-ref="form{{nextRandom}}"
+            ax-load
+            x-data="contactForm('form{{getRandom}}')"
+            x-init="formInit()"
+            x-ignore
+
             @submit.prevent="submitData"
-            x-ref="contactFormRef" 
+            id="form{{getRandom}}"     
             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 }}
+            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> 
+            </div>
+            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
             {{> 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>
+        </form>
+        
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block hover:lg:underline active:font-bold active:text-primary">   
    <a class="{{if (isUserConsentNeeded (resourceUrl "index.html" _site=this.site)) 'js-user-consent-needed ' ''}}link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,7 +2,7 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' hover:lg:underline'" 
         class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}

package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -8,7 +8,7 @@
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
                 x-data="dropdown"
                 id="{{getRandom}}"
-                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
+                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 hover:lg:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
                 aria-owns="flyout-{{getRandom}}" 

package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs

@@ -2,7 +2,7 @@
     x-show="tab === '{{this.groupTitle}}'"
     class="pb-10"
 >
-    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

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

@@ -1,15 +0,0 @@
-export default function selectHandler(element) {
-    return { 
-        [element]: '',
-        valid: false, 
-        wasFocused: false, 
-        isFocused: false,
-        validEmail: false,
-        hideDescription() {             
-            return Boolean(!this.valid && this.wasFocused && !this.isFocused)            
-        },
-        hideError() { 
-            return Boolean(!this.hideDescription())  
-        } 
-    };
-}

package/src/stories/views/components/forms/selectHandler.alpine.js

@@ -1,15 +0,0 @@
-export default function selectHandler(element) {
-    return { 
-        [element]: '',
-        valid: false, 
-        wasFocused: false, 
-        isFocused: false,
-        validEmail: false,
-        hideDescription() {             
-            return Boolean(!this.valid && this.wasFocused && !this.isFocused)            
-        },
-        hideError() { 
-            return Boolean(!this.hideDescription())  
-        } 
-    };
-}