@trustcaptcha/trustcaptcha-frontend - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/cjs/frontendlibrary.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-f1aac806.js');
+const index = require('./index-c069d14b.js');
 
@@ -21,3 +21,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["trustcaptcha-component.cjs",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"value":[1537],"captchaStatus":[32]}]]]], options);
+  return index.bootstrapLazy([["trustcaptcha-component.cjs",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"theme":[1],"autostart":[1],"value":[1537],"captchaStatus":[32],"translation":[32],"currentTheme":[32],"reset":[64]},null,{"language":["watchLanguageUpdate"],"theme":["watchThemeUpdate"]}]]]], options);
 });
@@ -24,0 +24,0 @@

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const index = require('./index-f1aac806.js');
+const index = require('./index-c069d14b.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["trustcaptcha-component.cjs",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"value":[1537],"captchaStatus":[32]}]]]], options);
+  return index.bootstrapLazy([["trustcaptcha-component.cjs",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"theme":[1],"autostart":[1],"value":[1537],"captchaStatus":[32],"translation":[32],"currentTheme":[32],"reset":[64]},null,{"language":["watchLanguageUpdate"],"theme":["watchThemeUpdate"]}]]]], options);
 };
@@ -12,0 +12,0 @@

dist/cjs/trustcaptcha-component.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-f1aac806.js');
+const index = require('./index-c069d14b.js');
 
@@ -138,121 +138,121 @@ class ApiService {
       window: {
-        closed: window.closed,
+        closed: this.safeGet(() => window.closed),
         connection: {
           // @ts-ignore
-          downlink: window.navigator.connection.downlink,
+          downlink: this.safeGet(() => window.navigator.connection.downlink),
           // @ts-ignore
-          effectiveType: window.navigator.connection.effectiveType,
+          effectiveType: this.safeGet(() => window.navigator.connection.effectiveType),
           // @ts-ignore
-          rtt: window.navigator.connection.rtt,
+          rtt: this.safeGet(() => window.navigator.connection.rtt),
           // @ts-ignore
-          saveData: window.navigator.connection.saveData
+          saveData: this.safeGet(() => window.navigator.connection.saveData)
         },
-        devicePixelRatio: window.devicePixelRatio,
+        devicePixelRatio: this.safeGet(() => window.devicePixelRatio),
         history: {
-          length: window.history.length
+          length: this.safeGet(() => window.history.length)
         },
-        innerHeight: window.innerHeight,
-        innerWidth: window.innerWidth,
-        length: window.length,
+        innerHeight: this.safeGet(() => window.innerHeight),
+        innerWidth: this.safeGet(() => window.innerWidth),
+        length: this.safeGet(() => window.length),
         location: {
-          hash: window.location.hash,
-          hostname: window.location.hostname,
-          href: window.location.href,
-          origin: window.location.origin,
-          pathname: window.location.pathname,
-          port: window.location.port,
-          protocol: window.location.protocol,
-          search: window.location.search
+          hash: this.safeGet(() => window.location.hash),
+          hostname: this.safeGet(() => window.location.hostname),
+          href: this.safeGet(() => window.location.href),
+          origin: this.safeGet(() => window.location.origin),
+          pathname: this.safeGet(() => window.location.pathname),
+          port: this.safeGet(() => window.location.port),
+          protocol: this.safeGet(() => window.location.protocol),
+          search: this.safeGet(() => window.location.search)
         },
         locationbar: {
-          visible: window.locationbar.visible
+          visible: this.safeGet(() => window.locationbar.visible)
         },
         menubar: {
-          visible: window.menubar.visible
+          visible: this.safeGet(() => window.menubar.visible)
         },
         navigator: {
-          appCodeName: window.navigator.appCodeName,
-          appName: window.navigator.appName,
-          appVersion: window.navigator.appVersion,
-          cookieEnabled: window.navigator.cookieEnabled,
+          appCodeName: this.safeGet(() => window.navigator.appCodeName),
+          appName: this.safeGet(() => window.navigator.appName),
+          appVersion: this.safeGet(() => window.navigator.appVersion),
+          cookieEnabled: this.safeGet(() => window.navigator.cookieEnabled),
           // @ts-ignore
-          deviceMemory: window.navigator.deviceMemory,
-          doNotTrack: window.navigator.doNotTrack,
-          hardwareConcurrency: window.navigator.hardwareConcurrency,
-          javaEnabled: window.navigator.javaEnabled(),
-          language: window.navigator.language,
-          languages: window.navigator.languages,
-          maxTouchPoints: window.navigator.maxTouchPoints,
-          onLine: window.navigator.onLine,
-          pdfViewerEnabled: window.navigator.pdfViewerEnabled,
-          platform: window.navigator.platform,
-          product: window.navigator.product,
-          productSub: window.navigator.productSub,
-          userAgent: window.navigator.userAgent,
-          vendor: window.navigator.vendor,
-          vendorSub: window.navigator.vendorSub
+          deviceMemory: this.safeGet(() => window.navigator.deviceMemory),
+          doNotTrack: this.safeGet(() => window.navigator.doNotTrack),
+          hardwareConcurrency: this.safeGet(() => window.navigator.hardwareConcurrency),
+          javaEnabled: this.safeGet(() => window.navigator.javaEnabled()),
+          language: this.safeGet(() => window.navigator.language),
+          languages: this.safeGet(() => window.navigator.languages),
+          maxTouchPoints: this.safeGet(() => window.navigator.maxTouchPoints),
+          onLine: this.safeGet(() => window.navigator.onLine),
+          pdfViewerEnabled: this.safeGet(() => window.navigator.pdfViewerEnabled),
+          platform: this.safeGet(() => window.navigator.platform),
+          product: this.safeGet(() => window.navigator.product),
+          productSub: this.safeGet(() => window.navigator.productSub),
+          userAgent: this.safeGet(() => window.navigator.userAgent),
+          vendor: this.safeGet(() => window.navigator.vendor),
+          vendorSub: this.safeGet(() => window.navigator.vendorSub)
         },
-        origin: window.origin,
+        origin: this.safeGet(() => window.origin),
         performance: {
           memory: {
             // @ts-ignore
-            jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
+            jsHeapSizeLimit: this.safeGet(() => window.performance.memory.jsHeapSizeLimit),
             // @ts-ignore
-            totalJSHeapSize: window.performance.memory.totalJSHeapSize,
+            totalJSHeapSize: this.safeGet(() => window.performance.memory.totalJSHeapSize),
             // @ts-ignore
-            usedJSHeapSize: window.performance.memory.usedJSHeapSize
+            usedJSHeapSize: this.safeGet(() => window.performance.memory.usedJSHeapSize)
           },
           navigation: {
-            type: window.performance.navigation.type,
-            redirectCount: window.performance.navigation.redirectCount
+            type: this.safeGet(() => window.performance.navigation.type),
+            redirectCount: this.safeGet(() => window.performance.navigation.redirectCount)
           },
-          now: window.performance.now(),
-          timeOrigin: window.performance.timeOrigin,
+          now: this.safeGet(() => window.performance.now()),
+          timeOrigin: this.safeGet(() => window.performance.timeOrigin),
           timing: {
-            navigationStart: window.performance.timing.navigationStart,
-            unloadEventStart: window.performance.timing.unloadEventStart,
-            unloadEventEnd: window.performance.timing.unloadEventEnd,
-            redirectStart: window.performance.timing.redirectStart,
-            redirectEnd: window.performance.timing.redirectEnd,
-            fetchStart: window.performance.timing.fetchStart,
-            domainLookupStart: window.performance.timing.domainLookupStart,
-            domainLookupEnd: window.performance.timing.domainLookupEnd,
-            connectStart: window.performance.timing.connectStart,
-            connectEnd: window.performance.timing.connectEnd,
-            secureConnectionStart: window.performance.timing.secureConnectionStart,
-            requestStart: window.performance.timing.requestStart,
-            responseStart: window.performance.timing.responseStart,
-            responseEnd: window.performance.timing.responseEnd,
-            domLoading: window.performance.timing.domLoading,
-            domInteractive: window.performance.timing.domInteractive,
-            domContentLoadedEventStart: window.performance.timing.domContentLoadedEventStart,
-            domContentLoadedEventEnd: window.performance.timing.domContentLoadedEventEnd,
-            domComplete: window.performance.timing.domComplete,
-            loadEventStart: window.performance.timing.loadEventStart,
-            loadEventEnd: window.performance.timing.loadEventEnd
+            navigationStart: this.safeGet(() => window.performance.timing.navigationStart),
+            unloadEventStart: this.safeGet(() => window.performance.timing.unloadEventStart),
+            unloadEventEnd: this.safeGet(() => window.performance.timing.unloadEventEnd),
+            redirectStart: this.safeGet(() => window.performance.timing.redirectStart),
+            redirectEnd: this.safeGet(() => window.performance.timing.redirectEnd),
+            fetchStart: this.safeGet(() => window.performance.timing.fetchStart),
+            domainLookupStart: this.safeGet(() => window.performance.timing.domainLookupStart),
+            domainLookupEnd: this.safeGet(() => window.performance.timing.domainLookupEnd),
+            connectStart: this.safeGet(() => window.performance.timing.connectStart),
+            connectEnd: this.safeGet(() => window.performance.timing.connectEnd),
+            secureConnectionStart: this.safeGet(() => window.performance.timing.secureConnectionStart),
+            requestStart: this.safeGet(() => window.performance.timing.requestStart),
+            responseStart: this.safeGet(() => window.performance.timing.responseStart),
+            responseEnd: this.safeGet(() => window.performance.timing.responseEnd),
+            domLoading: this.safeGet(() => window.performance.timing.domLoading),
+            domInteractive: this.safeGet(() => window.performance.timing.domInteractive),
+            domContentLoadedEventStart: this.safeGet(() => window.performance.timing.domContentLoadedEventStart),
+            domContentLoadedEventEnd: this.safeGet(() => window.performance.timing.domContentLoadedEventEnd),
+            domComplete: this.safeGet(() => window.performance.timing.domComplete),
+            loadEventStart: this.safeGet(() => window.performance.timing.loadEventStart),
+            loadEventEnd: this.safeGet(() => window.performance.timing.loadEventEnd)
           }
         },
-        outerHeight: window.outerHeight,
-        outerWidth: window.outerWidth,
+        outerHeight: this.safeGet(() => window.outerHeight),
+        outerWidth: this.safeGet(() => window.outerWidth),
         personalbar: {
-          visible: window.personalbar.visible
+          visible: this.safeGet(() => window.personalbar.visible)
         },
         screen: {
-          availableHeight: window.screen.availHeight,
-          availableWidth: window.screen.availWidth,
-          colorDepth: window.screen.colorDepth,
-          height: window.screen.height,
+          availableHeight: this.safeGet(() => window.screen.availHeight),
+          availableWidth: this.safeGet(() => window.screen.availWidth),
+          colorDepth: this.safeGet(() => window.screen.colorDepth),
+          height: this.safeGet(() => window.screen.height),
           orientation: {
-            angle: window.screen.orientation.angle,
-            type: window.screen.orientation.type,
+            angle: this.safeGet(() => window.screen.orientation.angle),
+            type: this.safeGet(() => window.screen.orientation.type)
           },
-          pixelDepth: window.screen.pixelDepth,
-          width: window.screen.width,
+          pixelDepth: this.safeGet(() => window.screen.pixelDepth),
+          width: this.safeGet(() => window.screen.width)
         },
-        screenLeft: window.screenLeft,
-        screenTop: window.screenTop,
-        screenX: window.screenX,
-        screenY: window.screenY,
+        screenLeft: this.safeGet(() => window.screenLeft),
+        screenTop: this.safeGet(() => window.screenTop),
+        screenX: this.safeGet(() => window.screenX),
+        screenY: this.safeGet(() => window.screenY),
         scrollbars: {
-          visible: window.scrollbars.visible
+          visible: this.safeGet(() => window.scrollbars.visible)
         }
@@ -294,2 +294,10 @@ },
   }
