comand-component-library 4.2.91 → 4.2.93

package/dist/comand-component-library.js

@@ -168,19 +168,19 @@ function $l(e, t, n) {
   }
   return !1;
 }
-let Pe = !1;
+let Me = !1;
 function ei(e) {
-  return typeof e == "boolean" && (Pe = e), Pe;
+  return typeof e == "boolean" && (Me = e), Me;
 }
 function eo(e) {
-  const t = typeof e == "string" ? Qe(e, !0, Pe) : e;
+  const t = typeof e == "string" ? Qe(e, !0, Me) : e;
   if (t) {
     const n = be(t.provider, t.prefix), s = t.name;
     return n.icons[s] || (n.missing.has(s) ? null : void 0);
   }
 }
 function to(e, t) {
-  const n = Qe(e, !0, Pe);
+  const n = Qe(e, !0, Me);
   if (!n)
     return !1;
   const s = be(n.provider, n.prefix);
@@ -189,7 +189,7 @@ function to(e, t) {
 function ti(e, t) {
   if (typeof e != "object")
     return !1;
-  if (typeof t != "string" && (t = e.provider || ""), Pe && !t && !e.prefix) {
+  if (typeof t != "string" && (t = e.provider || ""), Me && !t && !e.prefix) {
     let i = !1;
     return $n(e) && (e.prefix = "", Xn(e, (l, d) => {
       d && to(l, d) && (i = !0);
@@ -853,7 +853,7 @@ function Fo(e) {
     e.iconsLoaderFlag = !1, Co(e);
   }));
 }
-function Mo(e, t) {
+function Po(e, t) {
   e.iconsToLoad ? e.iconsToLoad = e.iconsToLoad.concat(t).sort() : e.iconsToLoad = t, e.iconsQueueFlag || (e.iconsQueueFlag = !0, setTimeout(() => {
     e.iconsQueueFlag = !1;
     const { provider: n, prefix: s } = e, i = e.iconsToLoad;
@@ -889,7 +889,7 @@ function Mo(e, t) {
     });
   }));
 }
-const Po = (e, t) => {
+const Mo = (e, t) => {
   const n = wo(e, !0, ei()), s = xo(n);
   if (!s.pending.length) {
     let u = !0;
@@ -918,7 +918,7 @@ const Po = (e, t) => {
     I.has(b) || (I.add(b), i[h][p].push(b));
   }), l.forEach((u) => {
     const { provider: h, prefix: p } = u;
-    i[h][p].length && Mo(u, i[h][p]);
+    i[h][p].length && Po(u, i[h][p]);
   }), t ? ko(t, s, l) : xn;
 };
 function Vo(e, t) {
@@ -1155,7 +1155,7 @@ const zo = {
       if (!s)
         return (!this._loadingIcon || this._loadingIcon.name !== e) && (this.abortLoading(), this._name = "", s !== null && (this._loadingIcon = {
           name: e,
-          abort: Po([n], () => {
+          abort: Mo([n], () => {
             this.counter++;
           })
         })), null;
@@ -2212,7 +2212,7 @@ function Fa(e, t, n, s, i, l) {
     ], 64)) : m("", !0)
   ]);
 }
-const Ma = /* @__PURE__ */ B(La, [["render", Fa]]), Pa = {
+const Pa = /* @__PURE__ */ B(La, [["render", Fa]]), Ma = {
   name: "CmdTooltipForFormElements",
   props: {
     /**
@@ -2273,7 +2273,7 @@ const Ma = /* @__PURE__ */ B(La, [["render", Fa]]), Pa = {
   }
 };
 function Va(e, t, n, s, i, l) {
-  const d = Ma, c = pi;
+  const d = Pa, c = pi;
   return a(), C(c, {
     ref: "tooltip",
     class: x(["cmd-tooltip-for-form-elements box", n.validationStatus]),
@@ -2287,7 +2287,7 @@ function Va(e, t, n, s, i, l) {
     _: 1
   }, 8, ["class", "relatedId", "scrollContainer"]);
 }
-const zt = /* @__PURE__ */ B(Pa, [["render", Va]]), Wt = {
+const zt = /* @__PURE__ */ B(Ma, [["render", Va]]), Wt = {
   data() {
     return {
       defaultMessageProperties: {
@@ -3124,11 +3124,9 @@ const Kt = {
     onBlur(e) {
       this.validateInput(e), this.closeTooltipOnBlur(), this.$emit("blur", e);
     },
-    /*
-    onInput(event) {
-        this.validateInput(event)
-        this.$emit('update:modelValue', event.target.value)
-    },*/
+    onInput(e) {
+      this.validateInput(e), this.$emit("update:modelValue", e.target.value);
+    },
     onChange(e) {
       if (this.validateInput(e), typeof this.modelValue == "boolean")
         this.$emit("update:modelValue", e.target.checked);
@@ -3248,7 +3246,7 @@ function ks(e, t, n, s, i, l) {
             class: n.inputClass,
             onFocus: t[1] || (t[1] = (u) => e.tooltip = !0),
             onBlur: t[2] || (t[2] = (...u) => l.onBlur && l.onBlur(...u)),
-            onInput: t[3] || (t[3] = (...u) => e.onInput && e.onInput(...u)),
+            onInput: t[3] || (t[3] = (...u) => l.onInput && l.onInput(...u)),
             onMouseover: t[4] || (t[4] = (...u) => l.datalistFocus && l.datalistFocus(...u)),
             onKeyup: t[5] || (t[5] = (...u) => e.checkForCapsLock && e.checkForCapsLock(...u)),
             onChange: t[6] || (t[6] = (u) => e.$emit("change", u)),
@@ -3300,8 +3298,8 @@ function ks(e, t, n, s, i, l) {
         n.onLabel && n.offLabel ? n.onLabel && n.offLabel ? (a(), r(w, { key: 1 }, [
           o("span", ls, [
             o("input", T(l.elementAttributes, {
-              onChange: t[15] || (t[15] = (...u) => l.onChange && l.onChange(...u)),
-              onBlur: t[16] || (t[16] = (...u) => l.onBlur && l.onBlur(...u)),
+              onChange: t[14] || (t[14] = (...u) => l.onChange && l.onChange(...u)),
+              onBlur: t[15] || (t[15] = (...u) => l.onBlur && l.onBlur(...u)),
               checked: l.isChecked,
               value: n.inputValue,
               class: [n.inputClass, e.validationStatus],
@@ -3323,7 +3321,6 @@ function ks(e, t, n, s, i, l) {
           o("input", T(l.elementAttributes, {
             onChange: t[12] || (t[12] = (...u) => l.onChange && l.onChange(...u)),
             onBlur: t[13] || (t[13] = (...u) => l.onBlur && l.onBlur(...u)),
-            onInput: t[14] || (t[14] = (...u) => e.onInput && e.onInput(...u)),
             checked: l.isChecked,
             value: n.inputValue,
             class: [n.inputClass, e.validationStatus, l.toggleSwitchIconClass, { "replace-input-type": n.replaceInputType }],
@@ -3348,8 +3345,8 @@ function ks(e, t, n, s, i, l) {
     ], 64)) : m("", !0),
     n.element === "select" ? (a(), r("select", T({ key: 2 }, l.elementAttributes, {
       id: e.htmlId,
-      onBlur: t[17] || (t[17] = (...u) => l.onBlur && l.onBlur(...u)),
-      onChange: t[18] || (t[18] = (...u) => l.onChange && l.onChange(...u))
+      onBlur: t[16] || (t[16] = (...u) => l.onBlur && l.onBlur(...u)),
+      onChange: t[17] || (t[17] = (...u) => l.onChange && l.onChange(...u))
     }), [
       n.groupSelectOptionsByInitialLetters ? (a(!0), r(w, { key: 1 }, P(l.initialLetters, (u, h) => (a(), r("optgroup", {
         label: h,
@@ -3370,9 +3367,9 @@ function ks(e, t, n, s, i, l) {
       id: e.htmlId,
       value: n.modelValue,
       maxlength: l.getMaxLength(),
-      onInput: t[19] || (t[19] = (...u) => e.onInput && e.onInput(...u)),
-      onFocus: t[20] || (t[20] = (u) => e.tooltip = !0),
-      onBlur: t[21] || (t[21] = (...u) => l.onBlur && l.onBlur(...u))
+      onInput: t[18] || (t[18] = (...u) => l.onInput && l.onInput(...u)),
+      onFocus: t[19] || (t[19] = (u) => e.tooltip = !0),
+      onBlur: t[20] || (t[20] = (...u) => l.onBlur && l.onBlur(...u))
     }), null, 16, fs)) : m("", !0),
     n.element === "textarea" && n.showCharactersTextarea ? (a(), r("span", hs, [
       n.textCharactersLeft ? (a(), r("span", gs, g(n.textCharactersLeft), 1)) : m("", !0),
@@ -3387,7 +3384,7 @@ function ks(e, t, n, s, i, l) {
       }, null, 8, ["iconClass"])) : m("", !0),
       o("input", T(l.elementAttributes, {
         id: e.htmlId,
-        onInput: t[22] || (t[22] = (...u) => e.onInput && e.onInput(...u)),
+        onInput: t[21] || (t[21] = (...u) => l.onInput && l.onInput(...u)),
         maxlength: l.getMaxLength(),
         value: n.modelValue
       }), null, 16, bs),
@@ -3396,7 +3393,7 @@ function ks(e, t, n, s, i, l) {
         href: "#",
         class: x(["button flex-none", { disabled: e.$attrs.disabled }]),
         title: n.iconSearch.tooltip,
-        onClick: t[23] || (t[23] = k((...u) => l.executeSearch && l.executeSearch(...u), ["prevent"]))
+        onClick: t[22] || (t[22] = k((...u) => l.executeSearch && l.executeSearch(...u), ["prevent"]))
       }, [
         f(d, {
           iconClass: n.iconSearch.iconClass
@@ -3406,7 +3403,7 @@ function ks(e, t, n, s, i, l) {
         key: 2,
         class: "deleteicon",
         href: "#",
-        onClick: t[24] || (t[24] = k((...u) => l.deleteInput && l.deleteInput(...u), ["prevent"])),
+        onClick: t[23] || (t[23] = k((...u) => l.deleteInput && l.deleteInput(...u), ["prevent"])),
         title: n.iconDelete?.tooltip
       }, [
         f(d, {
@@ -3419,7 +3416,7 @@ function ks(e, t, n, s, i, l) {
     key: 1,
     class: "button"
   }, l.buttonAttrs, {
-    onClick: t[25] || (t[25] = (...u) => l.submit && l.submit(...u))
+    onClick: t[24] || (t[24] = (...u) => l.submit && l.submit(...u))
   }), [
     n.nativeButton?.icon?.show && (n.nativeButton?.icon?.position === "before" || !n.nativeButton?.icon?.position) ? (a(), C(d, {
       key: 0,
@@ -3552,7 +3549,7 @@ const K = /* @__PURE__ */ B(za, [["render", ks]]), ws = {
 }, Fs = {
   key: 1,
   class: "locality"
-}, Ms = { key: 0 }, Ps = {
+}, Ps = { key: 0 }, Ms = {
   key: 3,
   class: "country-name"
 }, Vs = { class: "street-address" }, As = {
@@ -3632,9 +3629,9 @@ function qs(e, t, n, s, i, l) {
         t[7] || (t[7] = o("br", null, null, -1)),
         n.addressEntry.miscInfo ? (a(), r(w, { key: 2 }, [
           o("span", null, g(n.addressEntry.miscInfo), 1),
-          n.addressEntry.country ? (a(), r("br", Ms)) : m("", !0)
+          n.addressEntry.country ? (a(), r("br", Ps)) : m("", !0)
         ], 64)) : m("", !0),
-        n.addressEntry.country ? (a(), r("span", Ps, g(n.addressEntry.country), 1)) : m("", !0)
+        n.addressEntry.country ? (a(), r("span", Ms, g(n.addressEntry.country), 1)) : m("", !0)
       ], 8, Is)) : (a(), r(w, { key: 1 }, [
         e.editing ? (a(), r(w, { key: 1 }, [
           f(c, {
@@ -4774,7 +4771,7 @@ const Yt = /* @__PURE__ */ B(pr, [["render", wr]]), Tr = {
 }, Lr = ["id"], Ir = {
   key: 0,
   "aria-hidden": "true"
-}, Br = ["title", "aria-errormessage", "id"], Dr = ["aria-expanded"], Fr = ["title"], Mr = ["src", "alt"], Pr = {
+}, Br = ["title", "aria-errormessage", "id"], Dr = ["aria-expanded"], Fr = ["title"], Pr = ["src", "alt"], Mr = {
   key: 3,
   class: "option-name"
 }, Vr = {
@@ -4846,7 +4843,7 @@ function Gr(e, t, n, s, i, l) {
             src: l.pathFlag(l.optionCountry),
             alt: l.optionCountry,
             class: x(["flag", l.optionCountry])
-          }, null, 10, Mr)) : n.type === "color" ? (a(), r("span", {
+          }, null, 10, Pr)) : n.type === "color" ? (a(), r("span", {
             key: 1,
             style: Ke("background: " + l.optionColor)
           }, null, 4)) : m("", !0),
@@ -4855,7 +4852,7 @@ function Gr(e, t, n, s, i, l) {
             type: l.optionIcon?.iconType,
             iconClass: l.optionIcon?.iconClass
           }, null, 8, ["type", "iconClass"])) : m("", !0),
-          l.optionName ? (a(), r("span", Pr, g(l.optionName), 1)) : m("", !0),
+          l.optionName ? (a(), r("span", Mr, g(l.optionName), 1)) : m("", !0),
           n.iconDropdown ? (a(), C(d, {
             key: 4,
             iconClass: n.iconDropdown.iconClass,
@@ -5539,7 +5536,7 @@ const gi = /* @__PURE__ */ B(Qr, [["render", ud]]), cd = {
     };
   }
 };
-class Me {
+class Pe {
   static PATTERN_SURNAME = /^[a-züöäßáéíóàèìòêîô '-]+$/i;
   static PATTERN_EMAIL = /^[a-z\d._%+-]+@[a-z\d._%+-]+\.[a-z]{2,}$/i;
   static PATTERN_MESSAGE = /^.{2,500}$/;
@@ -5548,7 +5545,7 @@ class Me {
     this.label = t;
   }
   validate(t) {
-    const n = this.validateRequired(t.lastName.value, Me.PATTERN_SURNAME, this.label("form_error_invalid_surname")), s = this.validateRequired(t.email.value, Me.PATTERN_EMAIL, this.label("form_error_invalid_email")), i = this.validateRequired(t.userMessage.value, Me.PATTERN_MESSAGE, this.label("form_error_invalid_message"));
+    const n = this.validateRequired(t.lastName.value, Pe.PATTERN_SURNAME, this.label("form_error_invalid_surname")), s = this.validateRequired(t.email.value, Pe.PATTERN_EMAIL, this.label("form_error_invalid_email")), i = this.validateRequired(t.userMessage.value, Pe.PATTERN_MESSAGE, this.label("form_error_invalid_message"));
     return t.lastName.error = n[0], t.lastName.errorMessage = n[1], t.email.error = s[0], t.email.errorMessage = s[1], t.userMessage.error = i[0], t.userMessage.errorMessage = i[1], console.log("validate", t.email), t.acceptPrivacy.error = !1, t.error = t.lastName.error || t.email.error || t.userMessage.error, t;
   }
   validatePrivacy(t) {
@@ -6577,7 +6574,7 @@ const yi = /* @__PURE__ */ B(Od, [["render", Fd]]), re = (e) => {
       }));
     },
     async loadContent(e) {
-      (await Md(e)).startsWith("image/") ? this.fancyBoxImageUrl = e : fetch(e).then((n) => n.text()).then((n) => this.fancyBoxContent = n).catch((n) => console.error(`Error loading ${this.url}: ${n}`));
+      (await Pd(e)).startsWith("image/") ? this.fancyBoxImageUrl = e : fetch(e).then((n) => n.text()).then((n) => this.fancyBoxContent = n).catch((n) => console.error(`Error loading ${this.url}: ${n}`));
     },
     // switch to previous-item (in fancybox-gallery)
     showPrevItem() {
@@ -6619,11 +6616,11 @@ const yi = /* @__PURE__ */ B(Od, [["render", Fd]]), re = (e) => {
     }
   }
 });
-async function Md(e) {
+async function Pd(e) {
   const t = await fetch(e, { method: "HEAD" });
   return t.ok ? (t.headers.get("Content-Type") || "").split(";")[0] : "text/html";
 }
-const Pd = bi, Vd = ["aria-label"], Ad = { class: "flex-container" }, Ed = {
+const Md = bi, Vd = ["aria-label"], Ad = { class: "flex-container" }, Ed = {
   key: 1,
   class: "button-wrapper flex-none"
 }, Hd = ["title"], qd = ["title"], Rd = ["title"], jd = {
@@ -6756,7 +6753,7 @@ function Qd(e, t, n, s, i, l) {
     }, null, 8, ["thumbnailScrollerItems", "onClick", "activeItemIndex"])) : m("", !0)
   ], 42, Vd);
 }
-const Xd = /* @__PURE__ */ B(Pd, [["render", Qd]]), $d = {
+const Xd = /* @__PURE__ */ B(Md, [["render", Qd]]), $d = {
   emits: ["submit"],
   mixins: [
     X,
@@ -6770,7 +6767,7 @@ const Xd = /* @__PURE__ */ B(Pd, [["render", Qd]]), $d = {
   data() {
     return {
       sendSuccessfully: !1,
-      validator: new Me((e) => e),
+      validator: new Pe((e) => e),
       formData: {
         salutation: { value: this.configuration.salutation.default },
         lastName: { value: "" },
@@ -7889,7 +7886,7 @@ const _u = /* @__PURE__ */ B(vu, [["render", Su]]), Ou = {
   watch: (() => {
     (void 0).updateActiveClass();
   })
-}, Lu = { key: 1 }, Iu = ["href"], Bu = { key: 2 }, Du = { key: 0 }, Fu = { key: 1 }, Mu = { key: 1 }, Pu = { key: 1 };
+}, Lu = { key: 1 }, Iu = ["href"], Bu = { key: 2 }, Du = { key: 0 }, Fu = { key: 1 }, Pu = { key: 1 }, Mu = { key: 1 };
 function Vu(e, t, n, s, i, l) {
   const d = U, c = _u, u = Ce, h = oe, p = Ci, b = R, S = he;
   return a(), C(pe, { name: n.transition }, {
@@ -7991,12 +7988,12 @@ function Vu(e, t, n, s, i, l) {
                 F(g(I.descriptionData.text), 1)
               ], 64))
             ]),
-            n.alignDescriptionTermRight ? (a(), r("dt", Mu, [
+            n.alignDescriptionTermRight ? (a(), r("dt", Pu, [
               I.descriptionTerm?.cmdIcon?.iconClass ? (a(), C(b, T({
                 key: 0,
                 ref_for: !0
               }, I.descriptionTerm.cmdIcon), null, 16)) : m("", !0),
-              I.descriptionTerm?.text ? (a(), r("span", Pu, g(I.descriptionTerm?.text), 1)) : m("", !0)
+              I.descriptionTerm?.text ? (a(), r("span", Mu, g(I.descriptionTerm?.text), 1)) : m("", !0)
             ])) : m("", !0)
           ], 64))), 128))
         ]))
@@ -8957,7 +8954,7 @@ const ki = /* @__PURE__ */ B(vc, [["render", Bc]]), Dc = {
       navigator.clipboard.writeText(t), alert(t + " was copied to clipboard");
     }
   }
-}, Fc = ["title"], Mc = { key: 1 }, Pc = { ref: "code" }, Vc = {
+}, Fc = ["title"], Pc = { key: 1 }, Mc = { ref: "code" }, Vc = {
   key: 2,
   ref: "code"
 };
@@ -8978,8 +8975,8 @@ function Ac(e, t, n, s, i, l) {
         type: n.cmdIcon.iconType
       }, null, 8, ["iconClass", "type"])
     ], 8, Fc)) : m("", !0),
-    n.preformatted ? (a(), r("pre", Mc, [
-      o("code", Pc, [
+    n.preformatted ? (a(), r("pre", Pc, [
+      o("code", Mc, [
         t[1] || (t[1] = F(`
             `, -1)),
         D(e.$slots, "default"),
@@ -9779,7 +9776,7 @@ function Fm(e, t, n, s, i, l) {
     }))
   ]);
 }
-const Oi = /* @__PURE__ */ B(Im, [["render", Fm]]), Mm = {
+const Oi = /* @__PURE__ */ B(Im, [["render", Fm]]), Pm = {
   name: "CmdImageGallery",
   mixins: [Z],
   props: {
@@ -9871,10 +9868,10 @@ const Oi = /* @__PURE__ */ B(Im, [["render", Fm]]), Mm = {
       });
     }
   }
-}, Pm = { class: "cmd-image-gallery grid-container-create-columns" }, Vm = ["onClick", "title"];
+}, Mm = { class: "cmd-image-gallery grid-container-create-columns" }, Vm = ["onClick", "title"];
 function Am(e, t, n, s, i, l) {
   const d = U, c = oe;
-  return a(), r("div", Pm, [
+  return a(), r("div", Mm, [
     n.cmdHeadline?.headlineText || e.editModeContext ? (a(), C(d, A(T({ key: 0 }, n.cmdHeadline)), null, 16)) : m("", !0),
     e.editModeContext ? n.images.length ? (a(!0), r(w, { key: 2 }, P(n.images, (u, h) => (a(), C(c, {
       key: h,
@@ -9915,7 +9912,7 @@ function Am(e, t, n, s, i, l) {
     ], 64))
   ]);
 }
-const Em = /* @__PURE__ */ B(Mm, [["render", Am]]), Hm = {
+const Em = /* @__PURE__ */ B(Pm, [["render", Am]]), Hm = {
   name: "CmdImageZoom",
   props: {
     /**
@@ -11001,7 +10998,7 @@ function Fp(e, t, n, s, i, l) {
     ])
   ]);
 }
-const Ii = /* @__PURE__ */ B(wp, [["render", Fp]]), Mp = {
+const Ii = /* @__PURE__ */ B(wp, [["render", Fp]]), Pp = {
   emits: ["click"],
   name: "CmdMultistepFormProgressBar",
   data() {
@@ -11128,7 +11125,7 @@ const Ii = /* @__PURE__ */ B(wp, [["render", Fp]]), Mp = {
       immediate: !0
     }
   }
-}, Pp = {
+}, Mp = {
   key: 0,
   class: "number"
 }, Vp = { key: 2 }, Ap = {
@@ -11156,7 +11153,7 @@ function Hp(e, t, n, s, i, l) {
         onClick: (p) => l.clickedStep(p, h)
       }, {
         default: v(() => [
-          n.showStepNumber ? (a(), r("span", Pp, g(h + 1), 1)) : m("", !0),
+          n.showStepNumber ? (a(), r("span", Mp, g(h + 1), 1)) : m("", !0),
           u.iconClass ? (a(), C(d, {
             key: 1,
             iconClass: u.iconClass,
@@ -11181,7 +11178,7 @@ function Hp(e, t, n, s, i, l) {
     ], 2))), 128))
   ], 2);
 }
-const Bi = /* @__PURE__ */ B(Mp, [["render", Hp]]), qp = {
+const Bi = /* @__PURE__ */ B(Pp, [["render", Hp]]), qp = {
   name: "CmdMultistepFormWrapper",
   data() {
     return {
@@ -11192,6 +11189,10 @@ const Bi = /* @__PURE__ */ B(Mp, [["render", Hp]]), qp = {
     };
   },
   props: {
+    requiredPages: {
+      type: Array,
+      default: []
+    },
     /**
      * properties for CmdMultistepFormProgressBar-component
      */
@@ -11258,9 +11259,20 @@ const Bi = /* @__PURE__ */ B(Mp, [["render", Hp]]), qp = {
     }
   },
   computed: {
-    // check if at leat one step has status 'error'
+    pagesWithError() {
+      if (this.inputMade.length === 0)
+        return this.requiredPages;
+      let e = new Set(this.requiredPages).difference(new Set(this.inputMade));
+      for (let t = 0; t < this.validationStatusForSteps.length; t++)
+        e.add(this.validationStatusForSteps[t].page);
+      return [...e].toSorted();
+    },
+    // check if at least one step has status 'error'
     atleastOneStepWithError() {
-      return this.validationStatusForSteps.length > 0 || this.inputMade.length === 0;
+      if (this.validationStatusForSteps.length > 0 || this.inputMade.length === 0)
+        return !0;
+      const e = new Set(this.requiredPages), t = new Set(this.inputMade);
+      return console.log("requiredPagesSet", e), console.log("inputMadeSet", t), !e.isSubsetOf(t);
     },
     // check if a page ha
     pageHasError() {
@@ -11339,9 +11351,9 @@ function Up(e, t, n, s, i, l) {
       class: x("multistep-page-" + h),
       key: p
     }, [
-      i.validationStatusForSteps.some((b) => b.page === h) ? (a(), C(c, {
+      i.validationStatusForSteps.some((b) => b.page === i.currentPage) ? (a(), C(c, {
         key: 0,
-        systemMessage: l.getSystemMessage(h),
+        systemMessage: l.getSystemMessage(i.currentPage),
         validationStatus: "error"
       }, null, 8, ["systemMessage"])) : m("", !0),
       D(e.$slots, "page-" + h, {
@@ -11355,6 +11367,15 @@ function Up(e, t, n, s, i, l) {
       [$, h === i.currentPage]
     ])), 128)),
     z(o("div", jp, [
+      l.pagesWithError.length ? (a(), C(c, {
+        key: 0,
+        validationStatus: "error"
+      }, {
+        default: v(() => [
+          o("p", null, "Please fill all required fields on the pages " + g(l.pagesWithError.join(", ")) + " correctly!", 1)
+        ]),
+        _: 1
+      })) : m("", !0),
       D(e.$slots, "page-last", {
         setErrorOnPage: (h) => l.setErrorOnPage(e.step, h),
         removeErrorOnPage: () => l.removeErrorOnPage(e.step),
@@ -12603,8 +12624,8 @@ const Di = /* @__PURE__ */ B(Lf, [["render", If]]), Bf = {
       });
     }
   }
-}, Df = { class: "button-wrapper" }, Ff = ["title"], Mf = { key: 1 };
-function Pf(e, t, n, s, i, l) {
+}, Df = { class: "button-wrapper" }, Ff = ["title"], Pf = { key: 1 };
+function Mf(e, t, n, s, i, l) {
   const d = Di;
   return a(), r("footer", {
     class: x(["cmd-page-footer flex-container", { "small-buttons": n.useSmallButtons }])
@@ -12628,12 +12649,12 @@ function Pf(e, t, n, s, i, l) {
           key: 0,
           class: x(l.buttonPrintViewOptions.icon?.iconClass)
         }, null, 2)) : m("", !0),
-        l.buttonPrintViewOptions.text ? (a(), r("span", Mf, g(l.buttonPrintViewOptions.text), 1)) : m("", !0)
+        l.buttonPrintViewOptions.text ? (a(), r("span", Pf, g(l.buttonPrintViewOptions.text), 1)) : m("", !0)
       ], 10, Ff)) : m("", !0)
     ])
   ], 2);
 }
-const Vf = /* @__PURE__ */ B(Bf, [["render", Pf]]), Af = {
+const Vf = /* @__PURE__ */ B(Bf, [["render", Mf]]), Af = {
   name: "CmdPageHeader",
   props: {
     /**
@@ -13860,7 +13881,7 @@ function Fh(e, t, n, s, i, l) {
     ])) : m("", !0)
   ], 2);
 }
-const Mh = /* @__PURE__ */ B(Bh, [["render", Fh]]), Ph = {
+const Ph = /* @__PURE__ */ B(Bh, [["render", Fh]]), Mh = {
   name: "CmdSwitchLanguage",
   emits: ["click"],
   data() {
@@ -13941,7 +13962,7 @@ function qh(e, t, n, s, i, l) {
     ])
   ]);
 }
-const Rh = /* @__PURE__ */ B(Ph, [["render", qh]]), jh = {
+const Rh = /* @__PURE__ */ B(Mh, [["render", qh]]), jh = {
   name: "CmdTable",
   data() {
     return {
@@ -14778,7 +14799,7 @@ const yg = /* @__PURE__ */ B(fg, [["render", gg]]), bg = {
     };
   }
 };
-function Mi(e, t) {
+function Pi(e, t) {
   return function() {
     return e.apply(t, arguments);
   };
@@ -14790,10 +14811,10 @@ const { toString: xg } = Object.prototype, { getPrototypeOf: en } = Object, it =
 function Cg(e) {
   return e !== null && !Ee(e) && e.constructor !== null && !Ee(e.constructor) && ne(e.constructor.isBuffer) && e.constructor.isBuffer(e);
 }
-const Pi = ae("ArrayBuffer");
+const Mi = ae("ArrayBuffer");
 function vg(e) {
   let t;
-  return typeof ArrayBuffer < "u" && ArrayBuffer.isView ? t = ArrayBuffer.isView(e) : t = e && e.buffer && Pi(e.buffer), t;
+  return typeof ArrayBuffer < "u" && ArrayBuffer.isView ? t = ArrayBuffer.isView(e) : t = e && e.buffer && Mi(e.buffer), t;
 }
 const kg = lt("string"), ne = lt("function"), Vi = lt("number"), ot = (e) => e !== null && typeof e == "object", wg = (e) => e === !0 || e === !1, We = (e) => {
   if (it(e) !== "object")
@@ -14804,7 +14825,7 @@ const kg = lt("string"), ne = lt("function"), Vi = lt("number"), ot = (e) => e !
   let t;
   return e && (typeof FormData == "function" && e instanceof FormData || ne(e.append) && ((t = it(e)) === "formdata" || // detect form-data instance
   t === "object" && ne(e.toString) && e.toString() === "[object FormData]"));
-}, Bg = ae("URLSearchParams"), [Dg, Fg, Mg, Pg] = ["ReadableStream", "Request", "Response", "Headers"].map(ae), Vg = (e) => e.trim ? e.trim() : e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
+}, Bg = ae("URLSearchParams"), [Dg, Fg, Pg, Mg] = ["ReadableStream", "Request", "Response", "Headers"].map(ae), Vg = (e) => e.trim ? e.trim() : e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
 function He(e, t, { allOwnKeys: n = !1 } = {}) {
   if (e === null || typeof e > "u")
     return;
@@ -14839,7 +14860,7 @@ function It() {
   return t;
 }
 const Ag = (e, t, n, { allOwnKeys: s } = {}) => (He(t, (i, l) => {
-  n && ne(i) ? e[l] = Mi(i, n) : e[l] = i;
+  n && ne(i) ? e[l] = Pi(i, n) : e[l] = i;
 }, { allOwnKeys: s }), e), Eg = (e) => (e.charCodeAt(0) === 65279 && (e = e.slice(1)), e), Hg = (e, t, n, s) => {
   e.prototype = Object.create(t.prototype, s), e.prototype.constructor = e, Object.defineProperty(e, "super", {
     value: t.prototype
@@ -14885,7 +14906,7 @@ const Ag = (e, t, n, { allOwnKeys: s } = {}) => (He(t, (i, l) => {
   function(n, s, i) {
     return s.toUpperCase() + i;
   }
-), Mn = (({ hasOwnProperty: e }) => (t, n) => e.call(t, n))(Object.prototype), Kg = ae("RegExp"), qi = (e, t) => {
+), Pn = (({ hasOwnProperty: e }) => (t, n) => e.call(t, n))(Object.prototype), Kg = ae("RegExp"), qi = (e, t) => {
   const n = Object.getOwnPropertyDescriptors(e), s = {};
   He(n, (i, l) => {
     let d;
@@ -14914,10 +14935,10 @@ const Ag = (e, t, n, { allOwnKeys: s } = {}) => (He(t, (i, l) => {
   };
   return _e(e) ? s(e) : s(String(e).split(t)), n;
 }, Zg = () => {
-}, Qg = (e, t) => e != null && Number.isFinite(e = +e) ? e : t, gt = "abcdefghijklmnopqrstuvwxyz", Pn = "0123456789", Ri = {
-  DIGIT: Pn,
+}, Qg = (e, t) => e != null && Number.isFinite(e = +e) ? e : t, gt = "abcdefghijklmnopqrstuvwxyz", Mn = "0123456789", Ri = {
+  DIGIT: Mn,
   ALPHA: gt,
-  ALPHA_DIGIT: gt + gt.toUpperCase() + Pn
+  ALPHA_DIGIT: gt + gt.toUpperCase() + Mn
 }, Xg = (e = 16, t = Ri.ALPHA_DIGIT) => {
   let n = "";
   const { length: s } = t;
@@ -14947,7 +14968,7 @@ const ey = (e) => {
   return n(e, 0);
 }, ty = ae("AsyncFunction"), ny = (e) => e && (ot(e) || ne(e)) && ne(e.then) && ne(e.catch), _ = {
   isArray: _e,
-  isArrayBuffer: Pi,
+  isArrayBuffer: Mi,
   isBuffer: Cg,
   isFormData: Ig,
   isArrayBufferView: vg,
@@ -14958,8 +14979,8 @@ const ey = (e) => {
   isPlainObject: We,
   isReadableStream: Dg,
   isRequest: Fg,
-  isResponse: Mg,
-  isHeaders: Pg,
+  isResponse: Pg,
+  isHeaders: Mg,
   isUndefined: Ee,
   isDate: Tg,
   isFile: Sg,
@@ -14984,8 +15005,8 @@ const ey = (e) => {
   forEachEntry: Ng,
   matchAll: zg,
   isHTMLForm: Wg,
-  hasOwnProperty: Mn,
-  hasOwnProp: Mn,
+  hasOwnProperty: Pn,
+  hasOwnProp: Pn,
   // an alias to avoid ESLint no-prototype-builtins detection
   reduceDescriptors: qi,
   freezeMethods: Yg,
@@ -15786,7 +15807,7 @@ const Qi = (e) => {
     h && d.set(i, h);
   }
   return t;
-}, Fy = typeof XMLHttpRequest < "u", My = Fy && function(e) {
+}, Fy = typeof XMLHttpRequest < "u", Py = Fy && function(e) {
   return new Promise(function(n, s) {
     const i = Qi(e);
     let l = i.data;
@@ -15843,7 +15864,7 @@ const Qi = (e) => {
     }
     p.send(l || null);
   });
-}, Py = (e, t) => {
+}, My = (e, t) => {
   let n = new AbortController(), s;
   const i = function(u) {
     if (!s) {
@@ -15959,7 +15980,7 @@ const Hy = async (e) => {
     fetchOptions: S
   } = Qi(e);
   h = h ? (h + "").toLowerCase() : "text";
-  let [I, L] = i || l || d ? Py([i, l], d) : [], O, V;
+  let [I, L] = i || l || d ? My([i, l], d) : [], O, V;
   const q = () => {
     !O && setTimeout(() => {
       I && I.unsubscribe();
@@ -16023,12 +16044,12 @@ const Hy = async (e) => {
       }
     ) : E.from(j, j && j.code, e, V);
   }
-}), Mt = {
+}), Pt = {
   http: iy,
-  xhr: My,
+  xhr: Py,
   fetch: Ry
 };
-_.forEach(Mt, (e, t) => {
+_.forEach(Pt, (e, t) => {
   if (e) {
     try {
       Object.defineProperty(e, "name", { value: t });
@@ -16046,7 +16067,7 @@ const Nn = (e) => `- ${e}`, jy = (e) => _.isFunction(e) || e === null || e === !
     for (let l = 0; l < t; l++) {
       n = e[l];
       let d;
-      if (s = n, !jy(n) && (s = Mt[(d = String(n)).toLowerCase()], s === void 0))
+      if (s = n, !jy(n) && (s = Pt[(d = String(n)).toLowerCase()], s === void 0))
         throw new E(`Unknown adapter '${d}'`);
       if (s)
         break;
@@ -16066,7 +16087,7 @@ const Nn = (e) => `- ${e}`, jy = (e) => _.isFunction(e) || e === null || e === !
     }
     return s;
   },
-  adapters: Mt
+  adapters: Pt
 };
 function xt(e) {
   if (e.cancelToken && e.cancelToken.throwIfRequested(), e.signal && e.signal.aborted)
@@ -16132,10 +16153,10 @@ function Uy(e, t, n) {
       throw new E("Unknown option " + l, E.ERR_BAD_OPTION);
   }
 }
-const Pt = {
+const Mt = {
   assertOptions: Uy,
   validators: ln
-}, ue = Pt.validators;
+}, ue = Mt.validators;
 let ye = class {
   constructor(t) {
     this.defaults = t, this.interceptors = {
@@ -16171,13 +16192,13 @@ let ye = class {
   _request(t, n) {
     typeof t == "string" ? (n = n || {}, n.url = t) : n = t || {}, n = xe(this.defaults, n);
     const { transitional: s, paramsSerializer: i, headers: l } = n;
-    s !== void 0 && Pt.assertOptions(s, {
+    s !== void 0 && Mt.assertOptions(s, {
       silentJSONParsing: ue.transitional(ue.boolean),
       forcedJSONParsing: ue.transitional(ue.boolean),
       clarifyTimeoutError: ue.transitional(ue.boolean)
     }, !1), i != null && (_.isFunction(i) ? n.paramsSerializer = {
       serialize: i
-    } : Pt.assertOptions(i, {
+    } : Mt.assertOptions(i, {
       encode: ue.function,
       serialize: ue.function
     }, !0)), n.method = (n.method || this.defaults.method || "get").toLowerCase();
@@ -16401,7 +16422,7 @@ Object.entries(Vt).forEach(([e, t]) => {
   Vt[t] = e;
 });
 function nl(e) {
-  const t = new ye(e), n = Mi(ye.prototype.request, t);
+  const t = new ye(e), n = Pi(ye.prototype.request, t);
   return _.extend(n, ye.prototype, t, { allOwnKeys: !0 }), _.extend(n, t, null, { allOwnKeys: !0 }), n.create = function(i) {
     return nl(xe(e, i));
   }, n;
@@ -17587,7 +17608,7 @@ function Fb(e, t, n, s, i, l) {
     ], 64))), 128))
   ]);
 }
-const Mb = /* @__PURE__ */ B(Bb, [["render", Fb]]), Pb = {
+const Pb = /* @__PURE__ */ B(Bb, [["render", Fb]]), Mb = {
   name: "MultipleListsOfLinks",
   props: {
     segments: {
@@ -17610,7 +17631,7 @@ function Ab(e, t, n, s, i, l) {
     ], 64))), 128))
   ]);
 }
-const Eb = /* @__PURE__ */ B(Pb, [["render", Ab]]), Hb = {
+const Eb = /* @__PURE__ */ B(Mb, [["render", Ab]]), Hb = {
   name: "ContactInformation",
   props: {
     /**
@@ -18218,7 +18239,7 @@ const Ub = /* @__PURE__ */ B(Hb, [["render", jb]]), ll = [
   }
 };
 function Yb(e, t, n, s, i, l) {
-  const d = Ub, c = il, u = Eb, h = Mb;
+  const d = Ub, c = il, u = Eb, h = Pb;
   return a(), r(w, null, [
     f(c, null, {
       default: v(() => [
@@ -18329,10 +18350,10 @@ const Xb = /* @__PURE__ */ B(Jb, [["render", Qb]]), $b = {
     };
   }
 };
-function Mk(e = !1) {
+function Pk(e = !1) {
   return e ? (/* @__PURE__ */ new Date()).toISOString() : (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
 }
-function Pk() {
+function Mk() {
   const e = /* @__PURE__ */ new Date(), t = String(e.getHours()).padStart(2, "0"), n = String(e.getMinutes()).padStart(2, "0");
   return t + ":" + n;
 }
@@ -18863,7 +18884,7 @@ function Fx(e, t, n, s, i, l) {
     _: 1
   }, 16);
 }
-const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
+const Px = /* @__PURE__ */ B(Dx, [["render", Fx]]), Mx = [
   {
     text: "Account owner:",
     value: "Company name",
@@ -19921,9 +19942,9 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
 ], IC = [{ id: 1, displayValue: "Option #1", icon: { iconClass: "icon-home" } }, { id: 2, displayValue: "Option #2", icon: { iconClass: "icon-company" } }, { id: 3, displayValue: "Option #3", icon: { iconClass: "icon-globe" } }], BC = { labelText: "Label for inputfield (search) with smart-search:" }, DC = {
   listOfRecommendations: IC,
   cmdFormElement: BC
-}, FC = { toggleSwitch: !0, labelText: "I accept that anonymous data will be send to the platform I share this page on and accept the <a href='/content/fancybox-content.html' class='fancybox'>Data Privacy</a>!", required: !0 }, MC = [{ buttonClass: "social-network-facebook", path: "https://www.facebook.com/sharer/sharer.php?u=", tooltip: "Share this page on facebook", iconClass: "icon-facebook", linkText: "Share" }, { buttonClass: "social-network-x", path: "https://twitter.com/home?status=", tooltip: "Share this page on X", iconClass: "icon-x", linkText: "Share" }, { buttonClass: "social-network-xing", path: "https://www.xing.com/spi/shares/new?sc_p=b7910_cb&amp;url=", tooltip: "Share this page on xing", iconClass: "icon-xing", linkText: "Share" }, { buttonClass: "social-network-linkedin", path: "https://www.linkedin.com/cws/share?url=", tooltip: "Share this page on linkedin", iconClass: "icon-linkedin", linkText: "Share" }, { buttonClass: "social-network-instagram", path: "https://www.instagram.com/", tooltip: "Share this page on instagram", iconClass: "icon-instagram", linkText: "Share" }], PC = {
+}, FC = { toggleSwitch: !0, labelText: "I accept that anonymous data will be send to the platform I share this page on and accept the <a href='/content/fancybox-content.html' class='fancybox'>Data Privacy</a>!", required: !0 }, PC = [{ buttonClass: "social-network-facebook", path: "https://www.facebook.com/sharer/sharer.php?u=", tooltip: "Share this page on facebook", iconClass: "icon-facebook", linkText: "Share" }, { buttonClass: "social-network-x", path: "https://twitter.com/home?status=", tooltip: "Share this page on X", iconClass: "icon-x", linkText: "Share" }, { buttonClass: "social-network-xing", path: "https://www.xing.com/spi/shares/new?sc_p=b7910_cb&amp;url=", tooltip: "Share this page on xing", iconClass: "icon-xing", linkText: "Share" }, { buttonClass: "social-network-linkedin", path: "https://www.linkedin.com/cws/share?url=", tooltip: "Share this page on linkedin", iconClass: "icon-linkedin", linkText: "Share" }, { buttonClass: "social-network-instagram", path: "https://www.instagram.com/", tooltip: "Share this page on instagram", iconClass: "icon-instagram", linkText: "Share" }], MC = {
   cmdFormElement: FC,
-  networks: MC
+  networks: PC
 }, VC = [
   {
     text: "Tab 1",
@@ -20895,7 +20916,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
     text: "Zimbabwe",
     value: "zw"
   }
-], QC = "comand-component-library", XC = "4.2.91", $C = "GPL-3.0-only", e1 = "CoManD-UI", t1 = "module", n1 = { prepublishOnly: "npm run build-lib", dev: "vite", build: "vite build", "build-lib": "vite build && gulp", preview: "vite preview" }, i1 = ["dist", "src"], l1 = { ".": "./dist/comand-component-library.js", "./css.js": "./src/css.js", "./comand-component-library.css": "./dist/comand-component-library.css", "./variables.scss": "./src/assets/styles/variables.scss", "./export-example-data.js": "./src/assets/data/export-example-data.js", "./countries.json": "./src/assets/lists-of-data/countries.json", "./currencies.json": "./src/assets/lists-of-data/currencies.json", "./dial-codes.json": "./src/assets/lists-of-data/dial-codes.json", "./us-cities.json": "./src/assets/lists-of-data/us-cities.json" }, o1 = { "clickout-event": "^1.1.2", "comand-frontend-framework": "^4.3.25", "comand-ui-iconfonts": "^1.0.19", "core-js": "^3.20.1", prismjs: "^1.27.0", vue: "^3.5.25", "vue-router": "^4.0.12", vuex: "^4.0.2" }, a1 = { "@iconify/vue": "^4.0.0", "@vitejs/plugin-vue": "^6.0.2", "@vue/test-utils": "^2.0.0-0", axios: "^1.7.2", gulp: "^4.0.2", sass: "^1.54.9", "unplugin-vue-components": "^0.24.0", vite: "^7.2.4", "vue-jest": "^5.0.0-0" }, s1 = {
+], QC = "comand-component-library", XC = "4.2.93", $C = "GPL-3.0-only", e1 = "CoManD-UI", t1 = "module", n1 = { prepublishOnly: "npm run build-lib", dev: "vite", build: "vite build", "build-lib": "vite build && gulp", preview: "vite preview" }, i1 = ["dist", "src"], l1 = { ".": "./dist/comand-component-library.js", "./css.js": "./src/css.js", "./comand-component-library.css": "./dist/comand-component-library.css", "./variables.scss": "./src/assets/styles/variables.scss", "./export-example-data.js": "./src/assets/data/export-example-data.js", "./countries.json": "./src/assets/lists-of-data/countries.json", "./currencies.json": "./src/assets/lists-of-data/currencies.json", "./dial-codes.json": "./src/assets/lists-of-data/dial-codes.json", "./us-cities.json": "./src/assets/lists-of-data/us-cities.json" }, o1 = { "clickout-event": "^1.1.2", "comand-frontend-framework": "^4.3.25", "comand-ui-iconfonts": "^1.0.19", "core-js": "^3.20.1", prismjs: "^1.27.0", vue: "^3.5.25", "vue-router": "^4.0.12", vuex: "^4.0.2" }, a1 = { "@iconify/vue": "^4.0.0", "@vitejs/plugin-vue": "^6.0.2", "@vue/test-utils": "^2.0.0-0", axios: "^1.7.2", gulp: "^4.0.2", sass: "^1.54.9", "unplugin-vue-components": "^0.24.0", vite: "^7.2.4", "vue-jest": "^5.0.0-0" }, s1 = {
   name: QC,
   version: XC,
   license: $C,
@@ -22163,7 +22184,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
       },
       // assign data from json files to data-properties
       addressData: ll,
-      bankAccountData: Px,
+      bankAccountData: Mx,
       boxProductData: Ax,
       boxUserData: Vx,
       breadcrumbsData: qx,
@@ -22191,7 +22212,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
       selectOptionsData: OC,
       slideshowData: LC,
       smartSearchData: DC,
-      socialNetworksData: PC,
+      socialNetworksData: MC,
       tableDataSmall: RC,
       tableDataLarge: KC,
       tabsData: VC,
@@ -22434,7 +22455,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
 }, T1 = {
   class: "headline-demopage",
   id: "section-address-data"
-}, S1 = { class: "flex-container" }, _1 = { class: "flex-container" }, O1 = { class: "list-status" }, L1 = { class: "error" }, I1 = { class: "flex-container" }, B1 = { class: "headline-demopage" }, D1 = { class: "flex-container" }, F1 = { class: "flex-container" }, M1 = { class: "flex-container" }, P1 = { class: "flex-container" }, V1 = { class: "flex-container" }, A1 = { class: "headline-demopage" }, E1 = { class: "flex-container" }, H1 = { class: "flex-container flex-items-flex-none" }, q1 = {
+}, S1 = { class: "flex-container" }, _1 = { class: "flex-container" }, O1 = { class: "list-status" }, L1 = { class: "error" }, I1 = { class: "flex-container" }, B1 = { class: "headline-demopage" }, D1 = { class: "flex-container" }, F1 = { class: "flex-container" }, P1 = { class: "flex-container" }, M1 = { class: "flex-container" }, V1 = { class: "flex-container" }, A1 = { class: "headline-demopage" }, E1 = { class: "flex-container" }, H1 = { class: "flex-container flex-items-flex-none" }, q1 = {
   class: "inline",
   for: "range-value"
 }, R1 = ["disabled"], j1 = { for: "range-slider" }, U1 = ["disabled"], N1 = { class: "label inline" }, z1 = { class: "flex-container flex-items-flex-none" }, W1 = { class: "label inline" }, G1 = { class: "flex-container flex-items-flex-none" }, K1 = { class: "label inline" }, Y1 = { class: "flex-container flex-items-flex-none" }, J1 = { class: "label inline" }, Z1 = { class: "flex-container flex-items-flex-none" }, Q1 = {
@@ -22485,7 +22506,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
 }, kv = {
   class: "headline-demopage",
   id: "section-multistep-form-wrapper"
-}, wv = ["onClick"], Tv = ["onClick"], Sv = ["onClick"], _v = { class: "input-wrapper" }, Ov = { class: "flex-container" }, Lv = ["onClick"], Iv = { key: 0 }, Bv = ["onClick"], Dv = { key: 0 }, Fv = ["onClick"], Mv = { key: 0 }, Pv = { key: 0 }, Vv = { key: 0 }, Av = { class: "button-wrapper reverse justify-content-space-between" }, Ev = {
+}, wv = ["onClick"], Tv = ["onClick"], Sv = ["onClick"], _v = { class: "input-wrapper" }, Ov = { class: "flex-container" }, Lv = ["onClick"], Iv = { key: 0 }, Bv = ["onClick"], Dv = { key: 0 }, Fv = ["onClick"], Pv = { key: 0 }, Mv = { key: 0 }, Vv = { key: 0 }, Av = { class: "button-wrapper reverse justify-content-space-between" }, Ev = {
   class: "headline-demopage",
   id: "section-newsletter-subscription"
 }, Hv = {
@@ -22556,7 +22577,7 @@ const Mx = /* @__PURE__ */ B(Dx, [["render", Fx]]), Px = [
   id: "content"
 };
 function rk(e, t, n, s, i, l) {
-  const d = Xt, c = vi, u = lh, h = Zt, p = wi, b = mh, S = il, I = hi, L = Ti, O = K, V = Mh, q = Jt, N = Kf, j = Yt, Y = gi, ge = or, H = mr, W = xi, se = ki, ke = Ec, ee = Wc, dl = Cm, ul = Oi, Re = U, Le = R, on = oe, cl = Em, ml = Nm, te = he, pl = sp, fl = Mx, hl = Li, gl = de("router-view"), an = Bi, rt = ve, sn = Np, yl = Yp, bl = vf, xl = Vf, Cl = Rf, vl = Ii, kl = Xb, dt = Qf, rn = rh, wl = kh, Tl = Ih, Sl = Di, _l = Rh, dn = Qh, Ol = Fi, Ll = Ci, ut = pg, Il = yi, Bl = yg, ct = pi, Dl = kb, Fl = ol, Ml = hm, Pl = cm, Vl = Xd, Al = Ib, El = Ul("fancybox");
+  const d = Xt, c = vi, u = lh, h = Zt, p = wi, b = mh, S = il, I = hi, L = Ti, O = K, V = Ph, q = Jt, N = Kf, j = Yt, Y = gi, ge = or, H = mr, W = xi, se = ki, ke = Ec, ee = Wc, dl = Cm, ul = Oi, Re = U, Le = R, on = oe, cl = Em, ml = Nm, te = he, pl = sp, fl = Px, hl = Li, gl = de("router-view"), an = Bi, rt = ve, sn = Np, yl = Yp, bl = vf, xl = Vf, Cl = Rf, vl = Ii, kl = Xb, dt = Qf, rn = rh, wl = kh, Tl = Ih, Sl = Di, _l = Rh, dn = Qh, Ol = Fi, Ll = Ci, ut = pg, Il = yi, Bl = yg, ct = pi, Dl = kb, Fl = ol, Pl = hm, Ml = cm, Vl = Xd, Al = Ib, El = Ul("fancybox");
   return z((a(), r("div", {
     class: "page-wrapper",
     id: l.templateId
@@ -22927,7 +22948,7 @@ function rk(e, t, n, s, i, l) {
                   }, { useCustomTooltip: !1 }), null, 16, ["status", "disabled"])
                 ]),
                 t[163] || (t[163] = o("h3", null, "Inputfields in Columns", -1)),
-                o("div", M1, [
+                o("div", P1, [
                   f(O, {
                     element: "input",
                     type: "text",
@@ -22973,7 +22994,7 @@ function rk(e, t, n, s, i, l) {
                     disabled: i.disabledStatus
                   }, null, 8, ["modelValue", "status", "disabled"])
                 ]),
-                o("div", P1, [
+                o("div", M1, [
                   f(O, {
                     labelText: "Label for emailfield (with icon):",
                     element: "input",
@@ -24653,7 +24674,7 @@ function rk(e, t, n, s, i, l) {
             })
           ]),
           t[278] || (t[278] = o("h3", null, "Data provided by property", -1)),
-          f(sn, null, {
+          f(sn, { requiredPages: [1, 2] }, {
             "page-1": v((y) => [
               t[265] || (t[265] = o("h3", null, "Page 1 - all fields required", -1)),
               f(Y, {
@@ -24769,9 +24790,10 @@ function rk(e, t, n, s, i, l) {
                 F(" props.formDataForPage: " + g(y.formDataForPage), 1)
               ], 64)) : (a(), r(w, { key: 0 }, [
                 t[270] || (t[270] = o("h3", null, "Page 4", -1)),
+                F(" props.atleastOneStepWithError: " + g(y.atleastOneStepWithError) + " ", 1),
                 f(Y, {
                   cmdHeadline: { headlineText: "Confirmation", headlineLevel: 3 },
-                  submitButton: { disabled: y.atleastOneStepWithError, type: "button" },
+                  submitButton: { disabled: y.atleastOneStepWithError || !i.dataPrivacyChecked, type: "button" },
                   cancelButton: { show: !1 },
                   onSubmit: l.validateForm
                 }, {
@@ -24785,15 +24807,11 @@ function rk(e, t, n, s, i, l) {
                       id: "confirm-data-privac",
                       required: !0,
                       modelValue: i.dataPrivacyChecked,
-                      "onUpdate:modelValue": [
-                        t[99] || (t[99] = (M) => i.dataPrivacyChecked = M),
-                        (M) => l.setValue(M, "confirm-data-privacy", y)
-                      ],
-                      onValidationStatusChange: (M) => l.setValidationStatusCheckbox(M, "confirm-data-privacy", y)
-                    }, null, 8, ["modelValue", "onUpdate:modelValue", "onValidationStatusChange"])
+                      "onUpdate:modelValue": t[99] || (t[99] = (M) => i.dataPrivacyChecked = M)
+                    }, null, 8, ["modelValue"])
                   ]),
-                  _: 2
-                }, 1032, ["submitButton", "onSubmit"])
+                  _: 1
+                }, 8, ["submitButton", "onSubmit"])
               ], 64))
             ]),
             _: 1
@@ -24828,11 +24846,11 @@ function rk(e, t, n, s, i, l) {
             ]),
             "page-3": v((y) => [
               t[275] || (t[275] = F(" Content Page 3 ", -1)),
-              y.hasError ? (a(), r("span", Mv, "Error")) : m("", !0)
+              y.hasError ? (a(), r("span", Pv, "Error")) : m("", !0)
             ]),
             "page-4": v((y) => [
               t[276] || (t[276] = F(" Content Page 4 ", -1)),
-              y.hasError ? (a(), r("span", Pv, "Error")) : m("", !0)
+              y.hasError ? (a(), r("span", Mv, "Error")) : m("", !0)
             ]),
             "page-5": v((y) => [
               t[277] || (t[277] = F(" Content Page 5 ", -1)),
@@ -25503,7 +25521,7 @@ function rk(e, t, n, s, i, l) {
       ])]),
       _: 1
     }),
-    f(Ml),
+    f(Pl),
     f(Vl, {
       show: i.fancyBoxCookieDisclaimer,
       fancyBoxOptions: { closeIcon: { show: !1 } },
@@ -25512,7 +25530,7 @@ function rk(e, t, n, s, i, l) {
       defaultAriaLabelText: "Cookie Disclaimer"
     }, {
       default: v(() => [
-        f(Pl, {
+        f(Ml, {
           cookieOptions: i.cookieDisclaimerData,
           onCloseCookieDisclaimer: l.closeCookieDisclaimer,
           modelValue: i.acceptedCookies,
@@ -25701,7 +25719,7 @@ export {
   kh as CmdSiteSearch,
   nt as CmdSlideButton,
   Ih as CmdSlideshow,
-  Mh as CmdSmartSearch,
+  Ph as CmdSmartSearch,
   Di as CmdSocialNetworks,
   Rh as CmdSwitchLanguage,
   ve as CmdSystemMessage,
@@ -25721,13 +25739,13 @@ export {
   qk as DirTelephone,
   Ce as EditComponentWrapper,
   X as I18n,
-  Mb as MultipleBoxWrapper,
+  Pb as MultipleBoxWrapper,
   Eb as MultipleListsOfLinks,
   jk as capitalizeFirstLetter,
   fi as createHtmlId,
   Ae as createUuid,
-  Mk as currentDate,
-  Pk as currentTime,
+  Pk as currentDate,
+  Mk as currentTime,
   al as formatDate,
   ex as formatTime,
   Nk as fullName,

package/package.json

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

package/src/ComponentLibrary.vue

@@ -1318,7 +1318,7 @@
                     </a>
                 </h2>
                 <h3>Data provided by property</h3>
-                <CmdMultistepFormWrapper>
+                <CmdMultistepFormWrapper :requiredPages="[1, 2]">
                     <template v-slot:page-1="props">
                         <h3>Page 1 - all fields required</h3>
                         <CmdForm 
@@ -1406,9 +1406,10 @@
                     <template v-slot:page-last="props">
                         <template v-if="!confirmDataPrivacy">
                             <h3>Page 4</h3>
+                            props.atleastOneStepWithError: {{ props.atleastOneStepWithError }}
                             <CmdForm
                                 :cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
-                                :submitButton="{ disabled : props.atleastOneStepWithError, type: 'button' }"
+                                :submitButton="{ disabled : props.atleastOneStepWithError || !dataPrivacyChecked, type: 'button' }"
                                 :cancelButton="{ show: false }"
                                 @submit="validateForm"
                             >
@@ -1421,8 +1422,6 @@
                                     id="confirm-data-privac"
                                     :required="true"
                                     v-model="dataPrivacyChecked"
-                                    @update:modelValue="setValue($event, 'confirm-data-privacy', props)" 
-                                    @validation-status-change="setValidationStatusCheckbox($event, 'confirm-data-privacy', props)"
                                 />
                             </CmdForm>
                         </template>

package/src/components/CmdFormElement.vue

@@ -132,7 +132,6 @@
                         v-bind="elementAttributes"
                         @change="onChange"
                         @blur="onBlur"
-                        @input="onInput"
                         :checked="isChecked"
                         :value="inputValue"
                         :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
@@ -880,12 +879,11 @@ export default {
             this.validateInput(event)
             this.closeTooltipOnBlur()
             this.$emit('blur', event)
-        },
-        /*
+        },   
         onInput(event) {
             this.validateInput(event)
             this.$emit('update:modelValue', event.target.value)
-        },*/
+        },
         onChange(event) {
             this.validateInput(event)
             

package/src/components/CmdMultistepFormWrapper.vue

@@ -17,8 +17,11 @@
 
         <!-- begin main content for step -->
         <div v-show="step === currentPage" :class="'multistep-page-' + step" v-for="(step, index) in numberOfPages" :key="index">
-            <CmdSystemMessage v-if="validationStatusForSteps.some(item => item.page === step)" :systemMessage="getSystemMessage(step)" validationStatus="error" />
-
+            <CmdSystemMessage 
+                v-if="validationStatusForSteps.some(item => item.page === currentPage)" 
+                :systemMessage="getSystemMessage(currentPage)" 
+                validationStatus="error" 
+            />
             <!-- begin slot for page content -->
             <slot 
                 :name="'page-' + step" 
@@ -33,6 +36,10 @@
         <!-- end main content for step -->
 
         <div v-show="currentPage === numberOfPages" class="multistep-page-last">
+            <CmdSystemMessage v-if="pagesWithError.length" validationStatus="error">
+                <p>Please fill all required fields on the pages {{  pagesWithError.join(", ") }} correctly!</p>
+            </CmdSystemMessage>
+
              <!-- begin slot for last step -->
             <slot 
                 name="page-last"
@@ -76,6 +83,10 @@ export default {
         }
     },
     props: {
+        requiredPages: {
+            type: Array,
+            default: []
+        },
         /**
          * properties for CmdMultistepFormProgressBar-component
          */
@@ -164,9 +175,29 @@ export default {
         }
     },
     computed: {
-        // check if at leat one step has status 'error'
+        pagesWithError() {
+            if(this.inputMade.length === 0) {
+               return this.requiredPages
+            } 
+            let errorPages = new Set(this.requiredPages).difference(new Set(this.inputMade))
+
+            for(let i = 0; i < this.validationStatusForSteps.length; i++) {
+                errorPages.add(this.validationStatusForSteps[i].page)
+            }
+
+            return [...errorPages].toSorted()
+        },
+        // check if at least one step has status 'error'
         atleastOneStepWithError() {
-            return this.validationStatusForSteps.length > 0 || this.inputMade.length === 0
+            if(this.validationStatusForSteps.length > 0 || this.inputMade.length === 0) {
+                return true
+            }
+            const requiredPagesSet = new Set(this.requiredPages)
+            const inputMadeSet = new Set(this.inputMade)
+            console.log("requiredPagesSet", requiredPagesSet)
+            console.log("inputMadeSet", inputMadeSet)
+            return !requiredPagesSet.isSubsetOf(inputMadeSet) // check if all requiredPages are included in inputMade
+
         },
         // check if a page ha
         pageHasError() {