@schukai/monster 4.148.8 → 4.149.0

package/source/components/datatable/datatable.mjs

@@ -243,7 +243,7 @@ class DataTable extends CustomElement {
 				headers: [],
 
 				responsive: {
-					breakpoint: 1440,
+					breakpoint: 960,
 				},
 
 				labels: getTranslations(),
@@ -481,6 +481,7 @@ class DataTable extends CustomElement {
 				);
 				if (selectAll instanceof HTMLInputElement) {
 					selectAll.checked = false;
+					selectAll.indeterminate = false;
 				}
 
 				getSlottedElements
@@ -495,6 +496,7 @@ class DataTable extends CustomElement {
 				const rows = this.getGridElements(`[data-monster-role="select-row"]`);
 				rows.forEach((row) => {
 					row.checked = false;
+					setRowSelectionState.call(this, row, false);
 				});
 			}),
 		);
@@ -1267,27 +1269,21 @@ function initEventHandler() {
 
 		if (!(checkbox instanceof HTMLInputElement)) return;
 
-		const parentNode = checkbox.parentNode;
-		if (!(parentNode instanceof HTMLDivElement)) return;
-
-		const key = parentNode.getAttribute("data-monster-insert-reference");
-		const row = self.getGridElements(
-			`[data-monster-insert-reference="${key}"]`,
-		);
-		const index = key.split("-").pop();
+		const index = setRowSelectionState.call(self, checkbox, checkbox.checked);
+		if (index === null) return;
 
 		if (checkbox.checked) {
-			row.forEach((col) => col.classList.add("selected"));
 			fireCustomEvent(self, "monster-datatable-row-selected", { index });
 		} else {
-			row.forEach((col) => col.classList.remove("selected"));
 			fireCustomEvent(self, "monster-datatable-row-deselected", { index });
 		}
 
 		fireCustomEvent(this, "monster-datatable-selection-changed", {});
 
 		const rows = self.getGridElements(`[data-monster-role="select-row"]`);
-		const allSelected = Array.from(rows).every((r) => r.checked);
+		const selectedRows = Array.from(rows).filter((row) => row.checked);
+		const allSelected =
+			selectedRows.length > 0 && selectedRows.length === rows.length;
 
 		const selectAll = this[gridHeadersElementSymbol].querySelector(
 			`[data-monster-role="select-all"]`,
@@ -1302,7 +1298,10 @@ function initEventHandler() {
 				if (e instanceof HTMLElement) e.style.visibility = mode;
 			});
 
-		if (selectAll) selectAll.checked = allSelected;
+		if (selectAll instanceof HTMLInputElement) {
+			selectAll.checked = allSelected;
+			selectAll.indeterminate = selectedRows.length > 0 && !allSelected;
+		}
 	};
 
 	this[gridElementSymbol].addEventListener("click", selectRowCallback);
@@ -1315,13 +1314,15 @@ function initEventHandler() {
 			"data-monster-role",
 			"select-all",
 		);
-		if (!toggle) return;
+		if (!(toggle instanceof HTMLInputElement)) return;
 
 		const mode = toggle.checked;
 		const rows = this.getGridElements(`[data-monster-role="select-row"]`);
 		rows.forEach((row) => {
 			row.checked = mode;
+			setRowSelectionState.call(this, row, mode);
 		});
