@schukai/monster 3.55.0 → 3.55.1

package/source/components/datatable/pagination.mjs

@@ -4,32 +4,32 @@
  */
 
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.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 {EmbeddedPaginationStyleSheet} from "./stylesheet/embedded-pagination.mjs";
-import {PaginationStyleSheet} from "./stylesheet/pagination.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 { EmbeddedPaginationStyleSheet } from "./stylesheet/embedded-pagination.mjs";
+import { PaginationStyleSheet } from "./stylesheet/pagination.mjs";
 //import {SpinnerStyleSheet} from "../stylesheet/spinner.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 { 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
@@ -76,144 +76,143 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
  * @summary A datatable
  */
 class Pagination extends CustomElement {
-    /**
-     */
-    constructor() {
-        super();
-        this[datasourceLinkedElementSymbol] = null;
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {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 {int} offset Current offset
-     * @property {int} nextOffset Next offset
-     * @property {int} prevOffset Previous offset
-     * @property {int} objectsPerPage Number of objects per page
-     * @property {int} currentPage Current page
-     * @property {int} pages Total number of pages
-     * @property {int} total Total number of objects
-     */
-    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",
-                },
-
-                // classes: {
-                //     // spinner: "monster-spinner monster-theme-primary-3",
-                //     // spinnerContainer: "monster-theme-primary-1 ",
-                //     // error: "monster-theme-error-2 monster-bg-color-primary-2",
-                //     // errorContainer: "monster-theme-primary-1",
-                // },
-
-                // state: {
-                //     // spinner: false,
-                //     // error: false,
-                // },
-
-                pagination: {
-                    items: [],
-                },
-            },
-            initOptionsFromArguments.call(this),
-        );
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-pagination";
-    }
-
-    /**
-     *
-     * @return {Monster.Components.Form.Form}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-
-        const selector = this.getOption("datasource.selector", "");
-
-        if (isString(selector)) {
-            const elements = document.querySelectorAll(selector);
-            if (elements.length !== 1) {
-                throw new Error("the selector must match exactly one element");
-            }
-
-            const element = elements[0];
-            if (!(element instanceof Datasource)) {
-                throw new TypeError("the element must be a datasource");
-            }
-
-            this[datasourceLinkedElementSymbol] = element;
-            element.datasource.attachObserver(
-                new Observer(handleDataSourceChanges.bind(this)),
-            );
-        }
-
-    }
-
-    /**
-     * @private
-     * @returns {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.
+	 * @returns {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 {int} offset Current offset
+	 * @property {int} nextOffset Next offset
+	 * @property {int} prevOffset Previous offset
+	 * @property {int} objectsPerPage Number of objects per page
+	 * @property {int} currentPage Current page
+	 * @property {int} pages Total number of pages
+	 * @property {int} total Total number of objects
+	 */
+	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",
+				},
+
+				// classes: {
+				//     // spinner: "monster-spinner monster-theme-primary-3",
+				//     // spinnerContainer: "monster-theme-primary-1 ",
+				//     // error: "monster-theme-error-2 monster-bg-color-primary-2",
+				//     // errorContainer: "monster-theme-primary-1",
+				// },
+
+				// state: {
+				//     // spinner: false,
+				//     // error: false,
+				// },
+
+				pagination: {
+					items: [],
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-pagination";
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+
+		const selector = this.getOption("datasource.selector", "");
+
+		if (isString(selector)) {
+			const elements = document.querySelectorAll(selector);
+			if (elements.length !== 1) {
+				throw new Error("the selector must match exactly one element");
+			}
+
+			const element = elements[0];
+			if (!(element instanceof Datasource)) {
+				throw new TypeError("the element must be a datasource");
+			}
+
+			this[datasourceLinkedElementSymbol] = element;
+			element.datasource.attachObserver(
+				new Observer(handleDataSourceChanges.bind(this)),
+			);
+		}
+	}
+
+	/**
+	 * @private
+	 * @returns {CSSStyleSheet}
+	 */
+	static getControlCSSStyleSheet() {
+		return PaginationStyleSheet;
+	}
+
+	/**
+	 *
+	 * @return [CSSStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [this.getControlCSSStyleSheet(), DisplayStyleSheet, ThemeStyleSheet];
+	}
 }
 
 /**
@@ -222,73 +221,73 @@ 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;
-                }
-            }
-        }
-
-        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;
-        }
-
-        datasource.setParameters({page}).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;
+				}
+			}
+		}
+
+		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;
+		}
+
+		datasource.setParameters({ page }).reload();
+	});
 }
 
 /**
@@ -304,46 +303,46 @@ 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"),
-    );
-    this.setOption("pagination", pagination);
+	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"),
+	);
+	this.setOption("pagination", pagination);
 }
 
 /**
@@ -353,88 +352,88 @@ function handleDataSourceChanges() {
  * @returns  {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,
-    };
+	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,
+	};
 }
 
 /**
@@ -442,8 +441,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,