fix: button with back to 100%; update some minor responsive issues with datatable filter

source/components/datatable/filter.mjs

@@ -25,6 +25,7 @@ import {
     registerCustomElement,
 } from "../../dom/customelement.mjs";
 import {ID} from "../../types/id.mjs";
+import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
 import {Settings} from "./filter/settings.mjs";
 import {FilterStyleSheet} from "./stylesheet/filter.mjs";
 import {getDocument, getWindow} from "../../dom/util.mjs";
@@ -111,6 +112,25 @@ const locationChangeHandlerSymbol = Symbol("locationChangeHandler");
  */
 const settingsSymbol = Symbol("settings");
 
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
+
 /**
  * The Filter component is used to show and handle the filter values.
  *
@@ -181,16 +201,27 @@ class Filter extends CustomElement {
      * @property {Object} templates Template definitions
      * @property {string} templates.main Main template
      * @property {Object} labels Label definitions
-	 * @property {Object} formatter label Template Formatter definitions
-	 * @property {Object} formatter.marker
-	 * @property {Object} formatter.marker.open
-	 * @property {Object} formatter.marker.close
      * @property {string} labels.search Search button label
      * @property {string} labels.reset Reset button label
+     * @property {string} labels.save Save button label
+     * @property {string} labels.filter-name Filter name label
+     * @property {string} labels.empty-query-and-no-default Empty query and no default query label
+     * @property {string} labels.query-not-changed Query not changed label
+     * @property {Object} formatter Formatter definitions
+     * @property {Object} formatter.marker Marker definitions
+     * @property {Object} formatter.marker.open Marker open
+     * @property {Object} formatter.marker.close Marker close
+     * @property {Object} storedConfig Stored configuration
+     * @property {boolean} storedConfig.enabled Enabled
+     * @property {string} storedConfig.selector Selector
+     * @property {Object} timeouts Timeout definitions
+     * @property {number} timeouts.message Message timeout
      * @property {Object} queries Query definitions
-	 * @property {function} queries.wrap Wrap query
-	 * @property {function} queries.join Join queries
+     * @property {Function} queries.wrap Wrap callback
+     * @property {Function} queries.join Join callback
+     * @property {string} query Query
      * @property {string} defaultQuery Default query
+     * @property {boolean} eventProcessing Event processing
      */
     get defaults() {
         return Object.assign({}, super.defaults, {
@@ -303,6 +334,7 @@ class Filter extends CustomElement {
             "hashchange",
             this[locationChangeHandlerSymbol],
         );
+
     }
 
     /**
@@ -404,7 +436,8 @@ function initFilter() {
                 const searchInput = element.firstElementChild;
                 try {
                     searchInput.value = v;
-				} catch (error) {}
+                } catch (error) {
+                }
             }
 
             setting = this[settingsSymbol].get(value);
@@ -613,8 +646,10 @@ function initEventHandler() {
     self[searchButtonElementSymbol].setOption("actions.click", () => {
         doSearch
             .call(self)
-			.then(() => {})
-			.catch((error) => {});
+            .then(() => {
+            })
+            .catch((error) => {
+            });
     });
 
     // the reset button should reset the filter and the search query
@@ -639,18 +674,11 @@ function initEventHandler() {
 
         doSearch
             .call(self, {showEffect: false})
-			.then(() => {})
+            .then(() => {
+            })
             .catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
     });
 
-	self[locationChangeHandlerSymbol] = (event) => {
-		// if (event instanceof HashChangeEvent) {
-		// 	if (event.oldURL === event.newURL) {
-		// 		return;
-		// 	}
-		// }
-	};
-
     self.addEventListener("keyup", (event) => {
         const path = event.composedPath();
         if (path.length === 0) {
@@ -1111,8 +1139,8 @@ function updateConfig() {
  */
 function getTemplate() {
     // language=HTML
-	return `
-        <div data-monster-role="control" part="control">
+    return `<div data-monster-role="control" part="control">
+    <div data-monster-role="container">
         <div data-monster-role="layout">
             <div data-monster-role="filter">
                 <slot></slot>
@@ -1153,6 +1181,7 @@ function getTemplate() {
         <input class="hidden" name="query" data-monster-role="query"
                data-monster-attributes="value path:query">
     </div>
+</div>
     `;
 }
 

source/components/datatable/pagination.mjs

@@ -181,7 +181,6 @@ class Pagination extends CustomElement {
 	 * @return {void}
 	 */
 	connectedCallback() {
-		const self = this;
 		super.connectedCallback();
 
 		const parentNode = this.parentNode;
@@ -191,13 +190,12 @@ class Pagination extends CustomElement {
 
 		const parentParentNode = parentNode?.parentNode || parentNode;
 
-		const parentWidth = parentParentNode.clientWidth;
-		const ownWidth = this.clientWidth;
+		const parentWidth = parentParentNode.offsetWidth;
+		const ownWidth = this.offsetWidth;
 
 		this[sizeDataSymbol] = {
 			last: {
-				parentWidth: parentParentNode.clientWidth || 0,
-				ownWidth: this.clientWidth || 0,
+				parentWidth: parentParentNode.offsetWidth || 0,
 			},
 			showNumbers: ownWidth < parentWidth,
 		};
@@ -215,21 +213,19 @@ class Pagination extends CustomElement {
 					}
 				}
 
-				this[debounceSizeSymbol] = new DeadMansSwitch(400, () => {
+				this[debounceSizeSymbol] = new DeadMansSwitch(250, () => {
 					queueMicrotask(() => {
-						const parentWidth = parentParentNode.clientWidth;
+						const parentWidth = parentParentNode.offsetWidth;
 						const ownWidth = this.clientWidth;
 
 						if (
-							this[sizeDataSymbol]?.last?.parentWidth === parentWidth &&
-							this[sizeDataSymbol]?.last?.ownWidth === ownWidth
+							this[sizeDataSymbol]?.last?.parentWidth === parentWidth
 						) {
 							return;
 						}
 
 						this[sizeDataSymbol].last = {
 							parentWidth: parentWidth,
-							ownWidth: ownWidth,
 						};
 
 						this[sizeDataSymbol].showNumbers = ownWidth < parentWidth;

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 {
@@ -105,30 +110,13 @@
             }
         }
 
-        @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;
@@ -148,6 +136,15 @@
 
             & [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%;
                     min-width: fit-content;
@@ -157,3 +154,5 @@
         }
     }
 }
+
+

source/components/form/action-button.mjs

@@ -170,7 +170,7 @@ class ActionButton extends PopperButton {
 
 /**
  * @private
- * @return {Monster.Components.Form.Popper}
+ * @return {ActionButton}
  */
 function initEventHandler() {
 	this[containerElementSymbol].addEventListener("click", (event) => {
@@ -234,7 +234,7 @@ function updateButtonsI18n() {
 
 /**
  * @private
- * @return {Monster.Components.Form.ActionButton}
+ * @return {ActionButton}
  */
 function initControlReferences() {
 	this[containerElementSymbol] = this.shadowRoot.querySelector(

source/components/form/api-button.mjs

@@ -45,41 +45,10 @@ export { ApiButton };
 const containerElementSymbol = Symbol("containerElement");
 
 /**
- * The ApiButton is a button that opens a popper element with possible actions.
- *
- * <img src="./images/api-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- * as well as [pooperjs](https://popper.js.org/docs/v2/).
- *
- * You can create this control either by specifying the HTML tag <monster-action-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-action-button');` method.
- *
- * ```html
- * <monster-action-button></monster-action-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {PopperButton} from '@schukai/component-form/source/action-button.js';
- * document.createElement('monster-action-button');
- * ```
- *
- * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
- *
- * @startuml api-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Button
- * Button <|-- ActionButton
- * ActionButton <|-- ApiButton
- * @enduml
+ * The ApiButton
  * 
  * @copyright schukai GmbH
- * @summary A button that opens a popper element with possible actions.
+ * @summary The ApiButton is a button that opens a popper element with possible actions.
  */
 
 /**
@@ -204,7 +173,7 @@ class ApiButton extends ActionButton {
 	 * Import buttons from a map.
 	 *
 	 * @param {array|object|Map|Set} data
-	 * @return {Monster.Components.Form.ApiButton}
+	 * @return {ApiButton}
 	 * @throws {Error} map is not iterable
 	 * @throws {Error} missing label configuration
 	 */
@@ -287,7 +256,7 @@ class ApiButton extends ActionButton {
 
 	/**
 	 *
-	 * @return {Monster.Components.Form.Popper}
+	 * @return {ApiButton}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -497,7 +466,7 @@ function fetchData(url) {
 
 /**
  * @private
- * @return {Monster.Components.Form.Popper}
+ * @return {ApiButton}
  */
 function initEventHandler() {
 	this[containerElementSymbol].addEventListener("click", (event) => {
@@ -520,7 +489,7 @@ function initEventHandler() {
 
 /**
  * @private
- * @return {Monster.Components.Form.ApiButton}
+ * @return {ApiButton}
  */
 function initControlReferences() {
 	this[containerElementSymbol] = this.shadowRoot.querySelector(

source/components/form/style/action-button.pcss

@@ -18,6 +18,7 @@
             & button {
                 border: 0;
                 background: transparent;
+                width: 100%;
             }
 
             & monster-message-state-button:not(:last-child) {

source/components/form/style/button.pcss

@@ -11,5 +11,5 @@
 }
 
 button {
-    width: max-content;
+    width: 100%;
 }

source/components/form/style/confirm-button.pcss

@@ -18,5 +18,5 @@ div[data-monster-role="control"] {
 }
 
 button {
-    width: max-content;
+    width: 100%;
 }

source/components/form/style/popper-button.pcss

@@ -6,6 +6,12 @@
 [data-monster-role=control] {
     position: relative;
     display: flex;
+
+
+    & button {
+        width: 100%;
+    }
+
 }
 
 [data-monster-role=button] {
@@ -14,9 +20,4 @@
 
 div[data-monster-role="control"] {
     height: 100%;
-    width: max-content;
-}
-
-button {
-    width: max-content;
 }

source/components/form/style/state-button.pcss

@@ -8,7 +8,7 @@ div[data-monster-role="control"] {
 }
 
 button {
-    width: max-content;
+    width: 100%;
 }
 
 [data-monster-role=button] {