+		toggle.indeterminate = false;
 
 		if (mode) {
 			fireCustomEvent(this, "monster-datatable-all-rows-selected", {});
@@ -1343,6 +1344,34 @@ function initEventHandler() {
 	this[gridHeadersElementSymbol].addEventListener("touch", selectAllCallback);
 }
 
+/**
+ * Synchronize a row checkbox with the selected state of every cell in its row.
+ *
+ * @private
+ * @param {HTMLInputElement} checkbox
+ * @param {boolean} selected
+ * @returns {string|null}
+ */
+function setRowSelectionState(checkbox, selected) {
+	const parentNode = checkbox.parentNode;
+	if (!(parentNode instanceof HTMLDivElement)) {
+		return null;
+	}
+
+	const key = parentNode.getAttribute("data-monster-insert-reference");
+	if (!key) {
+		return null;
+	}
+
+	this.getGridElements(`[data-monster-insert-reference="${key}"]`).forEach(
+		(cell) => {
+			cell.classList.toggle("selected", selected);
+		},
+	);
+
+	return key.split("-").pop();
+}
+
 /**
  * @private
  */
@@ -1374,6 +1403,12 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 		let hClass = "";
 		const row = template.content.children[i];
 
+		row.toggleAttribute("data-monster-datatable-row-start", i === 0);
+		row.toggleAttribute(
+			"data-monster-datatable-row-end",
+			i === rowCount - 1,
+		);
+
 		let mode = "";
 		if (row.hasAttribute(ATTRIBUTE_DATATABLE_MODE)) {
 			mode = row.getAttribute(ATTRIBUTE_DATATABLE_MODE);
@@ -1464,7 +1499,11 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 				features.push(feature.trim());
 
 				if (feature === "select") {
-					label = "<input type='checkbox' data-monster-role='select-all' />";
+					const translations = getTranslations();
+					const selectionLabel = row.hasAttribute(ATTRIBUTE_DATATABLE_HEAD)
+						? label
+						: translations.selectRow;
+					label = `<input type='checkbox' data-monster-role='select-all' aria-label='${translations.selectAllRows}' />`;
 
 					while (row.firstChild) {
 						row.removeChild(row.firstChild);
@@ -1473,6 +1512,7 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 					const checkbox = document.createElement("input");
 					checkbox.type = "checkbox";
 					checkbox.setAttribute("data-monster-role", "select-row");
+					checkbox.setAttribute("aria-label", selectionLabel);
 					row.appendChild(checkbox);
 				}
 			});
@@ -1533,6 +1573,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "Die Liste enthält keine Einträge",
 				copyAll: "Alles kopieren",
+				selectRow: "Zeile auswählen",
+				selectAllRows: "Alle Zeilen auswählen",
 				helpText:
 					"<p>Sie können die Werte aus einzelnen Zeilen<br>" +
 					"in die Zwischenablage kopieren, indem Sie auf die entsprechende Spalte doppelklicken.</p>" +
@@ -1543,6 +1585,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "La liste ne contient aucune entrée",
 				copyAll: "Copier tout",
+				selectRow: "Sélectionner la ligne",
+				selectAllRows: "Sélectionner toutes les lignes",
 				helpText:
 					"<p>Vous pouvez copier les valeurs des rangées individuelles<br>" +
 					"dans le presse-papiers en double-cliquant sur la colonne concernée.</p>" +
@@ -1553,6 +1597,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "La lista no contiene entradas",
 				copyAll: "Copiar todo",
+				selectRow: "Seleccionar fila",
+				selectAllRows: "Seleccionar todas las filas",
 				helpText:
 					"<p>Puedes copiar los valores de filas individuales<br>" +
 					"al portapapeles haciendo doble clic en la columna correspondiente.</p>" +
@@ -1563,6 +1609,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "L'elenco non contiene voci",
 				copyAll: "Copia tutto",
+				selectRow: "Seleziona riga",
+				selectAllRows: "Seleziona tutte le righe",
 				helpText:
 					"<p>Puoi copiare i valori dalle singole righe<br>" +
 					"negli appunti facendo doppio clic sulla colonna relativa.</p>" +
@@ -1573,6 +1621,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "Lista nie zawiera wpisów",
 				copyAll: "Kopiuj wszystko",
+				selectRow: "Wybierz wiersz",
+				selectAllRows: "Wybierz wszystkie wiersze",
 				helpText:
 					"<p>Możesz skopiować wartości z poszczególnych wierszy<br>" +
 					"do schowka, klikając dwukrotnie na odpowiednią kolumnę.</p>" +
@@ -1583,6 +1633,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "Listen inneholder ingen oppføringer",
 				copyAll: "Kopier alt",
+				selectRow: "Velg rad",
+				selectAllRows: "Velg alle rader",
 				helpText:
 					"<p>Du kan kopiere verdier fra enkeltrader<br>" +
 					"til utklippstavlen ved å dobbeltklikke på den relevante kolonnen.</p>" +
@@ -1593,6 +1645,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "Listen indeholder ingen poster",
 				copyAll: "Kopiér alt",
+				selectRow: "Vælg række",
+				selectAllRows: "Vælg alle rækker",
 				helpText:
 					"<p>Du kan kopiere værdier fra enkelte rækker<br>" +
 					"til udklipsholderen ved at dobbeltklikke på den relevante kolonne.</p>" +
@@ -1603,6 +1657,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "Listan innehåller inga poster",
 				copyAll: "Kopiera allt",
+				selectRow: "Välj rad",
+				selectAllRows: "Välj alla rader",
 				helpText:
 					"<p>Du kan kopiera värden från enskilda rader<br>" +
 					"till urklipp genom att dubbelklicka på den relevanta kolumnen.</p>" +
@@ -1615,6 +1671,8 @@ function getTranslations() {
 			return {
 				theListContainsNoEntries: "The list contains no entries",
 				copyAll: "Copy all",
+				selectRow: "Select row",
+				selectAllRows: "Select all rows",
 				helpText:
 					"<p>You can copy the values from individual rows<br>" +
 					"to the clipboard by double-clicking on the relevant column.</p>" +

package/source/components/datatable/filter/date-range.mjs

@@ -208,7 +208,7 @@ class DateRange extends AbstractBase {
 				main: getTemplate(),
 			},
 
-			labels: getTranslations(),
+			labels: Object.assign({ button: "Choose date range" }, getTranslations()),
 
 			features: {
 				moreThan: true,
@@ -1107,77 +1107,77 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <input data-monster-attributes="disabled path:disabled | if:true, class path:classes.input"
-                   data-monster-role="input"
+            <input data-monster-role="input"
                    part="button"
+                   data-monster-attributes="disabled path:disabled | if:true, class path:classes.input, aria-label path:labels.button"
                    data-monster-replace="path:labels.button">
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>
-                <div part="filter" class="flex" data-monster-replace="path:filter">
-                    <div class="form-container" data-monster-role="form">
-
-                        <div data-monster-role="range-type" data-monster-range-type="today" data-monster-attributes="class path:features.moreThan | ?:form-group:hidden">
-                            <input type="radio" name="rangeType" value="today" tabindex="0">
-                            <label for="today"><span data-monster-replace="path:labels.todayValue"></span></label>
-                            <input type="hidden" name="todayValue" disabled tabindex="0">
-                        </div>
+                <div part="content">
+                    <div part="filter" class="flex" data-monster-replace="path:filter">
+                        <div class="form-container" data-monster-role="form">
+
+                            <div data-monster-role="range-type" data-monster-range-type="today" data-monster-attributes="class path:features.moreThan | ?:form-group:hidden">
+                                <input type="radio" name="rangeType" value="today" tabindex="0">
+                                <label for="today"><span data-monster-replace="path:labels.todayValue"></span></label>
+                                <input type="hidden" name="todayValue" disabled tabindex="0">
+                            </div>
                         
-                        <div data-monster-role="range-type" data-monster-range-type="within" data-monster-attributes="class path:features.within | ?:form-group:hidden">
-                            <input type="radio" name="rangeType" value="within" tabindex="0">
-                            <label for="within"><span
-                                    data-monster-replace="path:labels.withinValue"></span></label>
-                            <input data-monster-watch="true" type="number" name="withinValue" disabled
-                                   tabindex="0">
-                            <select data-monster-watch="true" name="withinValueUnit" disabled tabindex="0">
-                                <option selected value="days" data-monster-replace="path:labels.days"></option>
-                                <option value="weeks" data-monster-replace="path:labels.weeks"></option>
-                                <option value="months" data-monster-replace="path:labels.months"></option>
-                                <option value="years" data-monster-replace="path:labels.years"></option>
-                            </select>
-                        </div>
+                            <div data-monster-role="range-type" data-monster-range-type="within" data-monster-attributes="class path:features.within | ?:form-group:hidden">
+                                <input type="radio" name="rangeType" value="within" tabindex="0">
+                                <label for="within"><span
+                                        data-monster-replace="path:labels.withinValue"></span></label>
+                                <input data-monster-watch="true" type="number" name="withinValue" disabled
+                                       tabindex="0">
+                                <select data-monster-watch="true" name="withinValueUnit" disabled tabindex="0">
+                                    <option selected value="days" data-monster-replace="path:labels.days"></option>
+                                    <option value="weeks" data-monster-replace="path:labels.weeks"></option>
+                                    <option value="months" data-monster-replace="path:labels.months"></option>
+                                    <option value="years" data-monster-replace="path:labels.years"></option>
+                                </select>
+                            </div>
                         
-                        <div data-monster-role="range-type" data-monster-range-type="more-than" data-monster-attributes="class path:features.moreThan | ?:form-group:hidden">
-                            <input type="radio" name="rangeType" value="more-than" tabindex="0">
-                            <label for="more-than"><span
-                                    data-monster-replace="path:labels.moreThanValue"></span></label>
-                            <input data-monster-watch="true" type="number" name="moreThanValue" disabled
-                                   tabindex="0">
-                            <select data-monster-watch="true" name="moreThanValueUnit" disabled tabindex="0">
-                                <option selected value="days" data-monster-replace="path:labels.days"></option>
-                                <option value="weeks" data-monster-replace="path:labels.weeks"></option>
-                                <option value="months" data-monster-replace="path:labels.months"></option>
-                                <option value="years" data-monster-replace="path:labels.years"></option>
-                            </select>
-                        </div>
-
-                        <div class="form-group" data-monster-role="range-type" data-monster-range-type="single">
-                            <input type="radio" name="rangeType" value="single" tabindex="0">
-                            <label for="single"><span data-monster-replace="path:labels.singleValue"></span></label>
-                            <input type="date" data-monster-watch="true" name="singleValue" disabled tabindex="0">
-                        </div>
+                            <div data-monster-role="range-type" data-monster-range-type="more-than" data-monster-attributes="class path:features.moreThan | ?:form-group:hidden">
+                                <input type="radio" name="rangeType" value="more-than" tabindex="0">
+                                <label for="more-than"><span
+                                        data-monster-replace="path:labels.moreThanValue"></span></label>
+                                <input data-monster-watch="true" type="number" name="moreThanValue" disabled
+                                       tabindex="0">
+                                <select data-monster-watch="true" name="moreThanValueUnit" disabled tabindex="0">
+                                    <option selected value="days" data-monster-replace="path:labels.days"></option>
+                                    <option value="weeks" data-monster-replace="path:labels.weeks"></option>
+                                    <option value="months" data-monster-replace="path:labels.months"></option>
+                                    <option value="years" data-monster-replace="path:labels.years"></option>
+                                </select>
+                            </div>
+
+                            <div class="form-group" data-monster-role="range-type" data-monster-range-type="single">
+                                <input type="radio" name="rangeType" value="single" tabindex="0">
+                                <label for="single"><span data-monster-replace="path:labels.singleValue"></span></label>
+                                <input type="date" data-monster-watch="true" name="singleValue" disabled tabindex="0">
+                            </div>
                         
-                        <div class="form-group" data-monster-role="range-type" data-monster-range-type="from">
-                            <input type="radio" name="rangeType" value="from" tabindex="0">
-                            <label for="from"><span data-monster-replace="path:labels.fromValue"></span></label>
-                            <input type="date" data-monster-watch="true" name="fromValue" disabled tabindex="0">
-                        </div>
+                            <div class="form-group" data-monster-role="range-type" data-monster-range-type="from">
+                                <input type="radio" name="rangeType" value="from" tabindex="0">
+                                <label for="from"><span data-monster-replace="path:labels.fromValue"></span></label>
+                                <input type="date" data-monster-watch="true" name="fromValue" disabled tabindex="0">
+                            </div>
                         
-                        <div class="form-group" data-monster-role="range-type" data-monster-range-type="to">
-                            <input type="radio" name="rangeType" value="to" tabindex="0">
-                            <label for="to"><span data-monster-replace="path:labels.toValue"></span></label>
-                            <input type="date" data-monster-watch="true" name="toValue" disabled tabindex="0">
-                        </div>
+                            <div class="form-group" data-monster-role="range-type" data-monster-range-type="to">
+                                <input type="radio" name="rangeType" value="to" tabindex="0">
+                                <label for="to"><span data-monster-replace="path:labels.toValue"></span></label>
+                                <input type="date" data-monster-watch="true" name="toValue" disabled tabindex="0">
+                            </div>
                         
-                        <div class="form-group" data-monster-role="range-type" data-monster-range-type="from-to">
-                            <input type="radio" name="rangeType" value="from-to" tabindex="0">
-                            <label for="rangeFrom"><span data-monster-replace="path:labels.fromValue"></span></label>
-                            <input type="date" data-monster-watch="true" name="fromValue" disabled tabindex="0">
-                            <label for="rangeTo"><span data-monster-replace="path:labels.toValue"></span></label>
-                            <input type="date" data-monster-watch="true" name="toValue" disabled tabindex="0">
+                            <div class="form-group" data-monster-role="range-type" data-monster-range-type="from-to">
+                                <input type="radio" name="rangeType" value="from-to" tabindex="0">
+                                <label for="rangeFrom"><span data-monster-replace="path:labels.fromValue"></span></label>
+                                <input type="date" data-monster-watch="true" name="fromValue" disabled tabindex="0">
+                                <label for="rangeTo"><span data-monster-replace="path:labels.toValue"></span></label>
+                                <input type="date" data-monster-watch="true" name="toValue" disabled tabindex="0">
+                            </div>
                         </div>
-
-
                     </div>
                 </div>
             </div>

package/source/components/datatable/filter/date-time.mjs

@@ -65,6 +65,9 @@ class DateTimeFilter extends CustomControl {
 			templates: {
 				main: getTemplate(),
 			},
+			labels: {
+				query: "Date and time",
+			},
 		});
 	}
 
@@ -153,7 +156,8 @@ function getTemplate() {
 	return `
         <div data-monster-role="control" part="control">
             <slot></slot>
-            <input type="datetime-local" name="query" data-monster-role="query" data-monster-attributes="value path:query">
+            <input type="datetime-local" name="query" data-monster-role="query"
+                   data-monster-attributes="value path:query, aria-label path:labels.query">
         </div>
     `;
 }

package/source/components/datatable/filter/range.mjs

@@ -175,7 +175,7 @@ class Range extends AbstractBase {
 				main: getTemplate(),
 			},
 
-			labels: getTranslations(),
+			labels: Object.assign({ button: "Choose range" }, getTranslations()),
 
 			features: {},
 
@@ -722,9 +722,9 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <input data-monster-attributes="disabled path:disabled | if:true, class path:classes.input"
-                   data-monster-role="input"
+            <input data-monster-role="input"
                    part="button"
+                   data-monster-attributes="disabled path:disabled | if:true, class path:classes.input, aria-label path:labels.button"
                    data-monster-replace="path:labels.button">
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">

package/source/components/datatable/filter/select-operator.mjs

@@ -491,12 +491,17 @@ function getTemplate() {
             monster-filter-select::part(control) {
                 border: none;
                 box-shadow: none;
+                height: 100%;
+                min-block-size: 0;
             }
             monster-input-group {
                 width: 100%;
-                height: 100%;
+                height: var(--monster-control-min-block-size, 2.5rem);
                 align-self: stretch;
             }
+            monster-filter-select {
+                --monster-select-control-min-block-size: 0;
+            }
             monster-input-group::part(control) {
                 align-items: stretch;
             }
@@ -515,6 +520,7 @@ function getTemplate() {
                 <select slot="prefix" data-monster-role="operator" name="operator"></select>
                 <monster-filter-select
                     data-monster-role="select"
+                    data-monster-selected-template="summary"
                     style="flex: 1 1 auto; min-width: 0; width: 1%; height: -webkit-fill-available; height: -moz-available; height: fill-available; align-self: stretch;"
                 ></monster-filter-select>
             </monster-input-group>

package/source/components/datatable/filter/text-operator.mjs

@@ -82,7 +82,13 @@ class TextOperator extends CustomControl {
 			quotes: {
 				char: '"',
 			},
-			labels: getTranslations(),
+			labels: Object.assign(
+				{
+					operator: "Filter operator",
+					query: "Filter value",
+				},
+				getTranslations(),
+			),
 		});
 	}
 
@@ -422,8 +428,10 @@ function getTemplate() {
         <div data-monster-role="control" part="control">
             <slot></slot>
             <monster-input-group>
-                <select slot="prefix" data-monster-role="operator" name="operator"></select>
-                <input type="search" data-monster-role="query" name="query" data-monster-attributes="value path:query">
+                <select slot="prefix" data-monster-role="operator" name="operator"
+                        data-monster-attributes="aria-label path:labels.operator"></select>
+                <input type="search" data-monster-role="query" name="query"
+                       data-monster-attributes="value path:query, aria-label path:labels.query">
             </monster-input-group>
         </div>
     `;

package/source/components/datatable/filter.mjs

@@ -752,6 +752,22 @@ function initFilter() {
 		});
 
 	updateFilterSelections.call(this);
+	updateFilterAvailability.call(this);
+}
+
+/**
+ * Disable filter actions when no filter definitions are available.
+ * @private
+ */
+function updateFilterAvailability() {
+	const hasFilters = this[settingsSymbol].getOptions().length > 0;
+	for (const control of [
+		this[filterSelectElementSymbol],
+		this[searchButtonElementSymbol],
+		this[resetButtonElementSymbol],
+	]) {
+		control?.setOption?.("disabled", !hasFilters);
+	}
 }
 
 /**

package/source/components/datatable/pagination.mjs

@@ -95,8 +95,8 @@ const lastNavClickTargetSymbol = Symbol("lastNavClickTarget");
 
 const minNavDoubleClickDelayMs = 200;
 
-const compactPrevIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"/></svg>`;
-const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/></svg>`;
+const compactPrevIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>`;
+const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0"/></svg>`;
 
 /**
  * A Pagination component