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

package/muc-patternlab-vue.es.js

@@ -0,0 +1,1003 @@
+import { defineComponent as f, useAttrs as ae, computed as d, openBlock as a, createElementBlock as l, normalizeClass as I, normalizeStyle as ne, createElementVNode as t, createVNode as w, unref as $, renderSlot as v, createBlock as H, createCommentVNode as b, toDisplayString as m, useSlots as q, createTextVNode as y, Fragment as P, renderList as G, createSlots as le, withCtx as B, mergeModels as x, useModel as E, withModifiers as z, ref as R, withDirectives as N, vModelDynamic as ie, inject as re, provide as ce, readonly as ue, toRef as de, onMounted as me, onBeforeUnmount as pe, watch as _e, vModelText as F, createStaticVNode as fe } from "vue";
+const ve = ["href"], A = /* @__PURE__ */ f({
+  __name: "MucIcon",
+  props: {
+    icon: {},
+    color: {}
+  },
+  setup(n) {
+    const s = ae(), e = d(() => s.class ?? "icon");
+    return (o, i) => (a(), l("svg", {
+      "aria-hidden": "true",
+      class: I(e.value),
+      style: ne({ color: o.color })
+    }, [
+      t("use", {
+        href: "#icon-" + o.icon
+      }, null, 8, ve)
+    ], 6));
+  }
+}), he = ["role", "aria-label"], ge = { class: "container-fluid" }, be = /* @__PURE__ */ f({
+  __name: "MucBanner",
+  props: {
+    type: { default: "info" }
+  },
+  setup(n) {
+    const s = n, e = d(() => {
+      switch (s.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";
+      }
+    }), o = d(() => {
+      switch (s.type) {
+        case "info":
+          return "dialog";
+        case "success":
+          return "dialog";
+        case "warning":
+          return "alert";
+        case "emergency":
+          return "alert";
+        default:
+          return "dialog";
+      }
+    }), i = d(() => {
+      switch (s.type) {
+        case "info":
+          return "Information";
+        case "success":
+          return "Erfolg";
+        case "warning":
+          return "Warnung";
+        case "emergency":
+          return "Emergency";
+        default:
+          return "Information";
+      }
+    }), r = d(() => {
+      switch (s.type) {
+        case "success":
+          return "check";
+        case "warning":
+        case "emergency":
+          return "warning";
+        case "info":
+        default:
+          return "information";
+      }
+    });
+    return (p, c) => (a(), l("div", null, [
+      t("div", null, [
+        t("div", {
+          class: I(["m-banner", e.value]),
+          role: o.value,
+          "aria-label": i.value
+        }, [
+          t("div", ge, [
+            w($(A), { icon: r.value }, null, 8, ["icon"]),
+            v(p.$slots, "default", {}, void 0, !0)
+          ])
+        ], 10, he)
+      ])
+    ]));
+  }
+}), V = (n, s) => {
+  const e = n.__vccOpts || n;
+  for (const [o, i] of s)
+    e[o] = i;
+  return e;
+}, ye = /* @__PURE__ */ V(be, [["__scopeId", "data-v-53bc7eca"]]), $e = ["disabled"], j = /* @__PURE__ */ f({
+  __name: "MucButton",
+  props: {
+    variant: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    icon: {},
+    iconAnimated: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(n, { emit: s }) {
+    const e = n, o = s, i = d(() => {
+      switch (e.variant) {
+        case "secondary":
+          return "m-button--secondary";
+        case "ghost":
+          return "m-button--ghost";
+        default:
+          return "m-button--primary";
+      }
+    }), r = d(
+      () => e.iconAnimated ? "m-button--animated-right" : ""
+    ), p = () => {
+      o("click");
+    };
+    return (c, h) => (a(), l("button", {
+      onClick: p,
+      disabled: c.disabled,
+      class: I(["m-button", [i.value, r.value]])
+    }, [
+      t("span", null, [
+        v(c.$slots, "default"),
+        c.icon ? (a(), H($(A), {
+          key: 0,
+          icon: c.icon,
+          class: "m-button__icon"
+        }, null, 8, ["icon"])) : b("", !0)
+      ])
+    ], 10, $e));
+  }
+}), ke = ["aria-label"], Me = { class: "m-callout__inner" }, Ce = { class: "m-callout__icon" }, we = { class: "m-callout__body" }, Ie = { class: "m-callout__body__inner" }, Se = { class: "m-callout__headline" }, Te = { class: "m-callout__content" }, Ae = /* @__PURE__ */ f({
+  __name: "MucCallout",
+  props: {
+    type: { default: "info" }
+  },
+  setup(n) {
+    const s = n, e = d(() => {
+      switch (s.type) {
+        case "error":
+        case "warning":
+          return "warning";
+        case "success":
+          return "check";
+        default:
+          return "information";
+      }
+    }), o = d(() => {
+      switch (s.type) {
+        case "error":
+          return "m-callout--error";
+        case "warning":
+          return "m-callout--warning";
+        case "success":
+          return "m-callout--success";
+        default:
+          return "m-callout--default";
+      }
+    }), i = d(() => {
+      switch (s.type) {
+        case "success":
+          return "Erfolgreich";
+        case "warning":
+          return "Warnung";
+        case "error":
+          return "Error";
+        default:
+          return "Information";
+      }
+    });
+    return (r, p) => (a(), l("div", {
+      class: I(["m-callout", o.value]),
+      "aria-label": i.value
+    }, [
+      t("div", Me, [
+        t("div", Ce, [
+          v(r.$slots, "icon", {}, () => [
+            w($(A), { icon: e.value }, null, 8, ["icon"])
+          ], !0)
+        ]),
+        t("div", we, [
+          t("div", Ie, [
+            t("div", Se, [
+              v(r.$slots, "header", {}, void 0, !0)
+            ]),
+            t("div", Te, [
+              t("p", null, [
+                v(r.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+              ])
+            ])
+          ])
+        ])
+      ])
+    ], 10, ke));
+  }
+}), Be = /* @__PURE__ */ V(Ae, [["__scopeId", "data-v-609b68ea"]]), xe = { class: "card-content" }, Le = { class: "card-header" }, Ve = {
+  key: 0,
+  class: "card-tagline"
+}, Re = /* @__PURE__ */ f({
+  __name: "MucCard",
+  props: {
+    title: {},
+    tagline: {}
+  },
+  emits: ["click"],
+  setup(n, { emit: s }) {
+    const e = s;
+    return (o, i) => (a(), l("div", {
+      class: "card",
+      onClick: i[0] || (i[0] = (r) => e("click", r))
+    }, [
+      t("div", xe, [
+        t("div", Le, [
+          v(o.$slots, "headerPrefix", {}, void 0, !0),
+          t("div", null, [
+            o.tagline ? (a(), l("div", Ve, m(o.tagline), 1)) : b("", !0),
+            t("div", null, [
+              t("h3", null, m(o.title), 1)
+            ])
+          ])
+        ]),
+        i[1] || (i[1] = t("div", { class: "muc-divider" }, null, -1)),
+        v(o.$slots, "content", {}, void 0, !0)
+      ])
+    ]));
+  }
+}), Ee = /* @__PURE__ */ V(Re, [["__scopeId", "data-v-acf0a1dd"]]), Oe = { class: "container card-container" }, Pe = /* @__PURE__ */ f({
+  __name: "MucCardContainer",
+  setup(n) {
+    return (s, e) => (a(), l("div", Oe, [
+      v(s.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), Ge = /* @__PURE__ */ V(Pe, [["__scopeId", "data-v-6740df8f"]]), je = { class: "m-comment__head" }, He = { class: "m-comment__initials" }, Ne = { class: "m-comment__info" }, Ue = { class: "m-comment__author" }, qe = { key: 0 }, ze = { class: "m-comment__author" }, Fe = { class: "m-comment__date" }, De = ["aria-label"], We = {
+  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", Ze = 0.2, et = 0.8, O = 5, D = /* @__PURE__ */ f({
+  __name: "MucComment",
+  props: {
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(n) {
+    const s = q(), e = n, o = d(() => !!s.date), i = d(() => e.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), r = d(
+      () => Math.min(Math.max(e.rating, 0), O)
+    ), p = d(() => r.value.toLocaleString(Ye.valueOf(), {
+      minimumFractionDigits: 1
+    })), c = d(() => {
+      const h = +(r.value % 1).toFixed(1);
+      let M = Math.min(Math.floor(r.value), O), S = Math.floor(O - r.value), _ = !1;
+      return r.value !== 0 && r.value !== O && (h <= Ze ? S++ : h >= et ? M++ : _ = !0), {
+        fullStars: M,
+        emptyStars: S,
+        isHalfStar: _
+      };
+    });
+    return (h, M) => (a(), l("div", {
+      class: I(["m-comment", i.value])
+    }, [
+      t("div", je, [
+        t("div", He, [
+          v(h.$slots, "initials")
+        ]),
+        t("div", Ne, [
+          t("span", Ue, [
+            v(h.$slots, "author")
+          ]),
+          o.value ? (a(), l("span", qe, [
+            t("span", ze, [
+              M[0] || (M[0] = y("  ")),
+              v(h.$slots, "datePrefix")
+            ]),
+            t("span", Fe, [
+              M[1] || (M[1] = y(" ")),
+              v(h.$slots, "date")
+            ])
+          ])) : b("", !0),
+          t("div", {
+            class: "m-star-rating",
+            role: "img",
+            "aria-label": `Bewertung: ${h.rating} von ${O} Sternen`
+          }, [
+            (a(!0), l(P, null, G(c.value.fullStars, (S) => (a(), l("div", {
+              key: S,
+              class: "m-star-rating__item m-star-rating__item--full"
+            }, [
+              w($(A), { icon: "solid-star" })
+            ]))), 128)),
+            c.value.isHalfStar ? (a(), l("div", We, [
+              w($(A), { icon: "half-star" })
+            ])) : b("", !0),
+            (a(!0), l(P, null, G(c.value.emptyStars, (S) => (a(), l("div", {
+              key: S,
+              class: "m-star-rating__item"
+            }, [
+              w($(A), { icon: "solid-star" })
+            ]))), 128)),
+            t("div", Ke, m(p.value), 1)
+          ], 8, De)
+        ])
+      ]),
+      t("div", Xe, [
+        t("div", Je, [
+          v(h.$slots, "headline")
+        ]),
+        t("div", Qe, [
+          v(h.$slots, "text")
+        ])
+      ])
+    ], 2));
+  }
+}), tt = " ", st = /* @__PURE__ */ f({
+  __name: "MucCommentText",
+  props: {
+    datePrefix: { default: "am" },
+    initials: {},
+    author: {},
+    date: {},
+    headline: {},
+    text: {},
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(n) {
+    const s = n, e = d(() => ((s.initials ?? s.author.split(tt).map((o) => o.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
+    return (o, i) => (a(), H($(D), {
+      rating: o.rating,
+      variant: o.variant
+    }, le({
+      initials: B(() => [
+        y(m(e.value), 1)
+      ]),
+      datePrefix: B(() => [
+        i[0] || (i[0] = y("am"))
+      ]),
+      author: B(() => [
+        y(m(o.author), 1)
+      ]),
+      headline: B(() => [
+        y(m(o.headline), 1)
+      ]),
+      text: B(() => [
+        y(m(o.text), 1)
+      ]),
+      _: 2
+    }, [
+      o.date ? {
+        name: "date",
+        fn: B(() => [
+          y(m(o.date), 1)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["rating", "variant"]));
+  }
+}), ot = {}, at = { class: "divider-border" };
+function nt(n, s) {
+  return a(), l("hr", at);
+}
+const lt = /* @__PURE__ */ V(ot, [["render", nt], ["__scopeId", "data-v-a2b37f5b"]]), it = ["checked"], rt = { class: "m-label m-checkboxes__label" }, ct = /* @__PURE__ */ f({
+  __name: "MucCheckbox",
+  props: /* @__PURE__ */ x({
+    label: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ x(["click"], ["update:modelValue"]),
+  setup(n, { emit: s }) {
+    const e = E(n, "modelValue"), o = s, i = () => {
+      e.value = !e.value, o("click");
+    };
+    return (r, p) => (a(), l("div", {
+      class: "m-checkboxes__item",
+      onClick: i
+    }, [
+      t("input", {
+        class: "m-checkboxes__input",
+        name: "checkbox",
+        type: "checkbox",
+        checked: e.value,
+        onClick: z(i, ["stop"])
+      }, null, 8, it),
+      t("label", rt, m(r.label), 1)
+    ]));
+  }
+}), ut = { class: "m-form-group" }, dt = { class: "m-checkbox-group" }, mt = { class: "m-checkbox-group__legend" }, pt = { class: "m-checkbox-group__heading" }, _t = { class: "m-checkboxes m-checkboxes--collapse" }, ft = {
+  "aria-hidden": "true",
+  class: "icon icon--after"
+}, vt = ["href"], ht = /* @__PURE__ */ f({
+  __name: "MucCheckboxGroup",
+  props: {
+    heading: {}
+  },
+  setup(n) {
+    const s = R(!0), e = d(() => s.value ? "collapse" : ""), o = d(() => s.value ? "down" : "up"), i = () => s.value = !s.value;
+    return (r, p) => (a(), l("div", ut, [
+      t("fieldset", dt, [
+        t("legend", mt, [
+          t("h3", pt, m(r.heading), 1)
+        ]),
+        t("div", _t, [
+          v(r.$slots, "checkboxes"),
+          r.$slots.collapsableCheckboxes ? (a(), l("div", {
+            key: 0,
+            class: I(["m-checkboxes__collapse__container", e.value])
+          }, [
+            v(r.$slots, "collapsableCheckboxes")
+          ], 2)) : b("", !0),
+          r.$slots.collapsableCheckboxes ? (a(), H($(j), {
+            key: 1,
+            variant: "ghost",
+            onClick: i,
+            "aria-expanded": !s.value
+          }, {
+            default: B(() => [
+              p[0] || (p[0] = t("span", null, "Mehr ", -1)),
+              (a(), l("svg", ft, [
+                t("use", {
+                  href: "#icon-chevron-" + o.value
+                }, null, 8, vt)
+              ]))
+            ]),
+            _: 1
+          }, 8, ["aria-expanded"])) : b("", !0)
+        ])
+      ])
+    ]));
+  }
+}), gt = ["href", "target"], W = /* @__PURE__ */ f({
+  __name: "MucLink",
+  props: {
+    label: {},
+    href: { default: "#" },
+    icon: {},
+    target: { default: "_blank" },
+    noUnderline: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const s = n, e = d(
+      () => s.noUnderline ? "m-link--reversed-underline" : ""
+    );
+    return (o, i) => (a(), l("a", {
+      href: o.href,
+      target: o.target,
+      class: I(["m-link", e.value])
+    }, [
+      y(m(o.label) + " ", 1),
+      v(o.$slots, "icon", {}, () => [
+        o.icon ? (a(), H($(A), {
+          key: 0,
+          icon: o.icon,
+          class: "icon icon--after"
+        }, null, 8, ["icon"])) : b("", !0)
+      ])
+    ], 10, gt));
+  }
+}), bt = { class: "wrapper" }, yt = {
+  class: "centered-text",
+  style: { color: "var(--color-brand-main-blue)" }
+}, $t = { key: 0 }, kt = { class: "centered-text" }, Mt = { key: 1 }, Ct = { class: "centered-text" }, wt = /* @__PURE__ */ f({
+  __name: "MucCounter",
+  props: /* @__PURE__ */ x({
+    label: {},
+    min: {},
+    max: {},
+    link: {},
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { default: 0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const s = E(n, "modelValue"), e = n, o = () => s.value++, i = () => s.value--, r = d(
+      () => !!e.max && !(s.value < e.max) || e.disabled
+    ), p = d(
+      () => s.value == 0 || !!e.min && !(s.value > e.min) || e.disabled
+    );
+    return (c, h) => (a(), l("div", bt, [
+      w($(j), {
+        onClick: i,
+        variant: "secondary",
+        disabled: p.value
+      }, {
+        default: B(() => [
+          w($(A), { icon: "minus" })
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      t("p", null, [
+        t("strong", yt, m(s.value), 1)
+      ]),
+      w($(j), {
+        onClick: o,
+        variant: "secondary",
+        disabled: r.value
+      }, {
+        default: B(() => [
+          w($(A), { icon: "plus" })
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      c.link ? (a(), l("p", $t, [
+        t("label", kt, [
+          w($(W), {
+            label: c.label,
+            href: c.link
+          }, null, 8, ["label", "href"])
+        ])
+      ])) : (a(), l("p", Mt, [
+        t("label", Ct, m(c.label), 1)
+      ]))
+    ]));
+  }
+}), It = /* @__PURE__ */ V(wt, [["__scopeId", "data-v-a20e4a10"]]), St = {
+  class: "m-error-list",
+  role: "alert",
+  tabindex: "-1"
+}, Tt = { class: "m-error-list__title" }, At = { class: "m-error-list__body" }, Bt = { class: "m-list m-error-list__list" }, xt = /* @__PURE__ */ f({
+  __name: "MucErrorList",
+  props: {
+    title: {},
+    errors: {}
+  },
+  setup(n) {
+    const s = n, e = d(
+      () => typeof s.errors == "string" ? [s.errors] : s.errors
+    );
+    return (o, i) => (a(), l("div", St, [
+      t("h2", Tt, m(o.title), 1),
+      t("div", At, [
+        t("ul", Bt, [
+          (a(!0), l(P, null, G(e.value, (r, p) => (a(), l("li", { key: p }, [
+            t("a", null, m(r), 1)
+          ]))), 128))
+        ])
+      ])
+    ]));
+  }
+}), Lt = {
+  for: "search-input",
+  class: "m-label"
+}, Vt = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, Rt = {
+  id: "text-input-error",
+  class: "m-error-message"
+}, Et = { class: "m-input-wrapper m-autocomplete" }, Ot = {
+  key: 0,
+  class: "m-input__prefix"
+}, Pt = ["type", "aria-describedby", "placeholder", "required"], Gt = {
+  key: 1,
+  class: "autocomplete-result-list autocomplete-result-list--location"
+}, jt = ["onClick"], Ht = {
+  "aria-hidden": "true",
+  class: "icon"
+}, Nt = ["xlink:href"], Ut = {
+  class: "m-hint",
+  id: "text-input-hint"
+}, qt = /* @__PURE__ */ f({
+  __name: "MucInput",
+  props: /* @__PURE__ */ x({
+    errorMsg: {},
+    placeholder: {},
+    required: { type: Boolean, default: !1 },
+    label: {},
+    hint: {},
+    type: { default: "text" },
+    datalist: {},
+    suffixIcon: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ x(["suffixClick"], ["update:modelValue"]),
+  setup(n, { emit: s }) {
+    const e = E(n, "modelValue"), o = n, i = q(), r = s, p = d(() => o.errorMsg ? "has-error" : ""), c = d(() => o.type === "search"), h = d(() => {
+      if (e.value === "") return [];
+      const _ = e.value.toLowerCase();
+      return o.datalist.filter(
+        (C) => C.toLowerCase().startsWith(_) && C.toLowerCase() !== _
+      );
+    }), M = (_) => e.value = _, S = () => r("suffixClick");
+    return (_, C) => (a(), l("div", {
+      class: I(["m-form-group", p.value])
+    }, [
+      t("label", Lt, [
+        y(m(_.label) + " ", 1),
+        _.required ? (a(), l("span", Vt, C[1] || (C[1] = [
+          y(" * "),
+          t("span", { class: "visually-hidden" }, "(erforderlich)", -1)
+        ]))) : b("", !0)
+      ]),
+      t("p", Rt, m(_.errorMsg), 1),
+      t("div", Et, [
+        i.prefix ? (a(), l("div", Ot, [
+          t("span", null, [
+            v(_.$slots, "prefix")
+          ])
+        ])) : b("", !0),
+        N(t("input", {
+          class: "m-input autocomplete-input",
+          type: _.type,
+          "onUpdate:modelValue": C[0] || (C[0] = (T) => e.value = T),
+          "aria-describedby": _.type + "-input",
+          placeholder: _.placeholder,
+          required: _.required
+        }, null, 8, Pt), [
+          [ie, e.value]
+        ]),
+        c.value && h.value.length !== 0 ? (a(), l("ul", Gt, [
+          (a(!0), l(P, null, G(h.value, (T) => (a(), l("li", {
+            class: "autocomplete-result",
+            key: T,
+            onClick: (L) => M(T)
+          }, m(T), 9, jt))), 128))
+        ])) : b("", !0),
+        _.suffixIcon ? (a(), l("button", {
+          key: 2,
+          class: "m-input__suffix",
+          onClick: S
+        }, [
+          (a(), l("svg", Ht, [
+            t("use", {
+              "xlink:href": "#icon-" + _.suffixIcon
+            }, null, 8, Nt)
+          ])),
+          C[2] || (C[2] = t("span", { class: "visually-hidden" }, "Suchen", -1))
+        ])) : b("", !0)
+      ]),
+      t("p", Ut, m(_.hint), 1)
+    ], 2));
+  }
+}), K = Symbol("mucRadioGroup"), zt = {
+  key: 0,
+  class: "m-radios__item"
+}, Ft = ["checked", "disabled"], Dt = { class: "m-hint" }, Wt = /* @__PURE__ */ f({
+  __name: "MucRadioButton",
+  props: {
+    value: {},
+    label: {},
+    hint: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const s = n, e = re(K), o = () => e == null ? void 0 : e.set(s.value), i = d(() => (e == null ? void 0 : e.modelValue.value) === s.value), r = d(() => s.disabled || (e == null ? void 0 : e.disabled.value)), p = d(() => (e == null ? void 0 : e.disabled) ?? !1);
+    return (c, h) => p.value ? (a(), l("div", zt, [
+      t("input", {
+        class: "m-radios__input",
+        type: "radio",
+        checked: i.value,
+        disabled: r.value,
+        onClick: z(o, ["stop"])
+      }, null, 8, Ft),
+      t("label", {
+        class: "m-label m-radios__label",
+        onClick: o
+      }, [
+        y(m(c.label) + " ", 1),
+        t("span", Dt, m(c.hint), 1)
+      ])
+    ])) : b("", !0);
+  }
+}), Kt = { class: "m-form-group" }, Xt = { class: "m-radio-group" }, Jt = { class: "m-radio-group__legend" }, Qt = { class: "m-radio-group__heading" }, Yt = { class: "m-radios" }, Zt = /* @__PURE__ */ f({
+  __name: "MucRadioButtonGroup",
+  props: /* @__PURE__ */ x({
+    heading: {},
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: [Boolean, String, Array, Object, Number, null] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ x(["change"], ["update:modelValue"]),
+  setup(n, { emit: s }) {
+    const e = E(n, "modelValue"), o = n, i = s;
+    return ce(K, {
+      set: (r) => {
+        i("change", r), e.value = r;
+      },
+      modelValue: e,
+      disabled: ue(de(o.disabled))
+    }), (r, p) => (a(), l("div", Kt, [
+      t("fieldset", Xt, [
+        t("legend", Jt, [
+          t("h3", Qt, m(r.heading), 1)
+        ]),
+        t("div", Yt, [
+          v(r.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+});
+function es(n, s) {
+  if (!n) return;
+  const e = (o) => {
+    o.target !== n.value && o.composedPath().includes(n.value) || typeof s == "function" && s();
+  };
+  return me(() => {
+    window.addEventListener("click", e);
+  }), pe(() => {
+    window.removeEventListener("click", e);
+  }), { listener: e };
+}
+const ts = /* @__PURE__ */ f({
+  __name: "MucSelectItem",
+  props: {
+    item: {},
+    itemLabel: {}
+  },
+  setup(n) {
+    const s = n, e = d(
+      () => typeof s.item == "string" ? s.item : s.item[s.itemLabel].toString()
+    );
+    return (o, i) => (a(), l("span", null, m(e.value), 1));
+  }
+}), ss = { class: "m-label" }, os = ["onMouseenter", "onClick"], as = {
+  key: 0,
+  class: "option"
+}, ns = {
+  key: 0,
+  class: "m-hint"
+}, ls = /* @__PURE__ */ f({
+  __name: "MucSelect",
+  props: /* @__PURE__ */ x({
+    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 s = R(), e = E(
+      n,
+      "modelValue"
+    ), o = R(!1), i = R(), r = R(!1), p = R(), c = n, h = () => {
+      o.value = !o.value, p.value = i.value;
+    }, M = () => {
+      o.value = !0, p.value = i.value, L.value = "";
+    };
+    es(s, () => {
+      o.value = !1, L.value = T.value;
+    });
+    const S = (u) => {
+      i.value = u, c.multiple ? C(u) : _(u), c.multiple || (o.value = !1);
+    }, _ = (u) => {
+      Array.isArray(e.value) && (e.value = e.value.join(" ")), typeof e.value != "string" && typeof u != "string" ? e.value = e.value[c.itemTitle] === u[c.itemTitle] ? "" : u : e.value = e.value === u ? "" : u;
+    }, C = (u) => {
+      Array.isArray(e.value) || (e.value = [e.value]), Array.isArray(e.value) && (typeof u == "string" ? e.value = e.value.map((g) => g).includes(u) ? e.value.filter((g) => g !== u) : [...e.value, u] : e.value = e.value.map((g) => g[c.itemTitle]).includes(u[c.itemTitle]) ? e.value.filter(
+        (g) => g[c.itemTitle] !== u[c.itemTitle]
+      ) : [...e.value, u]);
+    }, T = d(() => typeof e.value == "string" ? e.value : Array.isArray(e.value) ? e.value.every((u) => typeof u == "string") ? e.value.join(c.multiple ? ", " : " ") : e.value.map((u) => u[c.itemTitle].toString()).join(c.multiple ? ", " : " ") : e.value[c.itemTitle].toString());
+    _e(T, (u) => {
+      L.value = u;
+    });
+    const L = R(T.value), X = d(
+      () => L.value == T.value ? c.items : J(L.value)
+    ), J = (u) => {
+      r.value = !1;
+      const g = c.items.every(
+        (k) => typeof k == "string"
+      ) ? c.items.filter(
+        (k) => k.toLowerCase().includes(u.toLowerCase())
+      ) : c.items.filter(
+        (k) => k[c.itemTitle].toString().toLowerCase().includes(u.toLowerCase())
+      );
+      return g.length === 0 && (r.value = !0), g;
+    }, Q = (u) => u === p.value ? "active" : "", Y = (u) => {
+      if (typeof u == "string")
+        return e.value.includes(u) ? "selected" : "";
+      if (Array.isArray(e.value))
+        return e.value.map((g) => g[c.itemTitle]).includes(u[c.itemTitle]) ? "selected" : "";
+      if (typeof e.value != "string")
+        return e.value[c.itemTitle] === u[c.itemTitle] ? "selected" : "";
+    }, Z = () => p.value = "", ee = d(
+      () => o.value ? "display-listbox" : ""
+    ), te = d(
+      () => c.multiple && !r.value ? "m-input-wrapper--multiselect multiselect" : "m-input-wrapper--select"
+    );
+    return (u, g) => (a(), l("div", {
+      class: "m-form-group",
+      ref_key: "selectComponentRef",
+      ref: s
+    }, [
+      t("label", ss, m(u.label), 1),
+      t("div", {
+        class: I(["m-input-wrapper", te.value])
+      }, [
+        N(t("input", {
+          type: "text",
+          class: "m-input m-combobox m-combobox--single",
+          "onUpdate:modelValue": g[0] || (g[0] = (k) => L.value = k),
+          onClick: M
+        }, null, 512), [
+          [F, L.value]
+        ]),
+        t("span", {
+          class: "m-input__trigger",
+          onClick: h
+        }, g[1] || (g[1] = [
+          t("svg", {
+            "aria-hidden": "true",
+            class: "icon"
+          }, [
+            t("use", { "xlink:href": "#icon-chevron-down" })
+          ], -1),
+          t("span", { class: "visually-hidden" }, "Auswahlliste öffnen", -1)
+        ])),
+        t("ul", {
+          class: I(["listbox", ee.value]),
+          onMouseleave: Z
+        }, [
+          (a(!0), l(P, null, G(X.value, (k, se) => (a(), l("li", {
+            key: se,
+            class: I(["option", [Q(k), Y(k)]]),
+            onMouseenter: (oe) => p.value = k,
+            onClick: (oe) => S(k)
+          }, [
+            w(ts, {
+              item: k,
+              "item-label": u.itemTitle
+            }, null, 8, ["item", "item-label"])
+          ], 42, os))), 128)),
+          r.value ? (a(), l("li", as, m(u.noItemFoundMessage), 1)) : b("", !0)
+        ], 34)
+      ], 2),
+      u.hint ? (a(), l("p", ns, m(u.hint), 1)) : b("", !0)
+    ], 512));
+  }
+}), is = /* @__PURE__ */ V(ls, [["__scopeId", "data-v-e39e3aae"]]), rs = { class: "m-form-group has-error" }, cs = {
+  for: "textarea",
+  class: "m-label"
+}, us = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "mandatory"
+}, ds = { class: "m-error-message" }, ms = { class: "m-input-wrapper" }, ps = ["rows", "placeholder"], _s = { class: "m-hint" }, fs = /* @__PURE__ */ f({
+  __name: "MucTextArea",
+  props: /* @__PURE__ */ x({
+    errorMsg: {},
+    rows: { default: 3 },
+    placeholder: {},
+    label: {},
+    hint: {},
+    required: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const s = E(n, "modelValue");
+    return (e, o) => (a(), l("div", rs, [
+      t("label", cs, [
+        y(m(e.label) + " ", 1),
+        e.required ? (a(), l("span", us, o[1] || (o[1] = [
+          y(" * "),
+          t("span", { class: "visually-hidden" }, "(erforderlich)", -1)
+        ]))) : b("", !0)
+      ]),
+      t("p", ds, m(e.errorMsg), 1),
+      t("div", ms, [
+        N(t("textarea", {
+          class: "m-textarea",
+          rows: e.rows,
+          "aria-describedby": "textarea input",
+          placeholder: e.placeholder,
+          "onUpdate:modelValue": o[0] || (o[0] = (i) => s.value = i)
+        }, null, 8, ps), [
+          [F, s.value]
+        ])
+      ]),
+      t("p", _s, m(e.hint), 1)
+    ]));
+  }
+}), vs = {
+  class: "m-intro m-intro-static-image",
+  style: { "background-color": "var(--color-neutrals-blue-xlight)" }
+}, hs = { class: "container" }, gs = { class: "muc-intro-content" }, bs = {
+  key: 0,
+  class: "m-intro-vertical__tagline"
+}, ys = { class: "m-intro-vertical__title" }, $s = {
+  key: 0,
+  class: "muc-divider"
+}, ks = { class: "m-intro-vertical__content" }, Ms = { style: { "padding-bottom": "32px" } }, Cs = /* @__PURE__ */ f({
+  __name: "MucIntro",
+  props: {
+    title: {},
+    tagline: {},
+    divider: { type: Boolean }
+  },
+  setup(n) {
+    return (s, e) => (a(), l("div", vs, [
+      t("div", hs, [
+        t("div", gs, [
+          t("div", null, [
+            s.tagline ? (a(), l("p", bs, m(s.tagline), 1)) : b("", !0),
+            t("h1", ys, m(s.title), 1)
+          ]),
+          s.divider ? (a(), l("div", $s)) : b("", !0),
+          t("div", ks, [
+            t("p", Ms, [
+              v(s.$slots, "default", {}, void 0, !0)
+            ])
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ws = /* @__PURE__ */ V(Cs, [["__scopeId", "data-v-5c768acc"]]), Is = ["width", "height"], Ss = {
+  x: "100",
+  y: "108",
+  "text-anchor": "middle",
+  fill: "#3a5368",
+  "font-size": "24",
+  "font-weight": "bold"
+}, Ts = /* @__PURE__ */ f({
+  __name: "MucPercentageSpinner",
+  props: {
+    size: { default: "300" },
+    percentage: {}
+  },
+  setup(n) {
+    const s = n, e = d(() => s.percentage ? s.percentage < 0 ? "0%" : s.percentage > 100 ? "100%" : Math.round(s.percentage) + "%" : "");
+    return (o, i) => (a(), l("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: o.size,
+      height: o.size,
+      viewBox: "-10 -10 220 220",
+      fill: "none",
+      color: "#005a9f"
+    }, [
+      i[0] || (i[0] = fe('<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)),
+      t("text", Ss, m(e.value), 1)
+    ], 8, Is));
+  }
+}), U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  MucBanner: ye,
+  MucButton: j,
+  MucCallout: Be,
+  MucCard: Ee,
+  MucCardContainer: Ge,
+  MucCheckbox: ct,
+  MucCheckboxGroup: ht,
+  MucComment: D,
+  MucCommentText: st,
+  MucCounter: It,
+  MucDivider: lt,
+  MucErrorList: xt,
+  MucIcon: A,
+  MucInput: qt,
+  MucIntro: ws,
+  MucLink: W,
+  MucPercentageSpinner: Ts,
+  MucRadioButton: Wt,
+  MucRadioButtonGroup: Zt,
+  MucSelect: is,
+  MucTextArea: fs
+}, Symbol.toStringTag, { value: "Module" }));
+function As(n) {
+  for (const s in U)
+    n.component(s, U[s]);
+}
+const xs = { install: As };
+export {
+  ye as MucBanner,
+  j as MucButton,
+  Be as MucCallout,
+  Ee as MucCard,
+  Ge as MucCardContainer,
+  ct as MucCheckbox,
+  ht as MucCheckboxGroup,
+  D as MucComment,
+  st as MucCommentText,
+  It as MucCounter,
+  lt as MucDivider,
+  xt as MucErrorList,
+  A as MucIcon,
+  qt as MucInput,
+  ws as MucIntro,
+  W as MucLink,
+  Ts as MucPercentageSpinner,
+  Wt as MucRadioButton,
+  Zt as MucRadioButtonGroup,
+  is as MucSelect,
+  fs as MucTextArea,
+  xs as default
+};