hr-design-system-handlebars 1.100.2 → 1.100.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.100.4 (Fri Sep 13 2024)
+
+#### 🐛 Bug Fix
+
+- ✨ Email field - DPE 3292 [#1065](https://github.com/mumprod/hr-design-system-handlebars/pull/1065) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.100.3 (Wed Sep 11 2024)
+
+#### 🐛 Bug Fix
+
+- ✨ Mehrzeiliges Textfeld [#1064](https://github.com/mumprod/hr-design-system-handlebars/pull/1064) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.100.2 (Tue Sep 10 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1136,6 +1136,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
+.right-4 {
+  right: 1rem;
+}
 .right-\[50px\] {
   right: 50px;
 }
@@ -1700,6 +1703,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .max-h-stage {
   max-height: 34.3125rem;
 }
+.min-h-12 {
+  min-height: 3rem;
+}
 .min-h-\[88px\] {
   min-height: 88px;
 }
@@ -2342,6 +2348,14 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-primary-ds);
 }
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+.border-red-700 {
+  --tw-border-opacity: 1;
+  border-color: rgba(185, 28, 28, var(--tw-border-opacity));
+}
 .border-servicenavigation-border-color {
   border-color: #fff;
   border-color: var(--color-servicenavigation-border-color);
@@ -2636,6 +2650,9 @@ article.indexTextDS .indexTextHighlighted .link {
   fill: #006eb7;
   fill: var(--color-link);
 }
+.fill-red-700 {
+  fill: #b91c1c;
+}
 .fill-search {
   fill: #000000;
   fill: var(--search-icon-color);
@@ -2813,6 +2830,9 @@ article.indexTextDS .indexTextHighlighted .link {
   padding-bottom: 16px;
   padding-bottom: var(--footer-padding-bottom);
 }
+.pb-px {
+  padding-bottom: 1px;
+}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -2855,6 +2875,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pr-8 {
   padding-right: 2rem;
 }
+.pr-9 {
+  padding-right: 2.25rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -3408,7 +3431,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1725971545380;
+  counter-reset: cnt1726216106674;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3816,7 +3839,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1725971545380 1;
+  counter-increment: cnt1726216106674 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3832,7 +3855,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1725971545380);
+  content: counter(cnt1726216106674);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5775,10 +5798,20 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 .hover\:\!decoration-1:hover {
   text-decoration-thickness: 1px !important;
 }
+.focus\:border-y-2:focus {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
+.focus\:border-b-2:focus {
+  border-bottom-width: 2px;
+}
 .focus\:bg-black:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
+.focus\:pb-0:focus {
+  padding-bottom: 0px;
+}
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));

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

@@ -18,10 +18,9 @@
 
         <div class="c-form__row js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> modules/forms/textarea
+                {{~> components/forms/textarea
                     _name=this.name
                     _label=this.label
-                    _labelClass="hide"
                     _description=this.description
                     _defaultValue=this.defaultValue
                     _counter=this.counter
@@ -29,10 +28,12 @@
                     _cols=this.columns
                     _required=this.isRequired
                     _maxLength=this.maxLength
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input_single_line
                     _type=this.type.asString
+                    _isEmail=this.type.isEmail
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -42,7 +43,8 @@
                     _tabindex=(if this.isHidden "-1")
                     _required=this.isRequired
                     _maxLength=this.maxLength
-                    _errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
+                    _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
                 {{~> modules/forms/select

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

@@ -1,10 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
-  <input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none" 
-      x-model="input{{getRandom}}"
+<div class="relative flex flex-col w-full mb-5"
+    x-data="inputHandler">
+  <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{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
-         @blur="wasFocused = true;"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         @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}}"
@@ -35,12 +38,7 @@
       {{#if _autoSuggestFeature}}
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
-      <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="input{{getRandom}}.length "></span></div>
-      </div>
+      
   <label for="input{{getRandom}}" class="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 
@@ -58,15 +56,63 @@
         {{/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 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
+         <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 font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
+         <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>
+   <div class="hidden">
+      <b>DEBUGG</b>
+      <div>isFocused:<span x-text="isFocused"></span></div>
+      <div>wasFocused:<span x-text="wasFocused"></span></div>
+      <div>valid:<span x-text="valid"></span></div>
+      <div>validEmail:<span x-text="validEmail"></span></div>
+      <div>hideDescription:<span x-text="hideDescription"></span></div>   
+      <div>hideError:<span x-text="hideError"></span></div>   
+      <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>  
+      <div>input:<span x-text="input{{getRandom}} "></span></div>
+      <div>errorMessage:<span x-text="errorMessage"></span></div>    
+   </div>
+   <script>
+         function inputHandler() {
+            return {
+               input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , 
+               valid: false, 
+               wasFocused: false, 
+               isFocused: false,
+               {{#if _isEmail}}
+                  validEmail: false,
+                  errorMessage(){ return  !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
+                  hideDescription() {return (!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused)},
+                  hideError() {return !this.hideDescription()},
+                  
+                  validateEmail() {
+                        var email = this.input{{getRandom}}
+                        var emailRegex = /^[a-zA-Z0–9._-]+@[a-zA-Z0–9.-]+\.[a-zA-Z]{2,4}$/;
+                        this.validEmail = emailRegex.test(email);
+                        //this.validEmail = email.includes('@');
+                  }
+
+               {{else}}
+
+                  hideError() {return (this.valid || !this.wasFocused || this.isFocused)},   
+                  hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
+                  errorMessage: "{{_errorMandatory}}"
+               {{/if}}
+            };
+         }
+      </script>
+</div>

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

@@ -0,0 +1,77 @@
+<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="w-full h-4 bg-white"></div>
+   <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"
+      value=""
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+            title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
+            placeholder="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _rows}}
+         rows="{{_rows}}"
+      {{/if}}
+      {{#if _cols}}
+         cols="{{_cols}}"
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/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 _formField.isValid}}
+        {{{_formField.forHtmlContent}}}
+    {{else}}
+        {{#if _value}}
+            {{_value}}
+        {{else}}
+            {{_defaultValue}}
+        {{/if}}{{/if}}</textarea>
+   <label for="textarea{{getRandom}}" class="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 _locaKey}}
+         {{loca _locaKey}}
+      {{else}}
+         {{#if _label}}
+            {{{_label}}}{{#if _required}}*{{/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': valid || !wasFocused || isFocused }">
+               {{> 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 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>
+      {{/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>
+</div>

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

@@ -18,10 +18,9 @@
 
         <div class="c-form__row js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> modules/forms/textarea
+                {{~> components/forms/textarea
                     _name=this.name
                     _label=this.label
-                    _labelClass="hide"
                     _description=this.description
                     _defaultValue=this.defaultValue
                     _counter=this.counter
@@ -29,10 +28,12 @@
                     _cols=this.columns
                     _required=this.isRequired
                     _maxLength=this.maxLength
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input_single_line
                     _type=this.type.asString
+                    _isEmail=this.type.isEmail
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -42,7 +43,8 @@
                     _tabindex=(if this.isHidden "-1")
                     _required=this.isRequired
                     _maxLength=this.maxLength
-                    _errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
+                    _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
                 {{~> modules/forms/select

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

@@ -1,10 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
-  <input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none" 
-      x-model="input{{getRandom}}"
+<div class="relative flex flex-col w-full mb-5"
+    x-data="inputHandler">
+  <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{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
-         @blur="wasFocused = true;"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         @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}}"
@@ -35,12 +38,7 @@
       {{#if _autoSuggestFeature}}
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
-      <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="input{{getRandom}}.length "></span></div>
-      </div>
+      
   <label for="input{{getRandom}}" class="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 
@@ -58,15 +56,63 @@
         {{/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 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
+         <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 font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
+         <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>
+   <div class="hidden">
+      <b>DEBUGG</b>
+      <div>isFocused:<span x-text="isFocused"></span></div>
+      <div>wasFocused:<span x-text="wasFocused"></span></div>
+      <div>valid:<span x-text="valid"></span></div>
+      <div>validEmail:<span x-text="validEmail"></span></div>
+      <div>hideDescription:<span x-text="hideDescription"></span></div>   
+      <div>hideError:<span x-text="hideError"></span></div>   
+      <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>  
+      <div>input:<span x-text="input{{getRandom}} "></span></div>
+      <div>errorMessage:<span x-text="errorMessage"></span></div>    
+   </div>
+   <script>
+         function inputHandler() {
+            return {
+               input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , 
+               valid: false, 
+               wasFocused: false, 
+               isFocused: false,
+               {{#if _isEmail}}
+                  validEmail: false,
+                  errorMessage(){ return  !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
+                  hideDescription() {return (!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused)},
+                  hideError() {return !this.hideDescription()},
+                  
+                  validateEmail() {
+                        var email = this.input{{getRandom}}
+                        var emailRegex = /^[a-zA-Z0–9._-]+@[a-zA-Z0–9.-]+\.[a-zA-Z]{2,4}$/;
+                        this.validEmail = emailRegex.test(email);
+                        //this.validEmail = email.includes('@');
+                  }
+
+               {{else}}
+
+                  hideError() {return (this.valid || !this.wasFocused || this.isFocused)},   
+                  hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
+                  errorMessage: "{{_errorMandatory}}"
+               {{/if}}
+            };
+         }
+      </script>
+</div>

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

@@ -0,0 +1,77 @@
+<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="w-full h-4 bg-white"></div>
+   <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"
+      value=""
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+            title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
+            placeholder="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _rows}}
+         rows="{{_rows}}"
+      {{/if}}
+      {{#if _cols}}
+         cols="{{_cols}}"
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/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 _formField.isValid}}
+        {{{_formField.forHtmlContent}}}
+    {{else}}
+        {{#if _value}}
+            {{_value}}
+        {{else}}
+            {{_defaultValue}}
+        {{/if}}{{/if}}</textarea>
+   <label for="textarea{{getRandom}}" class="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 _locaKey}}
+         {{loca _locaKey}}
+      {{else}}
+         {{#if _label}}
+            {{{_label}}}{{#if _required}}*{{/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': valid || !wasFocused || isFocused }">
+               {{> 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 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>
+      {{/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>
+</div>

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.2",
+  "version": "1.100.4",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -14,7 +14,7 @@
                     },
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-nachname"
+                        "@->contentpath": "input-text-vorname-required"
                     }
                 ]
                 

package/src/assets/fixtures/forms/form_email.json

@@ -0,0 +1,9 @@
+{
+    "fields":[
+                {
+                   "@->jsoninclude": "forms/form_fields.inc.json",
+                   "@->contentpath": "input-email"
+                }
+             ]
+ }
+ 

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

@@ -21,13 +21,13 @@
         },
         "name":"vorname",
         "label":"Vorname",
-        "description":"",
+        "description":"Das ist der Beschreibungstext (*Pflichtfeld)",
         "defaultValue":"",
         "isHidden":false,
         "isRequired":true,
         "maxLength":"20"
     },
-    "input-text-nachname":
+    "input-text-vorname-prefilled":
     {
         "type":{
             "isText":true,
@@ -36,9 +36,41 @@
         "name":"nachname",
         "label":"Nachname",
         "description":"Das ist der Beschreibungstext von Nachname",
+        "defaultValue":"Hier steht schon was",
+        "isHidden":false,
+        "isRequired":false,
+        "maxLength":"140"
+    },
+    "input-email":
+    {
+        "type":{
+            "isText":true,
+            "isEmail":true,
+            "asString":"email"
+        },
+        "name":"email",
+        "label":"Email",
+        "description":"Das ist der Beschreibungstext von Email",
         "defaultValue":"",
         "isHidden":false,
         "isRequired":true,
         "maxLength":"140"
-    }         
+    },
+    "textarea":
+    {
+        "type":{
+            "isTextarea":true,
+            "asString":"textarea"
+        },
+        "name":"textarea",
+        "label":"Textarea",
+        "description":"Das ist der Beschreibungstext von Textarea",
+        "defaultValue":"",
+        "isHidden":false,
+        "isRequired":true,
+        "maxLength":"300",
+        "columns":"30",
+        "rows":"10",
+        "counter":true
+    }            
  }

package/src/assets/fixtures/forms/form_input.json

@@ -3,14 +3,6 @@
                {
                   "@->jsoninclude": "forms/form_fields.inc.json",
                   "@->contentpath": "input-text-vorname"
-               },
-               {
-                  "@->jsoninclude": "forms/form_fields.inc.json",
-                  "@->contentpath": "input-text-vorname-required"
-               },
-               {
-                  "@->jsoninclude": "forms/form_fields.inc.json",
-                  "@->contentpath": "input-text-nachname"
                }
             ]
 }

package/src/assets/fixtures/forms/form_input_mandatory.json

@@ -0,0 +1,8 @@
+{
+   "fields":[
+               {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "input-text-vorname-required"
+               }
+            ]
+}

package/src/assets/fixtures/forms/form_input_prefilled.json

@@ -0,0 +1,8 @@
+{
+   "fields":[
+               {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "input-text-vorname-prefilled"
+               }
+            ]
+}

package/src/assets/fixtures/forms/form_textarea.json

@@ -0,0 +1,18 @@
+{
+    "fields":[
+                {
+                    "@->jsoninclude": "forms/form_fields.inc.json",
+                    "@->contentpath": "textarea"
+                },{
+                   "@->jsoninclude": "forms/form_fields.inc.json",
+                   "@->contentpath": "textarea",
+                   "@->overrides": [
+                                {
+                                    "@->contentpath": "isRequired",
+                                    "@->value": false
+                                }
+                            ]
+                }
+             ]
+ }
+ 

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"}]}}]}

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

@@ -18,10 +18,9 @@
 
         <div class="c-form__row js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> modules/forms/textarea
+                {{~> components/forms/textarea
                     _name=this.name
                     _label=this.label
-                    _labelClass="hide"
                     _description=this.description
                     _defaultValue=this.defaultValue
                     _counter=this.counter
@@ -29,10 +28,12 @@
                     _cols=this.columns
                     _required=this.isRequired
                     _maxLength=this.maxLength
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input_single_line
                     _type=this.type.asString
+                    _isEmail=this.type.isEmail
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -42,7 +43,8 @@
                     _tabindex=(if this.isHidden "-1")
                     _required=this.isRequired
                     _maxLength=this.maxLength
-                    _errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
+                    _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
                 {{~> modules/forms/select

package/src/stories/views/components/forms/fixtures/form_email.json

@@ -0,0 +1 @@
+{"fields":[{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}

package/src/stories/views/components/forms/fixtures/form_input.json

@@ -1 +1 @@
-{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
+{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}

package/src/stories/views/components/forms/fixtures/form_input_mandatory.json

@@ -0,0 +1 @@
+{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"}]}

package/src/stories/views/components/forms/fixtures/form_input_prefilled.json

@@ -0,0 +1 @@
+{"fields":[{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"Hier steht schon was","isHidden":false,"isRequired":false,"maxLength":"140"}]}

package/src/stories/views/components/forms/fixtures/form_textarea.json

@@ -0,0 +1 @@
+{"fields":[{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"300","columns":"30","rows":"10","counter":true}]}

package/src/stories/views/components/forms/form.stories.js

@@ -1,10 +1,15 @@
 
 import inputJson from './fixtures/form_input.json'
+import inputMandatoryJson from './fixtures/form_input_mandatory.json'
+import inputPrefilledJson from './fixtures/form_input_prefilled.json'
+import textareaJson from './fixtures/form_textarea.json'
+import emailJson from './fixtures/form_email.json'
+
 const handlebars = require('hrHandlebars')
 
 
 export default {
-    title: 'Komponenten/Formulare/Input',
+    title: 'Komponenten/Formulare/Text Felder',
     decorators: [
         (Story) => {
             return `<div class="grid grid-page">
@@ -15,7 +20,17 @@ export default {
         },
     ],
 }
-const Template = (args) => {
+const TemplateInput = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#>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 }}
+  `)
+    return hbsTemplate({ ...args })
+}
+const TemplateTextarea = (args) => {
     let hbsTemplate = handlebars.compile(`
     {{#>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" >     
@@ -26,14 +41,23 @@ const Template = (args) => {
     return hbsTemplate({ ...args })
 }
 export const Input = {
-    render: Template.bind({}),
-    name: 'Input - Einzeiliger Text',
+    render: TemplateInput.bind({}),
+    name: 'Input',
     args: inputJson,
 }
-
+export const InputMandatory = {
+    render: TemplateInput.bind({}),
+    name: 'Input:mandatory',
+    args: inputMandatoryJson,
+}
+export const InputPrefilled = {
+    render: TemplateInput.bind({}),
+    name: 'Input:prefilled',
+    args: inputPrefilledJson,
+}
 export const InputFocused = {
-    render: Template.bind({}),
-    name: 'Input - Einzeiliger Text Focus',
+    render: TemplateInput.bind({}),
+    name: 'Input:focus',
     args: inputJson,
     parameters: {
         pseudo: {
@@ -41,4 +65,14 @@ export const InputFocused = {
           
         },
       }
+}
+export const email = {
+    render: TemplateInput.bind({}),
+    name: 'Email',
+    args: emailJson,
+}
+export const Textarea = {
+    render: TemplateTextarea.bind({}),
+    name: 'Textarea',
+    args: textareaJson,
 }

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

@@ -1,10 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
-  <input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none" 
-      x-model="input{{getRandom}}"
+<div class="relative flex flex-col w-full mb-5"
+    x-data="inputHandler">
+  <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{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
-         @blur="wasFocused = true;"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         @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}}"
@@ -35,12 +38,7 @@
       {{#if _autoSuggestFeature}}
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
-      <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="input{{getRandom}}.length "></span></div>
-      </div>
+      
   <label for="input{{getRandom}}" class="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 
@@ -58,15 +56,63 @@
         {{/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 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
+         <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 font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
+         <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>
+   <div class="hidden">
+      <b>DEBUGG</b>
+      <div>isFocused:<span x-text="isFocused"></span></div>
+      <div>wasFocused:<span x-text="wasFocused"></span></div>
+      <div>valid:<span x-text="valid"></span></div>
+      <div>validEmail:<span x-text="validEmail"></span></div>
+      <div>hideDescription:<span x-text="hideDescription"></span></div>   
+      <div>hideError:<span x-text="hideError"></span></div>   
+      <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>  
+      <div>input:<span x-text="input{{getRandom}} "></span></div>
+      <div>errorMessage:<span x-text="errorMessage"></span></div>    
+   </div>
+   <script>
+         function inputHandler() {
+            return {
+               input{{getRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , 
+               valid: false, 
+               wasFocused: false, 
+               isFocused: false,
+               {{#if _isEmail}}
+                  validEmail: false,
+                  errorMessage(){ return  !this.valid ? '{{_errorMandatory}}' : '{{_errorEmail}}'},
+                  hideDescription() {return (!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused)},
+                  hideError() {return !this.hideDescription()},
+                  
+                  validateEmail() {
+                        var email = this.input{{getRandom}}
+                        var emailRegex = /^[a-zA-Z0–9._-]+@[a-zA-Z0–9.-]+\.[a-zA-Z]{2,4}$/;
+                        this.validEmail = emailRegex.test(email);
+                        //this.validEmail = email.includes('@');
+                  }
+
+               {{else}}
+
+                  hideError() {return (this.valid || !this.wasFocused || this.isFocused)},   
+                  hideDescription() {return !this.valid && this.wasFocused && !this.isFocused},
+                  errorMessage: "{{_errorMandatory}}"
+               {{/if}}
+            };
+         }
+      </script>
+</div>

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

@@ -0,0 +1,77 @@
+<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="w-full h-4 bg-white"></div>
+   <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"
+      value=""
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+            title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
+            placeholder="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _rows}}
+         rows="{{_rows}}"
+      {{/if}}
+      {{#if _cols}}
+         cols="{{_cols}}"
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/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 _formField.isValid}}
+        {{{_formField.forHtmlContent}}}
+    {{else}}
+        {{#if _value}}
+            {{_value}}
+        {{else}}
+            {{_defaultValue}}
+        {{/if}}{{/if}}</textarea>
+   <label for="textarea{{getRandom}}" class="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 _locaKey}}
+         {{loca _locaKey}}
+      {{else}}
+         {{#if _label}}
+            {{{_label}}}{{#if _required}}*{{/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': valid || !wasFocused || isFocused }">
+               {{> 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 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>
+      {{/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>
+</div>

package/tailwind.config.js

@@ -167,6 +167,9 @@ module.exports = {
             maxHeight: {
                 stage: '34.3125rem',
             },
+            minHeight: {
+                12: '3rem',
+            },
             maxWidth: {
                 '1/4': '25%',
                 '1/3': '33.33333333%',