@schukai/monster 4.39.0 → 4.40.1

package/source/components/datatable/pagination.mjs

@@ -13,9 +13,9 @@
  */
 
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+  assembleMethodSymbol,
+  CustomElement,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { findElementWithSelectorUpwards, getWindow } from "../../dom/util.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
@@ -82,288 +82,335 @@ const debounceSizeSymbol = Symbol("debounceSize");
  * @summary The Pagination component is used to show the current page and the total number of pages.
  */
 class Pagination extends CustomElement {
-	/**
-	 */
-	constructor() {
-		super();
-		this[datasourceLinkedElementSymbol] = null;
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/pagination");
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} datasource Datasource configuration
-	 * @property {string} datasource.selector Datasource selector
-	 * @property {Object} labels Label definitions
-	 * @property {string} labels.page Page label
-	 * @property {string} labels.description Description label
-	 * @property {string} labels.previous Previous label
-	 * @property {string} labels.next Next label
-	 * @property {string} labels.of Of label
-	 * @property {string} href Href
-	 * @property {number} currentPage Current page
-	 * @property {number} pages Pages
-	 * @property {number} objectsPerPage Objects per page
-	 * @property {Object} mapping Mapping
-	 * @property {string} mapping.pages Pages mapping
-	 * @property {string} mapping.objectsPerPage Objects per page mapping
-	 * @property {string} mapping.currentPage Current page mapping
-	 */
-	get defaults() {
-		return Object.assign(
-			{},
-			super.defaults,
-			{
-				templates: {
-					main: getTemplate(),
-				},
-
-				datasource: {
-					selector: null,
-				},
-
-				labels: getTranslations(),
-
-				href: "page-${page}",
-
-				pages: null,
-				objectsPerPage: 20,
-				currentPage: null,
-
-				mapping: {
-					pages: "sys.pagination.pages",
-					objectsPerPage: "sys.pagination.objectsPerPage",
-					currentPage: "sys.pagination.currentPage",
-				},
-
-				/* @private */
-				pagination: {
-					items: [],
-				},
-			},
-			initOptionsFromArguments.call(this),
-		);
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-pagination";
-	}
-
-	/**
-	 * @return {void}
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
-			this[resizeObserverSymbol].disconnect();
-		}
-	}
-
-	/**
-	 * @return {void}
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		const parentNode = this.parentNode;
-		if (!parentNode) {
-			return;
-		}
-
-		try {
-			handleDataSourceChanges.call(this);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || `${e}`);
-		}
-
-		requestAnimationFrame(() => {
-			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[debounceSizeSymbol] instanceof DeadMansSwitch) {
-					try {
-						this[debounceSizeSymbol].touch();
-						return;
-					} catch (e) {
-						delete this[debounceSizeSymbol];
-					}
-				}
-
-				this[debounceSizeSymbol] = new DeadMansSwitch(250, () => {
-					queueMicrotask(() => {
-						const parentWidth = parentParentNode.offsetWidth;
-						const ownWidth = this.clientWidth;
-
-						if (this[sizeDataSymbol]?.last?.parentWidth === parentWidth) {
-							return;
-						}
-
-						this[sizeDataSymbol].last = {
-							parentWidth: parentWidth,
-						};
-
-						this[sizeDataSymbol].showNumbers = ownWidth <= parentWidth;
-						handleDataSourceChanges.call(this);
-					});
-				});
-			});
-
-			this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
-		});
-	}
-
-	/**
-	 * @return {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-
-		const selector = this.getOption("datasource.selector", "");
-
-		if (isString(selector)) {
-			const element = findElementWithSelectorUpwards(this, selector);
-			if (element === null) {
-				throw new Error("the selector must match exactly one element");
-			}
-
-			if (!(element instanceof Datasource)) {
-				throw new TypeError("the element must be a datasource");
-			}
-
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-
-			element.attachObserver(new Observer(handleDataSourceChanges.bind(this)));
-
-			handleDataSourceChanges.call(this);
-		}
-	}
-
-	/**
-	 * @private
-	 * @return {CSSStyleSheet}
-	 */
-	static getControlCSSStyleSheet() {
-		return PaginationStyleSheet;
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [this.getControlCSSStyleSheet(), DisplayStyleSheet, ThemeStyleSheet];
-	}
+  /**
+   */
+  constructor() {
+    super();
+    this[datasourceLinkedElementSymbol] = null;
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/pagination");
+  }
+
+  /**
+   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * The individual configuration values can be found in the table.
+   *
+   * @property {Object} templates Template definitions
+   * @property {string} templates.main Main template
+   * @property {Object} datasource Datasource configuration
+   * @property {string} datasource.selector Datasource selector
+   * @property {Object} labels Label definitions
+   * @property {string} labels.page Page label
+   * @property {string} labels.description Description label
+   * @property {string} labels.previous Previous label
+   * @property {string} labels.next Next label
+   * @property {string} labels.of Of label
+   * @property {string} href Href
+   * @property {number} currentPage Current page
+   * @property {number} pages Pages
+   * @property {number} objectsPerPage Objects per page
+   * @property {Object} mapping Mapping
+   * @property {string} mapping.pages Pages mapping
+   * @property {string} mapping.objectsPerPage Objects per page mapping
+   * @property {string} mapping.currentPage Current page mapping
+   */
+  get defaults() {
+    return Object.assign(
+      {},
+      super.defaults,
+      {
+        templates: {
+          main: getTemplate(),
+        },
+
+        datasource: {
+          selector: null,
+        },
+
+        labels: getTranslations(),
+
+        callbacks: {
+          click: null,
+        },
+
+        href: "page-${page}",
+
+        pages: null,
+        objectsPerPage: 20,
+        currentPage: null,
+
+        mapping: {
+          pages: "sys.pagination.pages",
+          objectsPerPage: "sys.pagination.objectsPerPage",
+          currentPage: "sys.pagination.currentPage",
+        },
+
+        /* @private */
+        pagination: {
+          items: [],
+        },
+      },
+      initOptionsFromArguments.call(this),
+    );
+  }
+  /**
+   * Sets the pagination state directly, without requiring a datasource.
+   * This is useful for controlling the component programmatically.
+   *
+   * @param {object} state - The state object for the pagination.
+   * @param {number} state.currentPage - The current active page number.
+   * @param {number} state.totalPages - The total number of available pages.
+   * @return {void}
+   */
+  setPaginationState({ currentPage, totalPages }) {
+    if (typeof currentPage !== "number" || typeof totalPages !== "number") {
+      console.error(
+        "setPaginationState requires currentPage and totalPages to be numbers.",
+      );
+      return;
+    }
+
+    // 1. Update the component's internal options with the new values.
+    this.setOption("currentPage", currentPage);
+    this.setOption("pages", totalPages);
+
+    // 2. Call the existing buildPagination function to recalculate the links.
+    const pagination = buildPagination.call(
+      this,
+      this.getOption("currentPage"),
+      this.getOption("pages"),
+    );
+
+    // 3. Preserve the responsive visibility of page numbers.
+    if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+      pagination.items = [];
+    }
+
+    // 4. Set the 'pagination' option, which will trigger the component to re-render.
+    this.setOption("pagination", pagination);
+  }
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-pagination";
+  }
+
+  /**
+   * @return {void}
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+      this[resizeObserverSymbol].disconnect();
+    }
+    if (this?.[debounceSizeSymbol] instanceof DeadMansSwitch) {
+      try {
+        this[debounceSizeSymbol].defuse();
+        delete this[debounceSizeSymbol];
+      } catch (e) {
+        // already fired
+      }
+    }
+  }
+
+  /**
+   * @return {void}
+   */
+  connectedCallback() {
+    super.connectedCallback();
+
+    const parentNode = this.parentNode;
+    if (!parentNode) {
+      return;
+    }
+
+    try {
+      handleDataSourceChanges.call(this);
+    } catch (e) {
+      addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || `${e}`);
+    }
+
+    requestAnimationFrame(() => {
+      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[debounceSizeSymbol] instanceof DeadMansSwitch) {
+          try {
+            this[debounceSizeSymbol].touch();
+            return;
+          } catch (e) {
+            delete this[debounceSizeSymbol];
+          }
+        }
+
+        this[debounceSizeSymbol] = new DeadMansSwitch(250, () => {
+          queueMicrotask(() => {
+            const parentWidth = parentParentNode.offsetWidth;
+            const ownWidth = this.clientWidth;
+
+            if (this[sizeDataSymbol]?.last?.parentWidth === parentWidth) {
+              return;
+            }
+
+            this[sizeDataSymbol].last = {
+              parentWidth: parentWidth,
+            };
+
+            this[sizeDataSymbol].showNumbers = ownWidth <= parentWidth;
+            handleDataSourceChanges.call(this);
+          });
+        });
+      });
+
+      this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
+    });
+  }
+
+  /**
+   * @return {void}
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+
+    const selector = this.getOption("datasource.selector", "");
+
+    if (isString(selector)) {
+      const element = findElementWithSelectorUpwards(this, selector);
+      if (element === null) {
+        throw new Error("the selector must match exactly one element");
+      }
+
+      if (!(element instanceof Datasource)) {
+        throw new TypeError("the element must be a datasource");
+      }
+
+      this[datasourceLinkedElementSymbol] = element;
+      element.datasource.attachObserver(
+        new Observer(handleDataSourceChanges.bind(this)),
+      );
+
+      element.attachObserver(new Observer(handleDataSourceChanges.bind(this)));
+
+      handleDataSourceChanges.call(this);
+    }
+  }
+
+  /**
+   * @private
+   * @return {CSSStyleSheet}
+   */
+  static getControlCSSStyleSheet() {
+    return PaginationStyleSheet;
+  }
+
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [this.getControlCSSStyleSheet(), DisplayStyleSheet, ThemeStyleSheet];
+  }
 }
 
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				page: "${page}",
-				description: "Seite ${page}",
-				previous: "Vorherige",
-				next: "Nächste",
-				of: "von",
-			};
-		case "fr":
-			return {
-				page: "${page}",
-				description: "Page ${page}",
-				previous: "Précédent",
-				next: "Suivant",
-				of: "de",
-			};
-		case "sp":
-			return {
-				page: "${page}",
-				description: "Página ${page}",
-				previous: "Anterior",
-				next: "Siguiente",
-				of: "de",
-			};
-		case "it":
-			return {
-				page: "${page}",
-				description: "Pagina ${page}",
-				previous: "Precedente",
-				next: "Successivo",
-				of: "di",
-			};
-		case "pl":
-			return {
-				page: "${page}",
-				description: "Strona ${page}",
-				previous: "Poprzednia",
-				next: "Następna",
-				of: "z",
-			};
-		case "no":
-			return {
-				page: "${page}",
-				description: "Side ${page}",
-				previous: "Forrige",
-				next: "Neste",
-				of: "av",
-			};
-		case "dk":
-			return {
-				page: "${page}",
-				description: "Side ${page}",
-				previous: "Forrige",
-				next: "Næste",
-				of: "af",
-			};
-		case "sw":
-			return {
-				page: "${page}",
-				description: "Sida ${page}",
-				previous: "Föregående",
-				next: "Nästa",
-				of: "av",
-			};
-		default:
-		case "en":
-			return {
-				page: "${page}",
-				description: "Page ${page}",
-				previous: "Previous",
-				next: "Next",
-				of: "of",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de":
+      return {
+        page: "${page}",
+        description: "Seite ${page}",
+        previous: "Vorherige",
+        next: "Nächste",
+        of: "von",
+      };
+    case "fr":
+      return {
+        page: "${page}",
+        description: "Page ${page}",
+        previous: "Précédent",
+        next: "Suivant",
+        of: "de",
+      };
+    case "sp":
+      return {
+        page: "${page}",
+        description: "Página ${page}",
+        previous: "Anterior",
+        next: "Siguiente",
+        of: "de",
+      };
+    case "it":
+      return {
+        page: "${page}",
+        description: "Pagina ${page}",
+        previous: "Precedente",
+        next: "Successivo",
+        of: "di",
+      };
+    case "pl":
+      return {
+        page: "${page}",
+        description: "Strona ${page}",
+        previous: "Poprzednia",
+        next: "Następna",
+        of: "z",
+      };
+    case "no":
+      return {
+        page: "${page}",
+        description: "Side ${page}",
+        previous: "Forrige",
+        next: "Neste",
+        of: "av",
+      };
+    case "dk":
+      return {
+        page: "${page}",
+        description: "Side ${page}",
+        previous: "Forrige",
+        next: "Næste",
+        of: "af",
+      };
+    case "sw":
+      return {
+        page: "${page}",
+        description: "Sida ${page}",
+        previous: "Föregående",
+        next: "Nästa",
+        of: "av",
+      };
+    default:
+    case "en":
+      return {
+        page: "${page}",
+        description: "Page ${page}",
+        previous: "Previous",
+        next: "Next",
+        of: "of",
+      };
+  }
 }
 
 /**
@@ -372,89 +419,57 @@ function getTranslations() {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
 
-	this[paginationElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=pagination]",
-	);
+  this[paginationElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=pagination]",
+  );
 }
 
+/**
+ * @private
+ */
 /**
  * @private
  */
 function initEventHandler() {
-	const self = this;
-
-	self[paginationElementSymbol].addEventListener("click", function (event) {
-		let element = null;
-		const datasource = self[datasourceLinkedElementSymbol];
-		if (!datasource) {
-			return;
-		}
-
-		element = findTargetElementFromEvent(
-			event,
-			ATTRIBUTE_ROLE,
-			"pagination-item",
-		);
-
-		if (!element) {
-			element = findTargetElementFromEvent(
-				event,
-				ATTRIBUTE_ROLE,
-				"pagination-next",
-			);
-			if (!element) {
-				element = findTargetElementFromEvent(
-					event,
-					ATTRIBUTE_ROLE,
-					"pagination-prev",
-				);
-				if (!element) {
-					return;
-				}
-			}
-		}
-
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		let page = null;
-
-		if (!element.hasAttribute("data-page-no")) {
-			return;
-		}
-
-		page = element.getAttribute("data-page-no");
-
-		if (
-			!page ||
-			page === "" ||
-			page === "…" ||
-			page === null ||
-			page === undefined ||
-			page === "undefined" ||
-			page === "null"
-		) {
-			return;
-		}
-
-		if (typeof datasource.setParameters !== "function") {
-			return;
-		}
-
-		event.preventDefault();
-		datasource.setParameters({ page });
-
-		if (typeof datasource.reload !== "function") {
-			return;
-		}
-
-		datasource.reload();
-	});
+  const self = this;
+
+  self[paginationElementSymbol].addEventListener("click", function (event) {
+    let element =
+      findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-item") ||
+      findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-next") ||
+      findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-prev");
+
+    if (
+      !(element instanceof HTMLElement) ||
+      !element.hasAttribute("data-page-no")
+    ) {
+      return;
+    }
+
+    const page = element.getAttribute("data-page-no");
+
+    if (!page || page === "…" || page === "null" || page === "undefined") {
+      return;
+    }
+
+    event.preventDefault();
+
+    const datasource = self[datasourceLinkedElementSymbol];
+    const clickCallback = self.getOption("callbacks.click");
+
+    if (datasource && typeof datasource.setParameters === "function") {
+      datasource.setParameters({ page });
+      if (typeof datasource.reload === "function") {
+        datasource.reload();
+      }
+    } else if (typeof clickCallback === "function") {
+      clickCallback(parseInt(page, 10), event);
+    }
+  });
 }
 
 /**
@@ -470,52 +485,52 @@ function initEventHandler() {
  * @throws {Error} the datasource could not be initialized
  */
 function initOptionsFromArguments() {
-	const options = {};
-	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
-	if (selector) {
-		options.datasource = { selector: selector };
-	}
+  const options = {};
+  const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+  if (selector) {
+    options.datasource = { selector: selector };
+  }
 
-	return options;
+  return options;
 }
 
 /**
  * @private
  */
 function handleDataSourceChanges() {
-	let pagination;
-
-	if (!this[datasourceLinkedElementSymbol]) {
-		return;
-	}
-
-	const mapping = this.getOption("mapping");
-	const pf = new Pathfinder(this[datasourceLinkedElementSymbol].data);
-
-	for (const key in mapping) {
-		const path = mapping[key];
-
-		if (pf.exists(path)) {
-			const value = pf.getVia(path);
-			this.setOption(key, value);
-		}
-
-		const o = this[datasourceLinkedElementSymbol].getOption(path);
-		if (o !== undefined && o !== null) {
-			this.setOption(key, o);
-		}
-	}
-
-	pagination = buildPagination.call(
-		this,
-		this.getOption("currentPage"),
-		this.getOption("pages"),
-	);
-	if (this?.[sizeDataSymbol]?.showNumbers !== true) {
-		pagination.items = [];
-	}
-
-	this.setOption("pagination", pagination);
+  let pagination;
+
+  if (!this[datasourceLinkedElementSymbol]) {
+    return;
+  }
+
+  const mapping = this.getOption("mapping");
+  const pf = new Pathfinder(this[datasourceLinkedElementSymbol].data);
+
+  for (const key in mapping) {
+    const path = mapping[key];
+
+    if (pf.exists(path)) {
+      const value = pf.getVia(path);
+      this.setOption(key, value);
+    }
+
+    const o = this[datasourceLinkedElementSymbol].getOption(path);
+    if (o !== undefined && o !== null) {
+      this.setOption(key, o);
+    }
+  }
+
+  pagination = buildPagination.call(
+    this,
+    this.getOption("currentPage"),
+    this.getOption("pages"),
+  );
+  if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+    pagination.items = [];
+  }
+
+  this.setOption("pagination", pagination);
 }
 
 /**
@@ -525,97 +540,97 @@ function handleDataSourceChanges() {
  * @return  {object}
  */
 function buildPagination(current, max) {
-	current = parseInt(current, 10);
-	max = parseInt(max, 10);
-
-	let prev = current === 1 ? null : current - 1;
-	let next = current === max ? null : current + 1;
-	const itemList = [1];
-
-	if (current > 4) itemList.push(-1);
-
-	const r = 2;
-	const r1 = current - r;
-	const r2 = current + r;
-
-	for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) itemList.push(i);
-
-	if (r2 + 1 < max) itemList.push(-1);
-	if (r2 < max) itemList.push(max);
-
-	let prevClass = "";
-
-	if (prev === null) {
-		prevClass = " disabled";
-	}
-
-	let nextClass = "";
-	if (next === null) {
-		nextClass = " disabled";
-	}
-
-	const items = itemList.map((item) => {
-		let p = `${item}`;
-
-		if (item === -1) {
-			item = null;
-			p = "…";
-		}
-
-		const c = `${current}`;
-
-		const obj = {
-			pageNo: item, // as integer
-			page: p, // as string
-			current: p === c,
-			class: (p === c ? "current" : "").trim(),
-		};
-
-		if (item === null) {
-			obj.class += " disabled".trim();
-		}
-
-		const formatter = new Formatter(obj);
-
-		obj.description = formatter.format(this.getOption("labels.description"));
-		obj.label = formatter.format(this.getOption("labels.page"));
-		obj.href =
-			item === null
-				? "#"
-				: p === c
-					? "#"
-					: p === "1"
-						? "#"
-						: `#${formatter.format(this.getOption("href"))}`;
-		return obj;
-	});
-
-	const nextNo = next;
-	next = `${next}`;
-
-	const nextHref =
-		next === "null"
-			? "#"
-			: `#${new Formatter({ page: next }).format(this.getOption("href"))}`;
-	const prevNo = prev;
-	prev = `${prev}`;
-	const prevHref =
-		prev === "null"
-			? "#"
-			: `#${new Formatter({ page: prev }).format(this.getOption("href"))}`;
-
-	return {
-		current,
-		nextNo,
-		next,
-		nextClass,
-		nextHref,
-		prevNo,
-		prev,
-		prevClass,
-		prevHref,
-		items,
-	};
+  current = parseInt(current, 10);
+  max = parseInt(max, 10);
+
+  let prev = current === 1 ? null : current - 1;
+  let next = current === max ? null : current + 1;
+  const itemList = [1];
+
+  if (current > 4) itemList.push(-1);
+
+  const r = 2;
+  const r1 = current - r;
+  const r2 = current + r;
+
+  for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) itemList.push(i);
+
+  if (r2 + 1 < max) itemList.push(-1);
+  if (r2 < max) itemList.push(max);
+
+  let prevClass = "";
+
+  if (prev === null) {
+    prevClass = " disabled";
+  }
+
+  let nextClass = "";
+  if (next === null) {
+    nextClass = " disabled";
+  }
+
+  const items = itemList.map((item) => {
+    let p = `${item}`;
+
+    if (item === -1) {
+      item = null;
+      p = "…";
+    }
+
+    const c = `${current}`;
+
+    const obj = {
+      pageNo: item, // as integer
+      page: p, // as string
+      current: p === c,
+      class: (p === c ? "current" : "").trim(),
+    };
+
+    if (item === null) {
+      obj.class += " disabled".trim();
+    }
+
+    const formatter = new Formatter(obj);
+
+    obj.description = formatter.format(this.getOption("labels.description"));
+    obj.label = formatter.format(this.getOption("labels.page"));
+    obj.href =
+      item === null
+        ? "#"
+        : p === c
+          ? "#"
+          : p === "1"
+            ? "#"
+            : `#${formatter.format(this.getOption("href"))}`;
+    return obj;
+  });
+
+  const nextNo = next;
+  next = `${next}`;
+
+  const nextHref =
+    next === "null"
+      ? "#"
+      : `#${new Formatter({ page: next }).format(this.getOption("href"))}`;
+  const prevNo = prev;
+  prev = `${prev}`;
+  const prevHref =
+    prev === "null"
+      ? "#"
+      : `#${new Formatter({ page: prev }).format(this.getOption("href"))}`;
+
+  return {
+    current,
+    nextNo,
+    next,
+    nextClass,
+    nextHref,
+    prevNo,
+    prev,
+    prevClass,
+    prevHref,
+    items,
+  };
 }
 
 /**
@@ -623,10 +638,12 @@ function buildPagination(current, max) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
+
         <template id="items">
-            <li><a data-monster-attributes="class path:items.class,
+            <li part="item"><a part="link"
+                data-monster-attributes="class path:items.class,
                                             href path:items.href,
                                             aria-label path:items.description,
                                             disabled path:items.disabled:?disabled:undefined,
@@ -636,19 +653,21 @@ function getTemplate() {
                    data-monster-replace="path:items.label"></a></li>
         </template>
 
-        <div data-monster-role="control">
-            <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
+        <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-select-this="true">
-                    <li part="pagination-prev" data-monster-role="pagination-prev"><a
+                    data-monster-select-this="true" part="list">
+                    <li part="prev" data-monster-role="pagination-prev"><a
                             data-monster-role="pagination-prev"
+                            part="prev-link"
                             data-monster-attributes="
             class path:pagination.prevClass | prefix: previous,
             data-page-no path:pagination.prevNo,
             href path:pagination.prevHref | prefix: #"
                             data-monster-replace="path:labels.previous">Previous</a></li>
-                    <li part="pagination-next" data-monster-role="pagination-next"><a
+                    <li part="next" data-monster-role="pagination-next"><a
                             data-monster-role="pagination-next"
+                            part="next-link"
                             data-monster-attributes="class path:pagination.nextClass | prefix: next,
             data-page-no path:pagination.nextNo,
         href path:pagination.nextHref | prefix: #"