@netlib/widerrufsbutton 1.1.2 → 2.1.1

package/dist/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const WRB_CSS = "\n/* Widerrufsbutton widget \u2014 prefix: wrb- */\n.wrb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 20px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n  text-decoration: none;\n}\n.wrb-btn:hover { background: #a93226; }\n.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }\n\n/* Overlay */\n.wrb-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n  padding: 16px;\n  animation: wrb-fade-in 0.15s ease;\n}\n@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }\n\n/* Modal box */\n.wrb-modal {\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  width: 100%;\n  max-width: 540px;\n  max-height: 90vh;\n  overflow-y: auto;\n  animation: wrb-slide-up 0.2s ease;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 15px;\n  color: #1a1a1a;\n}\n@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }\n\n.wrb-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid #e5e7eb;\n  gap: 12px;\n}\n.wrb-modal-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n  line-height: 1.3;\n}\n.wrb-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6b7280;\n  padding: 4px;\n  border-radius: 4px;\n  font-size: 20px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n.wrb-close-btn:hover { color: #111; background: #f3f4f6; }\n\n.wrb-modal-body {\n  padding: 20px 24px 24px;\n}\n\n.wrb-intro {\n  margin: 0 0 20px;\n  color: #4b5563;\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Form */\n.wrb-field {\n  margin-bottom: 16px;\n}\n.wrb-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 5px;\n}\n.wrb-required {\n  color: #c0392b;\n  margin-left: 2px;\n}\n.wrb-input,\n.wrb-textarea {\n  width: 100%;\n  padding: 9px 12px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  font-family: inherit;\n  color: #111;\n  background: #fff;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.wrb-input:focus,\n.wrb-textarea:focus {\n  outline: none;\n  border-color: #c0392b;\n  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);\n}\n.wrb-input.wrb-error,\n.wrb-textarea.wrb-error {\n  border-color: #c0392b;\n}\n.wrb-field-error {\n  color: #c0392b;\n  font-size: 12px;\n  margin-top: 4px;\n}\n.wrb-textarea { resize: vertical; min-height: 80px; }\n\n.wrb-hint {\n  font-size: 12px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.wrb-date-display {\n  padding: 9px 12px;\n  background: #f9fafb;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 6px;\n  color: #6b7280;\n  font-size: 15px;\n}\n\n/* Actions */\n.wrb-actions {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-submit-btn {\n  padding: 10px 22px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n}\n.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }\n.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }\n.wrb-cancel-btn {\n  padding: 10px 18px;\n  background: transparent;\n  color: #374151;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.wrb-cancel-btn:hover { background: #f3f4f6; }\n\n/* Success / Error states */\n.wrb-success {\n  text-align: center;\n  padding: 32px 24px;\n}\n.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }\n.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }\n.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }\n\n.wrb-alert {\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  font-size: 14px;\n}\n.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }\n\n/* Legal links */\n.wrb-legal-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 16px;\n  margin-top: 16px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-legal-link {\n  font-size: 12px;\n  color: #6b7280;\n  text-decoration: none;\n}\n.wrb-legal-link:hover {\n  color: #374151;\n  text-decoration: underline;\n}\n";
+export declare const WRB_CSS = "\n/* Widerrufsbutton widget \u2014 prefix: wrb- */\n.wrb-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 20px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n  text-decoration: none;\n}\n.wrb-btn:hover { background: #a93226; }\n.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }\n\n/* Overlay */\n.wrb-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n  padding: 16px;\n  animation: wrb-fade-in 0.15s ease;\n}\n@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }\n\n/* Modal box */\n.wrb-modal {\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  width: 100%;\n  max-width: 540px;\n  max-height: 90vh;\n  overflow-y: auto;\n  animation: wrb-slide-up 0.2s ease;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 15px;\n  color: #1a1a1a;\n}\n@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }\n\n.wrb-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid #e5e7eb;\n  gap: 12px;\n}\n.wrb-modal-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n  line-height: 1.3;\n}\n.wrb-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6b7280;\n  padding: 4px;\n  border-radius: 4px;\n  font-size: 20px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n.wrb-close-btn:hover { color: #111; background: #f3f4f6; }\n\n.wrb-modal-body {\n  padding: 20px 24px 24px;\n}\n\n.wrb-intro {\n  margin: 0 0 20px;\n  color: #4b5563;\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Form */\n.wrb-field {\n  margin-bottom: 16px;\n}\n.wrb-label {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 5px;\n}\n.wrb-required {\n  color: #c0392b;\n  margin-left: 2px;\n}\n.wrb-input,\n.wrb-textarea {\n  width: 100%;\n  padding: 9px 12px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  font-family: inherit;\n  color: #111;\n  background: #fff;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.wrb-input:focus,\n.wrb-textarea:focus {\n  outline: none;\n  border-color: #c0392b;\n  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);\n}\n.wrb-input.wrb-error,\n.wrb-textarea.wrb-error {\n  border-color: #c0392b;\n}\n.wrb-field-error {\n  color: #c0392b;\n  font-size: 12px;\n  margin-top: 4px;\n}\n.wrb-textarea { resize: vertical; min-height: 80px; }\n\n.wrb-hint {\n  font-size: 12px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.wrb-date-display {\n  padding: 9px 12px;\n  background: #f9fafb;\n  border: 1.5px solid #e5e7eb;\n  border-radius: 6px;\n  color: #6b7280;\n  font-size: 15px;\n}\n\n/* Actions */\n.wrb-actions {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-submit-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 22px;\n  background: #c0392b;\n  color: #fff;\n  border: none;\n  border-radius: 6px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.2s;\n}\n.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }\n.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }\n.wrb-cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 10px 18px;\n  background: transparent;\n  color: #374151;\n  border: 1.5px solid #d1d5db;\n  border-radius: 6px;\n  font-size: 15px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.wrb-cancel-btn:hover { background: #f3f4f6; }\n\n/* Success / Error states */\n.wrb-success {\n  text-align: center;\n  padding: 32px 24px;\n}\n.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }\n.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }\n.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }\n\n.wrb-alert {\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-bottom: 16px;\n  font-size: 14px;\n}\n.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }\n\n/* Legal links */\n.wrb-legal-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 16px;\n  margin-top: 16px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb;\n}\n.wrb-legal-link {\n  font-size: 12px;\n  color: #6b7280;\n  text-decoration: none;\n}\n.wrb-legal-link:hover {\n  color: #374151;\n  text-decoration: underline;\n}\n";
 /** Injects scoped CSS once into the document head */
 export declare function injectStyles(): void;

