@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
1,595 lines • 244 kB
JavaScript
import { defineComponent as b, computed as v, createElementBlock as s, openBlock as o, normalizeClass as _, renderSlot as N, createBlock as I, resolveDynamicComponent as j, mergeProps as x, withCtx as k, createCommentVNode as g, createElementVNode as c, Fragment as A, renderList as B, createVNode as P, createTextVNode as H, toDisplayString as h, normalizeStyle as dt, ref as T, onMounted as se, watch as V, onUnmounted as nt, withModifiers as at, withKeys as Pe, withDirectives as re, vModelDynamic as xt, unref as oe, vModelSelect as St, vModelText as rt, nextTick as Ot, mergeModels as Mt, useModel as Et, toHandlers as Me, onBeforeUnmount as kt } from "vue";
const Tt = /* @__PURE__ */ b({
__name: "MAvatar",
props: {
size: { default: "s" }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-avatar--${t.size}`]: t.size && t.size != "s"
}));
return (n, a) => (o(), s("span", {
class: _(["mc-avatar", d.value])
}, [
N(n.$slots, "default", {}, void 0, !0)
], 2));
}
}), p = (e, t) => {
const d = e.__vccOpts || e;
for (const [n, a] of t)
d[n] = a;
return d;
}, co = /* @__PURE__ */ p(Tt, [["__scopeId", "data-v-9ebdb5d7"]]), Ft = {
key: 0,
class: "mc-link__icon",
"aria-hidden": "true"
}, Lt = { class: "mc-link__label" }, At = {
key: 1,
class: "mc-link__icon",
"aria-hidden": "true"
}, Bt = /* @__PURE__ */ b({
__name: "MLink",
props: {
iconPosition: { default: "left" },
appearance: { default: "standard" },
size: { default: "s" },
href: {},
target: {},
inline: { type: Boolean },
router: { type: Boolean }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-link--${t.appearance}`]: t.appearance && t.appearance != "standard",
[`mc-link--${t.size}`]: t.size && t.size != "s",
"mc-link--inline": t.inline,
"mc-link--stand-alone": !t.inline
})), n = v(() => t.router ? {
to: t.href,
target: t.target
} : {
href: t.href,
target: t.target
});
return (a, r) => (o(), I(j(e.router ? "router-link" : "a"), x({
class: ["mc-link", d.value]
}, n.value), {
default: k(() => [
a.$slots.icon && e.iconPosition == "left" ? (o(), s("span", Ft, [
N(a.$slots, "icon", {}, void 0, !0)
])) : g("", !0),
c("span", Lt, [
N(a.$slots, "default", {}, void 0, !0)
]),
a.$slots.icon && e.iconPosition == "right" ? (o(), s("span", At, [
N(a.$slots, "icon", {}, void 0, !0)
])) : g("", !0)
]),
_: 3
}, 16, ["class"]));
}
}), Rt = /* @__PURE__ */ p(Bt, [["__scopeId", "data-v-b300cd23"]]), Vt = { class: "mc-breadcrumb__container" }, Dt = /* @__PURE__ */ b({
__name: "MBreadcrumb",
props: {
appearance: {},
links: {}
},
setup(e) {
const t = e, d = v(() => ({
[`mc-breadcrumb--${t.appearance}`]: t.appearance && t.appearance != "standard"
})), n = (a) => a === (t.links?.length ?? 0) - 1;
return (a, r) => (o(), s("nav", {
class: _(["mc-breadcrumb", d.value])
}, [
c("ul", Vt, [
(o(!0), s(A, null, B(e.links, (i, u) => (o(), s("li", {
class: "mc-breadcrumb__item",
key: `breadcrumb-${u}`
}, [
P(Rt, {
href: i.href,
router: i.router,
appearance: e.appearance,
inline: "",
class: _({
"mc-breadcrumb__current": n(u)
}),
"aria-current": n(u) ? "page" : void 0
}, {
default: k(() => [
H(h(i.label), 1)
]),
_: 2
}, 1032, ["href", "router", "appearance", "class", "aria-current"])
]))), 128))
])
], 2));
}
}), $o = /* @__PURE__ */ p(Dt, [["__scopeId", "data-v-0cf6e2a5"]]), jt = {
name: "ChevronRight20",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Gt = ["fill"];
function zt(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
width: "20",
height: "20"
}, [...t[0] || (t[0] = [
c("path", {
"fill-rule": "evenodd",
d: "M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06"
}, null, -1)
])], 8, Gt);
}
const ot = /* @__PURE__ */ p(jt, [["render", zt]]), Ut = { class: "mc-built-in-menu__list" }, Ht = { class: "mc-built-in-menu__label" }, Kt = /* @__PURE__ */ b({
__name: "MBuiltInMenu",
props: {
modelValue: {},
items: {},
outlined: { type: Boolean }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = t, a = v({
get() {
return d.modelValue;
},
set(l) {
n("update:modelValue", l);
}
});
function r(l) {
return l.href ? "a" : l.to ? "router-link" : "button";
}
function i(l) {
return r(l) === "a" || r(l) === "router-link";
}
function u(l) {
return {
...r(l) === "a" ? { href: l.href } : { to: l.to },
target: l.target || "_self"
};
}
return (l, f) => (o(), s("nav", {
class: _({
"mc-built-in-menu": !0,
"mc-built-in-menu--outlined": d.outlined
}),
"aria-label": "menu"
}, [
c("ul", Ut, [
(o(!0), s(A, null, B(d.items, ($, m) => (o(), s("li", x({
key: m,
class: {
"mc-built-in-menu__item": !0,
"mc-built-in-menu__item--selected": a.value === m
}
}, { ref_for: !0 }, a.value === m ? { "aria-current": !0 } : {}), [
(o(), I(j(r($)), x({
class: {
"mc-built-in-menu__button": r($) === "button",
"mc-built-in-menu__link": i($)
}
}, { ref_for: !0 }, i($) ? u($) : {}, {
onClick: (w) => a.value = m
}), {
default: k(() => [
$.icon ? (o(), I(j($.icon), {
key: 0,
class: "mc-built-in-menu__icon"
})) : g("", !0),
c("span", Ht, h($.label), 1),
P(ot, { class: "mc-built-in-menu__icon" })
]),
_: 2
}, 1040, ["class", "onClick"]))
], 16))), 128))
])
], 2));
}
}), Wt = /* @__PURE__ */ p(Kt, [["__scopeId", "data-v-8e34b05f"]]), Zt = { class: "mc-loader__spinner" }, Xt = ["viewBox"], Yt = ["r"], qt = {
key: 0,
class: "mc-loader__text",
role: "status"
}, Jt = /* @__PURE__ */ b({
__name: "MLoader",
props: {
appearance: { default: "standard" },
size: { default: "m" },
text: {}
},
setup(e) {
const t = e, d = v(() => ({
[`mc-loader--${t.size}`]: t.size && t.size !== "m",
[`mc-loader--${t.appearance}`]: t.appearance && t.appearance !== "standard",
"mc-loader--text-visible": t.text
})), n = v(() => {
let r;
switch (t.size) {
case "xs":
r = "0 0 20 20";
break;
case "s":
r = "0 0 24 24";
break;
case "l":
r = "0 0 64 64";
break;
default:
r = "0 0 32 32";
}
return r;
}), a = v(() => {
let r;
switch (t.size) {
case "xs":
r = 6;
break;
case "s":
r = 6;
break;
case "l":
r = 19;
break;
default:
r = 9;
}
return r;
});
return (r, i) => (o(), s("div", {
class: _(["mc-loader", d.value])
}, [
c("span", Zt, [
(o(), s("svg", {
class: "mc-loader__icon",
xmlns: "http://www.w3.org/2000/svg",
viewBox: n.value,
"aria-hidden": "true"
}, [
c("circle", {
class: "mc-loader__path",
cx: "50%",
cy: "50%",
r: a.value
}, null, 8, Yt)
], 8, Xt))
]),
e.text ? (o(), s("p", qt, h(e.text), 1)) : g("", !0)
], 2));
}
}), ue = /* @__PURE__ */ p(Jt, [["__scopeId", "data-v-a750e3dc"]]), Qt = ["disabled", "type"], ed = {
key: 0,
class: "mc-button__icon"
}, td = {
key: 1,
class: "mc-button__icon",
style: { position: "absolute" }
}, dd = {
key: 2,
class: "mc-button__icon"
}, nd = {
key: 4,
class: "mc-button__icon"
}, ad = /* @__PURE__ */ b({
__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(e) {
const t = e, d = v(() => ({
[`mc-button--${t.appearance}`]: t.appearance && t.appearance != "standard",
[`mc-button--${t.size}`]: t.size && t.size != "m",
"mc-button--ghost": t.ghost,
"mc-button--outlined": t.outlined,
"mc-button--icon-only": t.iconPosition == "only"
}));
return (n, a) => (o(), s("button", {
class: _(["mc-button", d.value]),
disabled: e.disabled,
type: e.type
}, [
n.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (o(), s("span", ed, [
N(n.$slots, "icon", {}, void 0, !0)
])) : g("", !0),
e.isLoading ? (o(), s("span", td, [
P(ue, {
style: { color: "currentColor" },
size: "s"
})
])) : g("", !0),
n.$slots.icon && e.iconPosition == "only" ? (o(), s("span", dd, [
N(n.$slots, "icon", {}, void 0, !0)
])) : (o(), s("span", {
key: 3,
class: "mc-button__label",
style: dt({ visibility: e.isLoading ? "hidden" : "visible" })
}, [
N(n.$slots, "default", {}, () => [
a[0] || (a[0] = H("Button Label", -1))
], !0)
], 4)),
n.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (o(), s("span", nd, [
N(n.$slots, "icon", {}, void 0, !0)
])) : g("", !0)
], 10, Qt));
}
}), he = /* @__PURE__ */ p(ad, [["__scopeId", "data-v-e66a02e3"]]), rd = { class: "mc-callout__icon" }, od = { class: "mc-callout__content" }, id = { class: "mc-callout__title" }, ld = { class: "mc-callout__message" }, sd = {
key: 0,
class: "mc-callout__footer"
}, ud = /* @__PURE__ */ b({
__name: "MCallout",
props: {
title: {},
description: {},
appearance: { default: "standard" }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-callout--${t.appearance}`]: t.appearance && t.appearance != "standard"
}));
return (n, a) => (o(), s("section", {
class: _(["mc-callout", d.value]),
role: "status"
}, [
c("div", rd, [
N(n.$slots, "icon", {}, void 0, !0)
]),
c("div", od, [
c("h2", id, h(e.title), 1),
c("p", ld, h(e.description), 1),
n.$slots.footer ? (o(), s("div", sd, [
N(n.$slots, "footer", {}, void 0, !0)
])) : g("", !0)
])
], 2));
}
}), fo = /* @__PURE__ */ p(ud, [["__scopeId", "data-v-0f26ffb7"]]), cd = ["disabled", "type"], $d = { class: "mc-button__icon" }, fd = /* @__PURE__ */ b({
__name: "MIconButton",
props: {
appearance: { default: "standard" },
size: { default: "m" },
disabled: { type: Boolean },
ghost: { type: Boolean },
outlined: { type: Boolean },
type: { default: "button" }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-button--${t.appearance}`]: t.appearance && t.appearance != "standard",
[`mc-button--${t.size}`]: t.size && t.size != "m",
"mc-button--ghost": t.ghost,
"mc-button--outlined": t.outlined
}));
return (n, a) => (o(), s("button", {
class: _(["mc-button mc-button--icon-button", d.value]),
disabled: e.disabled,
type: e.type
}, [
c("span", $d, [
N(n.$slots, "icon", {}, void 0, !0)
])
], 10, cd));
}
}), z = /* @__PURE__ */ p(fd, [["__scopeId", "data-v-dd1fad81"]]), md = {
name: "ChevronLeft20",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, vd = ["fill"];
function pd(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
width: "20",
height: "20"
}, [...t[0] || (t[0] = [
c("path", {
"fill-rule": "evenodd",
d: "M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0"
}, null, -1)
])], 8, vd);
}
const hd = /* @__PURE__ */ p(md, [["render", pd]]), bd = {
class: "mc-carousel",
role: "group",
"aria-roledescription": "carousel",
"aria-labelledby": "mc-carousel__title"
}, gd = { class: "mc-carousel__header" }, _d = { class: "mc-carousel__headings" }, yd = { class: "mc-carousel__controls" }, Cd = /* @__PURE__ */ b({
__name: "MCarousel",
props: {
previousButtonAriaLabel: { default: "previous" },
nextButtonAriaLabel: { default: "next" }
},
setup(e) {
const t = T(0), d = T(null);
let n;
const a = {
behavior: "smooth",
block: "nearest",
inline: "center"
};
function r() {
return d.value ? [...d.value.children] : [];
}
se(() => {
n = new IntersectionObserver(
(m) => {
const w = m.find(
(y) => y.isIntersecting
);
w && (t.value = r().findIndex(
(y) => y === w.target
));
},
{
root: d.value,
threshold: 0.9
}
), r().forEach((m) => {
n.observe(m);
});
});
function i(m) {
r()[m].scrollIntoView(a);
}
function u() {
t.value > 0 && i(t.value - 1);
}
function l() {
t.value < r().length - 1 && i(t.value + 1);
}
const f = v(() => t.value === 0), $ = v(
() => t.value === r().length - 1
);
return (m, w) => (o(), s("div", bd, [
c("div", gd, [
c("div", _d, [
N(m.$slots, "header", {}, void 0, !0)
]),
c("div", yd, [
P(z, {
size: "s",
outlined: "",
onClick: u,
disabled: f.value,
"aria-label": e.previousButtonAriaLabel
}, {
icon: k(() => [
P(hd)
]),
_: 1
}, 8, ["disabled", "aria-label"]),
P(z, {
size: "s",
outlined: "",
onClick: l,
disabled: $.value,
"aria-label": e.nextButtonAriaLabel
}, {
icon: k(() => [
P(ot)
]),
_: 1
}, 8, ["disabled", "aria-label"])
])
]),
c("div", {
class: "mc-carousel__content",
ref_key: "contentContainer",
ref: d
}, [
(o(!0), s(A, null, B(m.$slots.default?.(), (y, C) => (o(), I(j(y), {
key: `carousel-slide-${C}`
}))), 128))
], 512)
]));
}
}), mo = /* @__PURE__ */ p(Cd, [["__scopeId", "data-v-5ec737d5"]]), wd = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], Pd = ["for"], Id = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MCheckbox",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
indeterminate: { type: Boolean },
isInvalid: { type: Boolean },
disabled: { type: Boolean },
indented: { type: Boolean }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = v(() => ({
"is-invalid": d.isInvalid
})), a = v(() => ({
"mc-checkbox--indented": d.indented
})), r = t;
return (i, u) => (o(), s("div", {
class: _(["mc-checkbox", a.value])
}, [
c("input", x({
id: e.id,
type: "checkbox",
class: ["mc-checkbox__input", n.value],
name: e.name,
checked: e.modelValue,
indeterminate: e.indeterminate,
disabled: e.disabled,
"aria-invalid": e.isInvalid
}, i.$attrs, {
onChange: u[0] || (u[0] = (l) => r("update:modelValue", l.target.checked))
}), null, 16, wd),
e.label ? (o(), s("label", {
key: 0,
for: e.id,
class: "mc-checkbox__label"
}, h(e.label), 9, Pd)) : g("", !0)
], 2));
}
}), Nd = /* @__PURE__ */ p(Id, [["__scopeId", "data-v-829485d4"]]), xd = /* @__PURE__ */ b({
__name: "MCheckboxGroup",
props: {
name: {},
modelValue: {},
options: {},
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = T([]);
V(
() => d.modelValue,
(l) => {
n.value = l || [];
},
{ immediate: !0 }
);
const a = (l, f) => {
let $ = [...n.value];
l && !$.includes(f) ? $.push(f) : $ = $.filter((m) => m !== f), u("update:modelValue", $), n.value = $;
}, r = v(() => ({
"mc-field__container--inline": d.inline
})), i = v(() => ({
"mc-field__container--inline__item": d.inline
})), u = t;
return (l, f) => (o(), s("div", {
class: _(["mc-field__container", r.value])
}, [
(o(!0), s(A, null, B(e.options, ($) => (o(), I(Nd, {
id: $.id,
key: $.id,
label: $.label,
"is-invalid": $.isInvalid,
name: e.name,
class: _(["mc-field__item", i.value]),
"model-value": e.modelValue ? e.modelValue.includes($.value) : void 0,
disabled: $.disabled,
indented: $.indented,
"onUpdate:modelValue": (m) => a(m, $.value)
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "indented", "onUpdate:modelValue"]))), 128))
], 2));
}
}), vo = /* @__PURE__ */ p(xd, [["__scopeId", "data-v-ede2973f"]]), Sd = {
name: "CheckCircleFilled24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Od = ["fill"];
function Md(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0"
}, null, -1)
])], 8, Od);
}
const it = /* @__PURE__ */ p(Sd, [["render", Md]]), po = /* @__PURE__ */ b({
__name: "MCheckListMenu",
props: {
modelValue: {},
items: {},
outlined: { type: Boolean }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = t, a = v({
get() {
return d.modelValue;
},
set(i) {
n("update:modelValue", i);
}
}), r = v(
() => d.items.map((i) => ({
label: i.label,
icon: i.checked ? it : void 0,
href: i.href,
to: i.to,
target: i.target
}))
);
return (i, u) => (o(), I(Wt, {
modelValue: a.value,
"onUpdate:modelValue": u[0] || (u[0] = (l) => a.value = l),
items: r.value,
outlined: d.outlined
}, null, 8, ["modelValue", "items", "outlined"]));
}
}), Ed = ["aria-valuenow"], kd = {
key: 0,
class: "mc-circular-progressbar__percentage"
}, Td = { class: "mc-circular-progressbar__value" }, Fd = {
key: 1,
class: "mc-circular-progressbar__content"
}, Ld = { class: "mc-circular-progressbar__number" }, Ad = {
key: 0,
class: "mc-circular-progressbar__text"
}, Bd = /* @__PURE__ */ b({
__name: "MCircularProgressbar",
props: {
size: {},
value: { default: 0 },
type: { default: "percentage" },
contentValue: {},
additionalInfo: {}
},
setup(e) {
const t = e, d = v(() => ({
[`mc-circular-progressbar--${t.size}`]: t.size && t.size != "l"
}));
return (n, a) => (o(), s("div", {
class: _(["mc-circular-progressbar", d.value]),
role: "progressbar",
style: dt(`--progress-value: ${e.value};`),
"aria-valuenow": e.value,
"aria-valuemin": 0,
"aria-valuemax": 100
}, [
a[1] || (a[1] = c("svg", {
class: "mc-circular-progressbar__line",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
viewBox: "0 0 100 100"
}, [
c("circle", {
class: "mc-circular-progressbar__track",
cx: "50",
cy: "50",
r: "46"
}),
c("circle", {
class: "mc-circular-progressbar__indicator",
cx: "50",
cy: "50",
r: "46"
})
], -1)),
e.type === "percentage" ? (o(), s("div", kd, [
c("p", Td, h(e.value), 1),
a[0] || (a[0] = c("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
])) : g("", !0),
e.type === "content" ? (o(), s("div", Fd, [
c("p", Ld, h(e.contentValue), 1),
e.additionalInfo ? (o(), s("p", Ad, h(e.additionalInfo), 1)) : g("", !0)
])) : g("", !0)
], 14, Ed));
}
}), Rd = /* @__PURE__ */ p(Bd, [["__scopeId", "data-v-f37d31c9"]]), Vd = /* @__PURE__ */ b({
__name: "MContainer",
props: {
fluid: { type: Boolean }
},
setup(e) {
const t = e, d = v(() => ({
"ml-container--fluid": t.fluid
}));
return (n, a) => (o(), s("div", {
class: _(["ml-container", d.value])
}, [
N(n.$slots, "default", {}, void 0, !0)
], 2));
}
}), ho = /* @__PURE__ */ p(Vd, [["__scopeId", "data-v-e0acf0a2"]]), Dd = {
name: "CrossCircleFilled24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, jd = ["fill"];
function Gd(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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, jd);
}
const de = /* @__PURE__ */ p(Dd, [["render", Gd]]), zd = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Ud = {
key: 0,
class: "mc-datepicker__controls-options mc-controls-options"
}, Hd = { class: "mc-controls-options__label" }, Kd = /* @__PURE__ */ b({
inheritAttrs: !1,
__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(e, { emit: t }) {
const d = e, n = v(() => ({
[`mc-text-input--${d.size} mc-datepicker--${d.size}`]: d.size && d.size != "m",
"is-invalid": d.isInvalid
})), a = T(d.modelValue), r = () => {
a.value = "", i("update:modelValue", "");
}, i = t;
return (u, l) => (o(), s("div", {
class: _(["mc-datepicker mc-text-input", n.value])
}, [
c("input", x({
id: e.id,
class: "mc-datepicker__control mc-text-input__control",
value: a.value,
type: "date",
name: e.name,
disabled: e.disabled,
"aria-invalid": e.isInvalid,
readonly: e.readonly
}, u.$attrs, {
onInput: l[0] || (l[0] = (f) => i("update:modelValue", f.target.value))
}), null, 16, zd),
e.isClearable && a.value ? (o(), s("div", Ud, [
c("button", {
type: "button",
class: "mc-controls-options__button",
onClick: r
}, [
P(de, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
c("span", Hd, h(e.clearLabel), 1)
])
])) : g("", !0)
], 2));
}
}), bo = /* @__PURE__ */ p(Kd, [["__scopeId", "data-v-e9a7bac9"]]), Wd = { class: "mc-divider" }, Zd = /* @__PURE__ */ b({
__name: "MDivider",
props: {
orientation: { default: "horizontal" },
appearance: { default: "primary" },
size: { default: "s" }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-divider-${t.orientation}`]: t.orientation,
[`mc-divider-horizontal--${t.appearance}`]: t.appearance && t.appearance != "primary",
[`mc-divider-horizontal--${t.size}`]: t.size && t.size != "s"
}));
return (n, a) => (o(), s("div", Wd, [
c("div", {
class: _(d.value)
}, null, 2),
N(n.$slots, "default", {}, void 0, !0)
]));
}
}), Xd = /* @__PURE__ */ p(Zd, [["__scopeId", "data-v-49acd035"]]), Yd = {
name: "ArrowBack24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, qd = ["fill"];
function Jd(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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, qd);
}
const Qd = /* @__PURE__ */ p(Yd, [["render", Jd]]), en = {
name: "Cross24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, tn = ["fill"];
function dn(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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, tn);
}
const lt = /* @__PURE__ */ p(en, [["render", dn]]), nn = ["aria-labelledby"], an = /* @__PURE__ */ b({
__name: "MOverlay",
props: {
isVisible: { type: Boolean },
dialogLabel: {}
},
setup(e) {
return (t, d) => (o(), s("div", {
class: _(["mc-overlay", { "is-visible": e.isVisible }])
}, [
c("div", {
role: "dialog",
tabindex: "-1",
"aria-labelledby": e.dialogLabel
}, [
N(t.$slots, "default", {}, void 0, !0)
], 8, nn)
], 2));
}
}), st = /* @__PURE__ */ p(an, [["__scopeId", "data-v-c69efda4"]]), rn = ["aria-modal", "aria-hidden"], on = {
class: "mc-drawer__dialog",
role: "document"
}, ln = { class: "mc-drawer__header" }, sn = { class: "mc-drawer__body" }, un = {
class: "mc-drawer__content",
tabindex: "0"
}, cn = {
key: 0,
class: "mc-drawer__content__title"
}, $n = {
key: 0,
class: "mc-drawer__footer"
}, fn = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MDrawer",
props: {
open: { type: Boolean },
position: {},
extended: { type: Boolean },
back: { type: Boolean },
title: {},
contentTitle: {},
scroll: { type: Boolean, default: !0 },
closeOnOverlay: { type: Boolean }
},
emits: ["update:open", "back"],
setup(e, { emit: t }) {
const d = e, n = v(() => ({
"is-open": d.open,
"mc-drawer--extend": d.extended,
[`mc-drawer--${d.position}`]: d.position && d.position != "right"
})), a = T(null), r = typeof window < "u" && typeof document < "u", i = () => {
r && (document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden");
}, u = () => {
r && (document.body.style.overflow = "", document.documentElement.style.overflow = "");
};
se(() => {
V(
() => d.open,
(m) => {
$("update:open", m), m && a.value && a.value.focus(), d.scroll === !1 && (m ? i() : u());
},
{ immediate: !0 }
);
}), nt(() => {
u();
});
const l = () => {
d.closeOnOverlay && f();
}, f = () => {
$("update:open", !1);
}, $ = t;
return (m, w) => (o(), I(st, {
"is-visible": e.open,
dialogLabel: "drawerTitle",
onClick: l
}, {
default: k(() => [
c("section", x({
class: ["mc-drawer", n.value],
role: "dialog",
"aria-labelledby": "drawerTitle",
"aria-modal": e.open ? "true" : "false",
tabindex: "-1",
"aria-hidden": !e.open
}, m.$attrs, {
onKeydown: Pe(f, ["esc"]),
onClick: w[1] || (w[1] = at(() => {
}, ["stop"]))
}), [
c("div", on, [
c("div", ln, [
e.back ? (o(), I(z, {
key: 0,
class: "mc-drawer__back",
"aria-label": "Back",
ghost: "",
onClick: w[0] || (w[0] = (y) => $("back"))
}, {
icon: k(() => [
P(Qd, { "aria-hidden": "true" })
]),
_: 1
})) : g("", !0),
c("h2", {
class: "mc-drawer__title",
tabindex: "-1",
id: "drawerTitle",
ref_key: "titleRef",
ref: a
}, h(e.title), 513),
P(z, {
class: "mc-drawer__close",
"aria-label": "Close",
ghost: "",
onClick: f
}, {
icon: k(() => [
P(lt, { "aria-hidden": "true" })
]),
_: 1
})
]),
c("div", sn, [
c("div", un, [
e.contentTitle ? (o(), s("h2", cn, h(e.contentTitle), 1)) : g("", !0),
N(m.$slots, "default", {}, void 0, !0)
])
]),
m.$slots.footer ? (o(), s("div", $n, [
N(m.$slots, "footer", {}, void 0, !0)
])) : g("", !0)
])
], 16, rn)
]),
_: 3
}, 8, ["is-visible"]));
}
}), go = /* @__PURE__ */ p(fn, [["__scopeId", "data-v-ee6c32a9"]]), mn = { class: "mc-field" }, vn = ["for"], pn = {
key: 0,
class: "mc-field__requirement"
}, hn = ["id"], bn = { class: "mc-field__content" }, gn = ["id"], _n = /* @__PURE__ */ b({
__name: "MField",
props: {
id: {},
label: {},
requirementText: {},
helpText: {},
helpId: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
isLoading: { type: Boolean },
messageId: {},
message: {}
},
setup(e) {
const t = e, d = v(() => ({
"is-valid": t.isValid,
"is-invalid": t.isInvalid,
"is-loading": t.isLoading
}));
return (n, a) => (o(), s("div", mn, [
c("label", {
class: "mc-field__label",
for: e.id
}, [
H(h(e.label) + " ", 1),
e.requirementText ? (o(), s("span", pn, "(" + h(e.requirementText) + ")", 1)) : g("", !0)
], 8, vn),
e.helpId && e.helpText ? (o(), s("span", {
key: 0,
id: e.helpId,
class: "mc-field__help"
}, h(e.helpText), 9, hn)) : g("", !0),
c("div", bn, [
N(n.$slots, "default", {}, void 0, !0)
]),
(e.isValid || e.isInvalid || e.isLoading) && e.message ? (o(), s("span", {
key: 1,
class: _(["mc-field__validation-message", d.value]),
id: e.messageId
}, [
e.isLoading ? (o(), I(ue, {
key: 0,
size: "xs"
})) : g("", !0),
H(" " + h(e.message), 1)
], 10, gn)) : g("", !0)
]));
}
}), _o = /* @__PURE__ */ p(_n, [["__scopeId", "data-v-8c950dea"]]), yn = { class: "mc-field--group" }, Cn = ["for"], wn = {
key: 0,
class: "mc-field__requirement"
}, Pn = {
key: 0,
class: "mc-field__help"
}, In = { class: "mc-field__content" }, Nn = /* @__PURE__ */ b({
__name: "MFieldGroup",
props: {
id: {},
legend: {},
requirementText: {},
helpText: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
message: {}
},
setup(e) {
const t = e, d = v(() => ({
"is-valid": t.isValid,
"is-invalid": t.isInvalid
}));
return (n, a) => (o(), s("fieldset", yn, [
c("legend", {
class: "mc-field__legend",
for: e.id
}, [
H(h(e.legend) + " ", 1),
e.requirementText ? (o(), s("span", wn, "(" + h(e.requirementText) + ")", 1)) : g("", !0)
], 8, Cn),
e.helpText ? (o(), s("span", Pn, h(e.helpText), 1)) : g("", !0),
c("div", In, [
N(n.$slots, "default", {}, void 0, !0)
]),
(e.isValid || e.isInvalid) && e.message ? (o(), s("span", {
key: 1,
class: _(["mc-field__validation-message", d.value])
}, h(e.message), 3)) : g("", !0)
]));
}
}), yo = /* @__PURE__ */ p(Nn, [["__scopeId", "data-v-fc0c08dc"]]), xn = { class: "mc-flag__label" }, Sn = /* @__PURE__ */ b({
__name: "MFlag",
props: {
label: {},
appearance: {}
},
setup(e) {
const t = e, d = v(() => ({
[`mc-flag--${t.appearance}`]: t.appearance && t.appearance != "standard"
}));
return (n, a) => (o(), s("div", {
class: _(["mc-flag", d.value])
}, [
c("span", xn, h(e.label), 1)
], 2));
}
}), Co = /* @__PURE__ */ p(Sn, [["__scopeId", "data-v-dae5e572"]]), On = ["aria-valuenow"], Mn = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MLinearProgressbarBuffer",
props: {
size: {},
value: { default: 0 }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-linear-progressbar-buffer--${t.size}`]: t.size && t.size != "m"
}));
return (n, a) => (o(), s("div", {
class: _(["mc-linear-progressbar-buffer", d.value])
}, [
c("div", x({
class: "mc-linear-progressbar-buffer__indicator",
role: "progressbar",
style: `--progress-value: ${e.value};`,
"aria-valuenow": e.value,
"aria-valuemin": 0,
"aria-valuemax": 100
}, n.$attrs), null, 16, On)
], 2));
}
}), En = /* @__PURE__ */ p(Mn, [["__scopeId", "data-v-5306d571"]]), kn = { class: "mc-linear-progressbar-percentage" }, Tn = ["aria-valuenow"], Fn = { class: "mc-linear-progressbar-percentage__label" }, Ln = { class: "mc-linear-progressbar-percentage__value" }, An = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MLinearProgressbarPercentage",
props: {
value: { default: 0 }
},
setup(e) {
return (t, d) => (o(), s("div", kn, [
c("div", x({
class: "mc-linear-progressbar-percentage__indicator",
role: "progressbar",
style: `--progress-value: ${e.value};`,
"aria-valuenow": e.value,
"aria-valuemin": 0,
"aria-valuemax": 100
}, t.$attrs), [
c("div", Fn, [
c("p", Ln, [
H(h(e.value), 1),
d[0] || (d[0] = c("span", { class: "mc-linear-progressbar-percentage__unit" }, "%", -1))
])
])
], 16, Tn)
]));
}
}), wo = /* @__PURE__ */ p(An, [["__scopeId", "data-v-01197cd0"]]), Bn = ["aria-label"], Rn = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MLoadingOverlay",
props: {
isVisible: { type: Boolean },
text: {}
},
setup(e) {
return (t, d) => (o(), s("div", {
class: _(["mc-loading-loader", { "is-visible": e.isVisible }])
}, [
c("div", x({
role: "dialog",
tabindex: "-1",
"aria-label": e.text
}, t.$attrs), [
P(ue, {
size: "l",
appearance: "inverse",
text: e.text
}, null, 8, ["text"])
], 16, Bn)
], 2));
}
}), Po = /* @__PURE__ */ p(Rn, [["__scopeId", "data-v-d5adc90d"]]), Vn = ["aria-modal", "aria-hidden"], Dn = {
class: "mc-modal__dialog",
role: "document"
}, jn = { class: "mc-modal__header" }, Gn = {
key: 0,
class: "mc-modal__icon"
}, zn = {
class: "mc-modal__title",
id: "modalTitle"
}, Un = { class: "mc-modal__body" }, Hn = {
key: 0,
class: "mc-modal__footer"
}, Kn = { class: "mc-modal__link" }, Wn = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MModal",
props: {
open: { type: Boolean },
title: {},
description: {},
closable: { type: Boolean, default: !0 },
scroll: { type: Boolean, default: !0 },
closeOnOverlay: { type: Boolean }
},
emits: ["update:open"],
setup(e, { emit: t }) {
const d = e, n = v(() => ({
"is-open": d.open
})), a = typeof window < "u" && typeof document < "u", r = () => {
a && (document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden");
}, i = () => {
a && (document.body.style.overflow = "", document.documentElement.style.overflow = "");
};
se(() => {
V(
() => d.open,
($) => {
f("update:open", $), d.scroll === !1 && ($ ? r() : i());
},
{ immediate: !0 }
);
}), nt(() => {
i();
});
const u = () => {
d.closeOnOverlay && l();
}, l = () => {
f("update:open", !1);
}, f = t;
return ($, m) => (o(), I(st, {
"is-visible": e.open,
dialogLabel: "modalTitle",
onClick: u
}, {
default: k(() => [
c("section", x({
class: ["mc-modal", n.value],
role: "dialog",
"aria-labelledby": "modalTitle",
"aria-modal": e.open ? "true" : "false",
tabindex: "-1",
"aria-hidden": !e.open
}, $.$attrs, {
onKeydown: Pe(l, ["esc"]),
onClick: m[0] || (m[0] = at(() => {
}, ["stop"]))
}), [
c("div", Dn, [
c("header", jn, [
$.$slots.icon ? (o(), s("span", Gn, [
N($.$slots, "icon", {}, void 0, !0)
])) : g("", !0),
c("h2", zn, h(e.title), 1),
e.closable ? (o(), I(z, {
key: 1,
class: "mc-modal__close",
"aria-label": "Close",
ghost: "",
onClick: l
}, {
icon: k(() => [
P(lt, { "aria-hidden": "true" })
]),
_: 1
})) : g("", !0)
]),
c("main", Un, [
c("p", null, h(e.description), 1),
N($.$slots, "default", {}, void 0, !0)
]),
$.$slots.footer ? (o(), s("footer", Hn, [
c("span", Kn, [
N($.$slots, "link", {}, void 0, !0)
]),
N($.$slots, "footer", {}, void 0, !0)
])) : g("", !0)
])
], 16, Vn)
]),
_: 3
}, 8, ["is-visible"]));
}
}), Io = /* @__PURE__ */ p(Wn, [["__scopeId", "data-v-8de40d20"]]), Zn = /* @__PURE__ */ b({
__name: "MNumberBadge",
props: {
label: {},
appearance: { default: "standard" },
size: { default: "s" }
},
setup(e) {
const t = e, d = v(() => ({
[`mc-number-badge--${t.appearance}`]: t.appearance && t.appearance != "standard",
[`mc-number-badge--${t.size}`]: t.size && t.size != "s"
}));
return (n, a) => (o(), s("span", {
class: _(["mc-number-badge", d.value])
}, h(e.label), 3));
}
}), ut = /* @__PURE__ */ p(Zn, [["__scopeId", "data-v-7b35d96e"]]), Xn = ["id", "name", "value", "disabled"], Yn = {
key: 0,
value: "",
disabled: ""
}, qn = ["value", "disabled"], Jn = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "MSelect",
props: {
id: {},
name: {},
options: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
readonly: { type: Boolean }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = v(() => ({
[`mc-select--${d.size}`]: d.size && d.size != "m",
"mc-select--readonly": d.readonly,
"is-invalid": d.isInvalid
})), a = t;
return (r, i) => (o(), s("select", x({
id: e.id,
class: ["mc-select", n.value],
name: e.name,
value: e.modelValue,
disabled: e.disabled
}, r.$attrs, {
onChange: i[0] || (i[0] = (u) => a("update:modelValue", u.target.value))
}), [
e.placeholder ? (o(), s("option", Yn, " -- " + h(e.placeholder) + " -- ", 1)) : g("", !0),
(o(!0), s(A, null, B(e.options, (u, l) => (o(), s("option", x({
key: l,
value: u.value
}, { ref_for: !0 }, u.attributes, {
disabled: u.disabled
}), h(u.text), 17, qn))), 128))
], 16, Xn));
}
}), Qn = /* @__PURE__ */ p(Jn, [["__scopeId", "data-v-ded98964"]]), e1 = {
name: "ChevronLeft24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, t1 = ["fill"];
function d1(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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, t1);
}
const Ee = /* @__PURE__ */ p(e1, [["render", d1]]), n1 = {
name: "ChevronRight24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, a1 = ["fill"];
function r1(e, t, d, n, a, r) {
return o(), s("svg", {
"aria-hidden": "true",
fill: d.color,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "24",
height: "24"
}, [...t[0] || (t[0] = [
c("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, a1);
}
const be = /* @__PURE__ */ p(n1, [["render", r1]]), o1 = {
class: "mc-pagination",
role: "navigation"
}, i1 = {
key: 2,
class: "mc-pagination__field"
}, l1 = {
key: 3,
class: "mc-pagination__label",
"aria-current": "page"
}, s1 = /* @__PURE__ */ b({
__name: "MPagination",
props: {
id: {},
modelValue: {},
compact: { type: Boolean },
options: {},
selectLabel: {}
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const d = e, n = t, a = T(d.modelValue);
V(a, ($) => {
$ !== d.modelValue && n("update:modelValue", $);
});
const r = v(
() => d.options.findIndex(($) => $.value === a.value)
), i = v(() => r.value === 0), u = v(
() => r.value === d.options.length - 1
), l = () => {
const $ = d.options.findIndex(
(m) => m.value === a.value
);
$ > 0 && (a.value = d.options[$ - 1].value, n("update:modelValue", d.options[$ - 1].value));
}, f = () => {
const $ = d.options.findIndex(
(m) => m.value === a.value
);
$ < d.options.length - 1 && (a.value = d.options[$ + 1].value, n("update:modelValue", d.options[$ + 1].value));
};
return ($, m) => (o(), s("nav", o1, [
e.compact ? (o(), I(z, {
key: 1,
outlined: "",
"aria-label": "Previous page",
disabled: i.value,
onClick: l
}, {
icon: k(() => [
P(Ee)
]),
_: 1
}, 8, ["disabled"])) : (o(), I(he, {
key: 0,
"icon-position": "only",
"aria-label": "Previous page",
disabled: i.value,
onClick: l
}, {
icon: k(() => [
P(Ee)
]),
_: 1
}, 8, ["disabled"])),
e.compact ? g("", !0) : (o(), s("div", i1, [
P(Qn, {
class: "mc-pagination__select",
id: e.id,
modelValue: a.value,
"onUpdate:modelValue": [
m[0] || (m[0] = (w) => a.value = w),
m[1] || (m[1] = (w) => n("update:modelValue", Number(w)))
],
options: e.options,
"aria-label": e.selectLabel
}, null, 8, ["id", "modelValue", "options", "aria-label"])
])),
e.compact ? (o(), s("span", l1, h(e.options.find((w) => w.value === a.value)?.text), 1)) : g("", !0),
e.compact ? (o(), I(z, {
key: 5,
outlined: "",
"aria-label": "Next page",
disabled: u.value,
onClick: f
}, {
icon: k(() => [
P(be)
]),
_: 1
}, 8, ["disabled"])) : (o(), I(he, {
key: 4,
"icon-position": "only",
"aria-label": "Next page",
disabled: u.value,
onClick: f
}, {
icon: k(() => [
P(be)
]),
_: 1
}, 8, ["disabled"]))
]));
}
}), No = /* @__PURE__ */ p(s1, [["__scopeId", "data-v-4cb89be1"]]), u1 = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], c1 = {
key: 0,
class: "mc-controls-options"
}, $1 = { class: "mc-controls-options__label" }, f1 = /* @__PURE__ */ b({
inheritAttrs: !1,
__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(e, { emit: t }) {
const d = e, n = v(() => ({
"is-invalid": d.isInvalid
})), a = T(d.modelValue), r = T(!1), i = () => {
a.value = "", $("update:modelValue", "");
}, u = () => {
r.value = !r.value;
}, l = v(() => r.value ? "text" : "password"), f = v(() => r.value ? "true" : "false"), $ = t;
return (m, w) => (o(), s("div", {
class: _(["mc-password-input mc-text-input", n.value])
}, [
re(c("input", x({
class: "mc-password-input__control mc-text-input__control",
"onUpdate:modelValue": w[0] || (w[0] = (y) => a.value = y),
id: e.id,
type: l.value,
name: e.name,
placeholder: e.placeholder,
disabled: e.disabled,
"aria-invalid": e.isInvalid,
readonly: e.readonly
}, m.$attrs, {
onInput: w[1] || (w[1] = (y) => $("update:modelValue", y.target.value))
}), null, 16, u1), [
[xt, a.value]
]),
e.isClearable && a.value ? (o(), s("div", c1, [
c("button", {
class: "mc-controls-options__button",
onClick: i
}, [
P(de, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
c("span", $1, h(e.clearLabel), 1)
])
])) : g("", !0),
P(he, {
ref: "button",
role: "switch",
"aria-checked": f.value,
disabled: e.disabled,
onClick: u,
size: "s",
ghost: ""
}, {
default: k(() => [
H(h(r.value ? e.buttonLabel.hide : e.buttonLabel.show), 1)
]),
_: 1
}, 8, ["aria-checked", "disabled"])
], 2));
}
}), xo = /* @__PURE__ */ p(f1, [["__scopeId", "data-v-47bbb809"]]), m1 = { version: 4, country_calling_codes: { 1: ["US", "AG", "AI", "AS", "BB", "BM", "BS", "CA", "DM", "DO", "GD", "GU", "JM", "KN", "KY", "LC", "MP", "MS", "PR", "SX", "TC", "TT", "VC", "VG", "VI"], 7: ["RU", "KZ"], 20: ["EG"], 27: ["ZA"], 30: ["GR"], 31: ["NL"], 32: ["BE"], 33: ["FR"], 34: ["ES"], 36: ["HU"], 39: ["IT", "VA"], 40: ["RO"], 41: ["CH"], 43: ["AT"], 44: ["GB", "GG", "IM", "JE"], 45: ["DK"], 46: ["SE"], 47: ["NO", "SJ"], 48: ["PL"], 49: ["DE"], 51: ["PE"], 52: ["MX"], 53: ["CU"], 54: ["AR"], 55: ["BR"], 56: ["CL"], 57: ["CO"], 58: ["VE"], 60: ["MY"], 61: ["AU", "CC", "CX"], 62: ["ID"], 63: ["PH"], 64: ["NZ"], 65: ["SG"], 66: ["TH"], 81: ["JP"], 82: ["KR"], 84: ["VN"], 86: ["CN"], 90: ["TR"], 91: ["IN"], 92: ["PK"], 93: ["AF"], 94: ["LK"], 95: ["MM"], 98: ["IR"], 211: ["SS"], 212: ["MA", "EH"], 213: ["DZ"], 216: ["TN"], 218: ["LY"], 220: ["GM"], 221: ["SN"], 222: ["MR"], 223: ["ML"], 224: ["GN"], 225: ["CI"], 226: ["BF"], 227: ["NE"], 228: ["TG"], 229: ["BJ"], 230: ["MU"], 231: ["LR"], 232: ["SL"], 233: ["GH"], 234: ["NG"], 235: ["TD"], 236: ["CF"], 237: ["CM"], 238: ["CV"], 239: ["ST"], 240: ["GQ"], 241: ["GA"], 242: ["CG"], 243: ["CD"], 244: ["AO"], 245: ["GW"], 246: ["IO"], 247: ["AC"], 248: ["SC"], 249: ["SD"], 250: ["RW"], 251: ["ET"], 252: ["SO"], 253: ["DJ"], 254: ["KE"], 255: ["TZ"], 256: ["UG"], 257: ["BI"], 258: ["MZ"], 260: ["ZM"], 261: ["MG"], 262: ["RE", "YT"], 263: ["ZW"], 264: ["NA"], 265: ["MW"], 266: ["LS"], 267: ["BW"], 268: ["SZ"], 269: ["KM"], 290: ["SH", "TA"], 291: ["ER"], 297: ["AW"], 298: ["FO"], 299: ["GL"], 350: ["GI"], 351: ["PT"], 352: ["LU"], 353: ["IE"], 354: ["IS"], 355: ["AL"], 356: ["MT"], 357: ["CY"], 358: ["FI", "AX"], 359: ["BG"], 370: ["LT"], 371: ["LV"], 372: ["EE"], 373: ["MD"], 374: ["AM"], 375: ["BY"], 376: ["AD"], 377: ["MC"], 378: ["SM"], 380: ["UA"], 381: ["RS"], 382: ["ME"], 383: ["XK"], 385: ["HR"], 386: ["SI"], 387: ["BA"], 389: ["MK"], 420: ["CZ"], 421: ["SK"], 423: ["LI"], 500: ["FK"], 501: ["BZ"], 502: ["GT"], 503: ["SV"], 504: ["HN"], 505: ["NI"], 506: ["CR"], 507: ["PA"], 508: ["PM"], 509: ["HT"], 590: ["GP", "BL", "MF"], 591: ["BO"], 592: ["GY"], 593: ["EC"], 594: ["GF"], 595: ["PY"], 596: ["MQ"], 597: ["SR"], 598: ["UY"], 599: ["CW", "BQ"], 670: ["TL"], 672: ["NF"], 673: ["BN"], 674: ["NR"], 675: ["PG"], 676: ["TO"], 677: ["SB"], 678: ["VU"], 679: ["FJ"], 680: ["PW"], 681: ["WF"], 682: ["CK"