import { n as e, t } from "../../utils-C_mWfcFX.js";
import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "../../date-BJE0WA9Z.js";
//#region src/form/calendar/index.ts
var u = class {
	el;
	gridId;
	labelId;
	config;
	viewYear;
	viewMonth;
	selected;
	rangeStart;
	rangeEnd;
	hoverDate = null;
	focusedDay;
	isDestroyed = !1;
	headerEl;
	gridEl;
	handleKeydown;
	handleGridClick;
	handleGridMouseover;
	handleGridMouseleave;
	constructor(n) {
		this.config = n, this.gridId = e("cmm-calendar-grid"), this.labelId = e("cmm-calendar-label");
		let i = /* @__PURE__ */ new Date(), a = n.value ?? n.rangeStart ?? i;
		this.viewYear = a.getFullYear(), this.viewMonth = a.getMonth(), this.selected = n.value ? r(n.value) : null, this.rangeStart = n.rangeStart ? r(n.rangeStart) : null, this.rangeEnd = n.rangeEnd ? r(n.rangeEnd) : null, this.focusedDay = (this.selected ?? i).getDate(), this.el = document.createElement("div"), this.el.className = this.buildRootClass(), this.el.setAttribute("role", "group"), this.buildHeader(), this.buildGrid(), this.renderGrid(), this.handleKeydown = (e) => {
			this.isDestroyed || this.onKeydown(e);
		}, this.handleGridClick = (e) => {
			if (this.isDestroyed) return;
			let t = e.target.closest("[data-date]");
			if (t === null) return;
			let n = t.getAttribute("data-date");
			n === null || t.getAttribute("aria-disabled") === "true" || this.selectDate(new Date(n));
		}, this.handleGridMouseover = (e) => {
			if (this.isDestroyed || this.config.mode !== "range") return;
			let t = e.target.closest("[data-date]");
			if (t === null) return;
			let n = t.getAttribute("data-date");
			n !== null && (this.hoverDate = new Date(n), this.updateRangeHighlight());
		}, this.handleGridMouseleave = () => {
			this.isDestroyed || this.config.mode !== "range" || (this.hoverDate = null, this.updateRangeHighlight());
		}, this.gridEl.addEventListener("click", this.handleGridClick), this.gridEl.addEventListener("mouseover", this.handleGridMouseover), this.gridEl.addEventListener("mouseleave", this.handleGridMouseleave), this.el.addEventListener("keydown", this.handleKeydown), t(n.container).appendChild(this.el);
	}
	getValue() {
		return this.selected;
	}
	setValue(e) {
		this.selected = e === null ? null : r(e), e !== null && (this.viewYear = e.getFullYear(), this.viewMonth = e.getMonth(), this.focusedDay = e.getDate()), this.renderGrid(), this.updateHeaderLabel();
	}
	setRange(e, t) {
		this.rangeStart = e === null ? null : r(e), this.rangeEnd = t === null ? null : r(t), this.renderGrid();
	}
	goToMonth(e, t) {
		this.viewYear = e, this.viewMonth = t, this.focusedDay = 1, this.renderGrid(), this.updateHeaderLabel();
	}
	destroy() {
		this.isDestroyed = !0, this.gridEl.removeEventListener("click", this.handleGridClick), this.gridEl.removeEventListener("mouseover", this.handleGridMouseover), this.gridEl.removeEventListener("mouseleave", this.handleGridMouseleave), this.el.removeEventListener("keydown", this.handleKeydown), this.el.remove();
	}
	buildRootClass() {
		let e = ["cmm-calendar"];
		return this.config.className && e.push(this.config.className), e.join(" ");
	}
	buildHeader() {
		this.headerEl = document.createElement("div"), this.headerEl.className = "cmm-calendar__header";
		let e = document.createElement("button");
		e.type = "button", e.className = "cmm-calendar__nav-btn", e.setAttribute("aria-label", "Previous month"), e.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>", e.addEventListener("click", () => {
			this.isDestroyed || this.navigateMonth(-1);
		});
		let t = document.createElement("span");
		t.id = this.labelId, t.className = "cmm-calendar__title", t.textContent = `${s[this.viewMonth] ?? ""} ${String(this.viewYear)}`;
		let n = document.createElement("button");
		n.type = "button", n.className = "cmm-calendar__nav-btn", n.setAttribute("aria-label", "Next month"), n.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>", n.addEventListener("click", () => {
			this.isDestroyed || this.navigateMonth(1);
		}), this.headerEl.appendChild(e), this.headerEl.appendChild(t), this.headerEl.appendChild(n), this.el.appendChild(this.headerEl);
	}
	buildGrid() {
		this.gridEl = document.createElement("div"), this.gridEl.id = this.gridId, this.gridEl.className = "cmm-calendar__grid", this.gridEl.setAttribute("role", "grid"), this.gridEl.setAttribute("aria-labelledby", this.labelId), this.gridEl.tabIndex = 0, this.el.appendChild(this.gridEl);
	}
	renderGrid() {
		this.gridEl.innerHTML = "";
		let e = this.config.weekStart ?? 0, t = e === 1 ? l : a, n = document.createElement("div");
		n.className = "cmm-calendar__weekdays", n.setAttribute("role", "row");
		for (let e of t) {
			let t = document.createElement("span");
			t.className = "cmm-calendar__weekday", t.setAttribute("role", "columnheader"), t.setAttribute("aria-label", e), t.textContent = e, n.appendChild(t);
		}
		this.gridEl.appendChild(n);
		let i = this.buildDayGrid(e), o = r(/* @__PURE__ */ new Date()), s = document.createElement("div");
		s.className = "cmm-calendar__row", s.setAttribute("role", "row");
		for (let e = 0; e < i.length; e++) {
			e > 0 && e % 7 == 0 && (this.gridEl.appendChild(s), s = document.createElement("div"), s.className = "cmm-calendar__row", s.setAttribute("role", "row"));
			let t = i[e];
			if (t === void 0) continue;
			let n = document.createElement("button");
			n.type = "button", n.setAttribute("role", "gridcell"), n.setAttribute("data-date", t.date.toISOString()), n.textContent = String(t.date.getDate());
			let r = ["cmm-calendar__day"], a = t.date.getMonth() !== this.viewMonth, l = this.isDateDisabled(t.date);
			a && (r.push("cmm-calendar__day--outside"), this.config.showOutsideDays === !1 && (n.style.visibility = "hidden")), l && (r.push("cmm-calendar__day--disabled"), n.setAttribute("aria-disabled", "true"), n.tabIndex = -1), c(t.date, o) && r.push("cmm-calendar__day--today"), this.config.mode === "range" ? this.applyRangeClasses(t.date, r) : this.selected !== null && c(t.date, this.selected) && (r.push("cmm-calendar__day--selected"), n.setAttribute("aria-selected", "true")), !a && !l && t.date.getDate() === this.focusedDay ? n.tabIndex = 0 : l || (n.tabIndex = -1), n.className = r.join(" "), s.appendChild(n);
		}
		this.gridEl.appendChild(s);
	}
	buildDayGrid(e) {
		return i(this.viewYear, this.viewMonth, e).map((e) => ({ date: e }));
	}
	isDateDisabled(e) {
		return o(e, this.config.minDate, this.config.maxDate, this.config.disabledDates);
	}
	applyRangeClasses(e, t) {
		let r = this.rangeStart, i = this.rangeEnd ?? this.hoverDate;
		r !== null && c(e, r) && (t.push("cmm-calendar__day--range-start"), t.push("cmm-calendar__day--selected")), i !== null && c(e, i) && (t.push("cmm-calendar__day--range-end"), t.push("cmm-calendar__day--selected")), r !== null && i !== null && n(e, r, i) && t.push("cmm-calendar__day--in-range");
	}
	updateRangeHighlight() {
		let e = this.gridEl.querySelectorAll("[data-date]");
		for (let t of e) {
			let e = t.getAttribute("data-date");
			if (e === null) continue;
			let r = new Date(e);
			t.classList.remove("cmm-calendar__day--range-start", "cmm-calendar__day--range-end", "cmm-calendar__day--in-range", "cmm-calendar__day--selected"), this.selected !== null && c(r, this.selected) && this.config.mode !== "range" && t.classList.add("cmm-calendar__day--selected");
			let i = this.rangeStart, a = this.rangeEnd ?? this.hoverDate;
			i !== null && c(r, i) && t.classList.add("cmm-calendar__day--range-start", "cmm-calendar__day--selected"), a !== null && c(r, a) && t.classList.add("cmm-calendar__day--range-end", "cmm-calendar__day--selected"), i !== null && a !== null && n(r, i, a) && t.classList.add("cmm-calendar__day--in-range");
		}
	}
	selectDate(e) {
		let t = r(e);
		this.config.mode === "range" ? (this.rangeStart === null || this.rangeEnd !== null ? (this.rangeStart = t, this.rangeEnd = null) : (t < this.rangeStart ? (this.rangeEnd = this.rangeStart, this.rangeStart = t) : this.rangeEnd = t, this.config.onRangeChange?.(this.rangeStart, this.rangeEnd)), this.renderGrid(), this.updateHeaderLabel()) : (this.selected = t, this.focusedDay = t.getDate(), this.renderGrid(), this.config.onChange?.(t));
	}
	navigateMonth(e) {
		this.viewMonth += e, this.viewMonth > 11 ? (this.viewMonth = 0, this.viewYear += 1) : this.viewMonth < 0 && (this.viewMonth = 11, --this.viewYear), this.focusedDay = 1, this.renderGrid(), this.updateHeaderLabel();
	}
	updateHeaderLabel() {
		let e = this.headerEl.querySelector(".cmm-calendar__title");
		e !== null && (e.textContent = `${s[this.viewMonth] ?? ""} ${String(this.viewYear)}`);
	}
	onKeydown(e) {
		let t = new Date(this.viewYear, this.viewMonth + 1, 0).getDate(), n = !0;
		switch (e.key) {
			case "ArrowRight":
				this.focusedDay += 1, this.focusedDay > t && (this.navigateMonth(1), this.focusedDay = 1);
				break;
			case "ArrowLeft":
				--this.focusedDay, this.focusedDay < 1 && (this.navigateMonth(-1), this.focusedDay = new Date(this.viewYear, this.viewMonth + 1, 0).getDate());
				break;
			case "ArrowDown":
				this.focusedDay += 7, this.focusedDay > t && (this.focusedDay -= t, this.navigateMonth(1));
				break;
			case "ArrowUp":
				if (this.focusedDay -= 7, this.focusedDay < 1) {
					this.navigateMonth(-1);
					let e = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
					this.focusedDay += e;
				}
				break;
			case "PageDown":
				this.navigateMonth(1);
				break;
			case "PageUp":
				this.navigateMonth(-1);
				break;
			case "Enter":
			case " ": {
				let e = new Date(this.viewYear, this.viewMonth, this.focusedDay);
				this.isDateDisabled(e) || this.selectDate(e);
				break;
			}
			default: n = !1;
		}
		n && (e.preventDefault(), this.renderGrid(), this.gridEl.querySelector("button[tabindex=\"0\"]:not(.cmm-calendar__day--disabled)")?.focus());
	}
};
//#endregion
export { u as Calendar };

//# sourceMappingURL=index.js.map