@schukai/monster 4.92.0 → 4.94.0

package/source/components/datatable/pagination.mjs

@@ -71,6 +71,28 @@ const sizeDataSymbol = Symbol("sizeData");
  */
 const debounceSizeSymbol = Symbol("debounceSize");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutUpdateSymbol = Symbol("layoutUpdate");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutApplySymbol = Symbol("layoutApply");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const labelStateSymbol = Symbol("labelState");
+const layoutModeSymbol = Symbol("layoutMode");
+
+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>`;
+
 /**
  * A Pagination component
  *
@@ -190,12 +212,23 @@ class Pagination extends CustomElement {
 		);
 
 		// 3. Preserve the responsive visibility of page numbers.
-		if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+		if (
+			!isAdaptivePagination.call(this) &&
+			this?.[sizeDataSymbol]?.showNumbers !== true
+		) {
 			pagination.items = [];
 		}
 
 		// 4. Set the 'pagination' option, which will trigger the component to re-render.
 		this.setOption("pagination", pagination);
+
+		if (isAdaptivePagination.call(this)) {
+			const list = this.shadowRoot?.querySelector(".pagination-list");
+			if (list) {
+				list.setAttribute("data-monster-adaptive-ready", "false");
+			}
+			schedulePaginationLayoutUpdate.call(this);
+		}
 	}
 	/**
 	 *
@@ -243,17 +276,10 @@ class Pagination extends CustomElement {
 		setTimeout(() => {
 			const parentParentNode = parentNode?.parentNode || parentNode;
 
-			const parentWidth = parentParentNode.offsetWidth;
-			const ownWidth = this.offsetWidth;
-
-			this[sizeDataSymbol] = {
-				last: {
-					parentWidth: 0,
-				},
-				showNumbers: ownWidth < parentWidth,
-			};
-
 			this[resizeObserverSymbol] = new ResizeObserver(() => {
+				if (this[layoutApplySymbol]) {
+					return;
+				}
 				if (this[debounceSizeSymbol] instanceof DeadMansSwitch) {
 					try {
 						this[debounceSizeSymbol].touch();
@@ -265,6 +291,11 @@ class Pagination extends CustomElement {
 
 				this[debounceSizeSymbol] = new DeadMansSwitch(250, () => {
 					queueMicrotask(() => {
+						if (isAdaptivePagination.call(this)) {
+							schedulePaginationLayoutUpdate.call(this);
+							return;
+						}
+
 						const parentWidth = parentParentNode.offsetWidth;
 						const ownWidth = this.clientWidth;
 
@@ -282,6 +313,26 @@ class Pagination extends CustomElement {
 				});
 			});
 
+			if (isAdaptivePagination.call(this)) {
+				this[sizeDataSymbol] = {
+					last: {
+						parentWidth: 0,
+					},
+					showNumbers: true,
+				};
+				schedulePaginationLayoutUpdate.call(this);
+			} else {
+				const parentWidth = parentParentNode.offsetWidth;
+				const ownWidth = this.offsetWidth;
+
+				this[sizeDataSymbol] = {
+					last: {
+						parentWidth: 0,
+					},
+					showNumbers: ownWidth < parentWidth,
+				};
+			}
+
 			this[resizeObserverSymbol].observe(parentParentNode);
 		}, 0);
 	}
@@ -344,6 +395,7 @@ function getTranslations() {
 				previous: "Vorherige",
 				next: "Nächste",
 				of: "von",
+				summary: "Seite ${current} von ${max}",
 			};
 		case "fr":
 			return {
@@ -352,6 +404,7 @@ function getTranslations() {
 				previous: "Précédent",
 				next: "Suivant",
 				of: "de",
+				summary: "Page ${current} sur ${max}",
 			};
 		case "sp":
 			return {
@@ -360,6 +413,7 @@ function getTranslations() {
 				previous: "Anterior",
 				next: "Siguiente",
 				of: "de",
+				summary: "Página ${current} de ${max}",
 			};
 		case "it":
 			return {
@@ -368,6 +422,7 @@ function getTranslations() {
 				previous: "Precedente",
 				next: "Successivo",
 				of: "di",
+				summary: "Pagina ${current} di ${max}",
 			};
 		case "pl":
 			return {
@@ -376,6 +431,7 @@ function getTranslations() {
 				previous: "Poprzednia",
 				next: "Następna",
 				of: "z",
+				summary: "Strona ${current} z ${max}",
 			};
 		case "no":
 			return {
@@ -384,6 +440,7 @@ function getTranslations() {
 				previous: "Forrige",
 				next: "Neste",
 				of: "av",
+				summary: "Side ${current} av ${max}",
 			};
 		case "dk":
 			return {
@@ -392,6 +449,7 @@ function getTranslations() {
 				previous: "Forrige",
 				next: "Næste",
 				of: "af",
+				summary: "Side ${current} af ${max}",
 			};
 		case "sw":
 			return {
@@ -400,6 +458,7 @@ function getTranslations() {
 				previous: "Föregående",
 				next: "Nästa",
 				of: "av",
+				summary: "Sida ${current} av ${max}",
 			};
 		default:
 		case "en":
@@ -409,6 +468,7 @@ function getTranslations() {
 				previous: "Previous",
 				next: "Next",
 				of: "of",
+				summary: "${current} of ${max}",
 			};
 	}
 }
@@ -470,6 +530,44 @@ function initEventHandler() {
 			clickCallback(parseInt(page, 10), event);
 		}
 	});
+
+	self[paginationElementSymbol].addEventListener("dblclick", function (event) {
+		const prevTarget = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"pagination-prev",
+		);
+		const nextTarget = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"pagination-next",
+		);
+
+		if (!prevTarget && !nextTarget) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const maxPage = parseInt(self.getOption("pages"), 10);
+		if (!Number.isFinite(maxPage) || maxPage <= 0) {
+			return;
+		}
+
+		const targetPage = prevTarget ? 1 : maxPage;
+
+		const datasource = self[datasourceLinkedElementSymbol];
+		const clickCallback = self.getOption("callbacks.click");
+
+		if (datasource && typeof datasource.setParameters === "function") {
+			datasource.setParameters({ page: targetPage });
+			if (typeof datasource.reload === "function") {
+				datasource.reload();
+			}
+		} else if (typeof clickCallback === "function") {
+			clickCallback(targetPage, event);
+		}
+	});
 }
 
 /**
@@ -531,6 +629,10 @@ function handleDataSourceChanges() {
 	}
 
 	this.setOption("pagination", pagination);
+
+	if (isEmbeddedPagination.call(this)) {
+		schedulePaginationLayoutUpdate.call(this);
+	}
 }
 
 /**
@@ -618,6 +720,16 @@ function buildPagination(current, max) {
 		prev === "null"
 			? "#"
 			: `#${new Formatter({ page: prev }).format(this.getOption("href"))}`;