package/dist/types.d.ts

@@ -15,6 +15,8 @@ export interface WiderrufsConfig {
     buttonClass?: string;
     /** Name of the company/shop shown in the modal header */
     companyName?: string;
+    /** Sender/reply-to e-mail address for confirmation mails */
+    senderEmail?: string;
     /** Bearer token or API key for Authorization header */
     authToken?: string;
     /** Label for the cancel button (default: "Abbrechen") */
@@ -25,18 +27,21 @@ export interface WiderrufsConfig {
     legalLinks?: LegalLink[];
     /** POST action URL for the static HTML fallback form (defaults to apiUrl) */
     formAction?: string;
-    /** Redirect URL after successful submit on the static fallback page */
+    /** Redirect URL after successful form submit (static fallback / no-JS modal) */
     successUrl?: string;
+    /** Redirect URL after failed form submit (static fallback / no-JS modal, defaults to #wrb-error) */
+    errorUrl?: string;
     /** Called after a successful submit in the modal */
     onSuccess?: () => void;
     /** Called after a failed submit in the modal */
     onError?: (error: Error) => void;
 }
 export interface WiderrufsFormData {
-    name: string;
+    firstName: string;
+    lastName: string;
     email: string;
-    vertragId: string;
-    widerrufsgrund: string;
-    datum: string;
+    orderNumber: string;
+    reason: string;
+    userMessage: string;
 }
 export type SubmitStatus = 'idle' | 'loading' | 'success' | 'error';

package/dist/widerruf.html

@@ -176,6 +176,10 @@
   border-top: 1px solid #e5e7eb;
 }
 .wrb-submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 22px;
   background: #c0392b;
   color: #fff;
@@ -190,6 +194,10 @@
 .wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
 .wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .wrb-cancel-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 18px;
   background: transparent;
   color: #374151;
@@ -249,31 +257,27 @@
       <div class="wrb-modal-body">
         
         <form method="POST" action="/rest/v1/apiCancellation" novalidate>
+          
           <div class="wrb-field">
             <label class="wrb-label">
-              Name <span class="wrb-required" aria-hidden="true">*</span>
+              Vorname <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="name"
-              autocomplete="name"
-              placeholder="Vor- und Nachname"
-              required
-            >
+            <input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
+              placeholder="Max" required>
+          </div>
+          <div class="wrb-field">
+            <label class="wrb-label">
+              Nachname <span class="wrb-required" aria-hidden="true">*</span>
+            </label>
+            <input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
+              placeholder="Mustermann" required>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">
               E-Mail-Adresse <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="email"
-              name="email"
-              autocomplete="email"
-              placeholder="name@beispiel.de"
-              required
-            >
+            <input class="wrb-input" type="email" name="email" autocomplete="email"
+              placeholder="name@beispiel.de" required>
             <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
           </div>
           <div class="wrb-field">
@@ -281,34 +285,24 @@
               Bestell- / Auftrags- / Vertragsnummer
               <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="vertragId"
-              placeholder="z.B. 10045678"
-              required
-            >
+            <input class="wrb-input" type="text" name="orderNumber"
+              placeholder="z.B. 10045678" required>
             <p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">Widerrufsgrund</label>
-            <textarea
-              class="wrb-textarea"
-              name="widerrufsgrund"
-              placeholder="Optional"
-              rows="3"
-            ></textarea>
+            <textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
             <p class="wrb-hint">
               Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
             </p>
           </div>
           <div class="wrb-field">
-            <label class="wrb-label">Datum der Widerrufserklärung</label>
-            <div class="wrb-date-display">08.06.2026</div>
-            <input type="hidden" name="datum" value="08.06.2026">
+            <label class="wrb-label">Nachricht</label>
+            <textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
           </div>
           <input type="hidden" name="action" value="widerruf_submit">
           
+          
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
               Absenden