@schukai/monster 3.95.0 → 3.95.2

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
@@ -71,215 +71,227 @@ const sizeDataSymbol = Symbol("sizeData");
 const debounceSizeSymbol = Symbol("debounceSize");
 
 /**
- * The Pagination component
+ * A Pagination component
+ *
+ * @fragments /fragments/components/datatable/pagination
+ *
+ * @example /examples/components/datatable/pagination-simple
  *
  * @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
-	 * @property {Object} pagination Pagination
-	 */
-	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}",
-
-				currentPage: undefined,
-				pages: undefined,
-				objectsPerPage: 20,
-
-				mapping: {
-					pages: "sys.pagination.pages",
-					objectsPerPage: "sys.pagination.objectsPerPage",
-					currentPage: "sys.pagination.currentPage",
-				},
-
-				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;
-		}
-
-		const parentParentNode = parentNode?.parentNode || parentNode;
-
-		const parentWidth = parentParentNode.offsetWidth;
-		const ownWidth = this.offsetWidth;
-
-		this[sizeDataSymbol] = {
-			last: {
-				parentWidth: parentParentNode.offsetWidth || 0,
-			},
-			showNumbers: ownWidth < parentWidth,
-		};
-
-		handleDataSourceChanges.call(this);
-
-		setTimeout(() => {
-			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);
-		}, 500);
-	}
-
-	/**
-	 * @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)),
-			);
-
-			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];
+    }
 }
 
 /**
@@ -288,87 +300,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");
-		event.preventDefault();
-
-		if (
-			!page ||
-			page === "" ||
-			page === null ||
-			page === undefined ||
-			page === "undefined" ||
-			page === "null"
-		) {
-			return;
-		}
-
-		if (typeof datasource.setParameters !== "function") {
-			return;
-		}
-
-		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();
+    });
 }
 
 /**
@@ -384,53 +397,58 @@ 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");
-	for (const key in mapping) {
-		const path = mapping[key];
-
-		let value;
-		try {
-			value = new Pathfinder(this[datasourceLinkedElementSymbol].data).getVia(
-				path,
-			);
-			this.setOption(key, value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-		}
-	}
-
-	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);
+    });
 }
 
 /**
@@ -440,88 +458,92 @@ function handleDataSourceChanges() {
  * @return  {object}
  */
 function buildPagination(current, max) {
-	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,
+    };
 }
 
 /**
@@ -529,8 +551,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,