@schukai/monster 3.112.2 → 3.112.4

package/source/components/time/month-calendar.mjs

@@ -42,6 +42,7 @@ import { Datasource } from "../datatable/datasource.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { positionPopper } from "../form/util/floating-ui.mjs";
 import { Segment as AppointmentSegment } from "./timeline/segment.mjs";
+import { Appointment as AppointmentAppointment } from "./timeline/appointment.mjs";
 
 export { MonthCalendar };
 
@@ -55,7 +56,7 @@ const calendarElementSymbol = Symbol("calendarElement");
  * @private
  * @type {symbol}
  */
-const calendarBodyElementSymbol = Symbol("calenddarBodyElement");
+const calendarBodyElementSymbol = Symbol("calendarBodyElement");
 
 /**
  * A Calendar
@@ -91,9 +92,14 @@ class MonthCalendar extends CustomElement {
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initDataSource.call(this);
-		initEventHandler.call(this);
+
+		setTimeout(() => {
+			initControlReferences.call(this);
+			initEventHandler.call(this);
+			// refresh the labels for updater
+			this.setOption("labels.__update", true);
+			initDataSource.call(this);
+		}, 0);
 		return this;
 	}
 
@@ -105,12 +111,19 @@ class MonthCalendar extends CustomElement {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {Object} labels Label definitions
-	 * @property {Object} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {Object} classes CSS classes
-	 * @property {boolean} disabled=false Disabled state
+	 * @property {Object} labels Labels for the control
+	 * @property {Object} classes Classes for the control
+	 * @property {boolean} disabled Disables the control
+	 * @property {Object} features Features for the control
+	 * @property {boolean} features.showWeekend Show the weekend
+	 * @property {boolean} features.monthOneLine Show the month in one line
+	 * @property {Object} actions Actions for the control
+	 * @property {Object} locale Locale for the control
+	 * @property {string} locale.weekdayFormat Weekday format
+	 * @property {string} startDate Start date
+	 * @property {string} endDate End date
+	 * @property {Object} datasource Datasource
+	 * @property {string} datasource.selector Datasource selector
 	 */
 	get defaults() {
 		const startDate = new Date();
@@ -125,7 +138,7 @@ class MonthCalendar extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: {},
+			labels: getTranslations(),
 			classes: {},
 
 			disabled: false,
@@ -133,6 +146,7 @@ class MonthCalendar extends CustomElement {
 				showWeekend: true,
 				monthOneLine: false,
 			},
+
 			actions: {},
 
 			locale: {
@@ -183,6 +197,24 @@ class MonthCalendar extends CustomElement {
 	}
 }
 
+/**
+ * @private
+ * @returns {object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				more: "weitere Termin",
+			};
+		default:
+			return {
+				more: "more appointments",
+			};
+	}
+}
+
 /**
  * Calculates how many days of an appointment are distributed across calendar rows (weeks).
  * Uses the start date of the calendar grid (e.g., from generateCalendarData()) as a reference.
@@ -350,6 +382,19 @@ function initDataSource() {
 	}, 10);
 }
 
+/**
+ * Places and organizes appointments within a calendar grid according to their start and end dates,
+ * ensuring proper alignment and rendering within the calendar day containers.
+ *
+ * Appointments are evaluated to determine their appropriate positions, lengths, and styles based on calendar
+ * configuration and available rendering space.
+ *
+ * Errors are logged for invalid appointment data or when
+ * rendering issues are encountered.
+ *
+ * @private
+ * @return {void} No return value; the method operates on the DOM and internal state of the calendar element to render appointments visually.
+ */
 function placeAppointments() {
 	const self = this;
 
@@ -370,6 +415,7 @@ function placeAppointments() {
 		calenderStartDate,
 		calenderEndDate,
 	);
+
 	calendarDays.forEach((day) => {
 		const k =
 			day.date.getFullYear() +
@@ -387,17 +433,6 @@ function placeAppointments() {
 		}
 
 		const startDate = appointment?.startDate;
-		let container = self.shadowRoot.querySelector(
-			`[data-monster-day="${startDate}"]`,
-		);
-
-		if (!container) {
-			addErrorAttribute(
-				this,
-				"Invalid, missing or out of range date in appointment" + startDate,
-			);
-			return;
-		}
 
 		// calc length of appointment
 		const start = new Date(startDate);
@@ -454,13 +489,15 @@ function placeAppointments() {
 
 			maxLineHeight = Math.max(maxLineHeight, getTextHeight.call(this, label));
 
-			const nextKeyDate = new Date(start.setDate(start.getDate() + cols));
+			const k = new Date(start.setDate(start.getDate() + cols));
+
+			// calc from k to next day
 			date =
-				nextKeyDate.getFullYear() +
+				k.getFullYear() +
 				"-" +
-				("00" + (nextKeyDate.getMonth() + 1)).slice(-2) +
+				("00" + (k.getMonth() + 1)).slice(-2) +
 				"-" +
-				("00" + nextKeyDate.getDate()).slice(-2);
+				("00" + k.getDate()).slice(-2);
 		}
 	});
 
@@ -468,18 +505,59 @@ function placeAppointments() {
 
 	const sortedSegments = assignLinesToSegments(segments);
 
-	for (let i = 0; i < sortedSegments.length; i++) {
-		const segment = sortedSegments[i];
+	const h = calcHeaderAndFooterHeight.call(this);
+	const marginAppointmentContainer = h.maxFooterHeight + h.maxHeaderHeight;
 
-		if (segment.line > 3) {
-			continue;
-		} else {
+	const popper = self.shadowRoot.querySelectorAll(
+		"monster-appointment-segment",
+	);
+	if (popper) {
+		for (const p of popper) {
+			p.remove();
 		}
+	}
+
+	const daysWithMoreAppointments = new Set();
+	const moreAppointments = new Map();
+
+	for (let i = 0; i < sortedSegments.length; i++) {
+		const segment = sortedSegments[i];
 
 		container = self.shadowRoot.querySelector(
 			`[data-monster-day="${segment.start}"]`,
 		);
 
+		if (!container) {
+			continue;
+		}
+
+		let containerHeight = container?.getBoundingClientRect()?.height || 0;
+		if (containerHeight === 0) {
+			addErrorAttribute(this, "Unable to retrieve container height");
+			continue;
+		}
+
+		let availableHeight =
+			containerHeight - maxLineHeight - marginAppointmentContainer;
+		let linesThatCanBeShown = Math.floor(availableHeight / maxLineHeight);
+
+		if (segment.line > linesThatCanBeShown) {
+			daysWithMoreAppointments.add(segment.start);
+
+			const calendarDays = this.getOption("calendarDays");
+			const currentDay = calendarDays.find((day) => day.day === segment.start);
+
+			if (currentDay) {
+				if (!moreAppointments.has(currentDay.index)) {
+					moreAppointments.set(currentDay.index, []);
+				}
+
+				moreAppointments.get(currentDay.index).push(segment);
+			}
+
+			continue;
+		}
+
 		if (!container) {
 			addErrorAttribute(
 				this,
@@ -511,12 +589,129 @@ function placeAppointments() {
 
 		appointmentSegment.style.width = `${currentWithOfGridCell * segment.columns}px`;
 		appointmentSegment.style.height = maxLineHeight + "px";
-		appointmentSegment.style.top = `${segment.line * maxLineHeight + maxLineHeight + 4}px`;
+		appointmentSegment.style.top = `${segment.line * maxLineHeight + h.maxHeaderHeight}px`;
 
 		appointmentSegment.setOption("labels.text", segment.label);
 
 		container.appendChild(appointmentSegment);
 	}
+
+	// mark days with more appointments, show a hint / link
+	for (const day of daysWithMoreAppointments) {
+		for (const cell of this.getOption("calendarDays")) {
+			if (cell.day === day) {
+				this.setOption(
+					"calendarDays." + cell.index + ".classes.more-appointments",
+					"visible",
+				);
+			}
+		}
+	}
+
+	// get popper
+	for (const [index, appointments] of moreAppointments) {
+		const moreAppointmentsContainer = this.shadowRoot.querySelector(
+			`[data-monster-role=day-cell][data-monster-index="${index}"] > [data-monster-role="appointment-popper"] `,
+		);
+
+		if (!moreAppointmentsContainer) {
+			continue;
+		}
+
+		moreAppointmentsContainer.innerHTML = "";
+
+		for (const appointment of appointments) {
+			const appointmentSegment = document.createElement("monster-appointment");
+			appointmentSegment.style.backgroundColor = appointment.appointment.color;
+			appointmentSegment.style.position = "relative";
+			appointmentSegment.style.top = "unset";
+
+			// search a color that is readable on the background color
+			const rgb = appointmentSegment.style.backgroundColor.match(/\d+/g);
+			const brightness = Math.round(
+				(parseInt(rgb[0]) * 299 +
+					parseInt(rgb[1]) * 587 +
+					parseInt(rgb[2]) * 114) /
+					1000,
+			);
+
+			if (brightness > 125) {
+				appointmentSegment.style.color = "#000000";
+			} else {
+				appointmentSegment.style.color = "#ffffff";
+			}
+
+			appointmentSegment.style.width = "100%";
+			appointmentSegment.style.height = maxLineHeight + "px";
+
+			appointmentSegment.setOption("labels.text", appointment.label);
+
+			moreAppointmentsContainer.appendChild(appointmentSegment);
+		}
+	}
+}
+
+/**
+ * @private
+ * @returns {{maxHeaderHeight: number, maxFooterHeight: number}}
+ */
+function calcHeaderAndFooterHeight() {
+	let maxHeaderHeight = 0;
+	let maxFooterHeight = 0;
+
+	const days = this.getOption("calendarDays");
+	for (const day of days) {
+		const current = day.date;
+
+		const dayKey =
+			current.getFullYear() +
+			"-" +
+			("00" + (current.getMonth() + 1)).slice(-2) +
+			"-" +
+			("00" + current.getDate()).slice(-2);
+
+		const cell = this.shadowRoot.querySelector(
+			`[data-monster-day="${dayKey}"]`,
+		);
+
+		if (!(cell instanceof HTMLDivElement)) {
+			continue;
+		}
+
+		const header = cell.querySelector("[data-monster-role='day-header']");
+
+		if (header instanceof HTMLDivElement) {
+			maxHeaderHeight = Math.max(
+				maxHeaderHeight,
+				header.getBoundingClientRect().height +
+					parseFloat(getComputedStyle(header).paddingTop) +
+					parseFloat(getComputedStyle(header).paddingBottom) +
+					parseFloat(getComputedStyle(header).marginTop) +
+					parseFloat(getComputedStyle(header).marginBottom) +
+					parseFloat(getComputedStyle(header.parentElement).paddingTop) +
+					parseFloat(getComputedStyle(header.parentElement).paddingBottom) +
+					parseFloat(getComputedStyle(header.parentElement).marginTop),
+			);
+		}
+
+		const footer = cell.querySelector("[data-monster-role='day-footer']");
+
+		if (footer instanceof HTMLDivElement) {
+			maxFooterHeight = Math.max(
+				maxFooterHeight,
+				footer.getBoundingClientRect().height +
+					parseFloat(getComputedStyle(footer).paddingTop) +
+					parseFloat(getComputedStyle(footer).paddingBottom) +
+					parseFloat(getComputedStyle(footer).marginTop) +
+					parseFloat(getComputedStyle(footer).marginBottom) +
+					parseFloat(getComputedStyle(footer.parentElement).paddingTop) +
+					parseFloat(getComputedStyle(footer.parentElement).paddingBottom) +
+					parseFloat(getComputedStyle(footer.parentElement).marginTop),
+			);
+		}
+	}
+
+	return { maxHeaderHeight, maxFooterHeight };
 }
 
 /**
@@ -588,12 +783,16 @@ function generateCalendarData() {
 			label: label,
 			index: i,
 			day: dayKey,
-
-			classes:
-				"day-cell " +
-				(current.getMonth() === month ? "current-month" : "other-month") +
-				(current.getDay() === 0 || current.getDay() === 6 ? " weekend" : "") +
-				(current.toDateString() === new Date().toDateString() ? " today" : ""),
+			classes: {
+				"more-appointments": "hidden",
+				cell:
+					"day-cell " +
+					(current.getMonth() === month ? "current-month" : "other-month") +
+					(current.getDay() === 0 || current.getDay() === 6 ? " weekend" : "") +
+					(current.toDateString() === new Date().toDateString()
+						? " today"
+						: ""),
+			},
 			appointments: [],
 		});
 	}
@@ -669,7 +868,6 @@ function getAppointmentsPerDay(appointments, start, end) {
 /**
  * @private
  * @return {initEventHandler}
- * @fires monster-calendar-clicked
  */
 function initEventHandler() {
 	const self = this;
@@ -685,13 +883,11 @@ function initEventHandler() {
 			.querySelectorAll("[data-monster-role='day-cell']")
 			.forEach((element) => {
 				element.addEventListener("click", (event) => {
-					console.log(event.relatedTarget, "event1");
-					console.log(event.composedPath(), "event");
-
 					const hoveredElement = this.shadowRoot.elementFromPoint(
 						event.clientX,
 						event.clientY,
 					);
+
 					if (hoveredElement instanceof AppointmentSegment) {
 						return;
 					}
@@ -699,14 +895,15 @@ function initEventHandler() {
 					const element = findTargetElementFromEvent(
 						event,
 						"data-monster-role",
-						"day-cell",
+						"more-appointments",
 					);
 
 					if (!element) {
 						return;
 					}
 
-					const popper = element.querySelector(
+					// parent is footer, and parent of footer is cell
+					const popper = element.parentElement.parentElement.querySelector(
 						'[data-monster-role="appointment-popper"]',
 					);
 
@@ -714,13 +911,14 @@ function initEventHandler() {
 						return;
 					}
 
-					positionPopper(element, popper, {
+					//const appointments = getAppointmentsPerDay() || [];
+					const container = element.parentElement.parentElement;
+
+					positionPopper(container, popper, {
 						placement: "bottom",
 					});
 
-					//const appointments = getAppointmentsPerDay() || [];
-
-					popper.style.width = element.getBoundingClientRect().width + "px";
+					popper.style.width = container.getBoundingClientRect().width + "px";
 					popper.style.zIndex = 1000;
 
 					popper.style.display = "block";
@@ -792,14 +990,20 @@ function getTemplate() {
 	return `
         <template id="cell">
             <div data-monster-role="day-cell"
-                 data-monster-attributes="class path:cell.classes,
+                 data-monster-attributes="class path:cell.classes.cell,
+                 data-monster-day path:cell.day,
                                   data-monster-index path:cell.index">
-                <div data-monster-replace="path:cell.label"></div>
-                <div data-monster-role="appointment-container"
-                     data-monster-attributes="data-monster-day path:cell.day,
-                     data-monster-calendar-index path:cell.index"></div>
+                <div class="header" data-monster-role="day-header">
+                    <div data-monster-replace="path:cell.label"></div>
+                </div>
+               
+                <div class="footer" data-monster-role="day-footer">
+                    <div data-monster-replace="path:labels.more"
+                         data-monster-attributes="class path:cell.classes.more-appointments"
+                         data-monster-role="more-appointments"></div>
+                </div>
                 <div data-monster-role="appointment-popper"
-                     class="popper" data-monster-replace="path:cell.appointments"></div>
+                     class="popper"></div>
             </div>
         </template>
 

package/source/components/time/style/day.pcss

@@ -0,0 +1,159 @@
+@import "../../style/control.pcss";
+@import "../../style/accessibility.pcss";
+@import "../../style/button.pcss";
+@import "../../style/border.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/color.pcss";
+
+
+:host {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+[data-monster-role="control"] {
+    user-select: none;
+    display: flex;
+
+    width: 8rem;
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: nowrap;
+
+
+}
+
+[data-monster-role="month"] {
+    background-color: var(--monster-bg-color-primary-2);
+
+    color: var(--monster-color-primary-2);
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    width: 8rem;
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+[data-monster-role="day"] {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--monster-color-secondary-1);
+    background-color: var(--monster-bg-color-primary-1);
+
+    width: 8rem;
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+[data-monster-role="weekday"] {
+    font-size: 0.8rem;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+
+    width: 8rem;
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+
+[data-monster-role="label"] {
+    background-color: var(--monster-bg-color-secondary-1);
+    color: var(--monster-color-secondary-2);
+    padding: 0.2rem 0;
+    margin: 0.5rem 0;
+    width: 8rem;
+    font-size: 1rem;
+    text-align: center;
+    height: 1.5rem;
+}
+
+[data-monster-role="label"]:not(:empty) {
+    border-top: 1px solid var(--monster-color-secondary-1);
+    height: calc(1.5rem - 1px);
+}
+
+:host(.small) [data-monster-role="control"] {
+    flex-flow: row;
+    flex-wrap: wrap;
+
+    gap: 0 4px;
+
+    width: fit-content;
+}
+
+:host(.small) [data-monster-role="control"] > div {
+    text-align: left;
+    width: auto;
+}
+
+:host(.small) div[data-monster-role="day"] {
+    flex-grow: 20;
+}
+
+:host(.small) div[data-monster-role="month"],
+:host(.small) div[data-monster-role="day"] {
+
+    background-color: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+:host(.small) div[data-monster-role="weekday"] {
+}
+
+:host(.small) div[data-monster-role="weekday"],
+:host(.small) div[data-monster-role="label"] {
+}
+
+:host(.small) div[data-monster-role="weekday"] {
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    text-wrap: nowrap;
+}
+
+:host(.small) div[data-monster-role="label"] {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 12px;
+
+    border: none;
+    background-color: var(--monster-bg-color-secondary-2);
+    color: var(--monster-color-secondary-2);
+    margin: 0 4px;
+    font-size: 0.8rem;
+
+    text-wrap: nowrap;
+
+}
+
+:host(.small) div[data-monster-role="label"]:empty {
+    display: none;
+}
+
+

package/source/components/time/style/month-calendar.pcss

@@ -47,32 +47,42 @@
 
 div.popper {
     position: absolute;
-    z-index: var(--monster-theme-control-z-index);
+    z-index: var(--monster-z-index-dropdown);
     background-color: var(--monster-bg-color-primary-1);
     color: var(--monster-color-primary-1);
-    border-radius: var(--monster-theme-control-border-radius);
-    border-width: var(--monster-theme-control-border-width);
-    border-color: var(--monster-theme-control-border-color);
-    border-style: var(--monster-theme-control-border-style);
-    box-shadow: var(--monster-theme-control-box-shadow);
-    padding: 0.5em;
+    border: none;
+    box-shadow: var(--monster-box-shadow-1);
+    padding: 0;
     display: none;
     box-sizing: border-box;
+    outline: 1px solid var(--monster-color-primary-1);
 }
 
 div.day-cell {
     display: flex;
     align-items: start;
-    justify-content: start;
+    justify-content: space-between;
     box-sizing: border-box;
     padding: 0.3em;
     position: relative;
-
+    flex-direction: column;
     transition: background-color 0.3s;
     background-color: var(--monster-bg-color-primary-2);
     color: var(--monster-color-primary-2);
 
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1 / 1.26;
+}
+
+div.footer {
+    font-size: xx-small;
+}
+
+[data-monster-role="more-appointments"] {
+    cursor: pointer;
+}
+
+.hidden {
+    display: none;
 }
 
 div.current-month {
@@ -90,11 +100,11 @@ div.today {
     color : var(--monster-color-primary-4);
 }
 
-
 [data-monster-role=appointment-container] {
     position: absolute;
-    top: 0;
+    box-sizing: border-box;
+    bottom: 0;
+    top: 0 ;
     left: 0;
-    width: 100%;
-    height: 100%;
+    right: 0;
 }