hr-design-system-handlebars 1.99.1 → 1.100.1

package/.storybook/main.js

@@ -58,6 +58,7 @@ const config = {
             },
         },
         '@storybook/addon-webpack5-compiler-swc',
+        'storybook-addon-pseudo-states'
     ],
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.100.1 (Mon Sep 09 2024)
+
+#### 🐛 Bug Fix
+
+- add form input [#1057](https://github.com/mumprod/hr-design-system-handlebars/pull/1057) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 3
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.100.0 (Mon Sep 09 2024)
+
+#### 🚀 Enhancement
+
+- :lipstick: Format text italic that is marked up in an em tag [#1062](https://github.com/mumprod/hr-design-system-handlebars/pull/1062) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.99.1 (Fri Sep 06 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -381,6 +381,9 @@ video {
 /* Make elements with the HTML hidden attribute stay hidden by default */
 [hidden] {
   display: none;
+}
+    em {
+  font-style: italic;
 }
     @font-face {
         font-family: 'DIN';
@@ -423,7 +426,17 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .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\:scale-75 {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+}
+
+.peer-focus\:-translate-y-0 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -446,7 +459,7 @@ video {
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
 }
 
-.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
+.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .ring-1, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -1114,6 +1127,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .left-8 {
   left: 2rem;
 }
+.left-\[16px\] {
+  left: 16px;
+}
 .left-\[4px\] {
   left: 4px;
 }
@@ -1172,6 +1188,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .top-full {
   top: 100%;
 }
+.top-px {
+  top: 1px;
+}
 .-z-40 {
   z-index: -40;
 }
@@ -1870,6 +1889,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .basis-full {
   flex-basis: 100%;
 }
+.origin-top-left {
+  transform-origin: top left;
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   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));
@@ -1882,6 +1904,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-translate-y: -50%;
   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));
 }
+.translate-x-0 {
+  --tw-translate-x: 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));
+}
 .translate-y-0 {
   --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));
@@ -1911,6 +1937,11 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-scale-y: .5;
   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));
 }
+.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));
+}
 .scale-y-100 {
   --tw-scale-y: 1;
   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));
@@ -2245,6 +2276,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-border-opacity: 1;
   border-color: rgba(227, 227, 227, var(--tw-border-opacity));
 }
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
+}
 .border-brandnavigation-border-color {
   border-color: #005293;
   border-color: var(--color-brandnavigation-border-color);
@@ -2330,6 +2365,9 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: #606060;
   border-bottom-color: var(--color-secondary-ds);
 }
+.border-t-transparent {
+  border-top-color: transparent;
+}
 .bg-\[\#d8e9f6\] {
   --tw-bg-opacity: 1;
   background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
@@ -2765,6 +2803,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-6 {
   padding-bottom: 1.5rem;
 }
+.pb-8 {
+  padding-bottom: 2rem;
+}
 .pb-9 {
   padding-bottom: 2.25rem;
 }
@@ -2826,6 +2867,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pt-1\.5 {
   padding-top: 0.375rem;
 }
+.pt-10 {
+  padding-top: 2.5rem;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -3057,6 +3101,14 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #000000;
   color: var(--color-footer-text);
 }
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
 .text-gray-dark {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
@@ -3100,6 +3152,10 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #005293;
   color: var(--color-primary-ds);
 }
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgba(185, 28, 28, var(--tw-text-opacity));
+}
 .text-search-footer-text {
   color: #000000;
   color: var(--color-search-footer-text);
@@ -3196,6 +3252,15 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #000000;
   color: var(--color-search-footer-text);
 }
+.placeholder-transparent::-webkit-input-placeholder {
+  color: transparent;
+}
+.placeholder-transparent::-moz-placeholder {
+  color: transparent;
+}
+.placeholder-transparent::placeholder {
+  color: transparent;
+}
 .placeholder-opacity-100::-webkit-input-placeholder {
   --tw-placeholder-opacity: 1;
 }
@@ -3241,6 +3306,15 @@ article.indexTextDS .indexTextHighlighted .link {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+}
+.ring-gray-900\/5 {
+  --tw-ring-color: rgba(17, 24, 39, 0.05);
+}
 .ring-podcast {
   --tw-ring-color: var(--color-podcast);
 }
