@schukai/monster 3.53.0 → 3.55.0

package/source/components/datatable/pagination.mjs

@@ -4,28 +4,32 @@
  */
 
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
 } from "../../dom/customelement.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 { isString } from "../../types/is.mjs";
-import { Pathfinder } from "../../data/pathfinder.mjs";
-import { instanceSymbol } from "../../constants.mjs";
-import { Formatter } from "../../text/formatter.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 "../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
@@ -72,123 +76,144 @@ 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",
-				},
-
-				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)),
-			);
-		}
-	}
-
-	/**
-	 *
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [PaginationStyleSheet];
-	}
+    /**
+     */
+    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];
+    }
 }
 
 /**
@@ -197,73 +222,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();
+    });
 }
 
 /**
@@ -279,46 +304,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);
 }
 
 /**
@@ -328,88 +353,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,
+    };
 }
 
 /**
@@ -417,8 +442,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,