hr-design-system-handlebars 1.103.7 → 1.103.8

package/dist/assets/index.css

@@ -2225,10 +2225,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-b {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
 .rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2290,9 +2286,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .border-t {
   border-top-width: 1px;
 }
-.border-t-0 {
-  border-top-width: 0px;
-}
 .border-t-\[3px\] {
   border-top-width: 3px;
 }
@@ -2386,10 +2379,6 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-primary-ds);
 }
-.border-red-400 {
-  --tw-border-opacity: 1;
-  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
-}
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity));
@@ -2591,14 +2580,6 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: #005293;
   background-color: var(--color-primary-ds);
 }
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
-}
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
-}
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
@@ -3207,10 +3188,6 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgba(22, 101, 52, var(--tw-text-opacity));
-}
 .text-inherit {
   color: inherit;
 }
@@ -3501,7 +3478,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727879605712;
+  counter-reset: cnt1727880361928;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3909,7 +3886,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727879605712 1;
+  counter-increment: cnt1727880361928 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3925,7 +3902,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727879605712);
+  content: counter(cnt1727880361928);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -0,0 +1,14 @@
+<div class="flex items-center justify-between">
+    <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
+    <div class="flex items-center">
+        <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
+        </label>
+
+        {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
+            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+        {{/components/button/button}}
+
+    </div>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
+</div>

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

@@ -61,9 +61,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': 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">     
@@ -77,22 +75,4 @@
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{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>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? '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>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
-         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
-         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
-         <div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>  
-        
-      </div>  
-   </div>  
 </div>

package/dist/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/dist/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/dist/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/dist/views_static/components/forms/controls.hbs

@@ -0,0 +1,14 @@
+<div class="flex items-center justify-between">
+    <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
+    <div class="flex items-center">
+        <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" />
+        </label>
+
+        {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
+            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+        {{/components/button/button}}
+
+    </div>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
+</div>

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

@@ -61,9 +61,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': 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">     
@@ -77,22 +75,4 @@
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{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>validEmail:<span x-text="validEmail" class="font-bold" :class="validEmail ? '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>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
-         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
-         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
-         <div>prefilledText:<span x-text="prefilledText" class="font-bold" ></span></div>  
-        
-      </div>  
-   </div>  
 </div>

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

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

package/src/assets/icons/icons/svgmap/error-ds.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xml:space="preserve" width="27" height="27" viewBox="0 0 27 27">
+  <g>
+    <path d="M13.5,1C6.6,1,1,6.6,1,13.5s5.6,12.5,12.5,12.5,12.5-5.6,12.5-12.5S20.4,1,13.5,1ZM11.9,5.1h3.1v12h-3.1V5.1ZM15.1,21.7h-3.1v-3.1h3.1v3.1Z"/>
+  </g>
+</svg>

package/src/assets/icons/icons/svgmap/send-ds.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16" height="16" viewBox="0 0 16 16">
+  <g>
+      <path d="M15.9.4l-4.1,14.7-5.2-5,5.1-5.4-6.9,4.8L0,8.3,15.9.4ZM6,10.9v4.8l2.3-2.6s-2.3-2.2-2.3-2.2Z"/>
+  </g>
+</svg>