fix: css issues

development/issues/closed/210.mjs

@@ -13,11 +13,14 @@ import "../../../source/components/style/form.pcss";
 
 import "../../../source/components/datatable/datasource/rest.mjs";
 import "../../../source/components/datatable/save-button.mjs";
+
 import "../../../source/components/form/form.mjs";
 import "../../../source/components/form/field-set.mjs";
 import "../../../source/components/form/select.mjs";
 import "../../../source/components/form/context-help.mjs";
 import "../../../source/components/form/context-error.mjs";
+
+
 import {domReady} from "../../../source/dom/ready.mjs";
 
 domReady.then(() => {

development/issues/closed/277.html

@@ -68,9 +68,6 @@
 
         <div slot="bar" class="monster-button-group">
 
-            <div class="row-action-buttons">
-                <monster-button data-monster-role="row-action-button"  id="action-button-1">ACTION</monster-button>
-            </div>
          
             <monster-embedded-pagination data-monster-datasource-selector="#ds277"></monster-embedded-pagination>
             <monster-datasource-status

development/issues/closed/277.mjs

@@ -35,7 +35,7 @@ import "../../../source/components/layout/tabs.mjs";
 import "../../../source/components/datatable/datatable.mjs";
 import "../../../source/components/notify/monitor-attribute-errors.mjs";
 
-const actionButton = document.getElementById("action-button-1")
+//const actionButton = document.getElementById("action-button-1")
 const datatable = document.getElementById("dt277");
 
 const eventHandler = function () {

source/components/datatable/datatable.mjs

@@ -342,7 +342,9 @@ class DataTable extends CustomElement {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 
-		getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+		getSlottedElements
+			.call(this, "[data-monster-role=row-action-button]", "bar")
+			.forEach((i, e) => {
 				if (e instanceof HTMLElement) {
 					e.style.visibility = "hidden";
 					e.style.width = "max-content";
@@ -354,7 +356,7 @@ class DataTable extends CustomElement {
 						pN.style.justifyContent = "flex-start";
 					}
 				}
-		})
+			});
 
 		getHostConfig
 			.call(this, getColumnVisibilityConfigKey)
@@ -887,7 +889,7 @@ function initEventHandler() {
 			return;
 		}
 
-		const parentNode= element.parentNode
+		const parentNode = element.parentNode;
 		if (!(parentNode instanceof HTMLDivElement)) {
 			return;
 		}
@@ -929,13 +931,15 @@ function initEventHandler() {
 			`[data-monster-role="select-all"]`,
 		);
 
-		getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+		getSlottedElements
+			.call(this, "[data-monster-role=row-action-button]", "bar")
+			.forEach((i, e) => {
 				const selected = self.getSelectedRows();
-			const mode = (selected.length === 0) ? "hidden" : "visible";
+				const mode = selected.length === 0 ? "hidden" : "visible";
 				if (e instanceof HTMLElement) {
 					e.style.visibility = mode;
 				}
-		})
+			});
 
 		if (selectAll) {
 			selectAll.checked = allSelected;
@@ -965,12 +969,13 @@ function initEventHandler() {
 				fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
 			}
 
-			getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+			getSlottedElements
+				.call(this, "[data-monster-role=row-action-button]", "bar")
+				.forEach((i, e) => {
 					if (e instanceof HTMLElement) {
 						e.style.visibility = mode ? "visible" : "hidden";
 					}
-			})
-
+				});
 
 			fireCustomEvent(this, "monster-datatable-selection-changed", {});
 		}

source/components/datatable/save-button.mjs

@@ -32,6 +32,7 @@ import { Datasource } from "./datasource.mjs";
 import { Rest as RestDatasource } from "./datasource/rest.mjs";
 import { BadgeStyleSheet } from "../stylesheet/badge.mjs";
 import { SaveButtonStyleSheet } from "./stylesheet/save-button.mjs";
+import "../form/state-button.mjs";
 
 import {
 	handleDataSourceChanges,

source/components/form/action-button.mjs

@@ -90,7 +90,7 @@ class ActionButton extends PopperButton {
 				button: "<slot></slot>",
 			},
 			classes: {
-				button: "monster-button-primary-1",
+				button: "monster-button-primary",
 			},
 			buttons: [],
 		});

source/components/form/button.mjs

@@ -211,7 +211,7 @@ class Button extends CustomControl {
 				button: "<slot></slot>",
 			},
 			classes: {
-				button: "monster-button-primary-1",
+				button: "monster-button-outline-primary",
 			},
 			disabled: false,
 			actions: {

source/components/form/message-state-button.mjs

@@ -161,7 +161,6 @@ class MessageStateButton extends Popper {
 		for (const [, mode] of Object.entries(modes)) {
 			initEventHandlerByMode.call(this, mode);
 		}
-
 	}
 
 	/**

source/components/form/popper-button.mjs

@@ -13,9 +13,7 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import {
-	ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
 	registerCustomElement,
@@ -148,7 +146,6 @@ class PopperButton extends Popper {
 				role: null,
 				label: null,
 			},
-
 		});
 	}
 

source/components/form/state-button.mjs

@@ -80,7 +80,6 @@ class StateButton extends Button {
 				role: null,
 				label: null,
 			},
-
 		});
 	}