hr-design-system-handlebars 1.110.11 → 1.110.13

package/dist/views_static/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/dist/views_static/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/dist/{views/components/forms → views_static/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/dist/{views/components/forms → views_static/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       
-      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/dist/views_static/components/forms/{message.hbs → components/message.hbs}

@@ -2,16 +2,15 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="font-bold text-green-800">{{_messageText}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
-                {{> components/forms/error_icon}}
-                <span class="font-bold text-red-700">{{_messageText}}</span>  
+                {{> components/forms/error_icon _class="!block"}}
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}
             {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
-        {{/unless}}
-        
+        {{/unless}}   
 </div>

package/dist/{views/components/forms → views_static/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <select
         class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_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">

package/dist/{views/components/forms → views_static/components/forms/components}/textarea.hbs

@@ -36,7 +36,7 @@
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -61,7 +61,7 @@
    </label>
    {{#if _required}}
          <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+            {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

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

@@ -1,5 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
 
         
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
@@ -22,21 +22,21 @@
                 accept-charset="utf-8"
                 
                 >
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/controls }}
+                {{> components/forms/components/controls }}
 
                 <template id="successMessage">
-                    {{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
+                    {{> components/forms/components/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
                 </template>
 
                 <template id="errorMessage">
-                    {{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
+                    {{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
                 </template>
                 
             </form>
         </div>   
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -189,5 +189,7 @@
     "teaser_more_video_livestream": "Livestream",
     "teaser_more_video_livestream_brand": "zum {0} Livestream",
     "teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
-    "teaser_more_video_livestream_sr": "zum Livestream"
+    "teaser_more_video_livestream_sr": "zum Livestream",
+    "webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+    "webform_send_text_error": "Das Formular konnte nicht versendet werden."
 }

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/src/assets/js/alpine.js

@@ -19,8 +19,8 @@ AsyncAlpine.init(Alpine)
     )
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
+    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/src/assets/tailwind.css

@@ -164,6 +164,8 @@
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: theme('colors.red.thunderbird.hex');
+    --color-error-dark: theme('colors.red.thunderbirdLight.hex');
+    --color-success: #2c7e13;
     --color-form-highlight: var(--color-link);
     --color-form-highlight-dark: var(--color-link-dark);
 

package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/{dist/views/components/forms → src/stories/views/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <div class="flex flex-row items-center w-full cursor-pointer ">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

package/src/stories/views/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/src/stories/views/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       
-      <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/src/stories/views/components/forms/{message.hbs → components/message.hbs}

@@ -2,16 +2,15 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="font-bold text-green-800">{{_messageText}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
-                {{> components/forms/error_icon}}
-                <span class="font-bold text-red-700">{{_messageText}}</span>  
+                {{> components/forms/error_icon _class="!block"}}
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}
             {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
-        {{/unless}}
-        
+        {{/unless}}   
 </div>

package/{dist/views_static/components/forms → src/stories/views/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <select
         class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_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">