comand-component-library 4.1.49 → 4.1.51

package/dist/comand-component-library.js

@@ -5701,6 +5701,13 @@ const Dd = /* @__PURE__ */ V(pd, [["render", Fd]]), Md = {
     };
   },
   props: {
+    /**
+     * website-key for Google-recaptcha v3
+     */
+    reCaptchaWebsiteKey: {
+      type: String,
+      required: !1
+    },
     /**
      * activate if native submit-event should be used
      */
@@ -5872,19 +5879,33 @@ const Dd = /* @__PURE__ */ V(pd, [["render", Fd]]), Md = {
   },
   methods: {
     onSubmit(e) {
-      var s;
       if (this.onValidate(), this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData)), this.formData.error || this.useNativeSubmit) {
         this.formData.error && e.originalEvent.preventDefault();
         return;
       }
-      const n = new FormData(), t = Object.keys(this.configuration);
+      e.originalEvent.preventDefault(), this.reCaptchaWebsiteKey ? grecaptcha.ready(function() {
+        grecaptcha.execute(this.reCaptchaWebsiteKey, { action: "submit" }).then(function(n) {
+          this.submitForm(n);
+        });
+      }) : this.submitForm();
+    },
+    submitForm(e) {
+      var s;
+      const n = new FormData();
+      e && n.set("recaptchaToken", e);
+      const t = Object.keys(this.configuration);
       for (let i = 0; i < t.length; i++)
         n.set(this.configuration[t[i]].name, this.formData[t[i]].value);
       fetch(this.formAction, { method: ((s = this.cmdForm) == null ? void 0 : s.formMethod) || "POST", body: n }).then((i) => {
-        i.ok ? this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully")) : this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent"));
+        if (i.ok) {
+          this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully"));
+          for (let o in this.formData)
+            o === "salutation" ? this.formData[o].value = this.configuration.salutation.default : o === "acceptPrivacy" ? this.formData[o].value = !1 : this.formData[o].value = "";
+        } else
+          this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent"));
       }).catch((i) => {
         this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent")), console.error(i);
-      }), e.originalEvent.preventDefault();
+      });
     },
     onCountrySelect(e) {
       this.cityBeforeZip = e === "us" || e === "uk";
@@ -18418,7 +18439,7 @@ function Xx(e, n, t, s, i, o) {
     ])
   ]));
 }
