@netlib/widerrufsbutton 1.0.6 → 1.1.0

package/dist/index.es.js

@@ -1,79 +1,90 @@
-import { jsx as r, jsxs as s, Fragment as C } from "react/jsx-runtime";
-import { useState as u, useRef as W, useEffect as E } from "react";
-import { createPortal as A } from "react-dom";
-async function j(e, a) {
+import { jsx as r, jsxs as d, Fragment as j } from "react/jsx-runtime";
+import { useState as p, useRef as T, useEffect as I } from "react";
+import { createPortal as q } from "react-dom";
+async function O(e, t) {
   const n = {
     "Content-Type": "application/json"
   };
   e.authToken && (n.Authorization = `Bearer ${e.authToken}`);
-  const d = {
+  const b = {
     action: e.action,
     payload: {
-      ...a,
+      ...t,
       datum: (/* @__PURE__ */ new Date()).toISOString()
     }
   }, i = await fetch(e.apiUrl, {
     method: "PATCH",
     headers: n,
-    body: JSON.stringify(d)
+    body: JSON.stringify(b)
   });
+  let o;
+  try {
+    o = await i.json();
+  } catch {
+    if (!i.ok) throw new Error(`Server antwortete mit Status ${i.status}`);
+    return;
+  }
+  if (o !== null && typeof o == "object" && "ok" in o && o.ok === !1) {
+    const l = o.message;
+    throw new Error(typeof l == "string" && l ? l : `Server antwortete mit Status ${i.status}`);
+  }
   if (!i.ok)
     throw new Error(`Server antwortete mit Status ${i.status}`);
 }
-const z = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
+const W = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
   day: "2-digit",
   month: "2-digit",
   year: "numeric"
-}), T = {
+}), D = {
   name: "",
   email: "",
   vertragId: "",
   widerrufsgrund: "",
-  datum: z
+  datum: W
 };
