@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
1,645 lines (1,644 loc) • 59.9 kB
JavaScript
import { defineComponent as $, computed as v, createBlock as B, openBlock as l, resolveDynamicComponent as A, normalizeClass as g, withCtx as C, createElementBlock as n, createCommentVNode as h, createElementVNode as r, renderSlot as V, Fragment as O, renderList as S, createVNode as w, createTextVNode as P, toDisplayString as f, normalizeStyle as J, mergeProps as I, ref as z, watch as q, withKeys as R, withDirectives as H, vModelDynamic as X, nextTick as Y, vModelText as Z } from "vue";
const x = {
key: 0,
class: "mc-link__icon",
"aria-hidden": "true"
}, ee = { class: "mc-link__label" }, ae = {
key: 1,
class: "mc-link__icon",
"aria-hidden": "true"
}, te = /* @__PURE__ */ $({
__name: "MLink",
props: {
iconPosition: { default: "left" },
appearance: { default: "standard" },
size: { default: "s" },
href: { default: void 0 },
target: { default: void 0 },
inline: { type: Boolean },
router: { type: Boolean }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-link--${e.appearance}`]: e.appearance && e.appearance != "standard",
[`mc-link--${e.size}`]: e.size && e.size != "s",
"mc-link--inline": e.inline,
"mc-link--stand-alone": !e.inline
}));
return (t, o) => (l(), B(A(t.router ? "router-link" : "a"), {
class: g(["mc-link", a.value]),
href: t.href,
target: t.target,
to: t.router ? t.href : void 0
}, {
default: C(() => [
t.$slots.icon && t.iconPosition == "left" ? (l(), n("span", x, [
V(t.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
r("span", ee, [
V(t.$slots, "default", {}, void 0, !0)
]),
t.$slots.icon && t.iconPosition == "right" ? (l(), n("span", ae, [
V(t.$slots, "icon", {}, void 0, !0)
])) : h("", !0)
]),
_: 3
}, 8, ["class", "href", "target", "to"]));
}
}), _ = (d, e) => {
const a = d.__vccOpts || d;
for (const [t, o] of e)
a[t] = o;
return a;
}, se = /* @__PURE__ */ _(te, [["__scopeId", "data-v-df607c25"]]), le = { class: "mc-breadcrumb__container" }, oe = /* @__PURE__ */ $({
__name: "MBreadcrumb",
props: {
appearance: {},
links: {}
},
setup(d) {
const e = d, a = v(() => ({
[`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
})), t = (o) => {
var s;
return o === (((s = e.links) == null ? void 0 : s.length) ?? 0) - 1;
};
return (o, s) => (l(), n("nav", {
class: g(["mc-breadcrumb", a.value]),
"aria-label": "Breadcrumb"
}, [
r("ul", le, [
(l(!0), n(O, null, S(o.links, (i, c) => (l(), n("li", {
class: "mc-breadcrumb__item",
key: `breadcrumb-${c}`
}, [
w(se, {
href: i.href,
router: i.router,
appearance: o.appearance,
inline: "",
class: g({
"mc-breadcrumb__current": t(c)
}),
"aria-current": t(c) ? "page" : void 0
}, {
default: C(() => [
P(f(i.label), 1)
]),
_: 2
}, 1032, ["href", "router", "appearance", "class", "aria-current"])
]))), 128))
])
], 2));
}
}), Vs = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
key: 0,
class: "mc-loader__text",
role: "status"
}, ce = /* @__PURE__ */ $({
__name: "MLoader",
props: {
appearance: { default: "standard" },
size: { default: "m" },
text: {}
},
setup(d) {
const e = d, a = v(() => ({
[`mc-loader--${e.size}`]: e.size && e.size !== "m",
[`mc-loader--${e.appearance}`]: e.appearance && e.appearance !== "standard",
"mc-loader--text-visible": e.text
})), t = v(() => {
let s;
switch (e.size) {
case "s":
s = "0 0 24 24";
break;
case "l":
s = "0 0 64 64";
break;
default:
s = "0 0 32 32";
}
return s;
}), o = v(() => {
let s;
switch (e.size) {
case "s":
s = 6;
break;
case "l":
s = 19;
break;
default:
s = 9;
}
return s;
});
return (s, i) => (l(), n("div", {
class: g(["mc-loader", a.value])
}, [
r("span", ne, [
(l(), n("svg", {
class: "mc-loader__icon",
xmlns: "http://www.w3.org/2000/svg",
viewBox: t.value,
"aria-hidden": "true"
}, [
r("circle", {
class: "mc-loader__path",
cx: "50%",
cy: "50%",
r: o.value
}, null, 8, de)
], 8, ie))
]),
s.text ? (l(), n("p", re, f(s.text), 1)) : h("", !0)
], 2));
}
}), K = /* @__PURE__ */ _(ce, [["__scopeId", "data-v-998c550b"]]), ue = ["disabled", "type"], pe = {
key: 0,
class: "mc-button__icon"
}, me = {
key: 1,
class: "mc-button__icon",
style: { position: "absolute" }
}, _e = {
key: 2,
class: "mc-button__icon"
}, ve = {
key: 4,
class: "mc-button__icon"
}, be = /* @__PURE__ */ $({
__name: "MButton",
props: {
appearance: { default: "standard" },
size: { default: "m" },
disabled: { type: Boolean },
ghost: { type: Boolean },
outlined: { type: Boolean },
iconPosition: {},
type: { default: "button" },
isLoading: { type: Boolean }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
[`mc-button--${e.size}`]: e.size && e.size != "m",
"mc-button--ghost": e.ghost,
"mc-button--outlined": e.outlined,
"mc-button--icon-only": e.iconPosition == "only"
}));
return (t, o) => (l(), n("button", {
class: g(["mc-button", a.value]),
disabled: t.disabled,
type: t.type
}, [
t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (l(), n("span", pe, [
V(t.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
t.isLoading ? (l(), n("span", me, [
w(K, {
style: { color: "currentColor" },
size: "s"
})
])) : h("", !0),
t.$slots.icon && t.iconPosition == "only" ? (l(), n("span", _e, [
V(t.$slots, "icon", {}, void 0, !0)
])) : (l(), n("span", {
key: 3,
class: "mc-button__label",
style: J({ visibility: t.isLoading ? "hidden" : "visible" })
}, [
V(t.$slots, "default", {}, () => [
o[0] || (o[0] = P("Button Label"))
], !0)
], 4)),
t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (l(), n("span", ve, [
V(t.$slots, "icon", {}, void 0, !0)
])) : h("", !0)
], 10, ue));
}
}), N = /* @__PURE__ */ _(be, [["__scopeId", "data-v-f4f43ab6"]]), fe = { class: "mc-checkbox" }, he = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], $e = ["for"], ye = /* @__PURE__ */ $({
__name: "MCheckbox",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
indeterminate: { type: Boolean },
isInvalid: { type: Boolean },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-invalid": a.isInvalid
})), o = e;
return (s, i) => (l(), n("div", fe, [
r("input", I({
id: s.id,
type: "checkbox",
class: ["mc-checkbox__input", t.value],
name: s.name,
checked: s.modelValue,
indeterminate: s.indeterminate,
disabled: s.disabled,
"aria-invalid": s.isInvalid
}, s.$attrs, {
onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
}), null, 16, he),
s.label ? (l(), n("label", {
key: 0,
for: s.id,
class: "mc-checkbox__label"
}, f(s.label), 9, $e)) : h("", !0)
]));
}
}), ge = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-37fd0a35"]]), ke = /* @__PURE__ */ $({
__name: "MCheckboxGroup",
props: {
name: {},
modelValue: {},
options: {},
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = z([]);
q(
() => a.modelValue,
(p) => {
t.value = p || [];
},
{ immediate: !0 }
);
const o = (p, m) => {
let u = [...t.value];
p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), t.value = u;
}, s = v(() => ({
"mc-field__container--inline": a.inline
})), i = v(() => ({
"mc-field__container--inline__item": a.inline
})), c = e;
return (p, m) => (l(), n("div", {
class: g(["mc-field__container", s.value])
}, [
(l(!0), n(O, null, S(p.options, (u) => (l(), B(ge, {
id: u.id,
key: u.id,
label: u.label,
"is-invalid": u.isInvalid,
name: p.name,
class: g(["mc-field__item", i.value]),
"model-value": p.modelValue ? p.modelValue.includes(u.value) : void 0,
disabled: u.disabled,
"onUpdate:modelValue": (b) => o(b, u.value)
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
], 2));
}
}), Is = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-8ee4699f"]]), we = {
name: "CrossCircleFilled24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Ve = ["fill"];
function Ie(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414"
}, null, -1)
]), 8, Ve);
}
const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Ce = {
key: 0,
class: "mc-datepicker__controls-options mc-controls-options"
}, Me = { class: "mc-controls-options__label" }, ze = /* @__PURE__ */ $({
__name: "MDatepicker",
props: {
id: {},
name: {},
modelValue: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
readonly: { type: Boolean },
isClearable: { type: Boolean },
clearLabel: { default: "clear content" }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
[`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
"is-invalid": a.isInvalid
})), o = z(a.modelValue), s = () => {
o.value = "", i("update:modelValue", "");
}, i = e;
return (c, p) => (l(), n("div", {
class: g(["mc-datepicker mc-text-input", t.value])
}, [
r("input", I({
id: c.id,
class: "mc-datepicker__control mc-text-input__control",
value: o.value,
type: "date",
name: c.name,
disabled: c.disabled,
"aria-invalid": c.isInvalid,
readonly: c.readonly
}, c.$attrs, {
onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
}), null, 16, Be),
c.isClearable && o.value ? (l(), n("div", Ce, [
r("button", {
type: "button",
class: "mc-controls-options__button",
onClick: s
}, [
w(F, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
r("span", Me, f(c.clearLabel), 1)
])
])) : h("", !0)
], 2));
}
}), Bs = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-0c5cddc2"]]), Le = { class: "mc-divider" }, Te = /* @__PURE__ */ $({
__name: "MDivider",
props: {
orientation: { default: "horizontal" },
style: { default: "primary" },
size: { default: "s" }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-divider-${e.orientation}`]: e.orientation,
[`mc-divider-horizontal--${e.style}`]: e.style && e.style != "primary",
[`mc-divider-horizontal--${e.size}`]: e.size && e.size != "s"
}));
return (t, o) => (l(), n("div", Le, [
r("div", {
class: g(a.value)
}, null, 2),
V(t.$slots, "default", {}, void 0, !0)
]));
}
}), je = /* @__PURE__ */ _(Te, [["__scopeId", "data-v-f8e160af"]]), Oe = {
name: "ArrowBack24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Se = ["fill"];
function qe(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"
}, null, -1)
]), 8, Se);
}
const De = /* @__PURE__ */ _(Oe, [["render", qe]]), Pe = {
name: "Cross24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Fe = ["fill"];
function Ne(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z"
}, null, -1)
]), 8, Fe);
}
const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re = { class: "mc-button__icon" }, Ge = /* @__PURE__ */ $({
__name: "MIconButton",
props: {
appearance: { default: "standard" },
size: { default: "m" },
disabled: { type: Boolean },
ghost: { type: Boolean },
outlined: { type: Boolean },
type: { default: "button" }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
[`mc-button--${e.size}`]: e.size && e.size != "m",
"mc-button--ghost": e.ghost,
"mc-button--outlined": e.outlined
}));
return (t, o) => (l(), n("button", {
class: g(["mc-button mc-button--icon-button", a.value]),
disabled: t.disabled,
type: t.type
}, [
r("span", Re, [
V(t.$slots, "icon", {}, void 0, !0)
])
], 10, Ae));
}
}), D = /* @__PURE__ */ _(Ge, [["__scopeId", "data-v-abf78562"]]), Ue = ["aria-labelledby"], He = /* @__PURE__ */ $({
__name: "MOverlay",
props: {
isVisible: { type: Boolean },
dialogLabel: {}
},
setup(d) {
return (e, a) => (l(), n("div", {
class: g(["mc-overlay", { "is-visible": e.isVisible }])
}, [
r("div", {
role: "dialog",
tabindex: "-1",
"aria-labelledby": e.dialogLabel
}, [
V(e.$slots, "default", {}, void 0, !0)
], 8, Ue)
], 2));
}
}), Q = /* @__PURE__ */ _(He, [["__scopeId", "data-v-db90fdb3"]]), Ke = ["aria-modal", "aria-hidden"], Ee = {
class: "mc-drawer__dialog",
role: "document"
}, Qe = { class: "mc-drawer__header" }, We = {
class: "mc-drawer__title",
id: "drawerTitle"
}, Je = { class: "mc-drawer__body" }, Xe = {
class: "mc-drawer__content",
tabindex: "0"
}, Ye = {
key: 0,
class: "mc-drawer__content__title"
}, Ze = {
key: 0,
class: "mc-drawer__footer"
}, xe = /* @__PURE__ */ $({
__name: "MDrawer",
props: {
open: { type: Boolean },
position: {},
extended: { type: Boolean },
back: { type: Boolean },
title: {},
contentTitle: {}
},
emits: ["update:open", "back"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-open": a.open,
"mc-drawer--extend": a.extended,
[`mc-drawer--${a.position}`]: a.position && a.position != "right"
}));
q(
() => a.open,
(i) => {
s("update:open", i);
}
);
const o = () => {
s("update:open", !1);
}, s = e;
return (i, c) => (l(), B(Q, {
"is-visible": i.open,
dialogLabel: "drawerTitle"
}, {
default: C(() => [
r("section", I({
class: ["mc-drawer", t.value],
role: "dialog",
"aria-labelledby": "drawerTitle",
"aria-modal": i.open ? "true" : "false",
tabindex: "-1",
"aria-hidden": !i.open
}, i.$attrs, {
onKeydown: R(o, ["esc"])
}), [
r("div", Ee, [
r("div", Qe, [
i.back ? (l(), B(D, {
key: 0,
class: "mc-drawer__back",
"aria-label": "Back",
ghost: "",
onClick: c[0] || (c[0] = (p) => s("back"))
}, {
icon: C(() => [
w(De, { "aria-hidden": "true" })
]),
_: 1
})) : h("", !0),
r("h2", We, f(i.title), 1),
w(D, {
class: "mc-drawer__close",
"aria-label": "Close",
ghost: "",
onClick: o
}, {
icon: C(() => [
w(E, { "aria-hidden": "true" })
]),
_: 1
})
]),
r("div", Je, [
r("div", Xe, [
i.contentTitle ? (l(), n("h2", Ye, f(i.contentTitle), 1)) : h("", !0),
V(i.$slots, "default", {}, void 0, !0)
])
]),
i.$slots.footer ? (l(), n("div", Ze, [
V(i.$slots, "footer", {}, void 0, !0)
])) : h("", !0)
])
], 16, Ke)
]),
_: 3
}, 8, ["is-visible"]));
}
}), Cs = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-673a796c"]]), ea = { class: "mc-field" }, aa = ["for"], ta = {
key: 0,
class: "mc-field__requirement"
}, sa = ["id"], la = { class: "mc-field__content" }, oa = ["id"], na = /* @__PURE__ */ $({
__name: "MField",
props: {
id: {},
label: {},
requirementText: {},
helpText: {},
helpId: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
messageId: {},
message: {}
},
setup(d) {
const e = d, a = v(() => ({
"is-valid": e.isValid,
"is-invalid": e.isInvalid
}));
return (t, o) => (l(), n("div", ea, [
r("label", {
class: "mc-field__label",
for: t.id
}, [
P(f(t.label) + " ", 1),
t.requirementText ? (l(), n("span", ta, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
], 8, aa),
t.helpId && t.helpText ? (l(), n("span", {
key: 0,
id: t.helpId,
class: "mc-field__help"
}, f(t.helpText), 9, sa)) : h("", !0),
r("div", la, [
V(t.$slots, "default", {}, void 0, !0)
]),
(t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
key: 1,
class: g(["mc-field__validation-message", a.value]),
id: t.messageId
}, f(t.message), 11, oa)) : h("", !0)
]));
}
}), Ms = /* @__PURE__ */ _(na, [["__scopeId", "data-v-ead078c4"]]), ia = { class: "mc-field--group" }, da = ["for"], ra = {
key: 0,
class: "mc-field__requirement"
}, ca = {
key: 0,
class: "mc-field__help"
}, ua = { class: "mc-field__content" }, pa = /* @__PURE__ */ $({
__name: "MFieldGroup",
props: {
id: {},
legend: {},
requirementText: {},
helpText: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
message: {}
},
setup(d) {
const e = d, a = v(() => ({
"is-valid": e.isValid,
"is-invalid": e.isInvalid
}));
return (t, o) => (l(), n("fieldset", ia, [
r("legend", {
class: "mc-field__legend",
for: t.id
}, [
P(f(t.legend) + " ", 1),
t.requirementText ? (l(), n("span", ra, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
], 8, da),
t.helpText ? (l(), n("span", ca, f(t.helpText), 1)) : h("", !0),
r("div", ua, [
V(t.$slots, "default", {}, void 0, !0)
]),
(t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
key: 1,
class: g(["mc-field__validation-message", a.value])
}, f(t.message), 3)) : h("", !0)
]));
}
}), zs = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-fc0c08dc"]]), ma = { class: "mc-flag__label" }, _a = /* @__PURE__ */ $({
__name: "MFlag",
props: {
label: {},
appearance: {}
},
setup(d) {
const e = d, a = v(() => ({
[`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
}));
return (t, o) => (l(), n("div", {
class: g(["mc-flag", a.value])
}, [
r("span", ma, f(t.label), 1)
], 2));
}
}), Ls = /* @__PURE__ */ _(_a, [["__scopeId", "data-v-9245f79e"]]), va = ["aria-label"], ba = /* @__PURE__ */ $({
__name: "MLoadingOverlay",
props: {
isVisible: { type: Boolean },
text: {}
},
setup(d) {
return (e, a) => (l(), n("div", {
class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
}, [
r("div", I({
role: "dialog",
tabindex: "-1",
"aria-label": e.text
}, e.$attrs), [
w(K, {
size: "l",
appearance: "inverse",
text: e.text
}, null, 8, ["text"])
], 16, va)
], 2));
}
}), Ts = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-eae6b1f2"]]), fa = ["aria-modal", "aria-hidden"], ha = {
class: "mc-modal__dialog",
role: "document"
}, $a = { class: "mc-modal__header" }, ya = {
key: 0,
class: "mc-modal__icon"
}, ga = {
class: "mc-modal__title",
id: "modalTitle"
}, ka = { class: "mc-modal__body" }, wa = {
key: 0,
class: "mc-modal__footer"
}, Va = { class: "mc-modal__link" }, Ia = /* @__PURE__ */ $({
__name: "MModal",
props: {
open: { type: Boolean },
title: {},
description: {},
closable: { type: Boolean, default: !0 }
},
emits: ["update:open"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-open": a.open
}));
q(
() => a.open,
(i) => {
s("update:open", i);
}
);
const o = () => {
s("update:open", !1);
}, s = e;
return (i, c) => (l(), B(Q, {
"is-visible": i.open,
dialogLabel: "modalTitle"
}, {
default: C(() => [
r("section", I({
class: ["mc-modal", t.value],
role: "dialog",
"aria-labelledby": "modalTitle",
"aria-modal": i.open ? "true" : "false",
tabindex: "-1",
"aria-hidden": !i.open
}, i.$attrs, {
onKeydown: R(o, ["esc"])
}), [
r("div", ha, [
r("header", $a, [
i.$slots.icon ? (l(), n("span", ya, [
V(i.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
r("h2", ga, f(i.title), 1),
i.closable ? (l(), B(D, {
key: 1,
class: "mc-modal__close",
"aria-label": "Close",
ghost: "",
onClick: o
}, {
icon: C(() => [
w(E, { "aria-hidden": "true" })
]),
_: 1
})) : h("", !0)
]),
r("main", ka, [
r("p", null, f(i.description), 1),
V(i.$slots, "default", {}, void 0, !0)
]),
i.$slots.footer ? (l(), n("footer", wa, [
r("span", Va, [
V(i.$slots, "link", {}, void 0, !0)
]),
V(i.$slots, "footer", {}, void 0, !0)
])) : h("", !0)
])
], 16, fa)
]),
_: 3
}, 8, ["is-visible"]));
}
}), js = /* @__PURE__ */ _(Ia, [["__scopeId", "data-v-20ce36b2"]]), Ba = /* @__PURE__ */ $({
__name: "MNumberBadge",
props: {
label: {},
appearance: { default: "standard" },
size: { default: "s" }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
[`mc-number-badge--${e.size}`]: e.size && e.size != "s"
}));
return (t, o) => (l(), n("span", {
class: g(["mc-number-badge", a.value])
}, f(t.label), 3));
}
}), Ca = /* @__PURE__ */ _(Ba, [["__scopeId", "data-v-7e6acb92"]]), Ma = ["id", "name", "value", "disabled"], za = {
key: 0,
value: "",
disabled: ""
}, La = ["value", "disabled"], Ta = /* @__PURE__ */ $({
__name: "MSelect",
props: {
id: {},
name: {},
options: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
readonly: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
[`mc-select--${a.size}`]: a.size && a.size != "m",
"mc-select--readonly": a.readonly,
"is-invalid": a.isInvalid
})), o = e;
return (s, i) => (l(), n("select", I({
id: s.id,
class: ["mc-select", t.value],
name: s.name,
value: s.modelValue,
disabled: s.disabled
}, s.$attrs, {
onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
}), [
s.placeholder ? (l(), n("option", za, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
(l(!0), n(O, null, S(s.options, (c, p) => (l(), n("option", I({
key: p,
value: c.value
}, { ref_for: !0 }, c.attributes, {
disabled: c.disabled
}), f(c.text), 17, La))), 128))
], 16, Ma));
}
}), ja = /* @__PURE__ */ _(Ta, [["__scopeId", "data-v-68c735e4"]]), Oa = {
name: "ChevronLeft24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Sa = ["fill"];
function qa(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"
}, null, -1)
]), 8, Sa);
}
const G = /* @__PURE__ */ _(Oa, [["render", qa]]), Da = {
name: "ChevronRight24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Pa = ["fill"];
function Fa(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"
}, null, -1)
]), 8, Pa);
}
const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
class: "mc-pagination",
role: "navigation",
"aria-label": "pagination"
}, Aa = {
key: 2,
class: "mc-pagination__field"
}, Ra = {
key: 3,
class: "mc-pagination__label",
"aria-current": "page"
}, Ga = /* @__PURE__ */ $({
__name: "MPagination",
props: {
id: {},
modelValue: {},
compact: { type: Boolean },
options: {},
selectLabel: {}
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = e, o = z(a.modelValue);
q(o, (u) => {
u !== a.modelValue && t("update:modelValue", u);
});
const s = v(
() => a.options.findIndex((u) => u.value === o.value)
), i = v(() => s.value === 0), c = v(
() => s.value === a.options.length - 1
), p = () => {
const u = a.options.findIndex(
(b) => b.value === o.value
);
u > 0 && (o.value = a.options[u - 1].value, t("update:modelValue", a.options[u - 1].value));
}, m = () => {
const u = a.options.findIndex(
(b) => b.value === o.value
);
u < a.options.length - 1 && (o.value = a.options[u + 1].value, t("update:modelValue", a.options[u + 1].value));
};
return (u, b) => {
var L;
return l(), n("nav", Na, [
u.compact ? (l(), B(D, {
key: 1,
outlined: "",
"aria-label": "Previous page",
disabled: i.value,
onClick: p
}, {
icon: C(() => [
w(G)
]),
_: 1
}, 8, ["disabled"])) : (l(), B(N, {
key: 0,
"icon-position": "only",
"aria-label": "Previous page",
disabled: i.value,
onClick: p
}, {
icon: C(() => [
w(G)
]),
_: 1
}, 8, ["disabled"])),
u.compact ? h("", !0) : (l(), n("div", Aa, [
w(ja, {
class: "mc-pagination__select",
id: u.id,
modelValue: o.value,
"onUpdate:modelValue": [
b[0] || (b[0] = (y) => o.value = y),
b[1] || (b[1] = (y) => t("update:modelValue", Number(y)))
],
options: u.options,
"aria-label": u.selectLabel
}, null, 8, ["id", "modelValue", "options", "aria-label"])
])),
u.compact ? (l(), n("span", Ra, f((L = u.options.find((y) => y.value === o.value)) == null ? void 0 : L.text), 1)) : h("", !0),
u.compact ? (l(), B(D, {
key: 5,
outlined: "",
"aria-label": "Next page",
disabled: c.value,
onClick: m
}, {
icon: C(() => [
w(U)
]),
_: 1
}, 8, ["disabled"])) : (l(), B(N, {
key: 4,
"icon-position": "only",
"aria-label": "Next page",
disabled: c.value,
onClick: m
}, {
icon: C(() => [
w(U)
]),
_: 1
}, 8, ["disabled"]))
]);
};
}
}), Os = /* @__PURE__ */ _(Ga, [["__scopeId", "data-v-3b9257ac"]]), Ua = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ha = {
key: 0,
class: "mc-controls-options"
}, Ka = { class: "mc-controls-options__label" }, Ea = /* @__PURE__ */ $({
__name: "MPasswordInput",
props: {
id: {},
name: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
readonly: { type: Boolean },
isClearable: { type: Boolean },
clearLabel: { default: "Clear content" },
buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-invalid": a.isInvalid
})), o = z(a.modelValue), s = z(!1), i = () => {
o.value = "", u("update:modelValue", "");
}, c = () => {
s.value = !s.value;
}, p = v(() => s.value ? "text" : "password"), m = v(() => s.value ? "true" : "false"), u = e;
return (b, L) => (l(), n("div", {
class: g(["mc-password-input mc-text-input", t.value])
}, [
H(r("input", I({
class: "mc-password-input__control mc-text-input__control",
"onUpdate:modelValue": L[0] || (L[0] = (y) => o.value = y),
id: b.id,
type: p.value,
name: b.name,
placeholder: b.placeholder,
disabled: b.disabled,
"aria-invalid": b.isInvalid,
readonly: b.readonly
}, b.$attrs, {
onInput: L[1] || (L[1] = (y) => u("update:modelValue", y.target.value))
}), null, 16, Ua), [
[X, o.value]
]),
b.isClearable && o.value ? (l(), n("div", Ha, [
r("button", {
class: "mc-controls-options__button",
onClick: i
}, [
w(F, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
r("span", Ka, f(b.clearLabel), 1)
])
])) : h("", !0),
w(N, {
ref: "button",
role: "switch",
"aria-checked": m.value,
disabled: b.disabled,
onClick: c,
size: "s",
ghost: ""
}, {
default: C(() => [
P(f(s.value ? b.buttonLabel.hide : b.buttonLabel.show), 1)
]),
_: 1
}, 8, ["aria-checked", "disabled"])
], 2));
}
}), Ss = /* @__PURE__ */ _(Ea, [["__scopeId", "data-v-167f10e2"]]), Qa = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], Wa = /* @__PURE__ */ $({
__name: "MPincode",
props: {
id: {},
length: { default: 6 },
name: {},
modelValue: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
readonly: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-invalid": a.isInvalid
})), o = e, s = z(Array(a.length).fill("")), i = z([]), c = (y, k) => {
i.value[k] = y;
};
q(
() => a.modelValue,
(y) => {
const k = String(y ?? "");
s.value = Array.from({ length: a.length }, (T, M) => k[M] ?? "");
},
{ immediate: !0 }
);
const p = (y) => {
Y(() => {
var k;
return (k = i.value[y]) == null ? void 0 : k.focus();
});
}, m = (y, k) => {
const T = y.target.value.replace(/\D/g, "");
T ? (s.value[k] = T[0], o("update:modelValue", s.value.join("")), k + 1 < a.length && p(k + 1)) : (s.value[k] = "", o("update:modelValue", s.value.join("")));
}, u = (y, k) => {
y.key === "ArrowLeft" && k > 0 ? p(k - 1) : y.key === "ArrowRight" && k < a.length - 1 ? p(k + 1) : y.key === "Backspace" && b(y, k);
}, b = (y, k) => {
s.value[k] === "" && k > 0 && (s.value[k - 1] = "", o("update:modelValue", s.value.join("")), p(k - 1));
}, L = (y) => {
var M;
y.preventDefault();
const T = (((M = y.clipboardData) == null ? void 0 : M.getData("text")) ?? "").replace(/\D/g, "").slice(0, a.length).split("");
s.value = Array.from({ length: a.length }, (j, W) => T[W] ?? ""), o("update:modelValue", s.value.join("")), p(Math.min(T.length, a.length - 1));
};
return (y, k) => (l(), n("div", {
class: g(["mc-pincode-input", t.value]),
onPaste: L
}, [
(l(!0), n(O, null, S(s.value, (T, M) => (l(), n("input", I({
key: M,
id: `pincodeItem${M}`,
ref_for: !0,
ref: (j) => c(j, M),
type: "text",
inputmode: "numeric",
maxlength: "1",
pattern: "\\d*",
autocomplete: "one-time-code",
name: y.name || `pincode-${y.id}`,
class: "mc-pincode-input__control",
disabled: y.disabled,
readonly: y.readonly,
value: T
}, { ref_for: !0 }, y.$attrs, {
onInput: (j) => m(j, M),
onKeydown: [
R((j) => b(j, M), ["backspace"]),
(j) => u(j, M)
]
}), null, 16, Qa))), 128))
], 34));
}
}), qs = /* @__PURE__ */ _(Wa, [["__scopeId", "data-v-b2202545"]]), Ja = {
name: "More24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Xa = ["fill"];
function Ya(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"
}, null, -1)
]), 8, Xa);
}
const Za = /* @__PURE__ */ _(Ja, [["render", Ya]]), xa = {
name: "Less24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, et = ["fill"];
function at(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"
}, null, -1)
]), 8, et);
}
const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], lt = ["aria-controls", "disabled"], ot = { class: "mc-quantity-selector__icon" }, nt = { class: "mc-quantity-selector__label" }, it = ["aria-controls", "disabled"], dt = { class: "mc-quantity-selector__icon" }, rt = { class: "mc-quantity-selector__label" }, ct = /* @__PURE__ */ $({
__name: "MQuantitySelector",
props: {
id: {},
name: { default: "quantity-selector-input" },
modelValue: { default: 1 },
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
min: { default: 1 },
max: { default: 100 },
step: { default: 1 },
readonly: { type: Boolean },
incrementlabel: { default: "Increment" },
decrementLabel: { default: "Decrement" }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = z(a.modelValue);
q(t, (m) => {
m !== a.modelValue && p("update:modelValue", m);
});
const o = v(() => ({
[`mc-quantity-selector--${a.size}`]: a.size && a.size != "m",
"is-invalid": a.isInvalid
})), s = () => {
t.value + a.step <= a.max ? t.value += a.step : t.value = a.max;
}, i = () => {
t.value - a.step > a.min ? t.value -= a.step : t.value = a.min;
}, c = (m) => {
t.value = m, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), p("update:modelValue", t.value);
}, p = e;
return (m, u) => (l(), n("div", {
class: g(["mc-quantity-selector", o.value])
}, [
H(r("input", I({
id: m.id,
"onUpdate:modelValue": u[0] || (u[0] = (b) => t.value = b),
class: "mc-quantity-selector__control",
type: "number",
name: m.name,
disabled: m.disabled,
min: m.min,
max: m.max,
step: m.step,
readonly: m.readonly,
"aria-invalid": m.isInvalid,
"aria-valuemin": m.min,
"aria-valuemax": m.max,
"aria-valuenow": t.value
}, m.$attrs, {
onChange: u[1] || (u[1] = (b) => c(Number(b.target.value)))
}), null, 16, st), [
[Z, t.value]
]),
m.readonly ? h("", !0) : (l(), n("button", {
key: 0,
type: "button",
"aria-controls": m.id,
class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
tabindex: "-1",
disabled: m.disabled || t.value === m.max,
onClick: s
}, [
r("span", ot, [
w(Za)
]),
r("span", nt, f(m.incrementlabel), 1)
], 8, lt)),
m.readonly ? h("", !0) : (l(), n("button", {
key: 1,
type: "button",
"aria-controls": m.id,
class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
tabindex: "-1",
disabled: m.disabled || t.value === m.min,
onClick: i
}, [
r("span", dt, [
w(tt)
]),
r("span", rt, f(m.decrementLabel), 1)
], 8, it))
], 2));
}
}), Ds = /* @__PURE__ */ _(ct, [["__scopeId", "data-v-a732650a"]]), ut = { class: "mc-radio" }, pt = ["id", "name", "checked", "disabled", "aria-invalid"], mt = ["for"], _t = /* @__PURE__ */ $({
__name: "MRadio",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
isInvalid: { type: Boolean },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"is-invalid": a.isInvalid
})), o = e;
return (s, i) => (l(), n("div", ut, [
r("input", I({
id: s.id,
type: "radio",
class: ["mc-radio__input", t.value],
name: s.name,
checked: s.modelValue,
disabled: s.disabled,
"aria-invalid": s.isInvalid
}, s.$attrs, {
onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
}), null, 16, pt),
s.label ? (l(), n("label", {
key: 0,
for: s.id,
class: "mc-radio__label"
}, f(s.label), 9, mt)) : h("", !0)
]));
}
}), vt = /* @__PURE__ */ _(_t, [["__scopeId", "data-v-da78938c"]]), bt = /* @__PURE__ */ $({
__name: "MRadioGroup",
props: {
name: {},
modelValue: {},
options: {},
isInvalid: { type: Boolean },
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"mc-field__container--inline": a.inline
})), o = v(() => ({
"mc-field__container--inline__item": a.inline
})), s = e;
return (i, c) => (l(), n("div", {
class: g(["mc-field__container", t.value])
}, [
(l(!0), n(O, null, S(i.options, (p) => (l(), B(vt, {
id: p.id,
key: p.id,
label: p.label,
"is-invalid": i.isInvalid,
name: i.name,
class: g(["mc-field__item", o.value]),
"model-value": i.modelValue === p.value,
disabled: p.disabled,
"onUpdate:modelValue": (m) => m ? s("update:modelValue", p.value) : null
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
], 2));
}
}), Ps = /* @__PURE__ */ _(bt, [["__scopeId", "data-v-d2f5e103"]]), ft = /* @__PURE__ */ $({
__name: "MStatusDot",
props: {
status: { default: "info" },
size: {}
},
setup(d) {
const e = d, a = v(() => ({
[`mc-status-dot--${e.status}`]: e.status && e.status != "info",
[`mc-status-dot--${e.size}`]: e.size && e.size != "m"
}));
return (t, o) => (l(), n("span", {
class: g(["mc-status-dot", a.value])
}, null, 2));
}
}), ht = /* @__PURE__ */ _(ft, [["__scopeId", "data-v-417b563f"]]), $t = { class: "mc-status-badge__label" }, yt = /* @__PURE__ */ $({
__name: "MStatusBadge",
props: {
label: {},
status: { default: "info" }
},
setup(d) {
const e = d, a = v(() => ({
[`mc-status-badge--${e.status}`]: e.status && e.status != "info"
}));
return (t, o) => (l(), n("div", {
class: g(["mc-status-badge", a.value])
}, [
w(ht, { status: t.status }, null, 8, ["status"]),
r("span", $t, f(t.label), 1)
], 2));
}
}), Fs = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-3e437a03"]]), gt = {
name: "Cross20",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, kt = ["fill"];
function wt(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
width: "20",
height: "20"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z"
}, null, -1)
]), 8, kt);
}
const Vt = /* @__PURE__ */ _(gt, [["render", wt]]), It = {
name: "InfoCircleFilled32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Bt = ["fill"];
function Ct(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32",
width: "32",
height: "32"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z"
}, null, -1)
]), 8, Bt);
}
const Mt = /* @__PURE__ */ _(It, [["render", Ct]]), zt = {
name: "WarningCircleFilled32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Lt = ["fill"];
function Tt(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32",
width: "32",
height: "32"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"
}, null, -1)
]), 8, Lt);
}
const jt = /* @__PURE__ */ _(zt, [["render", Tt]]), Ot = {
name: "CrossCircleFilled32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, St = ["fill"];
function qt(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32",
width: "32",
height: "32"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414"
}, null, -1)
]), 8, St);
}
const Dt = /* @__PURE__ */ _(Ot, [["render", qt]]), Pt = {
name: "CheckCircleFilled32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Ft = ["fill"];
function Nt(d, e, a, t, o, s) {
return l(), n("svg", {
"aria-hidden": "true",
fill: a.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32",
width: "32",
height: "32"
}, e[0] || (e[0] = [
r("path", {
"fill-rule": "evenodd",
d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0"
}, null, -1)
]), 8, Ft);
}
const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-notification__content" }, Gt = { class: "mc-status-notification__title" }, Ut = { class: "mc-status-notification__message" }, Ht = {
key: 0,
class: "mc-status-notification__footer"
}, Kt = /* @__PURE__ */ $({
__name: "MStatusNotification",
props: {
title: {},
description: {},
status: { default: "info" },
closable: { type: Boolean }
},
emits: ["close"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
[`mc-status-notification--${a.status}`]: a.status && a.status != "info"
})), o = v(() => {
switch (a.status) {
case "success":
return At;
case "warning":
return jt;
case "error":
return Dt;
case "info":
default:
return Mt;
}
}), s = e;
return (i, c) => (l(), n("section", {
class: g(["mc-status-notification", t.value]),
role: "status"
}, [
(l(), B(A(o.value), {
class: "mc-status-notification__icon",
"aria-hidden": "true"
})),
r("div", Rt, [
r("h2", Gt, f(i.title), 1),
r("p", Ut, f(i.description), 1),
i.$slots.footer ? (l(), n("div", Ht, [
V(i.$slots, "footer", {}, void 0, !0)
])) : h("", !0)
]),
i.closable ? (l(), n("button", {
key: 0,
class: "mc-status-notification-closable__close",
onClick: c[0] || (c[0] = (p) => s("close"))
}, [
w(Vt, {
class: "mc-status-notification-closable__icon",
"aria-hidden": "true"
}),
c[1] || (c[1] = r("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
])) : h("", !0)
], 2));
}
}), Ns = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-457733a1"]]), Et = ["aria-label"], Qt = ["aria-selected", "onClick"], Wt = {
key: 0,
class: "mc-tabs__icon"
}, Jt = { class: "mc-tabs__label" }, Xt = /* @__PURE__ */ $({
__name: "MTabs",
props: {
description: {},
divider: { type: Boolean, default: !0 },
centered: { type: Boolean },
modelValue: { default: 0 },
tabs: {}
},
emits: ["update:modelValue"],
setup(d, { emit: e }) {
const a = d, t = v(() => ({
"mc-tabs--centered": a.centered
})), o = z(a.modelValue), s = (p) => {
a.tabs[p].disabled || p !== o.value && (o.value = p, c("update:modelValue", p));
}, i = (p) => o.value === p, c = e;
return (p, m) => (l(), n("nav", {
class: g(["mc-tabs", t.value])
}, [
r("ul", {
role: "tablist",
class: "mc-tabs__list",
"aria-label": p.description
}, [
(l(!0), n(O, null, S(p.tabs, (u, b) => (l(), n("li", {
key: `tab-${b}`,
role: "presentation",
class: "mc-tabs__item"
}, [
r("button", {
ref_for: !0,
ref: "tab",
role: "tab",
class: g(["mc-tabs__tab", {
"mc-tabs__tab--selected": i(b),
"mc-tabs__tab--disabled": u.disabled
}]),
"aria-selected": i(b),
type: "button",
onClick: (L) => s(b)
}, [
u.icon ? (l(), n("span", Wt, [
(l(), B(A(u.icon)))
])) : h("", !0),
r("div", Jt, [
r("span", null, f(u.label), 1)