hr-design-system-handlebars 1.101.3 → 1.102.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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%;
 }
@@ -2464,6 +2467,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 +2660,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .fill-\[\#606060\] {
   fill: #606060;
 }
+.fill-blue-500 {
+  fill: #3b82f6;
+}
 .fill-blue-congress-hex {
   fill: #005293;
 }
@@ -3466,7 +3476,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727163839066;
+  counter-reset: cnt1727170647026;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3874,7 +3884,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727163839066 1;
+  counter-increment: cnt1727170647026 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3890,7 +3900,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(cnt1727170647026);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4007,6 +4017,12 @@ 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;
+}
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -5984,11 +6000,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));

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/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/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 }}

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/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 }}

package/dist/views_static/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/package.json

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

package/src/assets/css/custom-utilities.css

@@ -454,4 +454,9 @@
         @apply top-px scale-75 translate-y-0
     }
 
+    select:has(option:checked[value=""]) {
+        @apply text-transparent
+    }
+    
+
 }

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

@@ -1,104 +1,121 @@
 {
-    "input-text-vorname":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"vorname",
-        "label":"Vorname",
-        "description":"Das ist der Beschreibungstext von Vorname",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":false
-        
+        "name": "vorname",
+        "label": "Vorname",
+        "description": "Das ist der Beschreibungstext von Vorname",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": false
     },
-    "input-text-vorname-required":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname-required": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"vorname",
-        "label":"Vorname",
-        "description":"Das ist der Beschreibungstext (*Pflichtfeld)",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":true,
-        "maxLength":"140"
+        "name": "vorname",
+        "label": "Vorname",
+        "description": "Das ist der Beschreibungstext (*Pflichtfeld)",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "input-text-nachname-required":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-nachname-required": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"nachname",
-        "label":"Nachname",
-        "description":"",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":true,
-        "maxLength":"140"
+        "name": "nachname",
+        "label": "Nachname",
+        "description": "",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "input-text-vorname-prefilled":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname-prefilled": {
+        "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"
+        "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"
+    "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"
+        "name": "email",
+        "label": "Email",
+        "description": "Das ist der Beschreibungstext von Email",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "textarea":
-    {
-        "type":{
-            "isTextarea":true,
-            "asString":"textarea"
+    "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
+        "name": "textarea",
+        "label": "Textarea",
+        "description": "Das ist der Beschreibungstext von Textarea",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "300",
+        "columns": "30",
+        "rows": "10",
+        "counter": true
     },
-    "select":
-    {
-        "type":{
-            "isSelect":true,
-            "asString":"select"
+    "select": {
+        "type": {
+            "isSelect": true,
+            "asString": "select"
         },
-        "name":"Select Name",
-        "label":"Select Label",
-        "description":"Das ist der Beschreibungstext von Select",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":false
-        
-    }           
- }
+        "name": "Select Name",
+        "label": "Wen möchten Sie erreichen?",
+        "description": "Das ist der Beschreibungstext von Select",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "options": [
+            {
+                "id": "option1",
+                "value": "option1",
+                "selected": false,
+                "label": "Option 1"
+            },
+            {
+                "id": "option2",
+                "value": "option2",
+                "selected": false,
+                "label": "Option 2"
+            },
+            {
+                "id": "option3",
+                "value": "option3",
+                "selected": false,
+                "label": "Option 3"
+            },
+            {
+                "id": "option4",
+                "value": "option4",
+                "selected": false,
+                "label": "Option 4"
+            }
+        ]
+    }
+}

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

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

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

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

@@ -1 +1 @@
-{"fields":[{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Select Label","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":false}]}
+{"fields":[{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":false,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]}]}

package/src/stories/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/src/stories/views/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())  
+        } 
+    };
+}