@@ -3294,6 +3368,11 @@ article.indexTextDS .indexTextHighlighted .link {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-0 {
   transition-delay: 0s;
 }
@@ -3333,12 +3412,15 @@ article.indexTextDS .indexTextHighlighted .link {
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.border-t-transparent {
+  border-top-color: transparent;
+}
 .border-b-secondary {
   border-bottom-color: #606060;
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1725619009892;
+  counter-reset: cnt1725891148652;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3746,7 +3828,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1725619009892 1;
+  counter-increment: cnt1725891148652 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3762,7 +3844,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1725619009892);
+  content: counter(cnt1725891148652);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5787,6 +5869,49 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
+  --tw-translate-x: 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:placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
+  --tw-translate-x: 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:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
+  --tw-translate-y: 0.75rem;
+  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:placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
+  --tw-translate-y: 0.75rem;
+  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:-moz-placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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:placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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\:-translate-y-0 {
+  --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\:translate-x-0 {
+  --tw-translate-x: 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\: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\:text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgba(59, 130, 246, var(--tw-text-opacity));
+}
 .aria-hidden\:hidden[aria-hidden="true"] {
   display: none;
 }
@@ -6396,6 +6521,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
          column-gap: 0.5rem;
   }
 
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -6444,6 +6573,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     padding-right: 2.375rem;
   }
 
+  .sm\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
   .sm\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;

package/dist/views/components/content/copytext/copytext_body.hbs

@@ -22,7 +22,7 @@
             {{> components/content/copytext/components/map }}
         {{/if~}}
         {{~#if this.isWebForm}}
-            {{> components/content/copytext/components/webform }}
+            {{> components/forms/webform }}
         {{/if~}}
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}

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

@@ -0,0 +1,94 @@
+{{#each this.fields}}
+    {{#if this.type.isGroup}}
+
+        {{#if this.caption}}
+            <div class="c-form__row -hasLegend">
+                <fieldset class="c-form__field-set">
+                    <legend class="c-form__legend">{{this.caption}}</legend>
+                </fieldset>
+                {{~> modules/forms/fields}}
+            </div>
+        {{else}}
+            <div class="c-form__row -expanded">
+                {{~> modules/forms/fields}}
+            </div>
+        {{/if}}
+        
+    {{else}}
+
+        <div class="c-form__row js-wrapper-{{this.name}}">
+            {{#if this.type.isTextarea}}
+                {{~> modules/forms/textarea
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _defaultValue=this.defaultValue
+                    _counter=this.counter
+                    _rows=this.rows
+                    _cols=this.columns
+                    _required=this.isRequired
+                    _maxLength=this.maxLength
+                }}
+            {{else if this.type.isText}}
+                {{~> components/forms/input_single_line
+                    _type=this.type.asString
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _defaultValue=this.defaultValue
+                    _inputClass=(if this.isHidden "hide")
+                    _tabindex=(if this.isHidden "-1")
+                    _required=this.isRequired
+                    _maxLength=this.maxLength
+                }}
+            {{else if this.type.isSelect}}
+                {{~> modules/forms/select
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _items=this.options
+                    _required=this.isRequired
+                }}
+            {{else if this.type.isChoice}}
+                {{#if this.isGrouped }}
+                    {{~> modules/forms/choiceGroup
+                        _type=this.type.asString
+                        _name=this.name
+                        _label=this.label
+                        _description=this.description
+                        _items=this.options
+                        _required=this.isRequired
+                        _multipleChoice=../_multipleChoice
+                        _addClass=../_addClass
+
+                    }}
+                {{else}}
+                    {{~> modules/forms/choice
+                        _type=this.type.asString
+                        _name=this.name
+                        _label=this.label
+                        _labelClass=(if this.isMeta "-meta")
+                        _description=this.description
+                        _value=this.options.[0].value
+                        _required=this.isRequired
+                        _selected= this.options.[0].isSelected
+                    }}
+                {{/if}}
+            {{else if this.type.isUpload}}
+                {{~> modules/forms/upload
+                    _name=this.name
+                    _label=this.label
+                    _description=this.description
+                    _multiple=false
+                    _required=this.isRequired
+                    _locaKeyButton="uploadForm_label_file_button"
+                }}
+            {{/if}}
+        </div>
+    
+    {{/if}}
+    
+{{/each}}

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

@@ -0,0 +1,71 @@
+<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
+  <input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none" 
+      x-model="input{{getRandom}}"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @blur="wasFocused = true;"
+         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _maxLength}}
+         maxlength="{{_maxLength}}"
+      {{/if~}}
+      {{#if _required}} required{{/if}}
+      {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
+      {{#if _autocompleteOff}} autocomplete="off"{{/if}}
+      {{#if _autoSuggestFeature}}
+         data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
+      >
+      <div class="hidden">
+         <div>DEBUGG</div>
+         <div x-text="valid"></div>
+         <div x-text="input{{getRandom}}.length "></div>
+      </div>
+  <label for="input{{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 
+     
+     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
+      {{#if _hasBody}}
+        {{decorator_body}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label> 
+   <div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">     
+      {{#if _description}}  
+         <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="pl-4 text-xs font-bold text-red-700 "  :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
+      {{/if}}
+      {{#if _maxLength}}
+         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
+      {{/if~}}
+   </div>
+</div>

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

@@ -0,0 +1,20 @@
+{{~#if (isStorybook)~}}
+    <form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
+        
+        <div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5  sm:max-w-xl sm:rounded-lg sm:px-10"> 
+        
+        {{> components/forms/fields }}
+
+        {{!-- {{~> modules/forms/controls }} 
+       
+        <script type="text/html" class="js-successMessage">
+            {{{include "content/webform/components/webform-form-success" }}}
+        </script>
+        <script type="text/html" class="js-errorMessage">
+            {{{include "content/webform/components/webform-form-error" }}}
+        </script> --}}
+         </div>    
+    </form>
+{{~else~}}
+    {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
+{{~/if~}}

package/dist/views_static/components/content/copytext/copytext_body.hbs

@@ -22,7 +22,7 @@
             {{> components/content/copytext/components/map }}
         {{/if~}}
         {{~#if this.isWebForm}}
-            {{> components/content/copytext/components/webform }}
+            {{> components/forms/webform }}
         {{/if~}}
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}

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

@@ -0,0 +1,94 @@
+{{#each this.fields}}
+    {{#if this.type.isGroup}}
+
+        {{#if this.caption}}
+            <div class="c-form__row -hasLegend">
+                <fieldset class="c-form__field-set">
+                    <legend class="c-form__legend">{{this.caption}}</legend>
+                </fieldset>
+                {{~> modules/forms/fields}}
+            </div>
+        {{else}}
+            <div class="c-form__row -expanded">
+                {{~> modules/forms/fields}}
+            </div>
+        {{/if}}
+        
+    {{else}}
+
+        <div class="c-form__row js-wrapper-{{this.name}}">
+            {{#if this.type.isTextarea}}
+                {{~> modules/forms/textarea
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _defaultValue=this.defaultValue
+                    _counter=this.counter
+                    _rows=this.rows
+                    _cols=this.columns
+                    _required=this.isRequired
+                    _maxLength=this.maxLength
+                }}
+            {{else if this.type.isText}}
+                {{~> components/forms/input_single_line
+                    _type=this.type.asString
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _defaultValue=this.defaultValue
+                    _inputClass=(if this.isHidden "hide")
+                    _tabindex=(if this.isHidden "-1")
+                    _required=this.isRequired
+                    _maxLength=this.maxLength
+                }}
+            {{else if this.type.isSelect}}
+                {{~> modules/forms/select
+                    _name=this.name
+                    _label=this.label
+                    _labelClass="hide"
+                    _description=this.description
+                    _items=this.options
+                    _required=this.isRequired
+                }}
+            {{else if this.type.isChoice}}
+                {{#if this.isGrouped }}
+                    {{~> modules/forms/choiceGroup
+                        _type=this.type.asString
+                        _name=this.name
+                        _label=this.label
+                        _description=this.description
+                        _items=this.options
+                        _required=this.isRequired
+                        _multipleChoice=../_multipleChoice
+                        _addClass=../_addClass
+
+                    }}
+                {{else}}
+                    {{~> modules/forms/choice
+                        _type=this.type.asString
+                        _name=this.name
+                        _label=this.label
+                        _labelClass=(if this.isMeta "-meta")
+                        _description=this.description
+                        _value=this.options.[0].value
+                        _required=this.isRequired
+                        _selected= this.options.[0].isSelected
+                    }}
+                {{/if}}
+            {{else if this.type.isUpload}}
+                {{~> modules/forms/upload
+                    _name=this.name
+                    _label=this.label
+                    _description=this.description
+                    _multiple=false
+                    _required=this.isRequired
+                    _locaKeyButton="uploadForm_label_file_button"
+                }}
+            {{/if}}
+        </div>
+    
+    {{/if}}
+    
+{{/each}}