monobill-mintui 0.2.7 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/form/Form.d.ts +9 -0
- package/dist/components/form/Form.d.ts.map +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.js +967 -825
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { g as q } from "./error-BiWD2g35.js";
|
|
2
|
-
class
|
|
2
|
+
class B extends HTMLElement {
|
|
3
3
|
constructor() {
|
|
4
4
|
super(), this._darkModeObserver = null;
|
|
5
5
|
}
|
|
@@ -32,13 +32,13 @@ class O extends HTMLElement {
|
|
|
32
32
|
return t[e] || t.default;
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
const e = this.getSize(), t = this.getAttribute("size") || "default", i = !!(this.style.width && this.style.height), s = this.getAttribute("data-button-variant"),
|
|
36
|
-
let
|
|
35
|
+
const e = this.getSize(), t = this.getAttribute("size") || "default", i = !!(this.style.width && this.style.height), s = this.getAttribute("data-button-variant"), r = document.documentElement.classList.contains("dark");
|
|
36
|
+
let n;
|
|
37
37
|
if (i) {
|
|
38
|
-
const
|
|
39
|
-
s === "solid" ?
|
|
38
|
+
const d = this.getAttribute("data-button-tone") || "neutral";
|
|
39
|
+
s === "solid" ? d === "neutral" ? n = r ? "#ffffff" : "#0f172a" : n = "#ffffff" : n = r ? "#ffffff" : "#0f172a";
|
|
40
40
|
} else
|
|
41
|
-
|
|
41
|
+
n = r ? "#e2e8f0" : "#0f172a";
|
|
42
42
|
const a = t === "large" ? "2" : "4", l = !!(this.style.width && this.style.height), o = `
|
|
43
43
|
<svg
|
|
44
44
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -51,7 +51,7 @@ class O extends HTMLElement {
|
|
|
51
51
|
cx="12"
|
|
52
52
|
cy="12"
|
|
53
53
|
r="10"
|
|
54
|
-
stroke="${
|
|
54
|
+
stroke="${n}"
|
|
55
55
|
stroke-width="${a}"
|
|
56
56
|
opacity="0.25"
|
|
57
57
|
class="opacity-25"
|
|
@@ -60,7 +60,7 @@ class O extends HTMLElement {
|
|
|
60
60
|
cx="12"
|
|
61
61
|
cy="12"
|
|
62
62
|
r="10"
|
|
63
|
-
stroke="${
|
|
63
|
+
stroke="${n}"
|
|
64
64
|
stroke-width="${a}"
|
|
65
65
|
stroke-linecap="round"
|
|
66
66
|
fill="none"
|
|
@@ -86,8 +86,8 @@ class O extends HTMLElement {
|
|
|
86
86
|
this.innerHTML = o.trim();
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
customElements.get("mint-spinner") || customElements.define("mint-spinner",
|
|
90
|
-
class
|
|
89
|
+
customElements.get("mint-spinner") || customElements.define("mint-spinner", B);
|
|
90
|
+
class O extends HTMLElement {
|
|
91
91
|
constructor() {
|
|
92
92
|
super(), this._darkModeObserver = null;
|
|
93
93
|
}
|
|
@@ -124,7 +124,7 @@ class B extends HTMLElement {
|
|
|
124
124
|
return e ? e === "local" ? `/icons/${this.getName()}.svg` : e === "cdn" ? `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg` : `${e.endsWith("/") ? e : `${e}/`}${this.getName()}.svg` : `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg`;
|
|
125
125
|
}
|
|
126
126
|
render() {
|
|
127
|
-
var l, o,
|
|
127
|
+
var l, o, d;
|
|
128
128
|
const e = this.getName();
|
|
129
129
|
if (!e) {
|
|
130
130
|
this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
|
|
@@ -134,13 +134,13 @@ class B extends HTMLElement {
|
|
|
134
134
|
console.warn(`Icon "${e}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${e}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
137
|
-
const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")),
|
|
137
|
+
const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")), r = this.closest("mint-select") || ((d = this.parentElement) == null ? void 0 : d.closest("mint-select"));
|
|
138
138
|
if (!Array.from(this.classList).some(
|
|
139
139
|
(c) => c.startsWith("w-") || c.startsWith("h-")
|
|
140
|
-
) && !
|
|
140
|
+
) && !r) {
|
|
141
141
|
let c;
|
|
142
|
-
s ? c = "w-3 h-3" : i ? c = "w-5 h-5" : c = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), c.split(" ").forEach((
|
|
143
|
-
|
|
142
|
+
s ? c = "w-3 h-3" : i ? c = "w-5 h-5" : c = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), c.split(" ").forEach((m) => {
|
|
143
|
+
m && this.classList.add(m);
|
|
144
144
|
});
|
|
145
145
|
}
|
|
146
146
|
const a = this.getIconUrl();
|
|
@@ -149,12 +149,12 @@ class B extends HTMLElement {
|
|
|
149
149
|
else if (i)
|
|
150
150
|
this.classList.remove("text-gray-100", "text-gray-900");
|
|
151
151
|
else {
|
|
152
|
-
const
|
|
153
|
-
this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(
|
|
152
|
+
const m = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
|
|
153
|
+
this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(m);
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
|
-
customElements.get("mint-icon") || customElements.define("mint-icon",
|
|
157
|
+
customElements.get("mint-icon") || customElements.define("mint-icon", O);
|
|
158
158
|
class z extends HTMLElement {
|
|
159
159
|
constructor() {
|
|
160
160
|
super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1, this._handleMouseDown = () => {
|
|
@@ -211,13 +211,13 @@ class z extends HTMLElement {
|
|
|
211
211
|
return this.getAttribute("icon") || "";
|
|
212
212
|
}
|
|
213
213
|
isIconOnly() {
|
|
214
|
-
var i, s,
|
|
214
|
+
var i, s, r, n, a;
|
|
215
215
|
if (!(this.getIcon() || ((i = this._button) == null ? void 0 : i.querySelector('[slot="icon"], .mint-button-icon, mint-icon')))) return !1;
|
|
216
216
|
const t = (s = this._button) == null ? void 0 : s.querySelector(".mint-button-content");
|
|
217
|
-
if (t && ((
|
|
217
|
+
if (t && ((r = t.textContent) != null && r.trim())) return !1;
|
|
218
218
|
if (this._button)
|
|
219
219
|
for (let l = this._button.firstChild; l; l = l.nextSibling) {
|
|
220
|
-
if (l.nodeType === Node.TEXT_NODE && ((
|
|
220
|
+
if (l.nodeType === Node.TEXT_NODE && ((n = l.textContent) != null && n.trim()))
|
|
221
221
|
return !1;
|
|
222
222
|
if (l.nodeType === Node.ELEMENT_NODE) {
|
|
223
223
|
const o = l;
|
|
@@ -251,7 +251,7 @@ class z extends HTMLElement {
|
|
|
251
251
|
"[&>*]:duration-100",
|
|
252
252
|
"disabled:opacity-50",
|
|
253
253
|
"disabled:cursor-not-allowed"
|
|
254
|
-
], s = this.getTone(),
|
|
254
|
+
], s = this.getTone(), r = {
|
|
255
255
|
"solid-action": [
|
|
256
256
|
"bg-slate-800",
|
|
257
257
|
"dark:bg-slate-600",
|
|
@@ -536,14 +536,14 @@ class z extends HTMLElement {
|
|
|
536
536
|
"border-transparent"
|
|
537
537
|
// Match other button border width
|
|
538
538
|
]
|
|
539
|
-
},
|
|
539
|
+
}, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], l = [
|
|
540
540
|
...i,
|
|
541
541
|
...a
|
|
542
542
|
];
|
|
543
543
|
return this.isFullWidth() && l.push("w-full"), l.join(" ");
|
|
544
544
|
}
|
|
545
545
|
render() {
|
|
546
|
-
var
|
|
546
|
+
var d, c, m, h, f;
|
|
547
547
|
const e = this.isDisabled() || this.isLoading(), t = this.getType();
|
|
548
548
|
if (!this._button) {
|
|
549
549
|
for (this._button = document.createElement("button"); this.firstChild; )
|
|
@@ -556,52 +556,52 @@ class z extends HTMLElement {
|
|
|
556
556
|
if (i)
|
|
557
557
|
i.setAttribute("data-button-variant", this.getVariant()), i.setAttribute("data-button-tone", this.getTone()), "render" in i && typeof i.render == "function" && i.render();
|
|
558
558
|
else {
|
|
559
|
-
const
|
|
560
|
-
|
|
561
|
-
const
|
|
562
|
-
|
|
559
|
+
const u = document.createElement("span");
|
|
560
|
+
u.className = "mr-2 inline-flex items-center";
|
|
561
|
+
const p = document.createElement("mint-spinner");
|
|
562
|
+
p.setAttribute("size", "default"), p.setAttribute("data-button-variant", this.getVariant()), p.setAttribute("data-button-tone", this.getTone()), p.style.width = "0.875rem", p.style.height = "0.875rem", u.appendChild(p), this._button.insertBefore(u, this._button.firstChild);
|
|
563
563
|
}
|
|
564
|
-
else i && ((
|
|
564
|
+
else i && ((d = i.parentElement) == null || d.remove());
|
|
565
565
|
for (; this.firstChild && this.firstChild !== this._button; )
|
|
566
566
|
this._button.appendChild(this.firstChild);
|
|
567
567
|
const s = this.getIcon();
|
|
568
|
-
let
|
|
569
|
-
s ? (
|
|
570
|
-
const
|
|
568
|
+
let r = this._button.querySelector('[slot="icon"], .mint-button-icon, mint-icon');
|
|
569
|
+
s ? (r && r.tagName !== "MINT-ICON" && (r.remove(), r = null), !r || r.tagName !== "MINT-ICON" ? (r = document.createElement("mint-icon"), r.setAttribute("name", s), r.className = "mint-button-icon") : r.setAttribute("name", s)) : r && r.tagName === "MINT-ICON" && (r.remove(), r = null), r || (r = this._button.querySelector('[slot="icon"], .mint-button-icon'));
|
|
570
|
+
const n = this.getIconPosition();
|
|
571
571
|
let a = this._button.querySelector(".mint-button-content");
|
|
572
572
|
if (a) {
|
|
573
|
-
const
|
|
574
|
-
if (
|
|
575
|
-
const
|
|
576
|
-
|
|
577
|
-
} else if (
|
|
578
|
-
|
|
579
|
-
const
|
|
580
|
-
|
|
581
|
-
} else
|
|
573
|
+
const u = r && r.tagName === "MINT-ICON";
|
|
574
|
+
if (r && !r.parentElement) {
|
|
575
|
+
const p = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
|
|
576
|
+
u || n === "left" ? p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
|
|
577
|
+
} else if (r && (u || n === "left") && r.nextSibling !== a) {
|
|
578
|
+
r.remove();
|
|
579
|
+
const p = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
|
|
580
|
+
p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
|
|
581
|
+
} else r && !u && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
|
|
582
582
|
} else {
|
|
583
|
-
const
|
|
584
|
-
for (let
|
|
585
|
-
if (
|
|
586
|
-
|
|
583
|
+
const u = [];
|
|
584
|
+
for (let p = this._button.firstChild; p; p = p.nextSibling) {
|
|
585
|
+
if (p.nodeType !== Node.ELEMENT_NODE) {
|
|
586
|
+
u.push(p);
|
|
587
587
|
continue;
|
|
588
588
|
}
|
|
589
|
-
const
|
|
590
|
-
|
|
589
|
+
const _ = p;
|
|
590
|
+
_.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !== r && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && u.push(p);
|
|
591
591
|
}
|
|
592
|
-
if (
|
|
593
|
-
a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center",
|
|
594
|
-
a.appendChild(
|
|
592
|
+
if (u.length > 0) {
|
|
593
|
+
a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", u.forEach((_) => {
|
|
594
|
+
a.appendChild(_);
|
|
595
595
|
});
|
|
596
|
-
const
|
|
597
|
-
|
|
598
|
-
} else if (
|
|
599
|
-
const
|
|
600
|
-
|
|
596
|
+
const p = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
|
|
597
|
+
r && n === "left" ? p ? (p.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? p ? (p.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : p ? p.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
|
|
598
|
+
} else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
|
|
599
|
+
const p = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
|
|
600
|
+
p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
|
|
601
601
|
}
|
|
602
602
|
}
|
|
603
603
|
const l = this.isIconOnly();
|
|
604
|
-
|
|
604
|
+
r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), l ? r.tagName === "MINT-ICON" ? (r.style.width = "1rem", r.style.height = "1rem", r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0") : (r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0", r.tagName === "svg" && (r.style.width = "1rem", r.style.height = "1rem")) : n === "left" ? r.classList.add("mr-1.5") : r.classList.add("ml-1.5"));
|
|
605
605
|
const o = this.getButtonClasses();
|
|
606
606
|
this._button.className = o;
|
|
607
607
|
}
|
|
@@ -771,23 +771,23 @@ class W extends HTMLElement {
|
|
|
771
771
|
].join(" ");
|
|
772
772
|
}
|
|
773
773
|
render() {
|
|
774
|
-
const e = this.isLoading(), t = this.getSwitchClasses(), i = this.getThumbClasses(), s = this.getLabel(),
|
|
774
|
+
const e = this.isLoading(), t = this.getSwitchClasses(), i = this.getThumbClasses(), s = this.getLabel(), r = this.getInfo(), n = this.getIcon(), a = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
|
|
775
775
|
this.getAttribute("id") || this.setAttribute("id", a);
|
|
776
776
|
const l = this._getSwitchContainer();
|
|
777
777
|
this._button ? this._button.parentElement !== l && l.appendChild(this._button) : (this._button = document.createElement("button"), l.appendChild(this._button), this.setupEventListeners());
|
|
778
778
|
let o = l.querySelector(".mint-switch-label");
|
|
779
779
|
s ? (o || (o = document.createElement("label"), o.className = "mint-switch-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", this._button && this._button.parentElement === l ? l.insertBefore(o, this._button.nextSibling) : l.appendChild(o)), o.textContent = s, o.setAttribute("for", a), this.isDisabled() ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove(), this._button.className = t, this._button.disabled = this.isDisabled(), this._button.id = a, this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", s || "Toggle switch"), this._button.setAttribute("role", "switch"), this._button.type = "button";
|
|
780
|
-
let
|
|
781
|
-
|
|
782
|
-
const c =
|
|
783
|
-
if (
|
|
784
|
-
let
|
|
785
|
-
|
|
786
|
-
let f =
|
|
787
|
-
f || (f = document.createElement("mint-icon"),
|
|
780
|
+
let d = this._button.querySelector("span");
|
|
781
|
+
d || (d = document.createElement("span"), this._button.appendChild(d)), d.className = i;
|
|
782
|
+
const c = d.querySelector("span");
|
|
783
|
+
if (n) {
|
|
784
|
+
let h = c;
|
|
785
|
+
h || (h = document.createElement("span"), h.className = this.getIconClasses(), d.appendChild(h));
|
|
786
|
+
let f = h.querySelector("mint-icon");
|
|
787
|
+
f || (f = document.createElement("mint-icon"), h.appendChild(f)), f.setAttribute("name", n);
|
|
788
788
|
} else c && c.remove();
|
|
789
|
-
let
|
|
790
|
-
|
|
789
|
+
let m = this.querySelector(".mint-switch-info");
|
|
790
|
+
r ? (m || (m = document.createElement("span"), m.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(m, l.nextSibling) : this.appendChild(m)), m.textContent = r, this.isDisabled() ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove(), this._renderErrorState(), this._renderSkeleton(e);
|
|
791
791
|
}
|
|
792
792
|
setupEventListeners() {
|
|
793
793
|
this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
|
|
@@ -812,27 +812,27 @@ class W extends HTMLElement {
|
|
|
812
812
|
}
|
|
813
813
|
_renderSkeleton(e) {
|
|
814
814
|
const t = this._getSwitchContainer(), i = this.getLabel(), s = this.getInfo();
|
|
815
|
-
let
|
|
815
|
+
let r = t.querySelector(".mint-switch-skeleton-container"), n = this.querySelector(".mint-switch-info-skeleton");
|
|
816
816
|
if (e) {
|
|
817
|
-
t.classList.contains("relative") || t.classList.add("relative"),
|
|
818
|
-
let a =
|
|
819
|
-
if (a || (a = document.createElement("div"), a.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse",
|
|
820
|
-
let o =
|
|
821
|
-
o || (o = document.createElement("div"), o.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse",
|
|
817
|
+
t.classList.contains("relative") || t.classList.add("relative"), r || (r = document.createElement("div"), r.className = "mint-switch-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", t.appendChild(r));
|
|
818
|
+
let a = r.querySelector(".mint-switch-skeleton-box");
|
|
819
|
+
if (a || (a = document.createElement("div"), a.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(a)), i) {
|
|
820
|
+
let o = r.querySelector(".mint-switch-skeleton-label");
|
|
821
|
+
o || (o = document.createElement("div"), o.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(o));
|
|
822
822
|
} else {
|
|
823
|
-
const o =
|
|
823
|
+
const o = r.querySelector(".mint-switch-skeleton-label");
|
|
824
824
|
o && o.remove();
|
|
825
825
|
}
|
|
826
|
-
|
|
826
|
+
r.style.display = "flex", this._button && (this._button.style.visibility = "hidden", this._button.style.pointerEvents = "none");
|
|
827
827
|
const l = t.querySelector(".mint-switch-label");
|
|
828
828
|
if (l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), s) {
|
|
829
|
-
|
|
829
|
+
n || (n = document.createElement("div"), n.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(n, t.nextSibling) : this.appendChild(n)), n.style.display = "block";
|
|
830
830
|
const o = this.querySelector(".mint-switch-info");
|
|
831
831
|
o && (o.style.display = "none");
|
|
832
832
|
} else
|
|
833
|
-
|
|
833
|
+
n && (n.style.display = "none");
|
|
834
834
|
} else {
|
|
835
|
-
|
|
835
|
+
r && (r.style.display = "none"), n && (n.style.display = "none"), this._button && (this._button.style.visibility = "visible", this._button.style.pointerEvents = "auto");
|
|
836
836
|
const a = t.querySelector(".mint-switch-label");
|
|
837
837
|
a && (a.style.visibility = "visible", a.style.pointerEvents = "auto");
|
|
838
838
|
const l = this.querySelector(".mint-switch-info");
|
|
@@ -906,19 +906,19 @@ class V extends HTMLElement {
|
|
|
906
906
|
regular: [
|
|
907
907
|
// No default margin for regular text
|
|
908
908
|
]
|
|
909
|
-
},
|
|
909
|
+
}, r = {
|
|
910
910
|
default: i ? ["text-gray-100"] : ["text-gray-900"],
|
|
911
911
|
muted: i ? ["text-gray-400"] : ["text-gray-400"],
|
|
912
912
|
danger: i ? ["text-red-400"] : ["text-red-600"],
|
|
913
913
|
success: i ? ["text-green-400"] : ["text-green-600"]
|
|
914
|
-
},
|
|
915
|
-
this.isBold() &&
|
|
914
|
+
}, n = [];
|
|
915
|
+
this.isBold() && n.push("font-bold"), this.isUnderline() && n.push("underline"), this.isStrike() && n.push("line-through"), this.isItalic() && n.push("italic");
|
|
916
916
|
const a = this.getDisplay();
|
|
917
917
|
return [
|
|
918
918
|
a === "block" ? "block" : a === "inline" ? "inline" : "inline-block",
|
|
919
919
|
...s[e] || s.regular,
|
|
920
|
-
...
|
|
921
|
-
...
|
|
920
|
+
...r[t] || r.default,
|
|
921
|
+
...n
|
|
922
922
|
].join(" ");
|
|
923
923
|
}
|
|
924
924
|
render() {
|
|
@@ -943,8 +943,8 @@ class V extends HTMLElement {
|
|
|
943
943
|
Array.from(this.classList).forEach((o) => {
|
|
944
944
|
!t.includes(o) && !i.includes(o) && this._userClasses.add(o);
|
|
945
945
|
});
|
|
946
|
-
const
|
|
947
|
-
this.className =
|
|
946
|
+
const n = [.../* @__PURE__ */ new Set([...s, ...Array.from(this._userClasses)])];
|
|
947
|
+
this.className = n.join(" ");
|
|
948
948
|
const a = {
|
|
949
949
|
heading: "clamp(1.25rem, 2.5vw + 0.5rem, 1.5rem)",
|
|
950
950
|
// Scales between 1.25rem (20px) and 1.5rem (24px)
|
|
@@ -1029,10 +1029,10 @@ class R extends HTMLElement {
|
|
|
1029
1029
|
"[&>mint-button>button]:!justify-start",
|
|
1030
1030
|
"[&>mint-button>button]:!justify-center",
|
|
1031
1031
|
"[&>mint-button>button]:!justify-end"
|
|
1032
|
-
].forEach((
|
|
1033
|
-
|
|
1034
|
-
}), ["box-border", "m-0", "p-0", "border-0", "align-baseline", "block"].forEach((
|
|
1035
|
-
this.classList.contains(
|
|
1032
|
+
].forEach((r) => this.classList.remove(r)), e.split(" ").forEach((r) => {
|
|
1033
|
+
r && this.classList.add(r);
|
|
1034
|
+
}), ["box-border", "m-0", "p-0", "border-0", "align-baseline", "block"].forEach((r) => {
|
|
1035
|
+
this.classList.contains(r) || this.classList.add(r);
|
|
1036
1036
|
}), t ? this._applyTextAlignToChildren(t) : this._removeTextAlignFromChildren();
|
|
1037
1037
|
}
|
|
1038
1038
|
_applyTextAlignToChildren(e) {
|
|
@@ -1041,8 +1041,8 @@ class R extends HTMLElement {
|
|
|
1041
1041
|
const s = i.querySelector("button");
|
|
1042
1042
|
if (s) {
|
|
1043
1043
|
s.classList.remove("justify-start", "justify-center", "justify-end"), e === "left" ? s.classList.add("justify-start") : e === "right" ? s.classList.add("justify-end") : e === "center" && s.classList.add("justify-center");
|
|
1044
|
-
const
|
|
1045
|
-
|
|
1044
|
+
const r = s.querySelector(".mint-button-content");
|
|
1045
|
+
r && (r.classList.remove("text-left", "text-center", "text-right", "text-justify"), r.classList.add(`text-${e}`));
|
|
1046
1046
|
}
|
|
1047
1047
|
} else
|
|
1048
1048
|
i.classList.remove("text-left", "text-center", "text-right", "text-justify"), i.classList.add(`text-${e}`);
|
|
@@ -1202,7 +1202,7 @@ class Y extends HTMLElement {
|
|
|
1202
1202
|
} catch {
|
|
1203
1203
|
return !1;
|
|
1204
1204
|
}
|
|
1205
|
-
})(),
|
|
1205
|
+
})(), r = new CustomEvent("back", {
|
|
1206
1206
|
detail: {
|
|
1207
1207
|
url: t,
|
|
1208
1208
|
isFromReferrer: s,
|
|
@@ -1213,7 +1213,7 @@ class Y extends HTMLElement {
|
|
|
1213
1213
|
cancelable: !0,
|
|
1214
1214
|
composed: !0
|
|
1215
1215
|
});
|
|
1216
|
-
this.dispatchEvent(
|
|
1216
|
+
this.dispatchEvent(r);
|
|
1217
1217
|
}
|
|
1218
1218
|
render() {
|
|
1219
1219
|
this._button || (this._button = document.createElement("mint-button"), this._button.setAttribute("variant", "neutral"), this._button.setAttribute("icon", "arrow-left"), this._button.addEventListener("click", (e) => this.handleClick(e)), this.appendChild(this._button));
|
|
@@ -1251,15 +1251,15 @@ class U extends HTMLElement {
|
|
|
1251
1251
|
let t = this._titleElement.querySelector("mint-back-button");
|
|
1252
1252
|
if (this.shouldShowBackButton()) {
|
|
1253
1253
|
t || (t = document.createElement("mint-back-button"), this._titleElement.insertBefore(t, this._titleElement.firstChild));
|
|
1254
|
-
const
|
|
1255
|
-
t.setAttribute("fallback-href",
|
|
1254
|
+
const n = this.getFallbackHref();
|
|
1255
|
+
t.setAttribute("fallback-href", n), this._backButton = t;
|
|
1256
1256
|
} else t && (t.remove(), t = null, this._backButton = null);
|
|
1257
1257
|
e ? (this._headingText ? (this._headingText.classList.add("truncate", "min-w-0"), t && t.parentElement === this._titleElement ? this._headingText.previousSibling !== t && this._titleElement.insertBefore(this._headingText, t.nextSibling) : this._headingText.previousSibling && this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)) : (this._headingText = document.createElement("mint-text"), this._headingText.setAttribute("size", "heading"), this._headingText.setAttribute("bold", ""), this._headingText.classList.add("truncate", "min-w-0"), t && t.parentElement === this._titleElement ? this._titleElement.insertBefore(this._headingText, t.nextSibling) : this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)), this._headingText.textContent = e) : this._headingText && (this._headingText.remove(), this._headingText = null), this._actionsSlot ? this._actionsSlot.classList.contains("ml-4") || this._actionsSlot.classList.add("ml-4") : (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "flex gap-2 items-center ml-4", this._actionsSlot.setAttribute("slot", "actions"), this._header.appendChild(this._actionsSlot)), Array.from(this.children).filter(
|
|
1258
|
-
(
|
|
1259
|
-
).forEach((
|
|
1260
|
-
this._actionsSlot &&
|
|
1261
|
-
}), this._bodySlot || (this._bodySlot = document.createElement("div"), this._pageContainer.appendChild(this._bodySlot)), Array.from(this.children).forEach((
|
|
1262
|
-
|
|
1258
|
+
(n) => n !== this._pageContainer && n !== this._actionsSlot && n.getAttribute("slot") === "actions"
|
|
1259
|
+
).forEach((n) => {
|
|
1260
|
+
this._actionsSlot && n.parentElement !== this._actionsSlot && this._actionsSlot.appendChild(n);
|
|
1261
|
+
}), this._bodySlot || (this._bodySlot = document.createElement("div"), this._pageContainer.appendChild(this._bodySlot)), Array.from(this.children).forEach((n) => {
|
|
1262
|
+
n !== this._pageContainer && n.getAttribute("slot") !== "actions" && n !== this._actionsSlot && n !== this._header && n !== this._bodySlot && n !== this._headingText && n.parentElement !== this._bodySlot && n.parentElement !== this._pageContainer && this._bodySlot.appendChild(n);
|
|
1263
1263
|
}), this._updateBackgroundColor();
|
|
1264
1264
|
}
|
|
1265
1265
|
_applyContainerClasses() {
|
|
@@ -1335,10 +1335,10 @@ class G extends HTMLElement {
|
|
|
1335
1335
|
i && e.push(`sm:grid-cols-${i}`);
|
|
1336
1336
|
const s = this.getMd();
|
|
1337
1337
|
s && e.push(`md:grid-cols-${s}`);
|
|
1338
|
-
const
|
|
1339
|
-
|
|
1340
|
-
const
|
|
1341
|
-
|
|
1338
|
+
const r = this.getLg();
|
|
1339
|
+
r && e.push(`lg:grid-cols-${r}`);
|
|
1340
|
+
const n = this.getXl();
|
|
1341
|
+
n && e.push(`xl:grid-cols-${n}`);
|
|
1342
1342
|
const a = this.getGap();
|
|
1343
1343
|
return e.push(`gap-${a}`), e;
|
|
1344
1344
|
}
|
|
@@ -1391,8 +1391,8 @@ class J extends HTMLElement {
|
|
|
1391
1391
|
this._animateExit();
|
|
1392
1392
|
let s = this._modal.querySelector(".modal-content");
|
|
1393
1393
|
s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
|
|
1394
|
-
let
|
|
1395
|
-
t ? (
|
|
1394
|
+
let r = this._headingSlot.querySelector("mint-text");
|
|
1395
|
+
t ? (r || (r = document.createElement("mint-text"), r.setAttribute("size", "sub-heading"), r.setAttribute("bold", ""), this._headingSlot.appendChild(r)), r.textContent = t) : r && r.remove(), Array.from(this.children).filter(
|
|
1396
1396
|
(c) => c !== this._overlay && c !== this._modal && c !== this._headingSlot && c.getAttribute("slot") === "heading"
|
|
1397
1397
|
).forEach((c) => {
|
|
1398
1398
|
this._headingSlot && c.parentElement !== this._headingSlot && this._headingSlot.appendChild(c);
|
|
@@ -1405,8 +1405,8 @@ class J extends HTMLElement {
|
|
|
1405
1405
|
l || (l = document.createElement("mint-stack"), l.setAttribute("direction", "horizontal"), l.className = "justify-end", this._actionsSlot.appendChild(l)), Array.from(this.children).filter(
|
|
1406
1406
|
(c) => c !== this._overlay && c !== this._modal && c !== this._actionsSlot && c.getAttribute("slot") === "actions"
|
|
1407
1407
|
).forEach((c) => {
|
|
1408
|
-
Array.from(c.children).forEach((
|
|
1409
|
-
|
|
1408
|
+
Array.from(c.children).forEach((h) => {
|
|
1409
|
+
h.parentElement !== l && l.appendChild(h);
|
|
1410
1410
|
}), c.parentElement && c.remove();
|
|
1411
1411
|
}), Array.from(this.children).forEach((c) => {
|
|
1412
1412
|
c !== this._overlay && c !== this._modal && c.getAttribute("slot") !== "heading" && c.getAttribute("slot") !== "body" && c.getAttribute("slot") !== "actions" && c !== this._headingSlot && c !== this._bodySlot && c !== this._actionsSlot && c.parentElement !== this._bodySlot && this._bodySlot.appendChild(c);
|
|
@@ -1558,49 +1558,49 @@ class X extends HTMLElement {
|
|
|
1558
1558
|
const e = this._triggerElement.getBoundingClientRect(), t = this._popover.querySelector(".popover-content");
|
|
1559
1559
|
if (!t) return { top: 0, left: 0, direction: "down" };
|
|
1560
1560
|
this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
|
|
1561
|
-
const s = t.getBoundingClientRect(),
|
|
1562
|
-
let l = this.getDirection(), o = 0,
|
|
1561
|
+
const s = t.getBoundingClientRect(), r = window.innerWidth, n = window.innerHeight, a = 8;
|
|
1562
|
+
let l = this.getDirection(), o = 0, d = 0;
|
|
1563
1563
|
switch (l) {
|
|
1564
1564
|
case "down":
|
|
1565
|
-
if (o = e.bottom + a,
|
|
1565
|
+
if (o = e.bottom + a, d = e.left + e.width / 2 - s.width / 2, o + s.height > n) {
|
|
1566
1566
|
const c = e.top - s.height - a;
|
|
1567
|
-
c >= 0 ? (l = "up", o = c) : (o = Math.max(0,
|
|
1567
|
+
c >= 0 ? (l = "up", o = c) : (o = Math.max(0, n - s.height - a), o + s.height > n && (o = 0));
|
|
1568
1568
|
}
|
|
1569
|
-
|
|
1569
|
+
d < 0 && (d = a), d + s.width > r && (d = Math.max(a, r - s.width - a), d + s.width > r && (d = r - s.width));
|
|
1570
1570
|
break;
|
|
1571
1571
|
case "up":
|
|
1572
|
-
if (o = e.top - s.height - a,
|
|
1572
|
+
if (o = e.top - s.height - a, d = e.left + e.width / 2 - s.width / 2, o < 0) {
|
|
1573
1573
|
const c = e.bottom + a;
|
|
1574
|
-
c + s.height <=
|
|
1574
|
+
c + s.height <= n ? (l = "down", o = c) : (o = Math.min(n - s.height - a, n - s.height), o < 0 && (o = n - s.height));
|
|
1575
1575
|
}
|
|
1576
|
-
|
|
1576
|
+
d < 0 && (d = a), d + s.width > r && (d = Math.max(a, r - s.width - a), d + s.width > r && (d = r - s.width));
|
|
1577
1577
|
break;
|
|
1578
1578
|
case "right":
|
|
1579
|
-
if (o = e.top + e.height / 2 - s.height / 2,
|
|
1579
|
+
if (o = e.top + e.height / 2 - s.height / 2, d = e.right + a, d + s.width > r) {
|
|
1580
1580
|
const c = e.left - s.width - a;
|
|
1581
|
-
c >= 0 ? (l = "left",
|
|
1581
|
+
c >= 0 ? (l = "left", d = c) : (d = Math.max(0, r - s.width - a), d + s.width > r && (d = r - s.width));
|
|
1582
1582
|
}
|
|
1583
|
-
o < 0 && (o = a), o + s.height >
|
|
1583
|
+
o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
|
|
1584
1584
|
break;
|
|
1585
1585
|
case "left":
|
|
1586
|
-
if (o = e.top + e.height / 2 - s.height / 2,
|
|
1586
|
+
if (o = e.top + e.height / 2 - s.height / 2, d = e.left - s.width - a, d < 0) {
|
|
1587
1587
|
const c = e.right + a;
|
|
1588
|
-
c + s.width <=
|
|
1588
|
+
c + s.width <= r ? (l = "right", d = c) : (d = Math.min(r - s.width - a, r - s.width), d < 0 && (d = 0));
|
|
1589
1589
|
}
|
|
1590
|
-
o < 0 && (o = a), o + s.height >
|
|
1590
|
+
o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
|
|
1591
1591
|
break;
|
|
1592
1592
|
}
|
|
1593
|
-
return { top: o, left:
|
|
1593
|
+
return { top: o, left: d, direction: l };
|
|
1594
1594
|
}
|
|
1595
1595
|
render() {
|
|
1596
1596
|
const e = this.getId(), t = this.isOpen(), i = this.getPadding();
|
|
1597
1597
|
if (e && (this.id = e), t) {
|
|
1598
1598
|
if (this.classList.remove("hidden"), this.style.pointerEvents = "auto", !this._clickOutsideHandler) {
|
|
1599
|
-
const
|
|
1599
|
+
const n = this;
|
|
1600
1600
|
this._clickOutsideHandler = function(a) {
|
|
1601
|
-
const l = a.composedPath(), o = l.includes(
|
|
1602
|
-
if (!(
|
|
1603
|
-
|
|
1601
|
+
const l = a.composedPath(), o = l.includes(n);
|
|
1602
|
+
if (!(n._triggerElement && l.includes(n._triggerElement)) && !o) {
|
|
1603
|
+
n.close();
|
|
1604
1604
|
return;
|
|
1605
1605
|
}
|
|
1606
1606
|
}, setTimeout(() => {
|
|
@@ -1614,11 +1614,11 @@ class X extends HTMLElement {
|
|
|
1614
1614
|
if (!s)
|
|
1615
1615
|
s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-800 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
|
|
1616
1616
|
else {
|
|
1617
|
-
const
|
|
1617
|
+
const n = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], l = n.filter((o) => !a.includes(o));
|
|
1618
1618
|
s.className = [...l, i].join(" ");
|
|
1619
1619
|
}
|
|
1620
|
-
Array.from(this.children).forEach((
|
|
1621
|
-
|
|
1620
|
+
Array.from(this.children).forEach((n) => {
|
|
1621
|
+
n !== this._overlay && n !== this._popover && n.parentElement === this && s.appendChild(n);
|
|
1622
1622
|
}), t ? (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement ? this._updatePosition(s) : (this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block", s.style.transform = "scale(0.97) translateY(10px)", s.style.opacity = "0", s.style.transition = "all 200ms ease-out", requestAnimationFrame(() => {
|
|
1623
1623
|
requestAnimationFrame(() => {
|
|
1624
1624
|
s.style.transform = "scale(1) translateY(0)", s.style.opacity = "1";
|
|
@@ -1782,32 +1782,32 @@ class K extends HTMLElement {
|
|
|
1782
1782
|
}
|
|
1783
1783
|
render() {
|
|
1784
1784
|
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.isDisabled();
|
|
1785
|
-
let
|
|
1786
|
-
|
|
1787
|
-
let
|
|
1788
|
-
|
|
1785
|
+
let r = this.querySelector(".mint-checkbox-container");
|
|
1786
|
+
r || (r = document.createElement("div"), r.className = "mint-checkbox-container relative inline-flex items-start gap-2", this.insertBefore(r, this.firstChild));
|
|
1787
|
+
let n = this.querySelector(".mint-checkbox-wrapper");
|
|
1788
|
+
n ? n.parentElement !== r && r.appendChild(n) : (n = document.createElement("div"), n.className = "mint-checkbox-wrapper", r.appendChild(n)), this._checkbox ? this._checkbox.parentElement !== n && n.appendChild(this._checkbox) : (this._checkbox = document.createElement("input"), this._checkbox.type = "checkbox", n.appendChild(this._checkbox), this.setupEventListeners()), this._checkbox.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._checkbox.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._checkbox.checked = this._checked, this._checkbox.disabled = s, this._changeHandler || this.setupEventListeners();
|
|
1789
1789
|
const a = this.getId();
|
|
1790
1790
|
a ? this._checkbox.id = a : this._checkbox.removeAttribute("id");
|
|
1791
1791
|
const l = this.getName();
|
|
1792
1792
|
l ? this._checkbox.name = l : this._checkbox.removeAttribute("name");
|
|
1793
1793
|
const o = this.getValue();
|
|
1794
|
-
o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"),
|
|
1795
|
-
let
|
|
1796
|
-
|
|
1794
|
+
o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"), n.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, n.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
|
|
1795
|
+
let d = n.querySelector("mint-icon");
|
|
1796
|
+
d || (d = document.createElement("mint-icon"), d.setAttribute("name", "check"), d.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", d.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", d.style.zIndex = "1", n.appendChild(d)), this.updateVisualState();
|
|
1797
1797
|
let c = this.querySelector(".mint-checkbox-label-container");
|
|
1798
|
-
const
|
|
1798
|
+
const m = this.querySelector(".mint-checkbox-container");
|
|
1799
1799
|
if (t || i) {
|
|
1800
|
-
c ?
|
|
1801
|
-
let
|
|
1802
|
-
t ? (
|
|
1800
|
+
c ? m && c.parentElement !== m && m.appendChild(c) : (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", m ? m.appendChild(c) : this.appendChild(c));
|
|
1801
|
+
let h = c.querySelector(".mint-checkbox-label");
|
|
1802
|
+
t ? (h || (h = document.createElement("span"), h.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", c.insertBefore(h, c.firstChild)), h.textContent = t, s ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
|
|
1803
1803
|
let f = c.querySelector(".mint-checkbox-info");
|
|
1804
1804
|
if (i ? (f || (f = document.createElement("span"), f.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", c.appendChild(f)), f.textContent = i, s ? f.classList.add("opacity-40") : f.classList.remove("opacity-40")) : f && f.remove(), s)
|
|
1805
1805
|
c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
|
|
1806
1806
|
else {
|
|
1807
1807
|
c.style.cursor = "pointer";
|
|
1808
|
-
const
|
|
1809
|
-
|
|
1810
|
-
this._checkbox && (
|
|
1808
|
+
const u = c._clickHandler;
|
|
1809
|
+
u && c.removeEventListener("click", u), c._clickHandler = (p) => {
|
|
1810
|
+
this._checkbox && (p.target === this._checkbox || this._checkbox.contains(p.target) || p.composedPath().includes(this._checkbox)) || this.toggle();
|
|
1811
1811
|
}, c.addEventListener("click", c._clickHandler);
|
|
1812
1812
|
}
|
|
1813
1813
|
} else c && c.remove();
|
|
@@ -1871,17 +1871,17 @@ class K extends HTMLElement {
|
|
|
1871
1871
|
}
|
|
1872
1872
|
_renderSkeleton(e) {
|
|
1873
1873
|
let t = this.querySelector(".mint-checkbox-skeleton-container");
|
|
1874
|
-
const i = this.querySelector(".mint-checkbox-container"), s = this.querySelector(".mint-checkbox-wrapper"),
|
|
1874
|
+
const i = this.querySelector(".mint-checkbox-container"), s = this.querySelector(".mint-checkbox-wrapper"), r = this.querySelector(".mint-checkbox-label-container");
|
|
1875
1875
|
if (e) {
|
|
1876
1876
|
t || (t = document.createElement("div"), t.className = "mint-checkbox-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t)));
|
|
1877
|
-
let
|
|
1878
|
-
if (
|
|
1877
|
+
let n = t.querySelector(".mint-checkbox-skeleton-box");
|
|
1878
|
+
if (n || (n = document.createElement("div"), n.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(n)), r) {
|
|
1879
1879
|
let a = t.querySelector(".mint-checkbox-skeleton-label");
|
|
1880
1880
|
a || (a = document.createElement("div"), a.className = "mint-checkbox-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(a));
|
|
1881
1881
|
}
|
|
1882
|
-
t.style.display = "flex", s && (s.style.visibility = "hidden", s.style.pointerEvents = "none"),
|
|
1882
|
+
t.style.display = "flex", s && (s.style.visibility = "hidden", s.style.pointerEvents = "none"), r && (r.style.visibility = "hidden", r.style.pointerEvents = "none");
|
|
1883
1883
|
} else
|
|
1884
|
-
t && (t.style.display = "none"), s && (s.style.visibility = "visible", s.style.pointerEvents = "auto"),
|
|
1884
|
+
t && (t.style.display = "none"), s && (s.style.visibility = "visible", s.style.pointerEvents = "auto"), r && (r.style.visibility = "visible", r.style.pointerEvents = "auto");
|
|
1885
1885
|
}
|
|
1886
1886
|
_renderErrorState() {
|
|
1887
1887
|
const e = this.hasError(), t = this.getErrorMessage();
|
|
@@ -1889,8 +1889,8 @@ class K extends HTMLElement {
|
|
|
1889
1889
|
!i && e && t && (i = document.createElement("div"), i.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", this.appendChild(i));
|
|
1890
1890
|
let s = this.querySelector(".mint-checkbox-error");
|
|
1891
1891
|
e && t ? (s ? (s.classList.add("block", "w-full"), s.style.display = "block", (i && s.parentElement !== i || i && s.parentElement === i) && i.appendChild(s)) : (s = document.createElement("div"), s.className = "mint-checkbox-error text-xs text-red-600 dark:text-red-400 block w-full", s.style.display = "block", i ? i.appendChild(s) : this.appendChild(s)), s.textContent = t) : s && s.remove();
|
|
1892
|
-
const
|
|
1893
|
-
|
|
1892
|
+
const r = this.querySelector(".mint-checkbox-wrapper");
|
|
1893
|
+
r && (r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`);
|
|
1894
1894
|
}
|
|
1895
1895
|
}
|
|
1896
1896
|
customElements.get("mint-checkbox") || customElements.define("mint-checkbox", K);
|
|
@@ -1953,68 +1953,68 @@ class Z extends HTMLElement {
|
|
|
1953
1953
|
}
|
|
1954
1954
|
render() {
|
|
1955
1955
|
var f;
|
|
1956
|
-
const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"),
|
|
1957
|
-
let
|
|
1956
|
+
const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"), r = (s == null ? void 0 : s.getAttribute("name")) || "";
|
|
1957
|
+
let n = "";
|
|
1958
1958
|
const a = this.querySelector(".mint-choice-option-label");
|
|
1959
|
-
a ?
|
|
1960
|
-
var
|
|
1961
|
-
if (
|
|
1962
|
-
const
|
|
1963
|
-
|
|
1959
|
+
a ? n = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((u) => {
|
|
1960
|
+
var p;
|
|
1961
|
+
if (u.nodeType === Node.TEXT_NODE) {
|
|
1962
|
+
const _ = (p = u.textContent) == null ? void 0 : p.trim();
|
|
1963
|
+
_ && (n += _);
|
|
1964
1964
|
}
|
|
1965
1965
|
});
|
|
1966
1966
|
const l = this.querySelectorAll(".mint-choice-option-wrapper");
|
|
1967
1967
|
let o = null;
|
|
1968
|
-
if (l.length > 0 && (this._radio && (o = Array.from(l).find((
|
|
1969
|
-
|
|
1970
|
-
})), o || (o = document.createElement("div"), o.className = "mint-choice-option-wrapper", o.style.position = "relative", this.insertBefore(o, this.firstChild)), o.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, o.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((
|
|
1971
|
-
|
|
1968
|
+
if (l.length > 0 && (this._radio && (o = Array.from(l).find((u) => u.contains(this._radio))), o || (o = l[0]), l.forEach((u, p) => {
|
|
1969
|
+
u !== o && u.remove();
|
|
1970
|
+
})), o || (o = document.createElement("div"), o.className = "mint-choice-option-wrapper", o.style.position = "relative", this.insertBefore(o, this.firstChild)), o.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, o.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((u) => {
|
|
1971
|
+
u !== this._radio && u.remove();
|
|
1972
1972
|
}), this._radio)
|
|
1973
|
-
this._radio.parentElement !== o && o.appendChild(this._radio), this._radio && this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._radio.addEventListener("change", this._changeHandler)), this._radio && (this._focusHandler || (this._focusHandler = (
|
|
1974
|
-
const m = this.querySelector(".mint-choice-option-wrapper");
|
|
1975
|
-
m && !this.isDisabled() && m.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
1976
|
-
}), this._blurHandler || (this._blurHandler = () => {
|
|
1973
|
+
this._radio.parentElement !== o && o.appendChild(this._radio), this._radio && this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._radio.addEventListener("change", this._changeHandler)), this._radio && (this._focusHandler || (this._focusHandler = (u) => {
|
|
1977
1974
|
const p = this.querySelector(".mint-choice-option-wrapper");
|
|
1978
|
-
p && p.classList.
|
|
1979
|
-
}), this.
|
|
1980
|
-
|
|
1975
|
+
p && !this.isDisabled() && p.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
1976
|
+
}), this._blurHandler || (this._blurHandler = () => {
|
|
1977
|
+
const u = this.querySelector(".mint-choice-option-wrapper");
|
|
1978
|
+
u && u.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
1979
|
+
}), this._keydownHandler || (this._keydownHandler = (u) => {
|
|
1980
|
+
this.isDisabled() || (u.key === "ArrowDown" || u.key === "ArrowRight" ? (u.preventDefault(), this._focusNextOption()) : (u.key === "ArrowUp" || u.key === "ArrowLeft") && (u.preventDefault(), this._focusPreviousOption()));
|
|
1981
1981
|
}), this._radio.removeEventListener("focus", this._focusHandler), this._radio.removeEventListener("blur", this._blurHandler), this._radio.removeEventListener("keydown", this._keydownHandler), this._radio.addEventListener("focus", this._focusHandler), this._radio.addEventListener("blur", this._blurHandler), this._radio.addEventListener("keydown", this._keydownHandler));
|
|
1982
1982
|
else {
|
|
1983
|
-
this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "sr-only", this._radio.style.position = "absolute", this._radio.style.width = "1px", this._radio.style.height = "1px", this._radio.style.padding = "0", this._radio.style.margin = "-1px", this._radio.style.overflow = "hidden", this._radio.style.clip = "rect(0, 0, 0, 0)", this._radio.style.whiteSpace = "nowrap", this._radio.style.border = "0", o.appendChild(this._radio), this._changeHandler = (
|
|
1984
|
-
const
|
|
1983
|
+
this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "sr-only", this._radio.style.position = "absolute", this._radio.style.width = "1px", this._radio.style.height = "1px", this._radio.style.padding = "0", this._radio.style.margin = "-1px", this._radio.style.overflow = "hidden", this._radio.style.clip = "rect(0, 0, 0, 0)", this._radio.style.whiteSpace = "nowrap", this._radio.style.border = "0", o.appendChild(this._radio), this._changeHandler = (p) => {
|
|
1984
|
+
const _ = this._checked;
|
|
1985
1985
|
this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
|
|
1986
|
-
const
|
|
1987
|
-
|
|
1988
|
-
|
|
1986
|
+
const b = this.closest("mint-choice");
|
|
1987
|
+
_ !== this._checked && b && setTimeout(() => {
|
|
1988
|
+
b.dispatchEvent(new CustomEvent("choice-change", {
|
|
1989
1989
|
detail: { checked: this._checked, value: this.getValue() },
|
|
1990
1990
|
bubbles: !0,
|
|
1991
1991
|
cancelable: !0
|
|
1992
1992
|
}));
|
|
1993
1993
|
}, 0);
|
|
1994
1994
|
}, this._radio.addEventListener("change", this._changeHandler);
|
|
1995
|
-
const
|
|
1995
|
+
const u = () => {
|
|
1996
1996
|
this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState());
|
|
1997
1997
|
};
|
|
1998
|
-
this._radio.addEventListener("click",
|
|
1999
|
-
const
|
|
2000
|
-
|
|
1998
|
+
this._radio.addEventListener("click", u), this._focusHandler = (p) => {
|
|
1999
|
+
const _ = this.querySelector(".mint-choice-option-wrapper");
|
|
2000
|
+
_ && !this.isDisabled() && _.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
2001
2001
|
}, this._radio.addEventListener("focus", this._focusHandler), this._blurHandler = () => {
|
|
2002
|
-
const
|
|
2003
|
-
|
|
2004
|
-
}, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (
|
|
2005
|
-
this.isDisabled() || (
|
|
2002
|
+
const p = this.querySelector(".mint-choice-option-wrapper");
|
|
2003
|
+
p && p.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
2004
|
+
}, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (p) => {
|
|
2005
|
+
this.isDisabled() || (p.key === "ArrowDown" || p.key === "ArrowRight" ? (p.preventDefault(), this._focusNextOption()) : (p.key === "ArrowUp" || p.key === "ArrowLeft") && (p.preventDefault(), this._focusPreviousOption()));
|
|
2006
2006
|
}, this._radio.addEventListener("keydown", this._keydownHandler);
|
|
2007
2007
|
}
|
|
2008
|
-
this._radio.name =
|
|
2009
|
-
|
|
2008
|
+
this._radio.name = r, this._radio.value = i, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked")) : this._radio.checked = this._checked, this._radio.disabled = t, t ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), n ? this._radio.setAttribute("aria-label", n) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((u, p) => {
|
|
2009
|
+
p > 0 && u.remove();
|
|
2010
2010
|
});
|
|
2011
|
-
let
|
|
2012
|
-
|
|
2013
|
-
let
|
|
2014
|
-
|
|
2015
|
-
var
|
|
2016
|
-
|
|
2017
|
-
})),
|
|
2011
|
+
let m = o.querySelector(".mint-choice-option-indicator");
|
|
2012
|
+
m || (m = document.createElement("div"), m.className = "mint-choice-option-indicator", o.appendChild(m)), m.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", m.style.position = "absolute", m.style.top = "50%", m.style.left = "50%", m.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", m.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
|
|
2013
|
+
let h = this.querySelector(".mint-choice-option-label");
|
|
2014
|
+
n && (h || (h = document.createElement("span"), h.className = "mint-choice-option-label", this.appendChild(h), Array.from(this.childNodes).forEach((u) => {
|
|
2015
|
+
var p;
|
|
2016
|
+
u.nodeType === Node.TEXT_NODE && ((p = u.textContent) != null && p.trim()) && (u.textContent = "");
|
|
2017
|
+
})), h.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, h.textContent = n), t ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
|
|
2018
2018
|
}
|
|
2019
2019
|
_getWrapperClasses() {
|
|
2020
2020
|
const e = this.isDisabled(), t = [
|
|
@@ -2054,13 +2054,13 @@ class Z extends HTMLElement {
|
|
|
2054
2054
|
t || (t = document.createElement("div"), t.className = "mint-choice-option-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
|
|
2055
2055
|
let s = t.querySelector(".mint-choice-option-skeleton-radio");
|
|
2056
2056
|
if (s || (s = document.createElement("div"), s.className = "mint-choice-option-skeleton-radio flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(s)), t.style.display = "flex", i) {
|
|
2057
|
-
const
|
|
2058
|
-
|
|
2057
|
+
const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
|
|
2058
|
+
r && (r.style.visibility = "hidden"), n && (n.style.visibility = "hidden"), i.style.pointerEvents = "none";
|
|
2059
2059
|
}
|
|
2060
2060
|
} else {
|
|
2061
2061
|
if (t && (t.style.display = "none"), i) {
|
|
2062
|
-
const
|
|
2063
|
-
|
|
2062
|
+
const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
|
|
2063
|
+
r && (r.style.visibility = "visible"), n && (n.style.visibility = "visible"), i.style.pointerEvents = "auto";
|
|
2064
2064
|
}
|
|
2065
2065
|
const s = this.querySelector(".mint-choice-option-label");
|
|
2066
2066
|
s && !(i != null && i.contains(s)) && (s.style.visibility = "visible", s.style.pointerEvents = "auto");
|
|
@@ -2082,21 +2082,21 @@ class Z extends HTMLElement {
|
|
|
2082
2082
|
if (!((s = this._radio) != null && s.name)) return;
|
|
2083
2083
|
const e = Array.from(document.querySelectorAll(
|
|
2084
2084
|
`input[type="radio"][name="${this._radio.name}"]`
|
|
2085
|
-
)).filter((
|
|
2085
|
+
)).filter((r) => !r.disabled), t = e.indexOf(this._radio);
|
|
2086
2086
|
let i = null;
|
|
2087
2087
|
if (t >= 0 && t < e.length - 1 ? i = e[t + 1] : e.length > 0 && (i = e[0]), i) {
|
|
2088
|
-
const
|
|
2089
|
-
if (i.checked = !0,
|
|
2090
|
-
const
|
|
2091
|
-
if (
|
|
2088
|
+
const r = i.closest("mint-choice-option");
|
|
2089
|
+
if (i.checked = !0, r) {
|
|
2090
|
+
const n = r._checked;
|
|
2091
|
+
if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
|
|
2092
2092
|
const l = new Event("change", { bubbles: !0 });
|
|
2093
|
-
|
|
2093
|
+
r._changeHandler.call(r, l);
|
|
2094
2094
|
} else
|
|
2095
|
-
|
|
2096
|
-
const a =
|
|
2097
|
-
a && !
|
|
2095
|
+
r._updateVisualState(), r._updateGroupState();
|
|
2096
|
+
const a = r.closest("mint-choice");
|
|
2097
|
+
a && !n && setTimeout(() => {
|
|
2098
2098
|
a.dispatchEvent(new CustomEvent("choice-change", {
|
|
2099
|
-
detail: { checked: !0, value:
|
|
2099
|
+
detail: { checked: !0, value: r.getValue() },
|
|
2100
2100
|
bubbles: !0,
|
|
2101
2101
|
cancelable: !0
|
|
2102
2102
|
}));
|
|
@@ -2110,21 +2110,21 @@ class Z extends HTMLElement {
|
|
|
2110
2110
|
if (!((s = this._radio) != null && s.name)) return;
|
|
2111
2111
|
const e = Array.from(document.querySelectorAll(
|
|
2112
2112
|
`input[type="radio"][name="${this._radio.name}"]`
|
|
2113
|
-
)).filter((
|
|
2113
|
+
)).filter((r) => !r.disabled), t = e.indexOf(this._radio);
|
|
2114
2114
|
let i = null;
|
|
2115
2115
|
if (t > 0 ? i = e[t - 1] : e.length > 0 && (i = e[e.length - 1]), i) {
|
|
2116
|
-
const
|
|
2117
|
-
if (i.checked = !0,
|
|
2118
|
-
const
|
|
2119
|
-
if (
|
|
2116
|
+
const r = i.closest("mint-choice-option");
|
|
2117
|
+
if (i.checked = !0, r) {
|
|
2118
|
+
const n = r._checked;
|
|
2119
|
+
if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
|
|
2120
2120
|
const l = new Event("change", { bubbles: !0 });
|
|
2121
|
-
|
|
2121
|
+
r._changeHandler.call(r, l);
|
|
2122
2122
|
} else
|
|
2123
|
-
|
|
2124
|
-
const a =
|
|
2125
|
-
a && !
|
|
2123
|
+
r._updateVisualState(), r._updateGroupState();
|
|
2124
|
+
const a = r.closest("mint-choice");
|
|
2125
|
+
a && !n && setTimeout(() => {
|
|
2126
2126
|
a.dispatchEvent(new CustomEvent("choice-change", {
|
|
2127
|
-
detail: { checked: !0, value:
|
|
2127
|
+
detail: { checked: !0, value: r.getValue() },
|
|
2128
2128
|
bubbles: !0,
|
|
2129
2129
|
cancelable: !0
|
|
2130
2130
|
}));
|
|
@@ -2151,10 +2151,10 @@ class Q extends HTMLElement {
|
|
|
2151
2151
|
return this.hasAttribute("loading");
|
|
2152
2152
|
}
|
|
2153
2153
|
attributeChangedCallback(e, t, i) {
|
|
2154
|
-
t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : e === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((
|
|
2155
|
-
this.isLoading() ?
|
|
2156
|
-
})) : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((
|
|
2157
|
-
typeof
|
|
2154
|
+
t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : e === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((r) => {
|
|
2155
|
+
this.isLoading() ? r.setAttribute("loading", "") : r.removeAttribute("loading");
|
|
2156
|
+
})) : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((r) => {
|
|
2157
|
+
typeof r.render == "function" && r.render();
|
|
2158
2158
|
})));
|
|
2159
2159
|
}
|
|
2160
2160
|
getLabel() {
|
|
@@ -2189,23 +2189,23 @@ class Q extends HTMLElement {
|
|
|
2189
2189
|
const t = this.querySelectorAll("mint-choice-option");
|
|
2190
2190
|
t.forEach((i) => {
|
|
2191
2191
|
if ((i.getAttribute("value") || "") === e) {
|
|
2192
|
-
const
|
|
2193
|
-
|
|
2194
|
-
const
|
|
2195
|
-
|
|
2192
|
+
const r = i;
|
|
2193
|
+
r.checked = !0;
|
|
2194
|
+
const n = i.querySelector('input[type="radio"]');
|
|
2195
|
+
n && (n.checked = !0, n.dispatchEvent(new Event("change", { bubbles: !0 })));
|
|
2196
2196
|
} else {
|
|
2197
|
-
const
|
|
2198
|
-
|
|
2199
|
-
const
|
|
2200
|
-
|
|
2197
|
+
const r = i;
|
|
2198
|
+
r.checked = !1;
|
|
2199
|
+
const n = i.querySelector('input[type="radio"]');
|
|
2200
|
+
n && (n.checked = !1);
|
|
2201
2201
|
}
|
|
2202
2202
|
}), requestAnimationFrame(() => {
|
|
2203
2203
|
t.forEach((i) => {
|
|
2204
2204
|
typeof i._updateVisualState == "function" && i._updateVisualState();
|
|
2205
2205
|
const s = i.querySelector('input[type="radio"]');
|
|
2206
2206
|
if (s) {
|
|
2207
|
-
const
|
|
2208
|
-
s.checked !==
|
|
2207
|
+
const r = i;
|
|
2208
|
+
s.checked !== r.checked && (s.checked = r.checked);
|
|
2209
2209
|
}
|
|
2210
2210
|
});
|
|
2211
2211
|
});
|
|
@@ -2213,15 +2213,15 @@ class Q extends HTMLElement {
|
|
|
2213
2213
|
render() {
|
|
2214
2214
|
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
|
|
2215
2215
|
this.getId() || this.setAttribute("id", s);
|
|
2216
|
-
const
|
|
2217
|
-
let
|
|
2216
|
+
const r = this.isDisabled();
|
|
2217
|
+
let n = this.querySelector(".mint-choice-label-container");
|
|
2218
2218
|
if (t || i) {
|
|
2219
|
-
|
|
2220
|
-
let o =
|
|
2221
|
-
t ? (o || (o = document.createElement("label"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none",
|
|
2222
|
-
let
|
|
2223
|
-
i ? (
|
|
2224
|
-
} else
|
|
2219
|
+
n || (n = document.createElement("div"), n.className = "mint-choice-label-container flex flex-col gap-0.5 mb-2", this.insertBefore(n, this.firstChild));
|
|
2220
|
+
let o = n.querySelector(".mint-choice-label");
|
|
2221
|
+
t ? (o || (o = document.createElement("label"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.insertBefore(o, n.firstChild)), o.textContent = t, o.setAttribute("for", s), r ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
|
|
2222
|
+
let d = n.querySelector(".mint-choice-info");
|
|
2223
|
+
i ? (d || (d = document.createElement("span"), d.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", n.appendChild(d)), d.textContent = i, r ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove();
|
|
2224
|
+
} else n && n.remove();
|
|
2225
2225
|
let a = this.querySelector(".mint-choice-options-wrapper");
|
|
2226
2226
|
if (!a) {
|
|
2227
2227
|
a = document.createElement("div"), a.className = "mint-choice-options-wrapper relative";
|
|
@@ -2239,7 +2239,7 @@ class Q extends HTMLElement {
|
|
|
2239
2239
|
const i = this.querySelector(".mint-choice-options-wrapper"), s = this.querySelector(".mint-choice-options-container");
|
|
2240
2240
|
if (e) {
|
|
2241
2241
|
if (t || (t = document.createElement("div"), t.className = "mint-choice-skeleton-container absolute inset-0 z-10 pointer-events-none flex flex-col gap-3", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t))), t.querySelectorAll(".mint-choice-option-skeleton").length === 0)
|
|
2242
|
-
for (let
|
|
2242
|
+
for (let n = 0; n < 3; n++) {
|
|
2243
2243
|
const a = document.createElement("div");
|
|
2244
2244
|
a.className = "mint-choice-option-skeleton flex items-center gap-3";
|
|
2245
2245
|
const l = document.createElement("div");
|
|
@@ -2351,7 +2351,7 @@ class ee extends HTMLElement {
|
|
|
2351
2351
|
return this.getAttribute("info") || "";
|
|
2352
2352
|
}
|
|
2353
2353
|
getInputClasses() {
|
|
2354
|
-
const e = this._isTextarea(), t = !!this.getIcon(), i = this._isColor(), s = this._isNumber(),
|
|
2354
|
+
const e = this._isTextarea(), t = !!this.getIcon(), i = this._isColor(), s = this._isNumber(), r = this.hasError(), n = [
|
|
2355
2355
|
"w-full",
|
|
2356
2356
|
t || i ? "pl-10" : "px-3.5",
|
|
2357
2357
|
t || i ? "pr-3.5" : s ? "pr-10" : "",
|
|
@@ -2378,120 +2378,120 @@ class ee extends HTMLElement {
|
|
|
2378
2378
|
s ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
|
|
2379
2379
|
], a = [
|
|
2380
2380
|
"border-2",
|
|
2381
|
-
|
|
2381
|
+
r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
|
|
2382
2382
|
], l = [
|
|
2383
2383
|
"focus-visible:ring-2",
|
|
2384
2384
|
"focus-visible:ring-offset-1",
|
|
2385
|
-
|
|
2385
|
+
r ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
|
|
2386
2386
|
];
|
|
2387
|
-
return [...
|
|
2387
|
+
return [...n, ...a, ...l].filter(Boolean).join(" ");
|
|
2388
2388
|
}
|
|
2389
2389
|
isLoading() {
|
|
2390
2390
|
return this.hasAttribute("loading");
|
|
2391
2391
|
}
|
|
2392
2392
|
render() {
|
|
2393
|
-
var
|
|
2393
|
+
var y, x, k, E;
|
|
2394
2394
|
this.getType();
|
|
2395
|
-
const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(),
|
|
2396
|
-
if (this._renderSkeleton(
|
|
2397
|
-
this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = c || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (
|
|
2395
|
+
const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), d = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), m = this.getRows(), h = this.getIcon(), f = this.getLabel(), u = this.getInfo(), p = this.isLoading();
|
|
2396
|
+
if (this._renderSkeleton(p), s) {
|
|
2397
|
+
this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = c || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (v) => {
|
|
2398
2398
|
this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
|
|
2399
|
-
var
|
|
2400
|
-
this._colorPicker && this._colorPicker.matches(":focus-visible") && ((
|
|
2399
|
+
var C;
|
|
2400
|
+
this._colorPicker && this._colorPicker.matches(":focus-visible") && ((C = this._colorPickerWrapper) == null || C.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
|
|
2401
2401
|
});
|
|
2402
2402
|
}, this._blurHandler = () => {
|
|
2403
2403
|
this._colorPickerWrapper && this._colorPickerWrapper.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
|
|
2404
2404
|
}, this._colorPicker.addEventListener("focus", this._focusHandler), this._colorPicker.addEventListener("blur", this._blurHandler), this._colorPicker.addEventListener("input", () => {
|
|
2405
|
-
var
|
|
2406
|
-
const
|
|
2407
|
-
this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor =
|
|
2408
|
-
detail: { value:
|
|
2405
|
+
var C;
|
|
2406
|
+
const v = ((C = this._colorPicker) == null ? void 0 : C.value) || "#000000";
|
|
2407
|
+
this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = v), this._colorTextInput && (this._colorTextInput.value = v), this.setAttribute("value", v), this.dispatchEvent(new CustomEvent("input", {
|
|
2408
|
+
detail: { value: v },
|
|
2409
2409
|
bubbles: !0,
|
|
2410
2410
|
cancelable: !0
|
|
2411
2411
|
}));
|
|
2412
2412
|
}), this._colorPicker.addEventListener("change", () => {
|
|
2413
|
-
var
|
|
2414
|
-
const
|
|
2415
|
-
this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor =
|
|
2416
|
-
detail: { value:
|
|
2413
|
+
var C;
|
|
2414
|
+
const v = ((C = this._colorPicker) == null ? void 0 : C.value) || "#000000";
|
|
2415
|
+
this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = v), this.setAttribute("value", v), this.dispatchEvent(new CustomEvent("change", {
|
|
2416
|
+
detail: { value: v },
|
|
2417
2417
|
bubbles: !0,
|
|
2418
2418
|
cancelable: !0
|
|
2419
2419
|
}));
|
|
2420
|
-
})), this._colorTextInput || (this._colorTextInput = document.createElement("input"), this._colorTextInput.type = "text", this._colorTextInput.className = this.getInputClasses(), this._colorTextInput.placeholder =
|
|
2421
|
-
var
|
|
2422
|
-
const
|
|
2423
|
-
/^#[0-9A-Fa-f]{6}$/.test(
|
|
2424
|
-
detail: { value:
|
|
2420
|
+
})), this._colorTextInput || (this._colorTextInput = document.createElement("input"), this._colorTextInput.type = "text", this._colorTextInput.className = this.getInputClasses(), this._colorTextInput.placeholder = r || "#000000", this._colorTextInput.pattern = "^#[0-9A-Fa-f]{6}$", this._wrapper.appendChild(this._colorTextInput), this._colorTextInput.addEventListener("input", () => {
|
|
2421
|
+
var C;
|
|
2422
|
+
const v = ((C = this._colorTextInput) == null ? void 0 : C.value) || "";
|
|
2423
|
+
/^#[0-9A-Fa-f]{6}$/.test(v) && (this._colorPicker && (this._colorPicker.value = v), this.setAttribute("value", v), this.dispatchEvent(new CustomEvent("input", {
|
|
2424
|
+
detail: { value: v },
|
|
2425
2425
|
bubbles: !0,
|
|
2426
2426
|
cancelable: !0
|
|
2427
2427
|
})));
|
|
2428
2428
|
}), this._colorTextInput.addEventListener("blur", () => {
|
|
2429
|
-
var
|
|
2430
|
-
const
|
|
2431
|
-
/^#[0-9A-Fa-f]{6}$/.test(
|
|
2432
|
-
detail: { value: ((
|
|
2429
|
+
var C, A;
|
|
2430
|
+
const v = ((C = this._colorTextInput) == null ? void 0 : C.value) || "";
|
|
2431
|
+
/^#[0-9A-Fa-f]{6}$/.test(v) ? (this._colorPicker && (this._colorPicker.value = v), this.setAttribute("value", v)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
|
|
2432
|
+
detail: { value: ((A = this._colorPicker) == null ? void 0 : A.value) || "#000000" },
|
|
2433
2433
|
bubbles: !0,
|
|
2434
2434
|
cancelable: !0
|
|
2435
2435
|
}));
|
|
2436
2436
|
}));
|
|
2437
|
-
const
|
|
2438
|
-
if (this._colorPicker && this._colorPicker.value !==
|
|
2439
|
-
const
|
|
2440
|
-
o ?
|
|
2437
|
+
const g = c || "#000000";
|
|
2438
|
+
if (this._colorPicker && this._colorPicker.value !== g && (this._colorPicker.value = g), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this._colorTextInput && this._colorTextInput.value !== g && (this._colorTextInput.value = g), this._colorPicker && (this._colorPicker.disabled = n), this._colorPickerWrapper && (n ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = n, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
|
|
2439
|
+
const v = this._colorTextInput;
|
|
2440
|
+
o ? v.id = o : v.removeAttribute("id"), d ? v.name = d : v.removeAttribute("name"), v.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = v;
|
|
2441
2441
|
}
|
|
2442
2442
|
this._renderErrorState();
|
|
2443
2443
|
return;
|
|
2444
2444
|
}
|
|
2445
|
-
if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null),
|
|
2445
|
+
if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), h && !t ? this._icon ? this._icon.setAttribute("name", h) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", h), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon && (this._icon.remove(), this._icon = null), this._isNumber() && !t) {
|
|
2446
2446
|
if (!this._numberSpinnerContainer) {
|
|
2447
2447
|
this._numberSpinnerContainer = document.createElement("div"), this._numberSpinnerContainer.className = "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col h-8 pointer-events-none", this._wrapper.appendChild(this._numberSpinnerContainer), this._numberIncrementButton = document.createElement("button"), this._numberIncrementButton.type = "button", this._numberIncrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors pointer-events-auto bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 rounded";
|
|
2448
|
-
const b = document.createElement("mint-icon");
|
|
2449
|
-
b.setAttribute("name", "caret-up"), b.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(b), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors pointer-events-auto bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 rounded";
|
|
2450
2448
|
const g = document.createElement("mint-icon");
|
|
2451
|
-
g.setAttribute("name", "caret-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2449
|
+
g.setAttribute("name", "caret-up"), g.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(g), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors pointer-events-auto bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 rounded";
|
|
2450
|
+
const v = document.createElement("mint-icon");
|
|
2451
|
+
v.setAttribute("name", "caret-down"), v.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(v), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (C) => {
|
|
2452
|
+
if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
|
|
2453
|
+
const A = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
|
|
2454
|
+
let L = A + T;
|
|
2455
2455
|
H !== void 0 && L > H && (L = H), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
2456
2456
|
}
|
|
2457
|
-
}), this._numberDecrementButton.addEventListener("click", (
|
|
2458
|
-
if (
|
|
2459
|
-
const
|
|
2460
|
-
let L =
|
|
2457
|
+
}), this._numberDecrementButton.addEventListener("click", (C) => {
|
|
2458
|
+
if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
|
|
2459
|
+
const A = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
|
|
2460
|
+
let L = A - T;
|
|
2461
2461
|
S !== void 0 && L < S && (L = S), H !== void 0 && L > H && (L = H), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
2462
2462
|
}
|
|
2463
2463
|
});
|
|
2464
2464
|
}
|
|
2465
|
-
this._numberIncrementButton && (this._numberIncrementButton.disabled =
|
|
2465
|
+
this._numberIncrementButton && (this._numberIncrementButton.disabled = n || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = n || a);
|
|
2466
2466
|
} else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
|
|
2467
2467
|
if (t) {
|
|
2468
|
-
if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder =
|
|
2469
|
-
const
|
|
2470
|
-
|
|
2468
|
+
if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = r, this._textarea.disabled = n, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = m, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), c !== this._textarea.value && (this._textarea.value = c), o ? this._textarea.id = o : this._textarea.removeAttribute("id"), d ? this._textarea.name = d : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
|
|
2469
|
+
const g = this.firstChild.textContent;
|
|
2470
|
+
g && !this._textarea.value && (this._textarea.value = g.trim()), this.removeChild(this.firstChild);
|
|
2471
2471
|
}
|
|
2472
|
-
} else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = e, this._input.placeholder =
|
|
2473
|
-
const
|
|
2474
|
-
|
|
2472
|
+
} else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = e, this._input.placeholder = r, this._input.disabled = n, this._input.readOnly = a, this._input.required = l, this._input.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), i ? (this._input.inputMode = "decimal", this._input.pattern = "[0-9]*\\.?[0-9]*") : (this._input.removeAttribute("inputmode"), this._input.removeAttribute("pattern")), c !== this._input.value && (this._input.value = c), o ? this._input.id = o : this._input.removeAttribute("id"), d ? this._input.name = d : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
|
|
2473
|
+
const g = this.firstChild.textContent;
|
|
2474
|
+
g && !this._input.value && (this._input.value = g.trim()), this.removeChild(this.firstChild);
|
|
2475
2475
|
}
|
|
2476
|
-
let
|
|
2477
|
-
if (f ||
|
|
2478
|
-
|
|
2479
|
-
let
|
|
2476
|
+
let b = this.querySelector(".mint-input-label-container");
|
|
2477
|
+
if (f || u) {
|
|
2478
|
+
b || (b = document.createElement("div"), b.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(b, this._wrapper) : this.insertBefore(b, this.firstChild));
|
|
2479
|
+
let g = b.querySelector(".mint-input-label");
|
|
2480
2480
|
if (f) {
|
|
2481
|
-
|
|
2482
|
-
const
|
|
2483
|
-
if (
|
|
2484
|
-
|
|
2481
|
+
g || (g = document.createElement("label"), g.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", b.insertBefore(g, b.firstChild)), g.textContent = f;
|
|
2482
|
+
const C = o || ((y = this._element) == null ? void 0 : y.id) || ((x = this._colorTextInput) == null ? void 0 : x.id) || ((k = this._input) == null ? void 0 : k.id) || ((E = this._textarea) == null ? void 0 : E.id);
|
|
2483
|
+
if (C)
|
|
2484
|
+
g.setAttribute("for", C);
|
|
2485
2485
|
else {
|
|
2486
|
-
const
|
|
2487
|
-
this._element ? this._element.id =
|
|
2486
|
+
const A = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
|
|
2487
|
+
this._element ? this._element.id = A : this._colorTextInput ? this._colorTextInput.id = A : this._input ? this._input.id = A : this._textarea && (this._textarea.id = A), g.setAttribute("for", A);
|
|
2488
2488
|
}
|
|
2489
|
-
|
|
2490
|
-
} else
|
|
2491
|
-
let
|
|
2492
|
-
|
|
2493
|
-
} else
|
|
2494
|
-
this._renderErrorState(), this._renderSkeleton(
|
|
2489
|
+
n ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
|
|
2490
|
+
} else g && g.remove();
|
|
2491
|
+
let v = b.querySelector(".mint-input-info");
|
|
2492
|
+
u ? (v || (v = document.createElement("span"), v.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", b.appendChild(v)), v.textContent = u, n ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
|
|
2493
|
+
} else b && b.remove();
|
|
2494
|
+
this._renderErrorState(), this._renderSkeleton(p);
|
|
2495
2495
|
}
|
|
2496
2496
|
_renderErrorState() {
|
|
2497
2497
|
const e = this.hasError(), t = this.getErrorMessage();
|
|
@@ -2536,9 +2536,9 @@ class ee extends HTMLElement {
|
|
|
2536
2536
|
let s = t.querySelector(".mint-input-skeleton");
|
|
2537
2537
|
if (!s) {
|
|
2538
2538
|
s = document.createElement("div"), s.className = "mint-input-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
|
|
2539
|
-
const
|
|
2540
|
-
if (
|
|
2541
|
-
const a =
|
|
2539
|
+
const r = this._isTextarea(), n = this.getRows();
|
|
2540
|
+
if (r) {
|
|
2541
|
+
const a = n * 24 + 12;
|
|
2542
2542
|
s.style.height = `${a}px`;
|
|
2543
2543
|
} else
|
|
2544
2544
|
s.style.height = "2.2rem";
|
|
@@ -2572,8 +2572,8 @@ class te extends HTMLElement {
|
|
|
2572
2572
|
attributeChangedCallback(e, t, i) {
|
|
2573
2573
|
if (t !== i) {
|
|
2574
2574
|
if (e === "error" || e === "error-message") {
|
|
2575
|
-
const s = this.hasError(),
|
|
2576
|
-
this._applyErrorVisuals(s,
|
|
2575
|
+
const s = this.hasError(), r = this.getErrorMessage();
|
|
2576
|
+
this._applyErrorVisuals(s, r, this.isDisabled());
|
|
2577
2577
|
return;
|
|
2578
2578
|
}
|
|
2579
2579
|
if (e === "loading") {
|
|
@@ -2647,9 +2647,9 @@ class te extends HTMLElement {
|
|
|
2647
2647
|
if (i && typeof window[i] == "function") {
|
|
2648
2648
|
const s = window[i]();
|
|
2649
2649
|
if (Array.isArray(s))
|
|
2650
|
-
return s.map((
|
|
2651
|
-
label:
|
|
2652
|
-
action: typeof
|
|
2650
|
+
return s.map((r) => ({
|
|
2651
|
+
label: r.label,
|
|
2652
|
+
action: typeof r.action == "function" ? r.action : this._createShortcutAction(r.action)
|
|
2653
2653
|
}));
|
|
2654
2654
|
}
|
|
2655
2655
|
}
|
|
@@ -2671,8 +2671,8 @@ class te extends HTMLElement {
|
|
|
2671
2671
|
action: () => {
|
|
2672
2672
|
const t = /* @__PURE__ */ new Date(), i = t.getDay(), s = new Date(t);
|
|
2673
2673
|
s.setDate(t.getDate() - i), s.setHours(0, 0, 0, 0);
|
|
2674
|
-
const
|
|
2675
|
-
return
|
|
2674
|
+
const r = new Date(s);
|
|
2675
|
+
return r.setDate(s.getDate() + 6), r.setHours(23, 59, 59, 999), { start: s, end: r };
|
|
2676
2676
|
}
|
|
2677
2677
|
},
|
|
2678
2678
|
{
|
|
@@ -2689,28 +2689,28 @@ class te extends HTMLElement {
|
|
|
2689
2689
|
let i = 0;
|
|
2690
2690
|
const s = e.toLowerCase();
|
|
2691
2691
|
for (; i < s.length; ) {
|
|
2692
|
-
const
|
|
2693
|
-
if (
|
|
2694
|
-
let
|
|
2695
|
-
for (; a < s.length && s[a] ===
|
|
2696
|
-
|
|
2697
|
-
t.push({ type: "part", part:
|
|
2692
|
+
const r = s[i];
|
|
2693
|
+
if (r === "d" || r === "m" || r === "y") {
|
|
2694
|
+
let n = 1, a = i + 1;
|
|
2695
|
+
for (; a < s.length && s[a] === r; )
|
|
2696
|
+
n++, a++;
|
|
2697
|
+
t.push({ type: "part", part: r, len: n }), i = a;
|
|
2698
2698
|
} else
|
|
2699
2699
|
t.push({ type: "sep", value: e[i] }), i++;
|
|
2700
2700
|
}
|
|
2701
2701
|
return t;
|
|
2702
2702
|
}
|
|
2703
|
-
_createPartInput(e, t, i, s,
|
|
2704
|
-
const
|
|
2705
|
-
return
|
|
2703
|
+
_createPartInput(e, t, i, s, r) {
|
|
2704
|
+
const n = document.createElement("input");
|
|
2705
|
+
return n.type = "text", n.inputMode = "numeric", n.pattern = "\\d*", n.maxLength = e, n.placeholder = t, n.className = "bg-transparent border-none outline-none text-center text-sm font-medium p-0 m-0 focus:outline-none focus:ring-0 disabled:opacity-40 disabled:cursor-not-allowed", n.disabled = i || s, n.readOnly = s, n.required = r, e === 4 ? n.className += " w-[40px]" : e === 2 && (n.className += " w-[30px]"), n;
|
|
2706
2706
|
}
|
|
2707
2707
|
_buildValueFromParts(e, t) {
|
|
2708
2708
|
let i = 0;
|
|
2709
2709
|
return t.map((s) => {
|
|
2710
|
-
var
|
|
2710
|
+
var n;
|
|
2711
2711
|
if (s.type === "sep") return s.value;
|
|
2712
|
-
const
|
|
2713
|
-
return i++,
|
|
2712
|
+
const r = ((n = e[i]) == null ? void 0 : n.value) || "";
|
|
2713
|
+
return i++, r;
|
|
2714
2714
|
}).join("");
|
|
2715
2715
|
}
|
|
2716
2716
|
_applyDateToParts(e, t, i, s) {
|
|
@@ -2719,14 +2719,14 @@ class te extends HTMLElement {
|
|
|
2719
2719
|
t.forEach((l) => l.value = "");
|
|
2720
2720
|
return;
|
|
2721
2721
|
}
|
|
2722
|
-
const
|
|
2723
|
-
let
|
|
2722
|
+
const r = this._formatDate(e, s);
|
|
2723
|
+
let n = 0, a = 0;
|
|
2724
2724
|
i.forEach((l) => {
|
|
2725
2725
|
if (l.type === "sep")
|
|
2726
|
-
|
|
2726
|
+
n += l.value.length;
|
|
2727
2727
|
else {
|
|
2728
|
-
const o =
|
|
2729
|
-
t[a] && (t[a].value = o), a++,
|
|
2728
|
+
const o = r.substr(n, l.len);
|
|
2729
|
+
t[a] && (t[a].value = o), a++, n += l.len;
|
|
2730
2730
|
}
|
|
2731
2731
|
});
|
|
2732
2732
|
}
|
|
@@ -2752,24 +2752,24 @@ class te extends HTMLElement {
|
|
|
2752
2752
|
}
|
|
2753
2753
|
}
|
|
2754
2754
|
_attachPartInputHandlers(e, t, i) {
|
|
2755
|
-
e.forEach((s,
|
|
2756
|
-
const
|
|
2755
|
+
e.forEach((s, r) => {
|
|
2756
|
+
const n = s.maxLength || 2;
|
|
2757
2757
|
s.addEventListener("input", () => {
|
|
2758
|
-
s.value = s.value.replace(/\D/g, "").slice(0,
|
|
2758
|
+
s.value = s.value.replace(/\D/g, "").slice(0, n), s.value.length >= n && this._focusNext(e, r), this._syncHiddenInput();
|
|
2759
2759
|
}), s.addEventListener("keydown", (a) => {
|
|
2760
|
-
a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e,
|
|
2760
|
+
a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e, r), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(e, r), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(e, r), a.preventDefault());
|
|
2761
2761
|
}), s.addEventListener("blur", (a) => {
|
|
2762
|
-
var
|
|
2762
|
+
var d, c;
|
|
2763
2763
|
this._syncHiddenInput();
|
|
2764
2764
|
const l = a.relatedTarget;
|
|
2765
|
-
l && (this.contains(l) || (
|
|
2765
|
+
l && (this.contains(l) || (d = this._popover) != null && d.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((c = this._hiddenInput) == null ? void 0 : c.value) || ""), this._exitInputMode(), setTimeout(() => {
|
|
2766
2766
|
if (this._hiddenInput) {
|
|
2767
|
-
const
|
|
2767
|
+
const m = new FocusEvent("blur", {
|
|
2768
2768
|
bubbles: !0,
|
|
2769
2769
|
cancelable: !0,
|
|
2770
2770
|
relatedTarget: a.relatedTarget
|
|
2771
2771
|
});
|
|
2772
|
-
this._hiddenInput.dispatchEvent(
|
|
2772
|
+
this._hiddenInput.dispatchEvent(m);
|
|
2773
2773
|
}
|
|
2774
2774
|
}, 0));
|
|
2775
2775
|
});
|
|
@@ -2782,11 +2782,11 @@ class te extends HTMLElement {
|
|
|
2782
2782
|
_parseValue(e) {
|
|
2783
2783
|
const t = this.getFormat(), i = this._getFormatTokens(t);
|
|
2784
2784
|
if (this._isRange) {
|
|
2785
|
-
const [s,
|
|
2786
|
-
if (
|
|
2787
|
-
const [l, o] =
|
|
2785
|
+
const [s, r] = this._splitRangeInput(e, t), n = s ? this._parseDateString(s, t) : null, a = r ? this._parseDateString(r, t) : null;
|
|
2786
|
+
if (n && a) {
|
|
2787
|
+
const [l, o] = n <= a ? [n, a] : [a, n];
|
|
2788
2788
|
this._selectedStartDate = l, this._selectedEndDate = o, this._currentMonth = l.getMonth(), this._currentYear = l.getFullYear();
|
|
2789
|
-
} else
|
|
2789
|
+
} else n && (this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear());
|
|
2790
2790
|
this._applyDateToParts(this._selectedStartDate, this._startPartInputs, i, t), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, i, t);
|
|
2791
2791
|
} else {
|
|
2792
2792
|
const s = this._parseDateString(e, t);
|
|
@@ -2797,172 +2797,172 @@ class te extends HTMLElement {
|
|
|
2797
2797
|
_parseDateString(e, t) {
|
|
2798
2798
|
const i = /[\/\-\.\s]+/;
|
|
2799
2799
|
if (i.test(e)) {
|
|
2800
|
-
const
|
|
2801
|
-
if (
|
|
2802
|
-
let
|
|
2803
|
-
for (let
|
|
2804
|
-
const
|
|
2805
|
-
if (
|
|
2806
|
-
|
|
2807
|
-
else if (
|
|
2808
|
-
|
|
2809
|
-
else if (
|
|
2810
|
-
let
|
|
2811
|
-
const
|
|
2812
|
-
|
|
2800
|
+
const p = e.split(i).filter((b) => b.length > 0), _ = t.split(/[\/\-\.\s]+/).filter((b) => b.length > 0);
|
|
2801
|
+
if (p.length === _.length) {
|
|
2802
|
+
let b = 0, y = 0, x = 0;
|
|
2803
|
+
for (let k = 0; k < _.length; k++) {
|
|
2804
|
+
const E = _[k].toLowerCase(), g = p[k];
|
|
2805
|
+
if (E.includes("d"))
|
|
2806
|
+
b = parseInt(g, 10);
|
|
2807
|
+
else if (E.includes("m"))
|
|
2808
|
+
y = parseInt(g, 10) - 1;
|
|
2809
|
+
else if (E.includes("y")) {
|
|
2810
|
+
let v = parseInt(g, 10);
|
|
2811
|
+
const C = E.length, A = g.length;
|
|
2812
|
+
A === 2 && C === 4 ? v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v : A === 2 && C === 2 && (v = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + v), x = v;
|
|
2813
2813
|
}
|
|
2814
2814
|
}
|
|
2815
|
-
if (
|
|
2816
|
-
const
|
|
2817
|
-
if (!isNaN(
|
|
2818
|
-
return
|
|
2815
|
+
if (b && y >= 0 && y <= 11 && x) {
|
|
2816
|
+
const k = new Date(x, y, b);
|
|
2817
|
+
if (!isNaN(k.getTime()) && k.getDate() === b && k.getMonth() === y && k.getFullYear() === x)
|
|
2818
|
+
return k;
|
|
2819
2819
|
}
|
|
2820
2820
|
}
|
|
2821
2821
|
}
|
|
2822
|
-
const
|
|
2823
|
-
let a =
|
|
2824
|
-
const
|
|
2822
|
+
const r = e.replace(/[\/\-\.]/g, ""), n = t.replace(/[\/\-\.]/g, "").toLowerCase();
|
|
2823
|
+
let a = n.indexOf("d"), l = n.indexOf("m"), o = n.indexOf("y");
|
|
2824
|
+
const d = [
|
|
2825
2825
|
{ char: "d", index: a },
|
|
2826
2826
|
{ char: "m", index: l },
|
|
2827
2827
|
{ char: "y", index: o }
|
|
2828
|
-
].sort((
|
|
2829
|
-
let c = 0,
|
|
2830
|
-
|
|
2831
|
-
for (const
|
|
2832
|
-
if (
|
|
2833
|
-
const
|
|
2834
|
-
if (
|
|
2835
|
-
c = parseInt(
|
|
2836
|
-
} else if (
|
|
2837
|
-
const
|
|
2838
|
-
if (
|
|
2839
|
-
|
|
2840
|
-
} else if (
|
|
2841
|
-
const
|
|
2842
|
-
if (
|
|
2843
|
-
let
|
|
2844
|
-
|
|
2828
|
+
].sort((p, _) => p.index - _.index);
|
|
2829
|
+
let c = 0, m = 0, h = 0, f = 0;
|
|
2830
|
+
n.length, r.length;
|
|
2831
|
+
for (const p of d)
|
|
2832
|
+
if (p.char === "d") {
|
|
2833
|
+
const _ = n.lastIndexOf("d") - n.indexOf("d") + 1, b = r.substr(f, _);
|
|
2834
|
+
if (b.length === 0) return null;
|
|
2835
|
+
c = parseInt(b, 10), f += b.length;
|
|
2836
|
+
} else if (p.char === "m") {
|
|
2837
|
+
const _ = n.lastIndexOf("m") - n.indexOf("m") + 1, b = r.substr(f, _);
|
|
2838
|
+
if (b.length === 0) return null;
|
|
2839
|
+
m = parseInt(b, 10) - 1, f += b.length;
|
|
2840
|
+
} else if (p.char === "y") {
|
|
2841
|
+
const _ = n.lastIndexOf("y") - n.indexOf("y") + 1, b = r.substr(f), y = Math.min(_, b.length), x = b.substr(0, y);
|
|
2842
|
+
if (x.length === 0) return null;
|
|
2843
|
+
let k = parseInt(x, 10);
|
|
2844
|
+
y === 2 && _ === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : y === 2 && _ === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), h = k, f += y;
|
|
2845
2845
|
}
|
|
2846
|
-
if (!c ||
|
|
2847
|
-
const
|
|
2848
|
-
return isNaN(
|
|
2846
|
+
if (!c || m < 0 || m > 11 || !h) return null;
|
|
2847
|
+
const u = new Date(h, m, c);
|
|
2848
|
+
return isNaN(u.getTime()) || u.getDate() !== c || u.getMonth() !== m || u.getFullYear() !== h ? null : u;
|
|
2849
2849
|
}
|
|
2850
2850
|
_formatDate(e, t) {
|
|
2851
|
-
const i = e.getDate(), s = e.getMonth() + 1,
|
|
2851
|
+
const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = t.toLowerCase();
|
|
2852
2852
|
let a = t;
|
|
2853
|
-
return
|
|
2853
|
+
return n.includes("dd") ? a = a.replace(/dd/gi, String(i).padStart(2, "0")) : n.includes("d") && (a = a.replace(/d/gi, String(i))), n.includes("mm") ? a = a.replace(/mm/gi, String(s).padStart(2, "0")) : n.includes("m") && (a = a.replace(/m/gi, String(s))), n.includes("yyyy") ? a = a.replace(/yyyy/gi, String(r)) : n.includes("yy") && (a = a.replace(/yy/gi, String(r).substr(2))), a;
|
|
2854
2854
|
}
|
|
2855
2855
|
// PHP-style formatter for display mode
|
|
2856
2856
|
_formatDatePhp(e, t) {
|
|
2857
|
-
const i = e.getDate(), s = e.getMonth() + 1,
|
|
2858
|
-
const f =
|
|
2859
|
-
return f === 1 &&
|
|
2857
|
+
const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], l = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], o = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], d = (h, f = 2) => h.toString().padStart(f, "0"), c = (h) => {
|
|
2858
|
+
const f = h % 10, u = h % 100;
|
|
2859
|
+
return f === 1 && u !== 11 ? "st" : f === 2 && u !== 12 ? "nd" : f === 3 && u !== 13 ? "rd" : "th";
|
|
2860
2860
|
};
|
|
2861
|
-
let
|
|
2862
|
-
for (let
|
|
2863
|
-
const f = t[
|
|
2864
|
-
if (f === "\\" &&
|
|
2865
|
-
|
|
2861
|
+
let m = "";
|
|
2862
|
+
for (let h = 0; h < t.length; h++) {
|
|
2863
|
+
const f = t[h];
|
|
2864
|
+
if (f === "\\" && h + 1 < t.length) {
|
|
2865
|
+
m += t[h + 1], h++;
|
|
2866
2866
|
continue;
|
|
2867
2867
|
}
|
|
2868
2868
|
switch (f) {
|
|
2869
2869
|
case "Y":
|
|
2870
|
-
|
|
2870
|
+
m += r.toString();
|
|
2871
2871
|
break;
|
|
2872
2872
|
case "y":
|
|
2873
|
-
|
|
2873
|
+
m += r.toString().slice(-2);
|
|
2874
2874
|
break;
|
|
2875
2875
|
case "m":
|
|
2876
|
-
|
|
2876
|
+
m += d(s);
|
|
2877
2877
|
break;
|
|
2878
2878
|
case "n":
|
|
2879
|
-
|
|
2879
|
+
m += s.toString();
|
|
2880
2880
|
break;
|
|
2881
2881
|
case "M":
|
|
2882
|
-
|
|
2882
|
+
m += o[s - 1];
|
|
2883
2883
|
break;
|
|
2884
2884
|
case "F":
|
|
2885
|
-
|
|
2885
|
+
m += l[s - 1];
|
|
2886
2886
|
break;
|
|
2887
2887
|
case "d":
|
|
2888
|
-
|
|
2888
|
+
m += d(i);
|
|
2889
2889
|
break;
|
|
2890
2890
|
case "j":
|
|
2891
|
-
|
|
2891
|
+
m += i.toString();
|
|
2892
2892
|
break;
|
|
2893
2893
|
case "D":
|
|
2894
|
-
|
|
2894
|
+
m += a[e.getDay()];
|
|
2895
2895
|
break;
|
|
2896
2896
|
case "l":
|
|
2897
|
-
|
|
2897
|
+
m += n[e.getDay()];
|
|
2898
2898
|
break;
|
|
2899
2899
|
case "S":
|
|
2900
|
-
|
|
2900
|
+
m += c(i);
|
|
2901
2901
|
break;
|
|
2902
2902
|
default:
|
|
2903
|
-
|
|
2903
|
+
m += f;
|
|
2904
2904
|
break;
|
|
2905
2905
|
}
|
|
2906
2906
|
}
|
|
2907
|
-
return
|
|
2907
|
+
return m;
|
|
2908
2908
|
}
|
|
2909
2909
|
_validateDateString(e, t) {
|
|
2910
2910
|
const i = this._parseDateString(e, t);
|
|
2911
2911
|
return i !== null && !isNaN(i.getTime());
|
|
2912
2912
|
}
|
|
2913
2913
|
render() {
|
|
2914
|
-
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(),
|
|
2914
|
+
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), r = this.isDisabled(), n = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), d = this.getFormat(), c = this.hasError(), m = this.getErrorMessage();
|
|
2915
2915
|
this._isRange = this.isRange(), this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
|
|
2916
|
-
let
|
|
2916
|
+
let h = this.querySelector(".mint-date-picker-label-container");
|
|
2917
2917
|
if (t || i) {
|
|
2918
|
-
|
|
2919
|
-
let
|
|
2920
|
-
t ? (
|
|
2921
|
-
let
|
|
2922
|
-
i ? (
|
|
2923
|
-
} else
|
|
2918
|
+
h || (h = document.createElement("div"), h.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(h, this._input) : this.appendChild(h));
|
|
2919
|
+
let y = h.querySelector(".mint-date-picker-label");
|
|
2920
|
+
t ? (y || (y = document.createElement("label"), y.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", h.insertBefore(y, h.firstChild)), y.textContent = t, l && this._textInput && y.setAttribute("for", l)) : y && y.remove();
|
|
2921
|
+
let x = h.querySelector(".mint-date-picker-info");
|
|
2922
|
+
i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", h.appendChild(x)), x.textContent = i) : x && x.remove();
|
|
2923
|
+
} else h && h.remove();
|
|
2924
2924
|
this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), l && (this._hiddenInput.id = l), o && (this._hiddenInput.name = o), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", c ? "true" : "false");
|
|
2925
2925
|
let f = this._input.querySelector(".mint-date-fields");
|
|
2926
|
-
f || (f = document.createElement("div"), this._input.appendChild(f)), this._fieldsContainer = f, this._applyErrorVisuals(c,
|
|
2927
|
-
const
|
|
2928
|
-
this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${
|
|
2929
|
-
|
|
2930
|
-
}), this._displayEl.addEventListener("keydown", (
|
|
2931
|
-
|
|
2926
|
+
f || (f = document.createElement("div"), this._input.appendChild(f)), this._fieldsContainer = f, this._applyErrorVisuals(c, m, r), f.innerHTML = "", this._displayEl = document.createElement("div");
|
|
2927
|
+
const u = n ? "select-text" : "select-none";
|
|
2928
|
+
this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${n ? "cursor-default" : "cursor-text"} ${u} focus:outline-none`, this._displayEl.tabIndex = r || n ? -1 : 0, this._displayEl.addEventListener("click", () => {
|
|
2929
|
+
r || n || this._enterInputMode();
|
|
2930
|
+
}), this._displayEl.addEventListener("keydown", (y) => {
|
|
2931
|
+
r || n || (y.key === "Enter" || y.key === " ") && (y.preventDefault(), this._enterInputMode());
|
|
2932
2932
|
}), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
|
|
2933
|
-
const
|
|
2933
|
+
const p = this._getFormatTokens(d);
|
|
2934
2934
|
this._startPartInputs = [], this._endPartInputs = [];
|
|
2935
|
-
const
|
|
2936
|
-
const
|
|
2937
|
-
return
|
|
2938
|
-
if (
|
|
2939
|
-
const
|
|
2940
|
-
|
|
2935
|
+
const _ = (y) => {
|
|
2936
|
+
const x = document.createDocumentFragment();
|
|
2937
|
+
return p.forEach((k) => {
|
|
2938
|
+
if (k.type === "sep") {
|
|
2939
|
+
const E = document.createElement("span");
|
|
2940
|
+
E.textContent = k.value, E.className = "text-gray-400 dark:text-gray-500 select-none", x.appendChild(E);
|
|
2941
2941
|
} else {
|
|
2942
|
-
const
|
|
2943
|
-
|
|
2942
|
+
const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", g = this._createPartInput(k.len, E, r, n, a);
|
|
2943
|
+
y === "start" ? this._startPartInputs.push(g) : this._endPartInputs.push(g), x.appendChild(g);
|
|
2944
2944
|
}
|
|
2945
|
-
}),
|
|
2945
|
+
}), x;
|
|
2946
2946
|
};
|
|
2947
|
-
if (this._inputsWrapperEl.appendChild(
|
|
2948
|
-
const
|
|
2949
|
-
|
|
2947
|
+
if (this._inputsWrapperEl.appendChild(_("start")), this._isRange) {
|
|
2948
|
+
const y = document.createElement("span");
|
|
2949
|
+
y.textContent = " - ", y.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(y), this._inputsWrapperEl.appendChild(_("end"));
|
|
2950
2950
|
}
|
|
2951
|
-
const
|
|
2952
|
-
if (
|
|
2953
|
-
this._isInputMode ||
|
|
2954
|
-
}), this._attachPartInputHandlers(this._startPartInputs,
|
|
2955
|
-
this._iconButton.disabled =
|
|
2951
|
+
const b = document.createElement("div");
|
|
2952
|
+
if (b.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", b.appendChild(this._displayEl), b.appendChild(this._inputsWrapperEl), f.appendChild(b), f.addEventListener("click", () => {
|
|
2953
|
+
this._isInputMode || r || n || this._enterInputMode();
|
|
2954
|
+
}), this._attachPartInputHandlers(this._startPartInputs, p, f), this._isRange && this._attachPartInputHandlers(this._endPartInputs, p, f), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
|
|
2955
|
+
this._iconButton.disabled = r || n, !r && !n ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
|
|
2956
2956
|
else {
|
|
2957
2957
|
this._iconButton = document.createElement("button"), this._iconButton.type = "button", this._iconButton.tabIndex = 0, this._iconButton.className = "absolute left-2 top-[.55rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 pointer-events-auto disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center rounded-sm";
|
|
2958
|
-
const
|
|
2959
|
-
this._iconButton.id =
|
|
2960
|
-
const
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
}), this._input.prepend(this._iconButton), this._iconButton.disabled =
|
|
2958
|
+
const y = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
|
|
2959
|
+
this._iconButton.id = y;
|
|
2960
|
+
const x = document.createElement("mint-icon");
|
|
2961
|
+
x.setAttribute("name", "calendar"), x.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(x), this._iconButton.addEventListener("click", () => {
|
|
2962
|
+
r || n || this._enterInputMode();
|
|
2963
|
+
}), this._input.prepend(this._iconButton), this._iconButton.disabled = r || n;
|
|
2964
2964
|
}
|
|
2965
|
-
this._renderErrorState(c,
|
|
2965
|
+
this._renderErrorState(c, m), this._renderSkeleton(e);
|
|
2966
2966
|
}
|
|
2967
2967
|
_renderErrorState(e, t) {
|
|
2968
2968
|
let i = this.querySelector(".mint-date-picker-error");
|
|
@@ -3008,13 +3008,13 @@ class te extends HTMLElement {
|
|
|
3008
3008
|
return;
|
|
3009
3009
|
}
|
|
3010
3010
|
if (this._isRange) {
|
|
3011
|
-
const [i, s] = this._splitRangeInput(e, t),
|
|
3012
|
-
if (
|
|
3013
|
-
const [a, l] =
|
|
3011
|
+
const [i, s] = this._splitRangeInput(e, t), r = i ? this._parseDateString(i, t) : null, n = s ? this._parseDateString(s, t) : null;
|
|
3012
|
+
if (r && n) {
|
|
3013
|
+
const [a, l] = r <= n ? [r, n] : [n, r], o = this._formatDate(a, t), d = this._formatDate(l, t), c = `${o} - ${d}`;
|
|
3014
3014
|
this.setValue(c), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(l, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = l, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
|
|
3015
|
-
} else if (
|
|
3016
|
-
const a = this._formatDate(
|
|
3017
|
-
this.setValue(a), this._applyDateToParts(
|
|
3015
|
+
} else if (r) {
|
|
3016
|
+
const a = this._formatDate(r, t);
|
|
3017
|
+
this.setValue(a), this._applyDateToParts(r, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = r, this._selectedEndDate = null, this._currentMonth = r.getMonth(), this._currentYear = r.getFullYear();
|
|
3018
3018
|
} else
|
|
3019
3019
|
this.setValue(""), this._applyDateToParts(null, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = null, this._selectedEndDate = null;
|
|
3020
3020
|
} else if (this._validateDateString(e, t)) {
|
|
@@ -3053,9 +3053,9 @@ class te extends HTMLElement {
|
|
|
3053
3053
|
requestAnimationFrame(() => {
|
|
3054
3054
|
this._popover && this._popover.isConnected && (this._popover.setAttribute("trigger-id", e), this._popoverObserver || (this._popoverObserver = new MutationObserver((i) => {
|
|
3055
3055
|
i.forEach((s) => {
|
|
3056
|
-
var
|
|
3056
|
+
var r;
|
|
3057
3057
|
if (s.type === "attributes" && s.attributeName === "open")
|
|
3058
|
-
if ((
|
|
3058
|
+
if ((r = this._popover) == null ? void 0 : r.hasAttribute("open"))
|
|
3059
3059
|
requestAnimationFrame(() => {
|
|
3060
3060
|
this._buildCalendar();
|
|
3061
3061
|
const a = this._popover;
|
|
@@ -3114,69 +3114,69 @@ class te extends HTMLElement {
|
|
|
3114
3114
|
}
|
|
3115
3115
|
_buildCalendarView() {
|
|
3116
3116
|
if (!this._calendarContainer) return;
|
|
3117
|
-
const e = this._getDaysInMonth(this._currentMonth, this._currentYear), t = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), i = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
|
3118
|
-
this._calendarContainer.className =
|
|
3117
|
+
const e = this._getDaysInMonth(this._currentMonth, this._currentYear), t = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), i = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = this.getShortcuts(), n = r.length > 0;
|
|
3118
|
+
this._calendarContainer.className = n ? "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
|
|
3119
3119
|
const a = document.createElement("div");
|
|
3120
3120
|
a.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
|
|
3121
3121
|
const l = document.createElement("div");
|
|
3122
3122
|
l.className = "flex-1 min-w-0";
|
|
3123
3123
|
const o = document.createElement("div");
|
|
3124
3124
|
o.className = "flex items-center justify-between mb-4";
|
|
3125
|
-
const
|
|
3126
|
-
|
|
3125
|
+
const d = document.createElement("button");
|
|
3126
|
+
d.type = "button", d.tabIndex = 0, d.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", d.setAttribute("data-keep-popover-open", "true");
|
|
3127
3127
|
const c = document.createElement("mint-icon");
|
|
3128
|
-
c.setAttribute("name", "caret-left"), c.className = "w-4 h-4",
|
|
3128
|
+
c.setAttribute("name", "caret-left"), c.className = "w-4 h-4", d.appendChild(c), d.addEventListener("click", () => {
|
|
3129
3129
|
this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
|
|
3130
|
-
}), o.appendChild(
|
|
3131
|
-
const
|
|
3132
|
-
|
|
3133
|
-
const
|
|
3134
|
-
|
|
3130
|
+
}), o.appendChild(d);
|
|
3131
|
+
const m = document.createElement("div");
|
|
3132
|
+
m.className = "flex items-center gap-2";
|
|
3133
|
+
const h = document.createElement("button");
|
|
3134
|
+
h.type = "button", h.tabIndex = 0, h.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", h.setAttribute("data-keep-popover-open", "true"), h.textContent = i[this._currentMonth], h.addEventListener("click", () => {
|
|
3135
3135
|
this._viewMode = "month", this._buildCalendar();
|
|
3136
|
-
}),
|
|
3136
|
+
}), m.appendChild(h);
|
|
3137
3137
|
const f = document.createElement("button");
|
|
3138
3138
|
f.type = "button", f.tabIndex = 0, f.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", f.setAttribute("data-keep-popover-open", "true"), f.textContent = String(this._currentYear), f.addEventListener("click", () => {
|
|
3139
3139
|
this._viewMode = "year", this._buildCalendar();
|
|
3140
|
-
}),
|
|
3141
|
-
const
|
|
3142
|
-
|
|
3143
|
-
const
|
|
3144
|
-
|
|
3140
|
+
}), m.appendChild(f), o.appendChild(m);
|
|
3141
|
+
const u = document.createElement("button");
|
|
3142
|
+
u.type = "button", u.tabIndex = 0, u.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", u.setAttribute("data-keep-popover-open", "true");
|
|
3143
|
+
const p = document.createElement("mint-icon");
|
|
3144
|
+
p.setAttribute("name", "caret-right"), p.className = "w-4 h-4", u.appendChild(p), u.addEventListener("click", () => {
|
|
3145
3145
|
this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
|
|
3146
|
-
}), o.appendChild(
|
|
3147
|
-
const k = document.createElement("div");
|
|
3148
|
-
k.className = "grid grid-cols-7 mb-2", s.forEach((v) => {
|
|
3149
|
-
const y = document.createElement("div");
|
|
3150
|
-
y.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", y.textContent = v, k.appendChild(y);
|
|
3151
|
-
});
|
|
3146
|
+
}), o.appendChild(u);
|
|
3152
3147
|
const _ = document.createElement("div");
|
|
3153
|
-
_.className = "grid grid-cols-7"
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3148
|
+
_.className = "grid grid-cols-7 mb-2", s.forEach((k) => {
|
|
3149
|
+
const E = document.createElement("div");
|
|
3150
|
+
E.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", E.textContent = k, _.appendChild(E);
|
|
3151
|
+
});
|
|
3152
|
+
const b = document.createElement("div");
|
|
3153
|
+
b.className = "grid grid-cols-7";
|
|
3154
|
+
for (let k = 0; k < t; k++) {
|
|
3155
|
+
const E = document.createElement("div");
|
|
3156
|
+
E.className = "w-8 h-8", b.appendChild(E);
|
|
3157
3157
|
}
|
|
3158
|
-
const
|
|
3159
|
-
for (let
|
|
3160
|
-
const
|
|
3158
|
+
const y = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, x = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
|
|
3159
|
+
for (let k = 1; k <= e; k++) {
|
|
3160
|
+
const E = new Date(this._currentYear, this._currentMonth, k), g = this._isToday(E), v = this._isDateSelected(E), C = this._isDateInRange(E), A = y && E < y || x && E > x;
|
|
3161
3161
|
let T = "rounded-md";
|
|
3162
3162
|
if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
|
|
3163
|
-
const H = this._isSameDate(
|
|
3164
|
-
H && L ? T = "rounded-md" : H ? T = "rounded-l-md" : L ? T = "rounded-r-md" :
|
|
3165
|
-
} else
|
|
3163
|
+
const H = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
|
|
3164
|
+
H && L ? T = "rounded-md" : H ? T = "rounded-l-md" : L ? T = "rounded-r-md" : C && (T = "rounded-none");
|
|
3165
|
+
} else v && !this._isRange && (T = "rounded-md");
|
|
3166
3166
|
const S = document.createElement("button");
|
|
3167
|
-
S.type = "button", S.disabled = !!
|
|
3168
|
-
this._handleDateClick(
|
|
3169
|
-
}),
|
|
3167
|
+
S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${T} border-0 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${v ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : g ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = k.toString(), A || S.addEventListener("click", () => {
|
|
3168
|
+
this._handleDateClick(E);
|
|
3169
|
+
}), b.appendChild(S);
|
|
3170
3170
|
}
|
|
3171
|
-
if (
|
|
3172
|
-
const
|
|
3173
|
-
|
|
3174
|
-
const
|
|
3175
|
-
|
|
3176
|
-
const
|
|
3177
|
-
|
|
3178
|
-
const
|
|
3179
|
-
|
|
3171
|
+
if (n) {
|
|
3172
|
+
const k = document.createElement("div");
|
|
3173
|
+
k.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
|
|
3174
|
+
const E = document.createElement("div");
|
|
3175
|
+
E.className = "relative md:relative md:flex-1 md:min-h-0";
|
|
3176
|
+
const g = document.createElement("div");
|
|
3177
|
+
g.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", g.style.scrollbarWidth = "none", g.style.msOverflowStyle = "none", g.style.setProperty("-webkit-overflow-scrolling", "touch");
|
|
3178
|
+
const v = document.createElement("style");
|
|
3179
|
+
v.textContent = `
|
|
3180
3180
|
.mint-date-shortcuts-row::-webkit-scrollbar {
|
|
3181
3181
|
display: none;
|
|
3182
3182
|
}
|
|
@@ -3200,25 +3200,25 @@ class te extends HTMLElement {
|
|
|
3200
3200
|
background: rgba(255, 255, 255, 0.2);
|
|
3201
3201
|
}
|
|
3202
3202
|
}
|
|
3203
|
-
`,
|
|
3204
|
-
const
|
|
3205
|
-
|
|
3206
|
-
const
|
|
3207
|
-
|
|
3203
|
+
`, g.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (v.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(v));
|
|
3204
|
+
const C = document.createElement("div");
|
|
3205
|
+
C.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", E.appendChild(C);
|
|
3206
|
+
const A = document.createElement("div");
|
|
3207
|
+
A.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", E.appendChild(A);
|
|
3208
3208
|
const T = document.createElement("div");
|
|
3209
|
-
T.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200",
|
|
3209
|
+
T.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", E.appendChild(T);
|
|
3210
3210
|
const S = document.createElement("div");
|
|
3211
|
-
S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200",
|
|
3211
|
+
S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", E.appendChild(S);
|
|
3212
3212
|
const H = () => {
|
|
3213
3213
|
if (window.innerWidth >= 768) {
|
|
3214
|
-
const D =
|
|
3215
|
-
D > 0 ? T.style.opacity = "1" : T.style.opacity = "0", D + N < I - 1 ? S.style.opacity = "1" : S.style.opacity = "0",
|
|
3214
|
+
const D = g.scrollTop, I = g.scrollHeight, N = g.clientHeight;
|
|
3215
|
+
D > 0 ? T.style.opacity = "1" : T.style.opacity = "0", D + N < I - 1 ? S.style.opacity = "1" : S.style.opacity = "0", C.style.opacity = "0", A.style.opacity = "0";
|
|
3216
3216
|
} else {
|
|
3217
|
-
const D =
|
|
3218
|
-
D > 0 ?
|
|
3217
|
+
const D = g.scrollLeft, I = g.scrollWidth, N = g.clientWidth;
|
|
3218
|
+
D > 0 ? C.style.opacity = "1" : C.style.opacity = "0", D + N < I - 1 ? A.style.opacity = "1" : A.style.opacity = "0", T.style.opacity = "0", S.style.opacity = "0";
|
|
3219
3219
|
}
|
|
3220
3220
|
};
|
|
3221
|
-
|
|
3221
|
+
g.addEventListener("scroll", H), window.addEventListener("resize", H), setTimeout(H, 0), r.forEach((L) => {
|
|
3222
3222
|
const D = document.createElement("button");
|
|
3223
3223
|
D.type = "button", D.tabIndex = 0, D.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", D.textContent = L.label, D.setAttribute("data-keep-popover-open", "true"), D.addEventListener("click", () => {
|
|
3224
3224
|
const I = L.action();
|
|
@@ -3242,10 +3242,10 @@ class te extends HTMLElement {
|
|
|
3242
3242
|
cancelable: !0
|
|
3243
3243
|
}));
|
|
3244
3244
|
}
|
|
3245
|
-
}),
|
|
3246
|
-
}),
|
|
3245
|
+
}), g.appendChild(D);
|
|
3246
|
+
}), E.appendChild(g), k.appendChild(E), a.appendChild(k);
|
|
3247
3247
|
}
|
|
3248
|
-
l.appendChild(o), l.appendChild(
|
|
3248
|
+
l.appendChild(o), l.appendChild(_), l.appendChild(b), a.appendChild(l), this._calendarContainer.appendChild(a);
|
|
3249
3249
|
}
|
|
3250
3250
|
_buildMonthView() {
|
|
3251
3251
|
if (!this._calendarContainer) return;
|
|
@@ -3257,23 +3257,23 @@ class te extends HTMLElement {
|
|
|
3257
3257
|
s.setAttribute("name", "caret-left"), s.className = "w-4 h-4", i.appendChild(s), i.addEventListener("click", () => {
|
|
3258
3258
|
this._currentYear--, this._buildCalendar();
|
|
3259
3259
|
}), t.appendChild(i);
|
|
3260
|
-
const n = document.createElement("button");
|
|
3261
|
-
n.type = "button", n.tabIndex = 0, n.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", n.setAttribute("data-keep-popover-open", "true"), n.textContent = String(this._currentYear), n.addEventListener("click", () => {
|
|
3262
|
-
this._viewMode = "year", this._buildCalendar();
|
|
3263
|
-
}), t.appendChild(n);
|
|
3264
3260
|
const r = document.createElement("button");
|
|
3265
|
-
r.type = "button", r.tabIndex = 0, r.className = "
|
|
3261
|
+
r.type = "button", r.tabIndex = 0, r.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", r.setAttribute("data-keep-popover-open", "true"), r.textContent = String(this._currentYear), r.addEventListener("click", () => {
|
|
3262
|
+
this._viewMode = "year", this._buildCalendar();
|
|
3263
|
+
}), t.appendChild(r);
|
|
3264
|
+
const n = document.createElement("button");
|
|
3265
|
+
n.type = "button", n.tabIndex = 0, n.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", n.setAttribute("data-keep-popover-open", "true");
|
|
3266
3266
|
const a = document.createElement("mint-icon");
|
|
3267
|
-
a.setAttribute("name", "caret-right"), a.className = "w-4 h-4",
|
|
3267
|
+
a.setAttribute("name", "caret-right"), a.className = "w-4 h-4", n.appendChild(a), n.addEventListener("click", () => {
|
|
3268
3268
|
this._currentYear++, this._buildCalendar();
|
|
3269
|
-
}), t.appendChild(
|
|
3269
|
+
}), t.appendChild(n);
|
|
3270
3270
|
const l = document.createElement("div");
|
|
3271
|
-
l.className = "grid grid-cols-3 gap-2", e.forEach((o,
|
|
3271
|
+
l.className = "grid grid-cols-3 gap-2", e.forEach((o, d) => {
|
|
3272
3272
|
const c = document.createElement("button");
|
|
3273
3273
|
c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
|
|
3274
|
-
const
|
|
3275
|
-
c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${
|
|
3276
|
-
this._currentMonth =
|
|
3274
|
+
const m = this._currentMonth === d;
|
|
3275
|
+
c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${m ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, c.textContent = o, c.addEventListener("click", () => {
|
|
3276
|
+
this._currentMonth = d, this._viewMode = "calendar", this._buildCalendar();
|
|
3277
3277
|
}), l.appendChild(c);
|
|
3278
3278
|
}), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(l);
|
|
3279
3279
|
}
|
|
@@ -3283,12 +3283,12 @@ class te extends HTMLElement {
|
|
|
3283
3283
|
i.className = "flex items-center justify-between mb-4";
|
|
3284
3284
|
const s = document.createElement("button");
|
|
3285
3285
|
s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
|
|
3286
|
-
const
|
|
3287
|
-
|
|
3286
|
+
const r = document.createElement("mint-icon");
|
|
3287
|
+
r.setAttribute("name", "caret-left"), r.className = "w-4 h-4", s.appendChild(r), s.addEventListener("click", () => {
|
|
3288
3288
|
this._currentYear -= 12, this._buildCalendar();
|
|
3289
3289
|
}), i.appendChild(s);
|
|
3290
|
-
const
|
|
3291
|
-
|
|
3290
|
+
const n = document.createElement("div");
|
|
3291
|
+
n.className = "text-sm font-medium text-gray-900 dark:text-gray-100", n.textContent = `${e} - ${t}`, i.appendChild(n);
|
|
3292
3292
|
const a = document.createElement("button");
|
|
3293
3293
|
a.type = "button", a.tabIndex = 0, a.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", a.setAttribute("data-keep-popover-open", "true");
|
|
3294
3294
|
const l = document.createElement("mint-icon");
|
|
@@ -3297,12 +3297,12 @@ class te extends HTMLElement {
|
|
|
3297
3297
|
}), i.appendChild(a);
|
|
3298
3298
|
const o = document.createElement("div");
|
|
3299
3299
|
o.className = "grid grid-cols-3 gap-2";
|
|
3300
|
-
for (let
|
|
3300
|
+
for (let d = e; d <= t; d++) {
|
|
3301
3301
|
const c = document.createElement("button");
|
|
3302
3302
|
c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
|
|
3303
|
-
const
|
|
3304
|
-
c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${
|
|
3305
|
-
this._currentYear =
|
|
3303
|
+
const m = this._currentYear === d;
|
|
3304
|
+
c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${m ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, c.textContent = String(d), c.addEventListener("click", () => {
|
|
3305
|
+
this._currentYear = d, this._viewMode = "calendar", this._buildCalendar();
|
|
3306
3306
|
}), o.appendChild(c);
|
|
3307
3307
|
}
|
|
3308
3308
|
this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(o);
|
|
@@ -3333,8 +3333,8 @@ class te extends HTMLElement {
|
|
|
3333
3333
|
const t = this.getFormat();
|
|
3334
3334
|
if (this._isRange) {
|
|
3335
3335
|
if (!this._selectedStartDate || this._selectedStartDate && this._selectedEndDate ? (this._selectedStartDate = e, this._selectedEndDate = null) : this._selectedStartDate && !this._selectedEndDate && (e < this._selectedStartDate ? (this._selectedEndDate = this._selectedStartDate, this._selectedStartDate = e) : this._selectedEndDate = e), this._selectedStartDate && this._selectedEndDate) {
|
|
3336
|
-
const i = this._formatDate(this._selectedStartDate, t), s = this._formatDate(this._selectedEndDate, t),
|
|
3337
|
-
this.setValue(
|
|
3336
|
+
const i = this._formatDate(this._selectedStartDate, t), s = this._formatDate(this._selectedEndDate, t), r = `${i} - ${s}`;
|
|
3337
|
+
this.setValue(r), this._textInput && (this._textInput.value = r), this._popover && typeof this._popover.close == "function" && this._popover.close();
|
|
3338
3338
|
} else if (this._selectedStartDate) {
|
|
3339
3339
|
const i = this._formatDate(this._selectedStartDate, t);
|
|
3340
3340
|
this.setValue(i), this._textInput && (this._textInput.value = i);
|
|
@@ -3381,8 +3381,8 @@ class te extends HTMLElement {
|
|
|
3381
3381
|
const i = this._fieldsContainer, s = this._input;
|
|
3382
3382
|
if (e) {
|
|
3383
3383
|
t || (t = document.createElement("div"), t.className = "mint-date-picker-skeleton-container absolute inset-0 z-10 pointer-events-none", s ? (s.classList.contains("relative") || s.classList.add("relative"), s.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
|
|
3384
|
-
let
|
|
3385
|
-
|
|
3384
|
+
let r = t.querySelector(".mint-date-picker-skeleton");
|
|
3385
|
+
r || (r = document.createElement("div"), r.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", r.style.height = "2.25rem", t.appendChild(r)), t.style.display = "block", i && (i.style.visibility = "hidden", i.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
|
|
3386
3386
|
} else
|
|
3387
3387
|
t && (t.style.display = "none"), i && (i.style.visibility = "visible", i.style.pointerEvents = "auto"), this._displayEl && (this._displayEl.style.visibility = "visible", this._displayEl.style.pointerEvents = "auto");
|
|
3388
3388
|
}
|
|
@@ -3414,16 +3414,16 @@ class te extends HTMLElement {
|
|
|
3414
3414
|
}
|
|
3415
3415
|
const i = e._getFocusableElements();
|
|
3416
3416
|
if (i.length === 0) return;
|
|
3417
|
-
const s = i[0],
|
|
3418
|
-
if (!(((l = e._calendarContainer) == null ? void 0 : l.contains(
|
|
3417
|
+
const s = i[0], r = i[i.length - 1], n = document.activeElement;
|
|
3418
|
+
if (!(((l = e._calendarContainer) == null ? void 0 : l.contains(n)) || !1)) {
|
|
3419
3419
|
t.preventDefault(), s.focus();
|
|
3420
3420
|
return;
|
|
3421
3421
|
}
|
|
3422
|
-
if (t.shiftKey &&
|
|
3423
|
-
t.preventDefault(),
|
|
3422
|
+
if (t.shiftKey && n === s) {
|
|
3423
|
+
t.preventDefault(), r.focus();
|
|
3424
3424
|
return;
|
|
3425
3425
|
}
|
|
3426
|
-
if (!t.shiftKey &&
|
|
3426
|
+
if (!t.shiftKey && n === r) {
|
|
3427
3427
|
t.preventDefault(), s.focus();
|
|
3428
3428
|
return;
|
|
3429
3429
|
}
|
|
@@ -3533,54 +3533,54 @@ class ie extends HTMLElement {
|
|
|
3533
3533
|
], s = [
|
|
3534
3534
|
"border-2",
|
|
3535
3535
|
e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
|
|
3536
|
-
],
|
|
3536
|
+
], r = [
|
|
3537
3537
|
"focus-visible:ring-2",
|
|
3538
3538
|
"focus-visible:ring-offset-1",
|
|
3539
3539
|
e ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
|
|
3540
3540
|
];
|
|
3541
|
-
return [...i, ...s, ...
|
|
3541
|
+
return [...i, ...s, ...r].filter(Boolean).join(" ");
|
|
3542
3542
|
}
|
|
3543
3543
|
render() {
|
|
3544
3544
|
const e = this.isLoading(), t = [];
|
|
3545
|
-
this._select && Array.from(this._select.children).forEach((
|
|
3546
|
-
(
|
|
3545
|
+
this._select && Array.from(this._select.children).forEach((h) => {
|
|
3546
|
+
(h.tagName === "OPTION" || h.tagName === "OPTGROUP") && t.push(h.cloneNode(!0));
|
|
3547
3547
|
});
|
|
3548
|
-
const i = Array.from(this.children).filter((
|
|
3548
|
+
const i = Array.from(this.children).filter((h) => h.tagName === "OPTION" || h.tagName === "OPTGROUP").map((h) => h.cloneNode(!0));
|
|
3549
3549
|
for (; this.firstChild; )
|
|
3550
3550
|
this.removeChild(this.firstChild);
|
|
3551
3551
|
this._wrapper = null, this._select = null;
|
|
3552
|
-
const s = this.getLabel(),
|
|
3552
|
+
const s = this.getLabel(), r = this.getInfo(), n = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), d = this.isMultiple(), c = this.hasError();
|
|
3553
3553
|
if (s) {
|
|
3554
|
-
const
|
|
3555
|
-
|
|
3554
|
+
const h = document.createElement("label");
|
|
3555
|
+
h.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", n && h.setAttribute("for", n);
|
|
3556
3556
|
const f = document.createTextNode(s);
|
|
3557
|
-
|
|
3557
|
+
h.appendChild(f), this.appendChild(h);
|
|
3558
3558
|
}
|
|
3559
|
-
this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(),
|
|
3560
|
-
const
|
|
3561
|
-
if (
|
|
3562
|
-
this._select.appendChild(
|
|
3559
|
+
this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), n && (this._select.id = n), a && (this._select.name = a), o && (this._select.disabled = !0), d && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", c ? "true" : "false");
|
|
3560
|
+
const m = t.length > 0 ? t : i;
|
|
3561
|
+
if (m.length > 0 && m.forEach((h) => {
|
|
3562
|
+
this._select.appendChild(h);
|
|
3563
3563
|
}), this._select.options.length === 0) {
|
|
3564
|
-
const
|
|
3565
|
-
|
|
3564
|
+
const h = document.createElement("option");
|
|
3565
|
+
h.value = "", h.textContent = "Select an option", h.disabled = !0, h.selected = !0, this._select.appendChild(h);
|
|
3566
3566
|
}
|
|
3567
|
-
if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (
|
|
3568
|
-
const
|
|
3569
|
-
|
|
3570
|
-
detail: { value:
|
|
3567
|
+
if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
|
|
3568
|
+
const u = h.target.value;
|
|
3569
|
+
u ? this.setAttribute("value", u) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
|
|
3570
|
+
detail: { value: u },
|
|
3571
3571
|
bubbles: !0,
|
|
3572
3572
|
cancelable: !0,
|
|
3573
3573
|
composed: !0
|
|
3574
3574
|
}));
|
|
3575
|
-
}, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select),
|
|
3575
|
+
}, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), d)
|
|
3576
3576
|
this._caretUpIcon = null, this._caretDownIcon = null;
|
|
3577
3577
|
else {
|
|
3578
|
-
const
|
|
3579
|
-
|
|
3578
|
+
const h = document.createElement("div");
|
|
3579
|
+
h.className = "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none z-10 flex flex-col", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]", h.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", h.appendChild(this._caretDownIcon), this._wrapper.appendChild(h);
|
|
3580
3580
|
}
|
|
3581
|
-
if (
|
|
3582
|
-
const
|
|
3583
|
-
|
|
3581
|
+
if (r) {
|
|
3582
|
+
const h = document.createElement("div");
|
|
3583
|
+
h.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", h.textContent = r, this.appendChild(h);
|
|
3584
3584
|
}
|
|
3585
3585
|
this._renderErrorState(), this._renderSkeleton(e);
|
|
3586
3586
|
}
|
|
@@ -3592,8 +3592,8 @@ class ie extends HTMLElement {
|
|
|
3592
3592
|
let s = t.querySelector(".mint-select-skeleton");
|
|
3593
3593
|
if (!s) {
|
|
3594
3594
|
s = document.createElement("div"), s.className = "mint-select-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
|
|
3595
|
-
const
|
|
3596
|
-
s.style.height =
|
|
3595
|
+
const r = this.isMultiple();
|
|
3596
|
+
s.style.height = r ? "6rem" : "2.25rem", t.appendChild(s);
|
|
3597
3597
|
}
|
|
3598
3598
|
t.style.display = "block", this._select && (this._select.style.opacity = "0", this._select.style.pointerEvents = "none");
|
|
3599
3599
|
} else
|
|
@@ -3657,15 +3657,15 @@ class se extends HTMLElement {
|
|
|
3657
3657
|
t || (t = document.createElement("div"), t.className = "mint-dropzone-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center justify-center", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
|
|
3658
3658
|
let s = t.querySelector(".mint-dropzone-skeleton");
|
|
3659
3659
|
if (s || (s = document.createElement("div"), s.className = "mint-dropzone-skeleton rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 animate-pulse", s.style.width = "100%", s.style.height = "100%", t.appendChild(s)), t.style.display = "flex", i) {
|
|
3660
|
-
const
|
|
3661
|
-
if (n) {
|
|
3662
|
-
const o = n;
|
|
3663
|
-
o.style.visibility = "hidden", o.style.pointerEvents = "none";
|
|
3664
|
-
}
|
|
3660
|
+
const r = i.querySelector(".mint-dropzone-icon"), n = i.querySelector(".mint-dropzone-label"), a = i.querySelector(".mint-dropzone-previews-wrapper"), l = this._fileInput;
|
|
3665
3661
|
if (r) {
|
|
3666
3662
|
const o = r;
|
|
3667
3663
|
o.style.visibility = "hidden", o.style.pointerEvents = "none";
|
|
3668
3664
|
}
|
|
3665
|
+
if (n) {
|
|
3666
|
+
const o = n;
|
|
3667
|
+
o.style.visibility = "hidden", o.style.pointerEvents = "none";
|
|
3668
|
+
}
|
|
3669
3669
|
if (a) {
|
|
3670
3670
|
const o = a;
|
|
3671
3671
|
o.style.visibility = "hidden", o.style.pointerEvents = "none";
|
|
@@ -3673,19 +3673,19 @@ class se extends HTMLElement {
|
|
|
3673
3673
|
l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), i.style.pointerEvents = "none";
|
|
3674
3674
|
}
|
|
3675
3675
|
} else if (t && (t.style.display = "none"), i) {
|
|
3676
|
-
const s = i.querySelector(".mint-dropzone-icon"),
|
|
3676
|
+
const s = i.querySelector(".mint-dropzone-icon"), r = i.querySelector(".mint-dropzone-label"), n = i.querySelector(".mint-dropzone-previews-wrapper"), a = this._fileInput;
|
|
3677
3677
|
if (s) {
|
|
3678
3678
|
const l = s;
|
|
3679
3679
|
l.style.visibility = "visible", l.style.pointerEvents = "auto";
|
|
3680
3680
|
}
|
|
3681
|
-
if (n) {
|
|
3682
|
-
const l = n;
|
|
3683
|
-
l.style.visibility = "visible", l.style.pointerEvents = "auto";
|
|
3684
|
-
}
|
|
3685
3681
|
if (r) {
|
|
3686
3682
|
const l = r;
|
|
3687
3683
|
l.style.visibility = "visible", l.style.pointerEvents = "auto";
|
|
3688
3684
|
}
|
|
3685
|
+
if (n) {
|
|
3686
|
+
const l = n;
|
|
3687
|
+
l.style.visibility = "visible", l.style.pointerEvents = "auto";
|
|
3688
|
+
}
|
|
3689
3689
|
a && (a.style.visibility = "visible", a.style.pointerEvents = "auto"), i.style.pointerEvents = "auto";
|
|
3690
3690
|
}
|
|
3691
3691
|
}
|
|
@@ -3705,18 +3705,18 @@ class se extends HTMLElement {
|
|
|
3705
3705
|
return this.hasAttribute("loading");
|
|
3706
3706
|
}
|
|
3707
3707
|
render() {
|
|
3708
|
-
const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(),
|
|
3709
|
-
this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"),
|
|
3710
|
-
const c = this._dropzone.querySelector(".mint-dropzone-icon"),
|
|
3711
|
-
c && c.remove(),
|
|
3712
|
-
const
|
|
3713
|
-
|
|
3708
|
+
const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), r = this.isDisabled(), n = this.getWidth(), a = this.getHeight(), l = this.getName(), o = this.hasError(), d = this.getErrorMessage();
|
|
3709
|
+
this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), r ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", t || "File upload dropzone")), this._dropzone.style.width = n, this._dropzone.style.height = a, this._dropzone.style.minWidth = n, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = r, l ? this._fileInput.name = l : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
|
|
3710
|
+
const c = this._dropzone.querySelector(".mint-dropzone-icon"), m = this._dropzone.querySelector(".mint-dropzone-label");
|
|
3711
|
+
c && c.remove(), m && m.remove();
|
|
3712
|
+
const h = document.createElement("div");
|
|
3713
|
+
h.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
|
|
3714
3714
|
const f = document.createElement("mint-icon");
|
|
3715
|
-
if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500",
|
|
3716
|
-
const
|
|
3717
|
-
|
|
3715
|
+
if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500", h.appendChild(f), this._dropzone.appendChild(h), t) {
|
|
3716
|
+
const u = document.createElement("div");
|
|
3717
|
+
u.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", u.textContent = t, this._dropzone.appendChild(u);
|
|
3718
3718
|
}
|
|
3719
|
-
this.setupEventListeners(), this._renderErrorState(o,
|
|
3719
|
+
this.setupEventListeners(), this._renderErrorState(o, d), this._renderPreviews(), this._renderSkeleton(e);
|
|
3720
3720
|
}
|
|
3721
3721
|
_updateDragState() {
|
|
3722
3722
|
this._dropzone && this._updateDragStateClass();
|
|
@@ -3727,8 +3727,8 @@ class se extends HTMLElement {
|
|
|
3727
3727
|
}
|
|
3728
3728
|
_updateDragStateClass() {
|
|
3729
3729
|
if (!this._dropzone) return;
|
|
3730
|
-
const e = this.isDisabled(), t = this.hasError(),
|
|
3731
|
-
this._dropzone.className = `${
|
|
3730
|
+
const e = this.isDisabled(), t = this.hasError(), r = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, n = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", l = e ? "opacity-40 cursor-not-allowed" : "", o = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
|
|
3731
|
+
this._dropzone.className = `${r} ${t ? a : n} ${l} ${o}`.trim();
|
|
3732
3732
|
}
|
|
3733
3733
|
setupEventListeners() {
|
|
3734
3734
|
this._listenersInitialized || (this._listenersInitialized = !0, this.removeEventListeners(), !(!this._dropzone || !this._fileInput || this.isDisabled()) && (this._onDropzoneClick || (this._onDropzoneClick = (e) => {
|
|
@@ -3768,12 +3768,12 @@ class se extends HTMLElement {
|
|
|
3768
3768
|
return;
|
|
3769
3769
|
const i = e.target.files;
|
|
3770
3770
|
if (i && i.length > 0) {
|
|
3771
|
-
const s = this.getAccept(),
|
|
3771
|
+
const s = this.getAccept(), r = this.isMultiple(), n = [], a = [];
|
|
3772
3772
|
for (let l = 0; l < i.length; l++) {
|
|
3773
3773
|
const o = i[l];
|
|
3774
|
-
this._isFileAccepted(o, s) ?
|
|
3774
|
+
this._isFileAccepted(o, s) ? n.push(o) : a.push(o);
|
|
3775
3775
|
}
|
|
3776
|
-
if (!
|
|
3776
|
+
if (!r && n.length > 1 && (a.push(...n.slice(1)), n.splice(1)), a.length > 0) {
|
|
3777
3777
|
const l = new CustomEvent("dropRejected", {
|
|
3778
3778
|
detail: { files: a, reason: "File type not accepted or multiple files not allowed" },
|
|
3779
3779
|
bubbles: !0,
|
|
@@ -3781,7 +3781,7 @@ class se extends HTMLElement {
|
|
|
3781
3781
|
});
|
|
3782
3782
|
this.dispatchEvent(l);
|
|
3783
3783
|
}
|
|
3784
|
-
|
|
3784
|
+
n.length > 0 && this._applyValidFiles(n);
|
|
3785
3785
|
}
|
|
3786
3786
|
}), this._dropzone.addEventListener("click", this._onDropzoneClick), this._dropzone.addEventListener("dragover", this._onDragOver), this._dropzone.addEventListener("dragleave", this._onDragLeave), this._dropzone.addEventListener("drop", this._onDrop), this._dropzone.addEventListener("keydown", this._onKeyDown), this._dropzone.addEventListener("focus", this._onFocus), this._dropzone.addEventListener("blur", this._onBlur), this._fileInput.addEventListener("change", this._onFileInputChange), this._fileInput.addEventListener("input", this._onFileInputInput, !0)));
|
|
3787
3787
|
}
|
|
@@ -3789,32 +3789,32 @@ class se extends HTMLElement {
|
|
|
3789
3789
|
this._dropzone && (this._onDropzoneClick && this._dropzone.removeEventListener("click", this._onDropzoneClick), this._onDragOver && this._dropzone.removeEventListener("dragover", this._onDragOver), this._onDragLeave && this._dropzone.removeEventListener("dragleave", this._onDragLeave), this._onDrop && this._dropzone.removeEventListener("drop", this._onDrop), this._onKeyDown && this._dropzone.removeEventListener("keydown", this._onKeyDown), this._onFocus && this._dropzone.removeEventListener("focus", this._onFocus), this._onBlur && this._dropzone.removeEventListener("blur", this._onBlur)), this._fileInput && (this._onFileInputChange && this._fileInput.removeEventListener("change", this._onFileInputChange), this._onFileInputInput && this._fileInput.removeEventListener("input", this._onFileInputInput, !0)), this._isDragging = !1, this._listenersInitialized = !1;
|
|
3790
3790
|
}
|
|
3791
3791
|
_handleFiles(e) {
|
|
3792
|
-
const t = this.getAccept(), i = this.isMultiple(), s = [],
|
|
3793
|
-
for (let
|
|
3794
|
-
const a = e[
|
|
3795
|
-
this._isFileAccepted(a, t) ? s.push(a) :
|
|
3792
|
+
const t = this.getAccept(), i = this.isMultiple(), s = [], r = [];
|
|
3793
|
+
for (let n = 0; n < e.length; n++) {
|
|
3794
|
+
const a = e[n];
|
|
3795
|
+
this._isFileAccepted(a, t) ? s.push(a) : r.push(a);
|
|
3796
3796
|
}
|
|
3797
|
-
if (!i && s.length > 1 && (
|
|
3798
|
-
const
|
|
3799
|
-
detail: { files:
|
|
3797
|
+
if (!i && s.length > 1 && (r.push(...s.slice(1)), s.splice(1)), r.length > 0) {
|
|
3798
|
+
const n = new CustomEvent("dropRejected", {
|
|
3799
|
+
detail: { files: r, reason: "File type not accepted or multiple files not allowed" },
|
|
3800
3800
|
bubbles: !0,
|
|
3801
3801
|
cancelable: !0
|
|
3802
3802
|
});
|
|
3803
|
-
this.dispatchEvent(
|
|
3803
|
+
this.dispatchEvent(n);
|
|
3804
3804
|
}
|
|
3805
3805
|
s.length > 0 && this._applyValidFiles(s);
|
|
3806
3806
|
}
|
|
3807
3807
|
_isFileAccepted(e, t) {
|
|
3808
3808
|
var s;
|
|
3809
3809
|
if (!t) return !0;
|
|
3810
|
-
const i = t.split(",").map((
|
|
3811
|
-
for (const
|
|
3812
|
-
if (
|
|
3813
|
-
if ("." + ((s = e.name.split(".").pop()) == null ? void 0 : s.toLowerCase()) ===
|
|
3814
|
-
} else if (
|
|
3815
|
-
const
|
|
3816
|
-
if (
|
|
3817
|
-
} else if (e.type ===
|
|
3810
|
+
const i = t.split(",").map((r) => r.trim().toLowerCase());
|
|
3811
|
+
for (const r of i)
|
|
3812
|
+
if (r.startsWith(".")) {
|
|
3813
|
+
if ("." + ((s = e.name.split(".").pop()) == null ? void 0 : s.toLowerCase()) === r) return !0;
|
|
3814
|
+
} else if (r.includes("/*")) {
|
|
3815
|
+
const n = r.split("/")[0], a = e.type.split("/")[0];
|
|
3816
|
+
if (n === a) return !0;
|
|
3817
|
+
} else if (e.type === r) return !0;
|
|
3818
3818
|
return !1;
|
|
3819
3819
|
}
|
|
3820
3820
|
_dispatchEvent(e, t) {
|
|
@@ -3869,36 +3869,36 @@ class se extends HTMLElement {
|
|
|
3869
3869
|
const e = document.createElement("div");
|
|
3870
3870
|
e.className = "mint-dropzone-previews-wrapper mt-3 w-full relative max-h-48";
|
|
3871
3871
|
const t = document.createElement("div");
|
|
3872
|
-
t.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o,
|
|
3872
|
+
t.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o, d) => {
|
|
3873
3873
|
const c = document.createElement("div");
|
|
3874
3874
|
if (c.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", o.type.startsWith("image/")) {
|
|
3875
|
-
const
|
|
3876
|
-
|
|
3877
|
-
const
|
|
3878
|
-
this._previewUrls.push(
|
|
3875
|
+
const u = document.createElement("img");
|
|
3876
|
+
u.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
|
|
3877
|
+
const p = URL.createObjectURL(o);
|
|
3878
|
+
this._previewUrls.push(p), u.src = p, c.appendChild(u);
|
|
3879
3879
|
} else {
|
|
3880
|
-
const
|
|
3881
|
-
|
|
3880
|
+
const u = document.createElement("mint-icon");
|
|
3881
|
+
u.setAttribute("name", "attach"), u.className = "w-5 h-5 text-gray-500 dark:text-gray-300", c.appendChild(u);
|
|
3882
3882
|
}
|
|
3883
|
-
const
|
|
3884
|
-
|
|
3885
|
-
const
|
|
3886
|
-
|
|
3883
|
+
const m = document.createElement("div");
|
|
3884
|
+
m.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", m.textContent = o.name, c.appendChild(m);
|
|
3885
|
+
const h = document.createElement("button");
|
|
3886
|
+
h.type = "button", h.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
|
|
3887
3887
|
const f = document.createElement("mint-icon");
|
|
3888
|
-
f.setAttribute("name", "close"), f.className = "w-4 h-4",
|
|
3889
|
-
|
|
3890
|
-
}), c.appendChild(
|
|
3888
|
+
f.setAttribute("name", "close"), f.className = "w-4 h-4", h.appendChild(f), h.addEventListener("click", (u) => {
|
|
3889
|
+
u.preventDefault(), u.stopPropagation(), this._removeFileAt(d);
|
|
3890
|
+
}), c.appendChild(h), t.appendChild(c);
|
|
3891
3891
|
});
|
|
3892
3892
|
const i = this.hasError(), s = this._isDragging;
|
|
3893
|
-
let
|
|
3894
|
-
i ?
|
|
3895
|
-
const
|
|
3896
|
-
|
|
3893
|
+
let r = "from-white dark:from-gray-700";
|
|
3894
|
+
i ? r = "from-red-50 dark:from-red-900/30" : s && (r = "from-gray-50 dark:from-gray-800");
|
|
3895
|
+
const n = document.createElement("div");
|
|
3896
|
+
n.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${r} to-transparent opacity-0 transition-opacity duration-200`, e.appendChild(n);
|
|
3897
3897
|
const a = document.createElement("div");
|
|
3898
|
-
a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${
|
|
3898
|
+
a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${r} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(a);
|
|
3899
3899
|
const l = () => {
|
|
3900
|
-
const o = t.scrollTop,
|
|
3901
|
-
o > 0 ?
|
|
3900
|
+
const o = t.scrollTop, d = t.scrollHeight, c = t.clientHeight;
|
|
3901
|
+
o > 0 ? n.style.opacity = "1" : n.style.opacity = "0", o + c < d - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
|
|
3902
3902
|
};
|
|
3903
3903
|
l(), t.addEventListener("scroll", l), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
|
|
3904
3904
|
}
|
|
@@ -3933,19 +3933,21 @@ class se extends HTMLElement {
|
|
|
3933
3933
|
customElements.get("mint-dropzone") || customElements.define("mint-dropzone", se);
|
|
3934
3934
|
class re extends HTMLElement {
|
|
3935
3935
|
constructor() {
|
|
3936
|
-
super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null;
|
|
3936
|
+
super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map();
|
|
3937
3937
|
}
|
|
3938
3938
|
static get observedAttributes() {
|
|
3939
|
-
return ["action", "method", "enctype", "data-form-data", "loading"];
|
|
3939
|
+
return ["action", "method", "enctype", "data-form-data", "loading", "headers"];
|
|
3940
3940
|
}
|
|
3941
3941
|
connectedCallback() {
|
|
3942
|
-
this._render(), this._ensureSubmitHandler(), this._setupBlurValidation()
|
|
3942
|
+
this._render(), this._ensureSubmitHandler(), this._setupBlurValidation();
|
|
3943
|
+
const e = this.getAttribute("headers");
|
|
3944
|
+
e && this._parseHeaders(e), requestAnimationFrame(() => {
|
|
3943
3945
|
requestAnimationFrame(() => {
|
|
3944
3946
|
if (this._formData)
|
|
3945
3947
|
this._applyFormData();
|
|
3946
3948
|
else {
|
|
3947
|
-
const
|
|
3948
|
-
|
|
3949
|
+
const t = this.getAttribute("data-form-data");
|
|
3950
|
+
t && (this._parseFormData(t), this._applyFormData());
|
|
3949
3951
|
}
|
|
3950
3952
|
this._propagateLoadingState();
|
|
3951
3953
|
});
|
|
@@ -3973,7 +3975,7 @@ class re extends HTMLElement {
|
|
|
3973
3975
|
requestAnimationFrame(() => {
|
|
3974
3976
|
this._applyFormData();
|
|
3975
3977
|
});
|
|
3976
|
-
})) : e === "loading" ? this.isConnected && this._form ? requestAnimationFrame(() => {
|
|
3978
|
+
})) : e === "headers" ? this._parseHeaders(i) : e === "loading" ? this.isConnected && this._form ? requestAnimationFrame(() => {
|
|
3977
3979
|
this._propagateLoadingState();
|
|
3978
3980
|
}) : this._propagateLoadingState() : this._applyFormAttributes();
|
|
3979
3981
|
}
|
|
@@ -3990,6 +3992,24 @@ class re extends HTMLElement {
|
|
|
3990
3992
|
});
|
|
3991
3993
|
});
|
|
3992
3994
|
}
|
|
3995
|
+
// Property getter/setter for reactive headers binding (Vue :headers)
|
|
3996
|
+
get headers() {
|
|
3997
|
+
return this._headers;
|
|
3998
|
+
}
|
|
3999
|
+
set headers(e) {
|
|
4000
|
+
if (e && typeof e == "object" && !Array.isArray(e))
|
|
4001
|
+
this._headers = e;
|
|
4002
|
+
else if (e == null)
|
|
4003
|
+
this._headers = null;
|
|
4004
|
+
else if (typeof e == "string")
|
|
4005
|
+
try {
|
|
4006
|
+
this._headers = JSON.parse(e);
|
|
4007
|
+
} catch {
|
|
4008
|
+
this._headers = null;
|
|
4009
|
+
}
|
|
4010
|
+
else
|
|
4011
|
+
this._headers = null;
|
|
4012
|
+
}
|
|
3993
4013
|
_render() {
|
|
3994
4014
|
if (this.classList.add("block", "w-full"), !this._form) {
|
|
3995
4015
|
for (this._form = document.createElement("form"), this._form.noValidate = !0; this.firstChild; )
|
|
@@ -4021,16 +4041,17 @@ class re extends HTMLElement {
|
|
|
4021
4041
|
}));
|
|
4022
4042
|
return;
|
|
4023
4043
|
}
|
|
4024
|
-
const
|
|
4044
|
+
const n = new CustomEvent("submit", {
|
|
4025
4045
|
detail: { formData: i, values: s },
|
|
4026
4046
|
bubbles: !0,
|
|
4027
4047
|
cancelable: !0,
|
|
4028
4048
|
composed: !0
|
|
4029
4049
|
});
|
|
4030
|
-
if (this.dispatchEvent(
|
|
4050
|
+
if (this.dispatchEvent(n), n.defaultPrevented)
|
|
4031
4051
|
return;
|
|
4032
4052
|
const a = this.getAttribute("action"), l = this.getAttribute("method");
|
|
4033
|
-
if (!(!a || !l))
|
|
4053
|
+
if (!(!a || !l)) {
|
|
4054
|
+
this._setButtonsSubmitting();
|
|
4034
4055
|
try {
|
|
4035
4056
|
const o = await this._submitData(i, s);
|
|
4036
4057
|
this.dispatchEvent(new CustomEvent("submitsuccess", {
|
|
@@ -4044,97 +4065,168 @@ class re extends HTMLElement {
|
|
|
4044
4065
|
bubbles: !0,
|
|
4045
4066
|
cancelable: !0
|
|
4046
4067
|
}));
|
|
4068
|
+
} finally {
|
|
4069
|
+
this._restoreButtonsState();
|
|
4047
4070
|
}
|
|
4071
|
+
}
|
|
4048
4072
|
}
|
|
4049
4073
|
async _submitData(e, t) {
|
|
4050
|
-
|
|
4074
|
+
var c, m, h;
|
|
4075
|
+
const i = this.getAttribute("action"), s = this.getAttribute("method"), r = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
|
|
4051
4076
|
if (!i)
|
|
4052
4077
|
return { status: 0, ok: !0, data: { values: t } };
|
|
4053
|
-
const
|
|
4078
|
+
const n = Array.from(e.values()).some((f) => f instanceof File);
|
|
4054
4079
|
let a = null;
|
|
4055
4080
|
const l = {};
|
|
4056
4081
|
let o = i;
|
|
4057
|
-
if (s === "GET") {
|
|
4058
|
-
const
|
|
4059
|
-
e.forEach((
|
|
4060
|
-
|
|
4061
|
-
}), o += (i.includes("?") ? "&" : "?") +
|
|
4062
|
-
} else if (
|
|
4082
|
+
if (typeof window < "u" && ((h = (m = (c = window.mintForm) == null ? void 0 : c.defaults) == null ? void 0 : m.headers) != null && h.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
|
|
4083
|
+
const f = new URLSearchParams();
|
|
4084
|
+
e.forEach((u, p) => {
|
|
4085
|
+
u instanceof File || f.append(p, String(u));
|
|
4086
|
+
}), o += (i.includes("?") ? "&" : "?") + f.toString();
|
|
4087
|
+
} else if (r === "multipart/form-data" || n)
|
|
4063
4088
|
a = e;
|
|
4064
|
-
else if (
|
|
4089
|
+
else if (r === "application/json")
|
|
4065
4090
|
a = JSON.stringify(t), l["Content-Type"] = "application/json";
|
|
4066
4091
|
else {
|
|
4067
|
-
const
|
|
4068
|
-
e.forEach((
|
|
4069
|
-
|
|
4070
|
-
}), a =
|
|
4092
|
+
const f = new URLSearchParams();
|
|
4093
|
+
e.forEach((u, p) => {
|
|
4094
|
+
u instanceof File || f.append(p, String(u));
|
|
4095
|
+
}), a = f, l["Content-Type"] = "application/x-www-form-urlencoded";
|
|
4071
4096
|
}
|
|
4072
|
-
if (typeof fetch == "function")
|
|
4073
|
-
const h = await fetch(o, {
|
|
4074
|
-
method: s || "POST",
|
|
4075
|
-
body: s === "GET" ? null : a,
|
|
4076
|
-
headers: l
|
|
4077
|
-
}), c = await h.text().catch(() => "");
|
|
4078
|
-
let u = c;
|
|
4097
|
+
if (typeof fetch == "function")
|
|
4079
4098
|
try {
|
|
4080
|
-
|
|
4081
|
-
|
|
4099
|
+
const f = await fetch(o, {
|
|
4100
|
+
method: s || "POST",
|
|
4101
|
+
body: s === "GET" ? null : a,
|
|
4102
|
+
headers: l
|
|
4103
|
+
}), u = await f.text().catch(() => "");
|
|
4104
|
+
let p = u;
|
|
4105
|
+
try {
|
|
4106
|
+
p = JSON.parse(u);
|
|
4107
|
+
} catch {
|
|
4108
|
+
}
|
|
4109
|
+
if (!f.ok) {
|
|
4110
|
+
const b = { status: f.status, data: p, response: { status: f.status, data: p } };
|
|
4111
|
+
throw await this._applyErrorInterceptors(b);
|
|
4112
|
+
}
|
|
4113
|
+
const _ = { status: f.status, ok: f.ok, data: p };
|
|
4114
|
+
return await this._applySuccessInterceptors(_);
|
|
4115
|
+
} catch (f) {
|
|
4116
|
+
if (f.response)
|
|
4117
|
+
throw f;
|
|
4118
|
+
const u = {
|
|
4119
|
+
status: f.status || 0,
|
|
4120
|
+
data: f.data || f.message || "Network error",
|
|
4121
|
+
response: { status: f.status || 0, data: f.data || f.message || "Network error" }
|
|
4122
|
+
};
|
|
4123
|
+
throw await this._applyErrorInterceptors(u);
|
|
4082
4124
|
}
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
|
|
4089
|
-
|
|
4090
|
-
const { status: d, responseText: f } = u;
|
|
4091
|
-
if (d >= 200 && d < 300) {
|
|
4092
|
-
let p = f;
|
|
4125
|
+
const d = this;
|
|
4126
|
+
return await new Promise(async (f, u) => {
|
|
4127
|
+
const p = new XMLHttpRequest();
|
|
4128
|
+
p.open(s || "POST", o, !0), Object.entries(l).forEach(([_, b]) => p.setRequestHeader(_, b)), p.onload = async function() {
|
|
4129
|
+
const { status: _, responseText: b } = p;
|
|
4130
|
+
if (_ >= 200 && _ < 300) {
|
|
4131
|
+
let y = b;
|
|
4093
4132
|
try {
|
|
4094
|
-
|
|
4133
|
+
y = JSON.parse(b);
|
|
4095
4134
|
} catch {
|
|
4096
4135
|
}
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4136
|
+
try {
|
|
4137
|
+
const x = { status: _, ok: !0, data: y }, k = await d._applySuccessInterceptors(x);
|
|
4138
|
+
f(k);
|
|
4139
|
+
} catch (x) {
|
|
4140
|
+
u(x);
|
|
4141
|
+
}
|
|
4142
|
+
} else {
|
|
4143
|
+
let y = b;
|
|
4144
|
+
try {
|
|
4145
|
+
y = JSON.parse(b);
|
|
4146
|
+
} catch {
|
|
4147
|
+
}
|
|
4148
|
+
try {
|
|
4149
|
+
const x = { status: _, data: y, response: { status: _, data: y } }, k = await d._applyErrorInterceptors(x);
|
|
4150
|
+
u(k);
|
|
4151
|
+
} catch (x) {
|
|
4152
|
+
u(x);
|
|
4153
|
+
}
|
|
4154
|
+
}
|
|
4155
|
+
}, p.onerror = async function() {
|
|
4156
|
+
try {
|
|
4157
|
+
const _ = {
|
|
4158
|
+
status: p.status || 0,
|
|
4159
|
+
data: p.responseText || "Network error",
|
|
4160
|
+
response: { status: p.status || 0, data: p.responseText || "Network error" }
|
|
4161
|
+
}, b = await d._applyErrorInterceptors(_);
|
|
4162
|
+
u(b);
|
|
4163
|
+
} catch (_) {
|
|
4164
|
+
u(_);
|
|
4165
|
+
}
|
|
4166
|
+
}, p.send(s === "GET" ? null : a);
|
|
4103
4167
|
});
|
|
4104
4168
|
}
|
|
4169
|
+
async _applySuccessInterceptors(e) {
|
|
4170
|
+
var s, r, n;
|
|
4171
|
+
if (typeof window > "u" || !((n = (r = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : r.response) != null && n.handlers))
|
|
4172
|
+
return e;
|
|
4173
|
+
let t = e;
|
|
4174
|
+
const i = window.mintForm.interceptors.response.handlers;
|
|
4175
|
+
for (const a of i)
|
|
4176
|
+
a.fulfilled && (t = await a.fulfilled(t));
|
|
4177
|
+
return t;
|
|
4178
|
+
}
|
|
4179
|
+
async _applyErrorInterceptors(e) {
|
|
4180
|
+
var s, r, n;
|
|
4181
|
+
if (typeof window > "u" || !((n = (r = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : r.response) != null && n.handlers))
|
|
4182
|
+
return Promise.reject(e);
|
|
4183
|
+
let t = e;
|
|
4184
|
+
const i = window.mintForm.interceptors.response.handlers;
|
|
4185
|
+
for (let a = i.length - 1; a >= 0; a--) {
|
|
4186
|
+
const l = i[a];
|
|
4187
|
+
if (l.rejected)
|
|
4188
|
+
try {
|
|
4189
|
+
if (t = await l.rejected(t), t !== void 0)
|
|
4190
|
+
return t;
|
|
4191
|
+
} catch (o) {
|
|
4192
|
+
t = o;
|
|
4193
|
+
}
|
|
4194
|
+
}
|
|
4195
|
+
return Promise.reject(t);
|
|
4196
|
+
}
|
|
4105
4197
|
_formDataToValues(e) {
|
|
4106
4198
|
const t = {};
|
|
4107
4199
|
return e.forEach((i, s) => {
|
|
4108
4200
|
i instanceof File ? (t[s] || (t[s] = []), t[s].push(i)) : s in t ? Array.isArray(t[s]) ? (t[s].length > 0 && t[s][0] instanceof File, t[s].push(i)) : t[s] = [t[s], i] : t[s] = i;
|
|
4109
|
-
}), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((
|
|
4110
|
-
const a =
|
|
4111
|
-
if (a && typeof
|
|
4112
|
-
const l =
|
|
4201
|
+
}), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((n) => {
|
|
4202
|
+
const a = n.getAttribute("name");
|
|
4203
|
+
if (a && typeof n.files < "u" && n.files) {
|
|
4204
|
+
const l = n.files;
|
|
4113
4205
|
if (l.length > 0) {
|
|
4114
4206
|
const o = Array.from(l);
|
|
4115
|
-
t[a] && Array.isArray(t[a]) ? o.forEach((
|
|
4207
|
+
t[a] && Array.isArray(t[a]) ? o.forEach((d) => {
|
|
4116
4208
|
t[a].some(
|
|
4117
|
-
(
|
|
4118
|
-
) || t[a].push(
|
|
4209
|
+
(m) => m.name === d.name && m.size === d.size && m.lastModified === d.lastModified
|
|
4210
|
+
) || t[a].push(d);
|
|
4119
4211
|
}) : t[a] = o;
|
|
4120
4212
|
}
|
|
4121
4213
|
}
|
|
4122
|
-
}), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((
|
|
4123
|
-
const a =
|
|
4124
|
-
if (a &&
|
|
4125
|
-
const l = Array.from(
|
|
4214
|
+
}), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((n) => {
|
|
4215
|
+
const a = n.name;
|
|
4216
|
+
if (a && n.files && n.files.length > 0) {
|
|
4217
|
+
const l = Array.from(n.files);
|
|
4126
4218
|
t[a] && Array.isArray(t[a]) ? l.forEach((o) => {
|
|
4127
4219
|
t[a].some(
|
|
4128
4220
|
(c) => c.name === o.name && c.size === o.size && c.lastModified === o.lastModified
|
|
4129
4221
|
) || t[a].push(o);
|
|
4130
4222
|
}) : t[a] = l;
|
|
4131
4223
|
}
|
|
4132
|
-
}), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((
|
|
4133
|
-
const a =
|
|
4224
|
+
}), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((n) => {
|
|
4225
|
+
const a = n.getAttribute("name");
|
|
4134
4226
|
if (a) {
|
|
4135
4227
|
let l = [];
|
|
4136
|
-
if (typeof
|
|
4137
|
-
const o = l.map((
|
|
4228
|
+
if (typeof n.tags < "u" ? l = n.tags : typeof n.getTags == "function" && (l = n.getTags()), Array.isArray(l) && l.length > 0) {
|
|
4229
|
+
const o = l.map((d) => typeof d == "string" ? d : (d == null ? void 0 : d.value) || (d == null ? void 0 : d.label) || "").filter((d) => d.trim() !== "");
|
|
4138
4230
|
t[a] = o;
|
|
4139
4231
|
} else
|
|
4140
4232
|
t[a] = [];
|
|
@@ -4144,10 +4236,10 @@ class re extends HTMLElement {
|
|
|
4144
4236
|
_collectValidationRules() {
|
|
4145
4237
|
const e = {};
|
|
4146
4238
|
return this._form && Array.from(this._form.querySelectorAll("[name][validation]")).forEach((i) => {
|
|
4147
|
-
const s = i.getAttribute("name") || "",
|
|
4148
|
-
if (!s || !
|
|
4149
|
-
const
|
|
4150
|
-
|
|
4239
|
+
const s = i.getAttribute("name") || "", r = i.getAttribute("validation");
|
|
4240
|
+
if (!s || !r) return;
|
|
4241
|
+
const n = this._parseRules(r);
|
|
4242
|
+
n.length && (e[s] = n);
|
|
4151
4243
|
}), e;
|
|
4152
4244
|
}
|
|
4153
4245
|
_parseRules(e) {
|
|
@@ -4162,20 +4254,20 @@ class re extends HTMLElement {
|
|
|
4162
4254
|
}
|
|
4163
4255
|
_validate(e, t) {
|
|
4164
4256
|
let i = !0;
|
|
4165
|
-
return this._errors = {}, Object.entries(t || {}).forEach(([s,
|
|
4166
|
-
const
|
|
4257
|
+
return this._errors = {}, Object.entries(t || {}).forEach(([s, r]) => {
|
|
4258
|
+
const n = Array.isArray(r) ? r : [r], a = this._getFieldElements(s), l = this._extractFieldValue(a), o = this._validateRules(l, n);
|
|
4167
4259
|
o ? (i = !1, this._errors[s] = o, this._flagFieldError(a, o)) : this._clearFieldError(a);
|
|
4168
4260
|
}), i;
|
|
4169
4261
|
}
|
|
4170
4262
|
_validateField(e) {
|
|
4171
4263
|
const t = this._collectValidationRules();
|
|
4172
4264
|
if (!t[e]) return;
|
|
4173
|
-
const i = t[e], s = Array.isArray(i) ? i : [i],
|
|
4174
|
-
a ? (this._errors[e] = a, this._flagFieldError(
|
|
4265
|
+
const i = t[e], s = Array.isArray(i) ? i : [i], r = this._getFieldElements(e), n = this._extractFieldValue(r), a = this._validateRules(n, s);
|
|
4266
|
+
a ? (this._errors[e] = a, this._flagFieldError(r, a)) : (this._clearFieldError(r), delete this._errors[e]);
|
|
4175
4267
|
}
|
|
4176
4268
|
_validateRules(e, t) {
|
|
4177
4269
|
for (const i of t) {
|
|
4178
|
-
const [s,
|
|
4270
|
+
const [s, r] = i.split(":");
|
|
4179
4271
|
switch (s) {
|
|
4180
4272
|
case "required": {
|
|
4181
4273
|
if (e == null || typeof e == "string" && e.trim() === "" || e instanceof FileList && e.length === 0 || Array.isArray(e) && e.length === 0) return "This field is required.";
|
|
@@ -4191,26 +4283,26 @@ class re extends HTMLElement {
|
|
|
4191
4283
|
break;
|
|
4192
4284
|
}
|
|
4193
4285
|
case "number": {
|
|
4194
|
-
const
|
|
4195
|
-
if (Number.isNaN(
|
|
4286
|
+
const n = Number(e);
|
|
4287
|
+
if (Number.isNaN(n)) return "Must be a number.";
|
|
4196
4288
|
break;
|
|
4197
4289
|
}
|
|
4198
4290
|
case "min": {
|
|
4199
|
-
const
|
|
4200
|
-
if (Number.isNaN(
|
|
4201
|
-
if (typeof e == "string" && e.trim().length <
|
|
4202
|
-
if (Array.isArray(e) && e.length <
|
|
4203
|
-
if (e instanceof FileList && e.length <
|
|
4204
|
-
if (e != null && !Number.isNaN(Number(e)) && Number(e) <
|
|
4291
|
+
const n = Number(r);
|
|
4292
|
+
if (Number.isNaN(n)) break;
|
|
4293
|
+
if (typeof e == "string" && e.trim().length < n) return `Must be at least ${n} characters.`;
|
|
4294
|
+
if (Array.isArray(e) && e.length < n) return `Select at least ${n}.`;
|
|
4295
|
+
if (e instanceof FileList && e.length < n) return `Upload at least ${n} files.`;
|
|
4296
|
+
if (e != null && !Number.isNaN(Number(e)) && Number(e) < n) return `Must be at least ${n}.`;
|
|
4205
4297
|
break;
|
|
4206
4298
|
}
|
|
4207
4299
|
case "max": {
|
|
4208
|
-
const
|
|
4209
|
-
if (Number.isNaN(
|
|
4210
|
-
if (typeof e == "string" && e.trim().length >
|
|
4211
|
-
if (Array.isArray(e) && e.length >
|
|
4212
|
-
if (e instanceof FileList && e.length >
|
|
4213
|
-
if (e != null && !Number.isNaN(Number(e)) && Number(e) >
|
|
4300
|
+
const n = Number(r);
|
|
4301
|
+
if (Number.isNaN(n)) break;
|
|
4302
|
+
if (typeof e == "string" && e.trim().length > n) return `Must be at most ${n} characters.`;
|
|
4303
|
+
if (Array.isArray(e) && e.length > n) return `Select no more than ${n}.`;
|
|
4304
|
+
if (e instanceof FileList && e.length > n) return `Upload no more than ${n} files.`;
|
|
4305
|
+
if (e != null && !Number.isNaN(Number(e)) && Number(e) > n) return `Must be at most ${n}.`;
|
|
4214
4306
|
break;
|
|
4215
4307
|
}
|
|
4216
4308
|
}
|
|
@@ -4219,23 +4311,23 @@ class re extends HTMLElement {
|
|
|
4219
4311
|
}
|
|
4220
4312
|
_getFieldElements(e) {
|
|
4221
4313
|
if (!this._form) return [];
|
|
4222
|
-
const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((
|
|
4314
|
+
const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((n) => n.tagName === "MINT-SELECT");
|
|
4223
4315
|
if (i.length > 0) {
|
|
4224
|
-
const
|
|
4316
|
+
const n = [];
|
|
4225
4317
|
return i.forEach((a) => {
|
|
4226
4318
|
const l = a.querySelector('select[name="' + e + '"]');
|
|
4227
|
-
l &&
|
|
4228
|
-
}), t.filter((a) => a.tagName !== "MINT-SELECT").concat(
|
|
4319
|
+
l && n.push(l);
|
|
4320
|
+
}), t.filter((a) => a.tagName !== "MINT-SELECT").concat(n);
|
|
4229
4321
|
}
|
|
4230
|
-
if (t.filter((
|
|
4231
|
-
return t.filter((
|
|
4232
|
-
const
|
|
4233
|
-
if (
|
|
4234
|
-
const
|
|
4235
|
-
return
|
|
4322
|
+
if (t.filter((n) => n.tagName === "MINT-TAGS").length > 0)
|
|
4323
|
+
return t.filter((n) => n.tagName !== "INPUT" || !n.closest("mint-tags"));
|
|
4324
|
+
const r = t.filter((n) => n.tagName === "INPUT" && n.closest("mint-tags"));
|
|
4325
|
+
if (r.length > 0) {
|
|
4326
|
+
const n = [];
|
|
4327
|
+
return r.forEach((a) => {
|
|
4236
4328
|
const l = a.closest("mint-tags");
|
|
4237
|
-
l && !
|
|
4238
|
-
}), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(
|
|
4329
|
+
l && !n.includes(l) && n.push(l);
|
|
4330
|
+
}), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(n);
|
|
4239
4331
|
}
|
|
4240
4332
|
return t;
|
|
4241
4333
|
}
|
|
@@ -4253,9 +4345,9 @@ class re extends HTMLElement {
|
|
|
4253
4345
|
if (s.every((l) => l.type === "checkbox"))
|
|
4254
4346
|
return a.map((l) => l.value || "on");
|
|
4255
4347
|
}
|
|
4256
|
-
const
|
|
4257
|
-
if (
|
|
4258
|
-
const a =
|
|
4348
|
+
const r = e.filter((a) => a.tagName === "MINT-CHOICE");
|
|
4349
|
+
if (r.length > 0 && r.length === e.length) {
|
|
4350
|
+
const a = r.find((l) => typeof l.getValue == "function" ? l.getValue() !== "" : l.querySelector("mint-choice-option[checked]") !== null);
|
|
4259
4351
|
if (a) {
|
|
4260
4352
|
if (typeof a.getValue == "function")
|
|
4261
4353
|
return a.getValue();
|
|
@@ -4265,9 +4357,9 @@ class re extends HTMLElement {
|
|
|
4265
4357
|
}
|
|
4266
4358
|
return "";
|
|
4267
4359
|
}
|
|
4268
|
-
const
|
|
4269
|
-
if (
|
|
4270
|
-
return
|
|
4360
|
+
const n = e.filter((a) => a.tagName === "MINT-CHECKBOX");
|
|
4361
|
+
if (n.length > 0 && n.length === e.length)
|
|
4362
|
+
return n.filter((l) => typeof l.checked < "u" ? l.checked : l.hasAttribute("checked")).map((l) => l.getAttribute("value") || "on");
|
|
4271
4363
|
}
|
|
4272
4364
|
const i = e[0];
|
|
4273
4365
|
if (i instanceof HTMLInputElement)
|
|
@@ -4279,18 +4371,18 @@ class re extends HTMLElement {
|
|
|
4279
4371
|
if (s)
|
|
4280
4372
|
return s.value;
|
|
4281
4373
|
if (typeof i.getValue == "function") {
|
|
4282
|
-
const
|
|
4283
|
-
if (
|
|
4284
|
-
return
|
|
4374
|
+
const n = i.getValue();
|
|
4375
|
+
if (n != null && n !== "")
|
|
4376
|
+
return n;
|
|
4285
4377
|
}
|
|
4286
|
-
const
|
|
4287
|
-
return
|
|
4378
|
+
const r = i.getAttribute("value");
|
|
4379
|
+
return r || "";
|
|
4288
4380
|
}
|
|
4289
4381
|
if (i.tagName === "MINT-DROPZONE" && typeof i.files < "u")
|
|
4290
4382
|
return i.files;
|
|
4291
4383
|
if (i.tagName === "MINT-TAGS") {
|
|
4292
4384
|
let s = null;
|
|
4293
|
-
return typeof i.tags < "u" ? s = i.tags : typeof i.getTags == "function" && (s = i.getTags()), Array.isArray(s) ? s.map((
|
|
4385
|
+
return typeof i.tags < "u" ? s = i.tags : typeof i.getTags == "function" && (s = i.getTags()), Array.isArray(s) ? s.map((n) => typeof n == "string" ? n : (n == null ? void 0 : n.value) || (n == null ? void 0 : n.label) || "").filter((n) => n.trim() !== "") : [];
|
|
4294
4386
|
}
|
|
4295
4387
|
return i.tagName === "MINT-CHECKBOX" || i.tagName === "MINT-SWITCH" ? (typeof i.checked < "u" ? i.checked : i.hasAttribute("checked")) ? i.getAttribute("value") || "on" : "" : i.tagName === "MINT-CHOICE" ? (typeof i.getValue == "function" ? i.getValue() : "") || "" : typeof i.value < "u" ? i.value : i.getAttribute("value") || "";
|
|
4296
4388
|
}
|
|
@@ -4334,6 +4426,20 @@ class re extends HTMLElement {
|
|
|
4334
4426
|
else
|
|
4335
4427
|
this._formData = null;
|
|
4336
4428
|
}
|
|
4429
|
+
_parseHeaders(e) {
|
|
4430
|
+
if (!e) {
|
|
4431
|
+
this._headers = null;
|
|
4432
|
+
return;
|
|
4433
|
+
}
|
|
4434
|
+
if (typeof e == "string")
|
|
4435
|
+
try {
|
|
4436
|
+
this._headers = JSON.parse(e);
|
|
4437
|
+
} catch {
|
|
4438
|
+
this._headers = null;
|
|
4439
|
+
}
|
|
4440
|
+
else
|
|
4441
|
+
this._headers = null;
|
|
4442
|
+
}
|
|
4337
4443
|
_applyFormData() {
|
|
4338
4444
|
if (!this._formData || !this._form) return;
|
|
4339
4445
|
const e = () => {
|
|
@@ -4341,8 +4447,8 @@ class re extends HTMLElement {
|
|
|
4341
4447
|
const s = this._getFieldElements(t);
|
|
4342
4448
|
if (s.length === 0) {
|
|
4343
4449
|
setTimeout(() => {
|
|
4344
|
-
const
|
|
4345
|
-
|
|
4450
|
+
const r = this._getFieldElements(t);
|
|
4451
|
+
r.length > 0 && this._applyValueToField(r, t, i);
|
|
4346
4452
|
}, 300);
|
|
4347
4453
|
return;
|
|
4348
4454
|
}
|
|
@@ -4357,23 +4463,23 @@ class re extends HTMLElement {
|
|
|
4357
4463
|
}
|
|
4358
4464
|
_applyValueToField(e, t, i) {
|
|
4359
4465
|
e.forEach((s) => {
|
|
4360
|
-
var
|
|
4361
|
-
const
|
|
4466
|
+
var n;
|
|
4467
|
+
const r = s.tagName;
|
|
4362
4468
|
try {
|
|
4363
|
-
if (
|
|
4469
|
+
if (r === "MINT-INPUT")
|
|
4364
4470
|
typeof s.value < "u" && (s.value = i || "");
|
|
4365
|
-
else if (
|
|
4471
|
+
else if (r === "MINT-DATE-PICKER")
|
|
4366
4472
|
typeof s.setValue == "function" && s.setValue(i || "");
|
|
4367
|
-
else if (
|
|
4368
|
-
|
|
4369
|
-
else if (
|
|
4473
|
+
else if (r === "MINT-SELECT" || r === "SELECT")
|
|
4474
|
+
r === "SELECT" ? (n = s.closest("mint-select")) == null || n.setValue(i || "") : typeof s.setValue == "function" && s.setValue(i || "");
|
|
4475
|
+
else if (r === "MINT-CHOICE")
|
|
4370
4476
|
typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((l) => {
|
|
4371
4477
|
l.checked = l.getAttribute("value") === i;
|
|
4372
4478
|
});
|
|
4373
|
-
else if (
|
|
4479
|
+
else if (r === "MINT-CHECKBOX" || r === "MINT-SWITCH") {
|
|
4374
4480
|
const a = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
|
|
4375
4481
|
typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "") : s.removeAttribute("checked");
|
|
4376
|
-
} else
|
|
4482
|
+
} else r === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((a) => typeof a == "string" ? { value: a, label: a, dismissable: !0 } : a)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
|
|
4377
4483
|
} catch (a) {
|
|
4378
4484
|
console.warn(`Failed to set value for field ${t}:`, a);
|
|
4379
4485
|
}
|
|
@@ -4381,7 +4487,7 @@ class re extends HTMLElement {
|
|
|
4381
4487
|
}
|
|
4382
4488
|
_resetCustomFields() {
|
|
4383
4489
|
this.querySelectorAll("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags").forEach((t) => {
|
|
4384
|
-
var s,
|
|
4490
|
+
var s, r;
|
|
4385
4491
|
t.removeAttribute("error"), t.removeAttribute("error-message");
|
|
4386
4492
|
const i = t.tagName;
|
|
4387
4493
|
if (i === "MINT-INPUT")
|
|
@@ -4396,20 +4502,20 @@ class re extends HTMLElement {
|
|
|
4396
4502
|
}
|
|
4397
4503
|
else if (i === "MINT-SELECT")
|
|
4398
4504
|
try {
|
|
4399
|
-
(
|
|
4505
|
+
(r = t.setValue) == null || r.call(t, "");
|
|
4400
4506
|
} catch {
|
|
4401
4507
|
}
|
|
4402
4508
|
else if (i === "MINT-DROPZONE") {
|
|
4403
|
-
const
|
|
4404
|
-
|
|
4509
|
+
const n = t.querySelector('input[type="file"]');
|
|
4510
|
+
n && (n.value = "");
|
|
4405
4511
|
} else if (i === "MINT-CHECKBOX" || i === "MINT-SWITCH")
|
|
4406
4512
|
try {
|
|
4407
4513
|
if (typeof t.checked < "u")
|
|
4408
4514
|
t.checked = !1;
|
|
4409
4515
|
else {
|
|
4410
4516
|
t.removeAttribute("checked");
|
|
4411
|
-
const
|
|
4412
|
-
|
|
4517
|
+
const n = t.querySelector('input[type="checkbox"], input[type="radio"]');
|
|
4518
|
+
n && (n.checked = !1);
|
|
4413
4519
|
}
|
|
4414
4520
|
} catch {
|
|
4415
4521
|
}
|
|
@@ -4440,13 +4546,13 @@ class re extends HTMLElement {
|
|
|
4440
4546
|
const e = (i) => {
|
|
4441
4547
|
const s = i.target;
|
|
4442
4548
|
if (!s) return;
|
|
4443
|
-
const
|
|
4444
|
-
if (!
|
|
4445
|
-
const
|
|
4446
|
-
if (!
|
|
4447
|
-
const l = this._extractFieldValue([
|
|
4448
|
-
(o ||
|
|
4449
|
-
this._validateField(
|
|
4549
|
+
const r = this._findFieldElement(s);
|
|
4550
|
+
if (!r) return;
|
|
4551
|
+
const n = this._getFieldName(r);
|
|
4552
|
+
if (!n || !this._collectValidationRules()[n]) return;
|
|
4553
|
+
const l = this._extractFieldValue([r]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), d = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), c = !!r.closest("mint-tags"), m = r.tagName === "MINT-CHECKBOX" || r.tagName === "MINT-SWITCH" || r.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), h = r.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
|
|
4554
|
+
(o || d || c || m || h) && setTimeout(() => {
|
|
4555
|
+
this._validateField(n);
|
|
4450
4556
|
}, 0);
|
|
4451
4557
|
};
|
|
4452
4558
|
this._form.addEventListener("blur", e, !0), this._fieldBlurHandlers.set(this._form, e);
|
|
@@ -4454,7 +4560,7 @@ class re extends HTMLElement {
|
|
|
4454
4560
|
const s = i.target;
|
|
4455
4561
|
if (!s) return;
|
|
4456
4562
|
if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
|
|
4457
|
-
const
|
|
4563
|
+
const d = s, c = this._getFieldName(d);
|
|
4458
4564
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4459
4565
|
setTimeout(() => {
|
|
4460
4566
|
this._validateField(c);
|
|
@@ -4462,9 +4568,9 @@ class re extends HTMLElement {
|
|
|
4462
4568
|
return;
|
|
4463
4569
|
}
|
|
4464
4570
|
if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
|
|
4465
|
-
const
|
|
4466
|
-
if (!
|
|
4467
|
-
const c = this._getFieldName(
|
|
4571
|
+
const d = this._findFieldElement(s);
|
|
4572
|
+
if (!d) return;
|
|
4573
|
+
const c = this._getFieldName(d);
|
|
4468
4574
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4469
4575
|
setTimeout(() => {
|
|
4470
4576
|
this._validateField(c);
|
|
@@ -4472,7 +4578,7 @@ class re extends HTMLElement {
|
|
|
4472
4578
|
return;
|
|
4473
4579
|
}
|
|
4474
4580
|
if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
|
|
4475
|
-
const
|
|
4581
|
+
const d = s, c = this._getFieldName(d);
|
|
4476
4582
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4477
4583
|
setTimeout(() => {
|
|
4478
4584
|
this._validateField(c);
|
|
@@ -4480,9 +4586,9 @@ class re extends HTMLElement {
|
|
|
4480
4586
|
return;
|
|
4481
4587
|
}
|
|
4482
4588
|
if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
|
|
4483
|
-
const
|
|
4484
|
-
if (!
|
|
4485
|
-
const c = this._getFieldName(
|
|
4589
|
+
const d = this._findFieldElement(s);
|
|
4590
|
+
if (!d) return;
|
|
4591
|
+
const c = this._getFieldName(d);
|
|
4486
4592
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4487
4593
|
setTimeout(() => {
|
|
4488
4594
|
this._validateField(c);
|
|
@@ -4543,8 +4649,44 @@ class re extends HTMLElement {
|
|
|
4543
4649
|
t ? s.setAttribute("loading", "") : s.removeAttribute("loading"), typeof s.render == "function" && s.render();
|
|
4544
4650
|
});
|
|
4545
4651
|
}
|
|
4652
|
+
_setButtonsSubmitting() {
|
|
4653
|
+
if (!this._form) return;
|
|
4654
|
+
this._buttonStates.clear();
|
|
4655
|
+
const e = Array.from(this._form.querySelectorAll("mint-button")), t = Array.from(this._form.querySelectorAll("button"));
|
|
4656
|
+
e.forEach((i) => {
|
|
4657
|
+
const s = i.hasAttribute("disabled"), r = i.hasAttribute("loading");
|
|
4658
|
+
this._buttonStates.set(i, { disabled: s, loading: r });
|
|
4659
|
+
const a = (i.getAttribute("type") || i.getAttribute("button-type") || "default") === "submit";
|
|
4660
|
+
i.setAttribute("disabled", ""), a && i.setAttribute("loading", ""), typeof i.render == "function" && i.render();
|
|
4661
|
+
}), t.forEach((i) => {
|
|
4662
|
+
const s = i.disabled;
|
|
4663
|
+
this._buttonStates.set(i, { disabled: s, loading: !1 }), i.disabled = !0;
|
|
4664
|
+
});
|
|
4665
|
+
}
|
|
4666
|
+
_restoreButtonsState() {
|
|
4667
|
+
this._form && (this._buttonStates.forEach((e, t) => {
|
|
4668
|
+
t.tagName === "MINT-BUTTON" ? (e.disabled ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"), e.loading ? t.setAttribute("loading", "") : t.removeAttribute("loading"), typeof t.render == "function" && t.render()) : t instanceof HTMLButtonElement && (t.disabled = e.disabled);
|
|
4669
|
+
}), this._buttonStates.clear());
|
|
4670
|
+
}
|
|
4546
4671
|
}
|
|
4547
4672
|
customElements.get("mint-form") || customElements.define("mint-form", re);
|
|
4673
|
+
typeof window < "u" && (window.mintForm = window.mintForm || {
|
|
4674
|
+
defaults: {
|
|
4675
|
+
headers: {
|
|
4676
|
+
common: {}
|
|
4677
|
+
}
|
|
4678
|
+
},
|
|
4679
|
+
interceptors: {
|
|
4680
|
+
response: {
|
|
4681
|
+
handlers: []
|
|
4682
|
+
}
|
|
4683
|
+
}
|
|
4684
|
+
}, window.mintForm.interceptors.response.use || (window.mintForm.interceptors.response.use = function(w, e) {
|
|
4685
|
+
return window.mintForm.interceptors.response.handlers.push({
|
|
4686
|
+
fulfilled: w,
|
|
4687
|
+
rejected: e
|
|
4688
|
+
}), window.mintForm.interceptors.response.handlers.length - 1;
|
|
4689
|
+
}));
|
|
4548
4690
|
class ne extends HTMLElement {
|
|
4549
4691
|
constructor() {
|
|
4550
4692
|
super(...arguments), this._observer = null;
|
|
@@ -4591,8 +4733,8 @@ class ne extends HTMLElement {
|
|
|
4591
4733
|
}
|
|
4592
4734
|
const t = this.hasAttribute("collapse") && !this.hasAttribute("scroll"), i = this.hasAttribute("scroll");
|
|
4593
4735
|
i ? this.classList.add("relative") : this.classList.remove("relative");
|
|
4594
|
-
const s = [],
|
|
4595
|
-
|
|
4736
|
+
const s = [], r = e.querySelector("thead tr");
|
|
4737
|
+
r && r.querySelectorAll("th").forEach((d) => s.push((d.textContent || "").trim())), this._setClasses(e, [
|
|
4596
4738
|
"w-full",
|
|
4597
4739
|
i ? "min-w-[1200px]" : "",
|
|
4598
4740
|
"border-collapse",
|
|
@@ -4604,12 +4746,12 @@ class ne extends HTMLElement {
|
|
|
4604
4746
|
"dark:border-gray-700",
|
|
4605
4747
|
"overflow-hidden"
|
|
4606
4748
|
]);
|
|
4607
|
-
const
|
|
4608
|
-
|
|
4749
|
+
const n = e.querySelector("thead");
|
|
4750
|
+
n && (this._setClasses(n, [
|
|
4609
4751
|
"bg-[#F7F7F7]",
|
|
4610
4752
|
"dark:bg-gray-800"
|
|
4611
|
-
]),
|
|
4612
|
-
this._setClasses(
|
|
4753
|
+
]), n.querySelectorAll("th").forEach((d) => {
|
|
4754
|
+
this._setClasses(d, [
|
|
4613
4755
|
"text-left",
|
|
4614
4756
|
"font-semibold",
|
|
4615
4757
|
"text-gray-900",
|
|
@@ -4624,20 +4766,20 @@ class ne extends HTMLElement {
|
|
|
4624
4766
|
const a = e.querySelector("tbody");
|
|
4625
4767
|
if (a) {
|
|
4626
4768
|
const o = Array.from(a.querySelectorAll("tr"));
|
|
4627
|
-
o.forEach((
|
|
4628
|
-
this._setClasses(
|
|
4769
|
+
o.forEach((d, c) => {
|
|
4770
|
+
this._setClasses(d, [
|
|
4629
4771
|
"bg-white",
|
|
4630
4772
|
"dark:bg-gray-900",
|
|
4631
4773
|
"border-b",
|
|
4632
4774
|
"border-gray-200",
|
|
4633
4775
|
"dark:border-gray-700"
|
|
4634
|
-
]), c === o.length - 1 &&
|
|
4635
|
-
this._setClasses(
|
|
4776
|
+
]), c === o.length - 1 && d.classList.remove("border-b"), d.querySelectorAll("td").forEach((h) => {
|
|
4777
|
+
this._setClasses(h, [
|
|
4636
4778
|
"text-gray-900",
|
|
4637
4779
|
"dark:text-gray-100",
|
|
4638
4780
|
"px-3",
|
|
4639
4781
|
"py-2"
|
|
4640
|
-
]), t ? this._applyMobileCell(
|
|
4782
|
+
]), t ? this._applyMobileCell(h, s) : this._restoreCell(h);
|
|
4641
4783
|
});
|
|
4642
4784
|
});
|
|
4643
4785
|
}
|
|
@@ -4646,8 +4788,8 @@ class ne extends HTMLElement {
|
|
|
4646
4788
|
"bg-[#F7F7F7]",
|
|
4647
4789
|
"dark:bg-gray-800",
|
|
4648
4790
|
"font-semibold"
|
|
4649
|
-
]), l.querySelectorAll("td").forEach((
|
|
4650
|
-
this._setClasses(
|
|
4791
|
+
]), l.querySelectorAll("td").forEach((d) => {
|
|
4792
|
+
this._setClasses(d, [
|
|
4651
4793
|
"text-gray-900",
|
|
4652
4794
|
"dark:text-gray-100",
|
|
4653
4795
|
"px-3",
|
|
@@ -4655,17 +4797,17 @@ class ne extends HTMLElement {
|
|
|
4655
4797
|
"border-t",
|
|
4656
4798
|
"border-gray-200",
|
|
4657
4799
|
"dark:border-gray-700"
|
|
4658
|
-
]), this._restoreCell(
|
|
4800
|
+
]), this._restoreCell(d);
|
|
4659
4801
|
})), this._observer && this._observeChanges();
|
|
4660
4802
|
}
|
|
4661
4803
|
_applyMobileCell(e, t) {
|
|
4662
4804
|
if (e.closest("tfoot") || e.dataset.mtProcessed === "true") return;
|
|
4663
|
-
const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"),
|
|
4664
|
-
e.setAttribute("data-original",
|
|
4665
|
-
const
|
|
4666
|
-
|
|
4805
|
+
const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"), r = s !== null ? s : e.innerHTML;
|
|
4806
|
+
e.setAttribute("data-original", r), e.dataset.mtProcessed = "true", e.innerHTML = "";
|
|
4807
|
+
const n = document.createElement("span");
|
|
4808
|
+
n.className = "mt-label font-semibold text-gray-700 dark:text-gray-200 hidden", n.textContent = i;
|
|
4667
4809
|
const a = document.createElement("span");
|
|
4668
|
-
a.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", a.innerHTML =
|
|
4810
|
+
a.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", a.innerHTML = r, e.appendChild(n), e.appendChild(a);
|
|
4669
4811
|
}
|
|
4670
4812
|
_restoreCell(e) {
|
|
4671
4813
|
if (e.dataset.mtProcessed !== "true") return;
|
|
@@ -4835,7 +4977,7 @@ class oe extends HTMLElement {
|
|
|
4835
4977
|
if (t !== i) {
|
|
4836
4978
|
if (e === "error" || e === "error-message") {
|
|
4837
4979
|
if (this._renderErrorState(), this._container) {
|
|
4838
|
-
const s = this.hasError(),
|
|
4980
|
+
const s = this.hasError(), r = [
|
|
4839
4981
|
"flex",
|
|
4840
4982
|
"flex-wrap",
|
|
4841
4983
|
"items-center",
|
|
@@ -4855,7 +4997,7 @@ class oe extends HTMLElement {
|
|
|
4855
4997
|
"transition-colors",
|
|
4856
4998
|
"duration-200"
|
|
4857
4999
|
];
|
|
4858
|
-
this._container.className =
|
|
5000
|
+
this._container.className = r.join(" ");
|
|
4859
5001
|
}
|
|
4860
5002
|
return;
|
|
4861
5003
|
}
|
|
@@ -4913,8 +5055,8 @@ class oe extends HTMLElement {
|
|
|
4913
5055
|
}
|
|
4914
5056
|
_render() {
|
|
4915
5057
|
this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
|
|
4916
|
-
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(),
|
|
4917
|
-
if (this.getId() || this.setAttribute("id",
|
|
5058
|
+
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(), r = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
|
|
5059
|
+
if (this.getId() || this.setAttribute("id", r), this._container)
|
|
4918
5060
|
this._input && (this._input.placeholder = this._placeholder);
|
|
4919
5061
|
else {
|
|
4920
5062
|
this._container = document.createElement("div");
|
|
@@ -4938,10 +5080,10 @@ class oe extends HTMLElement {
|
|
|
4938
5080
|
"transition-colors",
|
|
4939
5081
|
"duration-200"
|
|
4940
5082
|
];
|
|
4941
|
-
this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (
|
|
4942
|
-
this.hasAttribute("sortable") &&
|
|
4943
|
-
}), this._chipsWrap.addEventListener("drop", (
|
|
4944
|
-
this.hasAttribute("sortable") &&
|
|
5083
|
+
this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (d) => {
|
|
5084
|
+
this.hasAttribute("sortable") && d.preventDefault();
|
|
5085
|
+
}), this._chipsWrap.addEventListener("drop", (d) => {
|
|
5086
|
+
this.hasAttribute("sortable") && d.preventDefault();
|
|
4945
5087
|
}), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
|
|
4946
5088
|
"min-w-[6rem]",
|
|
4947
5089
|
"flex-1",
|
|
@@ -4954,8 +5096,8 @@ class oe extends HTMLElement {
|
|
|
4954
5096
|
"placeholder:text-gray-400",
|
|
4955
5097
|
"dark:placeholder:text-gray-500",
|
|
4956
5098
|
"p-1.5"
|
|
4957
|
-
].join(" "), this._input.addEventListener("keydown", (
|
|
4958
|
-
|
|
5099
|
+
].join(" "), this._input.addEventListener("keydown", (d) => {
|
|
5100
|
+
d.key === "Enter" && (d.preventDefault(), this._addFromInput());
|
|
4959
5101
|
}), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
|
|
4960
5102
|
}
|
|
4961
5103
|
if (this._container) {
|
|
@@ -4981,16 +5123,16 @@ class oe extends HTMLElement {
|
|
|
4981
5123
|
];
|
|
4982
5124
|
this._container.className = o.join(" ");
|
|
4983
5125
|
}
|
|
4984
|
-
let
|
|
5126
|
+
let n = this.querySelector(".mint-tags-label-container");
|
|
4985
5127
|
if (t) {
|
|
4986
|
-
|
|
4987
|
-
let o =
|
|
4988
|
-
t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none",
|
|
4989
|
-
} else
|
|
5128
|
+
n || (n = document.createElement("div"), n.className = "mint-tags-label-container mb-[.25rem]", this._container && this._container.parentElement === this ? this.insertBefore(n, this._container) : this.insertBefore(n, this.firstChild));
|
|
5129
|
+
let o = n.querySelector(".mint-tags-label");
|
|
5130
|
+
t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.appendChild(o)), o.textContent = t, o.setAttribute("for", r)) : o && o.remove();
|
|
5131
|
+
} else n && n.remove();
|
|
4990
5132
|
let a = this.querySelector(".mint-tags-info");
|
|
4991
5133
|
i ? (a || (a = document.createElement("span"), a.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", this._container && this._container.parentElement === this ? this.insertBefore(a, this._container.nextSibling) : this.appendChild(a)), a.textContent = i) : a && a.remove();
|
|
4992
5134
|
const l = this.getName();
|
|
4993
|
-
l ? (this.setAttribute("name", l), this._input && (this._input.name = l, this._input.id =
|
|
5135
|
+
l ? (this.setAttribute("name", l), this._input && (this._input.name = l, this._input.id = r)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = r)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState(), this._renderSkeleton(e);
|
|
4994
5136
|
}
|
|
4995
5137
|
_renderSkeleton(e) {
|
|
4996
5138
|
const t = this._container;
|
|
@@ -5012,7 +5154,7 @@ class oe extends HTMLElement {
|
|
|
5012
5154
|
const i = document.createElement("mint-chip");
|
|
5013
5155
|
i.dataset.index = String(e++), i.dataset.value = t.value, i.draggable = this.hasAttribute("sortable"), i.draggable && i.classList.add("cursor-move"), t.dismissable && (i.setAttribute("dismissable", ""), i.addEventListener("dismissed", () => this._removeTag(t.value))), this._chipsWrap.appendChild(i);
|
|
5014
5156
|
const s = i.querySelector("[data-mt-chip-text]");
|
|
5015
|
-
s && (s.textContent = t.label || t.value), this._setupChipEvents(i, t), i.draggable && (i.addEventListener("dragstart", (
|
|
5157
|
+
s && (s.textContent = t.label || t.value), this._setupChipEvents(i, t), i.draggable && (i.addEventListener("dragstart", (r) => this._onDragStart(r, i)), i.addEventListener("dragover", (r) => this._onDragOverChip(r, i)), i.addEventListener("drop", (r) => this._onDrop(r)), i.addEventListener("dragend", () => this._onDragEnd())), this.hasAttribute("sortable") && i.addEventListener("pointerdown", (r) => this._onPointerDown(r, i));
|
|
5016
5158
|
}), this._input && (this.hasAttribute("sortable") && (this._input.addEventListener("dragover", (t) => this._onDragOverInput(t)), this._input.addEventListener("drop", (t) => this._onDrop(t)), this._input.addEventListener("dragend", () => this._onDragEnd())), this._chipsWrap.appendChild(this._input));
|
|
5017
5159
|
}
|
|
5018
5160
|
_addFromInput() {
|
|
@@ -5075,14 +5217,14 @@ class oe extends HTMLElement {
|
|
|
5075
5217
|
}
|
|
5076
5218
|
_onDragOverChip(e, t) {
|
|
5077
5219
|
if (!this.hasAttribute("sortable") || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), !this._dragChip || !this._chipsWrap) || t === this._dragChip) return;
|
|
5078
|
-
const i = t.getBoundingClientRect(), s = e.clientX,
|
|
5079
|
-
if (s <
|
|
5220
|
+
const i = t.getBoundingClientRect(), s = e.clientX, r = i.left + i.width * 0.5;
|
|
5221
|
+
if (s < r) {
|
|
5080
5222
|
if (this._dragChip.nextSibling === t) return;
|
|
5081
5223
|
this._chipsWrap.insertBefore(this._dragChip, t);
|
|
5082
5224
|
} else {
|
|
5083
5225
|
if (t.nextSibling === this._dragChip) return;
|
|
5084
|
-
const
|
|
5085
|
-
|
|
5226
|
+
const n = t.nextSibling;
|
|
5227
|
+
n ? this._chipsWrap.insertBefore(this._dragChip, n) : this._chipsWrap.appendChild(this._dragChip);
|
|
5086
5228
|
}
|
|
5087
5229
|
}
|
|
5088
5230
|
_onDrop(e) {
|
|
@@ -5099,8 +5241,8 @@ class oe extends HTMLElement {
|
|
|
5099
5241
|
e.forEach((i) => {
|
|
5100
5242
|
const s = i.dataset.value;
|
|
5101
5243
|
if (!s) return;
|
|
5102
|
-
const
|
|
5103
|
-
|
|
5244
|
+
const r = this._tags.find((n) => n.value === s);
|
|
5245
|
+
r && t.push(r);
|
|
5104
5246
|
}), t.length === this._tags.length && (this._tags = t, this._syncAttr(), this._renderChips(), this._emitChange());
|
|
5105
5247
|
}
|
|
5106
5248
|
// Pointer-based sortable for touch (and optionally mouse)
|
|
@@ -5120,8 +5262,8 @@ class oe extends HTMLElement {
|
|
|
5120
5262
|
if (!t) return;
|
|
5121
5263
|
const i = t.closest("mint-chip");
|
|
5122
5264
|
if (i && i !== this._dragChip) {
|
|
5123
|
-
const s = i.getBoundingClientRect(),
|
|
5124
|
-
if (
|
|
5265
|
+
const s = i.getBoundingClientRect(), r = e.clientX, n = s.left + s.width * 0.5;
|
|
5266
|
+
if (r < n)
|
|
5125
5267
|
this._dragChip.nextSibling !== i && this._chipsWrap.insertBefore(this._dragChip, i);
|
|
5126
5268
|
else if (i.nextSibling !== this._dragChip) {
|
|
5127
5269
|
const a = i.nextSibling;
|
|
@@ -5295,25 +5437,25 @@ class ce extends HTMLElement {
|
|
|
5295
5437
|
this.className = `box-border m-0 p-0 border-0 align-baseline block rounded-lg border shadow-sm overflow-hidden transition-colors duration-200 ${this.getBorderClasses()}`;
|
|
5296
5438
|
const s = this.getAriaLive();
|
|
5297
5439
|
this.setAttribute("role", "alert"), this.setAttribute("aria-live", s), e === "danger" ? this.setAttribute("aria-atomic", "true") : this.removeAttribute("aria-atomic");
|
|
5298
|
-
const
|
|
5440
|
+
const r = [];
|
|
5299
5441
|
for (this._bodyWrapper ? Array.from(this._bodyWrapper.childNodes).forEach((a) => {
|
|
5300
|
-
|
|
5301
|
-
}) : Array.from(this.childNodes).forEach((
|
|
5302
|
-
|
|
5442
|
+
r.push(a);
|
|
5443
|
+
}) : Array.from(this.childNodes).forEach((n) => {
|
|
5444
|
+
n !== this._headerWrapper && n !== this._bodyWrapper && n !== this._iconElement && n !== this._headingElement && n !== this._dismissButton && r.push(n);
|
|
5303
5445
|
}), this._dismissButton && this._dismissHandler && this._dismissButton.removeEventListener("click", this._dismissHandler); this.firstChild; )
|
|
5304
5446
|
this.removeChild(this.firstChild);
|
|
5305
5447
|
if (this._headerWrapper = null, this._bodyWrapper = null, this._iconElement = null, this._headingElement = null, this._dismissButton = null, this._headerWrapper = document.createElement("div"), this._headerWrapper.className = `px-4 py-3 flex items-center gap-3 ${this.getHeaderBackgroundClasses()}`, this._iconElement = document.createElement("mint-icon"), this._iconElement.setAttribute("name", this.getIconName()), this._iconElement.className = `flex-shrink-0 w-5 h-5 ${this.getIconColorClasses()}`, this._headerWrapper.appendChild(this._iconElement), this._headingElement = document.createElement("mint-text"), this._headingElement.className = `font-semibold flex-1 ${this.getHeadingColorClasses()}`, this._headingElement.textContent = t || "", this._headerWrapper.appendChild(this._headingElement), i) {
|
|
5306
5448
|
this._dismissButton = document.createElement("button"), this._dismissButton.className = "flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors", this._dismissButton.setAttribute("aria-label", "Dismiss alert"), this._dismissButton.setAttribute("type", "button");
|
|
5307
|
-
const
|
|
5308
|
-
|
|
5449
|
+
const n = document.createElement("mint-icon");
|
|
5450
|
+
n.setAttribute("name", "close"), n.className = "w-4 h-4 text-gray-700 dark:text-gray-300", this._dismissButton.appendChild(n), this._dismissHandler = (a) => {
|
|
5309
5451
|
a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", {
|
|
5310
5452
|
bubbles: !0,
|
|
5311
5453
|
composed: !0
|
|
5312
5454
|
})), this.remove();
|
|
5313
5455
|
}, this._dismissButton.addEventListener("click", this._dismissHandler), this._headerWrapper.appendChild(this._dismissButton);
|
|
5314
5456
|
}
|
|
5315
|
-
this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800",
|
|
5316
|
-
this._bodyWrapper.appendChild(
|
|
5457
|
+
this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800", r.forEach((n) => {
|
|
5458
|
+
this._bodyWrapper.appendChild(n);
|
|
5317
5459
|
}), this.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
|
|
5318
5460
|
}
|
|
5319
5461
|
}
|
|
@@ -5331,14 +5473,14 @@ export {
|
|
|
5331
5473
|
se as Dropzone,
|
|
5332
5474
|
re as Form,
|
|
5333
5475
|
G as Grid,
|
|
5334
|
-
|
|
5476
|
+
O as Icon,
|
|
5335
5477
|
ee as Input,
|
|
5336
5478
|
$ as Link,
|
|
5337
5479
|
J as Modal,
|
|
5338
5480
|
U as Page,
|
|
5339
5481
|
X as Popover,
|
|
5340
5482
|
ie as Select,
|
|
5341
|
-
|
|
5483
|
+
B as Spinner,
|
|
5342
5484
|
R as Stack,
|
|
5343
5485
|
W as Switch,
|
|
5344
5486
|
ne as Table,
|