-const $x = /* @__PURE__ */ V(Yx, [["render", Xx]]), e_ = {
+const $x = /* @__PURE__ */ V(Yx, [["render", Xx]]), e1 = {
   name: "PageOverview",
   data() {
     return {
@@ -18429,28 +18450,28 @@ const $x = /* @__PURE__ */ V(Yx, [["render", Xx]]), e_ = {
       listOfSiteLinksData: Wg
     };
   }
-}, t_ = /* @__PURE__ */ a("h2", {
+}, t1 = /* @__PURE__ */ a("h2", {
   class: "headline-demopage",
   id: "section-contact-information"
 }, [
   /* @__PURE__ */ a("span", null, "Contact Information")
-], -1), n_ = /* @__PURE__ */ a("h2", {
+], -1), n1 = /* @__PURE__ */ a("h2", {
   class: "headline-demopage",
   id: "section-multiple-lists-of-links-downloads"
 }, [
   /* @__PURE__ */ a("span", null, "Multiple Lists of links")
-], -1), i_ = /* @__PURE__ */ a("h3", { id: "section-multiple-lists-of-links-downloads" }, "Downloads", -1), o_ = /* @__PURE__ */ a("hr", null, null, -1), l_ = /* @__PURE__ */ a("h3", { id: "section-multiple-lists-of-links-sitemap" }, "SiteMap", -1), s_ = /* @__PURE__ */ a("h2", {
+], -1), i1 = /* @__PURE__ */ a("h3", { id: "section-multiple-lists-of-links-downloads" }, "Downloads", -1), o1 = /* @__PURE__ */ a("hr", null, null, -1), l1 = /* @__PURE__ */ a("h3", { id: "section-multiple-lists-of-links-sitemap" }, "SiteMap", -1), s1 = /* @__PURE__ */ a("h2", {
   class: "headline-demopage",
   id: "section-multiple-box-wrapper"
 }, [
   /* @__PURE__ */ a("span", null, "Multiple Box Wrapper")
-], -1), a_ = /* @__PURE__ */ a("h3", { id: "section-multiple-box-wrapper-faqs" }, "FAQs", -1), r_ = /* @__PURE__ */ a("hr", null, null, -1), d_ = /* @__PURE__ */ a("h3", { id: "section-multiple-box-wrapper-team-overview" }, "Team Overview", -1);
-function c_(e, n, t, s, i, o) {
+], -1), a1 = /* @__PURE__ */ a("h3", { id: "section-multiple-box-wrapper-faqs" }, "FAQs", -1), r1 = /* @__PURE__ */ a("hr", null, null, -1), d1 = /* @__PURE__ */ a("h3", { id: "section-multiple-box-wrapper-team-overview" }, "Team Overview", -1);
+function c1(e, n, t, s, i, o) {
   const d = $x, c = yo, u = Jx, g = zx;
   return l(), r(S, null, [
     h(c, null, {
       default: k(() => [
-        t_,
+        t1,
         h(d, {
           cmdBasicForm: e.basicForm,
           cmdAddressData: {},
@@ -18466,44 +18487,44 @@ function c_(e, n, t, s, i, o) {
     }),
     h(c, null, {
       default: k(() => [
-        n_,
-        i_,
+        n1,
+        i1,
         h(u, { segments: i.listOfDownloadsData }, null, 8, ["segments"]),
-        o_,
-        l_,
+        o1,
+        l1,
         h(u, { segments: i.listOfSiteLinksData }, null, 8, ["segments"])
       ]),
       _: 1
     }),
     h(c, null, {
       default: k(() => [
-        s_,
-        a_,
+        s1,
+        a1,
         h(g, { segments: i.faqsData }, null, 8, ["segments"]),
-        r_,
-        d_,
+        r1,
+        d1,
         h(g, { segments: i.boxesTeamOverviewData }, null, 8, ["segments"])
       ]),
       _: 1
     })
   ], 64);
 }
-const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-library", m_ = "4.1.49", h_ = "GPL-3.0-only", p_ = "CoManD-UI", f_ = "module", g_ = {
+const bo = /* @__PURE__ */ V(e1, [["render", c1]]), u1 = "comand-component-library", m1 = "4.1.51", h1 = "GPL-3.0-only", p1 = "CoManD-UI", f1 = "module", g1 = {
   prepublishOnly: "npm run build-lib",
   dev: "vite",
   build: "vite build",
   "build-lib": "vite build && gulp",
   preview: "vite preview"
-}, y_ = [
+}, y1 = [
   "dist",
   "src"
-], b_ = {
+], b1 = {
   ".": "./dist/comand-component-library.js",
   "./css.js": "./src/css.js",
   "./style.css": "./dist/style.css",
   "./variables.scss": "./src/assets/styles/variables.scss",
   "./export-data.js": "./src/assets/data/export-data.js"
-}, x_ = {
+}, x1 = {
   "clickout-event": "^1.1.2",
   "comand-frontend-framework": "^4.1.11",
   "comand-ui-iconfonts": "^1.0.14",
@@ -18512,7 +18533,7 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
   vue: "^3.2.31",
   "vue-router": "^4.0.12",
   vuex: "^4.0.2"
-}, __ = {
+}, _1 = {
   "@iconify/vue": "^4.0.0",
   "@vitejs/plugin-vue": "^5.1.1",
   "@vue/test-utils": "^2.0.0-0",
@@ -18522,19 +18543,19 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
   "unplugin-vue-components": "^0.24.0",
   vite: "^5.4.11",
   "vue-jest": "^5.0.0-0"
-}, C_ = {
-  name: u_,
-  version: m_,
-  license: h_,
-  author: p_,
+}, C1 = {
+  name: u1,
+  version: m1,
+  license: h1,
+  author: p1,
   private: !1,
-  type: f_,
-  scripts: g_,
-  files: y_,
-  exports: b_,
-  dependencies: x_,
-  devDependencies: __
-}, w_ = {
+  type: f1,
+  scripts: g1,
+  files: y1,
+  exports: b1,
+  dependencies: x1,
+  devDependencies: _1
+}, w1 = {
   data() {
     return {
       cmdAddressDataSettingsData: {
@@ -19399,9 +19420,9 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
       }
     };
   }
-}, xo = "/media/images/content-images/landscape-medium.jpg", k_ = "/media/images/demo-images/small/landscape-01.jpg", v_ = "/media/images/demo-images/small/landscape-02.jpg", T_ = "/media/images/demo-images/small/landscape-03.jpg", S_ = {
+}, xo = "/media/images/content-images/landscape-medium.jpg", k1 = "/media/images/demo-images/small/landscape-01.jpg", v1 = "/media/images/demo-images/small/landscape-02.jpg", T1 = "/media/images/demo-images/small/landscape-03.jpg", S1 = {
   name: "App",
-  mixins: [w_],
+  mixins: [w1],
   components: {
     PageOverview: bo
   },
@@ -19565,7 +19586,7 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
       tabsData: Rg,
       thumbnailScrollerImagesData: Ng,
       thumbnailScrollerTextData: Ug,
-      packageJson: C_
+      packageJson: C1
     };
   },
   computed: {
@@ -19763,39 +19784,39 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
       });
     }
   }
-}, O_ = ["id"], L_ = /* @__PURE__ */ a("a", { id: "anchor-back-to-top" }, null, -1), I_ = { for: "select-template" }, B_ = /* @__PURE__ */ a("span", null, "Select template", -1), F_ = /* @__PURE__ */ a("option", { value: "blank" }, "Blank/Unstyled", -1), D_ = /* @__PURE__ */ a("option", { value: "business" }, "Business", -1), M_ = /* @__PURE__ */ a("option", { value: "casual" }, "Casual", -1), V_ = /* @__PURE__ */ a("option", { value: "dating" }, "Dating", -1), P_ = /* @__PURE__ */ a("option", { value: "influencer" }, "Influencer", -1), A_ = [
-  F_,
-  D_,
-  M_,
-  V_,
-  P_
-], E_ = /* @__PURE__ */ a("span", null, "Color Scheme", -1), H_ = { class: "input-wrapper" }, q_ = { for: "default-color-scheme" }, R_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Color-Scheme by Browser/OS", -1), N_ = { for: "light-mode" }, U_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Light Mode", -1), j_ = { for: "dark-mode" }, z_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Dark Mode", -1), G_ = ["href", "onClick"], W_ = { class: "box-footer comand-versions" }, K_ = /* @__PURE__ */ a("dt", null, "Frontend-Framework Version:", -1), J_ = /* @__PURE__ */ a("dt", null, "Component-Library Version:", -1), Y_ = { class: "closed-sidebar" }, Z_ = /* @__PURE__ */ a("span", { class: "icon-settings-template" }, null, -1), Q_ = [
-  Z_
-], X_ = /* @__PURE__ */ a("span", { class: "icon-settings-component" }, null, -1), $_ = [
-  X_
-], e1 = /* @__PURE__ */ a("span", { class: "icon-file-settings" }, null, -1), t1 = [
-  e1
-], n1 = /* @__PURE__ */ a("span", null, "Hide sidebar", -1), i1 = [
-  n1
-], o1 = {
+}, O1 = ["id"], L1 = /* @__PURE__ */ a("a", { id: "anchor-back-to-top" }, null, -1), I1 = { for: "select-template" }, B1 = /* @__PURE__ */ a("span", null, "Select template", -1), F1 = /* @__PURE__ */ a("option", { value: "blank" }, "Blank/Unstyled", -1), D1 = /* @__PURE__ */ a("option", { value: "business" }, "Business", -1), M1 = /* @__PURE__ */ a("option", { value: "casual" }, "Casual", -1), V1 = /* @__PURE__ */ a("option", { value: "dating" }, "Dating", -1), P1 = /* @__PURE__ */ a("option", { value: "influencer" }, "Influencer", -1), A1 = [
+  F1,
+  D1,
+  M1,
+  V1,
+  P1
+], E1 = /* @__PURE__ */ a("span", null, "Color Scheme", -1), H1 = { class: "input-wrapper" }, q1 = { for: "default-color-scheme" }, R1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Color-Scheme by Browser/OS", -1), N1 = { for: "light-mode" }, U1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Light Mode", -1), j1 = { for: "dark-mode" }, z1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Dark Mode", -1), G1 = ["href", "onClick"], W1 = { class: "box-footer comand-versions" }, K1 = /* @__PURE__ */ a("dt", null, "Frontend-Framework Version:", -1), J1 = /* @__PURE__ */ a("dt", null, "Component-Library Version:", -1), Y1 = { class: "closed-sidebar" }, Z1 = /* @__PURE__ */ a("span", { class: "icon-settings-template" }, null, -1), Q1 = [
+  Z1
+], X1 = /* @__PURE__ */ a("span", { class: "icon-settings-component" }, null, -1), $1 = [
+  X1
+], e_ = /* @__PURE__ */ a("span", { class: "icon-file-settings" }, null, -1), t_ = [
+  e_
+], n_ = /* @__PURE__ */ a("span", null, "Hide sidebar", -1), i_ = [
+  n_
+], o_ = {
   key: 1,
   id: "content"
-}, l1 = /* @__PURE__ */ a("h1", { class: "headline-demopage" }, "Components Overview", -1), s1 = {
+}, l_ = /* @__PURE__ */ a("h1", { class: "headline-demopage" }, "Components Overview", -1), s_ = {
   class: "headline-demopage",
   id: "section-address-data"
-}, a1 = /* @__PURE__ */ a("span", null, "Address Data", -1), r1 = { class: "flex-container" }, d1 = /* @__PURE__ */ a("h2", {
+}, a_ = /* @__PURE__ */ a("span", null, "Address Data", -1), r_ = { class: "flex-container" }, d_ = /* @__PURE__ */ a("h2", {
   class: "headline-demopage",
   id: "section-advanced-form-elements"
-}, "Advanced Form Elements", -1), c1 = /* @__PURE__ */ a("h3", null, [
+}, "Advanced Form Elements", -1), c_ = /* @__PURE__ */ a("h3", null, [
   /* @__PURE__ */ a("span", null, "Form elements status:")
-], -1), u1 = { class: "flex-container" }, m1 = { class: "list-status" }, h1 = { class: "error" }, p1 = { class: "flex-container" }, f1 = /* @__PURE__ */ a("legend", null, "Legend", -1), g1 = { class: "headline-demopage" }, y1 = /* @__PURE__ */ a("span", null, "Form Element-Component", -1), b1 = { class: "flex-container" }, x1 = { class: "flex-container" }, _1 = /* @__PURE__ */ a("h2", null, "Inputfields in Columns", -1), C1 = { class: "flex-container" }, w1 = /* @__PURE__ */ a("span", { innerHTML: "Label with <a href='#'>Link</a> given by slot" }, null, -1), k1 = { class: "flex-container" }, v1 = /* @__PURE__ */ a("hr", null, null, -1), T1 = { class: "headline-demopage" }, S1 = /* @__PURE__ */ a("span", null, "Fake Selects", -1), O1 = { class: "flex-container" }, L1 = /* @__PURE__ */ a("hr", null, null, -1), I1 = /* @__PURE__ */ a("h2", null, "Progress Bar [native]", -1), B1 = /* @__PURE__ */ a("h2", null, "Slider [native]", -1), F1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Single-Slider (with in- and output):", -1), D1 = { class: "flex-container no-flex" }, M1 = {
+], -1), u_ = { class: "flex-container" }, m_ = { class: "list-status" }, h_ = { class: "error" }, p_ = { class: "flex-container" }, f_ = /* @__PURE__ */ a("legend", null, "Legend", -1), g_ = { class: "headline-demopage" }, y_ = /* @__PURE__ */ a("span", null, "Form Element-Component", -1), b_ = { class: "flex-container" }, x_ = { class: "flex-container" }, __ = /* @__PURE__ */ a("h2", null, "Inputfields in Columns", -1), C_ = { class: "flex-container" }, w_ = /* @__PURE__ */ a("span", { innerHTML: "Label with <a href='#'>Link</a> given by slot" }, null, -1), k_ = { class: "flex-container" }, v_ = /* @__PURE__ */ a("hr", null, null, -1), T_ = { class: "headline-demopage" }, S_ = /* @__PURE__ */ a("span", null, "Fake Selects", -1), O_ = { class: "flex-container" }, L_ = /* @__PURE__ */ a("hr", null, null, -1), I_ = /* @__PURE__ */ a("h2", null, "Progress Bar [native]", -1), B_ = /* @__PURE__ */ a("h2", null, "Slider [native]", -1), F_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Single-Slider (with in- and output):", -1), D_ = { class: "flex-container no-flex" }, M_ = {
   class: "inline",
   for: "range-value"
