@schukai/monster 4.43.1 → 4.43.3

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,335 +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(),
-
-        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];
-  }
+	/**
+	 */
+	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",
+			};
+	}
 }
 
 /**
@@ -419,13 +419,13 @@ 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]",
+	);
 }
 
 /**
@@ -435,41 +435,41 @@ function initControlReferences() {
  * @private
  */
 function initEventHandler() {
-  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);
-    }
-  });
+	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);
+		}
+	});
 }
 
 /**
@@ -485,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);
 }
 
 /**
@@ -540,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,
+	};
 }
 
 /**
@@ -638,8 +638,8 @@ function buildPagination(current, max) {
  * @return {string}
  */
 function getTemplate() {
-  // language=HTML
-  return `
+	// language=HTML
+	return `
 
         <template id="items">
             <li part="item"><a part="link"