scb-wc 0.1.2 → 0.1.4

package/scb-calendar/scb-calendar.js

@@ -0,0 +1,700 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-list/scb-list.js";
+import "./scb-calendar-event.js";
+import "../scb-dialog/scb-dialog.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+//#region src/scb-test-components/scb-calendar/scb-calendar.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this._lastActiveDay = null, this.lang = "sv", this.disableWeekend = !1, this.publicHolidays = !0, this.displayYear = (/* @__PURE__ */ new Date()).getFullYear(), this.displayMonth = (/* @__PURE__ */ new Date()).getMonth() + 1, this.selectedDate = "", this.eventsJson = void 0, this._eventsFromJson = null, this._eventsJsonLast = void 0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._mutationObserver = null, this._syncingDisplay = !1, this._onCalendarKeyDown = (e) => {
+			let t = Array.from(this.shadowRoot?.querySelectorAll(".calendar-day.has-event") ?? []), n = this.shadowRoot?.activeElement, r = n && t.includes(n) ? n : document.activeElement, i = t.indexOf(r);
+			if (i === -1) return;
+			let a = i, o = this.disableWeekend ? 5 : 7;
+			switch (e.key) {
+				case "ArrowRight":
+					a = i + 1 < t.length ? i + 1 : i;
+					break;
+				case "ArrowLeft":
+					a = i - 1 >= 0 ? i - 1 : i;
+					break;
+				case "ArrowDown":
+					a = i + o < t.length ? i + o : i;
+					break;
+				case "ArrowUp":
+					a = i - o >= 0 ? i - o : i;
+					break;
+				default: return;
+			}
+			a !== i && (e.preventDefault(), t[a].focus());
+		}, this._onEventChanged = () => {
+			this.requestUpdate();
+		}, this._today = /* @__PURE__ */ new Date(), this._current = /* @__PURE__ */ new Date(), this._popupEvent = null, this._handleDialogClose = () => {
+			this._popupEvent = null, this.requestUpdate(), this._restoreDayFocus();
+		}, this._restoreDayFocus = () => {
+			this._lastActiveDay && setTimeout(() => {
+				this._lastActiveDay?.focus(), this._lastActiveDay = null;
+			}, 0);
+		}, this._easterDateCalculated = {};
+	}
+	get value() {
+		return this.selectedDate;
+	}
+	set value(e) {
+		let t = (e ?? "") + "";
+		t !== this.selectedDate && (this.selectedDate = t);
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes ?? [], "value"];
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), e === "value" && (this.value = n ?? "");
+	}
+	static {
+		this.styles = n`
+    :host {
+        display: block;
+        margin-block-start: var(--scb-calendar-spacing-block-start, 0);
+        margin-block-end: var(--scb-calendar-spacing-block-end, 0);
+        margin-inline-start: var(--scb-calendar-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-calendar-spacing-inline-end, 0);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        padding: var(--spacing-5);
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface);
+        font-family: var(--brand-font);
+    }
+    .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-5);
+        border-bottom: 1px solid rgb(224, 224, 224);
+        padding-bottom: var(--spacing-3);
+    }
+    .calendar-grid {
+      display: grid;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-2);
+      grid-template-columns: repeat(7, 1fr);
+    }
+    :host([disable-weekend]) .calendar-grid {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .calendar-grid-days{
+        font-weight: 600;
+        margin-bottom: var(--spacing-5);
+    }
+    .calendar-weeks {
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+    .calendar-titles-wrapper{
+        display: grid;
+        gap: var(--spacing-2);
+    }
+    .calendar-day {
+        border-radius: 6px;
+        min-height: 50px;
+        display: flex;
+        padding: var(--spacing-3);
+        box-sizing: border-box;
+        overflow: hidden;
+        gap: var(--spacing-3);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        flex-direction: column;
+    }
+    .calendar-day--holiday {
+      background: var(--md-sys-color-error-container);
+    }
+    .calendar-day.has-event:focus {
+        outline: none;
+    }
+    md-focus-ring {
+        border-radius: 6px;
+    }
+    .calendar-day--other {
+       color: light-dark(var(--n-40), var(--n-70));
+    }
+    .calendar-day--other .calendar-day-event-title {
+       color: inherit;
+    }
+    .calendar-day--other .calendar-day-number {
+       font-weight: var(--weight-regular);
+    }
+    .calendar-day-number {
+        font-size:  var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height); /* vissa tabeller i Figma visar 21 */
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        display: flex;
+        gap: 8px;
+    }
+    .calendar-day-event-title {
+        font-size: 12px;
+        color: var(--md-sys-color-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+    }
+    .calendar-day-holiday-name{
+        color: var(--md-sys-color-on-error-container);
+        font-weight: var(--md-sys-typescale-body-medium-weight);
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+    }
+    .calendar-day.today {
+        background: var(--md-sys-color-secondary-container);
+      
+    }
+    .calendar-day.has-event {
+        cursor: pointer;
+        position: relative;
+        border: 1px solid var(--md-sys-color-primary);
+    }
+
+    .event-popup-list{
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-4);
+    }
+    
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#e();
+		let e = Number(this.displayYear), t = Number(this.displayMonth);
+		!Number.isNaN(e) && !Number.isNaN(t) && t >= 1 && t <= 12 && (this._current = new Date(e, t - 1, 1)), this._syncDisplayFromCurrent(!1), this.addEventListener("change", this._onEventChanged), this._mutationObserver = new MutationObserver(() => {
+			this.requestUpdate();
+		}), this._mutationObserver.observe(this, { childList: !0 }), this.addEventListener("keydown", this._onCalendarKeyDown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("change", this._onEventChanged), super.disconnectedCallback(), this._mutationObserver &&= (this._mutationObserver.disconnect(), null), this.removeEventListener("keydown", this._onCalendarKeyDown);
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-calendar-spacing-block-start", t) : this.style.removeProperty("--scb-calendar-spacing-block-start"), n ? this.style.setProperty("--scb-calendar-spacing-block-end", n) : this.style.removeProperty("--scb-calendar-spacing-block-end"), r ? this.style.setProperty("--scb-calendar-spacing-inline-start", r) : this.style.removeProperty("--scb-calendar-spacing-inline-start"), i ? this.style.setProperty("--scb-calendar-spacing-inline-end", i) : this.style.removeProperty("--scb-calendar-spacing-inline-end");
+	}
+	updated(e) {
+		if (super.updated?.(e), e.has("eventsJson") && (this._eventsJsonLast = void 0, this._eventsFromJson = null), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), !this._syncingDisplay && (e.has("displayYear") || e.has("displayMonth"))) {
+			let e = Number(this.displayYear), t = Number(this.displayMonth);
+			if (!Number.isNaN(e) && !Number.isNaN(t) && t >= 1 && t <= 12) {
+				let n = this._current.getFullYear(), r = this._current.getMonth() + 1;
+				(n !== e || r !== t) && (this._current = new Date(e, t - 1, 1), this._dispatchMonthChange(e, t), this.requestUpdate());
+			}
+		}
+	}
+	_ensureEventsFromJson() {
+		let e = (this.eventsJson ?? "").trim();
+		if (!e) {
+			this._eventsFromJson = null, this._eventsJsonLast = e;
+			return;
+		}
+		if (!(this._eventsJsonLast === e && this._eventsFromJson !== null)) {
+			this._eventsJsonLast = e;
+			try {
+				let t = JSON.parse(e);
+				Array.isArray(t) ? this._eventsFromJson = t : this._eventsFromJson = [];
+			} catch {
+				this._eventsFromJson = [];
+			}
+		}
+	}
+	_getEventInputs() {
+		return Array.isArray(this.events) ? this.events : (this._ensureEventsFromJson(), this._eventsFromJson === null ? null : this._eventsFromJson);
+	}
+	_normalizeEventInput(e) {
+		let t = e.title ?? "", n = e.description ?? "", r = e.href ?? "", i = e.startDate ?? e["start-date"] ?? e.start ?? e.date ?? "", a = e.endDate ?? e["end-date"] ?? e.end ?? "";
+		return {
+			title: t + "",
+			description: n ? n + "" : void 0,
+			href: r ? r + "" : void 0,
+			start: i ? i + "" : void 0,
+			end: a ? a + "" : void 0
+		};
+	}
+	_toLocalEventDate(e, t) {
+		let n = (e ?? "").trim();
+		if (!n) return null;
+		if (!n.includes("T")) {
+			let e = n.split("-").map((e) => Number(e));
+			if (e.length !== 3 || e.some((e) => Number.isNaN(e))) return null;
+			let [r, i, a] = e;
+			return t ? new Date(r, i - 1, a, 23, 59, 59, 999) : new Date(r, i - 1, a, 0, 0, 0, 0);
+		}
+		let r = new Date(n);
+		return Number.isNaN(r.getTime()) ? null : r;
+	}
+	_toDateKey(e) {
+		return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+	}
+	_buildEventMapFromInputs(e) {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = this._normalizeEventInput(n), r = e.start || "", i = e.end || "";
+			if (!(!r || !e.title)) if (r && i) {
+				let n = this._toLocalEventDate(r, !1), a = this._toLocalEventDate(i, !0);
+				if (!n || !a) continue;
+				if (a < n) {
+					let n = r.split("T")[0], a = t.get(n) || [];
+					a.push({
+						title: e.title,
+						description: e.description,
+						href: e.href,
+						start: r,
+						end: i
+					}), t.set(n, a);
+					continue;
+				}
+				for (let o = new Date(n); o <= a; o.setDate(o.getDate() + 1)) {
+					let n = this._toDateKey(o), a = t.get(n) || [];
+					a.push({
+						title: e.title,
+						description: e.description,
+						href: e.href,
+						start: r,
+						end: i
+					}), t.set(n, a);
+				}
+			} else {
+				let n = r.split("T")[0], i = t.get(n) || [];
+				i.push({
+					title: e.title,
+					description: e.description,
+					href: e.href,
+					start: r
+				}), t.set(n, i);
+			}
+		}
+		return t;
+	}
+	_buildEventMapFromChildren() {
+		let e = Array.from(this.querySelectorAll("scb-calendar-event")), t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = n, r = (e.startDate ?? e.date ?? "") + "" || n.getAttribute("start-date") || n.getAttribute("date") || "", i = (e.endDate ?? "") + "" || n.getAttribute("end-date") || "";
+			if (r && i) {
+				let a = this._toLocalEventDate(r, !1), o = this._toLocalEventDate(i, !0);
+				if (!a || !o) continue;
+				if (o < a) {
+					let a = r.split("T")[0], o = t.get(a) || [];
+					o.push({
+						title: n.title ?? "",
+						description: n.description,
+						href: e.href || n.getAttribute("href") || void 0,
+						start: r,
+						end: i
+					}), t.set(a, o);
+					continue;
+				}
+				for (let s = new Date(a); s <= o; s.setDate(s.getDate() + 1)) {
+					let a = this._toDateKey(s), o = t.get(a) || [];
+					o.push({
+						title: n.title ?? "",
+						description: n.description,
+						href: e.href || n.getAttribute("href") || void 0,
+						start: r,
+						end: i
+					}), t.set(a, o);
+				}
+			} else if (r && n.title) {
+				let i = r.split("T")[0], a = t.get(i) || [];
+				a.push({
+					title: n.title,
+					description: n.description,
+					href: e.href || n.getAttribute("href") || void 0,
+					start: r
+				}), t.set(i, a);
+			}
+		}
+		return t;
+	}
+	_syncDisplayFromCurrent(e = !0) {
+		let t = this._current.getFullYear(), n = this._current.getMonth() + 1;
+		this._syncingDisplay = !0;
+		try {
+			this.displayYear = t, this.displayMonth = n;
+		} finally {
+			this._syncingDisplay = !1;
+		}
+		e && this._dispatchMonthChange(t, n);
+	}
+	_dispatchMonthChange(e, t) {
+		let n = {
+			displayYear: e,
+			displayMonth: t
+		};
+		this.dispatchEvent(new CustomEvent("scb-calendar-month-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: n
+		})), this.dispatchEvent(new CustomEvent("scbcalendarmonthchange", {
+			bubbles: !0,
+			composed: !0,
+			detail: n
+		}));
+	}
+	_dispatchSelect(e) {
+		let t = { selectedDate: e };
+		this.dispatchEvent(new CustomEvent("scb-calendar-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: t
+		})), this.dispatchEvent(new CustomEvent("scbcalendarselect", {
+			bubbles: !0,
+			composed: !0,
+			detail: t
+		}));
+	}
+	_daysInMonth(e, t) {
+		return new Date(e, t + 1, 0).getDate();
+	}
+	_firstDayOfWeek(e, t) {
+		let n = new Date(e, t, 1).getDay();
+		return n === 0 ? 6 : n - 1;
+	}
+	_prevMonth() {
+		this._current = new Date(this._current.getFullYear(), this._current.getMonth() - 1, 1), this.selectedDate = "", this._popupEvent = null, this._syncDisplayFromCurrent(), this.requestUpdate();
+	}
+	_nextMonth() {
+		this._current = new Date(this._current.getFullYear(), this._current.getMonth() + 1, 1), this.selectedDate = "", this._popupEvent = null, this._syncDisplayFromCurrent(), this.requestUpdate();
+	}
+	_showEventPopup(e) {
+		this._popupEvent = e, this.selectedDate = e.date, this._dispatchSelect(e.date), this._lastActiveDay = this.shadowRoot?.activeElement || document.activeElement, this.requestUpdate(), this.updateComplete.then(() => {
+			let e = this.shadowRoot?.querySelector("scb-dialog");
+			e && (document.activeElement && (e.__lastTriggerEl = document.activeElement), requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					e.open = !0;
+				});
+			}), e.addEventListener("close", this._handleDialogClose, { once: !0 }));
+		});
+	}
+	_addDays(e, t) {
+		let n = new Date(e.valueOf());
+		return n.setDate(n.getDate() + t), n;
+	}
+	_easterDay(e) {
+		if (this._easterDateCalculated["Ar" + e] !== void 0) return new Date(this._easterDateCalculated["Ar" + e]);
+		let t = e;
+		t < 100 && (t += 1900), t < 1950 && (t += 100);
+		let n = t % 19, r = t % 4, i = t % 7, a = (19 * n + 24) % 30, o = (2 * r + 4 * i + 6 * a + 5) % 7, s = 22 + a + o, c = 0;
+		s == 57 && (s -= 7), s == 56 && a == 28 && o == 6 && n > 10 && (s -= 7), s > 31 ? (s -= 31, c = 4) : c = 3;
+		let l = new Date(t, c - 1, s);
+		return this._easterDateCalculated["Ar" + e] = l, new Date(this._easterDateCalculated["Ar" + e]);
+	}
+	_swedishHolidayName(e) {
+		let t = e.getMonth();
+		if (t === 1 || t === 6 || t === 7 || t === 8) return null;
+		let n = e.getMonth() + 1, r = e.getDate(), i = e.getFullYear(), a = this._easterDay(i), o = this.lang === "en", s = [
+			[
+				"Nyårsdagen",
+				"New Year's Day",
+				n === 1 && r === 1
+			],
+			[
+				"Trettondedag jul",
+				"Epiphany",
+				n === 1 && r === 6
+			],
+			[
+				"Långfredag",
+				"Good Friday",
+				+e == +this._addDays(a, -2)
+			],
+			[
+				"Påskdagen",
+				"Easter Sunday",
+				+e == +a
+			],
+			[
+				"Annandag påsk",
+				"Easter Monday",
+				+e == +this._addDays(a, 1)
+			],
+			[
+				"Kristi himmelsfärdsdag",
+				"Ascension Day",
+				+e == +this._addDays(a, 39)
+			],
+			[
+				"Pingstdagen",
+				"Pentecost",
+				+e == +this._addDays(a, 50) && i < 2005
+			],
+			[
+				"Första maj",
+				"May Day",
+				n === 5 && r === 1
+			],
+			[
+				"Nationaldagen",
+				"National Day",
+				n === 6 && r === 6 && i >= 2005
+			],
+			[
+				"Midsommarafton",
+				"Midsummer's Eve",
+				n === 6 && r >= 19 && r <= 25 && e.getDay() === 5
+			],
+			[
+				"Midsommardagen",
+				"Midsummer's Day",
+				n === 6 && r >= 20 && r <= 26 && e.getDay() === 6
+			],
+			[
+				"Julafton",
+				"Christmas Eve",
+				n === 12 && r === 24
+			],
+			[
+				"Juldagen",
+				"Christmas Day",
+				n === 12 && r === 25
+			],
+			[
+				"Annandag jul",
+				"Boxing Day",
+				n === 12 && r === 26
+			],
+			[
+				"Alla helgons dag",
+				"All Saints' Day",
+				n === 10 && r >= 31 && e.getDay() === 6 || n === 11 && r <= 6 && e.getDay() === 6
+			]
+		];
+		for (let e of s) {
+			let [t, n, r] = e;
+			if (r) return o ? n : t;
+		}
+		return null;
+	}
+	render() {
+		let e = this._current.getFullYear(), t = this._current.getMonth(), n = this._daysInMonth(e, t), i = this._firstDayOfWeek(e, t), a = this._today, o = this.lang === "en", s = o ? [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		] : [
+			"Januari",
+			"Februari",
+			"Mars",
+			"April",
+			"Maj",
+			"Juni",
+			"Juli",
+			"Augusti",
+			"September",
+			"Oktober",
+			"November",
+			"December"
+		], c = o ? [
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat",
+			"Sun"
+		] : [
+			"Mån",
+			"Tis",
+			"Ons",
+			"Tor",
+			"Fre",
+			"Lör",
+			"Sön"
+		];
+		this.disableWeekend && (c = c.slice(0, 5));
+		let l = this._getEventInputs(), u = l ? this._buildEventMapFromInputs(l) : this._buildEventMapFromChildren(), d = [], f = 1;
+		for (let s = 0; s < 6; s++) {
+			let c = [], l = this.disableWeekend ? [
+				0,
+				1,
+				2,
+				3,
+				4
+			] : [
+				0,
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			], p = f;
+			for (let d = 0; d < l.length; d++) {
+				let f = l[d];
+				if (s === 0 && f < i) {
+					if (!this.disableWeekend || f < 5) {
+						let n = t === 0 ? 11 : t - 1, a = t === 0 ? e - 1 : e, o = this._daysInMonth(a, n) - (i - f - 1);
+						c.push(r`
+              <div class="calendar-day calendar-day--other">
+                <span class="calendar-day-number">${o}</span>
+              </div>
+            `);
+					}
+				} else if (p > n) c.push(r`<div></div>`);
+				else {
+					let i = new Date(e, t, p);
+					if (this.disableWeekend) for (; i.getDay() === 0 || i.getDay() === 6;) p++, i = new Date(e, t, p);
+					if (p > n) {
+						c.push(r`<div></div>`);
+						continue;
+					}
+					let s = a.getFullYear() === e && a.getMonth() === t && a.getDate() === p, l = `${e}-${String(t + 1).padStart(2, "0")}-${String(p).padStart(2, "0")}`, d = new Date(e, t, p), f = !1, m = null;
+					this.publicHolidays && (m = this._swedishHolidayName(d), f = !!m);
+					let h = u.get(l) || [];
+					h = [...h].sort((e, t) => {
+						let n = e.start && l === e.start.split("T")[0] ? e.start : e.end && l === e.end.split("T")[0] ? e.end : "", r = t.start && l === t.start.split("T")[0] ? t.start : t.end && t.end.split("T")[0] ? t.end : "", i = n && n.includes("T"), a = r && r.includes("T");
+						return i && a ? n.localeCompare(r) : i ? -1 : a ? 1 : e.title.localeCompare(t.title);
+					});
+					let g = [...h].map((e) => {
+						let t = "", n = "";
+						if (e.start && e.end) {
+							let r = e.start.split("T")[0], i = e.end.split("T")[0];
+							l === r && l === i && e.start.includes("T") && e.end.includes("T") ? t = e.start.split("T")[1].substring(0, 5) + "–" + e.end.split("T")[1].substring(0, 5) : l === r && e.start.includes("T") ? t = e.start.split("T")[1].substring(0, 5) : l === i && e.end.includes("T") && r !== i ? (t = e.end.split("T")[1].substring(0, 5), n = o ? "cont. " : "fort. ") : l === i && e.end.includes("T") ? t = e.end.split("T")[1].substring(0, 5) : l !== r && (t = "", n = o ? "cont. " : "fort. ");
+						} else e.start && e.start.includes("T") && (t = e.start.split("T")[1].substring(0, 5));
+						return {
+							...e,
+							time: t,
+							prefix: n
+						};
+					});
+					c.push(r`
+            <div
+              class="calendar-day${s ? " today" : ""}${h.length ? " has-event" : ""}${f ? " calendar-day--holiday" : ""}"
+              tabindex=${h.length ? "0" : void 0}
+              @click=${h.length ? (() => this._showEventPopup({
+						date: l,
+						events: h
+					})) : null}
+              @keydown=${h.length ? ((e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._showEventPopup({
+							date: l,
+							events: h
+						}));
+					}) : null}
+              title=${m || (h.length === 1 ? h[0].title : h.length > 1 ? h.map((e) => e.title).join(", ") : "")}
+              role=${h.length ? "button" : void 0}
+              aria-label=${m || (h.length ? h.length === 1 ? h[0].title : h.map((e) => e.title).join(", ") : void 0)}
+            >
+              <md-focus-ring inward></md-focus-ring>
+              <span class="calendar-day-number">${p} ${m ? r`<span class="calendar-day-holiday-name">${m}</span>` : ""}</span>
+              <div class="calendar-titles-wrapper">
+                ${g.map((e) => r`<span class="calendar-day-event-title">${e.prefix || ""}${e.title}</span>`)}
+              </div>
+            </div>
+          `), p++;
+				}
+			}
+			if (f = p, d.push(r`<div class="calendar-grid">${c}</div>`), f > n) break;
+		}
+		return r`
+      <div class="calendar-header">
+        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="${o ? "Previous month" : "Föregående månad"}"></scb-icon-button>
+        <span>${s[t]} ${e}</span>
+        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="${o ? "Next month" : "Nästa månad"}"></scb-icon-button>
+      </div>
+      <div class="calendar-grid calendar-grid-days">
+        ${c.map((e) => r`<div>${e}</div>`)}
+      </div>
+      <div class="calendar-weeks">
+      ${d}
+      </div>
+      ${this._popupEvent && Array.isArray(this._popupEvent.events) ? r`
+        <scb-dialog variant="floating" open label="${o ? "Events" : "Händelser"} ${this._popupEvent.date}">
+          <scb-list>
+            ${[...this._popupEvent.events].sort((e, t) => {
+			let n = e.start && e.start.includes("T") ? e.start : e.end && e.end.includes("T") ? e.end : "", r = t.start && t.start.includes("T") ? t.start : t.end && t.end.includes("T") ? t.end : "", i = n && n.includes("T"), a = r && r.includes("T");
+			return i && a ? n.localeCompare(r) : i ? -1 : a ? 1 : e.title.localeCompare(t.title);
+		}).map((e) => {
+			let t = this._popupEvent?.date ?? "", n = "", i = "", a = "";
+			if (e.start && e.end) {
+				let r = e.start.split("T")[0], s = e.end.split("T")[0];
+				r === s && e.start.includes("T") && e.end.includes("T") ? n = e.start.split("T")[1].substring(0, 5) + " – " + e.end.split("T")[1].substring(0, 5) : t === r && e.start.includes("T") && (n = "Start: " + e.start.split("T")[1].substring(0, 5) + (o ? " (Extended event) " : " (Flerdagsevenemang) ")), t === s && e.end.includes("T") && r !== s && (a = (o ? "End: " : "Slut: ") + e.end.split("T")[1].substring(0, 5)), t !== r && (i = o ? "cont. " : "fort. ");
+			} else e.start && e.start.includes("T") && (n = e.start.split("T")[1].substring(0, 5));
+			return e.href ? r`
+                  <scb-list-item
+                    type="link"
+                    item-href="${e.href}"
+                    label="${i}${e.title}"
+                    supporting-text="${e.description ? e.description : ""}"
+                    overline="${n || ""}${a || ""}"
+                  >
+                  </scb-list-item>` : r`
+                <scb-list-item
+                  label="${i}${e.title}"
+                  supporting-text="${e.description ? e.description : ""}"
+                  overline="${n || ""}${a || ""}"
+                >
+                </scb-list-item>`;
+		})}
+          </scb-list>
+        </scb-dialog>
+      ` : ""}
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "lang", void 0), e([a({
+	type: Boolean,
+	attribute: "disable-weekend"
+})], o.prototype, "disableWeekend", void 0), e([a({
+	type: Boolean,
+	attribute: "public-holidays"
+})], o.prototype, "publicHolidays", void 0), e([a({
+	type: Number,
+	attribute: "display-year",
+	reflect: !0
+})], o.prototype, "displayYear", void 0), e([a({
+	type: Number,
+	attribute: "display-month",
+	reflect: !0
+})], o.prototype, "displayMonth", void 0), e([a({
+	type: String,
+	attribute: "selected-date",
+	reflect: !0
+})], o.prototype, "selectedDate", void 0), e([a({ attribute: !1 })], o.prototype, "events", void 0), e([a({
+	type: String,
+	attribute: "events-json"
+})], o.prototype, "eventsJson", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-calendar")], o);
+//#endregion
+export { o as ScbCalendar };