monobill-mintui 0.2.8 → 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 +3 -0
- package/dist/components/form/Form.d.ts.map +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.js +611 -588
- 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,10 +134,10 @@ 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
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
143
|
m && this.classList.add(m);
|
|
@@ -154,7 +154,7 @@ class B extends HTMLElement {
|
|
|
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; )
|
|
@@ -561,24 +561,24 @@ class z extends HTMLElement {
|
|
|
561
561
|
const p = document.createElement("mint-spinner");
|
|
562
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 u =
|
|
574
|
-
if (
|
|
575
|
-
const p = (
|
|
576
|
-
u ||
|
|
577
|
-
} else if (
|
|
578
|
-
|
|
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
579
|
const p = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
|
|
580
|
-
p ? p.insertAdjacentElement("afterend",
|
|
581
|
-
} else
|
|
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
583
|
const u = [];
|
|
584
584
|
for (let p = this._button.firstChild; p; p = p.nextSibling) {
|
|
@@ -587,21 +587,21 @@ class z extends HTMLElement {
|
|
|
587
587
|
continue;
|
|
588
588
|
}
|
|
589
589
|
const _ = p;
|
|
590
|
-
_.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !==
|
|
590
|
+
_.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !== r && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && u.push(p);
|
|
591
591
|
}
|
|
592
592
|
if (u.length > 0) {
|
|
593
593
|
a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", u.forEach((_) => {
|
|
594
594
|
a.appendChild(_);
|
|
595
595
|
});
|
|
596
596
|
const p = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
|
|
597
|
-
|
|
598
|
-
} else if (
|
|
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
599
|
const p = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
|
|
600
|
-
p ? p.insertAdjacentElement("afterend",
|
|
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
789
|
let m = this.querySelector(".mint-switch-info");
|
|
790
|
-
|
|
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,24 +1782,24 @@ 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
1798
|
const m = this.querySelector(".mint-checkbox-container");
|
|
1799
1799
|
if (t || i) {
|
|
1800
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
|
|
1802
|
-
t ? (
|
|
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);
|
|
@@ -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,14 +1953,14 @@ 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 ?
|
|
1959
|
+
a ? n = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((u) => {
|
|
1960
1960
|
var p;
|
|
1961
1961
|
if (u.nodeType === Node.TEXT_NODE) {
|
|
1962
1962
|
const _ = (p = u.textContent) == null ? void 0 : p.trim();
|
|
1963
|
-
_ && (
|
|
1963
|
+
_ && (n += _);
|
|
1964
1964
|
}
|
|
1965
1965
|
});
|
|
1966
1966
|
const l = this.querySelectorAll(".mint-choice-option-wrapper");
|
|
@@ -2005,16 +2005,16 @@ class Z extends HTMLElement {
|
|
|
2005
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 =
|
|
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
2009
|
p > 0 && u.remove();
|
|
2010
2010
|
});
|
|
2011
2011
|
let m = o.querySelector(".mint-choice-option-indicator");
|
|
2012
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
|
|
2014
|
-
|
|
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
2015
|
var p;
|
|
2016
2016
|
u.nodeType === Node.TEXT_NODE && ((p = u.textContent) != null && p.trim()) && (u.textContent = "");
|
|
2017
|
-
})),
|
|
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,13 +2378,13 @@ 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");
|
|
@@ -2392,7 +2392,7 @@ class ee extends HTMLElement {
|
|
|
2392
2392
|
render() {
|
|
2393
2393
|
var y, x, k, E;
|
|
2394
2394
|
this.getType();
|
|
2395
|
-
const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(),
|
|
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
2396
|
if (this._renderSkeleton(p), s) {
|
|
2397
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(() => {
|
|
@@ -2417,7 +2417,7 @@ class ee extends HTMLElement {
|
|
|
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 =
|
|
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
2421
|
var C;
|
|
2422
2422
|
const v = ((C = this._colorTextInput) == null ? void 0 : C.value) || "";
|
|
2423
2423
|
/^#[0-9A-Fa-f]{6}$/.test(v) && (this._colorPicker && (this._colorPicker.value = v), this.setAttribute("value", v), this.dispatchEvent(new CustomEvent("input", {
|
|
@@ -2435,14 +2435,14 @@ class ee extends HTMLElement {
|
|
|
2435
2435
|
}));
|
|
2436
2436
|
}));
|
|
2437
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 =
|
|
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
2439
|
const v = this._colorTextInput;
|
|
2440
|
-
o ? v.id = o : v.removeAttribute("id"),
|
|
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
2448
|
const g = document.createElement("mint-icon");
|
|
@@ -2450,26 +2450,26 @@ class ee extends HTMLElement {
|
|
|
2450
2450
|
const v = document.createElement("mint-icon");
|
|
2451
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
2452
|
if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
|
|
2453
|
-
const A = parseFloat(this._input.value) || 0,
|
|
2454
|
-
let L = A +
|
|
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
2457
|
}), this._numberDecrementButton.addEventListener("click", (C) => {
|
|
2458
2458
|
if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
|
|
2459
|
-
const A = parseFloat(this._input.value) || 0,
|
|
2460
|
-
let L = A -
|
|
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 =
|
|
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
2469
|
const g = this.firstChild.textContent;
|
|
2470
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 =
|
|
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
2473
|
const g = this.firstChild.textContent;
|
|
2474
2474
|
g && !this._input.value && (this._input.value = g.trim()), this.removeChild(this.firstChild);
|
|
2475
2475
|
}
|
|
@@ -2486,10 +2486,10 @@ class ee extends HTMLElement {
|
|
|
2486
2486
|
const A = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
|
|
2487
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
|
-
|
|
2489
|
+
n ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
|
|
2490
2490
|
} else g && g.remove();
|
|
2491
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,
|
|
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
2493
|
} else b && b.remove();
|
|
2494
2494
|
this._renderErrorState(), this._renderSkeleton(p);
|
|
2495
2495
|
}
|
|
@@ -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,17 +2752,17 @@ 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
2767
|
const m = new FocusEvent("blur", {
|
|
2768
2768
|
bubbles: !0,
|
|
@@ -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);
|
|
@@ -2819,61 +2819,61 @@ class te extends HTMLElement {
|
|
|
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
2828
|
].sort((p, _) => p.index - _.index);
|
|
2829
|
-
let c = 0, m = 0,
|
|
2830
|
-
|
|
2831
|
-
for (const p of
|
|
2829
|
+
let c = 0, m = 0, h = 0, f = 0;
|
|
2830
|
+
n.length, r.length;
|
|
2831
|
+
for (const p of d)
|
|
2832
2832
|
if (p.char === "d") {
|
|
2833
|
-
const _ =
|
|
2833
|
+
const _ = n.lastIndexOf("d") - n.indexOf("d") + 1, b = r.substr(f, _);
|
|
2834
2834
|
if (b.length === 0) return null;
|
|
2835
2835
|
c = parseInt(b, 10), f += b.length;
|
|
2836
2836
|
} else if (p.char === "m") {
|
|
2837
|
-
const _ =
|
|
2837
|
+
const _ = n.lastIndexOf("m") - n.indexOf("m") + 1, b = r.substr(f, _);
|
|
2838
2838
|
if (b.length === 0) return null;
|
|
2839
2839
|
m = parseInt(b, 10) - 1, f += b.length;
|
|
2840
2840
|
} else if (p.char === "y") {
|
|
2841
|
-
const _ =
|
|
2841
|
+
const _ = n.lastIndexOf("y") - n.indexOf("y") + 1, b = r.substr(f), y = Math.min(_, b.length), x = b.substr(0, y);
|
|
2842
2842
|
if (x.length === 0) return null;
|
|
2843
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),
|
|
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 || m < 0 || m > 11 || !
|
|
2847
|
-
const u = new Date(
|
|
2848
|
-
return isNaN(u.getTime()) || u.getDate() !== c || u.getMonth() !== m || u.getFullYear() !==
|
|
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 =
|
|
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
2859
|
return f === 1 && u !== 11 ? "st" : f === 2 && u !== 12 ? "nd" : f === 3 && u !== 13 ? "rd" : "th";
|
|
2860
2860
|
};
|
|
2861
2861
|
let m = "";
|
|
2862
|
-
for (let
|
|
2863
|
-
const f = t[
|
|
2864
|
-
if (f === "\\" &&
|
|
2865
|
-
m += t[
|
|
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
|
-
m +=
|
|
2870
|
+
m += r.toString();
|
|
2871
2871
|
break;
|
|
2872
2872
|
case "y":
|
|
2873
|
-
m +=
|
|
2873
|
+
m += r.toString().slice(-2);
|
|
2874
2874
|
break;
|
|
2875
2875
|
case "m":
|
|
2876
|
-
m +=
|
|
2876
|
+
m += d(s);
|
|
2877
2877
|
break;
|
|
2878
2878
|
case "n":
|
|
2879
2879
|
m += s.toString();
|
|
@@ -2885,7 +2885,7 @@ class te extends HTMLElement {
|
|
|
2885
2885
|
m += l[s - 1];
|
|
2886
2886
|
break;
|
|
2887
2887
|
case "d":
|
|
2888
|
-
m +=
|
|
2888
|
+
m += d(i);
|
|
2889
2889
|
break;
|
|
2890
2890
|
case "j":
|
|
2891
2891
|
m += i.toString();
|
|
@@ -2894,7 +2894,7 @@ class te extends HTMLElement {
|
|
|
2894
2894
|
m += a[e.getDay()];
|
|
2895
2895
|
break;
|
|
2896
2896
|
case "l":
|
|
2897
|
-
m +=
|
|
2897
|
+
m += n[e.getDay()];
|
|
2898
2898
|
break;
|
|
2899
2899
|
case "S":
|
|
2900
2900
|
m += c(i);
|
|
@@ -2911,26 +2911,26 @@ class te extends HTMLElement {
|
|
|
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 y =
|
|
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",
|
|
2921
|
-
let x =
|
|
2922
|
-
i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none",
|
|
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, m,
|
|
2927
|
-
const u =
|
|
2928
|
-
this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${
|
|
2929
|
-
|
|
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
2930
|
}), this._displayEl.addEventListener("keydown", (y) => {
|
|
2931
|
-
|
|
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 p = this._getFormatTokens(
|
|
2933
|
+
const p = this._getFormatTokens(d);
|
|
2934
2934
|
this._startPartInputs = [], this._endPartInputs = [];
|
|
2935
2935
|
const _ = (y) => {
|
|
2936
2936
|
const x = document.createDocumentFragment();
|
|
@@ -2939,7 +2939,7 @@ class te extends HTMLElement {
|
|
|
2939
2939
|
const E = document.createElement("span");
|
|
2940
2940
|
E.textContent = k.value, E.className = "text-gray-400 dark:text-gray-500 select-none", x.appendChild(E);
|
|
2941
2941
|
} else {
|
|
2942
|
-
const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", g = this._createPartInput(k.len, E,
|
|
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
2943
|
y === "start" ? this._startPartInputs.push(g) : this._endPartInputs.push(g), x.appendChild(g);
|
|
2944
2944
|
}
|
|
2945
2945
|
}), x;
|
|
@@ -2950,17 +2950,17 @@ class te extends HTMLElement {
|
|
|
2950
2950
|
}
|
|
2951
2951
|
const b = document.createElement("div");
|
|
2952
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 ||
|
|
2953
|
+
this._isInputMode || r || n || this._enterInputMode();
|
|
2954
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 =
|
|
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
2958
|
const y = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
|
|
2959
2959
|
this._iconButton.id = y;
|
|
2960
2960
|
const x = document.createElement("mint-icon");
|
|
2961
2961
|
x.setAttribute("name", "calendar"), x.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(x), this._iconButton.addEventListener("click", () => {
|
|
2962
|
-
|
|
2963
|
-
}), this._input.prepend(this._iconButton), this._iconButton.disabled =
|
|
2962
|
+
r || n || this._enterInputMode();
|
|
2963
|
+
}), this._input.prepend(this._iconButton), this._iconButton.disabled = r || n;
|
|
2964
2964
|
}
|
|
2965
2965
|
this._renderErrorState(c, m), this._renderSkeleton(e);
|
|
2966
2966
|
}
|
|
@@ -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,26 +3114,26 @@ 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(
|
|
3130
|
+
}), o.appendChild(d);
|
|
3131
3131
|
const m = document.createElement("div");
|
|
3132
3132
|
m.className = "flex items-center gap-2";
|
|
3133
|
-
const
|
|
3134
|
-
|
|
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
|
-
}), m.appendChild(
|
|
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();
|
|
@@ -3158,17 +3158,17 @@ class te extends HTMLElement {
|
|
|
3158
3158
|
const y = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, x = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
|
|
3159
3159
|
for (let k = 1; k <= e; k++) {
|
|
3160
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
|
-
let
|
|
3161
|
+
let T = "rounded-md";
|
|
3162
3162
|
if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
|
|
3163
3163
|
const H = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
|
|
3164
|
-
H && L ?
|
|
3165
|
-
} else v && !this._isRange && (
|
|
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 = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${
|
|
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
3168
|
this._handleDateClick(E);
|
|
3169
3169
|
}), b.appendChild(S);
|
|
3170
3170
|
}
|
|
3171
|
-
if (
|
|
3171
|
+
if (n) {
|
|
3172
3172
|
const k = document.createElement("div");
|
|
3173
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
3174
|
const E = document.createElement("div");
|
|
@@ -3205,32 +3205,32 @@ class te extends HTMLElement {
|
|
|
3205
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
3206
|
const A = document.createElement("div");
|
|
3207
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
|
-
const
|
|
3209
|
-
|
|
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", E.appendChild(T);
|
|
3210
3210
|
const S = document.createElement("div");
|
|
3211
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 = g.scrollTop,
|
|
3215
|
-
D > 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 = g.scrollLeft,
|
|
3218
|
-
D > 0 ? C.style.opacity = "1" : C.style.opacity = "0", D + N <
|
|
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
|
-
g.addEventListener("scroll", H), window.addEventListener("resize", H), setTimeout(H, 0),
|
|
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
|
-
const
|
|
3225
|
-
if (
|
|
3226
|
-
if (this._isRange && "start" in
|
|
3227
|
-
this._selectedStartDate =
|
|
3228
|
-
const N = this.getFormat(), M = this._formatDate(
|
|
3229
|
-
this.setValue(P), this._currentMonth =
|
|
3230
|
-
} else if (
|
|
3231
|
-
this._selectedStartDate =
|
|
3232
|
-
const N = this.getFormat(), M = this._formatDate(
|
|
3233
|
-
this.setValue(M), this._currentMonth =
|
|
3224
|
+
const I = L.action();
|
|
3225
|
+
if (I) {
|
|
3226
|
+
if (this._isRange && "start" in I && "end" in I) {
|
|
3227
|
+
this._selectedStartDate = I.start, this._selectedEndDate = I.end;
|
|
3228
|
+
const N = this.getFormat(), M = this._formatDate(I.start, N), F = this._formatDate(I.end, N), P = `${M} - ${F}`;
|
|
3229
|
+
this.setValue(P), this._currentMonth = I.start.getMonth(), this._currentYear = I.start.getFullYear();
|
|
3230
|
+
} else if (I instanceof Date) {
|
|
3231
|
+
this._selectedStartDate = I, this._selectedEndDate = null;
|
|
3232
|
+
const N = this.getFormat(), M = this._formatDate(I, N);
|
|
3233
|
+
this.setValue(M), this._currentMonth = I.getMonth(), this._currentYear = I.getFullYear();
|
|
3234
3234
|
}
|
|
3235
3235
|
this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
|
|
3236
3236
|
detail: { value: this.getValue() },
|
|
@@ -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 m = this._currentMonth ===
|
|
3274
|
+
const m = this._currentMonth === d;
|
|
3275
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 =
|
|
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 m = this._currentYear ===
|
|
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(
|
|
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(),
|
|
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
3560
|
const m = t.length > 0 ? t : i;
|
|
3561
|
-
if (m.length > 0 && m.forEach((
|
|
3562
|
-
this._select.appendChild(
|
|
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 u =
|
|
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
3569
|
u ? this.setAttribute("value", u) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
|
|
3570
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"),
|
|
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
3710
|
const c = this._dropzone.querySelector(".mint-dropzone-icon"), m = this._dropzone.querySelector(".mint-dropzone-label");
|
|
3711
3711
|
c && c.remove(), m && m.remove();
|
|
3712
|
-
const
|
|
3713
|
-
|
|
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",
|
|
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
3716
|
const u = document.createElement("div");
|
|
3717
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,7 +3869,7 @@ 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
3875
|
const u = document.createElement("img");
|
|
@@ -3882,23 +3882,23 @@ class se extends HTMLElement {
|
|
|
3882
3882
|
}
|
|
3883
3883
|
const m = document.createElement("div");
|
|
3884
3884
|
m.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", m.textContent = o.name, c.appendChild(m);
|
|
3885
|
-
const
|
|
3886
|
-
|
|
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
|
-
u.preventDefault(), u.stopPropagation(), this._removeFileAt(
|
|
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,7 +3933,7 @@ 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, this._headers = 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
3939
|
return ["action", "method", "enctype", "data-form-data", "loading", "headers"];
|
|
@@ -4041,16 +4041,17 @@ class re extends HTMLElement {
|
|
|
4041
4041
|
}));
|
|
4042
4042
|
return;
|
|
4043
4043
|
}
|
|
4044
|
-
const
|
|
4044
|
+
const n = new CustomEvent("submit", {
|
|
4045
4045
|
detail: { formData: i, values: s },
|
|
4046
4046
|
bubbles: !0,
|
|
4047
4047
|
cancelable: !0,
|
|
4048
4048
|
composed: !0
|
|
4049
4049
|
});
|
|
4050
|
-
if (this.dispatchEvent(
|
|
4050
|
+
if (this.dispatchEvent(n), n.defaultPrevented)
|
|
4051
4051
|
return;
|
|
4052
4052
|
const a = this.getAttribute("action"), l = this.getAttribute("method");
|
|
4053
|
-
if (!(!a || !l))
|
|
4053
|
+
if (!(!a || !l)) {
|
|
4054
|
+
this._setButtonsSubmitting();
|
|
4054
4055
|
try {
|
|
4055
4056
|
const o = await this._submitData(i, s);
|
|
4056
4057
|
this.dispatchEvent(new CustomEvent("submitsuccess", {
|
|
@@ -4064,25 +4065,28 @@ class re extends HTMLElement {
|
|
|
4064
4065
|
bubbles: !0,
|
|
4065
4066
|
cancelable: !0
|
|
4066
4067
|
}));
|
|
4068
|
+
} finally {
|
|
4069
|
+
this._restoreButtonsState();
|
|
4067
4070
|
}
|
|
4071
|
+
}
|
|
4068
4072
|
}
|
|
4069
4073
|
async _submitData(e, t) {
|
|
4070
|
-
var c, m,
|
|
4071
|
-
const i = this.getAttribute("action"), s = this.getAttribute("method"),
|
|
4074
|
+
var c, m, h;
|
|
4075
|
+
const i = this.getAttribute("action"), s = this.getAttribute("method"), r = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
|
|
4072
4076
|
if (!i)
|
|
4073
4077
|
return { status: 0, ok: !0, data: { values: t } };
|
|
4074
|
-
const
|
|
4078
|
+
const n = Array.from(e.values()).some((f) => f instanceof File);
|
|
4075
4079
|
let a = null;
|
|
4076
4080
|
const l = {};
|
|
4077
4081
|
let o = i;
|
|
4078
|
-
if (typeof window < "u" && ((
|
|
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") {
|
|
4079
4083
|
const f = new URLSearchParams();
|
|
4080
4084
|
e.forEach((u, p) => {
|
|
4081
4085
|
u instanceof File || f.append(p, String(u));
|
|
4082
4086
|
}), o += (i.includes("?") ? "&" : "?") + f.toString();
|
|
4083
|
-
} else if (
|
|
4087
|
+
} else if (r === "multipart/form-data" || n)
|
|
4084
4088
|
a = e;
|
|
4085
|
-
else if (
|
|
4089
|
+
else if (r === "application/json")
|
|
4086
4090
|
a = JSON.stringify(t), l["Content-Type"] = "application/json";
|
|
4087
4091
|
else {
|
|
4088
4092
|
const f = new URLSearchParams();
|
|
@@ -4118,7 +4122,7 @@ class re extends HTMLElement {
|
|
|
4118
4122
|
};
|
|
4119
4123
|
throw await this._applyErrorInterceptors(u);
|
|
4120
4124
|
}
|
|
4121
|
-
const
|
|
4125
|
+
const d = this;
|
|
4122
4126
|
return await new Promise(async (f, u) => {
|
|
4123
4127
|
const p = new XMLHttpRequest();
|
|
4124
4128
|
p.open(s || "POST", o, !0), Object.entries(l).forEach(([_, b]) => p.setRequestHeader(_, b)), p.onload = async function() {
|
|
@@ -4130,7 +4134,7 @@ class re extends HTMLElement {
|
|
|
4130
4134
|
} catch {
|
|
4131
4135
|
}
|
|
4132
4136
|
try {
|
|
4133
|
-
const x = { status: _, ok: !0, data: y }, k = await
|
|
4137
|
+
const x = { status: _, ok: !0, data: y }, k = await d._applySuccessInterceptors(x);
|
|
4134
4138
|
f(k);
|
|
4135
4139
|
} catch (x) {
|
|
4136
4140
|
u(x);
|
|
@@ -4142,7 +4146,7 @@ class re extends HTMLElement {
|
|
|
4142
4146
|
} catch {
|
|
4143
4147
|
}
|
|
4144
4148
|
try {
|
|
4145
|
-
const x = { status: _, data: y, response: { status: _, data: y } }, k = await
|
|
4149
|
+
const x = { status: _, data: y, response: { status: _, data: y } }, k = await d._applyErrorInterceptors(x);
|
|
4146
4150
|
u(k);
|
|
4147
4151
|
} catch (x) {
|
|
4148
4152
|
u(x);
|
|
@@ -4154,7 +4158,7 @@ class re extends HTMLElement {
|
|
|
4154
4158
|
status: p.status || 0,
|
|
4155
4159
|
data: p.responseText || "Network error",
|
|
4156
4160
|
response: { status: p.status || 0, data: p.responseText || "Network error" }
|
|
4157
|
-
}, b = await
|
|
4161
|
+
}, b = await d._applyErrorInterceptors(_);
|
|
4158
4162
|
u(b);
|
|
4159
4163
|
} catch (_) {
|
|
4160
4164
|
u(_);
|
|
@@ -4163,8 +4167,8 @@ class re extends HTMLElement {
|
|
|
4163
4167
|
});
|
|
4164
4168
|
}
|
|
4165
4169
|
async _applySuccessInterceptors(e) {
|
|
4166
|
-
var s,
|
|
4167
|
-
if (typeof window > "u" || !((
|
|
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))
|
|
4168
4172
|
return e;
|
|
4169
4173
|
let t = e;
|
|
4170
4174
|
const i = window.mintForm.interceptors.response.handlers;
|
|
@@ -4173,8 +4177,8 @@ class re extends HTMLElement {
|
|
|
4173
4177
|
return t;
|
|
4174
4178
|
}
|
|
4175
4179
|
async _applyErrorInterceptors(e) {
|
|
4176
|
-
var s,
|
|
4177
|
-
if (typeof window > "u" || !((
|
|
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))
|
|
4178
4182
|
return Promise.reject(e);
|
|
4179
4183
|
let t = e;
|
|
4180
4184
|
const i = window.mintForm.interceptors.response.handlers;
|
|
@@ -4194,35 +4198,35 @@ class re extends HTMLElement {
|
|
|
4194
4198
|
const t = {};
|
|
4195
4199
|
return e.forEach((i, s) => {
|
|
4196
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;
|
|
4197
|
-
}), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((
|
|
4198
|
-
const a =
|
|
4199
|
-
if (a && typeof
|
|
4200
|
-
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;
|
|
4201
4205
|
if (l.length > 0) {
|
|
4202
4206
|
const o = Array.from(l);
|
|
4203
|
-
t[a] && Array.isArray(t[a]) ? o.forEach((
|
|
4207
|
+
t[a] && Array.isArray(t[a]) ? o.forEach((d) => {
|
|
4204
4208
|
t[a].some(
|
|
4205
|
-
(m) => m.name ===
|
|
4206
|
-
) || t[a].push(
|
|
4209
|
+
(m) => m.name === d.name && m.size === d.size && m.lastModified === d.lastModified
|
|
4210
|
+
) || t[a].push(d);
|
|
4207
4211
|
}) : t[a] = o;
|
|
4208
4212
|
}
|
|
4209
4213
|
}
|
|
4210
|
-
}), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((
|
|
4211
|
-
const a =
|
|
4212
|
-
if (a &&
|
|
4213
|
-
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);
|
|
4214
4218
|
t[a] && Array.isArray(t[a]) ? l.forEach((o) => {
|
|
4215
4219
|
t[a].some(
|
|
4216
4220
|
(c) => c.name === o.name && c.size === o.size && c.lastModified === o.lastModified
|
|
4217
4221
|
) || t[a].push(o);
|
|
4218
4222
|
}) : t[a] = l;
|
|
4219
4223
|
}
|
|
4220
|
-
}), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((
|
|
4221
|
-
const a =
|
|
4224
|
+
}), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((n) => {
|
|
4225
|
+
const a = n.getAttribute("name");
|
|
4222
4226
|
if (a) {
|
|
4223
4227
|
let l = [];
|
|
4224
|
-
if (typeof
|
|
4225
|
-
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() !== "");
|
|
4226
4230
|
t[a] = o;
|
|
4227
4231
|
} else
|
|
4228
4232
|
t[a] = [];
|
|
@@ -4232,10 +4236,10 @@ class re extends HTMLElement {
|
|
|
4232
4236
|
_collectValidationRules() {
|
|
4233
4237
|
const e = {};
|
|
4234
4238
|
return this._form && Array.from(this._form.querySelectorAll("[name][validation]")).forEach((i) => {
|
|
4235
|
-
const s = i.getAttribute("name") || "",
|
|
4236
|
-
if (!s || !
|
|
4237
|
-
const
|
|
4238
|
-
|
|
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);
|
|
4239
4243
|
}), e;
|
|
4240
4244
|
}
|
|
4241
4245
|
_parseRules(e) {
|
|
@@ -4250,20 +4254,20 @@ class re extends HTMLElement {
|
|
|
4250
4254
|
}
|
|
4251
4255
|
_validate(e, t) {
|
|
4252
4256
|
let i = !0;
|
|
4253
|
-
return this._errors = {}, Object.entries(t || {}).forEach(([s,
|
|
4254
|
-
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);
|
|
4255
4259
|
o ? (i = !1, this._errors[s] = o, this._flagFieldError(a, o)) : this._clearFieldError(a);
|
|
4256
4260
|
}), i;
|
|
4257
4261
|
}
|
|
4258
4262
|
_validateField(e) {
|
|
4259
4263
|
const t = this._collectValidationRules();
|
|
4260
4264
|
if (!t[e]) return;
|
|
4261
|
-
const i = t[e], s = Array.isArray(i) ? i : [i],
|
|
4262
|
-
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]);
|
|
4263
4267
|
}
|
|
4264
4268
|
_validateRules(e, t) {
|
|
4265
4269
|
for (const i of t) {
|
|
4266
|
-
const [s,
|
|
4270
|
+
const [s, r] = i.split(":");
|
|
4267
4271
|
switch (s) {
|
|
4268
4272
|
case "required": {
|
|
4269
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.";
|
|
@@ -4279,26 +4283,26 @@ class re extends HTMLElement {
|
|
|
4279
4283
|
break;
|
|
4280
4284
|
}
|
|
4281
4285
|
case "number": {
|
|
4282
|
-
const
|
|
4283
|
-
if (Number.isNaN(
|
|
4286
|
+
const n = Number(e);
|
|
4287
|
+
if (Number.isNaN(n)) return "Must be a number.";
|
|
4284
4288
|
break;
|
|
4285
4289
|
}
|
|
4286
4290
|
case "min": {
|
|
4287
|
-
const
|
|
4288
|
-
if (Number.isNaN(
|
|
4289
|
-
if (typeof e == "string" && e.trim().length <
|
|
4290
|
-
if (Array.isArray(e) && e.length <
|
|
4291
|
-
if (e instanceof FileList && e.length <
|
|
4292
|
-
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}.`;
|
|
4293
4297
|
break;
|
|
4294
4298
|
}
|
|
4295
4299
|
case "max": {
|
|
4296
|
-
const
|
|
4297
|
-
if (Number.isNaN(
|
|
4298
|
-
if (typeof e == "string" && e.trim().length >
|
|
4299
|
-
if (Array.isArray(e) && e.length >
|
|
4300
|
-
if (e instanceof FileList && e.length >
|
|
4301
|
-
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}.`;
|
|
4302
4306
|
break;
|
|
4303
4307
|
}
|
|
4304
4308
|
}
|
|
@@ -4307,23 +4311,23 @@ class re extends HTMLElement {
|
|
|
4307
4311
|
}
|
|
4308
4312
|
_getFieldElements(e) {
|
|
4309
4313
|
if (!this._form) return [];
|
|
4310
|
-
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");
|
|
4311
4315
|
if (i.length > 0) {
|
|
4312
|
-
const
|
|
4316
|
+
const n = [];
|
|
4313
4317
|
return i.forEach((a) => {
|
|
4314
4318
|
const l = a.querySelector('select[name="' + e + '"]');
|
|
4315
|
-
l &&
|
|
4316
|
-
}), t.filter((a) => a.tagName !== "MINT-SELECT").concat(
|
|
4319
|
+
l && n.push(l);
|
|
4320
|
+
}), t.filter((a) => a.tagName !== "MINT-SELECT").concat(n);
|
|
4317
4321
|
}
|
|
4318
|
-
if (t.filter((
|
|
4319
|
-
return t.filter((
|
|
4320
|
-
const
|
|
4321
|
-
if (
|
|
4322
|
-
const
|
|
4323
|
-
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) => {
|
|
4324
4328
|
const l = a.closest("mint-tags");
|
|
4325
|
-
l && !
|
|
4326
|
-
}), 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);
|
|
4327
4331
|
}
|
|
4328
4332
|
return t;
|
|
4329
4333
|
}
|
|
@@ -4341,9 +4345,9 @@ class re extends HTMLElement {
|
|
|
4341
4345
|
if (s.every((l) => l.type === "checkbox"))
|
|
4342
4346
|
return a.map((l) => l.value || "on");
|
|
4343
4347
|
}
|
|
4344
|
-
const
|
|
4345
|
-
if (
|
|
4346
|
-
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);
|
|
4347
4351
|
if (a) {
|
|
4348
4352
|
if (typeof a.getValue == "function")
|
|
4349
4353
|
return a.getValue();
|
|
@@ -4353,9 +4357,9 @@ class re extends HTMLElement {
|
|
|
4353
4357
|
}
|
|
4354
4358
|
return "";
|
|
4355
4359
|
}
|
|
4356
|
-
const
|
|
4357
|
-
if (
|
|
4358
|
-
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");
|
|
4359
4363
|
}
|
|
4360
4364
|
const i = e[0];
|
|
4361
4365
|
if (i instanceof HTMLInputElement)
|
|
@@ -4367,18 +4371,18 @@ class re extends HTMLElement {
|
|
|
4367
4371
|
if (s)
|
|
4368
4372
|
return s.value;
|
|
4369
4373
|
if (typeof i.getValue == "function") {
|
|
4370
|
-
const
|
|
4371
|
-
if (
|
|
4372
|
-
return
|
|
4374
|
+
const n = i.getValue();
|
|
4375
|
+
if (n != null && n !== "")
|
|
4376
|
+
return n;
|
|
4373
4377
|
}
|
|
4374
|
-
const
|
|
4375
|
-
return
|
|
4378
|
+
const r = i.getAttribute("value");
|
|
4379
|
+
return r || "";
|
|
4376
4380
|
}
|
|
4377
4381
|
if (i.tagName === "MINT-DROPZONE" && typeof i.files < "u")
|
|
4378
4382
|
return i.files;
|
|
4379
4383
|
if (i.tagName === "MINT-TAGS") {
|
|
4380
4384
|
let s = null;
|
|
4381
|
-
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() !== "") : [];
|
|
4382
4386
|
}
|
|
4383
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") || "";
|
|
4384
4388
|
}
|
|
@@ -4443,8 +4447,8 @@ class re extends HTMLElement {
|
|
|
4443
4447
|
const s = this._getFieldElements(t);
|
|
4444
4448
|
if (s.length === 0) {
|
|
4445
4449
|
setTimeout(() => {
|
|
4446
|
-
const
|
|
4447
|
-
|
|
4450
|
+
const r = this._getFieldElements(t);
|
|
4451
|
+
r.length > 0 && this._applyValueToField(r, t, i);
|
|
4448
4452
|
}, 300);
|
|
4449
4453
|
return;
|
|
4450
4454
|
}
|
|
@@ -4459,23 +4463,23 @@ class re extends HTMLElement {
|
|
|
4459
4463
|
}
|
|
4460
4464
|
_applyValueToField(e, t, i) {
|
|
4461
4465
|
e.forEach((s) => {
|
|
4462
|
-
var
|
|
4463
|
-
const
|
|
4466
|
+
var n;
|
|
4467
|
+
const r = s.tagName;
|
|
4464
4468
|
try {
|
|
4465
|
-
if (
|
|
4469
|
+
if (r === "MINT-INPUT")
|
|
4466
4470
|
typeof s.value < "u" && (s.value = i || "");
|
|
4467
|
-
else if (
|
|
4471
|
+
else if (r === "MINT-DATE-PICKER")
|
|
4468
4472
|
typeof s.setValue == "function" && s.setValue(i || "");
|
|
4469
|
-
else if (
|
|
4470
|
-
|
|
4471
|
-
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")
|
|
4472
4476
|
typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((l) => {
|
|
4473
4477
|
l.checked = l.getAttribute("value") === i;
|
|
4474
4478
|
});
|
|
4475
|
-
else if (
|
|
4479
|
+
else if (r === "MINT-CHECKBOX" || r === "MINT-SWITCH") {
|
|
4476
4480
|
const a = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
|
|
4477
4481
|
typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "") : s.removeAttribute("checked");
|
|
4478
|
-
} 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 || "");
|
|
4479
4483
|
} catch (a) {
|
|
4480
4484
|
console.warn(`Failed to set value for field ${t}:`, a);
|
|
4481
4485
|
}
|
|
@@ -4483,7 +4487,7 @@ class re extends HTMLElement {
|
|
|
4483
4487
|
}
|
|
4484
4488
|
_resetCustomFields() {
|
|
4485
4489
|
this.querySelectorAll("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags").forEach((t) => {
|
|
4486
|
-
var s,
|
|
4490
|
+
var s, r;
|
|
4487
4491
|
t.removeAttribute("error"), t.removeAttribute("error-message");
|
|
4488
4492
|
const i = t.tagName;
|
|
4489
4493
|
if (i === "MINT-INPUT")
|
|
@@ -4498,20 +4502,20 @@ class re extends HTMLElement {
|
|
|
4498
4502
|
}
|
|
4499
4503
|
else if (i === "MINT-SELECT")
|
|
4500
4504
|
try {
|
|
4501
|
-
(
|
|
4505
|
+
(r = t.setValue) == null || r.call(t, "");
|
|
4502
4506
|
} catch {
|
|
4503
4507
|
}
|
|
4504
4508
|
else if (i === "MINT-DROPZONE") {
|
|
4505
|
-
const
|
|
4506
|
-
|
|
4509
|
+
const n = t.querySelector('input[type="file"]');
|
|
4510
|
+
n && (n.value = "");
|
|
4507
4511
|
} else if (i === "MINT-CHECKBOX" || i === "MINT-SWITCH")
|
|
4508
4512
|
try {
|
|
4509
4513
|
if (typeof t.checked < "u")
|
|
4510
4514
|
t.checked = !1;
|
|
4511
4515
|
else {
|
|
4512
4516
|
t.removeAttribute("checked");
|
|
4513
|
-
const
|
|
4514
|
-
|
|
4517
|
+
const n = t.querySelector('input[type="checkbox"], input[type="radio"]');
|
|
4518
|
+
n && (n.checked = !1);
|
|
4515
4519
|
}
|
|
4516
4520
|
} catch {
|
|
4517
4521
|
}
|
|
@@ -4542,13 +4546,13 @@ class re extends HTMLElement {
|
|
|
4542
4546
|
const e = (i) => {
|
|
4543
4547
|
const s = i.target;
|
|
4544
4548
|
if (!s) return;
|
|
4545
|
-
const
|
|
4546
|
-
if (!
|
|
4547
|
-
const
|
|
4548
|
-
if (!
|
|
4549
|
-
const l = this._extractFieldValue([
|
|
4550
|
-
(o ||
|
|
4551
|
-
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);
|
|
4552
4556
|
}, 0);
|
|
4553
4557
|
};
|
|
4554
4558
|
this._form.addEventListener("blur", e, !0), this._fieldBlurHandlers.set(this._form, e);
|
|
@@ -4556,7 +4560,7 @@ class re extends HTMLElement {
|
|
|
4556
4560
|
const s = i.target;
|
|
4557
4561
|
if (!s) return;
|
|
4558
4562
|
if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
|
|
4559
|
-
const
|
|
4563
|
+
const d = s, c = this._getFieldName(d);
|
|
4560
4564
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4561
4565
|
setTimeout(() => {
|
|
4562
4566
|
this._validateField(c);
|
|
@@ -4564,9 +4568,9 @@ class re extends HTMLElement {
|
|
|
4564
4568
|
return;
|
|
4565
4569
|
}
|
|
4566
4570
|
if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
|
|
4567
|
-
const
|
|
4568
|
-
if (!
|
|
4569
|
-
const c = this._getFieldName(
|
|
4571
|
+
const d = this._findFieldElement(s);
|
|
4572
|
+
if (!d) return;
|
|
4573
|
+
const c = this._getFieldName(d);
|
|
4570
4574
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4571
4575
|
setTimeout(() => {
|
|
4572
4576
|
this._validateField(c);
|
|
@@ -4574,7 +4578,7 @@ class re extends HTMLElement {
|
|
|
4574
4578
|
return;
|
|
4575
4579
|
}
|
|
4576
4580
|
if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
|
|
4577
|
-
const
|
|
4581
|
+
const d = s, c = this._getFieldName(d);
|
|
4578
4582
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4579
4583
|
setTimeout(() => {
|
|
4580
4584
|
this._validateField(c);
|
|
@@ -4582,9 +4586,9 @@ class re extends HTMLElement {
|
|
|
4582
4586
|
return;
|
|
4583
4587
|
}
|
|
4584
4588
|
if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
|
|
4585
|
-
const
|
|
4586
|
-
if (!
|
|
4587
|
-
const c = this._getFieldName(
|
|
4589
|
+
const d = this._findFieldElement(s);
|
|
4590
|
+
if (!d) return;
|
|
4591
|
+
const c = this._getFieldName(d);
|
|
4588
4592
|
if (!c || !this._collectValidationRules()[c]) return;
|
|
4589
4593
|
setTimeout(() => {
|
|
4590
4594
|
this._validateField(c);
|
|
@@ -4645,6 +4649,25 @@ class re extends HTMLElement {
|
|
|
4645
4649
|
t ? s.setAttribute("loading", "") : s.removeAttribute("loading"), typeof s.render == "function" && s.render();
|
|
4646
4650
|
});
|
|
4647
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
|
+
}
|
|
4648
4671
|
}
|
|
4649
4672
|
customElements.get("mint-form") || customElements.define("mint-form", re);
|
|
4650
4673
|
typeof window < "u" && (window.mintForm = window.mintForm || {
|
|
@@ -4710,8 +4733,8 @@ class ne extends HTMLElement {
|
|
|
4710
4733
|
}
|
|
4711
4734
|
const t = this.hasAttribute("collapse") && !this.hasAttribute("scroll"), i = this.hasAttribute("scroll");
|
|
4712
4735
|
i ? this.classList.add("relative") : this.classList.remove("relative");
|
|
4713
|
-
const s = [],
|
|
4714
|
-
|
|
4736
|
+
const s = [], r = e.querySelector("thead tr");
|
|
4737
|
+
r && r.querySelectorAll("th").forEach((d) => s.push((d.textContent || "").trim())), this._setClasses(e, [
|
|
4715
4738
|
"w-full",
|
|
4716
4739
|
i ? "min-w-[1200px]" : "",
|
|
4717
4740
|
"border-collapse",
|
|
@@ -4723,12 +4746,12 @@ class ne extends HTMLElement {
|
|
|
4723
4746
|
"dark:border-gray-700",
|
|
4724
4747
|
"overflow-hidden"
|
|
4725
4748
|
]);
|
|
4726
|
-
const
|
|
4727
|
-
|
|
4749
|
+
const n = e.querySelector("thead");
|
|
4750
|
+
n && (this._setClasses(n, [
|
|
4728
4751
|
"bg-[#F7F7F7]",
|
|
4729
4752
|
"dark:bg-gray-800"
|
|
4730
|
-
]),
|
|
4731
|
-
this._setClasses(
|
|
4753
|
+
]), n.querySelectorAll("th").forEach((d) => {
|
|
4754
|
+
this._setClasses(d, [
|
|
4732
4755
|
"text-left",
|
|
4733
4756
|
"font-semibold",
|
|
4734
4757
|
"text-gray-900",
|
|
@@ -4743,20 +4766,20 @@ class ne extends HTMLElement {
|
|
|
4743
4766
|
const a = e.querySelector("tbody");
|
|
4744
4767
|
if (a) {
|
|
4745
4768
|
const o = Array.from(a.querySelectorAll("tr"));
|
|
4746
|
-
o.forEach((
|
|
4747
|
-
this._setClasses(
|
|
4769
|
+
o.forEach((d, c) => {
|
|
4770
|
+
this._setClasses(d, [
|
|
4748
4771
|
"bg-white",
|
|
4749
4772
|
"dark:bg-gray-900",
|
|
4750
4773
|
"border-b",
|
|
4751
4774
|
"border-gray-200",
|
|
4752
4775
|
"dark:border-gray-700"
|
|
4753
|
-
]), c === o.length - 1 &&
|
|
4754
|
-
this._setClasses(
|
|
4776
|
+
]), c === o.length - 1 && d.classList.remove("border-b"), d.querySelectorAll("td").forEach((h) => {
|
|
4777
|
+
this._setClasses(h, [
|
|
4755
4778
|
"text-gray-900",
|
|
4756
4779
|
"dark:text-gray-100",
|
|
4757
4780
|
"px-3",
|
|
4758
4781
|
"py-2"
|
|
4759
|
-
]), t ? this._applyMobileCell(
|
|
4782
|
+
]), t ? this._applyMobileCell(h, s) : this._restoreCell(h);
|
|
4760
4783
|
});
|
|
4761
4784
|
});
|
|
4762
4785
|
}
|
|
@@ -4765,8 +4788,8 @@ class ne extends HTMLElement {
|
|
|
4765
4788
|
"bg-[#F7F7F7]",
|
|
4766
4789
|
"dark:bg-gray-800",
|
|
4767
4790
|
"font-semibold"
|
|
4768
|
-
]), l.querySelectorAll("td").forEach((
|
|
4769
|
-
this._setClasses(
|
|
4791
|
+
]), l.querySelectorAll("td").forEach((d) => {
|
|
4792
|
+
this._setClasses(d, [
|
|
4770
4793
|
"text-gray-900",
|
|
4771
4794
|
"dark:text-gray-100",
|
|
4772
4795
|
"px-3",
|
|
@@ -4774,17 +4797,17 @@ class ne extends HTMLElement {
|
|
|
4774
4797
|
"border-t",
|
|
4775
4798
|
"border-gray-200",
|
|
4776
4799
|
"dark:border-gray-700"
|
|
4777
|
-
]), this._restoreCell(
|
|
4800
|
+
]), this._restoreCell(d);
|
|
4778
4801
|
})), this._observer && this._observeChanges();
|
|
4779
4802
|
}
|
|
4780
4803
|
_applyMobileCell(e, t) {
|
|
4781
4804
|
if (e.closest("tfoot") || e.dataset.mtProcessed === "true") return;
|
|
4782
|
-
const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"),
|
|
4783
|
-
e.setAttribute("data-original",
|
|
4784
|
-
const
|
|
4785
|
-
|
|
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;
|
|
4786
4809
|
const a = document.createElement("span");
|
|
4787
|
-
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);
|
|
4788
4811
|
}
|
|
4789
4812
|
_restoreCell(e) {
|
|
4790
4813
|
if (e.dataset.mtProcessed !== "true") return;
|
|
@@ -4954,7 +4977,7 @@ class oe extends HTMLElement {
|
|
|
4954
4977
|
if (t !== i) {
|
|
4955
4978
|
if (e === "error" || e === "error-message") {
|
|
4956
4979
|
if (this._renderErrorState(), this._container) {
|
|
4957
|
-
const s = this.hasError(),
|
|
4980
|
+
const s = this.hasError(), r = [
|
|
4958
4981
|
"flex",
|
|
4959
4982
|
"flex-wrap",
|
|
4960
4983
|
"items-center",
|
|
@@ -4974,7 +4997,7 @@ class oe extends HTMLElement {
|
|
|
4974
4997
|
"transition-colors",
|
|
4975
4998
|
"duration-200"
|
|
4976
4999
|
];
|
|
4977
|
-
this._container.className =
|
|
5000
|
+
this._container.className = r.join(" ");
|
|
4978
5001
|
}
|
|
4979
5002
|
return;
|
|
4980
5003
|
}
|
|
@@ -5032,8 +5055,8 @@ class oe extends HTMLElement {
|
|
|
5032
5055
|
}
|
|
5033
5056
|
_render() {
|
|
5034
5057
|
this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
|
|
5035
|
-
const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(),
|
|
5036
|
-
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)
|
|
5037
5060
|
this._input && (this._input.placeholder = this._placeholder);
|
|
5038
5061
|
else {
|
|
5039
5062
|
this._container = document.createElement("div");
|
|
@@ -5057,10 +5080,10 @@ class oe extends HTMLElement {
|
|
|
5057
5080
|
"transition-colors",
|
|
5058
5081
|
"duration-200"
|
|
5059
5082
|
];
|
|
5060
|
-
this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (
|
|
5061
|
-
this.hasAttribute("sortable") &&
|
|
5062
|
-
}), this._chipsWrap.addEventListener("drop", (
|
|
5063
|
-
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();
|
|
5064
5087
|
}), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
|
|
5065
5088
|
"min-w-[6rem]",
|
|
5066
5089
|
"flex-1",
|
|
@@ -5073,8 +5096,8 @@ class oe extends HTMLElement {
|
|
|
5073
5096
|
"placeholder:text-gray-400",
|
|
5074
5097
|
"dark:placeholder:text-gray-500",
|
|
5075
5098
|
"p-1.5"
|
|
5076
|
-
].join(" "), this._input.addEventListener("keydown", (
|
|
5077
|
-
|
|
5099
|
+
].join(" "), this._input.addEventListener("keydown", (d) => {
|
|
5100
|
+
d.key === "Enter" && (d.preventDefault(), this._addFromInput());
|
|
5078
5101
|
}), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
|
|
5079
5102
|
}
|
|
5080
5103
|
if (this._container) {
|
|
@@ -5100,16 +5123,16 @@ class oe extends HTMLElement {
|
|
|
5100
5123
|
];
|
|
5101
5124
|
this._container.className = o.join(" ");
|
|
5102
5125
|
}
|
|
5103
|
-
let
|
|
5126
|
+
let n = this.querySelector(".mint-tags-label-container");
|
|
5104
5127
|
if (t) {
|
|
5105
|
-
|
|
5106
|
-
let o =
|
|
5107
|
-
t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none",
|
|
5108
|
-
} 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();
|
|
5109
5132
|
let a = this.querySelector(".mint-tags-info");
|
|
5110
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();
|
|
5111
5134
|
const l = this.getName();
|
|
5112
|
-
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);
|
|
5113
5136
|
}
|
|
5114
5137
|
_renderSkeleton(e) {
|
|
5115
5138
|
const t = this._container;
|
|
@@ -5131,7 +5154,7 @@ class oe extends HTMLElement {
|
|
|
5131
5154
|
const i = document.createElement("mint-chip");
|
|
5132
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);
|
|
5133
5156
|
const s = i.querySelector("[data-mt-chip-text]");
|
|
5134
|
-
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));
|
|
5135
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));
|
|
5136
5159
|
}
|
|
5137
5160
|
_addFromInput() {
|
|
@@ -5194,14 +5217,14 @@ class oe extends HTMLElement {
|
|
|
5194
5217
|
}
|
|
5195
5218
|
_onDragOverChip(e, t) {
|
|
5196
5219
|
if (!this.hasAttribute("sortable") || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), !this._dragChip || !this._chipsWrap) || t === this._dragChip) return;
|
|
5197
|
-
const i = t.getBoundingClientRect(), s = e.clientX,
|
|
5198
|
-
if (s <
|
|
5220
|
+
const i = t.getBoundingClientRect(), s = e.clientX, r = i.left + i.width * 0.5;
|
|
5221
|
+
if (s < r) {
|
|
5199
5222
|
if (this._dragChip.nextSibling === t) return;
|
|
5200
5223
|
this._chipsWrap.insertBefore(this._dragChip, t);
|
|
5201
5224
|
} else {
|
|
5202
5225
|
if (t.nextSibling === this._dragChip) return;
|
|
5203
|
-
const
|
|
5204
|
-
|
|
5226
|
+
const n = t.nextSibling;
|
|
5227
|
+
n ? this._chipsWrap.insertBefore(this._dragChip, n) : this._chipsWrap.appendChild(this._dragChip);
|
|
5205
5228
|
}
|
|
5206
5229
|
}
|
|
5207
5230
|
_onDrop(e) {
|
|
@@ -5218,8 +5241,8 @@ class oe extends HTMLElement {
|
|
|
5218
5241
|
e.forEach((i) => {
|
|
5219
5242
|
const s = i.dataset.value;
|
|
5220
5243
|
if (!s) return;
|
|
5221
|
-
const
|
|
5222
|
-
|
|
5244
|
+
const r = this._tags.find((n) => n.value === s);
|
|
5245
|
+
r && t.push(r);
|
|
5223
5246
|
}), t.length === this._tags.length && (this._tags = t, this._syncAttr(), this._renderChips(), this._emitChange());
|
|
5224
5247
|
}
|
|
5225
5248
|
// Pointer-based sortable for touch (and optionally mouse)
|
|
@@ -5239,8 +5262,8 @@ class oe extends HTMLElement {
|
|
|
5239
5262
|
if (!t) return;
|
|
5240
5263
|
const i = t.closest("mint-chip");
|
|
5241
5264
|
if (i && i !== this._dragChip) {
|
|
5242
|
-
const s = i.getBoundingClientRect(),
|
|
5243
|
-
if (
|
|
5265
|
+
const s = i.getBoundingClientRect(), r = e.clientX, n = s.left + s.width * 0.5;
|
|
5266
|
+
if (r < n)
|
|
5244
5267
|
this._dragChip.nextSibling !== i && this._chipsWrap.insertBefore(this._dragChip, i);
|
|
5245
5268
|
else if (i.nextSibling !== this._dragChip) {
|
|
5246
5269
|
const a = i.nextSibling;
|
|
@@ -5414,25 +5437,25 @@ class ce extends HTMLElement {
|
|
|
5414
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()}`;
|
|
5415
5438
|
const s = this.getAriaLive();
|
|
5416
5439
|
this.setAttribute("role", "alert"), this.setAttribute("aria-live", s), e === "danger" ? this.setAttribute("aria-atomic", "true") : this.removeAttribute("aria-atomic");
|
|
5417
|
-
const
|
|
5440
|
+
const r = [];
|
|
5418
5441
|
for (this._bodyWrapper ? Array.from(this._bodyWrapper.childNodes).forEach((a) => {
|
|
5419
|
-
|
|
5420
|
-
}) : Array.from(this.childNodes).forEach((
|
|
5421
|
-
|
|
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);
|
|
5422
5445
|
}), this._dismissButton && this._dismissHandler && this._dismissButton.removeEventListener("click", this._dismissHandler); this.firstChild; )
|
|
5423
5446
|
this.removeChild(this.firstChild);
|
|
5424
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) {
|
|
5425
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");
|
|
5426
|
-
const
|
|
5427
|
-
|
|
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) => {
|
|
5428
5451
|
a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", {
|
|
5429
5452
|
bubbles: !0,
|
|
5430
5453
|
composed: !0
|
|
5431
5454
|
})), this.remove();
|
|
5432
5455
|
}, this._dismissButton.addEventListener("click", this._dismissHandler), this._headerWrapper.appendChild(this._dismissButton);
|
|
5433
5456
|
}
|
|
5434
|
-
this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800",
|
|
5435
|
-
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);
|
|
5436
5459
|
}), this.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
|
|
5437
5460
|
}
|
|
5438
5461
|
}
|
|
@@ -5450,14 +5473,14 @@ export {
|
|
|
5450
5473
|
se as Dropzone,
|
|
5451
5474
|
re as Form,
|
|
5452
5475
|
G as Grid,
|
|
5453
|
-
|
|
5476
|
+
O as Icon,
|
|
5454
5477
|
ee as Input,
|
|
5455
5478
|
$ as Link,
|
|
5456
5479
|
J as Modal,
|
|
5457
5480
|
U as Page,
|
|
5458
5481
|
X as Popover,
|
|
5459
5482
|
ie as Select,
|
|
5460
|
-
|
|
5483
|
+
B as Spinner,
|
|
5461
5484
|
R as Stack,
|
|
5462
5485
|
W as Switch,
|
|
5463
5486
|
ne as Table,
|