@schukai/monster 3.51.4 → 3.52.0

package/source/components/datatable/namespace.mjs

@@ -0,0 +1,11 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * @namespace Monster.Components.Datatable
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/datatable/pagination.mjs

@@ -0,0 +1,456 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	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 "../form/select.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+
+import "./datasource/dom.mjs";
+import "./datasource/rest.mjs";
+
+export { Pagination };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const paginationElementSymbol = Symbol.for("paginationElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
+
+/**
+ * The Pagination component is used to show the current page and the total number of pages.
+ *
+ * <img src="./images/pagination.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-pagination />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-pagination');` method.
+ *
+ * ```html
+ * <monster-pagination></monster-pagination>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/pagination.mjs';
+ * document.createElement('monster-pagination');
+ * ```
+ *
+ * @startuml pagination.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Pagination
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @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];
+	}
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	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();
+	});
+}
+
+/**
+ * This attribute can be used to pass a URL to this select.
+ *
+ * ```
+ * <monster-form data-monster-datasource="restapi:....."></monster-form>
+ * ```
+ *
+ * @private
+ * @return {object}
+ * @throws {TypeError} incorrect arguments passed for the datasource
+ * @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 };
+	}
+
+	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);
+}
+
+/**
+ *
+ * @param current
+ * @param max
+ * @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,
+	};
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="items">
+            <li><a data-monster-attributes="class path:items.class,
+                                            href path:items.href,
+                                            aria-label path:items.description,
+                                            disabled path:items.disabled:?disabled:undefined,
+                                            data-page-no path:items.pageNo,
+                                            aria-current path:items.current"
+                   data-monster-role="pagination-item"
+                   data-monster-replace="path:items.label"></a></li>
+        </template>
+
+        <div data-monster-role="control">
+            <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
+                <ul class="pagination-list" data-monster-insert="items path:pagination.items"
+                    data-monster-select-this="true">
+                    <li part="pagination-prev"><a data-monster-role="pagination-prev"
+                                                  data-monster-attributes="
+            class path:pagination.prevClass | prefix: previous,
+            data-page-no path:pagination.prevNo,
+            href path:pagination.prevHref | prefix: #"
+                                                  data-monster-replace="path:labels.previous">Previous</a></li>
+                    <li part="pagination-next"><a data-monster-role="pagination-next"
+                                                  data-monster-attributes="class path:pagination.nextClass | prefix: next,
+            data-page-no path:pagination.nextNo,
+        href path:pagination.nextHref | prefix: #"
+                                                  data-monster-replace="path:labels.next">Next</a></li>
+                </ul>
+            </nav>
+        </div>
+    `;
+}
+
+registerCustomElement(Pagination);

package/source/components/datatable/style/column-bar.pcss

@@ -0,0 +1,123 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+
+[data-monster-role=control] {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    & [data-monster-role=dots] {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        padding: 0;
+        margin: 0 15px 0 0;
+        //margin-left: 10px;
+
+        & li {
+            list-style: none;
+            padding: 0;
+            margin: 0 5px 0 0;
+            display: flex;
+            background-clip: border-box;
+            
+            & .is-visible {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
+                background-repeat: no-repeat no-repeat;
+                background-position: center center;
+                background-size: cover;
+                width: 8px;
+                height: 8px;
+            }
+            
+            & .is-hidden {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
+                background-repeat: no-repeat no-repeat;
+                background-position: center center;
+                background-size: cover;
+                width: 8px;
+                height: 8px;
+            }
+            
+            & :hover, & :focus {
+                background-clip: border-box;
+            }
+            
+            
+        }
+
+
+
+    }
+
+    & [data-monster-role=settings-layer] {
+
+        background-color: var(--monster-bg-color-primary-4);
+        color: var(--monster-color-primary-4);
+        padding: 1rem;
+        border-radius: 4px;        
+        z-index: var(--monster-z-index-popover);
+        display: none;
+        
+        &.visible {
+            display: block;
+        }
+        
+        & label {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin: 0;
+            padding: 0;
+            cursor: pointer;
+            
+            & input {
+                accent-color: var(--monster-bg-color-primary-4);
+                margin: 0 0.5rem 0 0;
+            }
+        }
+        
+        & [data-monster-role=settings-popup-list] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+            grid-gap: 0.1rem 1rem;
+
+        }
+        
+    }
+    
+
+    & a[data-monster-role=settings-button] {
+        display: flex;
+        align-items: center;
+
+        color: var(--monster-color-primary-1);
+        background: none;
+
+        &:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z'/%3E%3C/svg%3E");
+            margin: 2px 3px 0 5px;
+            padding-top: 4px;
+        }
+
+
+    }
+
+    &:hover {
+        color: var(--monster-color-primary-1);
+    }
+    
+    
+    &.hidden {
+        display: none;
+    }
+
+}

package/source/components/datatable/style/dataset.pcss

@@ -0,0 +1,13 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+@import "../../style/badge.pcss";
+@import "../../style/link.pcss";
+
+

package/source/components/datatable/style/datasource.pcss

@@ -0,0 +1,16 @@
+
+
+:host {
+    display: none;
+}
+
+:host(.intersection-observer) {
+    display: block;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+
+
+