hr-design-system-handlebars 1.100.7 → 1.101.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.101.0 (Thu Sep 19 2024)
+
+#### 🚀 Enhancement
+
+- ✨ DPE-3361 Formular in delivery einbauen [#1071](https://github.com/mumprod/hr-design-system-handlebars/pull/1071) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.100.8 (Wed Sep 18 2024)
+
+#### 🐛 Bug Fix
+
+- 🎨 Form Validation as lazy loaded async script [#1070](https://github.com/mumprod/hr-design-system-handlebars/pull/1070) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.100.7 (Tue Sep 17 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2198,6 +2198,10 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
 .rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2259,6 +2263,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-0 {
+  border-top-width: 0px;
+}
 .border-t-\[3px\] {
   border-top-width: 3px;
 }
@@ -2348,6 +2355,10 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-primary-ds);
 }
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
+}
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity));
@@ -2545,6 +2556,14 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: #005293;
   background-color: var(--color-primary-ds);
 }
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
+}
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
@@ -3435,7 +3454,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1726580940248;
+  counter-reset: cnt1726756869388;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3843,7 +3862,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1726580940248 1;
+  counter-increment: cnt1726756869388 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3859,7 +3878,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1726580940248);
+  content: counter(cnt1726756869388);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6419,6 +6438,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-bottom: 1.75rem;
   }
 
+  .sm\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
   .sm\:mb-14 {
     margin-bottom: 3.5rem;
   }

package/dist/assets/js/alpine.js

@@ -17,7 +17,9 @@ AsyncAlpine.init(Alpine)
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
+    
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
+    .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
     .start()
 
 window.Alpine = Alpine

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

@@ -0,0 +1,30 @@
+export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
+    return { 
+        [element]: prefilledText,
+        valid: false, 
+        wasFocused: false, 
+        isFocused: false,
+        validEmail: false,
+        errorMessage() { 
+            if( Boolean(isEmail)){
+                return !this.valid ? errorMandatory : errorEmail
+            } else {
+                return errorMandatory
+            }
+        },
+        hideDescription() { 
+            if( Boolean(isEmail)){
+                return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
+            } else {
+                return Boolean(!this.valid && this.wasFocused && !this.isFocused)
+            }
+        },
+        hideError() { 
+                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]);  
+        }  
+    };
+}

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

