hr-design-system-handlebars 1.101.3 → 1.102.1

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