@schukai/monster 3.95.2 → 3.96.1

package/source/components/datatable/pagination.mjs

@@ -13,32 +13,32 @@
  */
 
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findElementWithSelectorUpwards, getWindow} from "../../dom/util.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {ThemeStyleSheet} from "../stylesheet/theme.mjs";
-import {ATTRIBUTE_DATASOURCE_SELECTOR} from "./constants.mjs";
-import {Datasource} from "./datasource.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {PaginationStyleSheet} from "./stylesheet/pagination.mjs";
-import {DisplayStyleSheet} from "../stylesheet/display.mjs";
-import {isString} from "../../types/is.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
-import {instanceSymbol} from "../../constants.mjs";
-import {Formatter} from "../../text/formatter.mjs";
+import { findElementWithSelectorUpwards, getWindow } from "../../dom/util.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
+import { Datasource } from "./datasource.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { PaginationStyleSheet } from "./stylesheet/pagination.mjs";
+import { DisplayStyleSheet } from "../stylesheet/display.mjs";
+import { isString } from "../../types/is.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { Formatter } from "../../text/formatter.mjs";
 import "../form/select.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 
 import "./datasource/dom.mjs";
 import "./datasource/rest.mjs";
 
-export {Pagination};
+export { Pagination };
 
 /**
  * @private
@@ -75,223 +75,221 @@ const debounceSizeSymbol = Symbol("debounceSize");
  *
  * @fragments /fragments/components/datatable/pagination
  *
- * @example /examples/components/datatable/pagination-simple
+ * @example /examples/components/datatable/pagination-simple Pagination
  *
  * @copyright schukai GmbH
  * @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: {
-                    page: "${page}",
-                    description: "Page ${page}",
-                    previous: "Previous",
-                    next: "Next",
-                    of: "of",
-                },
-
-                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((entries) => {
-                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: {
+					page: "${page}",
+					description: "Page ${page}",
+					previous: "Previous",
+					next: "Next",
+					of: "of",
+				},
+
+				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((entries) => {
+				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];
+	}
 }
 
 /**
@@ -300,88 +298,88 @@ class Pagination extends CustomElement {
  * @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
  */
 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 === 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 = 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 === 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();
+	});
 }
 
 /**
@@ -397,58 +395,55 @@ 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 = [];
-    }
-
-    getWindow().requestAnimationFrame(() => {
-        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 = [];
+	}
+
+	getWindow().requestAnimationFrame(() => {
+		this.setOption("pagination", pagination);
+	});
 }
 
 /**
@@ -458,92 +453,91 @@ 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("…");
-
-    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("…");
-    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) => {
-        const p = `${item}`;
-        const c = `${current}`;
-
-        const obj = {
-            pageNo: item, // as integer
-            page: p, // as string
-            current: p === c,
-            class: (p === c ? "current" : "").trim(),
-        };
-
-        if (p === "…") {
-            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 =
-            p === "…"
-                ? "#"
-                : 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("…");
+
+	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("…");
+	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) => {
+		const p = `${item}`;
+		const c = `${current}`;
+
+		const obj = {
+			pageNo: item, // as integer
+			page: p, // as string
+			current: p === c,
+			class: (p === c ? "current" : "").trim(),
+		};
+
+		if (p === "…") {
+			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 =
+			p === "…"
+				? "#"
+				: 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,
+	};
 }
 
 /**
@@ -551,8 +545,8 @@ 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,
                                             href path:items.href,