@@ -22,7 +22,7 @@
             {{> components/content/copytext/components/map }}
         {{/if~}}
         {{~#if this.isWebForm}}
-            {{> components/forms/webform }}
+            {{> components/forms/webform _newWebForm=this.hasNewWebForm}}
         {{/if~}}
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}

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

@@ -16,7 +16,7 @@
         
     {{else}}
 
-        <div class="c-form__row js-wrapper-{{this.name}}">
+        <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
                 {{~> components/forms/textarea
                     _name=this.name
@@ -31,15 +31,15 @@
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input_single_line
+                {{~> components/forms/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
                     _label=this.label
-                    _labelClass="hide"
+                    _labelClass=""
                     _description=this.description
                     _defaultValue=this.defaultValue
-                    _inputClass=(if this.isHidden "hide")
+                    _wrapperClass=(if this.isHidden "hidden")
                     _tabindex=(if this.isHidden "-1")
                     _required=this.isRequired
                     _maxLength=this.maxLength

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

@@ -0,0 +1,98 @@
+<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   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}}"
+      {{#if _required}}
+         @focus="isFocused = true;"
+         @blur="wasFocused = true; isFocused=false"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/if~}}
+      {{#if _required}} required{{/if}}
+      {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
+      {{#if _autocompleteOff}} autocomplete="off"{{/if}}
+      {{#if _autoSuggestFeature}}
+         data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
+      >
+      
+  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
+     
+     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
+     
+     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
+      {{#if _hasBody}}
+        {{decorator_body}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label> 
+   {{#if _required}}
+      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+            <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
+               {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
+            </div>
+      </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': hideDescription() }"{{/if}}>{{_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>
+   <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>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? '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>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>  
+        
+      </div>  
+   </div>  
+</div>

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

@@ -3,9 +3,11 @@
    <textarea
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
-      @focus="isFocused = true"
-      @blur="wasFocused = true; isFocused=false"
-      x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+         x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
+      {{/if}}
       value=""
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -28,7 +30,9 @@
       {{/if~}}
       {{#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" 
-      :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+      {{#if _required}}
+         :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+      {{/if}}
    >{{#if _formField.isValid}}
         {{{_formField.forHtmlContent}}}
     {{else}}
@@ -62,16 +66,22 @@
          <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_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>
       {{/if~}}
    </div>
+
    <div class="hidden">
-      <div>DEBUGG</div>
-      <div>wasFocused:<span x-text="wasFocused"></span></div>
-      <div>valid:<span x-text="valid"></span></div>
-      <div>input.length:<span x-text="textarea{{getRandom}}.length "></span></div>
+      <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>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
+      </div>
    </div>
 </div>

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

@@ -1,9 +1,15 @@
-{{~#if (isStorybook)~}}
-        {{#>components/forms/backgroundBox  }}  
-            <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" >     
-                {{> components/forms/fields }}
-            </form>
-        {{/components/forms/backgroundBox }}
+{{~#if _newWebForm ~}}
+    {{#>components/forms/backgroundBox  }}  
+
+        
+        <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
+            {{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" >     
+            {{> components/forms/fields }}
+        </form>
+    {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

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

@@ -22,7 +22,7 @@
             {{> components/content/copytext/components/map }}
         {{/if~}}
         {{~#if this.isWebForm}}
-            {{> components/forms/webform }}
+            {{> components/forms/webform _newWebForm=this.hasNewWebForm}}
         {{/if~}}
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}

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

@@ -16,7 +16,7 @@
         
     {{else}}
 
-        <div class="c-form__row js-wrapper-{{this.name}}">
+        <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
                 {{~> components/forms/textarea
                     _name=this.name
@@ -31,15 +31,15 @@
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input_single_line
+                {{~> components/forms/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
                     _label=this.label
-                    _labelClass="hide"
+                    _labelClass=""
                     _description=this.description
                     _defaultValue=this.defaultValue
-                    _inputClass=(if this.isHidden "hide")
+                    _wrapperClass=(if this.isHidden "hidden")
                     _tabindex=(if this.isHidden "-1")
                     _required=this.isRequired
                     _maxLength=this.maxLength

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

@@ -0,0 +1,98 @@
+<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   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}}"
+      {{#if _required}}
+         @focus="isFocused = true;"
+         @blur="wasFocused = true; isFocused=false"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/if~}}
+      {{#if _required}} required{{/if}}
+      {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
+      {{#if _autocompleteOff}} autocomplete="off"{{/if}}
+      {{#if _autoSuggestFeature}}
+         data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
+      >
+      
+  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
+     
+     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
+     
+     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
+      {{#if _hasBody}}
+        {{decorator_body}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label> 
+   {{#if _required}}
+      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+            <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
+               {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
+            </div>
+      </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': hideDescription() }"{{/if}}>{{_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>
+   <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>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? '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>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>  
+        
+      </div>  
+   </div>  
+</div>

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

@@ -3,9 +3,11 @@
    <textarea
       x-model="textarea{{getRandom}}"
       id="textarea{{getRandom}}"
-      @focus="isFocused = true"
-      @blur="wasFocused = true; isFocused=false"
-      x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+         x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
+      {{/if}}
       value=""
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -28,7 +30,9 @@
       {{/if~}}
       {{#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" 
-      :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+      {{#if _required}}
+         :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+      {{/if}}
    >{{#if _formField.isValid}}
         {{{_formField.forHtmlContent}}}
     {{else}}
@@ -62,16 +66,22 @@
          <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_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>
       {{/if~}}
    </div>
+
    <div class="hidden">
-      <div>DEBUGG</div>
-      <div>wasFocused:<span x-text="wasFocused"></span></div>
-      <div>valid:<span x-text="valid"></span></div>
-      <div>input.length:<span x-text="textarea{{getRandom}}.length "></span></div>
+      <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>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
+      </div>
    </div>
 </div>

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

@@ -1,9 +1,15 @@
-{{~#if (isStorybook)~}}
-        {{#>components/forms/backgroundBox  }}  
-            <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" >     
-                {{> components/forms/fields }}
-            </form>
-        {{/components/forms/backgroundBox }}
+{{~#if _newWebForm ~}}
+    {{#>components/forms/backgroundBox  }}  
+
+        
+        <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
+            {{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" >     
+            {{> components/forms/fields }}
+        </form>
+    {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.100.7",
+  "version": "1.101.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -7,14 +7,20 @@
         {
             "paragraphBoxItem": {
                 "isWebForm": true,
+                "hasNewWebForm": true,
+                "title": "Kontaktformular",
                 "fields":[
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname"
+                        "@->contentpath": "input-text-vorname-required"
                     },
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname-required"
+                        "@->contentpath": "input-text-nachname-required"
+                    },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "textarea"
                     }
                 ]
                 

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -25,7 +25,21 @@
         "defaultValue":"",
         "isHidden":false,
         "isRequired":true,
-        "maxLength":"20"
+        "maxLength":"140"
+    },
+    "input-text-nachname-required":
+    {
+        "type":{
+            "isText":true,
+            "asString":"text"
+        },
+        "name":"nachname",
+        "label":"Nachname",
+        "description":"",
+        "defaultValue":"",
+        "isHidden":false,
+        "isRequired":true,
+        "maxLength":"140"
     },
     "input-text-vorname-prefilled":
     {