-}, V1 = /* @__PURE__ */ a("span", { class: "label-text" }, [
+}, V_ = /* @__PURE__ */ a("span", { class: "label-text" }, [
   /* @__PURE__ */ a("span", null, "Range Value:")
-], -1), P1 = ["disabled"], A1 = { for: "range-slider" }, E1 = /* @__PURE__ */ a("span", { class: "label-text hidden" }, [
+], -1), P_ = ["disabled"], A_ = { for: "range-slider" }, E_ = /* @__PURE__ */ a("span", { class: "label-text hidden" }, [
   /* @__PURE__ */ a("span", null, "Range Value")
-], -1), H1 = ["disabled"], q1 = /* @__PURE__ */ a("hr", null, null, -1), R1 = /* @__PURE__ */ a("h2", null, "Toggle-Switches", -1), N1 = /* @__PURE__ */ a("h3", null, "Switches without switch-labels", -1), U1 = /* @__PURE__ */ a("h3", null, "Switches with switch-labels", -1), j1 = /* @__PURE__ */ a("br", null, null, -1), z1 = /* @__PURE__ */ a("br", null, null, -1), G1 = /* @__PURE__ */ a("h2", null, "Checkboxes and Radiobuttons", -1), W1 = /* @__PURE__ */ a("h3", null, "Checkboxes [native]", -1), K1 = { class: "label inline" }, J1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for native checkboxes:", -1), Y1 = { class: "flex-container no-flex" }, Z1 = /* @__PURE__ */ a("a", { href: "#" }, "link", -1), Q1 = /* @__PURE__ */ a("h3", null, "Checkboxes (replaced)", -1), X1 = { class: "label inline" }, $1 = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for Replaced Input-Type-Checkbox:", -1), eC = { class: "flex-container no-flex" }, tC = /* @__PURE__ */ a("h3", null, "Radiobuttons [native]", -1), nC = { class: "label inline" }, iC = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for native radiobuttons:", -1), oC = { class: "flex-container no-flex" }, lC = /* @__PURE__ */ a("h3", null, "Radiobuttons (replaced)", -1), sC = { class: "label inline" }, aC = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for Replaced Input-Type-Radio:", -1), rC = { class: "flex-container no-flex" }, dC = {
+], -1), H_ = ["disabled"], q_ = /* @__PURE__ */ a("hr", null, null, -1), R_ = /* @__PURE__ */ a("h2", null, "Toggle-Switches", -1), N_ = /* @__PURE__ */ a("h3", null, "Switches without switch-labels", -1), U_ = /* @__PURE__ */ a("h3", null, "Switches with switch-labels", -1), j_ = /* @__PURE__ */ a("br", null, null, -1), z_ = /* @__PURE__ */ a("br", null, null, -1), G_ = /* @__PURE__ */ a("h2", null, "Checkboxes and Radiobuttons", -1), W_ = /* @__PURE__ */ a("h3", null, "Checkboxes [native]", -1), K_ = { class: "label inline" }, J_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for native checkboxes:", -1), Y_ = { class: "flex-container no-flex" }, Z_ = /* @__PURE__ */ a("a", { href: "#" }, "link", -1), Q_ = /* @__PURE__ */ a("h3", null, "Checkboxes (replaced)", -1), X_ = { class: "label inline" }, $_ = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for Replaced Input-Type-Checkbox:", -1), eC = { class: "flex-container no-flex" }, tC = /* @__PURE__ */ a("h3", null, "Radiobuttons [native]", -1), nC = { class: "label inline" }, iC = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for native radiobuttons:", -1), oC = { class: "flex-container no-flex" }, lC = /* @__PURE__ */ a("h3", null, "Radiobuttons (replaced)", -1), sC = { class: "label inline" }, aC = /* @__PURE__ */ a("span", { class: "label-text" }, "Label for Replaced Input-Type-Radio:", -1), rC = { class: "flex-container no-flex" }, dC = {
   class: "headline-demopage",
   id: "section-input-group"
 }, cC = /* @__PURE__ */ a("dt", null, "Selected value:", -1), uC = /* @__PURE__ */ a("h3", null, "Input Groups with Checkboxes/Radiobuttons (toggle-switches)", -1), mC = /* @__PURE__ */ a("dt", null, "Selected value(s):", -1), hC = /* @__PURE__ */ a("dt", null, "Selected value(s):", -1), pC = /* @__PURE__ */ a("dt", null, "Selected value(s):", -1), fC = /* @__PURE__ */ a("dt", null, "Selected value(s):", -1), gC = { class: "flex-container" }, yC = /* @__PURE__ */ a("small", null, "(values will not be submitted with the form!)", -1), bC = { class: "button-wrapper no-flex" }, xC = ["disabled"], _C = /* @__PURE__ */ a("span", { class: "icon-check" }, null, -1), CC = /* @__PURE__ */ a("span", null, "Native submit-button", -1), wC = [
@@ -19843,17 +19864,17 @@ const bo = /* @__PURE__ */ V(e_, [["render", c_]]), u_ = "comand-component-libra
   class: "headline-demopage",
   id: "section-fancybox"
 }, "Fancybox", -1), kw = /* @__PURE__ */ a("h3", null, "FancyBox with text", -1), vw = /* @__PURE__ */ a("h3", null, "FancyBox with large image given by url", -1), Tw = /* @__PURE__ */ a("img", {
-  src: k_,
+  src: k1,
   alt: "Alternative text"
 }, null, -1), Sw = [
   Tw
 ], Ow = /* @__PURE__ */ a("h3", null, "FancyBox with large image given by property", -1), Lw = /* @__PURE__ */ a("img", {
-  src: v_,
+  src: v1,
   alt: "Alternative text"
 }, null, -1), Iw = [
   Lw
 ], Bw = /* @__PURE__ */ a("h3", null, "FancyBox with image as object give by property", -1), Fw = /* @__PURE__ */ a("img", {
-  src: T_,
+  src: T1,
   alt: "Alternative text"
 }, null, -1), Dw = [
   Fw
@@ -19978,7 +19999,7 @@ function mv(e, n, t, s, i, o) {
     class: "page-wrapper",
     id: o.templateId
   }, [
-    L_,
+    L1,
     i.showLeftSidebar ? (l(), w(u, {
       key: 0,
       cmdHeadline: { headlineText: "Site Settings", headlineLevel: 3, textAlign: "center" },
@@ -20002,19 +20023,19 @@ function mv(e, n, t, s, i, o) {
               onToggleCollapse: (z) => x.boxToggled(0, z)
             }, {
               body: k(() => [
-                a("label", I_, [
-                  B_,
+                a("label", I1, [
+                  B1,
                   X(a("select", {
                     id: "select-template",
                     "onUpdate:modelValue": n[0] || (n[0] = (z) => i.selectedTemplate = z)
-                  }, A_, 512), [
+                  }, A1, 512), [
                     [Po, i.selectedTemplate]
                   ])
                 ]),
                 a("div", null, [
-                  E_,
-                  a("div", H_, [
-                    a("label", q_, [
+                  E1,
+                  a("div", H1, [
+                    a("label", q1, [
                       X(a("input", {
                         type: "radio",
                         id: "default-color-scheme",
@@ -20024,9 +20045,9 @@ function mv(e, n, t, s, i, o) {
                       }, null, 512), [
                         [Dt, i.colorScheme]
                       ]),
-                      R_
+                      R1
                     ]),
-                    a("label", N_, [
+                    a("label", N1, [
                       X(a("input", {
                         type: "radio",
                         id: "light-mode",
@@ -20036,9 +20057,9 @@ function mv(e, n, t, s, i, o) {
                       }, null, 512), [
                         [Dt, i.colorScheme]
                       ]),
-                      U_
+                      U1
                     ]),
-                    a("label", j_, [
+                    a("label", j1, [
                       X(a("input", {
                         type: "radio",
                         id: "dark-mode",
@@ -20048,7 +20069,7 @@ function mv(e, n, t, s, i, o) {
                       }, null, 512), [
                         [Dt, i.colorScheme]
                       ]),
-                      z_
+                      z1
                     ])
                   ])
                 ])
@@ -20073,7 +20094,7 @@ function mv(e, n, t, s, i, o) {
                       href: o.sectionName(z),
                       onClick: (yv) => o.updateSettingsSidebar(o.componentNameWithPrefix(z)),
                       title: "Go to component"
-                    }, y(o.readableComponentName(z)), 9, G_)
+                    }, y(o.readableComponentName(z)), 9, G1)
                   ], 2))), 128))
                 ])
               ]),
@@ -20135,37 +20156,37 @@ function mv(e, n, t, s, i, o) {
           ]),
           _: 1
         }, 8, ["openBoxesByDefault"]),
-        a("dl", W_, [
-          K_,
+        a("dl", W1, [
+          K1,
           a("dd", null, y(i.packageJson.dependencies["comand-frontend-framework"].replace("^", "")), 1),
-          J_,
+          J1,
           a("dd", null, y(i.packageJson.version), 1)
         ])
       ]),
       closed: k(() => [
-        a("div", Y_, [
+        a("div", Y1, [
           a("a", {
             href: "#",
             class: "button primary",
             title: "Open Template Selection",
             onClick: n[9] || (n[9] = T((x) => o.openBox(0), ["prevent"]))
-          }, Q_),
+          }, Q1),
           a("a", {
             href: "#",
             class: "button primary",
             title: "Open Components Overview",
             onClick: n[10] || (n[10] = T((x) => o.openBox(1), ["prevent"]))
-          }, $_),
+          }, $1),
           a("a", {
             href: "#",
             class: "button primary",
             title: "Open Page-Templates",
             onClick: n[11] || (n[11] = T((x) => o.openBox(2), ["prevent"]))
-          }, t1),
+          }, t_),
           a("a", {
             href: "#",
             onClick: n[12] || (n[12] = T((x) => i.showLeftSidebar = !1, ["prevent"]))
-          }, i1)
+          }, i_)
         ])
       ]),
       _: 1
