@schukai/monster 3.86.2 → 3.86.4

package/source/components/datatable/pagination.mjs

@@ -17,16 +17,15 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards } from "../../dom/util.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 { 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";
@@ -54,33 +53,28 @@ const paginationElementSymbol = Symbol.for("paginationElement");
 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">
- *
- * 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
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
+
+/**
+ * The Pagination component
  *
  * @copyright schukai GmbH
- * @summary A datatable
+ * @summary The Pagination component is used to show the current page and the total number of pages.
  */
 class Pagination extends CustomElement {
 	/**
@@ -106,13 +100,23 @@ class Pagination extends CustomElement {
 	 *
 	 * @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
+	 * @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(
@@ -147,18 +151,6 @@ class Pagination extends CustomElement {
 					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: [],
 				},
@@ -176,8 +168,82 @@ class Pagination extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return {Monster.Components.Form.Form}
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+		}
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		const self = this;
+		super.connectedCallback();
+
+		const parentNode = this.parentNode;
+		if (!parentNode) {
+			return;
+		}
+
+		const parentParentNode = parentNode?.parentNode || parentNode;
+
+		const parentWidth = parentParentNode.clientWidth;
+		const ownWidth = this.clientWidth;
+
+		this[sizeDataSymbol] = {
+			last: {
+				parentWidth: parentParentNode.clientWidth || 0,
+				ownWidth: this.clientWidth || 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(400, () => {
+					queueMicrotask(() => {
+						const parentWidth = parentParentNode.clientWidth;
+						const ownWidth = this.clientWidth;
+
+						if (
+							this[sizeDataSymbol]?.last?.parentWidth === parentWidth &&
+							this[sizeDataSymbol]?.last?.ownWidth === ownWidth
+						) {
+							return;
+						}
+
+						this[sizeDataSymbol].last = {
+							parentWidth: parentWidth,
+							ownWidth: ownWidth,
+						};
+
+						this[sizeDataSymbol].showNumbers = ownWidth < parentWidth;
+						handleDataSourceChanges.call(this);
+					});
+				});
+			});
+
+			this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
+		}, 500);
+	}
+
+	/**
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -201,6 +267,8 @@ class Pagination extends CustomElement {
 			element.datasource.attachObserver(
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
+
+			handleDataSourceChanges.call(this);
 		}
 	}
 
@@ -213,8 +281,7 @@ class Pagination extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return [CSSStyleSheet]
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [this.getControlCSSStyleSheet(), DisplayStyleSheet, ThemeStyleSheet];
@@ -272,6 +339,10 @@ function initEventHandler() {
 			}
 		}
 
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
 		let page = null;
 
 		if (!element.hasAttribute("data-page-no")) {
@@ -292,7 +363,17 @@ function initEventHandler() {
 			return;
 		}
 
-		datasource.setParameters({ page }).reload();
+		if (typeof datasource.setParameters !== "function") {
+			return;
+		}
+
+		datasource.setParameters({ page });
+
+		if (typeof datasource.reload !== "function") {
+			return;
+		}
+
+		datasource.reload();
 	});
 }
 
@@ -348,11 +429,18 @@ function handleDataSourceChanges() {
 		this.getOption("currentPage"),
 		this.getOption("pages"),
 	);
-	this.setOption("pagination", pagination);
+
+	if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+		pagination.items = [];
+	}
+
+	getWindow().requestAnimationFrame(() => {
+		this.setOption("pagination", pagination);
+	});
 }
 
 /**
- *
+ * @private
  * @param current
  * @param max
  * @return  {object}
@@ -464,17 +552,19 @@ function getTemplate() {
             <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="
+                    <li part="pagination-prev" data-monster-role="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-monster-replace="path:labels.previous">Previous</a></li>
+                    <li part="pagination-next" data-monster-role="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>
+                            data-monster-replace="path:labels.next">Next</a></li>
                 </ul>
             </nav>
         </div>

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

@@ -97,16 +97,20 @@
     & a[data-monster-role=settings-button] {
         display: flex;
         align-items: center;
-
         color: var(--monster-color-primary-1);
         background: none;
-
         white-space: nowrap;
 
         &: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");
+            content: "";
+            display: block;
+            width: 20px;
+            height: 16px;
             margin: 2px 3px 0 5px;
             padding-top: 4px;
+            background-color: var(--monster-color-primary-1); 
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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' fill='%23000'/%3E%3C/svg%3E");
+            mask-size: cover;
         }
     }
 

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

@@ -18,12 +18,6 @@
 @import "../../style/theme.pcss";
 @import "../../style/skeleton.pcss";
 
-[data-monster-role="control"] {
-    container-type: inline-size ;
-    container-name: datatable;
-    @mixin text;
-} 
-
 ::slotted(monster-collapse) {
     --monster-color-gradient-1: none;
     --monster-color-gradient-2: none;
@@ -188,20 +182,40 @@
         max-width: 100%;
 
         & a[data-monster-sortable]: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 fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
-            margin: 0 3px 0 5px
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin: 0 3px 0 5px;
+            background-color: var(--monster-color-primary-1);
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
+            mask-size: cover;
         }
 
         & a[data-monster-sortable~=DESC i]: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 fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin: 0 3px 0 5px;
+            background-color: var(--monster-color-primary-1);
+            mask-image: 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 fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
+            mask-size: cover;
         }
 
         & a[data-monster-sortable~=ASC i]: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 fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin: 0 3px 0 5px;
+            background-color: var(--monster-color-primary-1);
+            mask-image: 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 fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
+            mask-size: cover;
         }
-
     }
 
+
     & .flex-start {
         justify-content: flex-start;
     }
@@ -232,15 +246,14 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
     padding: var(--monster-space-7) 0;
 }
 
-
-@container datatable (max-width: 900px) {
+[data-monster-role="control"].small {
 
 
-    [data-monster-role="datatable-headers"] {
+    & [data-monster-role="datatable-headers"] {
         display: none;
     }
 
-    [data-monster-role="table-container"] {
+    & [data-monster-role="table-container"] {
 
         & .bar {
             display: flex;
@@ -265,7 +278,7 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         }
     }
 
-    ::slotted(.monster-button-group) {
+    & ::slotted(.monster-button-group) {
         display: flex;
         flex-direction: column !important;
     }

package/source/components/datatable/style/embedded-pagination.pcss

@@ -7,6 +7,8 @@
 @import "../../style/control.pcss";
 @import "../../style/property.pcss";
 
+
+
 [data-monster-role=pagination] {
     @mixin text;
     display: flex;
@@ -15,21 +17,27 @@
 
     & ul {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         justify-content: center;
         align-items: center;
         list-style: none;
 
         padding-left: 0;
         margin: 20px 0;
+        
 
     }
 
     & ul li {
 
         margin: 0;
-        border-left: solid 1px black;
+        border-left: solid 1px var(--monster-theme-control-border-color);
         padding: 0 10px;
+        
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
 
         & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
             width: max-content;
@@ -73,7 +81,7 @@
         }
     }
 
-    @mixin viewport-7 { 
+    @mixin viewport-7 {
 
         & ul li {
             padding: 0 2px;
@@ -92,67 +100,14 @@
         }
 
     }
- /*   
-    & [data-monster-error-state=hidden] {
-        display: none;
-    }
-
-    & [data-monster-loading-state=hidden] {
-        display: none;
-    }
-*/
-/**    & .pagination-loading-state {
-        align-items: center;
-        display: flex;
 
-        &.hidden {
-            display: none;
-        }
 
-    }
+}
 
-    & .pagination-error-state {
-        align-items: center;
-        display: flex;
 
-        &.hidden {
-            display: none;
-        }
-    & .state-icon-container {
-        width:2em;
-        height:2em;
-        margin:0 5px 0 2px;
+@container (min-width: 800px) {
+    [data-monster-role=pagination] {
+        background-color: red;
+        color: red;
     }
-    }*/
-/*
-    & .pagination-state {
-        display: flex !important;
-        flex-wrap: nowrap;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        
-        & [data-monster-error-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        & [data-monster-loading-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
-        }
-        
-        
-    }*/
-    
-
-    
-
 }
