hr-design-system-handlebars 1.108.0 → 1.109.0

package/src/stories/views/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/src/stories/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"}}

package/src/stories/views/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/src/stories/views/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/src/stories/views/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/src/stories/views/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/tailwind.config.js

@@ -130,6 +130,7 @@ module.exports = {
             },
             zIndex: {
                 '0': '0',
+                '11': '11',
                 '40': '40',
                 '50': '50',
                 '100': '100',