+	const ofLabel = this.getOption("labels.of") || "of";
+	const summaryTemplate = this.getOption("labels.summary");
+	const summaryContext = {
+		current: String(current),
+		max: String(max),
+		of: String(ofLabel),
+	};
+	const summary = isString(summaryTemplate)
+		? new Formatter(summaryContext).format(summaryTemplate)
+		: `${summaryContext.current} ${summaryContext.of} ${summaryContext.max}`;
 
 	return {
 		current,
@@ -629,10 +741,395 @@ function buildPagination(current, max) {
 		prev,
 		prevClass,
 		prevHref,
+		summary,
 		items,
 	};
 }
 
+/**
+ * @private
+ */
+function schedulePaginationLayoutUpdate() {
+	if (!isAdaptivePagination.call(this)) {
+		return;
+	}
+	if (this[layoutUpdateSymbol] || this[layoutApplySymbol]) {
+		return;
+	}
+
+	this[layoutUpdateSymbol] = true;
+	requestAnimationFrame(() => {
+		this[layoutUpdateSymbol] = false;
+		applyPaginationLayout.call(this);
+	});
+}
+
+/**
+ * @private
+ */
+function applyPaginationLayout() {
+	if (!this.isConnected || !this.shadowRoot) {
+		return;
+	}
+
+	if (!isAdaptivePagination.call(this)) {
+		return;
+	}
+
+	const parentNode = this.parentNode;
+	const parentParentNode = parentNode?.parentNode || parentNode;
+	const availableWidth = isSelectPagination.call(this)
+		? getSelectAvailableWidth.call(this, parentNode)
+		: isEmbeddedPagination.call(this)
+			? getEmbeddedAvailableWidth.call(this, parentNode)
+			: this.getBoundingClientRect().width ||
+				parentParentNode?.offsetWidth ||
+				0;
+
+	if (!availableWidth) {
+		return;
+	}
+
+	this[layoutApplySymbol] = true;
+	try {
+		ensureLabelState.call(this);
+
+		const list = this.shadowRoot.querySelector(".pagination-list");
+		if (!list) {
+			return;
+		}
+
+		list.classList.add("pagination-no-wrap");
+		list.setAttribute("data-monster-adaptive-ready", "false");
+
+		const prevLink = this.shadowRoot.querySelector(
+			"a[data-monster-role=pagination-prev]",
+		);
+		const nextLink = this.shadowRoot.querySelector(
+			"a[data-monster-role=pagination-next]",
+		);
+
+		const widthFull = applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"full",
+		);
+		const widthNoNumbers = applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"no-numbers",
+		);
+		const widthCompactSummary = applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact-summary",
+		);
+		const widthCompact = applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact",
+		);
+
+		const nextMode = choosePaginationMode.call(this, {
+			availableWidth,
+			widthFull,
+			widthNoNumbers,
+			widthCompactSummary,
+			widthCompact,
+		});
+
+		applyPaginationMode.call(this, list, prevLink, nextLink, nextMode);
+		list.setAttribute("data-monster-adaptive-ready", "true");
+	} finally {
+		this[layoutApplySymbol] = false;
+	}
+}
+
+/**
+ * @private
+ * @param {number} parentWidth
+ * @return {boolean}
+ */
+function paginationFits(parentWidth) {
+	const list = this.shadowRoot.querySelector(".pagination-list");
+	if (!list) {
+		return true;
+	}
+	return list.scrollWidth <= parentWidth;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @param {boolean} visible
+ */
+function setNumberItemsVisible(list, visible) {
+	const numberItems = list.querySelectorAll(
+		"[data-monster-role=pagination-item]",
+	);
+	for (const item of numberItems) {
+		const container = item.parentElement;
+		if (!container) continue;
+		container.style.display = visible ? "" : "none";
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @param {boolean} visible
+ */
+function setSummaryVisible(list, visible) {
+	const summaryItem = list.querySelector(
+		"[data-monster-role=pagination-summary]",
+	);
+	if (!summaryItem) {
+		return;
+	}
+	summaryItem.style.display = visible ? "flex" : "none";
+}
+
+/**
+ * @private
+ */
+function ensureLabelState() {
+	if (this[labelStateSymbol]) {
+		return;
+	}
+
+	const prevLink = this.shadowRoot?.querySelector(
+		"a[data-monster-role=pagination-prev]",
+	);
+	const nextLink = this.shadowRoot?.querySelector(
+		"a[data-monster-role=pagination-next]",
+	);
+
+	this[labelStateSymbol] = {
+		previous: prevLink?.innerHTML || this.getOption("labels.previous"),
+		next: nextLink?.innerHTML || this.getOption("labels.next"),
+	};
+}
+
+/**
+ * @private
+ * @param {boolean} compact
+ */
+function setCompactLabels(compact, prevLink, nextLink) {
+	const state = this[labelStateSymbol];
+	if (!state) return;
+
+	if (compact) {
+		if (prevLink) prevLink.innerHTML = compactPrevIcon;
+		if (nextLink) nextLink.innerHTML = compactNextIcon;
+	} else {
+		if (prevLink) prevLink.innerHTML = state.previous;
+		if (nextLink) nextLink.innerHTML = state.next;
+	}
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isEmbeddedPagination() {
+	return this?.tagName?.toLowerCase?.() === "monster-embedded-pagination";
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isSelectPagination() {
+	const root = this.getRootNode?.();
+	const host = root?.host;
+	return host?.tagName?.toLowerCase?.() === "monster-select";
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isAdaptivePagination() {
+	return isEmbeddedPagination.call(this) || isSelectPagination.call(this);
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} parentNode
+ * @return {number}
+ */
+function getSelectAvailableWidth(parentNode) {
+	if (!parentNode) {
+		return this.getBoundingClientRect().width;
+	}
+
+	const rect = parentNode.getBoundingClientRect();
+	const styles = getComputedStyle(parentNode);
+	const paddingLeft = parseFloat(styles.paddingLeft || "0");
+	const paddingRight = parseFloat(styles.paddingRight || "0");
+	return Math.max(0, rect.width - paddingLeft - paddingRight);
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} parentNode
+ * @return {number}
+ */
+function getEmbeddedAvailableWidth(parentNode) {
+	if (!parentNode) {
+		return this.getBoundingClientRect().width;
+	}
+
+	const rect = parentNode.getBoundingClientRect();
+	if (!rect.width) {
+		return this.getBoundingClientRect().width;
+	}
+
+	const styles = getComputedStyle(parentNode);
+	const gapValue = styles.columnGap || styles.gap || "0";
+	const gap = parseFloat(gapValue) || 0;
+
+	const siblings = Array.from(parentNode.children).filter((el) => el !== this);
+	let siblingsWidth = 0;
+	for (const sibling of siblings) {
+		const siblingStyles = getComputedStyle(sibling);
+		if (siblingStyles.display === "none") {
+			continue;
+		}
+		siblingsWidth += sibling.getBoundingClientRect().width;
+	}
+
+	const gaps = siblings.length > 0 ? siblings.length : 0;
+	return Math.max(0, rect.width - siblingsWidth - gap * gaps);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @param {HTMLElement|null} prevLink
+ * @param {HTMLElement|null} nextLink
+ * @param {"full"|"no-numbers"|"compact-summary"|"compact"} mode
+ * @return {number}
+ */
+function applyPaginationMode(list, prevLink, nextLink, mode) {
+	switch (mode) {
+		case "compact":
+			list.classList.add("pagination-numbers-hidden");
+			list.classList.add("pagination-compact");
+			setNumberItemsVisible(list, false);
+			setSummaryVisible(list, true);
+			setCompactLabels.call(this, true, prevLink, nextLink);
+			break;
+		case "compact-summary":
+			list.classList.add("pagination-numbers-hidden");
+			list.classList.add("pagination-compact");
+			setNumberItemsVisible(list, false);
+			setSummaryVisible(list, true);
+			setCompactLabels.call(this, true, prevLink, nextLink);
+			break;
+		case "no-numbers":
+			list.classList.add("pagination-numbers-hidden");
+			list.classList.remove("pagination-compact");
+			setNumberItemsVisible(list, false);
+			setSummaryVisible(list, true);
+			setCompactLabels.call(this, false, prevLink, nextLink);
+			break;
+		default:
+			list.classList.remove("pagination-numbers-hidden");
+			list.classList.remove("pagination-compact");
+			setNumberItemsVisible(list, true);
+			setSummaryVisible(list, false);
+			setCompactLabels.call(this, false, prevLink, nextLink);
+			break;
+	}
+
+	return list.scrollWidth;
+}
+
+/**
+ * @private
+ * @param {object} params
+ * @return {"full"|"no-numbers"|"compact-summary"|"compact"}
+ */
+function choosePaginationMode({
+	availableWidth,
+	widthFull,
+	widthNoNumbers,
+	widthCompactSummary,
+	widthCompact,
+}) {
+	const hysteresisUp = 24;
+	const hysteresisDown = 8;
+	const currentMode = this[layoutModeSymbol] || "full";
+
+	if (currentMode === "full") {
+		if (widthFull > availableWidth - hysteresisDown) {
+			if (widthNoNumbers <= availableWidth - hysteresisDown) {
+				this[layoutModeSymbol] = "no-numbers";
+				return "no-numbers";
+			}
+			if (widthCompactSummary <= availableWidth - hysteresisDown) {
+				this[layoutModeSymbol] = "compact-summary";
+				return "compact-summary";
+			}
+			this[layoutModeSymbol] = "compact";
+			return "compact";
+		}
+		this[layoutModeSymbol] = "full";
+		return "full";
+	}
+
+	if (currentMode === "no-numbers") {
+		if (widthNoNumbers > availableWidth - hysteresisDown) {
+			if (widthCompactSummary <= availableWidth - hysteresisDown) {
+				this[layoutModeSymbol] = "compact-summary";
+				return "compact-summary";
+			}
+			this[layoutModeSymbol] = "compact";
+			return "compact";
+		}
+
+		if (widthFull + hysteresisUp <= availableWidth) {
+			this[layoutModeSymbol] = "full";
+			return "full";
+		}
+
+		this[layoutModeSymbol] = "no-numbers";
+		return "no-numbers";
+	}
+
+	if (currentMode === "compact-summary") {
+		if (widthNoNumbers + hysteresisUp <= availableWidth) {
+			this[layoutModeSymbol] = "no-numbers";
+			return "no-numbers";
+		}
+
+		if (widthCompactSummary > availableWidth - hysteresisDown) {
+			this[layoutModeSymbol] = "compact";
+			return "compact";
+		}
+
+		this[layoutModeSymbol] = "compact-summary";
+		return "compact-summary";
+	}
+
+	if (widthCompactSummary + hysteresisUp <= availableWidth) {
+		this[layoutModeSymbol] = "compact-summary";
+		return "compact-summary";
+	}
+
+	this[layoutModeSymbol] = "compact";
+	return "compact";
+}
+
 /**
  * @private
  * @return {string}
@@ -656,6 +1153,7 @@ function getTemplate() {
         <div data-monster-role="control" part="control">
             <nav data-monster-role="pagination" role="navigation" aria-label="pagination" part="nav">
                 <ul class="pagination-list" data-monster-insert="items path:pagination.items"
+                    data-monster-adaptive-ready="false"
                     data-monster-select-this="true" part="list">
                     <li part="prev" data-monster-role="pagination-prev"><a
                             data-monster-role="pagination-prev"
@@ -665,6 +1163,9 @@ function getTemplate() {
             data-page-no path:pagination.prevNo,
             href path:pagination.prevHref | prefix: #"
                             data-monster-replace="path:labels.previous">Previous</a></li>
+                    <li part="summary" data-monster-role="pagination-summary">
+                        <span data-monster-replace="path:pagination.summary"></span>
+                    </li>
                     <li part="next" data-monster-role="pagination-next"><a
                             data-monster-role="pagination-next"
                             part="next-link"

package/source/components/datatable/style/column-bar.pcss

@@ -21,6 +21,10 @@
         padding: 0;
         margin: 0 15px 0 0;
 
+        &.dots-hidden {
+            display: none;
+        }
+
         & li {
             list-style: none;
             padding: 0;
@@ -52,10 +56,21 @@
             & :hover, & :focus {
                 background-clip: border-box;
             }
+        }
 
-
+        & .dots-overflow-hidden {
+            display: none;
         }
 
+        & .dots-overflow-indicator {
+            align-items: center;
+            color: var(--monster-color-primary-1);
+            display: flex;
+            font-size: 0.75rem;
+            line-height: 1;
+            padding: 0 2px;
+            white-space: nowrap;
+        }
 
     }
 
@@ -134,4 +149,4 @@
         }
 
     }
-}
+}