@schukai/monster 3.86.3 → 3.86.5

package/source/components/datatable/pagination.mjs

@@ -17,7 +17,8 @@ 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";
@@ -51,6 +52,24 @@ const paginationElementSymbol = Symbol.for("paginationElement");
  */
 const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
+
 /**
  * The Pagination component
  *
@@ -148,6 +167,77 @@ class Pagination extends CustomElement {
 		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}
 	 */
@@ -173,6 +263,7 @@ class Pagination extends CustomElement {
 			element.datasource.attachObserver(
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
+
 			handleDataSourceChanges.call(this);
 		}
 	}
@@ -244,6 +335,10 @@ function initEventHandler() {
 			}
 		}
 
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
 		let page = null;
 
 		if (!element.hasAttribute("data-page-no")) {
@@ -264,7 +359,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();
 	});
 }
 
@@ -320,11 +425,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}
@@ -436,17 +548,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/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;
@@ -252,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;
@@ -285,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

@@ -13,6 +13,11 @@
     width: 100%;
 }
 
+[data-monster-role=container] {
+    container-name:  filter;
+    container-type: inline-size;
+}
+
 [data-monster-role=control] {
 
     & .hidden {
@@ -97,38 +102,21 @@
             }
 
             & monster-select {
-                min-width: 350px;
+                min-width: 150px;
             }
-            
+
             & [data-monster-visible=false] {
                 display: none;
             }
         }
 
-        @mixin viewport-12 {
-            & [data-monster-role=select-and-search] {
-                flex-flow: column nowrap;
-                row-gap: 0.5rem;
-                column-gap: 0;
-            }
-        }
-
     }
+    
+}
 
-    @mixin viewport-7 {
-        & [data-monster-role=layout] {
-            flex-flow: column nowrap;
-            row-gap: 0.5rem;
-            column-gap: 0;
-
-            & monster-select {
-                width: 100%;
-            }
-
-        }
-    }
 
-    @mixin viewport-4 {
+@container filter (width < 500px) {
+    & [data-monster-role=control] {
         & [data-monster-role=layout] {
 
             flex-flow: column nowrap;
@@ -143,10 +131,19 @@
                 & ::slotted(label) {
                     min-width: fit-content;
                 }
-                
+
             }
 
             & [data-monster-role=select-and-search] {
+                
+                display: flex;
+                flex-direction: column;
+                row-gap: 0.5rem;
+                column-gap: 0;
+                
+                & monster-message-state-button {
+                    width: 100%;
+                }
 
                 & monster-select {
                     width: 100%;
@@ -156,4 +153,6 @@
             }
         }
     }
-}
+}
+
+

package/source/components/datatable/stylesheet/column-bar.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-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";
 
-export {ColumnBarStyleSheet}
+export { ColumnBarStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {ColumnBarStyleSheet}
 const ColumnBarStyleSheet = new CSSStyleSheet();
 
 try {
-  ColumnBarStyleSheet.insertRule(`
+	ColumnBarStyleSheet.insertRule(
+		`
 @layer columnbar { 
 :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}.monster-button-primary,button{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);outline:none;text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus{outline:1px dashed var(--monster-color-selection-1);outline-offset:2px}@media (prefers-color-scheme:dark){a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-amber-2)}a:focus{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=control]{align-items:center;display:flex;flex-direction:row;justify-content:flex-end}[data-monster-role=control] [data-monster-role=dots]{display:flex;flex-direction:row;justify-content:flex-start;margin:0 15px 0 0;padding:0}:is([data-monster-role=control] [data-monster-role=dots]) li{background-clip:border-box;display:flex;list-style:none;margin:0 5px 0 0;padding:0}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible{background-color:var(--monster-bg-color-primary-4);background-position:50%;background-repeat:no-repeat;background-size:cover;height:8px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%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 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%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 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\");width:8px}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden{background-color:var(--monster-bg-color-primary-4);background-position:50%;background-repeat:no-repeat;background-size:cover;height:8px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%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\");width:8px}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :focus,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :hover{background-clip:border-box}[data-monster-role=control] [data-monster-role=settings-layer]{background-color:var(--monster-bg-color-primary-4);border-radius:4px;color:var(--monster-color-primary-4);display:none;padding:1rem;z-index:var(--monster-z-index-popover)}.visible:is([data-monster-role=control] [data-monster-role=settings-layer]){display:block}:is([data-monster-role=control] [data-monster-role=settings-layer]) label{align-items:center;cursor:pointer;display:flex;justify-content:flex-start;margin:0;padding:0}:is(:is([data-monster-role=control] [data-monster-role=settings-layer]) label) input{accent-color:var(--monster-bg-color-primary-4);margin:0 .5rem 0 0}:is([data-monster-role=control] [data-monster-role=settings-layer]) [data-monster-role=settings-popup-list]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-gap:.1rem 1rem}[data-monster-role=control] a[data-monster-role=settings-button]{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex;white-space:nowrap}:is([data-monster-role=control] a[data-monster-role=settings-button]):after{background-color:var(--monster-color-primary-1);content:\"\";display:block;height:16px;margin:2px 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%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.5zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1zM10 15V1H6v14zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%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.5zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1zM10 15V1H6v14zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11z'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover;padding-top:4px;width:20px}[data-monster-role=control]:hover{color:var(--monster-color-primary-1)}.hidden[data-monster-role=control]{display:none}@container datatable (max-width: 300px){[data-monster-role=control]{align-items:flex-end;flex-direction:column;gap:.5rem}[data-monster-role=control] [data-monster-role=dots]{margin:0}} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }