hr-design-system-handlebars 1.103.7 → 1.103.9

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

package/src/stories/views/components/pagination/pagination_button_right.hbs

@@ -1,4 +1,6 @@
-{{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
-    {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
-{{/components/button/button}}   
- 
+{{#with this}}
+    {{#> components/button/button _size="md" _variant="tertiary" _disableButtonPress='true' _disabled='true' _css="ml-1" _type="button"}}
+        {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+    {{/components/button/button}}
+    {{#*inline "htmlProperties"}}{{/inline}}
+{{/with}}

package/src/stories/views/components/pagination/pagination_button_right_linked.hbs

@@ -1,4 +1,7 @@
-{{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
-    <span class="sr-only">Nächste Seite</span>
-    {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
-{{/components/button/link_button}}  
+{{#with this}}
+    {{#> components/button/link_button _size="md" _variant="secondary" _link=this.nextItemLink _css="ml-1"}}
+        <span class="sr-only">Nächste Seite</span>
+        {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+    {{/components/button/link_button}}
+    {{#*inline "htmlProperties"}}{{/inline}}
+{{/with}}

package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs

@@ -11,10 +11,13 @@
             {{/inline}}  
         {{/with}}   
         <span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">&hellip;</span>  
-        {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
-            <span class="sr-only">Zur Seite: </span>
-            {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
-        {{/components/button/link_button}}
+        {{#with this}}
+            {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
+                <span class="sr-only">Zur Seite: </span>
+                {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
+            {{/components/button/link_button}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+        {{/with}}
         {{> components/pagination/pagination_button_right_linked }} 
     </div>     
 {{else}}   
@@ -35,10 +38,13 @@
             {{/inline}}  
         {{/with}}   
         <span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">&hellip;</span>   
-        {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
-            <span class="sr-only">Zur Seite: </span>
-            {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
-        {{/components/button/link_button}}
+        {{#with this}}
+            {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
+                <span class="sr-only">Zur Seite: </span>
+                {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
+            {{/components/button/link_button}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+        {{/with}}
         {{> components/pagination/pagination_button_right_linked }} 
     </div>   
     {{else}}
@@ -62,10 +68,13 @@
                 {{~#if _notLastButOnePage~}}   
                     <span class="pt-1 ml-2 mr-2 font-title dark:text-link-dark">&hellip;</span>   
                 {{~/if~}}   
-            {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
-                <span class="sr-only">Zur Seite: </span>
-                {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
-            {{/components/button/link_button}}
+                {{#with this}}
+                    {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
+                        <span class="sr-only">Zur Seite: </span>
+                        {{> components/button/components/button_label _label=_totalPages-adjust_context _css=""}}
+                    {{/components/button/link_button}}
+                    {{#*inline "htmlProperties"}}{{/inline}}
+                {{/with}}
             {{~/if~}}      
             {{~#if _notLastPage~}}   
                 {{> components/pagination/pagination_button_right_linked }}  

package/src/stories/views/components/pagination/pagination_only_three_pages.hbs

@@ -10,10 +10,13 @@
                 aria-current="true"
             {{/inline}}  
         {{/with}}
-        {{#> components/button/link_button _size="md"  _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
-            <span class="sr-only">Zur Seite: </span>
-            {{> components/button/components/button_label _label="2" _css=""}}
-        {{/components/button/link_button}}
+        {{#with this}}
+            {{#> components/button/link_button _size="md"  _variant="secondary" _link=this.nextItemLink _css="mr-1 ml-1"}}
+                <span class="sr-only">Zur Seite: </span>
+                {{> components/button/components/button_label _label="2" _css=""}}
+            {{/components/button/link_button}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+        {{/with}}
         {{#> components/button/link_button _size="md"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
             <span class="sr-only">Zur Seite: </span>
             {{> components/button/components/button_label _label="3" _css=""}}
@@ -37,10 +40,13 @@
                     aria-current="true"
                 {{/inline}}  
             {{/with}}   
-            {{#> components/button/link_button _size="md"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
-                <span class="sr-only">Zur Seite: </span>
-                {{> components/button/components/button_label _label="3" _css=""}}
-            {{/components/button/link_button}}
+            {{#with this}}
+                {{#> components/button/link_button _size="md"  _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
+                    <span class="sr-only">Zur Seite: </span>
+                    {{> components/button/components/button_label _label="3" _css=""}}
+                {{/components/button/link_button}}
+                {{#*inline "htmlProperties"}}{{/inline}}
+            {{/with}}
             {{> components/pagination/pagination_button_right_linked }} 
          </div>      
     {{else}}  

package/src/stories/views/components/pagination/pagination_only_two_pages.hbs

@@ -10,10 +10,13 @@
             aria-current="true"
         {{/inline}} 
     {{/with}}
-    {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
-        <span class="sr-only">Zur Seite: </span>
-        {{> components/button/components/button_label _label="2" _css=""}}
-    {{/components/button/link_button}}
+    {{#with this}}
+        {{#> components/button/link_button _size="md" _variant="secondary" _link=this.lastPageItemLink _css="mr-1 ml-1"}}
+            <span class="sr-only">Zur Seite: </span>
+            {{> components/button/components/button_label _label="2" _css=""}}
+        {{/components/button/link_button}}
+        {{#*inline "htmlProperties"}}{{/inline}}
+    {{/with}}
     {{> components/pagination/pagination_button_right_linked }}
     </div> 
 {{else}}