+  static safeGet(fn) {
+    try {
+      return fn();
+    }
+    catch (_a) {
+      return null;
+    }
+  }
 }
@@ -308,4 +316,4 @@
 class ErrorModel {
-  constructor(code, message) {
-    this.code = code;
+  constructor(errorCode, message) {
+    this.errorCode = ErrorCode[errorCode];
     this.message = message;
@@ -325,2 +333,5 @@ }
           break;
+        case 201:
+          verificationResponse.json().then((response) => successCallback(response.verificationToken));
+          break;
         case 403:
@@ -1117,9 +1128,14 @@ failureCallback(new ErrorModel(ErrorCode.CAPTCHA_NOT_ACCESSIBLE, `The captcha is no accessible from '${location.hostname}'.`));
   }
+  reset() {
+    this.customEvents = [];
+    this.active = true;
+  }
 }
 
 class CaptchaBox {
-  constructor(sitekey, trustcaptchaApi, htmlElement) {
+  constructor(sitekey, trustcaptchaApi, htmlElement, autostart) {
     this.statusChangedEvent = new EventEmitter();
     this.captchaFinishEvent = new EventEmitter();
     this.status = Status.START;
+    this.autostart = true;
     this.boxCreationTimestamp = new Date();
@@ -1129,10 +1145,14 @@ this.eventTracker = new EventTracker();
     this.trustcaptchaApi = trustcaptchaApi;
-    this.formElement = htmlElement.closest('form');
+    this.htmlElement = htmlElement;
+    this.autostart = autostart;
   }
-  init() {
+  setup() {
+    this.formElement = this.htmlElement.closest('form');
     if (this.formElement != null) {
       this.honeypotField = this.createHoneypotField();
+      this.verificationTokenField = this.createVerificationTokenField();
       this.registerElementFocusListeners();
     }
     else {
+      console.log('failed');
       this.switchStatus(Status.FAILED);
@@ -1151,9 +1171,25 @@ this.captchaFinishEvent.emit("captchaFailed", new ErrorModel(ErrorCode.NO_FORM_FOUND, "No parent form element found."));
   }
+  createVerificationTokenField() {
+    const verificationTokenField = document.createElement('input');
+    verificationTokenField.setAttribute('type', 'text');
+    verificationTokenField.setAttribute('name', 'tc-verification-token');
+    verificationTokenField.setAttribute('style', 'display:none');
+    verificationTokenField.setAttribute('tabindex', '-1');
+    return verificationTokenField;
+  }
   registerElementFocusListeners() {
-    const inputElements = Array.from(this.formElement.getElementsByTagName("input"));
-    const selectElements = Array.from(this.formElement.getElementsByTagName("select"));
-    const textAreaElements = Array.from(this.formElement.getElementsByTagName("textarea"));
-    const allElements = inputElements.concat(selectElements).concat(textAreaElements);
-    for (let inputElement of allElements) {
-      inputElement.addEventListener('focus', () => this.startVerification());
+    this.formElement.addEventListener('keydown', (event) => {
+      if (event instanceof KeyboardEvent) {
+        this.autostartVerification();
+      }
+    });
+    this.formElement.querySelectorAll('input, select, textarea').forEach(element => {
+      element.addEventListener('focusin', () => {
+        this.autostartVerification();
+      });
+    });
+  }
+  autostartVerification() {
+    if (this.autostart) {
+      this.startVerification();
     }
@@ -1178,2 +1214,4 @@ }
     this.captchaFinishEvent.emit("captchaSolved", base64String);
+    this.verificationTokenField.setAttribute("value", base64String);
+    this.formElement.appendChild(this.verificationTokenField);
     this.switchStatus(Status.DONE);
@@ -1185,2 +1223,9 @@ }
   }
+  reset() {
+    this.honeypotField.removeAttribute("value");
+    this.verificationTokenField.removeAttribute("value");
+    this.formElement.removeChild(this.verificationTokenField);
+    this.eventTracker.reset();
+    this.switchStatus(Status.START);
+  }
 }
@@ -1196,7 +1241,6 @@
       verificationInProgress: "Verifizierung läuft ...",
-      verifiedAsHuman: "Als Mensch bestätigt"
+      verifiedAsHuman: "Verifizierung abgeschlossen"
     },
     footer: {
-      terms: "Nutzungsbedingungen",
-      privacyPolicy: "Datenschutzerklärung"
+      endPrivacyPolicy: "Datenschutz"
     }
@@ -1208,7 +1252,6 @@ },
       verificationInProgress: "Verification in progress ...",
-      verifiedAsHuman: "Verified as human"
+      verifiedAsHuman: "Verification completed"
     },
     footer: {
-      terms: "Terms of use",
-      privacyPolicy: "Privacy policy"
+      endPrivacyPolicy: "Privacy"
     }
@@ -1218,3 +1261,3 @@ }
 
