hr-design-system-handlebars 1.101.3 → 1.102.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.102.1 (Tue Sep 24 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3306: add checkbox field [#1075](https://github.com/mumprod/hr-design-system-handlebars/pull/1075) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.102.0 (Tue Sep 24 2024)
+
+#### 🚀 Enhancement
+
+- DPE-3290 ✨ select field for form [#1074](https://github.com/mumprod/hr-design-system-handlebars/pull/1074) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.101.3 (Tue Sep 24 2024)
 
 #### ⚠️ Pushed to `main`

package/dist/assets/index.css

@@ -426,7 +426,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-3, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-100, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, label, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:translate-y-0, .peer-focus\:scale-75 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-3, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-100, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, label, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:translate-y-0, .peer-focus\:rotate-180, .peer-focus\:scale-75 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -1136,9 +1136,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
-.right-3 {
-  right: 0.75rem;
-}
 .right-4 {
   right: 1rem;
 }
@@ -1160,6 +1157,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .top-0\.5 {
   top: 0.125rem;
 }
+.top-1 {
+  top: 0.25rem;
+}
+.top-1\.5 {
+  top: 0.375rem;
+}
 .top-1\/2 {
   top: 50%;
 }
@@ -1859,6 +1862,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .flex-none {
   flex: none;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
 .shrink {
   flex-shrink: 1;
 }
@@ -2305,6 +2311,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-border-opacity: 1;
   border-color: rgba(59, 130, 246, var(--tw-border-opacity));
 }
+.border-blue-science-hex {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 109, 193, var(--tw-border-opacity));
+}
 .border-brandnavigation-border-color {
   border-color: #005293;
   border-color: var(--color-brandnavigation-border-color);
@@ -2464,6 +2474,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
+}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
@@ -2653,6 +2667,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .fill-\[\#606060\] {
   fill: #606060;
 }
+.fill-blue-500 {
+  fill: #3b82f6;
+}
 .fill-blue-congress-hex {
   fill: #005293;
 }
@@ -3466,7 +3483,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727163839066;
+  counter-reset: cnt1727184436170;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3874,7 +3891,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727163839066 1;
+  counter-increment: cnt1727184436170 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3890,7 +3907,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727163839066);
+  content: counter(cnt1727184436170);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4007,6 +4024,25 @@ select:has(option:checked:not([value=""])) + label {
   --tw-scale-y: .75;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+select[\:has\(option\:checked\[value\%3D\%22\%22\]\)] {
+  color: transparent;
+}
+select:has(option:checked[value=""]) {
+  color: transparent;
+}
+input[type="checkbox"]:checked::after {
+        position: absolute;
+        content: '';
+        width: 15px;
+        height: 6px;
+        background: transparent;
+        top: 7px;
+        left: 3px;
+        border: 3px solid white;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+    }
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -5774,6 +5810,13 @@ select:has(option:checked:not([value=""])) + label {
 .last-of-type\:pb-3:last-of-type {
   padding-bottom: 0.75rem;
 }
+.checked\:border-transparent:checked {
+  border-color: transparent;
+}
+.checked\:bg-blue-congress-hex:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
+}
 .empty\:hidden:empty {
   display: none;
 }
@@ -5984,11 +6027,21 @@ select:has(option:checked:not([value=""])) + label {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.peer:focus ~ .peer-focus\:rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .peer:focus ~ .peer-focus\:scale-75 {
   --tw-scale-x: .75;
   --tw-scale-y: .75;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.peer:focus ~ .peer-focus\:border-l-0 {
+  border-left-width: 0px;
+}
+.peer:focus ~ .peer-focus\:border-r {
+  border-right-width: 1px;
+}
 .peer:focus ~ .peer-focus\:text-blue-500 {
   --tw-text-opacity: 1;
   color: rgba(59, 130, 246, var(--tw-text-opacity));
@@ -7096,6 +7149,10 @@ select:has(option:checked:not([value=""])) + label {
     row-gap: 3.5rem;
   }
 
+  .md\:gap-y-4 {
+    row-gap: 1rem;
+  }
+
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));

package/dist/assets/js/alpine.js

@@ -20,6 +20,7 @@ AsyncAlpine.init(Alpine)
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
+    .data('selectHandler', ()=> import('components/forms/selectHandler.alpine.js'))
     .start()
 
 window.Alpine = Alpine

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

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

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

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

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

@@ -0,0 +1,97 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-ignore
+>
+
+<div class="flex flex-row items-center w-full gap-x-4">
+
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
+      :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+      @change="validateInput"
+      x-model="isChecked"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _required}} required{{/if}}
+      {{#unless _multipleChoice}}
+         {{#if _required}}
+            required
+         {{/if}}
+      {{/unless}}
+      {{#if _formField.rawAsBoolean}}
+         checked
+      {{else}}
+         {{#if _selected}}
+            checked
+         {{/if}}
+      {{/if~}}
+   >
+      
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+      {{#if _hasBody}}
+        {{decorator_body}}{{#if _required}}*{{/if}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label>
+   
+   {{#if _required}}
+      <div class="flex items-center self-start justify-center">
+         <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>
+
+   <div class="flex items-end justify-between h-5 font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+
+   <div class="hidden" >
+      <b>DEBUGG</b>
+      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
+   </div> 
+   
+
+   
+</div>

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

@@ -54,6 +54,7 @@
                     _description=this.description
                     _items=this.options
                     _required=this.isRequired
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -69,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -78,6 +79,7 @@
                         _value=this.options.[0].value
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}

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

@@ -1,6 +1,6 @@
 <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-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-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" 

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

@@ -1,30 +1,70 @@
-<div class="relative flex flex-col w-full mb-5 " ax-load=""
-    x-data="inputHandler('select9339','Bitte wählen Sie eine Option aus', false, '')">
+<div class="relative flex flex-col w-full mb-5 "
+   ax-load
+   x-data="selectHandler('select{{nextRandom}}')"
+   x-ignore
+>
     <select
-        class="relative w-full h-12 pt-4 pl-4 text-gray-800 border-blue-500 appearance-none bg- 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="select9339"
-        id="select9339" name="options" title="Wählen Sie eine Option" aria-label="Wählen Sie eine Option" >
-        <option value="" selected></option> 
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option> 
+        class="relative w-full h-12 pt-4 pl-4 text-gray-800 bg-white border-blue-500 appearance-none bg- 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="select{{getRandom}}"
+        id="select{{getRandom}}"
+        title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
+        name="{{#if _name}}{{_name}}{{/if}}"
+        {{#if _required}}required{{/if}}
+        {{#if _required}}
+            @focus="isFocused = true;"
+            @blur="wasFocused = true; isFocused=false"
+            x-on:change ="select{{getRandom}}.value != '' ? valid = true : valid = false;"
+        {{/if}}
+        >
+        <option  class="text-white bg-gray-400" value=""{{#if _required}} disabled{{/if}} selected>
+            {{#if _locaKey}}
+                {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{else}}
+                {{#if _label}}
+                    {{_label}}{{#if _required}}*{{/if}}
+                {{/if}}
+            {{/if}}
+        </option>
+        {{#if _options}}
+            {{~#each _options~}}
+                <option class="text-black" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
+            {{~/each~}}
+        {{else}}
+            {{#each _items}}
+                <option class="text-black" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
+            {{/each}}
+        {{/if}}
     </select>
-    <label for="select9339"
+    <label for="select{{getRandom}}"
         class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-500
-              
               peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
-              
-           
-
               origin-top-left transform transition-transform 
-">
-        
-    Wen möchten Sie erreichen?*
+    ">      
+        {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <!-- Optional custom dropdown arrow icon -->
-    <div class="absolute transform -translate-y-1/2 pointer-events-none right-3 top-1/2">
-        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-        </svg>
+    <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 text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+        {{/if}}
     </div>
+    <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
+        {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
+    </div>
+    <div class="hidden">
+      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+         DEBUG
+      </div>
+      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>select:<span x-text="select{{getRandom}}" class="font-bold" ></span></div>
+      </div>  
+   </div>  
 </div>

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

@@ -0,0 +1,97 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-ignore
+>
+
+<div class="flex flex-row items-center w-full gap-x-4">
+
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
+      :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+      @change="validateInput"
+      x-model="isChecked"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _required}} required{{/if}}
+      {{#unless _multipleChoice}}
+         {{#if _required}}
+            required
+         {{/if}}
+      {{/unless}}
+      {{#if _formField.rawAsBoolean}}
+         checked
+      {{else}}
+         {{#if _selected}}
+            checked
+         {{/if}}
+      {{/if~}}
+   >
+      
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+      {{#if _hasBody}}
+        {{decorator_body}}{{#if _required}}*{{/if}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label>
+   
+   {{#if _required}}
+      <div class="flex items-center self-start justify-center">
+         <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>
+
+   <div class="flex items-end justify-between h-5 font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+
+   <div class="hidden" >
+      <b>DEBUGG</b>
+      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
+   </div> 
+   
+
+   
+</div>

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

@@ -54,6 +54,7 @@
                     _description=this.description
                     _items=this.options
                     _required=this.isRequired
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -69,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -78,6 +79,7 @@
                         _value=this.options.[0].value
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}

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

@@ -1,6 +1,6 @@
 <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-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-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"