monobill-mintui 0.6.612 → 0.6.613

package/dist/components/date-picker/index.js

@@ -0,0 +1,1276 @@
+import '../../theme.css'
+import '../../input.css'
+import '../../icon.css'
+import '../../popover.css'
+import '../../stack.css'
+import '../../date-picker.css'
+import { a as e } from "../chunks/icon-gQAtsERy.js";
+import { t } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/icon-C0OLmjDY.js";
+import "../chunks/caret-right-CVOgr4nk.js";
+import "../chunks/input-8bbXzpa5.js";
+import "../chunks/popover-gviDCspV.js";
+e({
+	name: "calendar",
+	viewBox: "0 0 24 24",
+	path: "M8 7V3m8 4V3M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zM6 11h12M6 14h12M6 17h12",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}), e({
+	name: "caret-left",
+	viewBox: "0 0 24 24",
+	path: "M15 19l-7-7 7-7",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+});
+//#endregion
+//#region src/components/date-picker/DatePicker.ts
+var n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"value",
+			"label",
+			"info",
+			"disabled",
+			"id",
+			"name",
+			"required",
+			"readonly",
+			"format",
+			"min",
+			"max",
+			"range",
+			"shortcuts",
+			"display-format",
+			"error",
+			"error-message",
+			"loading",
+			"selection-mode",
+			"week-start-day",
+			"mode",
+			"disabled-dates"
+		];
+	}
+	constructor() {
+		super(), this._input = null, this._textInput = null, this._popover = null, this._calendarContainer = null, this._iconButton = null, this._hiddenInput = null, this._startPartInputs = [], this._endPartInputs = [], this._displayEl = null, this._inputsWrapperEl = null, this._fieldsContainer = null, this._resetHandler = null, this._isInputMode = !1, this._currentMonth = (/* @__PURE__ */ new Date()).getMonth(), this._currentYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMode = "calendar", this._selectedStartDate = null, this._selectedEndDate = null, this._isRange = !1, this._hoveredDate = null, this._isHandlingClick = !1, this._touchStartDate = null, this._touchStartElement = null, this._isTouchActive = !1, this._resizeObserver = null, this._popoverObserver = null, this._focusTrapHandler = null, this._escapeHandler = null, this._a11yId = `mint-date-picker-${Math.random().toString(36).slice(2, 10)}`;
+	}
+	connectedCallback() {
+		this.classList.add("mint-date-picker"), this.render(), this._setupPopoverWithRetry(), this._attachFormResetListener();
+	}
+	disconnectedCallback() {
+		if (this._popoverObserver &&= (this._popoverObserver.disconnect(), null), this._resizeObserver &&= (this._resizeObserver.disconnect(), null), this._removeFocusTrap(), this._resetHandler) {
+			let e = this.closest("form");
+			e && e.removeEventListener("reset", this._resetHandler), this._resetHandler = null;
+		}
+	}
+	isLoading() {
+		return this.getAttribute("loading") === "true";
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "error" || e === "error-message") {
+				let e = this.hasError(), t = this.getErrorMessage();
+				this._applyErrorVisuals(e, t, this.isDisabled());
+				return;
+			}
+			if (e === "loading") {
+				this.render();
+				return;
+			}
+			if (e === "mode" || e === "format") {
+				let e = this.getMode();
+				e === "month" ? this._viewMode = "month" : e === "year" ? this._viewMode = "year" : this._viewMode = "calendar", this._popover && this._calendarContainer && this._buildCalendar();
+			}
+			this.render(), this._input && this._setupPopoverWithRetry();
+		}
+	}
+	getValue() {
+		return this.getAttribute("value") || "";
+	}
+	setValue(e) {
+		e ? (this.setAttribute("value", e), this._textInput && (this._textInput.value = e), this._parseValue(e)) : (this.removeAttribute("value"), this._textInput && (this._textInput.value = ""), this._selectedStartDate = null, this._selectedEndDate = null), this._buildCalendar(), this._updateDisplayText();
+	}
+	get value() {
+		try {
+			return this.getValue() || "";
+		} catch {
+			return "";
+		}
+	}
+	set value(e) {
+		try {
+			this.setValue(e || "");
+		} catch {}
+	}
+	getFormat() {
+		return this.getAttribute("format") || "mm/dd/yyyy";
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	isDisabled() {
+		return this.getAttribute("disabled") === "true";
+	}
+	isReadonly() {
+		return this.getAttribute("readonly") === "true";
+	}
+	isRequired() {
+		return this.getAttribute("required") === "true";
+	}
+	hasError() {
+		return this.getAttribute("error") === "true";
+	}
+	getErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	isRange() {
+		return this.getAttribute("range") === "true";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getMin() {
+		return this.getAttribute("min") || "";
+	}
+	getMax() {
+		return this.getAttribute("max") || "";
+	}
+	getDisabledDates() {
+		let e = this.getAttribute("disabled-dates");
+		if (!e) return [];
+		try {
+			let t = JSON.parse(e), n = this.getFormat();
+			return t.map((e) => this._parseDateString(e, n)).filter((e) => e !== null);
+		} catch {
+			return [];
+		}
+	}
+	getDisabledDateStrings() {
+		let e = this.getAttribute("disabled-dates");
+		if (!e) return [];
+		try {
+			return JSON.parse(e);
+		} catch {
+			return [];
+		}
+	}
+	disableDate(e) {
+		let t = this.getFormat(), n = this.getDisabledDateStrings(), r = Array.isArray(e) ? e : [e], i = [];
+		for (let e of r) {
+			let r = this._parseDateString(e, t);
+			if (r) {
+				let e = this._formatDate(r, t);
+				n.includes(e) || i.push(e);
+			}
+		}
+		if (i.length > 0) {
+			let e = [...n, ...i];
+			this.setAttribute("disabled-dates", JSON.stringify(e)), this._buildCalendar();
+		}
+	}
+	enableDate(e) {
+		let t = this.getFormat(), n = this.getDisabledDateStrings(), r = Array.isArray(e) ? e : [e], i = [];
+		for (let e of r) {
+			let n = this._parseDateString(e, t);
+			if (n) {
+				let e = this._formatDate(n, t);
+				i.push(e);
+			}
+		}
+		if (i.length > 0) {
+			let e = n.filter((e) => !i.includes(e));
+			e.length === 0 ? this.removeAttribute("disabled-dates") : this.setAttribute("disabled-dates", JSON.stringify(e)), this._buildCalendar();
+		}
+	}
+	getSelectionMode() {
+		let e = this.getAttribute("selection-mode");
+		return e === "week" || e === "month" ? e : "day";
+	}
+	getMode() {
+		let e = this.getAttribute("mode");
+		if (e === "month" || e === "year") return e;
+		let t = this.getFormat().toLowerCase(), n = t.includes("d"), r = t.includes("m");
+		return !n && !r ? "year" : !n && r ? "month" : "default";
+	}
+	getWeekStartDay() {
+		return {
+			sunday: 0,
+			monday: 1,
+			tuesday: 2,
+			wednesday: 3,
+			thursday: 4,
+			friday: 5,
+			saturday: 6
+		}[this.getAttribute("week-start-day")?.toLowerCase() || "sunday"] ?? 0;
+	}
+	getDisplayFormat() {
+		return this.getAttribute("display-format") || "F j, Y";
+	}
+	getShortcuts() {
+		let e = this.getAttribute("shortcuts");
+		if (!e) return [];
+		try {
+			let t = JSON.parse(e);
+			if (Array.isArray(t)) return t.map((e) => ({
+				label: e.label,
+				action: this._createShortcutAction(e.action)
+			}));
+		} catch {
+			let t = e.trim();
+			if (t && typeof window[t] == "function") {
+				let e = window[t]();
+				if (Array.isArray(e)) return e.map((e) => ({
+					label: e.label,
+					action: typeof e.action == "function" ? e.action : this._createShortcutAction(e.action)
+				}));
+			}
+		}
+		return [];
+	}
+	_createShortcutAction(e) {
+		return typeof e == "function" ? e : typeof e == "string" && typeof window[e] == "function" ? window[e] : () => null;
+	}
+	_getDefaultShortcuts() {
+		let e = [{
+			label: "Today",
+			action: () => /* @__PURE__ */ new Date()
+		}];
+		return this._isRange && e.push({
+			label: "This Week",
+			action: () => {
+				let e = /* @__PURE__ */ new Date(), t = e.getDay(), n = new Date(e);
+				n.setDate(e.getDate() - t), n.setHours(0, 0, 0, 0);
+				let r = new Date(n);
+				return r.setDate(n.getDate() + 6), r.setHours(23, 59, 59, 999), {
+					start: n,
+					end: r
+				};
+			}
+		}, {
+			label: "This Month",
+			action: () => {
+				let e = /* @__PURE__ */ new Date(), t = new Date(e.getFullYear(), e.getMonth(), 1), n = new Date(e.getFullYear(), e.getMonth() + 1, 0);
+				return n.setHours(23, 59, 59, 999), {
+					start: t,
+					end: n
+				};
+			}
+		}), e;
+	}
+	_getFormatTokens(e) {
+		let t = [], n = 0, r = e.toLowerCase();
+		for (; n < r.length;) {
+			let i = r[n];
+			if (i === "d" || i === "m" || i === "y") {
+				let e = 1, a = n + 1;
+				for (; a < r.length && r[a] === i;) e++, a++;
+				t.push({
+					type: "part",
+					part: i,
+					len: e
+				}), n = a;
+			} else t.push({
+				type: "sep",
+				value: e[n]
+			}), n++;
+		}
+		return t;
+	}
+	_createPartInput(e, t, n, r, i) {
+		let a = document.createElement("input");
+		return a.type = "text", a.inputMode = "numeric", a.pattern = "\\d*", a.maxLength = e, a.placeholder = t, a.className = "mint-date-picker-part-input", a.disabled = n || r, a.readOnly = r, a.required = i, e === 4 ? a.classList.add("is-year-part") : e === 2 && a.classList.add("is-short-part"), a;
+	}
+	_buildValueFromParts(e, t) {
+		let n = 0;
+		return t.map((t) => {
+			if (t.type === "sep") return t.value;
+			let r = e[n]?.value || "";
+			return n++, r;
+		}).join("");
+	}
+	_applyDateToParts(e, t, n, r) {
+		if (!t.length) return;
+		if (!e) {
+			t.forEach((e) => e.value = "");
+			return;
+		}
+		let i = this._formatDate(e, r), a = 0, o = 0;
+		n.forEach((e) => {
+			if (e.type === "sep") a += e.value.length;
+			else {
+				let n = i.substr(a, e.len);
+				t[o] && (t[o].value = n), o++, a += e.len;
+			}
+		});
+	}
+	_syncHiddenInput() {
+		if (!this._hiddenInput) return;
+		let e = this.getFormat(), t = this._getFormatTokens(e), n = this._buildValueFromParts(this._startPartInputs, t);
+		if (this._isRange) {
+			let e = this._buildValueFromParts(this._endPartInputs, t);
+			this._hiddenInput.value = e ? `${n} - ${e}` : n;
+		} else this._hiddenInput.value = n;
+	}
+	_focusNext(e, t) {
+		if (t + 1 < e.length) {
+			let n = e[t + 1];
+			n.focus(), n.setSelectionRange(0, n.value.length);
+		}
+	}
+	_focusPrev(e, t) {
+		if (t - 1 >= 0) {
+			let n = e[t - 1];
+			n.focus(), n.setSelectionRange(n.value.length, n.value.length);
+		}
+	}
+	_attachPartInputHandlers(e, t, n) {
+		e.forEach((t, n) => {
+			let r = t.maxLength || 2;
+			t.addEventListener("input", () => {
+				t.value = t.value.replace(/\D/g, "").slice(0, r), t.value.length >= r && this._focusNext(e, n), this._syncHiddenInput();
+			}), t.addEventListener("keydown", (r) => {
+				r.key === "Backspace" && t.selectionStart === 0 && t.selectionEnd === 0 && this._focusPrev(e, n), r.key === "ArrowLeft" && t.selectionStart === 0 && t.selectionEnd === 0 && (this._focusPrev(e, n), r.preventDefault()), r.key === "ArrowRight" && t.selectionStart === t.value.length && t.selectionEnd === t.value.length && (this._focusNext(e, n), r.preventDefault());
+			}), t.addEventListener("blur", (e) => {
+				this._syncHiddenInput();
+				let t = e.relatedTarget, n = t && (this._startPartInputs.includes(t) || this._endPartInputs.includes(t));
+				setTimeout(() => {
+					if (!(this._startPartInputs.some((e) => e === document.activeElement) || this._endPartInputs.some((e) => e === document.activeElement)) && (n || this._handleBlur(this._hiddenInput?.value || ""), this._exitInputMode(), !n && this._hiddenInput)) {
+						let t = new FocusEvent("blur", {
+							bubbles: !0,
+							cancelable: !0,
+							relatedTarget: e.relatedTarget
+						});
+						this._hiddenInput.dispatchEvent(t);
+					}
+				}, 0);
+			});
+		});
+	}
+	_splitRangeInput(e, t) {
+		let n = e.split(/\s*-\s*/);
+		return n.length >= 2 ? [n[0], n.slice(1).join("-")] : [e];
+	}
+	_parseValue(e) {
+		let t = this.getFormat(), n = this._getFormatTokens(t), r = this.getSelectionMode();
+		if (this._isRange || r === "week" || r === "month") {
+			let [r, i] = this._splitRangeInput(e, t), a = r ? this._parseDateString(r, t) : null, o = i ? this._parseDateString(i, t) : null;
+			if (a && o) {
+				let [e, t] = a <= o ? [a, o] : [o, a];
+				this._selectedStartDate = e, this._selectedEndDate = t, this._currentMonth = e.getMonth(), this._currentYear = e.getFullYear();
+			} else a && (this._selectedStartDate = a, this._selectedEndDate = null, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear());
+			this._applyDateToParts(this._selectedStartDate, this._startPartInputs, n, t), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, n, t);
+		} else {
+			let r = this._parseDateString(e, t);
+			r && !isNaN(r.getTime()) ? (this._selectedStartDate = r, this._selectedEndDate = null, this._currentMonth = r.getMonth(), this._currentYear = r.getFullYear(), this._applyDateToParts(r, this._startPartInputs, n, t)) : this._applyDateToParts(null, this._startPartInputs, n, t);
+		}
+		this._syncHiddenInput(), this._updateDisplayText();
+	}
+	_parseDateString(e, t) {
+		let n = /[\/\-\.\s]+/;
+		if (n.test(e)) {
+			let r = e.split(n).filter((e) => e.length > 0), i = t.split(/[\/\-\.\s]+/).filter((e) => e.length > 0);
+			if (r.length === i.length) {
+				let e = 0, t = 0, n = 0;
+				for (let a = 0; a < i.length; a++) {
+					let o = i[a].toLowerCase(), s = r[a];
+					if (o.includes("d")) e = parseInt(s, 10);
+					else if (o.includes("m")) t = parseInt(s, 10) - 1;
+					else if (o.includes("y")) {
+						let e = parseInt(s, 10), t = o.length, r = s.length;
+						(r === 2 && t === 4 || r === 2 && t === 2) && (e = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + e), n = e;
+					}
+				}
+				let a = i.some((e) => e.toLowerCase().includes("d")), o = i.some((e) => e.toLowerCase().includes("m"));
+				if (a || (e = 1), o || (t = 0), t >= 0 && t <= 11 && n) {
+					let r = new Date(n, t, e);
+					if (!isNaN(r.getTime())) return a && r.getDate() !== e || r.getMonth() !== t || r.getFullYear() !== n ? null : r;
+				}
+			}
+		}
+		let r = e.replace(/[\/\-\.]/g, ""), i = t.replace(/[\/\-\.]/g, "").toLowerCase(), a = i.indexOf("d"), o = i.indexOf("m"), s = i.indexOf("y"), c = [
+			{
+				char: "d",
+				index: a
+			},
+			{
+				char: "m",
+				index: o
+			},
+			{
+				char: "y",
+				index: s
+			}
+		].sort((e, t) => e.index - t.index), l = 0, u = 0, d = 0, f = 0;
+		i.length, r.length;
+		for (let e of c) if (e.char === "d") {
+			let e = i.lastIndexOf("d") - i.indexOf("d") + 1, t = r.substr(f, e);
+			if (t.length === 0) return null;
+			l = parseInt(t, 10), f += t.length;
+		} else if (e.char === "m") {
+			let e = i.lastIndexOf("m") - i.indexOf("m") + 1, t = r.substr(f, e);
+			if (t.length === 0) return null;
+			u = parseInt(t, 10) - 1, f += t.length;
+		} else if (e.char === "y") {
+			let e = i.lastIndexOf("y") - i.indexOf("y") + 1, t = r.substr(f), n = Math.min(e, t.length), a = t.substr(0, n);
+			if (a.length === 0) return null;
+			let o = parseInt(a, 10);
+			(n === 2 && e === 4 || n === 2 && e === 2) && (o = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + o), d = o, f += n;
+		}
+		let p = t.toLowerCase(), m = p.includes("d"), h = p.includes("m");
+		if (m || (l = 1), h || (u = 0), u < 0 || u > 11 || !d) return null;
+		let g = new Date(d, u, l);
+		return isNaN(g.getTime()) || m && g.getDate() !== l || g.getMonth() !== u || g.getFullYear() !== d ? null : g;
+	}
+	_formatDate(e, t) {
+		let n = e.getDate(), r = e.getMonth() + 1, i = e.getFullYear(), a = t.toLowerCase(), o = t;
+		return a.includes("dd") ? o = o.replace(/dd/gi, String(n).padStart(2, "0")) : a.includes("d") && (o = o.replace(/d/gi, String(n))), a.includes("mm") ? o = o.replace(/mm/gi, String(r).padStart(2, "0")) : a.includes("m") && (o = o.replace(/m/gi, String(r))), a.includes("yyyy") ? o = o.replace(/yyyy/gi, String(i)) : a.includes("yy") && (o = o.replace(/yy/gi, String(i).substr(2))), o;
+	}
+	_formatDatePhp(e, t) {
+		let n = e.getDate(), r = e.getMonth() + 1, i = e.getFullYear(), a = [
+			"Sunday",
+			"Monday",
+			"Tuesday",
+			"Wednesday",
+			"Thursday",
+			"Friday",
+			"Saturday"
+		], o = [
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		], s = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		], c = [
+			"Jan",
+			"Feb",
+			"Mar",
+			"Apr",
+			"May",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Oct",
+			"Nov",
+			"Dec"
+		], l = (e, t = 2) => e.toString().padStart(t, "0"), u = (e) => {
+			let t = e % 10, n = e % 100;
+			return t === 1 && n !== 11 ? "st" : t === 2 && n !== 12 ? "nd" : t === 3 && n !== 13 ? "rd" : "th";
+		}, d = "";
+		for (let f = 0; f < t.length; f++) {
+			let p = t[f];
+			if (p === "\\" && f + 1 < t.length) {
+				d += t[f + 1], f++;
+				continue;
+			}
+			switch (p) {
+				case "Y":
+					d += i.toString();
+					break;
+				case "y":
+					d += i.toString().slice(-2);
+					break;
+				case "m":
+					d += l(r);
+					break;
+				case "n":
+					d += r.toString();
+					break;
+				case "M":
+					d += c[r - 1];
+					break;
+				case "F":
+					d += s[r - 1];
+					break;
+				case "d":
+					d += l(n);
+					break;
+				case "j":
+					d += n.toString();
+					break;
+				case "D":
+					d += o[e.getDay()];
+					break;
+				case "l":
+					d += a[e.getDay()];
+					break;
+				case "S":
+					d += u(n);
+					break;
+				default:
+					d += p;
+					break;
+			}
+		}
+		return d;
+	}
+	_validateDateString(e, t) {
+		let n = this._parseDateString(e, t);
+		return n !== null && !isNaN(n.getTime());
+	}
+	render() {
+		let e = this.isLoading(), t = this.getLabel(), n = this.getInfo(), r = this.getValue(), i = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), s = this.getId() || this._a11yId, c = this.getName(), l = this.getFormat(), u = this.hasError(), d = this.getErrorMessage(), f = this.getSelectionMode();
+		this._isRange = this.isRange() || f === "week" || f === "month", this._input || (this._input = document.createElement("div"), this._input.className = "mint-date-picker-field", this.appendChild(this._input));
+		let p = this.querySelector(".mint-date-picker-label-container");
+		if (t || n) {
+			p || (p = document.createElement("div"), p.className = "mint-date-picker-label-container", this.contains(this._input) ? this.insertBefore(p, this._input) : this.appendChild(p));
+			let e = p.querySelector(".mint-date-picker-label");
+			t ? (e || (e = document.createElement("label"), e.className = "mint-date-picker-label", p.insertBefore(e, p.firstChild)), e.textContent = t, s && this._textInput && e.setAttribute("for", s)) : e && e.remove();
+			let r = p.querySelector(".mint-date-picker-info");
+			n ? (r || (r = document.createElement("span"), r.className = "mint-date-picker-info", p.appendChild(r)), r.textContent = n) : r && r.remove();
+		} else p && p.remove();
+		this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = r || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), s && (this._hiddenInput.id = s), c && (this._hiddenInput.name = c), this._hiddenInput.value = r || "", this._hiddenInput.setAttribute("aria-invalid", u ? "true" : "false");
+		let m = this._input.querySelector(".mint-date-fields");
+		m || (m = document.createElement("div"), this._input.appendChild(m)), this._fieldsContainer = m, this._applyErrorVisuals(u, d, i), m.innerHTML = "", this._displayEl = document.createElement("div"), this._displayEl.className = `mint-date-picker-display${a ? " is-readonly" : ""}`, this._displayEl.tabIndex = i || a ? -1 : 0, this._displayEl.setAttribute("role", "button"), this._displayEl.setAttribute("aria-label", `${this.getLabel() || "Date"}: ${r || "Select date"}`), this._displayEl.addEventListener("click", () => {
+			i || a || this._enterInputMode();
+		}), this._displayEl.addEventListener("keydown", (e) => {
+			i || a || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._enterInputMode());
+		}), this._inputsWrapperEl = document.createElement("div"), this._isRange, this._inputsWrapperEl.className = "mint-date-picker-inputs";
+		let h = this._getFormatTokens(l);
+		this._startPartInputs = [], this._endPartInputs = [];
+		let g = (e) => {
+			let t = document.createDocumentFragment();
+			return h.forEach((n) => {
+				if (n.type === "sep") {
+					let e = document.createElement("span");
+					e.textContent = n.value, e.className = "mint-date-picker-separator", t.appendChild(e);
+				} else {
+					let r = n.part === "d" ? "dd" : n.part === "m" ? "mm" : n.len === 2 ? "yy" : "yyyy", s = this._createPartInput(n.len, r, i, a, o), c = n.part === "d" ? "day" : n.part === "m" ? "month" : "year", l = this.getLabel() || "Date";
+					s.setAttribute("aria-label", `${e === "end" ? `End ${l.toLowerCase()}` : l} ${c}`), e === "start" ? this._startPartInputs.push(s) : this._endPartInputs.push(s), t.appendChild(s);
+				}
+			}), t;
+		};
+		if (this._isRange) {
+			let e = document.createElement("div");
+			e.className = "mint-date-picker-range-part", e.appendChild(g("start")), this._inputsWrapperEl.appendChild(e);
+			let t = document.createElement("span");
+			t.textContent = " - ", t.className = "mint-date-picker-range-dash", this._inputsWrapperEl.appendChild(t);
+			let n = document.createElement("div");
+			n.className = "mint-date-picker-range-part", n.appendChild(g("end")), this._inputsWrapperEl.appendChild(n);
+		} else this._inputsWrapperEl.appendChild(g("start"));
+		let _ = document.createElement("div");
+		if (_.className = "mint-date-picker-stacked", this.classList.toggle("is-input-mode", this._isInputMode), _.appendChild(this._displayEl), _.appendChild(this._inputsWrapperEl), m.appendChild(_), this._isRange && this._inputsWrapperEl && this._setupContainerObserver(), m.addEventListener("click", () => {
+			this._isInputMode || i || a || this._enterInputMode();
+		}), this._attachPartInputHandlers(this._startPartInputs, h, m), this._isRange && this._attachPartInputHandlers(this._endPartInputs, h, m), this._parseValue(r), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton) this._iconButton.disabled = i || a, !i && !a ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
+		else {
+			this._iconButton = document.createElement("button"), this._iconButton.type = "button", this._iconButton.tabIndex = 0, this._iconButton.className = "mint-date-picker-icon-button", this._iconButton.setAttribute("aria-label", "Open calendar"), this._iconButton.setAttribute("aria-haspopup", "dialog"), this._iconButton.setAttribute("aria-expanded", "false");
+			let e = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
+			this._iconButton.id = e;
+			let t = document.createElement("mint-icon");
+			t.setAttribute("name", "calendar"), t.className = "mint-date-picker-icon", this._iconButton.appendChild(t), this._input.prepend(this._iconButton), this._iconButton.disabled = i || a;
+		}
+		this._renderErrorState(u, d), this._syncDateFieldDescriptions(), this._renderSkeleton(e);
+	}
+	_renderErrorState(e, t) {
+		let n = this.querySelector(".mint-date-picker-error");
+		e && t ? (n || (n = document.createElement("div"), n.className = "mint-date-picker-error", this.appendChild(n)), n.textContent = t) : n && n.remove();
+	}
+	_syncDateFieldDescriptions() {
+		let e = Array.from(this.querySelectorAll(".mint-date-fields input"));
+		if (!e.length) return;
+		let t = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), n = this.querySelector(".mint-date-picker-info"), r = this.querySelector(".mint-date-picker-error"), i = this.getAttribute("id") || this._a11yId;
+		n && (n.id = `${i}-info`, t.push(n.id)), r && (r.id = `${i}-error`, t.push(r.id));
+		let a = Array.from(new Set(t)).join(" ");
+		e.forEach((e) => {
+			e.setAttribute("aria-invalid", String(this._hiddenInput?.getAttribute("aria-invalid") === "true")), a ? e.setAttribute("aria-describedby", a) : e.removeAttribute("aria-describedby");
+		});
+	}
+	_applyErrorVisuals(e, t, n) {
+		if (this._renderErrorState(e, t), this._fieldsContainer) {
+			let t = this._getFieldContainerClass(e, n);
+			this._fieldsContainer.className = t;
+		}
+		this._hiddenInput && this._hiddenInput.setAttribute("aria-invalid", e ? "true" : "false"), this._syncDateFieldDescriptions();
+	}
+	_attachFormResetListener() {
+		let e = this.closest("form");
+		!e || this._resetHandler || (this._resetHandler = () => {
+			this.setValue(""), this._clearPartInputs(this._startPartInputs), this._clearPartInputs(this._endPartInputs), this._isInputMode = !1, this._updateDisplayText(), this._applyErrorVisuals(!1, "", this.isDisabled());
+		}, e.addEventListener("reset", this._resetHandler));
+	}
+	_clearPartInputs(e) {
+		e.forEach((e) => {
+			e.value = "";
+		});
+	}
+	_getFieldContainerClass(e, t) {
+		return `mint-date-fields${e ? " has-error" : ""}${t ? " is-disabled" : ""}`;
+	}
+	_handleInputChange(e) {}
+	_cleanInputValue(e, t) {
+		return e;
+	}
+	_handleBlur(e) {
+		let t = this.getFormat(), n = this.getSelectionMode(), r = this._isRange || n === "week" || n === "month";
+		if (!e) {
+			this.setValue(""), this._updateDisplayText();
+			return;
+		}
+		if (r) {
+			let [n, r] = this._splitRangeInput(e, t), i = n ? this._parseDateString(n, t) : null, a = r ? this._parseDateString(r, t) : null;
+			if (i && a) {
+				let [e, n] = i <= a ? [i, a] : [a, i], r = `${this._formatDate(e, t)} - ${this._formatDate(n, t)}`;
+				this.setValue(r), this._applyDateToParts(e, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(n, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = e, this._selectedEndDate = n, this._currentMonth = e.getMonth(), this._currentYear = e.getFullYear();
+			} else if (i) {
+				let e = this._formatDate(i, t);
+				this.setValue(e), this._applyDateToParts(i, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = i, this._selectedEndDate = null, this._currentMonth = i.getMonth(), this._currentYear = i.getFullYear();
+			} else 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;
+		} else if (this._validateDateString(e, t)) {
+			let n = this._parseDateString(e, t);
+			if (n) {
+				let e = this._formatDate(n, t);
+				this.setValue(e), this._applyDateToParts(n, this._startPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear();
+			}
+		} else this.setValue(""), this._applyDateToParts(null, this._startPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = null, this._selectedEndDate = null;
+	}
+	_setupPopoverWithRetry(e = 0) {
+		if (!this._iconButton) {
+			e < 10 && requestAnimationFrame(() => {
+				this._setupPopoverWithRetry(e + 1);
+			});
+			return;
+		}
+		let t = this._iconButton.id;
+		t && this._iconButton.isConnected && document.getElementById(t) ? this._createPopover(t) : e < 10 && requestAnimationFrame(() => {
+			this._setupPopoverWithRetry(e + 1);
+		});
+	}
+	_createPopover(e) {
+		if (e) {
+			if (!document.getElementById(e)) {
+				setTimeout(() => {
+					this._createPopover(e);
+				}, 50);
+				return;
+			}
+			if (this._popover) {
+				if (this._popover.getAttribute("trigger-id") !== e) {
+					this._popover.setAttribute("trigger-id", e);
+					let t = this._popover;
+					typeof t._setupTrigger == "function" && t._setupTrigger();
+				}
+				this._buildCalendar();
+			} else {
+				this._popover = document.createElement("mint-popover"), this._popover.classList.add("mint-date-picker-popover"), this._popover.setAttribute("direction", "down"), this._popover.setAttribute("padding", "0");
+				let t = this.closest("mint-modal"), n = this.closest("mint-off-canvas");
+				t || n ? document.body.appendChild(this._popover) : this.parentNode ? this.parentNode.insertBefore(this._popover, this.nextSibling) : document.body.appendChild(this._popover), requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						this._popover && this._popover.isConnected && (this._popover.setAttribute("trigger-id", e), this._popoverObserver || (this._popoverObserver = new MutationObserver((e) => {
+							e.forEach((e) => {
+								if (e.type === "attributes" && e.attributeName === "open") if (this._popover?.hasAttribute("open")) requestAnimationFrame(() => {
+									this._buildCalendar();
+									let e = this._popover;
+									typeof e.render == "function" && e.render(), this._setupFocusTrap();
+								});
+								else {
+									if (this._removeFocusTrap(), this._iconButton && !this._iconButton.disabled && requestAnimationFrame(() => {
+										this._iconButton?.focus();
+									}), this._viewMode = "calendar", this._selectedStartDate) this._currentMonth = this._selectedStartDate.getMonth(), this._currentYear = this._selectedStartDate.getFullYear();
+									else {
+										let e = /* @__PURE__ */ new Date();
+										this._currentMonth = e.getMonth(), this._currentYear = e.getFullYear();
+									}
+									requestAnimationFrame(() => {
+										this._buildCalendar();
+									}), this._hiddenInput && (this._syncHiddenInput(), setTimeout(() => {
+										let e = new FocusEvent("blur", {
+											bubbles: !0,
+											cancelable: !0,
+											relatedTarget: null
+										});
+										this._hiddenInput?.dispatchEvent(e);
+									}, 0));
+								}
+							});
+						}), this._popoverObserver.observe(this._popover, {
+							attributes: !0,
+							attributeFilter: ["open"]
+						})), requestAnimationFrame(() => {
+							this._buildCalendar();
+						}));
+					});
+				});
+			}
+		}
+	}
+	_buildCalendar() {
+		if (!this._popover) return;
+		this._calendarContainer && this._calendarContainer.parentNode && this._calendarContainer.remove(), this._calendarContainer = document.createElement("div"), this._calendarContainer.className = "mint-date-calendar";
+		let e = this.getMode();
+		e === "month" && this._viewMode === "calendar" ? this._viewMode = "month" : e === "year" && this._viewMode === "calendar" ? this._viewMode = "year" : e === "default" && this._viewMode !== "month" && this._viewMode !== "year" && (this._viewMode = "calendar"), this._viewMode === "calendar" ? this._buildCalendarView() : this._viewMode === "month" ? this._buildMonthView() : this._viewMode === "year" && this._buildYearView(), this._popover.replaceChildren(this._calendarContainer);
+	}
+	_buildCalendarView() {
+		if (!this._calendarContainer) return;
+		let e = this._getDaysInMonth(this._currentMonth, this._currentYear), t = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), n = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		], r = this.getWeekStartDay(), i = [
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		], a = [...i.slice(r), ...i.slice(0, r)], o = this.getShortcuts(), s = o.length > 0;
+		this._calendarContainer.className = `mint-date-calendar${s ? " has-shortcuts" : ""}`;
+		let c = document.createElement("div");
+		c.className = "mint-date-calendar-layout";
+		let l = document.createElement("div");
+		l.className = "mint-date-calendar-content";
+		let u = document.createElement("div");
+		u.className = "mint-date-calendar-header";
+		let d = document.createElement("button");
+		d.type = "button", d.tabIndex = 0, d.className = "mint-date-calendar-nav-button", d.setAttribute("aria-label", "Previous month"), d.setAttribute("data-keep-popover-open", "true");
+		let f = document.createElement("mint-icon");
+		f.setAttribute("name", "caret-left"), f.className = "mint-date-calendar-icon", d.appendChild(f), d.addEventListener("click", () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		}), u.appendChild(d);
+		let p = document.createElement("div");
+		p.className = "mint-date-calendar-month-year";
+		let m = document.createElement("button");
+		m.type = "button", m.tabIndex = 0, m.className = "mint-date-calendar-title-button", m.setAttribute("data-keep-popover-open", "true"), m.textContent = n[this._currentMonth], m.setAttribute("aria-label", `Choose month, ${n[this._currentMonth]}`);
+		let h = () => {
+			let e = this.getMode();
+			e !== "month" && e !== "year" && (this._viewMode = "month", this._buildCalendar());
+		};
+		m.addEventListener("click", h), m.addEventListener("touchend", (e) => {
+			e.preventDefault(), h();
+		}, { passive: !1 }), p.appendChild(m);
+		let g = document.createElement("button");
+		g.type = "button", g.tabIndex = 0, g.className = "mint-date-calendar-title-button", g.setAttribute("data-keep-popover-open", "true"), g.textContent = String(this._currentYear), g.setAttribute("aria-label", `Choose year, ${this._currentYear}`), g.addEventListener("click", () => {
+			this.getMode() !== "year" && (this._viewMode = "year", this._buildCalendar());
+		}), p.appendChild(g), u.appendChild(p);
+		let _ = document.createElement("button");
+		_.type = "button", _.tabIndex = 0, _.className = "mint-date-calendar-nav-button", _.setAttribute("aria-label", "Next month"), _.setAttribute("data-keep-popover-open", "true");
+		let v = document.createElement("mint-icon");
+		v.setAttribute("name", "caret-right"), v.className = "mint-date-calendar-icon", _.appendChild(v);
+		let y = () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		};
+		_.addEventListener("click", y), _.addEventListener("touchend", (e) => {
+			e.preventDefault(), y();
+		}, { passive: !1 }), u.appendChild(_);
+		let b = document.createElement("div");
+		b.className = "mint-date-calendar-day-names", a.forEach((e) => {
+			let t = document.createElement("div");
+			t.className = "mint-date-calendar-day-name", t.textContent = e, b.appendChild(t);
+		});
+		let x = document.createElement("div");
+		x.className = "mint-date-calendar-grid", x.setAttribute("role", "group"), x.setAttribute("aria-label", `${n[this._currentMonth]} ${this._currentYear}`);
+		let S = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, C = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
+		this.getDisabledDates();
+		let w = this._currentMonth === 0 ? 11 : this._currentMonth - 1, T = this._currentMonth === 0 ? this._currentYear - 1 : this._currentYear, E = this._getDaysInMonth(w, T), D = this._currentMonth === 11 ? 0 : this._currentMonth + 1, O = this._currentMonth === 11 ? this._currentYear + 1 : this._currentYear, k = t + e, A = Math.ceil(k / 7) * 7 - k, j = (e, t, n) => {
+			let r = this._isToday(e), i = this._isDateSelected(e), a = this._isDateInRange(e), o = S && e < S || C && e > C || this._isDateDisabled(e), s = "is-fully-rounded", c = this._isRange && this._selectedStartDate && !this._selectedEndDate && this._hoveredDate, l = c && this._selectedStartDate && this._hoveredDate && this._selectedStartDate < this._hoveredDate ? this._selectedStartDate : c && this._hoveredDate ? this._hoveredDate : null, u = c && this._selectedStartDate && this._hoveredDate && this._selectedStartDate < this._hoveredDate ? this._hoveredDate : c && this._selectedStartDate ? this._selectedStartDate : null, d = l !== null && this._isSameDate(e, l), f = u !== null && this._isSameDate(e, u), p = this._hoveredDate !== null && this._isSameDate(e, this._hoveredDate), m = c && this._hoveredDate && this._selectedStartDate ? !this._rangeIncludesDisabledDates(this._selectedStartDate < this._hoveredDate ? this._selectedStartDate : this._hoveredDate, this._selectedStartDate < this._hoveredDate ? this._hoveredDate : this._selectedStartDate) : !1;
+			if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
+				let t = this._isSameDate(e, this._selectedStartDate), n = this._isSameDate(e, this._selectedEndDate);
+				t && n ? s = "is-fully-rounded" : t ? s = "is-range-start" : n ? s = "is-range-end" : a && (s = "is-range-middle");
+			} else c && (d || f) && m ? d && f ? s = "is-fully-rounded" : d ? s = "is-range-start" : f && (s = "is-range-end") : i && !this._isRange || i && this._isRange && !this._selectedEndDate ? s = "is-fully-rounded" : a && c && m && (s = "is-range-middle");
+			let h = document.createElement("button");
+			h.type = "button", h.disabled = !!o, h.tabIndex = o ? -1 : 0;
+			let g = ["mint-date-picker-day", s], _ = i || c && p && m;
+			return n || g.push("is-outside-month"), _ && g.push("is-selected"), a && !_ && g.push("is-in-range"), r && !_ && g.push("is-today"), o && g.push("is-disabled"), h.className = g.join(" "), h.textContent = t.toString(), h.setAttribute("aria-label", e.toLocaleDateString(void 0, {
+				weekday: "long",
+				year: "numeric",
+				month: "long",
+				day: "numeric"
+			})), h.setAttribute("aria-pressed", String(i)), r && h.setAttribute("aria-current", "date"), o || (h.addEventListener("click", (t) => {
+				t.preventDefault(), t.stopPropagation(), this._handleDateClick(e);
+			}), h.addEventListener("touchstart", (t) => {
+				t.preventDefault(), t.stopPropagation(), this._isTouchActive = !0, this._touchStartDate = e, this._touchStartElement = h, h.classList.add("is-touch-active");
+			}, { passive: !1 }), h.addEventListener("touchend", (t) => {
+				t.preventDefault(), t.stopPropagation(), this._isTouchActive && this._touchStartDate && this._isSameDate(this._touchStartDate, e) && this._handleDateClick(e), this._touchStartElement && this._touchStartElement.classList.remove("is-touch-active"), this._isTouchActive = !1, this._touchStartDate = null, this._touchStartElement = null;
+			}, { passive: !1 }), h.addEventListener("touchcancel", () => {
+				this._touchStartElement && this._touchStartElement.classList.remove("is-touch-active"), this._isTouchActive = !1, this._touchStartDate = null, this._touchStartElement = null;
+			}), this._isRange && this._selectedStartDate && !this._selectedEndDate && !o && (h.addEventListener("mouseenter", () => {
+				this._isHandlingClick || this._isTouchActive || this._isDateDisabled(e) || (!this._hoveredDate || !this._isSameDate(this._hoveredDate, e)) && (this._hoveredDate = e, this._buildCalendar());
+			}), h.addEventListener("touchmove", (e) => {
+				if (!this._isTouchActive || !this._touchStartDate) return;
+				let t = e.touches[0], n = document.elementFromPoint(t.clientX, t.clientY);
+				for (; n && !n.classList.contains("mint-date-picker-day");) n = n.parentElement;
+				if (n && n !== h) {
+					let e = n.getAttribute("data-date");
+					if (e) {
+						let t = new Date(e);
+						this._isDateDisabled(t) || (!this._hoveredDate || !this._isSameDate(this._hoveredDate, t)) && (this._hoveredDate = t, this._buildCalendar());
+					}
+				}
+			}, { passive: !0 }))), h;
+		};
+		for (let e = t - 1; e >= 0; e--) {
+			let t = E - e, n = j(new Date(T, w, t), t, !1);
+			x.appendChild(n);
+		}
+		for (let t = 1; t <= e; t++) {
+			let e = j(new Date(this._currentYear, this._currentMonth, t), t, !0);
+			x.appendChild(e);
+		}
+		for (let e = 1; e <= A; e++) {
+			let t = j(new Date(O, D, e), e, !1);
+			x.appendChild(t);
+		}
+		if (this._isRange && this._selectedStartDate && !this._selectedEndDate && (x.addEventListener("mouseleave", () => {
+			this._isTouchActive || (this._hoveredDate = null, this._buildCalendar());
+		}), x.addEventListener("touchend", (e) => {
+			let t = e.changedTouches[0], n = document.elementFromPoint(t.clientX, t.clientY);
+			n && !x.contains(n) && (this._hoveredDate = null, this._buildCalendar());
+		}, { passive: !0 })), s) {
+			let e = document.createElement("div");
+			e.className = "mint-date-shortcuts";
+			let t = document.createElement("div");
+			t.className = "mint-date-shortcuts-wrapper";
+			let n = document.createElement("div");
+			n.className = "mint-date-shortcuts-row";
+			let r = document.createElement("div");
+			r.className = "mint-date-shortcuts-fade is-horizontal is-left", t.appendChild(r);
+			let i = document.createElement("div");
+			i.className = "mint-date-shortcuts-fade is-horizontal is-right is-visible", t.appendChild(i);
+			let a = document.createElement("div");
+			a.className = "mint-date-shortcuts-fade is-vertical is-top", t.appendChild(a);
+			let s = document.createElement("div");
+			s.className = "mint-date-shortcuts-fade is-vertical is-bottom is-visible", t.appendChild(s);
+			let l = () => {
+				if (window.innerWidth >= 768) {
+					let e = n.scrollTop, t = n.scrollHeight, o = n.clientHeight;
+					e > 0 ? a.classList.add("is-visible") : a.classList.remove("is-visible"), e + o < t - 1 ? s.classList.add("is-visible") : s.classList.remove("is-visible"), r.classList.remove("is-visible"), i.classList.remove("is-visible");
+				} else {
+					let e = n.scrollLeft, t = n.scrollWidth, o = n.clientWidth;
+					e > 0 ? r.classList.add("is-visible") : r.classList.remove("is-visible"), e + o < t - 1 ? i.classList.add("is-visible") : i.classList.remove("is-visible"), a.classList.remove("is-visible"), s.classList.remove("is-visible");
+				}
+			};
+			n.addEventListener("scroll", l), window.addEventListener("resize", l), setTimeout(l, 0), o.forEach((e) => {
+				let t = document.createElement("button");
+				t.type = "button", t.tabIndex = 0, t.className = "mint-date-shortcut-button", t.textContent = e.label;
+				let r = () => {
+					let t = e.action();
+					if (t) {
+						if (this._isRange && "start" in t && "end" in t) {
+							this._selectedStartDate = t.start, this._selectedEndDate = t.end;
+							let e = this.getFormat(), n = `${this._formatDate(t.start, e)} - ${this._formatDate(t.end, e)}`;
+							this.setValue(n), this._currentMonth = t.start.getMonth(), this._currentYear = t.start.getFullYear();
+						} else if (t instanceof Date) {
+							this._selectedStartDate = t, this._selectedEndDate = null;
+							let e = this.getFormat(), n = this._formatDate(t, e);
+							this.setValue(n), this._currentMonth = t.getMonth(), this._currentYear = t.getFullYear();
+						}
+						this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
+							detail: { value: this.getValue() },
+							bubbles: !0,
+							cancelable: !0
+						})), this.dispatchEvent(new CustomEvent("change", {
+							detail: { value: this.getValue() },
+							bubbles: !0,
+							cancelable: !0
+						}));
+					}
+				};
+				t.addEventListener("click", r), t.addEventListener("touchend", (e) => {
+					e.preventDefault(), r();
+				}, { passive: !1 }), n.appendChild(t);
+			}), t.appendChild(n), e.appendChild(t), c.appendChild(e);
+		}
+		l.appendChild(u), l.appendChild(b), l.appendChild(x), c.appendChild(l), this._calendarContainer.appendChild(c);
+	}
+	_buildMonthView() {
+		if (!this._calendarContainer) return;
+		let e = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		], t = document.createElement("div");
+		t.className = "mint-date-calendar-header";
+		let n = document.createElement("button");
+		n.type = "button", n.tabIndex = 0, n.className = "mint-date-calendar-nav-button", n.setAttribute("data-keep-popover-open", "true");
+		let r = document.createElement("mint-icon");
+		r.setAttribute("name", "caret-left"), r.className = "mint-date-calendar-icon", n.appendChild(r);
+		let i = () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentYear--, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		};
+		n.addEventListener("click", i), n.addEventListener("touchend", (e) => {
+			e.preventDefault(), i();
+		}, { passive: !1 }), t.appendChild(n);
+		let a = document.createElement("button");
+		a.type = "button", a.tabIndex = 0, a.className = "mint-date-calendar-title-button", a.setAttribute("data-keep-popover-open", "true"), a.textContent = String(this._currentYear);
+		let o = () => {
+			this.getMode() !== "year" && (this._viewMode = "year", this._buildCalendar());
+		};
+		a.addEventListener("click", o), a.addEventListener("touchend", (e) => {
+			e.preventDefault(), o();
+		}, { passive: !1 }), t.appendChild(a);
+		let s = document.createElement("button");
+		s.type = "button", s.tabIndex = 0, s.className = "mint-date-calendar-nav-button", s.setAttribute("data-keep-popover-open", "true");
+		let c = document.createElement("mint-icon");
+		c.setAttribute("name", "caret-right"), c.className = "mint-date-calendar-icon", s.appendChild(c);
+		let l = () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentYear++, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		};
+		s.addEventListener("click", l), s.addEventListener("touchend", (e) => {
+			e.preventDefault(), l();
+		}, { passive: !1 }), t.appendChild(s);
+		let u = document.createElement("div");
+		u.className = "mint-date-calendar-option-grid", e.forEach((e, t) => {
+			let n = document.createElement("button");
+			n.type = "button", n.tabIndex = 0, this.getMode() !== "month" && n.setAttribute("data-keep-popover-open", "true"), n.className = `mint-date-calendar-option${this._currentMonth === t ? " is-selected" : ""}`, n.textContent = e;
+			let r = () => {
+				if (this.getMode() === "month") {
+					let e = new Date(this._currentYear, t, 1), n = this.getFormat(), r = this._formatDate(e, n);
+					this.setValue(r), this._selectedStartDate = e, this._selectedEndDate = null;
+					let i = this._currentMonth, a = this._currentYear;
+					this._currentMonth = t, this._dispatchMonthChangeEvent(i, a, this._currentMonth, this._currentYear), this.dispatchEvent(new CustomEvent("input", {
+						detail: { value: this.getValue() },
+						bubbles: !0,
+						cancelable: !0
+					})), this.dispatchEvent(new CustomEvent("change", {
+						detail: { value: this.getValue() },
+						bubbles: !0,
+						cancelable: !0
+					})), this._dispatchDateChangeEvent(), this._popover && typeof this._popover.close == "function" && this._popover.close();
+				} else {
+					let e = this._currentMonth, n = this._currentYear;
+					this._currentMonth = t, this._viewMode = "calendar", this._buildCalendar(), this._dispatchMonthChangeEvent(e, n, this._currentMonth, this._currentYear);
+				}
+			};
+			n.addEventListener("click", r), n.addEventListener("touchend", (e) => {
+				e.preventDefault(), r();
+			}, { passive: !1 }), u.appendChild(n);
+		}), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(u);
+	}
+	_buildYearView() {
+		if (!this._calendarContainer) return;
+		let e = this._currentYear - 6, t = this._currentYear + 6, n = document.createElement("div");
+		n.className = "mint-date-calendar-header";
+		let r = document.createElement("button");
+		r.type = "button", r.tabIndex = 0, r.className = "mint-date-calendar-nav-button", r.setAttribute("data-keep-popover-open", "true");
+		let i = document.createElement("mint-icon");
+		i.setAttribute("name", "caret-left"), i.className = "mint-date-calendar-icon", r.appendChild(i);
+		let a = () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentYear -= 12, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		};
+		r.addEventListener("click", a), r.addEventListener("touchend", (e) => {
+			e.preventDefault(), a();
+		}, { passive: !1 }), n.appendChild(r);
+		let o = document.createElement("div");
+		o.className = "mint-date-calendar-title", o.textContent = `${e} - ${t}`, n.appendChild(o);
+		let s = document.createElement("button");
+		s.type = "button", s.tabIndex = 0, s.className = "mint-date-calendar-nav-button", s.setAttribute("data-keep-popover-open", "true");
+		let c = document.createElement("mint-icon");
+		c.setAttribute("name", "caret-right"), c.className = "mint-date-calendar-icon", s.appendChild(c);
+		let l = () => {
+			let e = this._currentMonth, t = this._currentYear;
+			this._currentYear += 12, this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+		};
+		s.addEventListener("click", l), s.addEventListener("touchend", (e) => {
+			e.preventDefault(), l();
+		}, { passive: !1 }), n.appendChild(s);
+		let u = document.createElement("div");
+		u.className = "mint-date-calendar-option-grid";
+		for (let n = e; n <= t; n++) {
+			let e = document.createElement("button");
+			e.type = "button", e.tabIndex = 0, this.getMode() !== "year" && e.setAttribute("data-keep-popover-open", "true"), e.className = `mint-date-calendar-option${this._currentYear === n ? " is-selected" : ""}`, e.textContent = String(n), e.addEventListener("click", () => {
+				let e = this.getMode();
+				if (e === "year") {
+					let e = new Date(n, 0, 1), t = this.getFormat(), r = this._formatDate(e, t);
+					this.setValue(r), this._selectedStartDate = e, this._selectedEndDate = null;
+					let i = this._currentMonth, a = this._currentYear;
+					this._currentYear = n, this._currentMonth = 0, this._dispatchMonthChangeEvent(i, a, this._currentMonth, this._currentYear), this.dispatchEvent(new CustomEvent("input", {
+						detail: { value: this.getValue() },
+						bubbles: !0,
+						cancelable: !0
+					})), this.dispatchEvent(new CustomEvent("change", {
+						detail: { value: this.getValue() },
+						bubbles: !0,
+						cancelable: !0
+					})), this._dispatchDateChangeEvent(), this._popover && typeof this._popover.close == "function" && this._popover.close();
+				} else if (e === "month") {
+					let e = this._currentMonth, t = this._currentYear;
+					this._currentYear = n, this._viewMode = "month", this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+				} else {
+					let e = this._currentMonth, t = this._currentYear;
+					this._currentYear = n, this._viewMode = "calendar", this._buildCalendar(), this._dispatchMonthChangeEvent(e, t, this._currentMonth, this._currentYear);
+				}
+			}), u.appendChild(e);
+		}
+		this._calendarContainer.appendChild(n), this._calendarContainer.appendChild(u);
+	}
+	_getDaysInMonth(e, t) {
+		return new Date(t, e + 1, 0).getDate();
+	}
+	_getFirstDayOfMonth(e, t) {
+		let n = this.getWeekStartDay(), r = new Date(t, e, 1).getDay();
+		return r >= n ? r - n : 7 - (n - r);
+	}
+	_isToday(e) {
+		let t = /* @__PURE__ */ new Date();
+		return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+	}
+	_isDateSelected(e) {
+		let t = this.getSelectionMode();
+		return this._isRange || t === "week" || t === "month" ? this._selectedStartDate && this._selectedEndDate ? this._isSameDate(e, this._selectedStartDate) || this._isSameDate(e, this._selectedEndDate) : this._isRange && this._selectedStartDate && !this._selectedEndDate ? this._isSameDate(e, this._selectedStartDate) : !1 : this._selectedStartDate !== null && this._isSameDate(e, this._selectedStartDate);
+	}
+	_isDateInRange(e) {
+		let t = this.getSelectionMode();
+		if ((this._isRange || t === "week" || t === "month") && this._selectedStartDate && this._selectedEndDate) return this._rangeIncludesDisabledDates(this._selectedStartDate, this._selectedEndDate) ? !1 : e >= this._selectedStartDate && e <= this._selectedEndDate;
+		if (this._isRange && this._selectedStartDate && !this._selectedEndDate && this._hoveredDate) {
+			let t = this._selectedStartDate < this._hoveredDate ? this._selectedStartDate : this._hoveredDate, n = this._selectedStartDate < this._hoveredDate ? this._hoveredDate : this._selectedStartDate;
+			if (this._rangeIncludesDisabledDates(t, n)) {
+				let r = this._findFirstDisabledDateInRange(t, n);
+				return r ? this._selectedStartDate < this._hoveredDate ? e >= t && e < r && !this._isSameDate(e, t) : e > r && e <= n && !this._isSameDate(e, n) : !1;
+			}
+			return e >= t && e <= n && !this._isSameDate(e, t) && !this._isSameDate(e, n);
+		}
+		return !1;
+	}
+	_rangeIncludesDisabledDates(e, t) {
+		let n = this.getDisabledDates(), r = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = new Date(t.getFullYear(), t.getMonth(), t.getDate());
+		return n.some((e) => {
+			let t = new Date(e.getFullYear(), e.getMonth(), e.getDate());
+			return t >= r && t <= i;
+		});
+	}
+	_findFirstDisabledDateInRange(e, t) {
+		let n = this.getDisabledDates(), r = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = new Date(t.getFullYear(), t.getMonth(), t.getDate()), a = n.map((e) => new Date(e.getFullYear(), e.getMonth(), e.getDate())).filter((e) => e >= r && e <= i).sort((e, t) => e.getTime() - t.getTime());
+		return a.length > 0 ? a[0] : null;
+	}
+	_hasIncompleteRange() {
+		return this._isRange && this._selectedStartDate !== null && this._selectedEndDate === null;
+	}
+	_isSameDate(e, t) {
+		return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+	}
+	_isDateDisabled(e) {
+		return this.getDisabledDates().some((t) => this._isSameDate(e, t));
+	}
+	_dispatchMonthChangeEvent(e, t, n, r) {
+		(e !== n || t !== r) && this.dispatchEvent(new CustomEvent("month-change", {
+			detail: {
+				month: n,
+				year: r,
+				oldMonth: e,
+				oldYear: t
+			},
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		}));
+	}
+	_dispatchDateChangeEvent() {
+		let e = this.getFormat(), t = { value: this.getValue() };
+		this._selectedStartDate && (t.startDate = this._selectedStartDate, t.startDateFormatted = this._formatDate(this._selectedStartDate, e)), this._selectedEndDate && (t.endDate = this._selectedEndDate, t.endDateFormatted = this._formatDate(this._selectedEndDate, e)), this.dispatchEvent(new CustomEvent("date-change", {
+			detail: t,
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		}));
+	}
+	_setupContainerObserver() {
+		if (this._resizeObserver &&= (this._resizeObserver.disconnect(), null), !this._inputsWrapperEl) return;
+		let e = (e) => {
+			this._inputsWrapperEl && (e < 400 ? (this._inputsWrapperEl.classList.add("is-wrapping"), this._inputsWrapperEl.classList.remove("is-nowrap")) : (this._inputsWrapperEl.classList.remove("is-wrapping"), this._inputsWrapperEl.classList.add("is-nowrap")));
+		};
+		e(this._inputsWrapperEl.offsetWidth || this.offsetWidth), this._resizeObserver = new ResizeObserver((t) => {
+			for (let n of t) {
+				let t = n.contentRect.width;
+				e(t);
+			}
+		}), this._resizeObserver.observe(this);
+	}
+	_getWeekStart(e) {
+		let t = this.getWeekStartDay(), n = e.getDay(), r;
+		r = n >= t ? n - t : 7 - (t - n);
+		let i = new Date(e);
+		return i.setDate(e.getDate() - r), i.setHours(0, 0, 0, 0), i;
+	}
+	_getWeekEnd(e) {
+		let t = this._getWeekStart(e), n = new Date(t);
+		return n.setDate(t.getDate() + 6), n.setHours(23, 59, 59, 999), n;
+	}
+	_getMonthStart(e) {
+		let t = new Date(e.getFullYear(), e.getMonth(), 1);
+		return t.setHours(0, 0, 0, 0), t;
+	}
+	_getMonthEnd(e) {
+		let t = new Date(e.getFullYear(), e.getMonth() + 1, 0);
+		return t.setHours(23, 59, 59, 999), t;
+	}
+	_handleDateClick(e) {
+		this._isHandlingClick = !0;
+		try {
+			let t = this.getFormat(), n = this.getSelectionMode(), r, i;
+			if (n === "week" ? (r = this._getWeekStart(e), i = this._getWeekEnd(e)) : n === "month" ? (r = this._getMonthStart(e), i = this._getMonthEnd(e)) : (r = e, i = e), this.isRange() || n === "week" || n === "month") if (n === "week" || n === "month") {
+				if (this._rangeIncludesDisabledDates(r, i)) {
+					this._buildCalendar();
+					return;
+				}
+				this._selectedStartDate = r, this._selectedEndDate = i;
+				let e = `${this._formatDate(this._selectedStartDate, t)} - ${this._formatDate(this._selectedEndDate, t)}`;
+				this.setValue(e), this._textInput && (this._textInput.value = e), this._popover && typeof this._popover.close == "function" && this._popover.close();
+			} else if (this._hoveredDate = null, this._selectedStartDate === null) {
+				if (this._isDateDisabled(r)) {
+					this._buildCalendar();
+					return;
+				}
+				this._selectedStartDate = new Date(r.getFullYear(), r.getMonth(), r.getDate()), this._selectedEndDate = null, this._currentMonth = this._selectedStartDate.getMonth(), this._currentYear = this._selectedStartDate.getFullYear(), this._hoveredDate = null, this._buildCalendar();
+			} else if (this._selectedEndDate === null) {
+				let n = new Date(e.getFullYear(), e.getMonth(), e.getDate()), r = this._selectedStartDate ? new Date(this._selectedStartDate.getFullYear(), this._selectedStartDate.getMonth(), this._selectedStartDate.getDate()) : null, i, a;
+				if (r && n < r ? (i = n, a = r) : (i = r, a = n), this._rangeIncludesDisabledDates(i, a)) {
+					this._buildCalendar();
+					return;
+				}
+				r && n < r ? (this._selectedEndDate = r, this._selectedStartDate = n) : (this._selectedEndDate = n, r && (this._selectedStartDate = r)), this._currentMonth = this._selectedStartDate.getMonth(), this._currentYear = this._selectedStartDate.getFullYear();
+				let o = `${this._formatDate(this._selectedStartDate, t)} - ${this._formatDate(this._selectedEndDate, t)}`;
+				this.setAttribute("value", o), this._textInput && (this._textInput.value = o), this._hiddenInput && (this._hiddenInput.value = o), this._updateDisplayText(), this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close();
+			} else this._selectedStartDate = r, this._selectedEndDate = null;
+			else {
+				this._selectedStartDate = r, this._selectedEndDate = null;
+				let e = this._formatDate(r, t);
+				this.setValue(e), this._textInput && (this._textInput.value = e), this._popover && typeof this._popover.close == "function" && this._popover.close();
+			}
+			this._buildCalendar(), this._updateDisplayText(), this._exitInputMode();
+			let a = new Event("input", {
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			});
+			this.dispatchEvent(a), this.dispatchEvent(new CustomEvent("input", {
+				detail: { value: this.getValue() },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: this.getValue() },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			})), this._dispatchDateChangeEvent();
+		} finally {
+			this._isHandlingClick = !1;
+		}
+	}
+	_updateDisplayText() {
+		if (!this._displayEl) return;
+		let e = this.getDisplayFormat(), t = this.getSelectionMode(), n = this._isRange || t === "week" || t === "month", r = "";
+		n && this._selectedStartDate && this._selectedEndDate ? r = `${this._formatDatePhp(this._selectedStartDate, e)} - ${this._formatDatePhp(this._selectedEndDate, e)}` : this._selectedStartDate && (r = this._formatDatePhp(this._selectedStartDate, e)), r ? (this._displayEl.textContent = r, this._displayEl.classList.remove("is-empty")) : (this._displayEl.textContent = "Select date", this._displayEl.classList.add("is-empty")), this._displayEl && this._inputsWrapperEl && this.classList.toggle("is-input-mode", this._isInputMode);
+	}
+	_enterInputMode() {
+		if (!this._isInputMode && !(this.isReadonly() || this.isDisabled()) && (this._isInputMode = !0, this._displayEl && this._inputsWrapperEl && this.classList.add("is-input-mode"), this._startPartInputs.length > 0)) {
+			let e = this._startPartInputs[0];
+			requestAnimationFrame(() => {
+				e.focus();
+				try {
+					e.setSelectionRange(0, e.value.length);
+				} catch {}
+			});
+		}
+	}
+	_exitInputMode() {
+		this._isInputMode && (this._isInputMode = !1, this._displayEl && this._inputsWrapperEl && this.classList.remove("is-input-mode"), this._updateDisplayText());
+	}
+	_renderSkeleton(e) {
+		let t = this.querySelector(".mint-date-picker-skeleton-container");
+		this._fieldsContainer;
+		let n = this._input;
+		if (e) {
+			t || (t = document.createElement("div"), t.className = "mint-date-picker-skeleton-container", n ? n.appendChild(t) : (this.classList.add("is-positioned"), this.appendChild(t)));
+			let e = t.querySelector(".mint-date-picker-skeleton");
+			e || (e = document.createElement("div"), e.className = "mint-date-picker-skeleton", t.appendChild(e)), this.classList.add("is-loading");
+		} else t?.remove(), this.classList.remove("is-loading", "is-positioned");
+	}
+	_getFocusableElements() {
+		if (!this._calendarContainer) return [];
+		let e = [
+			"button:not([disabled])",
+			"a[href]",
+			"input:not([disabled]):not([type=\"hidden\"])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"[tabindex]:not([tabindex=\"-1\"])"
+		].join(", ");
+		return Array.from(this._calendarContainer.querySelectorAll(e)).filter((e) => {
+			let t = window.getComputedStyle(e);
+			return t.display !== "none" && t.visibility !== "hidden";
+		});
+	}
+	_setupFocusTrap() {
+		if (!this._popover || !this._popover.hasAttribute("open")) return;
+		this._removeFocusTrap();
+		let e = this;
+		this._focusTrapHandler = function(t) {
+			if (t.key !== "Tab") return;
+			if (!e._popover || !e._popover.hasAttribute("open")) {
+				e._removeFocusTrap();
+				return;
+			}
+			let n = e._getFocusableElements();
+			if (n.length === 0) return;
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			if (!e._calendarContainer?.contains(a)) {
+				t.preventDefault(), r.focus();
+				return;
+			}
+			if (t.shiftKey && a === r) {
+				t.preventDefault(), i.focus();
+				return;
+			}
+			if (!t.shiftKey && a === i) {
+				t.preventDefault(), r.focus();
+				return;
+			}
+		}, this._escapeHandler = function(t) {
+			(t.key === "Escape" || t.key === "Esc") && e._popover && e._popover.hasAttribute("open") && (t.preventDefault(), t.stopPropagation(), typeof e._popover.close == "function" && e._popover.close());
+		}, document.addEventListener("keydown", this._focusTrapHandler, !0), document.addEventListener("keydown", this._escapeHandler, !0), requestAnimationFrame(() => {
+			let e = this._getFocusableElements();
+			e.length > 0 && e[0].focus();
+		});
+	}
+	_removeFocusTrap() {
+		this._focusTrapHandler &&= (document.removeEventListener("keydown", this._focusTrapHandler, !0), null), this._escapeHandler &&= (document.removeEventListener("keydown", this._escapeHandler, !0), null);
+	}
+};
+customElements.get("mint-date-picker") || t("mint-date-picker", n);
+//#endregion
+export { n as default };