-

package/source/components/datatable/style/filter-button.pcss

@@ -5,18 +5,21 @@
 
 
 [data-monster-role="control"] {
-
     & a {
         display: flex;
         align-items: center;
-
-        color: var(--monster-color-primary-1);
         background: none;
+        color: var(--monster-color-primary-1);
 
         &:after {
-            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-            margin: 2px 3px 0 5px;
-            padding-top: 4px;
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background-color: var(--monster-color-primary-1);
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            mask-size: cover;
+            margin: 0 3px 0 5px;
         }
     }
-}
+}

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

@@ -97,7 +97,7 @@
             }
 
             & monster-select {
-                min-width: 350px;
+                min-width: 150px;
             }
             
             & [data-monster-visible=false] {

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

@@ -51,33 +51,7 @@
             cursor: not-allowed;
         }
     }
-    /*
-    & .pagination-loading-state {
-        align-items: center;
-        display: flex;
-        
-        &.hidden {
-            display: none;
-        }
-        
-    }
-    
-
-    & .pagination-error-state {
-        align-items: center;
-        display: flex;
-        
-        &.hidden {
-            display: none;
-        }
-        
-    }
     
-    & .state-icon-container {
-        width:2em;
-        height:2em;
-        margin:0 5px 0 2px;
-    }*/
     
 }