-function x(e) {
-  const a = {};
-  return e.name.trim() || (a.name = "Bitte geben Sie Ihren Namen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (a.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : a.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.vertragId.trim() || (a.vertragId = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), a;
-}
-function O({ config: e, onClose: a }) {
-  const [n, d] = u(T), [i, g] = u({}), [c, y] = u({}), [m, h] = u("idle"), [v, k] = u(""), N = W(null);
-  E(() => {
-    var l;
-    (l = N.current) == null || l.focus();
-    const t = (o) => o.key === "Escape" && a();
-    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [a]);
-  function f(t, l) {
-    const o = { ...n, [t]: l };
-    if (d(o), c[t]) {
-      const b = x(o);
-      g((B) => ({ ...B, [t]: b[t] }));
+function N(e) {
+  const t = {};
+  return e.name.trim() || (t.name = "Bitte geben Sie Ihren Namen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (t.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : t.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.vertragId.trim() || (t.vertragId = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), t;
+}
+function F({ config: e, onClose: t }) {
+  const [n, b] = p(D), [i, o] = p({}), [l, m] = p({}), [h, v] = p("idle"), [E, S] = p(""), $ = T(null);
+  I(() => {
+    var c;
+    (c = $.current) == null || c.focus();
+    const a = (s) => s.key === "Escape" && t();
+    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+  }, [t]);
+  function g(a, c) {
+    const s = { ...n, [a]: c };
+    if (b(s), l[a]) {
+      const f = N(s);
+      o((x) => ({ ...x, [a]: f[a] }));
     }
   }
-  function w(t) {
-    y((o) => ({ ...o, [t]: !0 }));
-    const l = x(n);
-    g((o) => ({ ...o, [t]: l[t] }));
+  function k(a) {
+    m((s) => ({ ...s, [a]: !0 }));
+    const c = N(n);
+    o((s) => ({ ...s, [a]: c[a] }));
   }
-  async function S(t) {
-    t.preventDefault();
-    const l = Object.fromEntries(
-      Object.keys(n).map((b) => [b, !0])
+  async function C(a) {
+    var f, x;
+    a.preventDefault();
+    const c = Object.fromEntries(
+      Object.keys(n).map((y) => [y, !0])
     );
-    y(l);
-    const o = x(n);
-    if (g(o), !(Object.keys(o).length > 0)) {
-      h("loading"), k("");
+    m(c);
+    const s = N(n);
+    if (o(s), !(Object.keys(s).length > 0)) {
+      v("loading"), S("");
       try {
-        await j(e, n), h("success");
-      } catch (b) {
-        k(
-          b instanceof Error ? b.message : "Ein unbekannter Fehler ist aufgetreten."
-        ), h("error");
+        await O(e, n), v("success"), (f = e.onSuccess) == null || f.call(e);
+      } catch (y) {
+        const z = y instanceof Error ? y : new Error("Ein unbekannter Fehler ist aufgetreten.");
+        S(z.message), v("error"), (x = e.onError) == null || x.call(e, z);
       }
     }
   }
-  const I = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
+  const L = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
   return /* @__PURE__ */ r(
     "div",
     {
@@ -81,97 +92,100 @@ function O({ config: e, onClose: a }) {
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "wrb-title",
-      onClick: (t) => t.target === t.currentTarget && a(),
-      children: /* @__PURE__ */ s("div", { className: "wrb-modal", children: [
-        /* @__PURE__ */ s("div", { className: "wrb-modal-header", children: [
-          /* @__PURE__ */ r("h2", { className: "wrb-modal-title", id: "wrb-title", children: I }),
+      onClick: (a) => a.target === a.currentTarget && t(),
+      children: /* @__PURE__ */ d("div", { className: "wrb-modal", children: [
+        /* @__PURE__ */ d("div", { className: "wrb-modal-header", children: [
+          /* @__PURE__ */ r("h2", { className: "wrb-modal-title", id: "wrb-title", children: L }),
           /* @__PURE__ */ r(
             "button",
             {
               className: "wrb-close-btn",
-              onClick: a,
+              onClick: t,
               "aria-label": "Schließen",
               type: "button",
               children: "✕"
             }
           )
         ] }),
-        m === "success" ? /* @__PURE__ */ s("div", { className: "wrb-success", children: [
-          /* @__PURE__ */ r("span", { className: "wrb-success-icon", children: "✓" }),
-          /* @__PURE__ */ r("h3", { children: "Widerruf eingegangen" }),
-          /* @__PURE__ */ s("p", { children: [
-            "Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
-            /* @__PURE__ */ r("strong", { children: n.email }),
-            "."
-          ] })
-        ] }) : /* @__PURE__ */ s("div", { className: "wrb-modal-body", children: [
+        h === "success" ? /* @__PURE__ */ d("div", { className: "wrb-modal-body", children: [
+          /* @__PURE__ */ d("div", { className: "wrb-success", children: [
+            /* @__PURE__ */ r("span", { className: "wrb-success-icon", children: "✓" }),
+            /* @__PURE__ */ r("h3", { children: "Widerruf eingegangen" }),
+            /* @__PURE__ */ d("p", { children: [
+              "Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
+              /* @__PURE__ */ r("strong", { children: n.email }),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ r(B, { links: e.legalLinks })
+        ] }) : /* @__PURE__ */ d("div", { className: "wrb-modal-body", children: [
           e.introText && /* @__PURE__ */ r("p", { className: "wrb-intro", children: e.introText }),
-          m === "error" && v && /* @__PURE__ */ r("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: v }),
-          /* @__PURE__ */ s("form", { onSubmit: S, noValidate: !0, children: [
+          h === "error" && E && /* @__PURE__ */ r("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
+          /* @__PURE__ */ d("form", { onSubmit: C, noValidate: !0, children: [
             /* @__PURE__ */ r(
-              p,
+              w,
               {
                 label: "Name",
                 required: !0,
-                error: c.name ? i.name : void 0,
+                error: l.name ? i.name : void 0,
                 children: /* @__PURE__ */ r(
                   "input",
                   {
-                    ref: N,
-                    className: `wrb-input${c.name && i.name ? " wrb-error" : ""}`,
+                    ref: $,
+                    className: `wrb-input${l.name && i.name ? " wrb-error" : ""}`,
                     type: "text",
                     autoComplete: "name",
                     value: n.name,
-                    onChange: (t) => f("name", t.target.value),
-                    onBlur: () => w("name"),
+                    onChange: (a) => g("name", a.target.value),
+                    onBlur: () => k("name"),
                     placeholder: "Vor- und Nachname"
                   }
                 )
               }
             ),
             /* @__PURE__ */ r(
-              p,
+              w,
               {
                 label: "E-Mail-Adresse",
                 required: !0,
                 hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
-                error: c.email ? i.email : void 0,
+                error: l.email ? i.email : void 0,
                 children: /* @__PURE__ */ r(
                   "input",
                   {
-                    className: `wrb-input${c.email && i.email ? " wrb-error" : ""}`,
+                    className: `wrb-input${l.email && i.email ? " wrb-error" : ""}`,
                     type: "email",
                     autoComplete: "email",
                     value: n.email,
-                    onChange: (t) => f("email", t.target.value),
-                    onBlur: () => w("email"),
+                    onChange: (a) => g("email", a.target.value),
+                    onBlur: () => k("email"),
                     placeholder: "name@beispiel.de"
                   }
                 )
               }
             ),
             /* @__PURE__ */ r(
-              p,
+              w,
               {
                 label: "Bestell- / Auftrags- / Vertragsnummer",
                 required: !0,
                 hint: "Zu finden in Ihrer Bestellbestätigung.",
-                error: c.vertragId ? i.vertragId : void 0,
+                error: l.vertragId ? i.vertragId : void 0,
                 children: /* @__PURE__ */ r(
                   "input",
                   {
-                    className: `wrb-input${c.vertragId && i.vertragId ? " wrb-error" : ""}`,
+                    className: `wrb-input${l.vertragId && i.vertragId ? " wrb-error" : ""}`,
                     type: "text",
                     value: n.vertragId,
-                    onChange: (t) => f("vertragId", t.target.value),
-                    onBlur: () => w("vertragId"),
+                    onChange: (a) => g("vertragId", a.target.value),
+                    onBlur: () => k("vertragId"),
                     placeholder: "z.B. 10045678"
                   }
                 )
               }
             ),
             /* @__PURE__ */ r(
-              p,
+              w,
               {
                 label: "Widerrufsgrund",
                 hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
@@ -180,21 +194,21 @@ function O({ config: e, onClose: a }) {
                   {
                     className: "wrb-textarea",
                     value: n.widerrufsgrund,
-                    onChange: (t) => f("widerrufsgrund", t.target.value),
+                    onChange: (a) => g("widerrufsgrund", a.target.value),
                     placeholder: "Optional",
                     rows: 3
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(p, { label: "Datum der Widerrufserklärung", children: /* @__PURE__ */ r("div", { className: "wrb-date-display", children: z }) }),
-            /* @__PURE__ */ s("div", { className: "wrb-actions", children: [
+            /* @__PURE__ */ r(w, { label: "Datum der Widerrufserklärung", children: /* @__PURE__ */ r("div", { className: "wrb-date-display", children: W }) }),
+            /* @__PURE__ */ d("div", { className: "wrb-actions", children: [
               /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   className: "wrb-cancel-btn",
-                  onClick: a,
+                  onClick: t,
                   children: e.cancelLabel ?? "Abbrechen"
                 }
               ),
@@ -203,32 +217,43 @@ function O({ config: e, onClose: a }) {
                 {
                   type: "submit",
                   className: "wrb-submit-btn",
-                  disabled: m === "loading",
-                  children: m === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
+                  disabled: h === "loading",
+                  children: h === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
                 }
               )
             ] })
-          ] })
+          ] }),
+          /* @__PURE__ */ r(B, { links: e.legalLinks })
         ] })
       ] })
     }
   );
 }
-function p({ label: e, required: a, hint: n, error: d, children: i }) {
-  return /* @__PURE__ */ s("div", { className: "wrb-field", children: [
-    /* @__PURE__ */ s("label", { className: "wrb-label", children: [
+function w({ label: e, required: t, hint: n, error: b, children: i }) {
+  return /* @__PURE__ */ d("div", { className: "wrb-field", children: [
+    /* @__PURE__ */ d("label", { className: "wrb-label", children: [
       e,
-      a && /* @__PURE__ */ r("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
+      t && /* @__PURE__ */ r("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
     ] }),
     i,
-    n && !d && /* @__PURE__ */ r("p", { className: "wrb-hint", children: n }),
-    d && /* @__PURE__ */ r("p", { className: "wrb-field-error", role: "alert", children: d })
+    n && !b && /* @__PURE__ */ r("p", { className: "wrb-hint", children: n }),
+    b && /* @__PURE__ */ r("p", { className: "wrb-field-error", role: "alert", children: b })
   ] });
 }
-function $() {
-  const e = "wrb-styles";
-  if (document.getElementById(e)) return;
-  const a = `
+function B({ links: e }) {
+  return e != null && e.length ? /* @__PURE__ */ r("div", { className: "wrb-legal-links", children: e.map((t) => /* @__PURE__ */ r(
+    "a",
+    {
+      href: t.href,
+      className: "wrb-legal-link",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: t.name
+    },
+    t.href
+  )) }) : null;
+}
+const A = `
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -430,14 +455,37 @@ function $() {
   font-size: 14px;
 }
 .wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
-`, n = document.createElement("style");
-  n.id = e, n.textContent = a, document.head.appendChild(n);
-}
-function L({ config: e }) {
-  const [a, n] = u(!1);
-  return E(() => {
-    $();
-  }, []), /* @__PURE__ */ s(C, { children: [
+
+/* Legal links */
+.wrb-legal-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.wrb-legal-link {
+  font-size: 12px;
+  color: #6b7280;
+  text-decoration: none;
+}
+.wrb-legal-link:hover {
+  color: #374151;
+  text-decoration: underline;
+}
+`;
+function M() {
+  const e = "wrb-styles";
+  if (document.getElementById(e)) return;
+  const t = document.createElement("style");
+  t.id = e, t.textContent = A, document.head.appendChild(t);
+}
+function P({ config: e }) {
+  const [t, n] = p(!1);
+  return I(() => {
+    M();
+  }, []), /* @__PURE__ */ d(j, { children: [
     /* @__PURE__ */ r(
       "button",
       {
@@ -447,13 +495,131 @@ function L({ config: e }) {
         children: e.buttonLabel ?? "Vertrag widerrufen"
       }
     ),
-    a && A(
-      /* @__PURE__ */ r(O, { config: e, onClose: () => n(!1) }),
+    t && q(
+      /* @__PURE__ */ r(F, { config: e, onClose: () => n(!1) }),
       document.body
     )
   ] });
 }
+function u(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function R(e) {
+  var l;
+  const t = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }), n = e.companyName ? `Widerruf – ${u(e.companyName)}` : "Widerrufsformular", b = u(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = e.introText ? `<p class="wrb-intro">${u(e.introText)}</p>` : "", o = (l = e.legalLinks) != null && l.length ? `
+      <div class="wrb-legal-links">
+        ${e.legalLinks.map((m) => `<a href="${u(m.href)}" class="wrb-legal-link" rel="noopener noreferrer">${u(m.name)}</a>`).join(`
+        `)}
+      </div>` : "";
+  return `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${n}</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; background: #f9fafb; }
+    .wrb-page {
+      min-height: 100vh;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 40px 16px;
+    }
+    .wrb-page .wrb-modal { max-height: none; }
+    .wrb-page .wrb-modal-title { font-size: 20px; }
+    ${A}
+  </style>
+</head>
+<body>
+  <div class="wrb-page">
+    <div class="wrb-modal">
+      <div class="wrb-modal-header">
+        <h1 class="wrb-modal-title">${n}</h1>
+      </div>
+      <div class="wrb-modal-body">
+        ${i}
+        <form method="POST" action="${b}" novalidate>
+          <div class="wrb-field">
+            <label class="wrb-label">
+              Name <span class="wrb-required" aria-hidden="true">*</span>
+            </label>
+            <input
+              class="wrb-input"
+              type="text"
+              name="name"
+              autocomplete="name"
+              placeholder="Vor- und Nachname"
+              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
+            >
+            <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
+          </div>
+          <div class="wrb-field">
+            <label class="wrb-label">
+              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
+            >
+            <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>
+            <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">${t}</div>
+            <input type="hidden" name="datum" value="${t}">
+          </div>
+          <input type="hidden" name="action" value="${u(e.action)}">
+          ${e.successUrl ? `<input type="hidden" name="successUrl" value="${u(e.successUrl)}">` : ""}
+          <div class="wrb-actions">
+            <button type="submit" class="wrb-submit-btn">
+              ${u(e.submitLabel ?? "Absenden")}
+            </button>
+          </div>
+        </form>
+        ${o}
+      </div>
+    </div>
+  </div>
+</body>
+</html>`;
+}
 export {
-  O as WiderrufsModal,
-  L as WiderrufsWidget
+  F as WiderrufsModal,
+  P as WiderrufsWidget,
+  R as generateFallbackHtml
 };

package/dist/styles.d.ts

@@ -1,2 +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";
 /** Injects scoped CSS once into the document head */
 export declare function injectStyles(): void;

package/dist/types.d.ts

@@ -1,3 +1,7 @@
+export interface LegalLink {
+    name: string;
+    href: string;
+}
 export interface WiderrufsConfig {
     /** PATCH endpoint, e.g. /rest/v1/systemLog */
     apiUrl: string;
@@ -15,8 +19,18 @@ export interface WiderrufsConfig {
     authToken?: string;
     /** Label for the cancel button (default: "Abbrechen") */
     cancelLabel?: string;
-    /** Label for the submit button (default: "Widerruf bestätigen") */
+    /** Label for the submit button (default: "Absenden") */
     submitLabel?: string;
+    /** Legal navigation links shown in modal footer and static fallback page */
+    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 */
+    successUrl?: 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;