hr-design-system-handlebars 1.103.7 → 1.103.8

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

@@ -45,9 +45,7 @@
     </label>
     {{#if _required}}
       <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
-            <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>
+            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
       </div>
     {{/if}}
     <div class="flex items-end justify-between h-5 font-heading">     
@@ -60,18 +58,5 @@
     </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>  
 </div>

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

@@ -33,14 +33,14 @@
       {{#if _required}}
          :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
       {{/if}}
-   >{{#if _formField.isValid}}
+   >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
-    {{else}}
-        {{#if _value}}
+    {{~else~}}
+        {{~#if _value~}}
             {{_value}}
-        {{else}}
-            {{_defaultValue}}
-        {{/if}}{{/if}}</textarea>
+        {{~else~}}
+            {{~_defaultValue~}}
+        {{~/if}}{{/if}}</textarea>
    <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
      
      peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
@@ -56,9 +56,7 @@
    </label>
    {{#if _required}}
       <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
-               {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
-            </div>
+         {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
       </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -72,16 +70,4 @@
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
       {{/if~}}
    </div>
-
-   <div class="hidden">
-      <div 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>input.length:<span x-text="textarea{{getRandom}}.length " class="font-bold" ></span></div>
-      </div>
-   </div>
 </div>

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

@@ -8,6 +8,8 @@
         
         <form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >     
             {{> components/forms/fields }}
+
+            {{> components/forms/controls }}
         </form>
     {{/components/forms/backgroundBox }}
 {{~else~}}