fix: filter init, form readonly

development/config/import.mjs

 export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
 export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
 export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
-export const pnpxBin = "/nix/store/zp7k4i6w42mmi43cjmbyv8x8v3mgp1ck-pnpm-9.15.2/bin/pnpx";
+export const pnpxBin = "/nix/store/by7hqplbckljzzsq6jpmcjp1w4jzvxpg-pnpm-9.15.3/bin/pnpx";
 export const nodeBin = "/nix/store/hnkyz55vndmvwhg6nzpliv86gh6sxg7h-nodejs-22.10.0/bin/node";
 export const license = "/**" + "\n" +
     " * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\n" +

development/issues/closed/277.html

@@ -15,7 +15,7 @@
 </ul>
 <main>
 
-    <!--monster-host><monster-config-manager></monster-config-manager></monster-host -->
+    <monster-host><monster-config-manager></monster-config-manager></monster-host>
     <monster-notify data-monster-option-orientation="bottom right"></monster-notify>
     <monster-monitor-attribute-errors
             data-monster-option-features-notifyUser="false"

flake.lock

@@ -168,11 +168,11 @@
     },
     "nixpkgs_3": {
       "locked": {
-        "lastModified": 1735922141,
-        "narHash": "sha256-vk0xwGZSlvZ/596yxOtsk4gxsIx2VemzdjiU8zhjgWw=",
+        "lastModified": 1736200483,
+        "narHash": "sha256-JO+lFN2HsCwSLMUWXHeOad6QUxOuwe9UOAF/iSl1J4I=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "d29ab98cd4a70a387b8ceea3e930b3340d41ac5a",
+        "rev": "3f0a8ac25fb674611b98089ca3a5dd6480175751",
         "type": "github"
       },
       "original": {
@@ -261,11 +261,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1716914109,
-        "narHash": "sha256-JY0PLGWzYRDQ9daKLGOBWHHuYun9nSpH9J3aSk8iDmQ=",
+        "lastModified": 1736378864,
+        "narHash": "sha256-7JSw/0AbjzM9jdkJQILEHKq8hjfTDB1tHJPLDI2oLVo=",
         "ref": "refs/heads/master",
-        "rev": "fe8dd932d6c414a93b4a69c470792b2db038e0fb",
-        "revCount": 129,
+        "rev": "b721b3d463b9f796b7652df59de975a362cc7542",
+        "revCount": 130,
         "type": "git",
         "url": "https://gitlab.schukai.com/oss/utilities/version.git"
       },

package.json

@@ -50,7 +50,7 @@
     "@playwright/test": "^1.49.1",
     "@roarr/cli": "^5.12.4",
     "autoprefixer": "^10.4.20",
-    "browserslist": "^4.24.3",
+    "browserslist": "^4.24.4",
     "btoa": "^1.2.1",
     "c8": "^10.1.3",
     "chai": "^5.1.2",
@@ -64,7 +64,7 @@
     "estraverse": "^5.3.0",
     "flow-bin": "^0.247.1",
     "fs": "0.0.1-security",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "graphviz": "^0.0.9",
     "jsdom": "^25.0.1",
     "jsdom-global": "^3.0.2",

source/components/datatable/datatable.mjs

@@ -136,7 +136,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @example /examples/components/datatable/datasource Use a datasource
  * @example /examples/components/datatable/pagination Use pagination
  * @example /examples/components/datatable/filter Filer the data
- * @example /examples/components/datatable/order-by Order the data
+ * @example /examples/components/datatable/order-by Sort data
  * @example /examples/components/datatable/select-rows Select rows
  *
  * @copyright schukai GmbH
@@ -1348,7 +1348,7 @@ function initControlReferences() {
  * @throws {Error} the datasource could not be initialized
  */
 function initOptionsFromArguments() {
-	const options = {};
+	const options = {datasource:{}};
 	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
 
     if (selector) {

source/components/datatable/filter.mjs

@@ -63,6 +63,7 @@ import "../form/toggle-switch.mjs";
 import "../form/context-help.mjs";
 import "../form/context-error.mjs";
 import "../form/message-state-button.mjs";
+
 import {getLocaleOfDocument} from "../../dom/locale.mjs";
 
 export {Filter};
@@ -329,11 +330,14 @@ class Filter extends CustomElement {
         super[assembleMethodSymbol]();
 
         initControlReferences.call(this);
+        getWindow().requestAnimationFrame(() => {
             initEventHandler.call(this);
+        });
 
         initFromConfig
             .call(this)
-			.then(() => {})
+            .then(() => {
+            })
             .catch((error) => {
                 addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
             })
@@ -345,7 +349,8 @@ class Filter extends CustomElement {
                     .then(() => {
                         fireCustomEvent(this, "monster-filter-initialized");
                     })
-					.catch(() => {});
+                    .catch(() => {
+                    });
             });
     }
 
@@ -589,7 +594,8 @@ function initFilter() {
                 const searchInput = element.firstElementChild;
                 try {
                     searchInput.value = v;
-				} catch (error) {}
+                } catch (error) {
+                }
             }
 
             setting = this[settingsSymbol].get(value);
@@ -675,8 +681,10 @@ function initEventHandler() {
 
         doSearch
             .call(self)
-			.then(() => {})
-			.catch((error) => {})
+            .then(() => {
+            })
+            .catch((error) => {
+            })
             .finally(() => {
                 lastHash = getGlobal().location.hash;
             });
@@ -829,8 +837,10 @@ function initEventHandler() {
 
         doSearch
             .call(self)
-			.then(() => {})
-			.catch((error) => {});
+            .then(() => {
+            })
+            .catch((error) => {
+            });
     });
 
     // the reset button should reset the filter and the search query
@@ -855,7 +865,8 @@ function initEventHandler() {
 
         doSearch
             .call(self, {showEffect: false})
-			.then(() => {})
+            .then(() => {
+            })
             .catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
     });
 
@@ -872,8 +883,10 @@ function initEventHandler() {
         if (event.keyCode === 13) {
             doSearch
                 .call(self, {showEffect: false})
-				.then(() => {})
-				.catch((error) => {});
+                .then(() => {
+                })
+                .catch((error) => {
+                });
         }
     });
 

source/components/style/form.css

@@ -46,3 +46,11 @@ textarea:focus {
 	outline: 1px dashed var(--monster-color-selection-3);
 	outline-offset: 3px;
 }
+
+input[readonly]:not([type="checkbox"]):not([type="radio"]),
+select[readonly],
+textarea[readonly] {
+	background-color: var(--monster-bg-color-primary-2);
+	color: var(--monster-color-primary-2);
+	cursor: default;
+}