-const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
+const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],[type=reset],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border-2{border-width:2px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172/var(--tw-border-opacity))}.border-green-700{--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-gray-700{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition{transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.iconDark{fill:#e2e8f0}.iconLight{fill:#1e293b}.hover\\:scale-y-110:hover{--tw-scale-y:1.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))}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
 
@@ -1232,12 +1275,14 @@ const TrustcaptchaComponent = class {
     this.trustcaptchaApi = 'https://api.captcha.trustcaptcha.com';
-    this.language = 'de';
+    this.language = 'en';
+    this.theme = 'light';
+    this.autostart = 'active';
     this.value = undefined;
     this.captchaStatus = Status.START;
+    this.translation = undefined;
+    this.currentTheme = 'light';
   }
   componentWillLoad() {
-    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement);
+    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement, this.isAutostartActive());
     this.captchaBox.statusChangedEvent.on('statusChanged', value => { this.captchaStatus = value; });
     this.captchaBox.captchaFinishEvent.on("captchaSolved", verificationToken => {
-      this.value = verificationToken;
-      this.inputElement.value = verificationToken;
       this.captchaSolved.emit(verificationToken);
@@ -1247,18 +1292,57 @@ this.valueChanged.emit(verificationToken);
     this.captchaBox.captchaFinishEvent.on('captchaFailed', reason => {
+      console.log(reason);
       this.failureText = reason.message;
       this.captchaFailed.emit(reason);
     });
-    this.captchaBox.init();
+    this.captchaBox.setup();
     this.translation = getTranslation(this.language);
+    this.watchThemeUpdate();
   }
+  isAutostartActive() {
+    switch (this.autostart) {
+      case "active":
+      default:
+        return true;
+      case "disabled":
+        return false;
+    }
+  }
+  watchLanguageUpdate() {
+    this.translation = getTranslation(this.language);
+  }
+  watchThemeUpdate() {
+    if (this.theme !== 'media') {
+      this.currentTheme = this.theme;
+      return;
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      this.currentTheme = 'dark';
+    }
+    else {
+      this.currentTheme = 'light';
+    }
+  }
+  async reset() {
+    this.captchaBox.reset();
+  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { 'px-2 py-2 border rounded-md bg-gray-50': true, 'border-green-500': this.captchaBox.status === Status.DONE, 'border-red-500': this.captchaBox.status === Status.FAILED } }, index.h("div", { class: 'flex space-x-2' }, index.h("div", { class: "flex justify-center items-center w-14 h-14" }, index.h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
-      index.h("div", null, index.h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, index.h("path", { d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.captchaStatus == Status.RUNNING &&
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'px-2 py-2 border-2 rounded-md': true,
+        'bg-gray-50 border-gray-100': this.currentTheme == 'light' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-gray-800 border-gray-900': this.currentTheme == 'dark' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-green-50 border-green-300': this.currentTheme == 'light' && this.captchaBox.status === Status.DONE,
+        'bg-green-800 border-green-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.DONE,
+        'bg-red-50 border-red-300': this.currentTheme == 'light' && this.captchaBox.status === Status.FAILED,
+        'bg-red-800 border-red-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.FAILED
+      } }, index.h("div", { class: 'flex space-x-2' }, index.h("div", { class: "flex justify-center items-center w-14 h-14" }, index.h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
+      index.h("div", null, this.currentTheme == 'light' &&
+        index.h("div", null, index.h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, index.h("path", { class: "iconLight", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.currentTheme == 'dark' &&
+        index.h("div", null, index.h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, index.h("path", { class: "iconDark", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0C162.9,43.6,114.2,62,50.2,62.1c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" })))), this.captchaStatus == Status.RUNNING &&
       index.h("div", null, index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), this.captchaStatus == Status.DONE &&
       index.h("div", { class: 'text-green-500' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "48", height: "48" }, index.h("path", { "fill-rule": "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", "clip-rule": "evenodd" }))), this.captchaStatus == Status.FAILED &&
       index.h("div", null, index.h("svg", { height: "48", version: "1.1", width: "48", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { transform: "translate(0 -1028.4)" }, index.h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#c0392b", transform: "translate(0 1029.4)" }), index.h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#e74c3c", transform: "translate(0 1028.4)" }), index.h("path", { d: "m7.0503 1037.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#c0392b" }), index.h("path", { d: "m7.0503 1036.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#ecf0f1" })))))), index.h("div", { class: "grow" }, this.captchaStatus == Status.START &&
-      index.h("div", null, index.h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", onClick: () => this.startVerification() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
-      index.h("div", null, index.h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
-      index.h("div", null, index.h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
-      index.h("div", null, index.h("span", { class: "text-red-500 text-sm" }, this.failureText)), index.h("div", { class: 'flex flex-wrap justify-end space-x-2' }, index.h("div", null, index.h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/terms-of-use`, target: '_blank' }, this.translation.footer.terms)), index.h("div", null, index.h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/privacy-policy`, target: '_blank' }, this.translation.footer.privacyPolicy)), index.h("div", null, index.h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcpacha")))))), index.h("div", null, index.h("input", { type: "text", name: "tc-verification-token", hidden: true, ref: (el) => (this.inputElement = el), value: this.value }))));
+      index.h("div", null, index.h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition duration-150 ease-in-out hover:scale-y-110", onClick: () => this.startVerification() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
+      index.h("div", null, index.h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
+      index.h("div", null, index.h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, index.h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
+      index.h("div", null, index.h("span", { class: "text-red-500 text-sm" }, this.failureText)), index.h("div", { class: 'flex flex-wrap justify-end space-x-2' }, index.h("div", null, index.h("a", { class: { 'text-xs leading-6 hover:text-blue-500 hover:underline': true, 'text-gray-600': this.currentTheme == 'light', 'text-gray-400': this.currentTheme == 'dark' }, href: `${this.companyWebsite}/legal/end-privacy-policy`, target: '_blank' }, this.translation.footer.endPrivacyPolicy)), index.h("div", null, index.h("a", { class: 'text-xs leading-6 text-blue-500 hover:text-blue-500 hover:underline font-bold', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcaptcha"))))))));
   }
@@ -1269,2 +1353,6 @@ startVerification() {
   get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "language": ["watchLanguageUpdate"],
+    "theme": ["watchThemeUpdate"]
+  }; }
 };
@@ -1271,0 +1359,0 @@ TrustcaptchaComponent.style = trustcaptchaComponentCss;

dist/collection/components/trustcaptcha-component/trustcaptcha-component.js

 import { h, Host } from "@stencil/core";
-import { CaptchaBox } from "../../utils/captcha_box";
-import { Status } from "../../utils/js/Status";
-import { getTranslation } from "../../utils/locale";
+import { CaptchaBox } from "./utils/captcha_box";
+import { Status } from "./utils/js/Status";
+import { getTranslation } from "./utils/locale";
 export class TrustcaptchaComponent {
@@ -12,12 +12,14 @@ constructor() {
     this.trustcaptchaApi = 'https://api.captcha.trustcaptcha.com';
-    this.language = 'de';
+    this.language = 'en';
+    this.theme = 'light';
+    this.autostart = 'active';
     this.value = undefined;
     this.captchaStatus = Status.START;
+    this.translation = undefined;
+    this.currentTheme = 'light';
   }
   componentWillLoad() {
-    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement);
+    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement, this.isAutostartActive());
     this.captchaBox.statusChangedEvent.on('statusChanged', value => { this.captchaStatus = value; });
     this.captchaBox.captchaFinishEvent.on("captchaSolved", verificationToken => {
-      this.value = verificationToken;
-      this.inputElement.value = verificationToken;
       this.captchaSolved.emit(verificationToken);
@@ -27,18 +29,57 @@ this.valueChanged.emit(verificationToken);
     this.captchaBox.captchaFinishEvent.on('captchaFailed', reason => {
+      console.log(reason);
       this.failureText = reason.message;
       this.captchaFailed.emit(reason);
     });
-    this.captchaBox.init();
+    this.captchaBox.setup();
     this.translation = getTranslation(this.language);
+    this.watchThemeUpdate();
   }
+  isAutostartActive() {
+    switch (this.autostart) {
+      case "active":
+      default:
+        return true;
+      case "disabled":
+        return false;
+    }
+  }
+  watchLanguageUpdate() {
+    this.translation = getTranslation(this.language);
+  }
+  watchThemeUpdate() {
+    if (this.theme !== 'media') {
+      this.currentTheme = this.theme;
+      return;
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      this.currentTheme = 'dark';
+    }
+    else {
+      this.currentTheme = 'light';
+    }
+  }
+  async reset() {
+    this.captchaBox.reset();
+  }
   render() {
-    return (h(Host, null, h("div", { class: { 'px-2 py-2 border rounded-md bg-gray-50': true, 'border-green-500': this.captchaBox.status === Status.DONE, 'border-red-500': this.captchaBox.status === Status.FAILED } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
-      h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.captchaStatus == Status.RUNNING &&
+    return (h(Host, null, h("div", { class: {
+        'px-2 py-2 border-2 rounded-md': true,
+        'bg-gray-50 border-gray-100': this.currentTheme == 'light' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-gray-800 border-gray-900': this.currentTheme == 'dark' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-green-50 border-green-300': this.currentTheme == 'light' && this.captchaBox.status === Status.DONE,
+        'bg-green-800 border-green-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.DONE,
+        'bg-red-50 border-red-300': this.currentTheme == 'light' && this.captchaBox.status === Status.FAILED,
+        'bg-red-800 border-red-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.FAILED
+      } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
+      h("div", null, this.currentTheme == 'light' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconLight", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.currentTheme == 'dark' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconDark", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0C162.9,43.6,114.2,62,50.2,62.1c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" })))), this.captchaStatus == Status.RUNNING &&
       h("div", null, h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), this.captchaStatus == Status.DONE &&
       h("div", { class: 'text-green-500' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "48", height: "48" }, h("path", { "fill-rule": "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", "clip-rule": "evenodd" }))), this.captchaStatus == Status.FAILED &&
       h("div", null, h("svg", { height: "48", version: "1.1", width: "48", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("g", { transform: "translate(0 -1028.4)" }, h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#c0392b", transform: "translate(0 1029.4)" }), h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#e74c3c", transform: "translate(0 1028.4)" }), h("path", { d: "m7.0503 1037.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#c0392b" }), h("path", { d: "m7.0503 1036.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#ecf0f1" })))))), h("div", { class: "grow" }, this.captchaStatus == Status.START &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
-      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/terms-of-use`, target: '_blank' }, this.translation.footer.terms)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/privacy-policy`, target: '_blank' }, this.translation.footer.privacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcpacha")))))), h("div", null, h("input", { type: "text", name: "tc-verification-token", hidden: true, ref: (el) => (this.inputElement = el), value: this.value }))));
+      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition duration-150 ease-in-out hover:scale-y-110", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
+      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: { 'text-xs leading-6 hover:text-blue-500 hover:underline': true, 'text-gray-600': this.currentTheme == 'light', 'text-gray-400': this.currentTheme == 'dark' }, href: `${this.companyWebsite}/legal/end-privacy-policy`, target: '_blank' }, this.translation.footer.endPrivacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-blue-500 hover:text-blue-500 hover:underline font-bold', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcaptcha"))))))));
   }
@@ -149,4 +190,40 @@ startVerification() {
         "reflect": false,
-        "defaultValue": "'de'"
+        "defaultValue": "'en'"
       },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'light' | 'dark' | 'media'",
+          "resolved": "\"dark\" | \"light\" | \"media\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "autostart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'active' | 'disabled'",
+          "resolved": "\"active\" | \"disabled\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "autostart",
+        "reflect": false,
+        "defaultValue": "'active'"
+      },
       "value": {
@@ -173,3 +250,5 @@ "type": "string",
     return {
-      "captchaStatus": {}
+      "captchaStatus": {},
+      "translation": {},
+      "currentTheme": {}
     };
@@ -225,4 +304,34 @@ }
   }
+  static get methods() {
+    return {
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageUpdate"
+      }, {
+        "propName": "theme",
+        "methodName": "watchThemeUpdate"
+      }];
+  }
 }
 //# sourceMappingURL=trustcaptcha-component.js.map

dist/components/trustcaptcha-component.js

@@ -133,121 +133,121 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
       window: {
-        closed: window.closed,
+        closed: this.safeGet(() => window.closed),
         connection: {
           // @ts-ignore
-          downlink: window.navigator.connection.downlink,
+          downlink: this.safeGet(() => window.navigator.connection.downlink),
           // @ts-ignore
-          effectiveType: window.navigator.connection.effectiveType,
+          effectiveType: this.safeGet(() => window.navigator.connection.effectiveType),
           // @ts-ignore
-          rtt: window.navigator.connection.rtt,
+          rtt: this.safeGet(() => window.navigator.connection.rtt),
           // @ts-ignore
-          saveData: window.navigator.connection.saveData
+          saveData: this.safeGet(() => window.navigator.connection.saveData)
         },
-        devicePixelRatio: window.devicePixelRatio,
+        devicePixelRatio: this.safeGet(() => window.devicePixelRatio),
         history: {
-          length: window.history.length
+          length: this.safeGet(() => window.history.length)
         },
-        innerHeight: window.innerHeight,
-        innerWidth: window.innerWidth,
-        length: window.length,
+        innerHeight: this.safeGet(() => window.innerHeight),
+        innerWidth: this.safeGet(() => window.innerWidth),
+        length: this.safeGet(() => window.length),
         location: {
-          hash: window.location.hash,
-          hostname: window.location.hostname,
-          href: window.location.href,
-          origin: window.location.origin,
-          pathname: window.location.pathname,
-          port: window.location.port,
-          protocol: window.location.protocol,
-          search: window.location.search
+          hash: this.safeGet(() => window.location.hash),
+          hostname: this.safeGet(() => window.location.hostname),
+          href: this.safeGet(() => window.location.href),
+          origin: this.safeGet(() => window.location.origin),
+          pathname: this.safeGet(() => window.location.pathname),
+          port: this.safeGet(() => window.location.port),
+          protocol: this.safeGet(() => window.location.protocol),
+          search: this.safeGet(() => window.location.search)
         },
         locationbar: {
-          visible: window.locationbar.visible
+          visible: this.safeGet(() => window.locationbar.visible)
         },
         menubar: {
-          visible: window.menubar.visible
+          visible: this.safeGet(() => window.menubar.visible)
         },
         navigator: {
-          appCodeName: window.navigator.appCodeName,
-          appName: window.navigator.appName,
-          appVersion: window.navigator.appVersion,
-          cookieEnabled: window.navigator.cookieEnabled,
+          appCodeName: this.safeGet(() => window.navigator.appCodeName),
+          appName: this.safeGet(() => window.navigator.appName),
+          appVersion: this.safeGet(() => window.navigator.appVersion),
+          cookieEnabled: this.safeGet(() => window.navigator.cookieEnabled),
           // @ts-ignore
-          deviceMemory: window.navigator.deviceMemory,
-          doNotTrack: window.navigator.doNotTrack,
-          hardwareConcurrency: window.navigator.hardwareConcurrency,
-          javaEnabled: window.navigator.javaEnabled(),
-          language: window.navigator.language,
-          languages: window.navigator.languages,
-          maxTouchPoints: window.navigator.maxTouchPoints,
-          onLine: window.navigator.onLine,
-          pdfViewerEnabled: window.navigator.pdfViewerEnabled,
-          platform: window.navigator.platform,
-          product: window.navigator.product,
-          productSub: window.navigator.productSub,
-          userAgent: window.navigator.userAgent,
-          vendor: window.navigator.vendor,
-          vendorSub: window.navigator.vendorSub
+          deviceMemory: this.safeGet(() => window.navigator.deviceMemory),
+          doNotTrack: this.safeGet(() => window.navigator.doNotTrack),
+          hardwareConcurrency: this.safeGet(() => window.navigator.hardwareConcurrency),
+          javaEnabled: this.safeGet(() => window.navigator.javaEnabled()),
+          language: this.safeGet(() => window.navigator.language),
+          languages: this.safeGet(() => window.navigator.languages),
+          maxTouchPoints: this.safeGet(() => window.navigator.maxTouchPoints),
+          onLine: this.safeGet(() => window.navigator.onLine),
+          pdfViewerEnabled: this.safeGet(() => window.navigator.pdfViewerEnabled),
+          platform: this.safeGet(() => window.navigator.platform),
+          product: this.safeGet(() => window.navigator.product),
+          productSub: this.safeGet(() => window.navigator.productSub),
+          userAgent: this.safeGet(() => window.navigator.userAgent),
+          vendor: this.safeGet(() => window.navigator.vendor),
+          vendorSub: this.safeGet(() => window.navigator.vendorSub)
         },
-        origin: window.origin,
+        origin: this.safeGet(() => window.origin),
         performance: {
           memory: {
             // @ts-ignore
-            jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
+            jsHeapSizeLimit: this.safeGet(() => window.performance.memory.jsHeapSizeLimit),
             // @ts-ignore
-            totalJSHeapSize: window.performance.memory.totalJSHeapSize,
+            totalJSHeapSize: this.safeGet(() => window.performance.memory.totalJSHeapSize),
             // @ts-ignore
-            usedJSHeapSize: window.performance.memory.usedJSHeapSize
+            usedJSHeapSize: this.safeGet(() => window.performance.memory.usedJSHeapSize)
           },
           navigation: {
-            type: window.performance.navigation.type,
-            redirectCount: window.performance.navigation.redirectCount
+            type: this.safeGet(() => window.performance.navigation.type),
+            redirectCount: this.safeGet(() => window.performance.navigation.redirectCount)
           },
-          now: window.performance.now(),
-          timeOrigin: window.performance.timeOrigin,
+          now: this.safeGet(() => window.performance.now()),
+          timeOrigin: this.safeGet(() => window.performance.timeOrigin),
           timing: {
-            navigationStart: window.performance.timing.navigationStart,
-            unloadEventStart: window.performance.timing.unloadEventStart,
-            unloadEventEnd: window.performance.timing.unloadEventEnd,
-            redirectStart: window.performance.timing.redirectStart,
-            redirectEnd: window.performance.timing.redirectEnd,
-            fetchStart: window.performance.timing.fetchStart,
-            domainLookupStart: window.performance.timing.domainLookupStart,
-            domainLookupEnd: window.performance.timing.domainLookupEnd,
-            connectStart: window.performance.timing.connectStart,
-            connectEnd: window.performance.timing.connectEnd,
-            secureConnectionStart: window.performance.timing.secureConnectionStart,
-            requestStart: window.performance.timing.requestStart,
-            responseStart: window.performance.timing.responseStart,
-            responseEnd: window.performance.timing.responseEnd,
-            domLoading: window.performance.timing.domLoading,
-            domInteractive: window.performance.timing.domInteractive,
-            domContentLoadedEventStart: window.performance.timing.domContentLoadedEventStart,
-            domContentLoadedEventEnd: window.performance.timing.domContentLoadedEventEnd,
-            domComplete: window.performance.timing.domComplete,
-            loadEventStart: window.performance.timing.loadEventStart,
-            loadEventEnd: window.performance.timing.loadEventEnd
+            navigationStart: this.safeGet(() => window.performance.timing.navigationStart),
+            unloadEventStart: this.safeGet(() => window.performance.timing.unloadEventStart),
+            unloadEventEnd: this.safeGet(() => window.performance.timing.unloadEventEnd),
+            redirectStart: this.safeGet(() => window.performance.timing.redirectStart),
+            redirectEnd: this.safeGet(() => window.performance.timing.redirectEnd),
+            fetchStart: this.safeGet(() => window.performance.timing.fetchStart),
+            domainLookupStart: this.safeGet(() => window.performance.timing.domainLookupStart),
+            domainLookupEnd: this.safeGet(() => window.performance.timing.domainLookupEnd),
+            connectStart: this.safeGet(() => window.performance.timing.connectStart),
+            connectEnd: this.safeGet(() => window.performance.timing.connectEnd),
+            secureConnectionStart: this.safeGet(() => window.performance.timing.secureConnectionStart),
+            requestStart: this.safeGet(() => window.performance.timing.requestStart),
+            responseStart: this.safeGet(() => window.performance.timing.responseStart),
+            responseEnd: this.safeGet(() => window.performance.timing.responseEnd),
+            domLoading: this.safeGet(() => window.performance.timing.domLoading),
+            domInteractive: this.safeGet(() => window.performance.timing.domInteractive),
+            domContentLoadedEventStart: this.safeGet(() => window.performance.timing.domContentLoadedEventStart),
+            domContentLoadedEventEnd: this.safeGet(() => window.performance.timing.domContentLoadedEventEnd),
+            domComplete: this.safeGet(() => window.performance.timing.domComplete),
+            loadEventStart: this.safeGet(() => window.performance.timing.loadEventStart),
+            loadEventEnd: this.safeGet(() => window.performance.timing.loadEventEnd)
           }
         },
-        outerHeight: window.outerHeight,
-        outerWidth: window.outerWidth,
+        outerHeight: this.safeGet(() => window.outerHeight),
+        outerWidth: this.safeGet(() => window.outerWidth),
         personalbar: {
-          visible: window.personalbar.visible
+          visible: this.safeGet(() => window.personalbar.visible)
         },
         screen: {
-          availableHeight: window.screen.availHeight,
-          availableWidth: window.screen.availWidth,
-          colorDepth: window.screen.colorDepth,
-          height: window.screen.height,
+          availableHeight: this.safeGet(() => window.screen.availHeight),
+          availableWidth: this.safeGet(() => window.screen.availWidth),
+          colorDepth: this.safeGet(() => window.screen.colorDepth),
+          height: this.safeGet(() => window.screen.height),
           orientation: {
-            angle: window.screen.orientation.angle,
-            type: window.screen.orientation.type,
+            angle: this.safeGet(() => window.screen.orientation.angle),
+            type: this.safeGet(() => window.screen.orientation.type)
           },
-          pixelDepth: window.screen.pixelDepth,
-          width: window.screen.width,
+          pixelDepth: this.safeGet(() => window.screen.pixelDepth),
+          width: this.safeGet(() => window.screen.width)
         },
-        screenLeft: window.screenLeft,
-        screenTop: window.screenTop,
-        screenX: window.screenX,
-        screenY: window.screenY,
+        screenLeft: this.safeGet(() => window.screenLeft),
+        screenTop: this.safeGet(() => window.screenTop),
+        screenX: this.safeGet(() => window.screenX),
+        screenY: this.safeGet(() => window.screenY),
         scrollbars: {
-          visible: window.scrollbars.visible
+          visible: this.safeGet(() => window.scrollbars.visible)
         }
@@ -289,2 +289,10 @@ },
   }
+  static safeGet(fn) {
+    try {
+      return fn();
+    }
+    catch (_a) {
+      return null;
+    }
+  }
 }
@@ -303,4 +311,4 @@
 class ErrorModel {
-  constructor(code, message) {
-    this.code = code;
+  constructor(errorCode, message) {
+    this.errorCode = ErrorCode[errorCode];
     this.message = message;
@@ -320,2 +328,5 @@ }
           break;
+        case 201:
+          verificationResponse.json().then((response) => successCallback(response.verificationToken));
+          break;
         case 403:
@@ -1112,9 +1123,14 @@ failureCallback(new ErrorModel(ErrorCode.CAPTCHA_NOT_ACCESSIBLE, `The captcha is no accessible from '${location.hostname}'.`));
   }
+  reset() {
+    this.customEvents = [];
+    this.active = true;
+  }
 }
 
 class CaptchaBox {
-  constructor(sitekey, trustcaptchaApi, htmlElement) {
+  constructor(sitekey, trustcaptchaApi, htmlElement, autostart) {
     this.statusChangedEvent = new EventEmitter();
     this.captchaFinishEvent = new EventEmitter();
     this.status = Status.START;
+    this.autostart = true;
     this.boxCreationTimestamp = new Date();
@@ -1124,10 +1140,14 @@ this.eventTracker = new EventTracker();
     this.trustcaptchaApi = trustcaptchaApi;
-    this.formElement = htmlElement.closest('form');
+    this.htmlElement = htmlElement;
+    this.autostart = autostart;
   }
-  init() {
+  setup() {
+    this.formElement = this.htmlElement.closest('form');
     if (this.formElement != null) {
       this.honeypotField = this.createHoneypotField();
+      this.verificationTokenField = this.createVerificationTokenField();
       this.registerElementFocusListeners();
     }
     else {
+      console.log('failed');
       this.switchStatus(Status.FAILED);
@@ -1146,9 +1166,25 @@ this.captchaFinishEvent.emit("captchaFailed", new ErrorModel(ErrorCode.NO_FORM_FOUND, "No parent form element found."));
   }
+  createVerificationTokenField() {
+    const verificationTokenField = document.createElement('input');
+    verificationTokenField.setAttribute('type', 'text');
+    verificationTokenField.setAttribute('name', 'tc-verification-token');
+    verificationTokenField.setAttribute('style', 'display:none');
+    verificationTokenField.setAttribute('tabindex', '-1');
+    return verificationTokenField;
+  }
   registerElementFocusListeners() {
-    const inputElements = Array.from(this.formElement.getElementsByTagName("input"));
-    const selectElements = Array.from(this.formElement.getElementsByTagName("select"));
-    const textAreaElements = Array.from(this.formElement.getElementsByTagName("textarea"));
-    const allElements = inputElements.concat(selectElements).concat(textAreaElements);
-    for (let inputElement of allElements) {
-      inputElement.addEventListener('focus', () => this.startVerification());
+    this.formElement.addEventListener('keydown', (event) => {
+      if (event instanceof KeyboardEvent) {
+        this.autostartVerification();
+      }
+    });
+    this.formElement.querySelectorAll('input, select, textarea').forEach(element => {
+      element.addEventListener('focusin', () => {
+        this.autostartVerification();
+      });
+    });
+  }
+  autostartVerification() {
+    if (this.autostart) {
+      this.startVerification();
     }
@@ -1173,2 +1209,4 @@ }
     this.captchaFinishEvent.emit("captchaSolved", base64String);
+    this.verificationTokenField.setAttribute("value", base64String);
+    this.formElement.appendChild(this.verificationTokenField);
     this.switchStatus(Status.DONE);
@@ -1180,2 +1218,9 @@ }
   }
+  reset() {
+    this.honeypotField.removeAttribute("value");
+    this.verificationTokenField.removeAttribute("value");
+    this.formElement.removeChild(this.verificationTokenField);
+    this.eventTracker.reset();
+    this.switchStatus(Status.START);
+  }
 }
@@ -1191,7 +1236,6 @@
       verificationInProgress: "Verifizierung läuft ...",
-      verifiedAsHuman: "Als Mensch bestätigt"
+      verifiedAsHuman: "Verifizierung abgeschlossen"
     },
     footer: {
-      terms: "Nutzungsbedingungen",
-      privacyPolicy: "Datenschutzerklärung"
+      endPrivacyPolicy: "Datenschutz"
     }
@@ -1203,7 +1247,6 @@ },
       verificationInProgress: "Verification in progress ...",
-      verifiedAsHuman: "Verified as human"
+      verifiedAsHuman: "Verification completed"
     },
     footer: {
-      terms: "Terms of use",
-      privacyPolicy: "Privacy policy"
+      endPrivacyPolicy: "Privacy"
     }
@@ -1213,3 +1256,3 @@ }
 
-const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
+const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],[type=reset],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border-2{border-width:2px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172/var(--tw-border-opacity))}.border-green-700{--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-gray-700{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition{transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.iconDark{fill:#e2e8f0}.iconLight{fill:#1e293b}.hover\\:scale-y-110:hover{--tw-scale-y:1.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))}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
 
@@ -1229,12 +1272,14 @@ const TrustcaptchaComponent$1 = /*@__PURE__*/ proxyCustomElement(class TrustcaptchaComponent extends HTMLElement {
     this.trustcaptchaApi = 'https://api.captcha.trustcaptcha.com';
-    this.language = 'de';
+    this.language = 'en';
+    this.theme = 'light';
+    this.autostart = 'active';
     this.value = undefined;
     this.captchaStatus = Status.START;
+    this.translation = undefined;
+    this.currentTheme = 'light';
   }
   componentWillLoad() {
-    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement);
+    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement, this.isAutostartActive());
     this.captchaBox.statusChangedEvent.on('statusChanged', value => { this.captchaStatus = value; });
     this.captchaBox.captchaFinishEvent.on("captchaSolved", verificationToken => {
-      this.value = verificationToken;
-      this.inputElement.value = verificationToken;
       this.captchaSolved.emit(verificationToken);
@@ -1244,18 +1289,57 @@ this.valueChanged.emit(verificationToken);
     this.captchaBox.captchaFinishEvent.on('captchaFailed', reason => {
+      console.log(reason);
       this.failureText = reason.message;
       this.captchaFailed.emit(reason);
     });
-    this.captchaBox.init();
+    this.captchaBox.setup();
     this.translation = getTranslation(this.language);
+    this.watchThemeUpdate();
   }
+  isAutostartActive() {
+    switch (this.autostart) {
+      case "active":
+      default:
+        return true;
+      case "disabled":
+        return false;
+    }
+  }
+  watchLanguageUpdate() {
+    this.translation = getTranslation(this.language);
+  }
+  watchThemeUpdate() {
+    if (this.theme !== 'media') {
+      this.currentTheme = this.theme;
+      return;
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      this.currentTheme = 'dark';
+    }
+    else {
+      this.currentTheme = 'light';
+    }
+  }
+  async reset() {
+    this.captchaBox.reset();
+  }
   render() {
-    return (h(Host, null, h("div", { class: { 'px-2 py-2 border rounded-md bg-gray-50': true, 'border-green-500': this.captchaBox.status === Status.DONE, 'border-red-500': this.captchaBox.status === Status.FAILED } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
-      h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.captchaStatus == Status.RUNNING &&
+    return (h(Host, null, h("div", { class: {
+        'px-2 py-2 border-2 rounded-md': true,
+        'bg-gray-50 border-gray-100': this.currentTheme == 'light' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-gray-800 border-gray-900': this.currentTheme == 'dark' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-green-50 border-green-300': this.currentTheme == 'light' && this.captchaBox.status === Status.DONE,
+        'bg-green-800 border-green-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.DONE,
+        'bg-red-50 border-red-300': this.currentTheme == 'light' && this.captchaBox.status === Status.FAILED,
+        'bg-red-800 border-red-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.FAILED
+      } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
+      h("div", null, this.currentTheme == 'light' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconLight", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.currentTheme == 'dark' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconDark", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0C162.9,43.6,114.2,62,50.2,62.1c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" })))), this.captchaStatus == Status.RUNNING &&
       h("div", null, h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), this.captchaStatus == Status.DONE &&
       h("div", { class: 'text-green-500' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "48", height: "48" }, h("path", { "fill-rule": "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", "clip-rule": "evenodd" }))), this.captchaStatus == Status.FAILED &&
       h("div", null, h("svg", { height: "48", version: "1.1", width: "48", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("g", { transform: "translate(0 -1028.4)" }, h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#c0392b", transform: "translate(0 1029.4)" }), h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#e74c3c", transform: "translate(0 1028.4)" }), h("path", { d: "m7.0503 1037.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#c0392b" }), h("path", { d: "m7.0503 1036.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#ecf0f1" })))))), h("div", { class: "grow" }, this.captchaStatus == Status.START &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
-      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/terms-of-use`, target: '_blank' }, this.translation.footer.terms)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/privacy-policy`, target: '_blank' }, this.translation.footer.privacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcpacha")))))), h("div", null, h("input", { type: "text", name: "tc-verification-token", hidden: true, ref: (el) => (this.inputElement = el), value: this.value }))));
+      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition duration-150 ease-in-out hover:scale-y-110", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
+      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: { 'text-xs leading-6 hover:text-blue-500 hover:underline': true, 'text-gray-600': this.currentTheme == 'light', 'text-gray-400': this.currentTheme == 'dark' }, href: `${this.companyWebsite}/legal/end-privacy-policy`, target: '_blank' }, this.translation.footer.endPrivacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-blue-500 hover:text-blue-500 hover:underline font-bold', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcaptcha"))))))));
   }
@@ -1266,2 +1350,6 @@ startVerification() {
   get hostElement() { return this; }
+  static get watchers() { return {
+    "language": ["watchLanguageUpdate"],
+    "theme": ["watchThemeUpdate"]
+  }; }
   static get style() { return trustcaptchaComponentCss; }
@@ -1274,4 +1362,12 @@ }, [1, "trustcaptcha-component", {
     "language": [1],
+    "theme": [1],
+    "autostart": [1],
     "value": [1537],
-    "captchaStatus": [32]
+    "captchaStatus": [32],
+    "translation": [32],
+    "currentTheme": [32],
+    "reset": [64]
+  }, undefined, {
+    "language": ["watchLanguageUpdate"],
+    "theme": ["watchThemeUpdate"]
   }]);
@@ -1278,0 +1374,0 @@ function defineCustomElement$1() {

dist/esm/frontendlibrary.js

@@ -1,3 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-fcef1ad5.js';
-export { s as setNonce } from './index-fcef1ad5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-2415daab.js';
+export { s as setNonce } from './index-2415daab.js';
 
@@ -17,5 +17,5 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["trustcaptcha-component",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"value":[1537],"captchaStatus":[32]}]]]], options);
+  return bootstrapLazy([["trustcaptcha-component",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"theme":[1],"autostart":[1],"value":[1537],"captchaStatus":[32],"translation":[32],"currentTheme":[32],"reset":[64]},null,{"language":["watchLanguageUpdate"],"theme":["watchThemeUpdate"]}]]]], options);
 });
 
 //# sourceMappingURL=frontendlibrary.js.map

dist/esm/loader.js

@@ -1,7 +0,7 @@
-import { b as bootstrapLazy } from './index-fcef1ad5.js';
-export { s as setNonce } from './index-fcef1ad5.js';
+import { b as bootstrapLazy } from './index-2415daab.js';
+export { s as setNonce } from './index-2415daab.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["trustcaptcha-component",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"value":[1537],"captchaStatus":[32]}]]]], options);
+  return bootstrapLazy([["trustcaptcha-component",[[1,"trustcaptcha-component",{"sitekey":[1],"companyWebsite":[1,"company-website"],"trustcaptchaWebsite":[1,"trustcaptcha-website"],"trustcaptchaApi":[1,"trustcaptcha-api"],"language":[1],"theme":[1],"autostart":[1],"value":[1537],"captchaStatus":[32],"translation":[32],"currentTheme":[32],"reset":[64]},null,{"language":["watchLanguageUpdate"],"theme":["watchThemeUpdate"]}]]]], options);
 };
@@ -8,0 +8,0 @@

dist/esm/trustcaptcha-component.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fcef1ad5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2415daab.js';
 
@@ -133,121 +133,121 @@ class ApiService {
       window: {
-        closed: window.closed,
+        closed: this.safeGet(() => window.closed),
         connection: {
           // @ts-ignore
-          downlink: window.navigator.connection.downlink,
+          downlink: this.safeGet(() => window.navigator.connection.downlink),
           // @ts-ignore
-          effectiveType: window.navigator.connection.effectiveType,
+          effectiveType: this.safeGet(() => window.navigator.connection.effectiveType),
           // @ts-ignore
-          rtt: window.navigator.connection.rtt,
+          rtt: this.safeGet(() => window.navigator.connection.rtt),
           // @ts-ignore
-          saveData: window.navigator.connection.saveData
+          saveData: this.safeGet(() => window.navigator.connection.saveData)
         },
-        devicePixelRatio: window.devicePixelRatio,
+        devicePixelRatio: this.safeGet(() => window.devicePixelRatio),
         history: {
-          length: window.history.length
+          length: this.safeGet(() => window.history.length)
         },
-        innerHeight: window.innerHeight,
-        innerWidth: window.innerWidth,
-        length: window.length,
+        innerHeight: this.safeGet(() => window.innerHeight),
+        innerWidth: this.safeGet(() => window.innerWidth),
+        length: this.safeGet(() => window.length),
         location: {
-          hash: window.location.hash,
-          hostname: window.location.hostname,
-          href: window.location.href,
-          origin: window.location.origin,
-          pathname: window.location.pathname,
-          port: window.location.port,
-          protocol: window.location.protocol,
-          search: window.location.search
+          hash: this.safeGet(() => window.location.hash),
+          hostname: this.safeGet(() => window.location.hostname),
+          href: this.safeGet(() => window.location.href),
+          origin: this.safeGet(() => window.location.origin),
+          pathname: this.safeGet(() => window.location.pathname),
+          port: this.safeGet(() => window.location.port),
+          protocol: this.safeGet(() => window.location.protocol),
+          search: this.safeGet(() => window.location.search)
         },
         locationbar: {
-          visible: window.locationbar.visible
+          visible: this.safeGet(() => window.locationbar.visible)
         },
         menubar: {
-          visible: window.menubar.visible
+          visible: this.safeGet(() => window.menubar.visible)
         },
         navigator: {
-          appCodeName: window.navigator.appCodeName,
-          appName: window.navigator.appName,
-          appVersion: window.navigator.appVersion,
-          cookieEnabled: window.navigator.cookieEnabled,
+          appCodeName: this.safeGet(() => window.navigator.appCodeName),
+          appName: this.safeGet(() => window.navigator.appName),
+          appVersion: this.safeGet(() => window.navigator.appVersion),
+          cookieEnabled: this.safeGet(() => window.navigator.cookieEnabled),
           // @ts-ignore
-          deviceMemory: window.navigator.deviceMemory,
-          doNotTrack: window.navigator.doNotTrack,
-          hardwareConcurrency: window.navigator.hardwareConcurrency,
-          javaEnabled: window.navigator.javaEnabled(),
-          language: window.navigator.language,
-          languages: window.navigator.languages,
-          maxTouchPoints: window.navigator.maxTouchPoints,
-          onLine: window.navigator.onLine,
-          pdfViewerEnabled: window.navigator.pdfViewerEnabled,
-          platform: window.navigator.platform,
-          product: window.navigator.product,
-          productSub: window.navigator.productSub,
-          userAgent: window.navigator.userAgent,
-          vendor: window.navigator.vendor,
-          vendorSub: window.navigator.vendorSub
+          deviceMemory: this.safeGet(() => window.navigator.deviceMemory),
+          doNotTrack: this.safeGet(() => window.navigator.doNotTrack),
+          hardwareConcurrency: this.safeGet(() => window.navigator.hardwareConcurrency),
+          javaEnabled: this.safeGet(() => window.navigator.javaEnabled()),
+          language: this.safeGet(() => window.navigator.language),
+          languages: this.safeGet(() => window.navigator.languages),
+          maxTouchPoints: this.safeGet(() => window.navigator.maxTouchPoints),
+          onLine: this.safeGet(() => window.navigator.onLine),
+          pdfViewerEnabled: this.safeGet(() => window.navigator.pdfViewerEnabled),
+          platform: this.safeGet(() => window.navigator.platform),
+          product: this.safeGet(() => window.navigator.product),
+          productSub: this.safeGet(() => window.navigator.productSub),
+          userAgent: this.safeGet(() => window.navigator.userAgent),
+          vendor: this.safeGet(() => window.navigator.vendor),
+          vendorSub: this.safeGet(() => window.navigator.vendorSub)
         },
-        origin: window.origin,
+        origin: this.safeGet(() => window.origin),
         performance: {
           memory: {
             // @ts-ignore
-            jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
+            jsHeapSizeLimit: this.safeGet(() => window.performance.memory.jsHeapSizeLimit),
             // @ts-ignore
-            totalJSHeapSize: window.performance.memory.totalJSHeapSize,
+            totalJSHeapSize: this.safeGet(() => window.performance.memory.totalJSHeapSize),
             // @ts-ignore
-            usedJSHeapSize: window.performance.memory.usedJSHeapSize
+            usedJSHeapSize: this.safeGet(() => window.performance.memory.usedJSHeapSize)
           },
           navigation: {
-            type: window.performance.navigation.type,
-            redirectCount: window.performance.navigation.redirectCount
+            type: this.safeGet(() => window.performance.navigation.type),
+            redirectCount: this.safeGet(() => window.performance.navigation.redirectCount)
           },
-          now: window.performance.now(),
-          timeOrigin: window.performance.timeOrigin,
+          now: this.safeGet(() => window.performance.now()),
+          timeOrigin: this.safeGet(() => window.performance.timeOrigin),
           timing: {
-            navigationStart: window.performance.timing.navigationStart,
-            unloadEventStart: window.performance.timing.unloadEventStart,
-            unloadEventEnd: window.performance.timing.unloadEventEnd,
-            redirectStart: window.performance.timing.redirectStart,
-            redirectEnd: window.performance.timing.redirectEnd,
-            fetchStart: window.performance.timing.fetchStart,
-            domainLookupStart: window.performance.timing.domainLookupStart,
-            domainLookupEnd: window.performance.timing.domainLookupEnd,
-            connectStart: window.performance.timing.connectStart,
-            connectEnd: window.performance.timing.connectEnd,
-            secureConnectionStart: window.performance.timing.secureConnectionStart,
-            requestStart: window.performance.timing.requestStart,
-            responseStart: window.performance.timing.responseStart,
-            responseEnd: window.performance.timing.responseEnd,
-            domLoading: window.performance.timing.domLoading,
-            domInteractive: window.performance.timing.domInteractive,
-            domContentLoadedEventStart: window.performance.timing.domContentLoadedEventStart,
-            domContentLoadedEventEnd: window.performance.timing.domContentLoadedEventEnd,
-            domComplete: window.performance.timing.domComplete,
-            loadEventStart: window.performance.timing.loadEventStart,
-            loadEventEnd: window.performance.timing.loadEventEnd
+            navigationStart: this.safeGet(() => window.performance.timing.navigationStart),
+            unloadEventStart: this.safeGet(() => window.performance.timing.unloadEventStart),
+            unloadEventEnd: this.safeGet(() => window.performance.timing.unloadEventEnd),
+            redirectStart: this.safeGet(() => window.performance.timing.redirectStart),
+            redirectEnd: this.safeGet(() => window.performance.timing.redirectEnd),
+            fetchStart: this.safeGet(() => window.performance.timing.fetchStart),
+            domainLookupStart: this.safeGet(() => window.performance.timing.domainLookupStart),
+            domainLookupEnd: this.safeGet(() => window.performance.timing.domainLookupEnd),
+            connectStart: this.safeGet(() => window.performance.timing.connectStart),
+            connectEnd: this.safeGet(() => window.performance.timing.connectEnd),
+            secureConnectionStart: this.safeGet(() => window.performance.timing.secureConnectionStart),
+            requestStart: this.safeGet(() => window.performance.timing.requestStart),
+            responseStart: this.safeGet(() => window.performance.timing.responseStart),
+            responseEnd: this.safeGet(() => window.performance.timing.responseEnd),
+            domLoading: this.safeGet(() => window.performance.timing.domLoading),
+            domInteractive: this.safeGet(() => window.performance.timing.domInteractive),
+            domContentLoadedEventStart: this.safeGet(() => window.performance.timing.domContentLoadedEventStart),
+            domContentLoadedEventEnd: this.safeGet(() => window.performance.timing.domContentLoadedEventEnd),
+            domComplete: this.safeGet(() => window.performance.timing.domComplete),
+            loadEventStart: this.safeGet(() => window.performance.timing.loadEventStart),
+            loadEventEnd: this.safeGet(() => window.performance.timing.loadEventEnd)
           }
         },
-        outerHeight: window.outerHeight,
-        outerWidth: window.outerWidth,
+        outerHeight: this.safeGet(() => window.outerHeight),
+        outerWidth: this.safeGet(() => window.outerWidth),
         personalbar: {
-          visible: window.personalbar.visible
+          visible: this.safeGet(() => window.personalbar.visible)
         },
         screen: {
-          availableHeight: window.screen.availHeight,
-          availableWidth: window.screen.availWidth,
-          colorDepth: window.screen.colorDepth,
-          height: window.screen.height,
+          availableHeight: this.safeGet(() => window.screen.availHeight),
+          availableWidth: this.safeGet(() => window.screen.availWidth),
+          colorDepth: this.safeGet(() => window.screen.colorDepth),
+          height: this.safeGet(() => window.screen.height),
           orientation: {
-            angle: window.screen.orientation.angle,
-            type: window.screen.orientation.type,
+            angle: this.safeGet(() => window.screen.orientation.angle),
+            type: this.safeGet(() => window.screen.orientation.type)
           },
-          pixelDepth: window.screen.pixelDepth,
-          width: window.screen.width,
+          pixelDepth: this.safeGet(() => window.screen.pixelDepth),
+          width: this.safeGet(() => window.screen.width)
         },
-        screenLeft: window.screenLeft,
-        screenTop: window.screenTop,
-        screenX: window.screenX,
-        screenY: window.screenY,
+        screenLeft: this.safeGet(() => window.screenLeft),
+        screenTop: this.safeGet(() => window.screenTop),
+        screenX: this.safeGet(() => window.screenX),
+        screenY: this.safeGet(() => window.screenY),
         scrollbars: {
-          visible: window.scrollbars.visible
+          visible: this.safeGet(() => window.scrollbars.visible)
         }
@@ -289,2 +289,10 @@ },
   }
+  static safeGet(fn) {
+    try {
+      return fn();
+    }
+    catch (_a) {
+      return null;
+    }
+  }
 }
@@ -303,4 +311,4 @@
 class ErrorModel {
-  constructor(code, message) {
-    this.code = code;
+  constructor(errorCode, message) {
+    this.errorCode = ErrorCode[errorCode];
     this.message = message;
@@ -320,2 +328,5 @@ }
           break;
+        case 201:
+          verificationResponse.json().then((response) => successCallback(response.verificationToken));
+          break;
         case 403:
@@ -1112,9 +1123,14 @@ failureCallback(new ErrorModel(ErrorCode.CAPTCHA_NOT_ACCESSIBLE, `The captcha is no accessible from '${location.hostname}'.`));
   }
+  reset() {
+    this.customEvents = [];
+    this.active = true;
+  }
 }
 
 class CaptchaBox {
-  constructor(sitekey, trustcaptchaApi, htmlElement) {
+  constructor(sitekey, trustcaptchaApi, htmlElement, autostart) {
     this.statusChangedEvent = new EventEmitter();
     this.captchaFinishEvent = new EventEmitter();
     this.status = Status.START;
+    this.autostart = true;
     this.boxCreationTimestamp = new Date();
@@ -1124,10 +1140,14 @@ this.eventTracker = new EventTracker();
     this.trustcaptchaApi = trustcaptchaApi;
-    this.formElement = htmlElement.closest('form');
+    this.htmlElement = htmlElement;
+    this.autostart = autostart;
   }
-  init() {
+  setup() {
+    this.formElement = this.htmlElement.closest('form');
     if (this.formElement != null) {
       this.honeypotField = this.createHoneypotField();
+      this.verificationTokenField = this.createVerificationTokenField();
       this.registerElementFocusListeners();
     }
     else {
+      console.log('failed');
       this.switchStatus(Status.FAILED);
@@ -1146,9 +1166,25 @@ this.captchaFinishEvent.emit("captchaFailed", new ErrorModel(ErrorCode.NO_FORM_FOUND, "No parent form element found."));
   }
+  createVerificationTokenField() {
+    const verificationTokenField = document.createElement('input');
+    verificationTokenField.setAttribute('type', 'text');
+    verificationTokenField.setAttribute('name', 'tc-verification-token');
+    verificationTokenField.setAttribute('style', 'display:none');
+    verificationTokenField.setAttribute('tabindex', '-1');
+    return verificationTokenField;
+  }
   registerElementFocusListeners() {
-    const inputElements = Array.from(this.formElement.getElementsByTagName("input"));
-    const selectElements = Array.from(this.formElement.getElementsByTagName("select"));
-    const textAreaElements = Array.from(this.formElement.getElementsByTagName("textarea"));
-    const allElements = inputElements.concat(selectElements).concat(textAreaElements);
-    for (let inputElement of allElements) {
-      inputElement.addEventListener('focus', () => this.startVerification());
+    this.formElement.addEventListener('keydown', (event) => {
+      if (event instanceof KeyboardEvent) {
+        this.autostartVerification();
+      }
+    });
+    this.formElement.querySelectorAll('input, select, textarea').forEach(element => {
+      element.addEventListener('focusin', () => {
+        this.autostartVerification();
+      });
+    });
+  }
+  autostartVerification() {
+    if (this.autostart) {
+      this.startVerification();
     }
@@ -1173,2 +1209,4 @@ }
     this.captchaFinishEvent.emit("captchaSolved", base64String);
+    this.verificationTokenField.setAttribute("value", base64String);
+    this.formElement.appendChild(this.verificationTokenField);
     this.switchStatus(Status.DONE);
@@ -1180,2 +1218,9 @@ }
   }
+  reset() {
+    this.honeypotField.removeAttribute("value");
+    this.verificationTokenField.removeAttribute("value");
+    this.formElement.removeChild(this.verificationTokenField);
+    this.eventTracker.reset();
+    this.switchStatus(Status.START);
+  }
 }
@@ -1191,7 +1236,6 @@
       verificationInProgress: "Verifizierung läuft ...",
-      verifiedAsHuman: "Als Mensch bestätigt"
+      verifiedAsHuman: "Verifizierung abgeschlossen"
     },
     footer: {
-      terms: "Nutzungsbedingungen",
-      privacyPolicy: "Datenschutzerklärung"
+      endPrivacyPolicy: "Datenschutz"
     }
@@ -1203,7 +1247,6 @@ },
       verificationInProgress: "Verification in progress ...",
-      verifiedAsHuman: "Verified as human"
+      verifiedAsHuman: "Verification completed"
     },
     footer: {
-      terms: "Terms of use",
-      privacyPolicy: "Privacy policy"
+      endPrivacyPolicy: "Privacy"
     }
@@ -1213,3 +1256,3 @@ }
 
-const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
+const trustcaptchaComponentCss = ":host{display:block}/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],[type=reset],button{-webkit-appearance:button;background-color:transparent;background-image:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}svg{display:block;vertical-align:middle}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.-ml-0{margin-left:0}.flex{display:flex}.inline-flex{display:inline-flex}.h-14{height:3.5rem}.h-5{height:1.25rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-full{width:100%}.grow{flex-grow:1}.transform{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))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-md{border-radius:.375rem}.border-2{border-width:2px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172/var(--tw-border-opacity))}.border-green-700{--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-gray-700{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition{transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.spinner{animation:rotate 2s linear infinite;height:48px;left:50%;top:50%;width:48px;z-index:2}.spinner .path{stroke:#3b82f6;stroke-linecap:round;stroke-dasharray:210,240;stroke-dashoffset:120}@keyframes rotate{to{transform:rotate(1turn)}}.iconDark{fill:#e2e8f0}.iconLight{fill:#1e293b}.hover\\:scale-y-110:hover{--tw-scale-y:1.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))}.hover\\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-blue-500:focus-visible{outline-color:#3b82f6}";
 
@@ -1227,12 +1270,14 @@ const TrustcaptchaComponent = class {
     this.trustcaptchaApi = 'https://api.captcha.trustcaptcha.com';
-    this.language = 'de';
+    this.language = 'en';
+    this.theme = 'light';
+    this.autostart = 'active';
     this.value = undefined;
     this.captchaStatus = Status.START;
+    this.translation = undefined;
+    this.currentTheme = 'light';
   }
   componentWillLoad() {
-    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement);
+    this.captchaBox = new CaptchaBox(this.sitekey, this.trustcaptchaApi, this.hostElement, this.isAutostartActive());
     this.captchaBox.statusChangedEvent.on('statusChanged', value => { this.captchaStatus = value; });
     this.captchaBox.captchaFinishEvent.on("captchaSolved", verificationToken => {
-      this.value = verificationToken;
-      this.inputElement.value = verificationToken;
       this.captchaSolved.emit(verificationToken);
@@ -1242,18 +1287,57 @@ this.valueChanged.emit(verificationToken);
     this.captchaBox.captchaFinishEvent.on('captchaFailed', reason => {
+      console.log(reason);
       this.failureText = reason.message;
       this.captchaFailed.emit(reason);
     });
-    this.captchaBox.init();
+    this.captchaBox.setup();
     this.translation = getTranslation(this.language);
+    this.watchThemeUpdate();
   }
+  isAutostartActive() {
+    switch (this.autostart) {
+      case "active":
+      default:
+        return true;
+      case "disabled":
+        return false;
+    }
+  }
+  watchLanguageUpdate() {
+    this.translation = getTranslation(this.language);
+  }
+  watchThemeUpdate() {
+    if (this.theme !== 'media') {
+      this.currentTheme = this.theme;
+      return;
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      this.currentTheme = 'dark';
+    }
+    else {
+      this.currentTheme = 'light';
+    }
+  }
+  async reset() {
+    this.captchaBox.reset();
+  }
   render() {
-    return (h(Host, null, h("div", { class: { 'px-2 py-2 border rounded-md bg-gray-50': true, 'border-green-500': this.captchaBox.status === Status.DONE, 'border-red-500': this.captchaBox.status === Status.FAILED } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
-      h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.captchaStatus == Status.RUNNING &&
+    return (h(Host, null, h("div", { class: {
+        'px-2 py-2 border-2 rounded-md': true,
+        'bg-gray-50 border-gray-100': this.currentTheme == 'light' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-gray-800 border-gray-900': this.currentTheme == 'dark' && (this.captchaBox.status === Status.START || this.captchaBox.status === Status.RUNNING),
+        'bg-green-50 border-green-300': this.currentTheme == 'light' && this.captchaBox.status === Status.DONE,
+        'bg-green-800 border-green-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.DONE,
+        'bg-red-50 border-red-300': this.currentTheme == 'light' && this.captchaBox.status === Status.FAILED,
+        'bg-red-800 border-red-700': this.currentTheme == 'dark' && this.captchaBox.status === Status.FAILED
+      } }, h("div", { class: 'flex space-x-2' }, h("div", { class: "flex justify-center items-center w-14 h-14" }, h("div", { class: 'justify-center' }, this.captchaStatus == Status.START &&
+      h("div", null, this.currentTheme == 'light' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconLight", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0c-40.4,39.4-89.1,57.8-153.1,57.9c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" }))), this.currentTheme == 'dark' &&
+        h("div", null, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 428.2 428.2" }, h("path", { class: "iconDark", d: "M393.8,110.2c-0.5-11.3-0.5-22-0.5-32.7c0-8.5-6.9-15.4-15.4-15.4c-64,0-112.6-18.4-153.1-57.9\n                        c-6.1-5.6-15.4-5.6-21.5,0C162.9,43.6,114.2,62,50.2,62.1c-8.5,0-15.4,6.9-15.4,15.4c0,10.7,0,21.5-0.5,32.7\n                        c-2,107.5-5.1,255,174.6,316.9l5.1,1l5.1-1C398.4,365.2,395.8,218.2,393.8,110.2z M202.2,258.9c-0.2,0.2-0.5,0.4-0.7,0.7\n                        c-3,2.4-6.4,3.8-10.4,3.8h-0.5c-4.1,0-8.2-2-10.8-5.1l-39.5-43.8c-4.4-4.9-4-12.5,0.9-16.9l5.2-4.6c4.9-4.4,12.4-3.9,16.8,0.9\n                        l21.2,23.5c4.5,5,12.2,5.3,17.1,0.7l65.3-62.1c4.8-4.6,12.4-4.3,17,0.5l4.7,5c4.5,4.8,4.2,12.3-0.6,16.9L202.2,258.9z" })))), this.captchaStatus == Status.RUNNING &&
       h("div", null, h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))), this.captchaStatus == Status.DONE &&
       h("div", { class: 'text-green-500' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "48", height: "48" }, h("path", { "fill-rule": "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", "clip-rule": "evenodd" }))), this.captchaStatus == Status.FAILED &&
       h("div", null, h("svg", { height: "48", version: "1.1", width: "48", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("g", { transform: "translate(0 -1028.4)" }, h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#c0392b", transform: "translate(0 1029.4)" }), h("path", { d: "m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z", fill: "#e74c3c", transform: "translate(0 1028.4)" }), h("path", { d: "m7.0503 1037.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#c0392b" }), h("path", { d: "m7.0503 1036.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z", fill: "#ecf0f1" })))))), h("div", { class: "grow" }, this.captchaStatus == Status.START &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
-      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-gray-200 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200", disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
-      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/terms-of-use`, target: '_blank' }, this.translation.footer.terms)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: `${this.companyWebsite}/privacy-policy`, target: '_blank' }, this.translation.footer.privacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-gray-600 hover:text-blue-500 hover:underline', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcpacha")))))), h("div", null, h("input", { type: "text", name: "tc-verification-token", hidden: true, ref: (el) => (this.inputElement = el), value: this.value }))));
+      h("div", null, h("button", { type: "button", class: "w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold bg-blue-500 text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition duration-150 ease-in-out hover:scale-y-110", onClick: () => this.startVerification() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" })), this.translation.button.startVerification)), this.captchaStatus == Status.RUNNING &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" })), this.translation.button.verificationInProgress)), this.captchaStatus == Status.DONE &&
+      h("div", null, h("button", { type: "button", class: { 'w-full justify-center inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset': true, 'bg-gray-200 text-gray-900 ring-gray-200': this.currentTheme == 'light', 'bg-gray-700 text-gray-100 ring-gray-700': this.currentTheme == 'dark' }, disabled: true }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", class: "-ml-0.5 h-5 w-5" }, h("path", { "fill-rule": "evenodd", d: "M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z", "clip-rule": "evenodd" })), this.translation.button.verifiedAsHuman)), this.captchaStatus == Status.FAILED &&
+      h("div", null, h("span", { class: "text-red-500 text-sm" }, this.failureText)), h("div", { class: 'flex flex-wrap justify-end space-x-2' }, h("div", null, h("a", { class: { 'text-xs leading-6 hover:text-blue-500 hover:underline': true, 'text-gray-600': this.currentTheme == 'light', 'text-gray-400': this.currentTheme == 'dark' }, href: `${this.companyWebsite}/legal/end-privacy-policy`, target: '_blank' }, this.translation.footer.endPrivacyPolicy)), h("div", null, h("a", { class: 'text-xs leading-6 text-blue-500 hover:text-blue-500 hover:underline font-bold', href: this.trustcaptchaWebsite, target: '_blank' }, "Trustcaptcha"))))))));
   }
@@ -1264,2 +1348,6 @@ startVerification() {
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "language": ["watchLanguageUpdate"],
+    "theme": ["watchThemeUpdate"]
+  }; }
 };
@@ -1266,0 +1354,0 @@ TrustcaptchaComponent.style = trustcaptchaComponentCss;

dist/frontendlibrary/frontendlibrary.esm.js

@@ -1,2 +0,2 @@
-import{p as t,b as a}from"./p-063a968a.js";export{s as setNonce}from"./p-063a968a.js";const c=()=>{const a=import.meta.url;const s={};if(a!==""){s.resourcesUrl=new URL(".",a).href}return t(s)};c().then((t=>a([["p-fa6567ec",[[1,"trustcaptcha-component",{sitekey:[1],companyWebsite:[1,"company-website"],trustcaptchaWebsite:[1,"trustcaptcha-website"],trustcaptchaApi:[1,"trustcaptcha-api"],language:[1],value:[1537],captchaStatus:[32]}]]]],t)));
+import{p as t,b as e}from"./p-54568d0e.js";export{s as setNonce}from"./p-54568d0e.js";const a=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return t(a)};a().then((t=>e([["p-b6da7e25",[[1,"trustcaptcha-component",{sitekey:[1],companyWebsite:[1,"company-website"],trustcaptchaWebsite:[1,"trustcaptcha-website"],trustcaptchaApi:[1,"trustcaptcha-api"],language:[1],theme:[1],autostart:[1],value:[1537],captchaStatus:[32],translation:[32],currentTheme:[32],reset:[64]},null,{language:["watchLanguageUpdate"],theme:["watchThemeUpdate"]}]]]],t)));
 //# sourceMappingURL=frontendlibrary.esm.js.map

dist/types/components.d.ts

@@ -10,5 +10,8 @@ /* eslint-disable */
     interface TrustcaptchaComponent {
+        "autostart": 'active' | 'disabled';
         "companyWebsite": string;
         "language": 'en' | 'de';
+        "reset": () => Promise<void>;
         "sitekey": string;
+        "theme": 'light' | 'dark' | 'media';
         "trustcaptchaApi": string;
@@ -49,2 +52,3 @@ "trustcaptchaWebsite": string;
     interface TrustcaptchaComponent {
+        "autostart"?: 'active' | 'disabled';
         "companyWebsite"?: string;
@@ -56,2 +60,3 @@ "language"?: 'en' | 'de';
         "sitekey"?: string;
+        "theme"?: 'light' | 'dark' | 'media';
         "trustcaptchaApi"?: string;
@@ -58,0 +63,0 @@ "trustcaptchaWebsite"?: string;

dist/types/components/trustcaptcha-component/trustcaptcha-component.d.ts

 import { EventEmitter } from '../../stencil-public-runtime';
-import { CaptchaBox } from '../../utils/captcha_box';
-import { Status } from '../../utils/js/Status';
+import { CaptchaBox } from './utils/captcha_box';
+import { Status } from './utils/js/Status';
 export declare class TrustcaptchaComponent {
@@ -11,2 +11,4 @@ private hostElement;
   language: 'en' | 'de';
+  theme: 'light' | 'dark' | 'media';
+  autostart: 'active' | 'disabled';
   value: string;
@@ -18,8 +20,12 @@ valueChanged: EventEmitter<string>;
   captchaBox: CaptchaBox;
-  inputElement: HTMLInputElement;
   translation: any;
+  currentTheme: 'light' | 'dark';
   failureText: string;
   componentWillLoad(): void;
+  private isAutostartActive;
+  watchLanguageUpdate(): void;
+  watchThemeUpdate(): void;
+  reset(): Promise<void>;
   render(): any;
   startVerification(): void;
 }

package.json

 {
   "name": "@trustcaptcha/trustcaptcha-frontend",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Frondend library for trustcaptcha",
+  "keywords": [
+    "captcha",
+    "security",
+    "trustcaptcha",
+    "spam-protection",
+    "bot-detection",
+    "user-verification",
+    "frontend-security",
+    "web-security",
+    "gdpr",
+    "privacy",
+    "made-in-germany",
+    "eu",
+    "european-union"
+  ],
   "author": "Trustcaptcha GmbH ([e-mail])",
@@ -35,2 +50,5 @@ "license": "Apache-2.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@stencil/angular-output-target": "^0.8.2",
@@ -49,2 +67,4 @@ "@stencil/postcss": "^2.1.0",
     "puppeteer": "^21.4.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
@@ -51,0 +71,0 @@ "stencil-tailwind-plugin": "^1.8.0",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1853077

increased by5.91%

Lines of code

11744

increased by4.99%

Worsened metrics

Dev dependency count

23

increased by27.78%

No dependency changes