maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1,428 lines (1,427 loc) • 63 kB
JavaScript
import '../assets/MazPhoneNumberInput.tFz9umj-.css';var Xe = Object.defineProperty;
var xe = (a, e, t) => e in a ? Xe(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var Z = (a, e, t) => xe(a, typeof e != "symbol" ? e + "" : e, t);
import { computed as y, useId as _e, inject as eo, defineComponent as ae, defineAsyncComponent as q, withDirectives as Ie, openBlock as C, createElementBlock as S, normalizeClass as $, normalizeStyle as X, Fragment as Ce, renderList as Me, createElementVNode as j, mergeProps as _, createVNode as D, unref as I, createCommentVNode as P, renderSlot as T, ref as V, onMounted as Ae, useSlots as oo, toDisplayString as x, createBlock as H, resolveDynamicComponent as Le, toHandlers as to, vModelDynamic as lo, withModifiers as le, withCtx as Q, onBeforeMount as Te, nextTick as ue, Transition as ao, mergeModels as so, useModel as no, watch as ve, provide as ro } from "vue";
import { getCountries as Fe, getCountryCallingCode as de, isSupportedCountry as io, parsePhoneNumberFromString as uo, getExampleNumber as co, AsYouType as mo } from "libphonenumber-js";
function we({
componentName: a,
providedId: e
}) {
return y(() => e ?? `${a}-${_e().replace(/:/g, "")}`);
}
function Ee(a, e = "20x15") {
return `https://flagcdn.com/${e}/${a.toLowerCase()}.png`;
}
function Ne(a, e) {
const t = eo(a, e);
if (!t)
throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${a.toString()}`);
return t;
}
function po(a) {
return !!a;
}
const fo = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", ho = {
baseClass: "m-lazy-img",
loadedClass: "m-lazy-loaded",
loadingClass: "m-lazy-loading",
errorClass: "m-lazy-error",
noPhotoClass: "m-lazy-no-photo",
noPhoto: !1,
observerOnce: !0,
loadOnce: !1,
noUseErrorPhoto: !1,
observerOptions: {
threshold: 0.1
}
};
class vo {
constructor(e = {}) {
Z(this, "observers", []);
Z(this, "defaultOptions", ho);
Z(this, "options");
Z(this, "onImgLoadedCallback");
Z(this, "onImgErrorCallback");
Z(this, "hasImgLoaded", !1);
this.options = this.buildOptions(e), this.onImgLoadedCallback = this.imageIsLoaded.bind(this), this.onImgErrorCallback = this.imageHasError.bind(this);
}
async loadErrorPhoto() {
const { default: e } = await import("./no-photography.BJX8HSus.mjs");
return e;
}
buildOptions(e) {
return {
...this.defaultOptions,
...e,
observerOptions: {
...this.defaultOptions.observerOptions,
...e.observerOptions
}
};
}
removeClass(e, t) {
e.classList.remove(t);
}
addClass(e, t) {
e.classList.add(t);
}
removeAllStateClasses(e) {
this.removeClass(e, this.options.loadedClass), this.removeClass(e, this.options.loadingClass), this.removeClass(e, this.options.errorClass), this.removeClass(e, this.options.noPhotoClass);
}
setBaseClass(e) {
this.addClass(e, this.options.baseClass);
}
imageIsLoading(e) {
var t, o;
this.addClass(e, this.options.loadingClass), (o = (t = this.options).onLoading) == null || o.call(t, e);
}
imageHasNoPhoto(e) {
this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.noPhotoClass), this.setDefaultPhoto(e);
}
imageIsLoaded(e) {
var t, o;
this.hasImgLoaded = !0, this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.loadedClass), (o = (t = this.options).onLoaded) == null || o.call(t, e);
}
imageHasError(e) {
var t, o;
this.removeClass(e, this.options.loadingClass), this.addClass(e, this.options.errorClass), (o = (t = this.options).onError) == null || o.call(t, e), this.setDefaultPhoto(e);
}
getSrc(e) {
return typeof e.value == "object" ? e.value.src : e.value;
}
getImageUrl(e, t) {
const o = this.getImgElement(e).getAttribute("data-lazy-src");
return o || this.getSrc(t);
}
async setPictureSourceUrls(e) {
const t = e.querySelectorAll("source");
if (t.length > 0)
for await (const o of t) {
const i = o.getAttribute("data-lazy-srcset");
if (i)
o.srcset = i;
else
return this.imageHasError(e);
}
else
this.imageHasError(e);
}
hasBgImgMode(e) {
return e.arg === "bg-image";
}
isPictureElement(e) {
return e instanceof HTMLPictureElement;
}
getImgElement(e) {
return this.isPictureElement(e) ? e.querySelector("img") : e;
}
async setDefaultPhoto(e) {
if (this.options.noUseErrorPhoto)
return;
const t = this.options.fallbackSrc ?? this.options.errorPhoto;
typeof t == "string" && this.addClass(e, this.options.noPhotoClass);
const o = t ?? await this.loadErrorPhoto(), i = e.querySelectorAll("source");
if (i.length > 0)
for await (const r of i)
r.srcset = o;
else
this.setImgSrc(e, o);
}
addEventListenerToImg(e) {
const t = this.getImgElement(e);
t.addEventListener("load", () => this.onImgLoadedCallback(e), {
once: !0
}), t.addEventListener("error", (o) => this.onImgErrorCallback(e, o), { once: !0 });
}
async loadImage(e, t) {
if (this.imageIsLoading(e), this.isPictureElement(e))
this.addEventListenerToImg(e), await this.setPictureSourceUrls(e);
else {
const o = this.getImageUrl(e, t);
if (!o)
return this.imageHasError(e);
this.hasBgImgMode(t) ? (e.style.backgroundImage = `url('${o}')`, this.imageIsLoaded(e)) : (this.addEventListenerToImg(e), this.setImgSrc(e, o));
}
}
setImgSrc(e, t) {
const o = this.getImgElement(e);
o.src = t;
}
handleIntersectionObserver(e, t, o, i) {
var r, g;
this.observers.push(i);
for (const v of o)
if (v.isIntersecting) {
if ((g = (r = this.options).onIntersecting) == null || g.call(r, v.target), this.options.observerOnce && i.unobserve(e), this.options.loadOnce && this.hasImgLoaded)
return;
this.loadImage(e, t);
}
}
createObserver(e, t) {
const o = (g, v) => {
this.handleIntersectionObserver(e, t, g, v);
}, i = this.options.observerOptions;
new IntersectionObserver(o, i).observe(e);
}
async imageHandler(e, t, o) {
if (o === "update")
for await (const i of this.observers) i.unobserve(e);
window.IntersectionObserver ? this.createObserver(e, t) : this.loadImage(e, t);
}
async bindUpdateHandler(e, t, o) {
if (this.options.noPhoto)
return this.imageHasNoPhoto(e);
await this.imageHandler(e, t, o);
}
async add(e, t) {
if (this.hasBgImgMode(t) && this.isPictureElement(e))
throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);
setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, fo), await this.bindUpdateHandler(e, t, "bind");
}
async update(e, t) {
t.value !== t.oldValue && (this.hasImgLoaded = !1, this.removeAllStateClasses(e), await this.bindUpdateHandler(e, t, "update"));
}
remove(e, t) {
this.hasImgLoaded = !1, this.hasBgImgMode(t) && (e.style.backgroundImage = ""), this.removeAllStateClasses(e);
for (const o of this.observers)
o.unobserve(e);
this.observers = [];
}
}
let ie;
const yo = {
created(a, e) {
const t = typeof e.value == "object" ? e.value : {};
ie = new vo(t), ie.add(a, e);
},
updated(a, e) {
ie.update(a, e);
},
unmounted(a, e) {
ie.remove(a, e);
}
}, go = ["data-lazy-srcset", "media"], bo = ["alt"], Co = {
key: 0,
class: "m-lazy-img-component-loader"
}, zo = /* @__PURE__ */ ae({
inheritAttrs: !1,
__name: "MazLazyImg",
props: {
style: { default: void 0 },
class: { default: void 0 },
image: { default: void 0 },
src: { default: void 0 },
alt: { default: void 0 },
noPhoto: { type: Boolean },
noLoader: { type: Boolean },
noObserverOnce: { type: Boolean },
loadOnce: { type: Boolean },
imageHeightFull: { type: Boolean },
observerOptions: { default: void 0 },
fallbackSrc: { default: void 0 },
imgClass: {},
block: { type: Boolean }
},
emits: ["intersecting", "loading", "loaded", "error"],
setup(a) {
const e = a, t = q(() => import("./MazSpinner.DZT5jj-c.mjs")), o = y(() => e.image || e.src), i = y(() => {
var r;
return typeof o.value == "string" ? [{ srcset: o.value }] : (r = o.value) == null ? void 0 : r.sources;
});
return (r, g) => Ie((C(), S(
"picture",
{
class: $(["m-lazy-img-component m-reset-css", [{ "--use-loader": !r.noLoader, "--height-full": r.imageHeightFull, "--block": r.block }, e.class]]),
style: X(r.style)
},
[
(C(!0), S(
Ce,
null,
Me(i.value, ({ srcset: v, media: L }, b) => (C(), S("source", {
key: b,
"data-lazy-srcset": v,
media: L
}, null, 8, go))),
128
/* KEYED_FRAGMENT */
)),
j("img", _(r.$attrs, {
src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
loading: "lazy",
alt: r.alt,
class: r.imgClass
}), null, 16, bo),
r.noLoader ? P("v-if", !0) : (C(), S("div", Co, [
D(I(t), { size: "2em" })
])),
T(r.$slots, "default", {}, void 0, !0)
],
6
/* CLASS, STYLE */
)), [
[I(yo), {
noPhoto: r.noPhoto,
loadOnce: r.loadOnce,
observerOptions: r.observerOptions,
fallbackSrc: r.fallbackSrc,
observerOnce: !r.noObserverOnce,
onIntersecting: (v) => r.$emit("intersecting", v),
onLoading: (v) => r.$emit("loading", v),
onLoaded: (v) => r.$emit("loaded", v),
onError: (v) => r.$emit("error", v)
}]
]);
}
}), se = (a, e) => {
const t = a.__vccOpts || a;
for (const [o, i] of e)
t[o] = i;
return t;
}, $e = /* @__PURE__ */ se(zo, [["__scopeId", "data-v-16d47574"]]), Io = {
removeAccents: !0,
caseSensitive: !1,
replaceSpaces: !0,
removeSpecialCharacters: !1,
trim: !0,
normalizeSpaces: !0,
removeNumbers: !1,
customNormalizationForms: ["NFC", "NFKD"]
};
function ce(a, e) {
const t = { ...Io, ...e }, o = {
À: "A",
Á: "A",
Â: "A",
Ã: "A",
Ä: "A",
Å: "A",
à: "a",
á: "a",
â: "a",
ã: "a",
ä: "a",
å: "a",
È: "E",
É: "E",
Ê: "E",
Ë: "E",
è: "e",
é: "e",
ê: "e",
ë: "e",
Î: "I",
Ï: "I",
í: "I",
î: "i",
ï: "i",
Ô: "O",
Õ: "O",
Ö: "O",
Ø: "O",
ô: "o",
õ: "o",
ö: "o",
ø: "o",
Ù: "U",
Ú: "U",
Û: "U",
Ü: "U",
ù: "u",
ú: "u",
û: "u",
ü: "u",
Ç: "C",
ç: "c",
ÿ: "y",
Ñ: "N",
ñ: "n",
ó: "o"
};
let i = a.toString();
if (t.trim && (i = i.trim()), t.normalizeSpaces && (i = i.replaceAll(/\s+/g, " ")), t.replaceSpaces && (i = i.replaceAll(" ", "-")), t.removeNumbers && (i = i.replaceAll(/\d/g, "")), t.removeAccents && (i = i.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (r) => o[r] || r), i = i.replaceAll(/[\u0300-\u036F]/g, "")), t.caseSensitive === !1 && (i = i.toLowerCase()), t.removeSpecialCharacters && (i = i.replaceAll(/[^\dA-Z-]/gi, "")), t.trim && (i = i.trim()), t.customNormalizationForms)
for (const r of t.customNormalizationForms)
i = i.normalize(r);
return i;
}
function Ao(a, e) {
const t = a.length, o = e.length, i = [];
for (let r = 0; r <= t; r++)
i[r] = [r];
for (let r = 0; r <= o; r++)
i[0][r] = r;
for (let r = 1; r <= t; r++)
for (let g = 1; g <= o; g++) {
const v = a[r - 1] === e[g - 1] ? 0 : 1;
i[r][g] = Math.min(
i[r - 1][g] + 1,
i[r][g - 1] + 1,
i[r - 1][g - 1] + v
);
}
return i[t][o];
}
function Ke(a, e) {
const t = Ao(a, e), o = Math.max(a.length, e.length);
return 1 - t / o;
}
function wo(a, e, t = 0.75) {
return Ke(a, e) >= t;
}
function ye(a, e, t = 0.75) {
const o = y(
() => ce(typeof a == "string" ? a : a.value)
), i = y(
() => ce(typeof e == "string" ? e : e.value)
), r = y(() => typeof t == "number" ? t : t.value), g = y(() => Ke(o.value, i.value));
return {
isMatching: y(
() => wo(o.value, i.value, r.value)
),
score: g
};
}
function Ue(a, e, t) {
var g, v;
a.stopPropagation();
const o = typeof t.value == "function" ? t.value : t.value.handler, i = typeof t.value == "object" ? t.value.exclude : void 0;
let r = !1;
if (i && i.length > 0) {
for (const L of i)
if (!r && a.target instanceof HTMLElement) {
const b = (g = document.querySelector(L)) == null ? void 0 : g.getAttribute("id");
r = (a.target.getAttribute("id") === b || ((v = document.querySelector(L)) == null ? void 0 : v.contains(a.target))) ?? !1;
}
}
!e.contains(a.target) && !r && (o == null || o(a));
}
function He() {
return document.ontouchstart === null ? "touchstart" : "click";
}
function So(a, e) {
const t = He();
document.removeEventListener(t, (o) => Ue(o, a, e));
}
function Vo(a, e) {
if (typeof e.value != "function" && typeof e.value == "object" && typeof e.value.handler != "function") {
console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
return;
}
const t = He();
document.addEventListener(t, (o) => Ue(o, a, e));
}
const ko = {
mounted: Vo,
unmounted: So
};
let ge = null;
function Po(a, e) {
ge && clearTimeout(ge), ge = setTimeout(a, e);
}
function Bo(a, e) {
let t;
return function(...o) {
clearTimeout(t), t = setTimeout(() => {
a.apply(this, o);
}, e);
};
}
const Lo = ["for"], Eo = {
key: 0,
class: "m-input-wrapper-left"
}, $o = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], Oo = {
key: 1,
class: "m-input-wrapper-right"
}, Mo = /* @__PURE__ */ ae({
inheritAttrs: !1,
__name: "MazInput",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
topLabel: {},
assistiveText: {},
name: { default: void 0 },
color: { default: "primary" },
type: { default: "text" },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
id: { default: void 0 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
inputClasses: { default: void 0 },
noBorder: { type: Boolean, default: !1 },
noRadius: { type: Boolean, default: !1 },
inputmode: { default: "text" },
size: { default: "md" },
debounce: { type: [Boolean, Number], default: !1 },
debounceDelay: { default: 500 },
validButton: { type: Boolean, default: !1 },
validButtonLoading: { type: Boolean, default: !1 },
autoFocus: { type: Boolean, default: !1 },
borderActive: { type: Boolean, default: !1 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
roundedSize: { default: void 0 },
block: { type: Boolean },
autocomplete: {}
},
emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
setup(a, { emit: e }) {
const t = a, o = e, i = q(() => import("./MazBtn.1qp5aQ4N.mjs")), r = q(() => import("./MazIcon.B5hPzeLk.mjs")), g = q(() => import("./eye-slash.BoO00xzs.mjs")), v = q(() => import("./eye.f8zAUc30.mjs")), L = q(() => import("./check.C9Q_W85g.mjs")), b = V(!1), h = V(!1), O = V(), c = we({
componentName: "MazInput",
providedId: t.id
});
Ae(() => {
var s;
t.autoFocus && ((s = O.value) == null || s.focus());
});
const A = y(() => t.type === "password"), m = y(() => b.value ? "text" : t.type), p = y(() => {
if (!t.noBorder) {
if (t.error)
return "maz-border-danger";
if (t.success)
return "maz-border-success";
if (t.warning)
return "maz-border-warning";
if (h.value || t.borderActive) {
if (t.color === "black")
return "maz-border-black";
if (t.color === "danger")
return "maz-border-danger";
if (t.color === "info")
return "maz-border-info";
if (t.color === "primary")
return "maz-border-primary";
if (t.color === "secondary")
return "maz-border-secondary";
if (t.color === "success")
return "maz-border-success";
if (t.color === "warning")
return "maz-border-warning";
if (t.color === "white")
return "maz-border-white";
}
return "--default-border";
}
}), E = oo(), J = y(() => F.value !== void 0 && F.value !== ""), ee = Bo(
(s) => {
o("update:model-value", s);
},
typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
);
function oe(s) {
if (t.debounce)
return ee(s);
o("update:model-value", s);
}
const F = y({
get: () => t.modelValue,
set: (s) => oe(s)
}), Y = y(() => (!!t.label || !!t.hint) && (h.value || !!J.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), N = y(() => !!t.label || !!t.hint);
function n() {
return !!E["right-icon"] || A.value || !!E["valid-button"] || t.validButton || !!t.rightIcon;
}
function w() {
return !!E["left-icon"] || !!t.leftIcon;
}
function K(s) {
o("focus", s), h.value = !0;
}
function k(s) {
o("blur", s), h.value = !1;
}
function G(s) {
return o("change", s);
}
function me(s) {
return o("input", s);
}
return (s, M) => (C(), S(
"div",
{
class: $(["m-input", [
{
"--is-focused": h.value || s.borderActive,
"--should-up": Y.value,
"--has-label": N.value,
"--is-disabled": s.disabled,
"--is-readonly": s.readonly,
"--has-z-2": s.error || s.warning || s.success,
"--has-state": s.error || s.warning || s.success,
"--block": s.block
},
t.class,
`--${s.color}`
]]),
style: X(s.style)
},
[
s.topLabel ? (C(), S("label", {
key: 0,
for: I(c),
class: "m-input-top-label"
}, x(s.topLabel), 9, Lo)) : P("v-if", !0),
j(
"div",
{
class: $(["m-input-wrapper m-reset-css", [
s.inputClasses,
p.value,
s.roundedSize ? `--rounded-${s.roundedSize}` : { "maz-rounded": !s.noRadius },
{ "--block": s.block }
]])
},
[
w() ? (C(), S("div", Eo, [
s.$slots["left-icon"] || s.leftIcon ? T(s.$slots, "left-icon", { key: 0 }, () => [
typeof s.leftIcon == "string" ? (C(), H(I(r), {
key: 0,
name: s.leftIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : s.leftIcon ? (C(), H(Le(s.leftIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : P("v-if", !0)
], !0) : P("v-if", !0)
])) : P("v-if", !0),
j(
"div",
{
class: $(["m-input-wrapper-input", [`--${s.size}`, { "--top-label": !!s.topLabel }]])
},
[
Ie(j("input", _({ id: I(c) }, s.$attrs, {
ref_key: "input",
ref: O,
"onUpdate:modelValue": M[0] || (M[0] = (U) => F.value = U),
name: s.name,
placeholder: s.placeholder,
"aria-label": s.label || s.placeholder,
type: m.value,
inputmode: s.inputmode,
disabled: s.disabled,
readonly: s.readonly,
autocomplete: s.autocomplete,
required: s.required,
class: "m-input-input"
}, to({
blur: k,
focus: K,
change: G,
input: me
}, !0), {
onClick: M[1] || (M[1] = (U) => s.$emit("click", U))
}), null, 16, $o), [
[lo, F.value]
]),
s.label || s.hint ? (C(), S(
"span",
{
key: 0,
class: $(["m-input-label", [
{
"maz-text-danger-600": s.error,
"maz-text-success-600": s.success,
"maz-text-warning-600": s.warning
}
]])
},
x(s.hint || s.label),
3
/* TEXT, CLASS */
)) : P("v-if", !0)
],
2
/* CLASS */
),
n() ? (C(), S("div", Oo, [
s.$slots["right-icon"] || s.rightIcon ? T(s.$slots, "right-icon", { key: 0 }, () => [
typeof s.rightIcon == "string" ? (C(), H(I(r), {
key: 0,
name: s.rightIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : s.rightIcon ? (C(), H(Le(s.rightIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : P("v-if", !0)
], !0) : P("v-if", !0),
A.value ? (C(), H(I(i), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: M[2] || (M[2] = le((U) => b.value = !b.value, ["stop"]))
}, {
default: Q(() => [
b.value ? (C(), H(I(g), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (C(), H(I(v), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
/* STABLE */
})) : P("v-if", !0),
s.$slots["valid-button"] || s.validButton ? T(s.$slots, "valid-button", { key: 2 }, () => [
D(I(i), {
color: "transparent",
disabled: s.disabled,
tabindex: "-1",
loading: s.validButtonLoading,
class: "m-input-valid-button",
size: "mini",
type: "submit"
}, {
default: Q(() => [
D(I(L), { class: "maz-text-2xl maz-text-normal" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "loading"])
], !0) : P("v-if", !0)
])) : P("v-if", !0)
],
2
/* CLASS */
),
s.assistiveText ? (C(), S(
"div",
{
key: 1,
class: $(["m-input-bottom-text", [
{
"maz-text-danger-600": s.error,
"maz-text-success-600": s.success,
"maz-text-warning-600": s.warning,
"maz-text-muted": !s.error && !s.success && !s.warning
}
]])
},
x(s.assistiveText),
3
/* TEXT, CLASS */
)) : P("v-if", !0)
],
6
/* CLASS, STYLE */
));
}
}), ze = /* @__PURE__ */ se(Mo, [["__scopeId", "data-v-8def99c5"]]), To = ["aria-label"], Fo = { class: "m-select-list__no-results" }, No = {
key: 2,
class: "m-select-list__scroll-wrapper",
tabindex: "-1"
}, Ko = { class: "m-select-list-optgroup" }, Uo = ["onClick"], Ho = /* @__PURE__ */ ae({
inheritAttrs: !1,
__name: "MazSelect",
props: {
style: { default: void 0 },
class: { default: void 0 },
id: { default: void 0 },
modelValue: { default: void 0 },
options: { default: void 0 },
optionValueKey: { default: "value" },
optionLabelKey: { default: "label" },
optionInputValueKey: { default: "label" },
listPosition: { default: "bottom left" },
itemHeight: { default: void 0 },
maxListHeight: { default: 240 },
maxListWidth: { default: void 0 },
minListHeight: { default: void 0 },
minListWidth: { default: void 0 },
size: { default: "md" },
color: { default: "primary" },
search: { type: Boolean },
searchPlaceholder: { default: "Search in options" },
searchFunction: {},
searchThreshold: { default: 0.75 },
open: { type: Boolean },
multiple: { type: Boolean, default: void 0 },
required: { type: Boolean },
disabled: { type: Boolean },
block: { type: Boolean },
excludeSelectors: { default: void 0 },
autocomplete: { default: "off" }
},
emits: ["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"],
setup(a, { expose: e, emit: t }) {
const o = a, i = t, r = q(() => import("./MazCheckbox.UAnkvAoS.mjs")), g = q(() => import("./magnifying-glass.-nBiyXot.mjs")), v = q(() => import("./chevron-down.BkvtON3b.mjs")), L = q(() => import("./no-symbol.CIgKzsrB.mjs"));
e({
/** Method to open the option list */
openList: ne,
/** Method to close the option list */
closeList: te
});
const b = V(!1), h = V(), O = y(
() => ["black", "transparent", "white"].includes(o.color)
), c = y(
() => O.value ? "var(--maz-color-black)" : `var(--maz-color-${o.color}-800)`
), A = y(
() => O.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-100)`
), m = y(
() => O.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-200)`
), p = y(() => b.value || o.open), E = we({
componentName: "MazSelect",
providedId: o.id
});
function J(l) {
return {
[o.optionValueKey]: l,
[o.optionLabelKey]: l,
[o.optionInputValueKey]: l
};
}
function ee(l) {
return {
...l,
[o.optionValueKey]: l[o.optionValueKey],
[o.optionLabelKey]: l[o.optionLabelKey],
[o.optionInputValueKey]: l[o.optionInputValueKey]
};
}
function oe(l) {
const u = [];
if (!(l != null && l.length))
return [];
for (const d of l)
typeof d == "string" || typeof d == "number" || typeof d == "boolean" ? u.push(J(d)) : typeof d == "object" && "options" in d && Array.isArray(d.options) ? u.push(
{ label: d.label, isOptGroup: !0 },
...d.options.map(
(f) => typeof f == "string" || typeof f == "number" || typeof f == "boolean" ? J(f) : ee(f)
)
) : u.push(ee(d));
return u;
}
const F = y(() => oe(o.options ?? [])), Y = y(
() => {
var l;
return ((l = F.value) == null ? void 0 : l.filter((u) => o.multiple ? Array.isArray(o.modelValue) ? o.modelValue.includes(u[o.optionValueKey]) && !k(u[o.optionValueKey]) : !1 : o.modelValue === u[o.optionValueKey] && !k(u[o.optionValueKey]))) ?? [];
}
);
Te(() => {
var l;
(l = o.options) != null && l.length || console.warn("[maz-ui](MazSelect) you must provide options"), he();
});
const N = V(), n = V(), w = V(), K = V();
function k(l) {
return l == null;
}
function G(l) {
var d;
return (((d = Y.value) == null ? void 0 : d.some(
(f) => f[o.optionValueKey] === l[o.optionValueKey]
)) ?? !1) && !k(l[o.optionValueKey]);
}
const me = y(() => {
var u;
if (o.multiple && o.modelValue && Array.isArray(o.modelValue))
return o.modelValue.map(
(d) => {
var f, z;
return (z = (f = F.value) == null ? void 0 : f.find((B) => B[o.optionValueKey] === d)) == null ? void 0 : z[o.optionInputValueKey];
}
).join(", ");
const l = (u = F.value) == null ? void 0 : u.find(
(d) => d[o.optionValueKey] === o.modelValue
);
return k(o.modelValue) || l == null ? void 0 : l[o.optionInputValueKey];
}), s = y(
() => o.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
), M = V(""), U = V("");
function pe(l, u) {
return u && l && ce(l).includes(ce(u));
}
function Ve(l) {
var u;
return l ? (u = F.value) == null ? void 0 : u.filter((d) => {
const f = d[o.optionLabelKey], z = d[o.optionValueKey], B = d[o.optionInputValueKey], R = o.searchThreshold;
return pe(f, l) || pe(B, l) || pe(z, l) || typeof f == "string" && ye(f, l, R).isMatching.value || typeof B == "string" && ye(B, l, R).isMatching.value || typeof z == "string" && ye(z, l, R).isMatching.value;
}) : F.value;
}
const W = y(() => o.searchFunction && o.search && M.value ? oe(o.searchFunction(M.value, o.options ?? []) ?? []) : Ve(M.value));
async function te(l) {
var d, f;
if (!p.value)
return;
if (l && ("relatedTarget" in l && ((d = N.value) != null && d.contains(l.relatedTarget)) || l.type === "keydown"))
return l.preventDefault();
const u = l && "relatedTarget" in l && l.relatedTarget instanceof HTMLElement && l.relatedTarget.getAttribute("id");
if ((f = o.excludeSelectors) != null && f.includes(`#${u}`))
return l == null ? void 0 : l.preventDefault();
await ue(), b.value = !1, h.value = 0, i("close", l);
}
async function ne(l) {
o.disabled || p.value || (l == null || l.preventDefault(), b.value = !0, await fe(), i("focus", l), i("open", b.value));
}
function ke() {
var l, u;
(u = ((l = n.value) == null ? void 0 : l.$el).querySelector("input")) == null || u.focus();
}
function je() {
var l, u;
(u = ((l = n.value) == null ? void 0 : l.$el).querySelector("input")) == null || u.dispatchEvent(new Event("input"));
}
function Ye(l) {
b.value ? te(l) : ke();
}
function We(l) {
var u, d;
M.value = l, (d = ((u = w.value) == null ? void 0 : u.$el).querySelector("input")) == null || d.focus();
}
function Qe(l) {
var d;
l === "Backspace" && U.value.length > 0 ? U.value = U.value.slice(0, -1) : U.value += l;
const u = Ve(U.value);
u != null && u.length && (h.value = (d = W.value) == null ? void 0 : d.findIndex(
(f) => f[o.optionValueKey] === u[0][o.optionValueKey]
), typeof h.value == "number" && h.value >= 0 && fe(h.value)), Po(() => {
U.value = "";
}, 1e3);
}
function Ge(l) {
const u = l.key;
/^[\dA-Za-z\u0400-\u04FF]$/.test(u) ? (l.preventDefault(), ne(l), o.search ? We(u) : Qe(u)) : Pe(l);
}
function Pe(l, u = !0) {
const d = l.code, f = ["ArrowUp", "ArrowDown"].includes(d), z = (u ? ["Enter", "Space"] : ["Enter"]).includes(d), B = d === "Escape" && p.value;
f ? Je(l, h.value) : z ? Ze(l, h.value) : B && te(l);
}
function Je(l, u) {
var z;
l.preventDefault();
const d = l.code;
p.value || ne(l);
const f = (z = W.value) == null ? void 0 : z.length;
f && (typeof u == "number" ? u === f - 1 && d === "ArrowDown" ? h.value = 0 : u === 0 && d === "ArrowUp" ? h.value = f - 1 : h.value = d === "ArrowDown" ? u + 1 : u - 1 : h.value = d === "ArrowDown" ? 0 : f - 1, fe(h.value));
}
function Ze(l, u) {
var f, z, B;
if (!p.value)
return;
l.preventDefault();
const d = u ? ((f = W.value) == null ? void 0 : f[u]) ?? ((z = W.value) == null ? void 0 : z[0]) : (B = W.value) == null ? void 0 : B[0];
k(d) || Be(d);
}
async function fe(l) {
var d, f;
await ue(), typeof l != "number" && he();
const u = l ?? h.value;
if (typeof u == "number" && u >= 0) {
const z = (d = K.value) == null ? void 0 : d.querySelectorAll(".m-select-list-item");
(f = z == null ? void 0 : z[u]) == null || f.scrollIntoView({
behavior: "auto",
block: "nearest",
inline: "start"
});
}
}
function he(l) {
var d;
const u = (d = W.value) == null ? void 0 : d.findIndex((f) => {
var z, B;
return o.multiple && Array.isArray(o.modelValue) ? l ? l[o.optionValueKey] === f[o.optionValueKey] : [...o.modelValue].reverse()[0] === f[o.optionValueKey] : ((B = (z = Y.value) == null ? void 0 : z[0]) == null ? void 0 : B[o.optionValueKey]) === f[o.optionValueKey];
});
h.value = u && u >= 0 ? u : 0;
}
function Be(l, u = !0) {
var B;
u && !o.multiple && ue(() => te()), M.value = "";
const d = (B = Y.value) == null ? void 0 : B.some(
(R) => R[o.optionValueKey] === l[o.optionValueKey]
);
let f = Y.value;
d && o.multiple ? f = f == null ? void 0 : f.filter(
(R) => R[o.optionValueKey] !== l[o.optionValueKey]
) : o.multiple ? f.push(l) : f = [l];
const z = f.map((R) => R[o.optionValueKey]);
i("update:model-value", o.multiple ? z : z[0]), i("selected-option", l), je(), he(l), ke();
}
return (l, u) => Ie((C(), S(
"div",
{
ref_key: "mazSelectElement",
ref: N,
class: $(["m-select m-reset-css", [
{ "--is-open": p.value, "--disabled": l.disabled, "--block": l.block },
o.class,
`--${l.size}`
]]),
style: X([l.style, { "--keyboard-selected-bg-color": m.value, "--selected-bg-color": A.value, "--selected-text-color": c.value }])
},
[
D(ze, _({
id: I(E),
ref_key: "mazInputComponent",
ref: n,
class: "m-select-input"
}, l.$attrs, {
required: l.required,
"border-active": b.value,
color: l.color,
"model-value": me.value,
size: l.size,
block: "",
autocomplete: l.autocomplete,
disabled: l.disabled,
onFocus: le(ne, ["prevent", "stop"]),
onBlur: le(te, ["prevent", "stop"]),
onClick: le(ne, ["prevent", "stop"]),
onChange: u[0] || (u[0] = (d) => i("change", d)),
onInput: u[1] || (u[1] = (d) => i("input", d)),
onKeydown: Ge
}), {
"right-icon": Q(() => [
j("button", {
tabindex: "-1",
type: "button",
class: "m-select-input__toggle-button maz-custom",
"aria-label": `${p.value ? "collapse" : "expand"} list of options`,
onClick: le(Ye, ["stop"])
}, [
D(I(v), { class: "m-select-chevron maz-text-xl" })
], 8, To)
]),
_: 1
/* STABLE */
}, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
D(ao, { name: s.value }, {
default: Q(() => [
p.value ? (C(), S(
"div",
{
key: 0,
ref_key: "optionListElement",
ref: K,
class: $(["m-select-list", {
"--top": l.listPosition.includes("top"),
"--left": l.listPosition.includes("left"),
"--right": l.listPosition.includes("right"),
"--bottom": l.listPosition.includes("bottom")
}]),
style: X({
maxHeight: `${l.maxListHeight}px`,
maxWidth: `${l.maxListWidth}px`,
minHeight: `${l.minListHeight}px`,
minWidth: `${l.minListWidth}px`
})
},
[
l.search ? (C(), H(ze, {
key: 0,
ref_key: "searchInputComponent",
ref: w,
modelValue: M.value,
"onUpdate:modelValue": [
u[2] || (u[2] = (d) => M.value = d),
u[4] || (u[4] = (d) => h.value = 0)
],
size: "sm",
color: l.color,
placeholder: l.searchPlaceholder,
name: "search",
inputmode: "search",
block: "",
autocomplete: "off",
tabindex: "-1",
class: "m-select-list__search-input maz-flex-none",
"left-icon": I(g),
onKeydown: u[3] || (u[3] = (d) => Pe(d, !1))
}, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : P("v-if", !0),
!W.value || W.value.length <= 0 ? T(l.$slots, "no-results", { key: 1 }, () => [
j("span", Fo, [
D(I(L), { class: "maz-h-6 maz-w-6 maz-text-normal" })
])
], !0) : (C(), S("div", No, [
(C(!0), S(
Ce,
null,
Me(W.value, (d, f) => (C(), S(
Ce,
{ key: f },
[
d.label && d.isOptGroup ? T(l.$slots, "optgroup", {
key: 0,
label: d.label
}, () => [
j(
"span",
Ko,
x(d.label),
1
/* TEXT */
)
], !0) : (C(), S("button", {
key: 1,
tabindex: "-1",
type: "button",
class: $(["m-select-list-item maz-custom maz-flex-none", [
{
"--is-keyboard-selected": h.value === f,
"--is-selected": G(d),
"--is-none-value": k(d[l.optionValueKey])
}
]]),
style: X(l.itemHeight ? { height: `${l.itemHeight}px` } : void 0),
onClick: le((z) => Be(d), ["prevent", "stop"])
}, [
l.multiple ? (C(), H(I(r), {
key: 0,
tabindex: "-1",
"model-value": G(d),
size: "sm",
color: l.color
}, null, 8, ["model-value", "color"])) : P("v-if", !0),
T(l.$slots, "default", {
option: d,
isSelected: G(d)
}, () => [
j(
"span",
null,
x(d[l.optionLabelKey]),
1
/* TEXT */
)
], !0)
], 14, Uo))
],
64
/* STABLE_FRAGMENT */
))),
128
/* KEYED_FRAGMENT */
))
]))
],
6
/* CLASS, STYLE */
)) : P("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
],
6
/* CLASS, STYLE */
)), [
[I(ko), {
exclude: l.excludeSelectors,
handler: te
}]
]);
}
}), Do = /* @__PURE__ */ se(Ho, [["__scopeId", "data-v-98157b75"]]);
function De() {
if (typeof window > "u")
return;
const a = window.navigator.language;
if (!a)
return;
let e = a.slice(3, 7).toUpperCase();
return e === "" && (e = a.slice(0, 2).toUpperCase()), e === "EN" && (e = "US"), e === "JA" && (e = "JP"), {
locale: e,
browserLocale: a
};
}
let be, Oe;
function Ro(a, e, t) {
return t != null && t[e] ? t[e] : ((Oe !== a || !be) && (Oe = a, be = new Intl.DisplayNames([a], { type: "region" })), be.of(e));
}
function qo(a, e) {
var i;
const t = [], o = Fe();
a = a ?? ((i = De()) == null ? void 0 : i.browserLocale) ?? "en-US";
for (const r of o) {
const g = Ro(a, r, e);
if (g)
try {
const v = de(r);
t.push({
iso2: r,
dialCode: v,
name: g
});
} catch (v) {
console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${v}`);
}
}
return t;
}
async function jo() {
try {
const a = await fetch("https://ipwho.is"), { country_code: e } = await a.json();
return e;
} catch (a) {
throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${a}`);
}
}
function Yo(a) {
if (!a)
return "";
const e = new RegExp(/[^\d ()+-]/g);
return a.replaceAll(e, "").trim();
}
function Se() {
return {
sanitizePhoneNumber: Yo,
fetchCountryCode: jo,
getBrowserLocale: De,
getCountriesList: qo
};
}
const Wo = ["id"], Qo = {
key: 0,
class: "m-country-selector__select__item__flag-container"
}, Go = /* @__PURE__ */ ae({
__name: "CountrySelector",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
id: {},
color: {},
size: {},
preferredCountries: { default: void 0 },
ignoredCountries: { default: void 0 },
onlyCountries: { default: void 0 },
customCountriesList: { default: void 0 },
locales: {},
listPosition: { default: "bottom left" },
noFlags: { type: Boolean },
noSearch: { type: Boolean },
disabled: { type: Boolean },
showCodeOnList: { type: Boolean },
countryLocale: { default: void 0 },
success: { type: Boolean },
error: { type: Boolean },
countrySelectorDisplayName: { type: Boolean },
searchThreshold: {},
width: { default: "9rem" },
excludeSelectors: { default: void 0 }
},
emits: ["update:model-value"],
setup(a) {
const e = a, { phoneNumber: t } = Ne("data"), o = V(), { getCountriesList: i } = Se(), r = y(() => i(e.countryLocale, e.customCountriesList)), g = y(
() => {
var c;
return (c = r.value) == null ? void 0 : c.filter((A) => {
var m;
return !((m = e.ignoredCountries) != null && m.includes(A.iso2));
});
}
), v = y(() => {
const c = e.onlyCountries || e.preferredCountries;
return c == null ? void 0 : c.map(
(A) => {
var m;
return (m = g.value) == null ? void 0 : m.find((p) => p.iso2.includes(A));
}
);
}), L = y(
() => {
var c;
return (c = g.value) == null ? void 0 : c.filter((A) => {
var m;
return !((m = e.preferredCountries) != null && m.includes(A.iso2));
});
}
), b = y(
() => e.preferredCountries ? [...v.value ?? [], ...L.value ?? []] : e.onlyCountries ? v.value : g.value
), h = y(
() => {
var c;
return (c = b.value) == null ? void 0 : c.map(
(A) => A ? {
...A,
dialCode: `+${A.dialCode}`
} : void 0
).filter(po);
}
);
function O() {
var c;
(c = o.value) == null || c.openList();
}
return (c, A) => (C(), S(
"div",
{
class: $(["m-country-selector", [e.class, { "--no-flags": c.noFlags }]]),
style: X(c.style)
},
[
c.modelValue && !c.noFlags ? (C(), S("button", {
key: 0,
id: `country-selector-flag-button-${c.id}`,
class: $(["m-country-selector__country-flag", {
"--should-have-bottom-flag": c.locales.countrySelector.placeholder.length > 0
}]),
tabindex: "-1",
type: "button",
onClick: O
}, [
T(c.$slots, "selector-flag", { countryCode: c.modelValue }, () => [
D($e, {
src: I(Ee)(c.modelValue, "h20"),
alt: c.modelValue,
width: "20",
height: "20",
"img-class": "maz-w-5 maz-h-4 maz-rounded-sm"
}, null, 8, ["src", "alt"])
], !0)
], 10, Wo)) : P("v-if", !0),
D(Do, _({
id: `country-selector-${c.id}`,
ref_key: "CountrySelectorRef",
ref: o,
"model-value": c.modelValue
}, { ...c.$attrs }, {
class: "m-country-selector__select",
"option-value-key": "iso2",
"option-label-key": "name",
"option-input-value-key": c.countrySelectorDisplayName ? "name" : "dialCode",
name: "country",
"max-list-width": 250,
"min-list-width": 200,
disabled: c.disabled,
color: c.color,
size: c.size,
error: c.error,
"list-position": c.listPosition,
"item-height": 38,
success: c.success,
search: !c.noSearch,
"search-placeholder": c.locales.countrySelector.searchPlaceholder,
"search-threshold": c.searchThreshold,
options: h.value,
hint: I(t) && !c.modelValue ? c.locales.countrySelector.error : void 0,
label: c.locales.countrySelector.placeholder,
style: {
width: c.width
},
"exclude-selectors": [`#country-selector-flag-button-${c.id}`, ...c.excludeSelectors ?? []],
"onUpdate:modelValue": A[0] || (A[0] = (m) => c.$emit("update:model-value", m))
}), {
"no-results": Q(() => [
T(c.$slots, "no-results", {}, void 0, !0)
]),
default: Q(({ option: m, isSelected: p }) => [
j(
"div",
{
class: $(["m-country-selector__select__item", {
"m-country-selector__select__item--selected": p
}])
},
[
!c.noFlags && typeof m.iso2 == "string" ? (C(), S("span", Qo, [
T(c.$slots, "country-list-flag", {
countryCode: m.iso2,
option: m,
isSelected: p
}, () => [
D($e, {
src: I(Ee)(m.iso2, "h20"),
alt: `${m.name} flag`,
width: "20",
height: "20",
"img-class": "maz-rounded-full maz-w-5 maz-h-5"
}, null, 8, ["src", "alt"])
], !0)
])) : P("v-if", !0),
c.showCodeOnList ? (C(), S(
"span",
{
key: 1,
class: $(["maz-w-9 maz-flex-none", { "maz-text-muted": !p }])
},
x(m.dialCode),
3
/* TEXT, CLASS */
)) : P("v-if", !0),
j(
"span",
{
class: $(["maz-flex-1 maz-truncate", { "maz-font-semibold": p }])
},
x(m.name),
3
/* TEXT, CLASS */
)
],
2
/* CLASS */
)
]),
_: 3
/* FORWARDED */
}, 16, ["id", "model-value", "option-input-value-key", "disabled", "color", "size", "error", "list-position", "success", "search", "search-placeholder", "search-threshold", "options", "hint", "label", "style", "exclude-selectors"])
],
6
/* CLASS, STYLE */
));
}
}), Jo = /* @__PURE__ */ se(Go, [["__scopeId", "data-v-e2fee821"]]), Zo = {
countrySelector: {
placeholder: "Country code",
error: "Choose country",
searchPlaceholder: "Search the country"
},
phoneInput: {
placeholder: "Phone number",
example: "Example:"
}
}, re = V();
function Xo(a) {
try {
const e = io(a);
return e || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${a}" is not available`), !1);
} catch (e) {
return console.error(`[maz-ui](MazPhoneNumberInput) ${e}`), !1;
}
}
function xo({
phoneNumber: a,
countryCode: e,
checkCountryCode: t = !1
}) {
try {
if (!a)
return {
isValid: !1,
countryCode: e
};
const o = uo(a, e ?? void 0), i = (o == null ? void 0 : o.isValid()) ?? !1, r = e && t ? (o == null ? void 0 : o.country) && e === o.country : !0;
return {
isValid: i && !!r,
countryCode: e,
parsedCountryCode: o == null ? void 0 : o.country,
isPossible: o == null ? void 0 : o.isPossible(),
countryCallingCode: o == null ? void 0 : o.countryCallingCode,
nationalNumber: o == null ? void 0 : o.nationalNumber,
type: o == null ? void 0 : o.getType(),
formatInternational: o == null ? void 0 : o.formatInternational(),
formatNational: o == null ? void 0 : o.formatNational(),
uri: o == null ? void 0 : o.getURI(),
e164: o == null ? void 0 : o.format("E.164"),
rfc3966: o == null ? void 0 : o.format("RFC3966"),
possibleCountries: o == null ? void 0 : o.getPossibleCountries(),
phoneNumber: a
};
} catch (o) {
throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${o}`);
}
}
async function Re() {
const { default: a } = await import("./examples.mobile.json.tW3aL0qI.mjs");
return a;
}
function _o(a) {
var e;
try {