@muenchen/muc-patternlab-vue 1.13.0-beta.7 → 1.13.0-beta.9

package/muc-patternlab-vue.es.js

@@ -0,0 +1,1135 @@
+import { defineComponent as h, useAttrs as le, computed as m, openBlock as o, createElementBlock as i, normalizeClass as B, normalizeStyle as ie, createElementVNode as s, createVNode as C, unref as $, renderSlot as b, createBlock as W, createCommentVNode as k, toDisplayString as d, useSlots as Z, createTextVNode as y, Fragment as H, renderList as D, createSlots as re, withCtx as z, createStaticVNode as K, ref as L, onMounted as X, onUpdated as ce, withModifiers as P, mergeModels as R, useModel as j, withDirectives as N, vModelDynamic as ue, inject as de, provide as me, readonly as pe, toRef as _e, onBeforeUnmount as fe, watch as he, vModelText as J } from "vue";
+const ve = ["href"], T = /* @__PURE__ */ h({
+  __name: "MucIcon",
+  props: {
+    icon: {},
+    color: {}
+  },
+  setup(n) {
+    const t = le(), e = m(() => t.class ?? "icon");
+    return (a, c) => (o(), i("svg", {
+      "aria-hidden": "true",
+      class: B(e.value),
+      style: ie({ color: a.color })
+    }, [
+      s("use", {
+        href: "#icon-" + a.icon
+      }, null, 8, ve)
+    ], 6));
+  }
+}), ge = ["role", "aria-label"], be = { class: "container-fluid" }, ke = /* @__PURE__ */ h({
+  __name: "MucBanner",
+  props: {
+    type: { default: "info" }
+  },
+  setup(n) {
+    const t = n, e = m(() => {
+      switch (t.type) {
+        case "info":
+          return "m-banner--info";
+        case "success":
+          return "m-banner--success";
+        case "warning":
+          return "m-banner--warning";
+        case "emergency":
+          return "m-banner--emergency";
+        default:
+          return "m-banner--info";
+      }
+    }), a = m(() => {
+      switch (t.type) {
+        case "info":
+          return "dialog";
+        case "success":
+          return "dialog";
+        case "warning":
+          return "alert";
+        case "emergency":
+          return "alert";
+        default:
+          return "dialog";
+      }
+    }), c = m(() => {
+      switch (t.type) {
+        case "info":
+          return "Information";
+        case "success":
+          return "Erfolg";
+        case "warning":
+          return "Warnung";
+        case "emergency":
+          return "Emergency";
+        default:
+          return "Information";
+      }
+    }), r = m(() => {
+      switch (t.type) {
+        case "success":
+          return "check";
+        case "warning":
+        case "emergency":
+          return "warning";
+        case "info":
+        default:
+          return "information";
+      }
+    });
+    return (p, l) => (o(), i("div", null, [
+      s("div", null, [
+        s("div", {
+          class: B(["m-banner", e.value]),
+          role: a.value,
+          "aria-label": c.value
+        }, [
+          s("div", be, [
+            C($(T), { icon: r.value }, null, 8, ["icon"]),
+            b(p.$slots, "default", {}, void 0, !0)
+          ])
+        ], 10, ge)
+      ])
+    ]));
+  }
+}), E = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [a, c] of t)
+    e[a] = c;
+  return e;
+}, ye = /* @__PURE__ */ E(ke, [["__scopeId", "data-v-53bc7eca"]]), $e = ["disabled"], G = /* @__PURE__ */ h({
+  __name: "MucButton",
+  props: {
+    variant: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    icon: {},
+    iconAnimated: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(n, { emit: t }) {
+    const e = n, a = t, c = m(() => {
+      switch (e.variant) {
+        case "secondary":
+          return "m-button--secondary";
+        case "ghost":
+          return "m-button--ghost";
+        default:
+          return "m-button--primary";
+      }
+    }), r = m(
+      () => e.iconAnimated ? "m-button--animated-right" : ""
+    ), p = () => {
+      a("click");
+    };
+    return (l, v) => (o(), i("button", {
+      onClick: p,
+      disabled: l.disabled,
+      class: B(["m-button", [c.value, r.value]])
+    }, [
+      s("span", null, [
+        b(l.$slots, "default"),
+        l.icon ? (o(), W($(T), {
+          key: 0,
+          icon: l.icon,
+          class: "m-button__icon"
+        }, null, 8, ["icon"])) : k("", !0)
+      ])
+    ], 10, $e));
+  }
+}), Me = ["aria-label"], Ce = { class: "m-callout__inner" }, we = { class: "m-callout__icon" }, Ae = { class: "m-callout__body" }, Se = { class: "m-callout__body__inner" }, Te = { class: "m-callout__headline" }, Ie = { class: "m-callout__content" }, Fe = /* @__PURE__ */ h({
+  __name: "MucCallout",
+  props: {
+    type: { default: "info" }
+  },
+  setup(n) {
+    const t = n, e = m(() => {
+      switch (t.type) {
+        case "error":
+        case "warning":
+          return "warning";
+        case "success":
+          return "check";
+        default:
+          return "information";
+      }
+    }), a = m(() => {
+      switch (t.type) {
+        case "error":
+          return "m-callout--error";
+        case "warning":
+          return "m-callout--warning";
+        case "success":
+          return "m-callout--success";
+        default:
+          return "m-callout--default";
+      }
+    }), c = m(() => {
+      switch (t.type) {
+        case "success":
+          return "Erfolgreich";
+        case "warning":
+          return "Warnung";
+        case "error":
+          return "Error";
+        default:
+          return "Information";
+      }
+    });
+    return (r, p) => (o(), i("div", {
+      class: B(["m-callout", a.value]),
+      "aria-label": c.value
+    }, [
+      s("div", Ce, [
+        s("div", we, [
+          b(r.$slots, "icon", {}, () => [
+            C($(T), { icon: e.value }, null, 8, ["icon"])
+          ], !0)
+        ]),
+        s("div", Ae, [
+          s("div", Se, [
+            s("div", Te, [
+              b(r.$slots, "header", {}, void 0, !0)
+            ]),
+            s("div", Ie, [
+              s("p", null, [
+                b(r.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+              ])
+            ])
+          ])
+        ])
+      ])
+    ], 10, Me));
+  }
+}), xe = /* @__PURE__ */ E(Fe, [["__scopeId", "data-v-609b68ea"]]), Be = { class: "card-content" }, Le = { class: "card-header" }, Ve = {
+  key: 0,
+  class: "card-tagline"
+}, ze = /* @__PURE__ */ h({
+  __name: "MucCard",
+  props: {
+    title: {},
+    tagline: {}
+  },
+  emits: ["click"],
+  setup(n, { emit: t }) {
+    const e = t;
+    return (a, c) => (o(), i("div", {
+      class: "card",
+      onClick: c[0] || (c[0] = (r) => e("click", r))
+    }, [
+      s("div", Be, [
+        s("div", Le, [
+          b(a.$slots, "headerPrefix", {}, void 0, !0),
+          s("div", null, [
+            a.tagline ? (o(), i("div", Ve, d(a.tagline), 1)) : k("", !0),
+            s("div", null, [
+              s("h3", null, d(a.title), 1)
+            ])
+          ])
+        ]),
+        c[1] || (c[1] = s("div", { class: "muc-divider" }, null, -1)),
+        b(a.$slots, "content", {}, void 0, !0)
+      ])
+    ]));
+  }
+}), Ee = /* @__PURE__ */ E(ze, [["__scopeId", "data-v-acf0a1dd"]]), Re = { class: "container card-container" }, He = /* @__PURE__ */ h({
+  __name: "MucCardContainer",
+  setup(n) {
+    return (t, e) => (o(), i("div", Re, [
+      b(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), je = /* @__PURE__ */ E(He, [["__scopeId", "data-v-6740df8f"]]), Oe = { class: "m-comment__head" }, Pe = { class: "m-comment__initials" }, De = { class: "m-comment__info" }, Ge = { class: "m-comment__author" }, We = { key: 0 }, Ue = { class: "m-comment__author" }, Ne = { class: "m-comment__date" }, qe = ["aria-label"], Ze = {
+  key: 0,
+  class: "m-star-rating__item m-star-rating__item--half"
+}, Ke = { class: "m-star-rating__numeric" }, Xe = { class: "m-comment__body" }, Je = { class: "m-comment__headline" }, Qe = { class: "m-comment__text" }, Ye = "de-DE", et = 0.2, tt = 0.8, O = 5, Q = /* @__PURE__ */ h({
+  __name: "MucComment",
+  props: {
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(n) {
+    const t = Z(), e = n, a = m(() => !!t.date), c = m(() => e.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), r = m(
+      () => Math.min(Math.max(e.rating, 0), O)
+    ), p = m(() => r.value.toLocaleString(Ye.valueOf(), {
+      minimumFractionDigits: 1
+    })), l = m(() => {
+      const v = +(r.value % 1).toFixed(1);
+      let A = Math.min(Math.floor(r.value), O), I = Math.floor(O - r.value), f = !1;
+      return r.value !== 0 && r.value !== O && (v <= et ? I++ : v >= tt ? A++ : f = !0), {
+        fullStars: A,
+        emptyStars: I,
+        isHalfStar: f
+      };
+    });
+    return (v, A) => (o(), i("div", {
+      class: B(["m-comment", c.value])
+    }, [
+      s("div", Oe, [
+        s("div", Pe, [
+          b(v.$slots, "initials")
+        ]),
+        s("div", De, [
+          s("span", Ge, [
+            b(v.$slots, "author")
+          ]),
+          a.value ? (o(), i("span", We, [
+            s("span", Ue, [
+              A[0] || (A[0] = y("  ")),
+              b(v.$slots, "datePrefix")
+            ]),
+            s("span", Ne, [
+              A[1] || (A[1] = y(" ")),
+              b(v.$slots, "date")
+            ])
+          ])) : k("", !0),
+          s("div", {
+            class: "m-star-rating",
+            role: "img",
+            "aria-label": `Bewertung: ${v.rating} von ${O} Sternen`
+          }, [
+            (o(!0), i(H, null, D(l.value.fullStars, (I) => (o(), i("div", {
+              key: I,
+              class: "m-star-rating__item m-star-rating__item--full"
+            }, [
+              C($(T), { icon: "solid-star" })
+            ]))), 128)),
+            l.value.isHalfStar ? (o(), i("div", Ze, [
+              C($(T), { icon: "half-star" })
+            ])) : k("", !0),
+            (o(!0), i(H, null, D(l.value.emptyStars, (I) => (o(), i("div", {
+              key: I,
+              class: "m-star-rating__item"
+            }, [
+              C($(T), { icon: "solid-star" })
+            ]))), 128)),
+            s("div", Ke, d(p.value), 1)
+          ], 8, qe)
+        ])
+      ]),
+      s("div", Xe, [
+        s("div", Je, [
+          b(v.$slots, "headline")
+        ]),
+        s("div", Qe, [
+          b(v.$slots, "text")
+        ])
+      ])
+    ], 2));
+  }
+}), st = " ", at = /* @__PURE__ */ h({
+  __name: "MucCommentText",
+  props: {
+    datePrefix: { default: "am" },
+    initials: {},
+    author: {},
+    date: {},
+    headline: {},
+    text: {},
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(n) {
+    const t = n, e = m(() => ((t.initials ?? t.author.split(st).map((a) => a.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
+    return (a, c) => (o(), W($(Q), {
+      rating: a.rating,
+      variant: a.variant
+    }, re({
+      initials: z(() => [
+        y(d(e.value), 1)
+      ]),
+      datePrefix: z(() => [
+        c[0] || (c[0] = y("am"))
+      ]),
+      author: z(() => [
+        y(d(a.author), 1)
+      ]),
+      headline: z(() => [
+        y(d(a.headline), 1)
+      ]),
+      text: z(() => [
+        y(d(a.text), 1)
+      ]),
+      _: 2
+    }, [
+      a.date ? {
+        name: "date",
+        fn: z(() => [
+          y(d(a.date), 1)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["rating", "variant"]));
+  }
+}), nt = {}, ot = { class: "divider-border" };
+function lt(n, t) {
+  return o(), i("hr", ot);
+}
+const it = /* @__PURE__ */ E(nt, [["render", lt], ["__scopeId", "data-v-a2b37f5b"]]), rt = {}, ct = {
+  "aria-hidden": "true",
+  width: "108",
+  height: "56",
+  viewBox: "0 0 108 56",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function ut(n, t) {
+  return o(), i("svg", ct, t[0] || (t[0] = [
+    K('<g clip-path="url(#clip0_875_841)"><path d="M107.655 18.699L106.594 11.0435L98.9873 12.1173" stroke="#005A9F" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M106.594 11.0435C106.594 11.0435 94.1981 33.255 58.2578 27.2483" stroke="#005A9F" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M85.5371 32.8255C92.2897 31.142 97.5195 28.1144 101.261 25.2393" stroke="#005A9F" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M0.344727 45.982C0.344727 45.982 13.4778 24.2 49.1976 31.426" stroke="#005A9F" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M22.1184 24.9275C15.3107 26.3755 9.98438 29.2299 6.15332 31.9734" stroke="#005A9F" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M68.3603 2.69507H37.1055V55.6536H77.5314V11.9164L68.3603 2.69507Z" fill="#005A9F" stroke="#005A9F" stroke-linecap="round" stroke-linejoin="round"></path><path d="M73.7345 53.3119H33.3086V0.346436H64.5634L73.7345 9.57469V53.3119Z" fill="white" stroke="#005A9F" stroke-linejoin="round"></path><path d="M38.5039 14.4868H45.3667" stroke="#005A9F" stroke-linejoin="round"></path><path d="M38.5039 21.1584H68.5391" stroke="#005A9F" stroke-linejoin="round"></path><path d="M38.5039 27.8372H68.5391" stroke="#005A9F" stroke-linejoin="round"></path><path d="M38.5039 34.509H68.5391" stroke="#005A9F" stroke-linejoin="round"></path><path d="M38.5039 41.1877H68.5391" stroke="#005A9F" stroke-linejoin="round"></path><path d="M73.7346 9.57469H64.5635V0.346436L73.7346 9.57469Z" fill="white" stroke="#005A9F" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_875_841"><rect width="108" height="56" fill="white"></rect></clipPath></defs>', 2)
+  ]));
+}
+const dt = /* @__PURE__ */ E(rt, [["render", ut]]), mt = {
+  key: 0,
+  class: "m-error-message"
+}, pt = {
+  key: 1,
+  class: "m-error-message"
+}, _t = {
+  key: 2,
+  class: "m-error-message"
+}, ft = /* @__PURE__ */ h({
+  __name: "MucFileDropzone",
+  props: {
+    buttonText: { default: "Upload file" },
+    additionalInformation: {},
+    disabled: { type: Boolean, default: !1 },
+    multiple: { type: Boolean, default: !0 },
+    invalidAmountWarning: {},
+    maxFileSize: { default: 0 },
+    maxFileSizeWarning: {},
+    maxTotalFileSize: { default: 0 },
+    maxTotalFileSizeWarning: {}
+  },
+  emits: [
+    /**
+     * Dropped files as {@link File[]} array
+     */
+    "files"
+  ],
+  setup(n, { emit: t }) {
+    const e = t, a = L(!0), c = L(!0), r = L(!0), p = L(!1), l = document.createElement("input");
+    X(() => {
+      l.type = "file", l.multiple = n.multiple, l.onchange = (_) => {
+        const g = _.target;
+        if (g != null && g.files && g.files.length > 0) {
+          const x = Array.from(g.files);
+          w(x);
+        }
+      };
+    }), ce(() => {
+      l.multiple = n.multiple;
+    });
+    const v = () => {
+      n.disabled || l.click();
+    }, A = (_) => {
+      var g;
+      if (!n.disabled) {
+        if (!(l != null && l.multiple)) {
+          const x = _.dataTransfer;
+          if (((g = x == null ? void 0 : x.items) == null ? void 0 : g.length) > 1) {
+            r.value = !1;
+            return;
+          }
+        }
+        p.value = !0;
+      }
+    }, I = () => {
+      p.value = !1, r.value = !0;
+    }, f = (_) => {
+      var x;
+      if (n.disabled) return;
+      if (!r.value) {
+        r.value = !0;
+        return;
+      }
+      p.value = !1;
+      const g = _.dataTransfer;
+      if (((x = g == null ? void 0 : g.files) == null ? void 0 : x.length) > 0) {
+        const U = Array.from(g.files);
+        w(U);
+      }
+    }, w = (_) => {
+      a.value = F(_), c.value = V(_), !(!a.value || !c.value) && e("files", _);
+    }, F = (_) => n.maxFileSize ? !_.some((g) => g.size > n.maxFileSize * 1024 * 1024) : !0, V = (_) => n.maxTotalFileSize ? _.reduce((g, x) => g + (x.size || 0), 0) <= n.maxTotalFileSize * 1024 * 1024 : !0;
+    return (_, g) => (o(), i(H, null, [
+      s("div", {
+        class: B(["drop-zone", {
+          "is-dragover": p.value,
+          "is-not-disabled": !_.disabled
+        }]),
+        onDragover: P(A, ["prevent"]),
+        onDragleave: P(I, ["prevent"]),
+        onDrop: P(f, ["prevent"]),
+        onClick: v
+      }, [
+        C(dt),
+        C($(G), {
+          variant: "secondary",
+          icon: "upload",
+          disabled: _.disabled
+        }, {
+          default: z(() => [
+            y(d(_.buttonText), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"]),
+        s("small", null, d(_.additionalInformation), 1)
+      ], 34),
+      !a.value && _.maxFileSizeWarning ? (o(), i("span", mt, [
+        C($(T), { icon: "warning" }),
+        y(" " + d(_.maxFileSizeWarning), 1)
+      ])) : k("", !0),
+      !c.value && _.maxTotalFileSizeWarning ? (o(), i("span", pt, [
+        C($(T), { icon: "warning" }),
+        y(" " + d(_.maxTotalFileSizeWarning), 1)
+      ])) : k("", !0),
+      r.value ? k("", !0) : (o(), i("span", _t, [
+        C($(T), { icon: "warning" }),
+        y(" " + d(_.invalidAmountWarning), 1)
+      ]))
+    ], 64));
+  }
+}), ht = /* @__PURE__ */ E(ft, [["__scopeId", "data-v-8c3a02f8"]]), vt = ["checked"], gt = { class: "m-label m-checkboxes__label" }, bt = /* @__PURE__ */ h({
+  __name: "MucCheckbox",
+  props: /* @__PURE__ */ R({
+    label: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ R(["click"], ["update:modelValue"]),
+  setup(n, { emit: t }) {
+    const e = j(n, "modelValue"), a = t, c = () => {
+      e.value = !e.value, a("click");
+    };
+    return (r, p) => (o(), i("div", {
+      class: "m-checkboxes__item",
+      onClick: c
+    }, [
+      s("input", {
+        class: "m-checkboxes__input",
+        name: "checkbox",
+        type: "checkbox",
+        checked: e.value,
+        onClick: P(c, ["stop"])
+      }, null, 8, vt),
+      s("label", gt, d(r.label), 1)
+    ]));
+  }
+}), kt = { class: "m-form-group" }, yt = { class: "m-checkbox-group" }, $t = { class: "m-checkbox-group__legend" }, Mt = { class: "m-checkbox-group__heading" }, Ct = { class: "m-checkboxes m-checkboxes--collapse" }, wt = {
+  "aria-hidden": "true",
+  class: "icon icon--after"
+}, At = ["href"], St = /* @__PURE__ */ h({
+  __name: "MucCheckboxGroup",
+  props: {
+    heading: {}
+  },
+  setup(n) {
+    const t = L(!0), e = m(() => t.value ? "collapse" : ""), a = m(() => t.value ? "down" : "up"), c = () => t.value = !t.value;
+    return (r, p) => (o(), i("div", kt, [
+      s("fieldset", yt, [
+        s("legend", $t, [
+          s("h3", Mt, d(r.heading), 1)
+        ]),
+        s("div", Ct, [
+          b(r.$slots, "checkboxes"),
+          r.$slots.collapsableCheckboxes ? (o(), i("div", {
+            key: 0,
+            class: B(["m-checkboxes__collapse__container", e.value])
+          }, [
+            b(r.$slots, "collapsableCheckboxes")
+          ], 2)) : k("", !0),
+          r.$slots.collapsableCheckboxes ? (o(), W($(G), {
+            key: 1,
+            variant: "ghost",
+            onClick: c,
+            "aria-expanded": !t.value
+          }, {
+            default: z(() => [
+              p[0] || (p[0] = s("span", null, "Mehr ", -1)),
+              (o(), i("svg", wt, [
+                s("use", {
+                  href: "#icon-chevron-" + a.value
+                }, null, 8, At)
+              ]))
+            ]),
+            _: 1
+          }, 8, ["aria-expanded"])) : k("", !0)
+        ])
+      ])
+    ]));
+  }
+}), Tt = ["href", "target"], Y = /* @__PURE__ */ h({
+  __name: "MucLink",
+  props: {
+    label: {},
+    href: { default: "#" },
+    icon: {},
+    target: { default: "_blank" },
+    noUnderline: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const t = n, e = m(
+      () => t.noUnderline ? "m-link--reversed-underline" : ""
+    );
+    return (a, c) => (o(), i("a", {
+      href: a.href,
+      target: a.target,
+      class: B(["m-link", e.value])
+    }, [
+      y(d(a.label) + " ", 1),
+      b(a.$slots, "icon", {}, () => [
+        a.icon ? (o(), W($(T), {
+          key: 0,
+          icon: a.icon,
+          class: "icon icon--after"
+        }, null, 8, ["icon"])) : k("", !0)
+      ])
+    ], 10, Tt));
+  }
+}), It = { class: "wrapper" }, Ft = { tabindex: "0" }, xt = {
+  class: "centered-text",
+  style: { color: "var(--color-brand-main-blue)" }
+}, Bt = { class: "visually-hidden" }, Lt = { key: 0 }, Vt = { class: "centered-text" }, zt = { key: 1 }, Et = { class: "centered-text" }, Rt = /* @__PURE__ */ h({
+  __name: "MucCounter",
+  props: /* @__PURE__ */ R({
+    label: {},
+    min: {},
+    max: {},
+    link: {},
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { default: 0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const t = j(n, "modelValue"), e = n, a = () => t.value++, c = () => t.value--, r = m(
+      () => !!e.max && !(t.value < e.max) || e.disabled
+    ), p = m(
+      () => t.value == 0 || !!e.min && !(t.value > e.min) || e.disabled
+    );
+    return (l, v) => (o(), i("div", It, [
+      C($(G), {
+        onClick: c,
+        variant: "secondary",
+        disabled: p.value,
+        "aria-label": "Anzahl " + l.label + " reduzieren auf " + (t.value - 1)
+      }, {
+        default: z(() => [
+          C($(T), { icon: "minus" })
+        ]),
+        _: 1
+      }, 8, ["disabled", "aria-label"]),
+      s("p", Ft, [
+        s("strong", xt, [
+          s("span", Bt, " Aktuell ausgewählte Anzahl für " + d(l.label) + " ist", 1),
+          y(" " + d(t.value), 1)
+        ])
+      ]),
+      C($(G), {
+        onClick: a,
+        variant: "secondary",
+        disabled: r.value,
+        "aria-label": "Anzahl " + l.label + " erhöhen auf " + (t.value + 1)
+      }, {
+        default: z(() => [
+          C($(T), { icon: "plus" })
+        ]),
+        _: 1
+      }, 8, ["disabled", "aria-label"]),
+      l.link ? (o(), i("p", Lt, [
+        s("label", Vt, [
+          C($(Y), {
+            tabindex: "0",
+            label: l.label,
+            href: l.link
+          }, null, 8, ["label", "href"])
+        ])
+      ])) : (o(), i("p", zt, [
+        s("label", Et, d(l.label), 1)
+      ]))
+    ]));
+  }
+}), Ht = /* @__PURE__ */ E(Rt, [["__scopeId", "data-v-2ae0cd02"]]), jt = {
+  class: "m-error-list",
+  role: "alert",
+  tabindex: "-1"
+}, Ot = { class: "m-error-list__title" }, Pt = { class: "m-error-list__body" }, Dt = { class: "m-list m-error-list__list" }, Gt = /* @__PURE__ */ h({
+  __name: "MucErrorList",
+  props: {
+    title: {},
+    errors: {}
+  },
+  setup(n) {
+    const t = n, e = m(
+      () => typeof t.errors == "string" ? [t.errors] : t.errors
+    );
+    return (a, c) => (o(), i("div", jt, [
+      s("h2", Ot, d(a.title), 1),
+      s("div", Pt, [
+        s("ul", Dt, [
+          (o(!0), i(H, null, D(e.value, (r, p) => (o(), i("li", { key: p }, [
+            s("a", null, d(r), 1)
+          ]))), 128))
+        ])
+      ])
+    ]));
+  }
+}), Wt = {
+  for: "search-input",
+  class: "m-label"
+}, Ut = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, Nt = {
+  id: "text-input-error",
+  class: "m-error-message"
+}, qt = { class: "m-input-wrapper m-autocomplete" }, Zt = {
+  key: 0,
+  class: "m-input__prefix"
+}, Kt = ["type", "aria-describedby", "placeholder", "required"], Xt = {
+  key: 1,
+  class: "autocomplete-result-list autocomplete-result-list--location"
+}, Jt = ["onClick"], Qt = {
+  "aria-hidden": "true",
+  class: "icon"
+}, Yt = ["xlink:href"], es = {
+  class: "m-hint",
+  id: "text-input-hint"
+}, ts = /* @__PURE__ */ h({
+  __name: "MucInput",
+  props: /* @__PURE__ */ R({
+    errorMsg: {},
+    placeholder: {},
+    required: { type: Boolean, default: !1 },
+    label: {},
+    hint: {},
+    type: { default: "text" },
+    datalist: {},
+    suffixIcon: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ R(["suffixClick"], ["update:modelValue"]),
+  setup(n, { emit: t }) {
+    const e = j(n, "modelValue"), a = n, c = Z(), r = t, p = m(() => a.errorMsg ? "has-error" : ""), l = m(() => a.type === "search"), v = m(() => {
+      if (e.value === "") return [];
+      const f = e.value.toLowerCase();
+      return a.datalist.filter(
+        (w) => w.toLowerCase().startsWith(f) && w.toLowerCase() !== f
+      );
+    }), A = (f) => e.value = f, I = () => r("suffixClick");
+    return (f, w) => (o(), i("div", {
+      class: B(["m-form-group", p.value])
+    }, [
+      s("label", Wt, [
+        y(d(f.label) + " ", 1),
+        f.required ? (o(), i("span", Ut, w[1] || (w[1] = [
+          y(" * "),
+          s("span", { class: "visually-hidden" }, "(erforderlich)", -1)
+        ]))) : k("", !0)
+      ]),
+      s("p", Nt, d(f.errorMsg), 1),
+      s("div", qt, [
+        c.prefix ? (o(), i("div", Zt, [
+          s("span", null, [
+            b(f.$slots, "prefix")
+          ])
+        ])) : k("", !0),
+        N(s("input", {
+          class: "m-input autocomplete-input",
+          type: f.type,
+          "onUpdate:modelValue": w[0] || (w[0] = (F) => e.value = F),
+          "aria-describedby": f.type + "-input",
+          placeholder: f.placeholder,
+          required: f.required
+        }, null, 8, Kt), [
+          [ue, e.value]
+        ]),
+        l.value && v.value.length !== 0 ? (o(), i("ul", Xt, [
+          (o(!0), i(H, null, D(v.value, (F) => (o(), i("li", {
+            class: "autocomplete-result",
+            key: F,
+            onClick: (V) => A(F)
+          }, d(F), 9, Jt))), 128))
+        ])) : k("", !0),
+        f.suffixIcon ? (o(), i("button", {
+          key: 2,
+          class: "m-input__suffix",
+          onClick: I
+        }, [
+          (o(), i("svg", Qt, [
+            s("use", {
+              "xlink:href": "#icon-" + f.suffixIcon
+            }, null, 8, Yt)
+          ])),
+          w[2] || (w[2] = s("span", { class: "visually-hidden" }, "Suchen", -1))
+        ])) : k("", !0)
+      ]),
+      s("p", es, d(f.hint), 1)
+    ], 2));
+  }
+}), ee = Symbol("mucRadioGroup"), ss = {
+  key: 0,
+  class: "m-radios__item"
+}, as = ["checked", "disabled"], ns = { class: "m-hint" }, os = /* @__PURE__ */ h({
+  __name: "MucRadioButton",
+  props: {
+    value: {},
+    label: {},
+    hint: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const t = n, e = de(ee), a = () => e == null ? void 0 : e.set(t.value), c = m(() => (e == null ? void 0 : e.modelValue.value) === t.value), r = m(() => t.disabled || (e == null ? void 0 : e.disabled.value)), p = m(() => (e == null ? void 0 : e.disabled) ?? !1);
+    return (l, v) => p.value ? (o(), i("div", ss, [
+      s("input", {
+        class: "m-radios__input",
+        type: "radio",
+        checked: c.value,
+        disabled: r.value,
+        onClick: P(a, ["stop"])
+      }, null, 8, as),
+      s("label", {
+        class: "m-label m-radios__label",
+        onClick: a
+      }, [
+        y(d(l.label) + " ", 1),
+        s("span", ns, d(l.hint), 1)
+      ])
+    ])) : k("", !0);
+  }
+}), ls = { class: "m-form-group" }, is = { class: "m-radio-group" }, rs = { class: "m-radio-group__legend" }, cs = { class: "m-radio-group__heading" }, us = { class: "m-radios" }, ds = /* @__PURE__ */ h({
+  __name: "MucRadioButtonGroup",
+  props: /* @__PURE__ */ R({
+    heading: {},
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: [Boolean, String, Array, Object, Number, null] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ R(["change"], ["update:modelValue"]),
+  setup(n, { emit: t }) {
+    const e = j(n, "modelValue"), a = n, c = t;
+    return me(ee, {
+      set: (r) => {
+        c("change", r), e.value = r;
+      },
+      modelValue: e,
+      disabled: pe(_e(a.disabled))
+    }), (r, p) => (o(), i("div", ls, [
+      s("fieldset", is, [
+        s("legend", rs, [
+          s("h3", cs, d(r.heading), 1)
+        ]),
+        s("div", us, [
+          b(r.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+});
+function ms(n, t) {
+  if (!n) return;
+  const e = (a) => {
+    a.target !== n.value && a.composedPath().includes(n.value) || typeof t == "function" && t();
+  };
+  return X(() => {
+    window.addEventListener("click", e);
+  }), fe(() => {
+    window.removeEventListener("click", e);
+  }), { listener: e };
+}
+const ps = /* @__PURE__ */ h({
+  __name: "MucSelectItem",
+  props: {
+    item: {},
+    itemLabel: {}
+  },
+  setup(n) {
+    const t = n, e = m(
+      () => typeof t.item == "string" ? t.item : t.item[t.itemLabel].toString()
+    );
+    return (a, c) => (o(), i("span", null, d(e.value), 1));
+  }
+}), _s = { class: "m-label" }, fs = ["onMouseenter", "onClick"], hs = {
+  key: 0,
+  class: "option"
+}, vs = {
+  key: 0,
+  class: "m-hint"
+}, gs = /* @__PURE__ */ h({
+  __name: "MucSelect",
+  props: /* @__PURE__ */ R({
+    items: {},
+    label: {},
+    hint: {},
+    multiple: { type: Boolean, default: !1 },
+    noItemFoundMessage: { default: "No items found." },
+    itemTitle: { default: "title" }
+  }, {
+    modelValue: {
+      default: []
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const t = L(), e = j(
+      n,
+      "modelValue"
+    ), a = L(!1), c = L(), r = L(!1), p = L(), l = n, v = () => {
+      a.value = !a.value, p.value = c.value;
+    }, A = () => {
+      a.value = !0, p.value = c.value, V.value = "";
+    };
+    ms(t, () => {
+      a.value = !1, V.value = F.value;
+    });
+    const I = (u) => {
+      c.value = u, l.multiple ? w(u) : f(u), l.multiple || (a.value = !1);
+    }, f = (u) => {
+      Array.isArray(e.value) && (e.value = e.value.join(" ")), typeof e.value != "string" && typeof u != "string" ? e.value = e.value[l.itemTitle] === u[l.itemTitle] ? "" : u : e.value = e.value === u ? "" : u;
+    }, w = (u) => {
+      Array.isArray(e.value) || (e.value = [e.value]), Array.isArray(e.value) && (typeof u == "string" ? e.value = e.value.map((M) => M).includes(u) ? e.value.filter((M) => M !== u) : [...e.value, u] : e.value = e.value.map((M) => M[l.itemTitle]).includes(u[l.itemTitle]) ? e.value.filter(
+        (M) => M[l.itemTitle] !== u[l.itemTitle]
+      ) : [...e.value, u]);
+    }, F = m(() => typeof e.value == "string" ? e.value : Array.isArray(e.value) ? e.value.every((u) => typeof u == "string") ? e.value.join(l.multiple ? ", " : " ") : e.value.map((u) => u[l.itemTitle].toString()).join(l.multiple ? ", " : " ") : e.value[l.itemTitle].toString());
+    he(F, (u) => {
+      V.value = u;
+    });
+    const V = L(F.value), _ = m(
+      () => V.value == F.value ? l.items : g(V.value)
+    ), g = (u) => {
+      r.value = !1;
+      const M = l.items.every(
+        (S) => typeof S == "string"
+      ) ? l.items.filter(
+        (S) => S.toLowerCase().includes(u.toLowerCase())
+      ) : l.items.filter(
+        (S) => S[l.itemTitle].toString().toLowerCase().includes(u.toLowerCase())
+      );
+      return M.length === 0 && (r.value = !0), M;
+    }, x = (u) => u === p.value ? "active" : "", U = (u) => {
+      if (typeof u == "string")
+        return e.value.includes(u) ? "selected" : "";
+      if (Array.isArray(e.value))
+        return e.value.map((M) => M[l.itemTitle]).includes(u[l.itemTitle]) ? "selected" : "";
+      if (typeof e.value != "string")
+        return e.value[l.itemTitle] === u[l.itemTitle] ? "selected" : "";
+    }, te = () => p.value = "", se = m(
+      () => a.value ? "display-listbox" : ""
+    ), ae = m(
+      () => l.multiple && !r.value ? "m-input-wrapper--multiselect multiselect" : "m-input-wrapper--select"
+    );
+    return (u, M) => (o(), i("div", {
+      class: "m-form-group",
+      ref_key: "selectComponentRef",
+      ref: t
+    }, [
+      s("label", _s, d(u.label), 1),
+      s("div", {
+        class: B(["m-input-wrapper", ae.value])
+      }, [
+        N(s("input", {
+          type: "text",
+          class: "m-input m-combobox m-combobox--single",
+          "onUpdate:modelValue": M[0] || (M[0] = (S) => V.value = S),
+          onClick: A
+        }, null, 512), [
+          [J, V.value]
+        ]),
+        s("span", {
+          class: "m-input__trigger",
+          onClick: v
+        }, M[1] || (M[1] = [
+          s("svg", {
+            "aria-hidden": "true",
+            class: "icon"
+          }, [
+            s("use", { "xlink:href": "#icon-chevron-down" })
+          ], -1),
+          s("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)
+        ])),
+        s("ul", {
+          class: B(["listbox", se.value]),
+          onMouseleave: te
+        }, [
+          (o(!0), i(H, null, D(_.value, (S, ne) => (o(), i("li", {
+            key: ne,
+            class: B(["option", [x(S), U(S)]]),
+            onMouseenter: (oe) => p.value = S,
+            onClick: (oe) => I(S)
+          }, [
+            C(ps, {
+              item: S,
+              "item-label": u.itemTitle
+            }, null, 8, ["item", "item-label"])
+          ], 42, fs))), 128)),
+          r.value ? (o(), i("li", hs, d(u.noItemFoundMessage), 1)) : k("", !0)
+        ], 34)
+      ], 2),
+      u.hint ? (o(), i("p", vs, d(u.hint), 1)) : k("", !0)
+    ], 512));
+  }
+}), bs = /* @__PURE__ */ E(gs, [["__scopeId", "data-v-e39e3aae"]]), ks = { class: "m-form-group has-error" }, ys = {
+  for: "textarea",
+  class: "m-label"
+}, $s = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, Ms = { class: "m-error-message" }, Cs = { class: "m-input-wrapper" }, ws = ["rows", "placeholder"], As = { class: "m-hint" }, Ss = /* @__PURE__ */ h({
+  __name: "MucTextArea",
+  props: /* @__PURE__ */ R({
+    errorMsg: {},
+    rows: { default: 3 },
+    placeholder: {},
+    label: {},
+    hint: {},
+    required: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const t = j(n, "modelValue");
+    return (e, a) => (o(), i("div", ks, [
+      s("label", ys, [
+        y(d(e.label) + " ", 1),
+        e.required ? (o(), i("span", $s, a[1] || (a[1] = [
+          y(" * "),
+          s("span", { class: "visually-hidden" }, "(erforderlich)", -1)
+        ]))) : k("", !0)
+      ]),
+      s("p", Ms, d(e.errorMsg), 1),
+      s("div", Cs, [
+        N(s("textarea", {
+          class: "m-textarea",
+          rows: e.rows,
+          "aria-describedby": "textarea input",
+          placeholder: e.placeholder,
+          "onUpdate:modelValue": a[0] || (a[0] = (c) => t.value = c)
+        }, null, 8, ws), [
+          [J, t.value]
+        ])
+      ]),
+      s("p", As, d(e.hint), 1)
+    ]));
+  }
+}), Ts = {
+  class: "m-intro m-intro-static-image",
+  style: { "background-color": "var(--color-neutrals-blue-xlight)" }
+}, Is = { class: "container" }, Fs = { class: "muc-intro-content" }, xs = {
+  key: 0,
+  class: "m-intro-vertical__tagline"
+}, Bs = { class: "m-intro-vertical__title" }, Ls = {
+  key: 0,
+  class: "muc-divider"
+}, Vs = { class: "m-intro-vertical__content" }, zs = { style: { "padding-bottom": "32px" } }, Es = /* @__PURE__ */ h({
+  __name: "MucIntro",
+  props: {
+    title: {},
+    tagline: {},
+    divider: { type: Boolean }
+  },
+  setup(n) {
+    return (t, e) => (o(), i("div", Ts, [
+      s("div", Is, [
+        s("div", Fs, [
+          s("div", null, [
+            t.tagline ? (o(), i("p", xs, d(t.tagline), 1)) : k("", !0),
+            s("h1", Bs, d(t.title), 1)
+          ]),
+          t.divider ? (o(), i("div", Ls)) : k("", !0),
+          s("div", Vs, [
+            s("p", zs, [
+              b(t.$slots, "default", {}, void 0, !0)
+            ])
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Rs = /* @__PURE__ */ E(Es, [["__scopeId", "data-v-5c768acc"]]), Hs = ["width", "height"], js = {
+  x: "100",
+  y: "108",
+  "text-anchor": "middle",
+  fill: "#3a5368",
+  "font-size": "24",
+  "font-weight": "bold"
+}, Os = /* @__PURE__ */ h({
+  __name: "MucPercentageSpinner",
+  props: {
+    size: { default: "300" },
+    percentage: {}
+  },
+  setup(n) {
+    const t = m(() => n.percentage || n.percentage === 0 ? n.percentage < 0 ? "0%" : n.percentage > 100 ? "100%" : Math.round(n.percentage) + "%" : "");
+    return (e, a) => (o(), i("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "-10 -10 220 220",
+      fill: "none",
+      color: "#005a9f"
+    }, [
+      a[0] || (a[0] = K('<defs><linearGradient id="spinner-firstHalf"><stop offset="0%" stop-opacity="1" stop-color="currentColor"></stop><stop offset="100%" stop-opacity="0.5" stop-color="currentColor"></stop></linearGradient><linearGradient id="spinner-secondHalf"><stop offset="0%" stop-opacity="0" stop-color="currentColor"></stop><stop offset="100%" stop-opacity="0.5" stop-color="currentColor"></stop></linearGradient></defs><g stroke-width="12"><path stroke="url(#spinner-firstHalf)" d="M 4 100 A 96 96 0 0 1 196 100"></path><path stroke="url(#spinner-secondHalf)" d="M 196 100 A 96 96 0 0 1 4 100"></path><animateTransform from="90 100 100" to="450 100 100" attributeName="transform" type="rotate" repeatCount="indefinite" dur="2300ms"></animateTransform></g>', 2)),
+      s("text", js, d(t.value), 1)
+    ], 8, Hs));
+  }
+}), q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  MucBanner: ye,
+  MucButton: G,
+  MucCallout: xe,
+  MucCard: Ee,
+  MucCardContainer: je,
+  MucCheckbox: bt,
+  MucCheckboxGroup: St,
+  MucComment: Q,
+  MucCommentText: at,
+  MucCounter: Ht,
+  MucDivider: it,
+  MucErrorList: Gt,
+  MucFileDropzone: ht,
+  MucIcon: T,
+  MucInput: ts,
+  MucIntro: Rs,
+  MucLink: Y,
+  MucPercentageSpinner: Os,
+  MucRadioButton: os,
+  MucRadioButtonGroup: ds,
+  MucSelect: bs,
+  MucTextArea: Ss
+}, Symbol.toStringTag, { value: "Module" }));
+function Ps(n) {
+  for (const t in q)
+    n.component(t, q[t]);
+}
+const Gs = { install: Ps };
+export {
+  ye as MucBanner,
+  G as MucButton,
+  xe as MucCallout,
+  Ee as MucCard,
+  je as MucCardContainer,
+  bt as MucCheckbox,
+  St as MucCheckboxGroup,
+  Q as MucComment,
+  at as MucCommentText,
+  Ht as MucCounter,
+  it as MucDivider,
+  Gt as MucErrorList,
+  ht as MucFileDropzone,
+  T as MucIcon,
+  ts as MucInput,
+  Rs as MucIntro,
+  Y as MucLink,
+  Os as MucPercentageSpinner,
+  os as MucRadioButton,
+  ds as MucRadioButtonGroup,
+  bs as MucSelect,
+  Ss as MucTextArea,
+  Gs as default
+};