@@ -20183,17 +20204,17 @@ function mv(e, n, t, s, i, o) {
       ]),
       _: 1
     }),
-    i.componentView ? (l(), r("main", o1, [
+    i.componentView ? (l(), r("main", o_, [
       h(C, null, {
         default: k(() => [
-          l1
+          l_
         ]),
         _: 1
       }),
       h(C, null, {
         default: k(() => [
-          a("h2", s1, [
-            a1,
+          a("h2", s_, [
+            a_,
             a("a", {
               href: "#",
               class: "button small icon-cog",
@@ -20201,7 +20222,7 @@ function mv(e, n, t, s, i, o) {
               onClick: n[13] || (n[13] = T((x) => o.openSettingsSidebar("CmdAddressData"), ["prevent"]))
             })
           ]),
-          a("div", r1, [
+          a("div", r_, [
             h(b, I({
               ref: "CmdAddressData",
               addressData: i.addressData
@@ -20212,10 +20233,10 @@ function mv(e, n, t, s, i, o) {
       }),
       h(C, null, {
         default: k(() => [
-          d1,
-          c1,
-          a("div", u1, [
-            a("ul", m1, [
+          d_,
+          c_,
+          a("div", u_, [
+            a("ul", m_, [
               a("li", null, [
                 a("a", {
                   href: "#",
@@ -20224,7 +20245,7 @@ function mv(e, n, t, s, i, o) {
                   id: "status-default"
                 }, " Default ", 2)
               ]),
-              a("li", h1, [
+              a("li", h_, [
                 a("a", {
                   href: "#",
                   onClick: n[15] || (n[15] = T((x) => o.setStatus("error", !1), ["prevent"])),
@@ -20277,10 +20298,10 @@ function mv(e, n, t, s, i, o) {
             novalidate: "novalidate"
           }, {
             default: k(() => [
-              a("fieldset", p1, [
-                f1,
-                a("h2", g1, [
-                  y1,
+              a("fieldset", p_, [
+                f_,
+                a("h2", g_, [
+                  y_,
                   a("a", {
                     href: "#",
                     class: "button small icon-cog",
@@ -20292,7 +20313,7 @@ function mv(e, n, t, s, i, o) {
                   status: i.validationStatus,
                   disabled: i.disabledStatus
                 }), null, 16, ["status", "disabled"]),
-                a("div", b1, [
+                a("div", b_, [
                   h(v, {
                     labelText: "Input for datalist:",
                     element: "input",
@@ -20304,7 +20325,7 @@ function mv(e, n, t, s, i, o) {
                     tooltipText: "This is a tooltip"
                   }, null, 8, ["status", "disabled", "datalist"])
                 ]),
-                a("div", x1, [
+                a("div", x_, [
                   h(v, I({
                     labelText: "Input (type search (without search-button)):",
                     element: "input",
@@ -20326,8 +20347,8 @@ function mv(e, n, t, s, i, o) {
                     tooltipText: "This is a tooltip"
                   }, { useCustomTooltip: !1 }), null, 16, ["status", "disabled"])
                 ]),
-                _1,
-                a("div", C1, [
+                __,
+                a("div", C_, [
                   h(v, {
                     element: "input",
                     type: "text",
@@ -20341,7 +20362,7 @@ function mv(e, n, t, s, i, o) {
                     disabled: i.disabledStatus
                   }, {
                     labeltext: k(() => [
-                      w1
+                      w_
                     ]),
                     _: 1
                   }, 8, ["modelValue", "status", "disabled"]),
@@ -20373,7 +20394,7 @@ function mv(e, n, t, s, i, o) {
                     disabled: i.disabledStatus
                   }, null, 8, ["modelValue", "status", "disabled"])
                 ]),
-                a("div", k1, [
+                a("div", k_, [
                   h(v, {
                     labelText: "Label for emailfield (with icon):",
                     element: "input",
@@ -20484,9 +20505,9 @@ function mv(e, n, t, s, i, o) {
                   status: i.validationStatus,
                   disabled: i.disabledStatus
                 }, null, 8, ["modelValue", "status", "disabled"]),
-                v1,
-                a("h3", T1, [
-                  S1,
+                v_,
+                a("h3", T_, [
+                  S_,
                   a("a", {
                     href: "#",
                     class: "button small icon-cog",
@@ -20494,7 +20515,7 @@ function mv(e, n, t, s, i, o) {
                     onClick: n[33] || (n[33] = T((x) => o.openSettingsSidebar("CmdFakeSelect"), ["prevent"]))
                   })
                 ]),
-                a("div", O1, [
+                a("div", O_, [
                   h(B, I({ ref: "CmdFakeSelect" }, e.cmdFakeSelectSettingsData, {
                     selectData: i.fakeSelectOptionsData,
                     modelValue: i.fakeSelectDefault,
@@ -20546,21 +20567,21 @@ function mv(e, n, t, s, i, o) {
                     type: "color"
                   }, null, 8, ["status", "disabled", "selectData", "modelValue"])
                 ]),
-                L1,
-                I1,
+                L_,
+                I_,
                 h(F, {
                   labelText: "Progress Bar (with optional output):",
                   id: "progress-bar2",
                   max: "100"
                 }),
-                B1,
+                B_,
                 a("div", {
                   class: _(["label", i.validationStatus])
                 }, [
-                  F1,
-                  a("span", D1, [
-                    a("label", M1, [
-                      V1,
+                  F_,
+                  a("span", D_, [
+                    a("label", M_, [
+                      V_,
                       X(a("input", {
                         type: "number",
                         class: _(i.validationStatus),
@@ -20569,12 +20590,12 @@ function mv(e, n, t, s, i, o) {
                         min: "0",
                         max: "100",
                         id: "range-value"
-                      }, null, 10, P1), [
+                      }, null, 10, P_), [
                         [Nt, i.rangeValue]
                       ])
                     ]),
-                    a("label", A1, [
-                      E1,
+                    a("label", A_, [
+                      E_,
                       X(a("input", {
                         type: "range",
                         class: "range-slider",
@@ -20583,15 +20604,15 @@ function mv(e, n, t, s, i, o) {
                         disabled: i.disabledStatus,
                         min: "0",
                         max: "100"
-                      }, null, 8, H1), [
+                      }, null, 8, H_), [
                         [Nt, i.rangeValue]
                       ])
                     ])
                   ])
                 ], 2),
-                q1,
-                R1,
-                N1,
+                q_,
+                R_,
+                N_,
                 h(v, {
                   element: "input",
                   type: "checkbox",
@@ -20616,7 +20637,7 @@ function mv(e, n, t, s, i, o) {
                   status: i.validationStatus,
                   disabled: i.disabledStatus
                 }, null, 8, ["modelValue", "status", "disabled"]),
-                U1,
+                U_,
                 h(v, {
                   element: "input",
                   type: "checkbox",
@@ -20691,16 +20712,16 @@ function mv(e, n, t, s, i, o) {
                 }, null, 8, ["modelValue", "status", "disabled"]),
                 a("p", null, [
                   E(" checkbox (required) with boolean: " + y(i.checkboxRequiredValue), 1),
-                  j1,
+                  j_,
                   E(" checkbox with boolean: " + y(i.checkboxValue), 1),
-                  z1,
+                  z_,
                   E(" checkboxes with values: " + y(i.checkboxValues), 1)
                 ]),
-                G1,
-                W1,
-                a("div", K1, [
-                  J1,
-                  a("div", Y1, [
+                G_,
+                W_,
+                a("div", K_, [
+                  J_,
+                  a("div", Y_, [
                     h(v, {
                       element: "input",
                       labelText: "Label for checkbox with boolean",
@@ -20745,16 +20766,16 @@ function mv(e, n, t, s, i, o) {
                     }, {
                       labeltext: k(() => [
                         E(" Labeltext with "),
-                        Z1,
+                        Z_,
                         E(" given by slot ")
                       ]),
                       _: 1
                     }, 8, ["modelValue", "status", "disabled"])
                   ])
                 ]),
-                Q1,
-                a("div", X1, [
-                  $1,
+                Q_,
+                a("div", X_, [
+                  $_,
                   a("div", eC, [
                     h(v, {
                       element: "input",
@@ -22317,11 +22338,11 @@ function mv(e, n, t, s, i, o) {
       ]),
       _: 1
     }, 8, ["openSidebar", "onToggleSidebar"])) : m("", !0)
-  ], 8, O_)), [
+  ], 8, O1)), [
     [Lo]
   ]);
 }
-const _v = /* @__PURE__ */ V(S_, [["render", mv]]), Cv = {
+const _v = /* @__PURE__ */ V(S1, [["render", mv]]), Cv = {
   // el = real dom-element
   mounted(e) {
     if (e.tagName === "INPUT" || e.tagName === "SELECT" || e.tagName === "TEXTAREA" || e.tagName === "A")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.1.49",
+  "version": "4.1.51",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/components/CmdBasicForm.vue

@@ -304,6 +304,13 @@ export default {
         }
     },
     props: {
+        /**
+         * website-key for Google-recaptcha v3
+         */
+        reCaptchaWebsiteKey: {
+            type: String,
+            required: false
+        },
         /**
          * activate if native submit-event should be used
          */
@@ -487,8 +494,27 @@ export default {
                 return
             }
 
+            // prevent original levent form CmdForm (to avoid submit and reload)
+            event.originalEvent.preventDefault()
+
+            if(this.reCaptchaWebsiteKey) {
+                grecaptcha.ready(function() {
+                    grecaptcha.execute(this.reCaptchaWebsiteKey, {action: 'submit'}).then(function(token) {
+                        this.submitForm(token)
+                    })
+                })
+            } else {
+                this.submitForm()
+            }
+        },
+        submitForm(token) {
             // custom submit of form-data
             const customSubmitFormData = new FormData()
+
+            if(token) {
+                customSubmitFormData.set("recaptchaToken", token)
+            }
+
             // get keys for form-elements from configuration
             const configurationEntries = Object.keys(this.configuration)
 
@@ -500,7 +526,15 @@ export default {
             fetch(this.formAction, {method: this.cmdForm?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
                 if(response.ok) {
                     this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully"))
-
+                    for (let key in this.formData) {
+                        if(key === "salutation") {
+                            this.formData[key].value = this.configuration.salutation.default
+                        } else if(key === "acceptPrivacy") {
+                            this.formData[key].value = false
+                        } else {
+                            this.formData[key].value = ""
+                        }
+                    }
                 } else {
                     this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent"))
                 }
@@ -508,9 +542,6 @@ export default {
                 this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent"))
                 console.error(error)
             })
-
-            // prevent original levent form CmdForm (to avoid submit and reload)
-           event.originalEvent.preventDefault()
         },
         onCountrySelect(event) {
           this.cityBeforeZip = event === 'us' || event === 'uk';

package/src/components/CmdForm.vue

@@ -210,10 +210,10 @@ export default {
                     event.preventDefault()
                     this.errorOccurred = true
                 }
-            } else {
-                this.submitFormData(event)
+                } else {
+                    this.submitFormData(event)
+                }
             }
-        }
     },
     watch: {
         formElements: {