hr-design-system-handlebars 1.100.3 → 1.100.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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

package/dist/assets/index.css

@@ -3431,7 +3431,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1726067254110;
+  counter-reset: cnt1726216106674;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3839,7 +3839,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1726067254110 1;
+  counter-increment: cnt1726216106674 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3855,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(cnt1726067254110);
+  content: counter(cnt1726216106674);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -33,6 +33,7 @@
             {{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 dieses 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,12 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+    x-data="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': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
-      x-model="input{{getRandom}}"
+      :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+      x-model="input{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
          @blur="wasFocused = true; isFocused=false"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
@@ -37,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 
@@ -62,20 +58,61 @@
    </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 }">
+            <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': !valid && wasFocused && !isFocused }"{{/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 text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_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

@@ -1,4 +1,5 @@
 <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}}"
@@ -26,7 +27,7 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pt-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="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}}}

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

@@ -33,6 +33,7 @@
             {{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 dieses 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,12 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+    x-data="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': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
-      x-model="input{{getRandom}}"
+      :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+      x-model="input{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
          @blur="wasFocused = true; isFocused=false"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
@@ -37,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 
@@ -62,20 +58,61 @@
    </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 }">
+            <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': !valid && wasFocused && !isFocused }"{{/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 text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_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

@@ -1,4 +1,5 @@
 <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}}"
@@ -26,7 +27,7 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pt-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="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}}}

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

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

@@ -41,6 +41,21 @@
         "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":{

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

@@ -33,6 +33,7 @@
             {{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 dieses 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/form.stories.js

@@ -3,6 +3,7 @@ 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')
 
@@ -65,6 +66,11 @@ export const InputFocused = {
         },
       }
 }
+export const email = {
+    render: TemplateInput.bind({}),
+    name: 'Email',
+    args: emailJson,
+}
 export const Textarea = {
     render: TemplateTextarea.bind({}),
     name: 'Textarea',

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

@@ -1,12 +1,13 @@
-<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
+<div class="relative flex flex-col w-full mb-5"
+    x-data="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': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
-      x-model="input{{getRandom}}"
+      :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+      x-model="input{{nextRandom}}"
       id="input{{getRandom}}"
       {{#if _required}}
          @focus="isFocused = true"
          @blur="wasFocused = true; isFocused=false"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
       {{/if}}
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
@@ -37,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 
@@ -62,20 +58,61 @@
    </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 }">
+            <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': !valid && wasFocused && !isFocused }"{{/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 text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_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

@@ -1,4 +1,5 @@
 <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}}"
@@ -26,7 +27,7 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pt-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="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}}}