@schukai/monster 4.125.3 → 4.127.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 
 
+## [4.127.0] - 2026-03-14
+
+### Add Features
+
+- **button-bar:** add right alignment option
+### Bug Fixes
+
+- update css
+
+
+
+## [4.126.0] - 2026-03-13
+
+### Add Features
+
+- Increase timeout for Pagination tests
+- **conversion:** use field layout classes in wizard example ([#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387))
+- **conversion:** add reusable field layout classes ([#388](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/388))
+- **conversion:** add reusable wizard control ([#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387))
+### Bug Fixes
+
+- **field-set:** remove border inside wizard panels
+- **wizard:** hide back button on first panel
+### Changes
+
+- work in progress
+- Close issue [#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387) and move files
+
+
+
 ## [4.125.3] - 2026-03-11
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.125.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.127.0"}

package/source/components/form/button-bar.mjs

@@ -35,6 +35,7 @@ import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import { getDocument } from "../../dom/util.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
+import { Observer } from "../../types/observer.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
 import { positionPopper } from "./util/floating-ui.mjs";
@@ -132,6 +133,12 @@ const layoutStateSymbol = Symbol("layoutState");
  */
 const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_LAYOUT_ALIGNMENT = "data-monster-layout-alignment";
+
 /**
  * A button bar control.
  *
@@ -171,6 +178,9 @@ class ButtonBar extends CustomElement {
 				main: getTemplate(),
 			},
 			labels: {},
+			layout: {
+				alignment: "left",
+			},
 			popper: {
 				placement: "left",
 				middleware: ["autoPlacement", "shift", "offset:5"],
@@ -203,6 +213,12 @@ class ButtonBar extends CustomElement {
 		// setup structure
 		initButtonBar.call(this);
 		initPopperSwitch.call(this);
+		applyLayoutAlignment.call(this);
+		this.attachObserver(
+			new Observer(() => {
+				applyLayoutAlignment.call(this);
+			}),
+		);
 	}
 
 	/**
@@ -846,6 +862,27 @@ function updatePopper() {
 	);
 }
 
+/**
+ * @private
+ */
+function applyLayoutAlignment() {
+	if (!(this[buttonBarElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	const alignment = this.getOption("layout.alignment", "left");
+
+	if (alignment === "right") {
+		this[buttonBarElementSymbol].setAttribute(
+			ATTRIBUTE_LAYOUT_ALIGNMENT,
+			"right",
+		);
+		return;
+	}
+
+	this[buttonBarElementSymbol].setAttribute(ATTRIBUTE_LAYOUT_ALIGNMENT, "left");
+}
+
 /**
  * @private
  * @return {Select}

package/source/components/form/style/button-bar.pcss

@@ -12,6 +12,11 @@ div[data-monster-role="control"] {
     & [data-monster-role=button-bar] {
         display: flex;
         flex-direction: row;
+        justify-content: flex-start;
+
+        &[data-monster-layout-alignment="right"] {
+            justify-content: flex-end;
+        }
         
         & :not(slot[name=button]) {
             display: flex;
@@ -54,4 +59,3 @@ div[data-monster-role="control"] {
 
 
 }
-

package/source/components/form/style/field-layout.pcss

@@ -0,0 +1,350 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+@import "../../style/form.pcss";
+@import "../../style/control.pcss";
+@import "../../style/badge.pcss";
+@import '../../style/mixin/typography.pcss';
+
+.monster-field-layout {
+    container-type: inline-size;
+    container-name: field-layout;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 0.8rem;
+    accent-color: var(--monster-color-secondary-2);
+    --monster-field-set-h1-size: xx-large;
+    --monster-field-set-h2-size: x-large;
+    --monster-field-set-h3-size: large;
+    --monster-field-set-h4-size: medium;
+    --monster-field-set-h5-size: small;
+    --monster-field-set-h6-size: smaller;
+    --monster-field-set-heading-margin-top: 1rem;
+    --monster-field-set-heading-margin-top-first: 0.3rem;
+    --monster-field-set-heading-margin-top-1200: 2.2rem;
+    --monster-field-set-heading-margin-top-first-1200: 0.6rem;
+    --monster-field-set-heading-margin-top-900: 1.8rem;
+    --monster-field-set-heading-margin-top-first-900: 0.5rem;
+    --monster-field-set-heading-margin-top-500: 1.3rem;
+    --monster-field-set-heading-margin-top-first-500: 0.4rem;
+    @mixin text;
+}
+
+.monster-field-layout.multiple-columns {
+    grid-template-columns: auto 1fr auto 1fr auto 1fr;
+}
+
+.monster-field-layout > label,
+.monster-field-layout > .label {
+    color: var(--monster-color-primary-1);
+    border-bottom: thin dotted var(--monster-color-primary-1);
+    display: flex;
+    align-items: flex-start;
+    gap: 0.4rem;
+    justify-content: space-between;
+}
+
+.monster-field-layout > hr,
+.monster-field-layout > h1,
+.monster-field-layout > h2,
+.monster-field-layout > h3,
+.monster-field-layout > h4,
+.monster-field-layout > h5,
+.monster-field-layout > h6 {
+    grid-column: 1 / -1;
+    margin: var(--monster-field-set-heading-margin-top, 1rem) 0 0.1rem;
+}
+
+.monster-field-layout > h1 {
+    font-size: var(--monster-field-set-h1-size, xx-large);
+}
+
+.monster-field-layout > h2 {
+    font-size: var(--monster-field-set-h2-size, x-large);
+}
+
+.monster-field-layout > h3 {
+    font-size: var(--monster-field-set-h3-size, large);
+}
+
+.monster-field-layout > h4 {
+    font-size: var(--monster-field-set-h4-size, medium);
+}
+
+.monster-field-layout > h5 {
+    font-size: var(--monster-field-set-h5-size, small);
+}
+
+.monster-field-layout > h6 {
+    font-size: var(--monster-field-set-h6-size, smaller);
+}
+
+.monster-field-layout > h1:first-of-type,
+.monster-field-layout > h2:first-of-type,
+.monster-field-layout > h3:first-of-type,
+.monster-field-layout > h4:first-of-type,
+.monster-field-layout > h5:first-of-type {
+    margin-top: var(--monster-field-set-heading-margin-top-first, 0.3rem);
+}
+
+.monster-field-layout > hr {
+    border: none;
+    border-top: thin dotted var(--monster-color-gray-3);
+    margin: 1rem 0;
+    padding: 0;
+}
+
+.monster-field-layout > hr.delimiter {
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+.monster-field-layout > .grid-span-full {
+    grid-column-end: -1;
+}
+
+.monster-field-layout > .grid-start-1 {
+    grid-column-start: 1;
+}
+
+.monster-field-layout > .grid-start-2 {
+    grid-column-start: 2;
+}
+
+.monster-field-layout > .grid-start-3 {
+    grid-column-start: 3;
+}
+
+.monster-field-layout > .grid-start-4 {
+    grid-column-start: 4;
+}
+
+.monster-field-layout > .grid-double-span {
+    grid-column: span 3;
+}
+
+.monster-field-layout > .grid-to-end {
+    grid-column-end: -1;
+}
+
+.monster-field-layout > input[type="text"],
+.monster-field-layout > input[type="password"],
+.monster-field-layout > input[type="email"],
+.monster-field-layout > input[type="number"],
+.monster-field-layout > input[type="tel"] {
+    height: -webkit-fill-available;
+}
+
+.monster-field-layout > input:not([type="checkbox"]):not([type="radio"]) {
+    width: 100%;
+    border-radius: var(--monster-theme-control-border-radius);
+    border-width: var(--monster-theme-control-border-width);
+    border-color: var(--monster-theme-control-border-color);
+    border-style: var(--monster-theme-control-border-style);
+}
+
+.monster-field-layout > select {
+    width: 100%;
+    border-radius: var(--monster-theme-control-border-radius);
+    border-width: var(--monster-theme-control-border-width);
+    border-color: var(--monster-theme-control-border-color);
+    border-style: var(--monster-theme-control-border-style);
+    background-color: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+}
+
+.monster-field-layout > select[readonly],
+.monster-field-layout > select:disabled {
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    cursor: default;
+}
+
+.monster-field-layout > input:not([type="checkbox"]):not([type="radio"])[readonly] {
+    background-color: var(--monster-bg-color-primary-3);
+    color: var(--monster-color-primary-3);
+}
+
+.monster-field-layout > input[readonly]:not([type="checkbox"]):not([type="radio"]) {
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    cursor: default;
+}
+
+.monster-field-layout > input,
+.monster-field-layout > monster-toggle-switch,
+.monster-field-layout > select {
+    min-height: 1.8rem;
+    padding: 0.5rem;
+    box-sizing: border-box;
+}
+
+.monster-field-layout > monster-password {
+    min-height: 1.8rem;
+}
+
+.monster-field-layout > input[type="color"] {
+    padding: 0 0.2rem;
+    min-height: calc(1.8rem + 0.4rem);
+    width: 100%;
+}
+
+.monster-field-layout > input[type="time"],
+.monster-field-layout > input[type="date"] {
+    padding: 0 0.2rem;
+    min-height: calc(1.8rem + 0.4rem);
+}
+
+.monster-field-layout > input[type="checkbox"],
+.monster-field-layout > input[type="radio"] {
+    width: 1.8rem;
+    min-height: calc(1.8rem + 0.4rem);
+    padding: 0 0.2rem;
+}
+
+.monster-field-layout > input[type="file"] {
+    padding: 0.4rem;
+    min-height: calc(1.2rem);
+}
+
+.monster-field-layout > input,
+.monster-field-layout > monster-toggle-switch,
+.monster-field-layout > monster-password,
+.monster-field-layout > select,
+.monster-field-layout > [data-monster-validation-wrapper] {
+    align-self: end;
+}
+
+.monster-field-layout > select[multiple],
+.monster-field-layout > select[size]:not([size="1"]) {
+    min-height: calc(1.8rem * 4);
+    padding: 0.25rem 0.35rem;
+    align-self: stretch;
+    overflow-y: auto;
+}
+
+.monster-field-layout > select[multiple] option,
+.monster-field-layout > select[size]:not([size="1"]) option {
+    padding-block: 0.15rem;
+}
+
+.monster-field-layout > monster-toggle-switch {
+    width: 3rem;
+    padding: 0;
+}
+
+@container field-layout (max-width: 1200px) {
+    .monster-field-layout.multiple-columns {
+        grid-template-columns: auto 1fr auto 1fr;
+    }
+
+    .monster-field-layout > h1,
+    .monster-field-layout > h2,
+    .monster-field-layout > h3,
+    .monster-field-layout > h4,
+    .monster-field-layout > h5,
+    .monster-field-layout > h6 {
+        margin: var(--monster-field-set-heading-margin-top-1200, 2.2rem) 0 0.1rem;
+    }
+
+    .monster-field-layout > h1:first-of-type,
+    .monster-field-layout > h2:first-of-type,
+    .monster-field-layout > h3:first-of-type,
+    .monster-field-layout > h4:first-of-type,
+    .monster-field-layout > h5:first-of-type {
+        margin-top: var(--monster-field-set-heading-margin-top-first-1200, 0.6rem);
+    }
+
+    .monster-field-layout > .grid-double-span {
+        grid-column: span 1;
+    }
+}
+
+@container field-layout (max-width: 900px) {
+    .monster-field-layout.multiple-columns {
+        grid-template-columns: auto 1fr;
+    }
+
+    .monster-field-layout > h1,
+    .monster-field-layout > h2,
+    .monster-field-layout > h3,
+    .monster-field-layout > h4,
+    .monster-field-layout > h5,
+    .monster-field-layout > h6 {
+        margin: var(--monster-field-set-heading-margin-top-900, 1.8rem) 0 0.1rem;
+    }
+
+    .monster-field-layout > h1:first-of-type,
+    .monster-field-layout > h2:first-of-type,
+    .monster-field-layout > h3:first-of-type,
+    .monster-field-layout > h4:first-of-type,
+    .monster-field-layout > h5:first-of-type {
+        margin-top: var(--monster-field-set-heading-margin-top-first-900, 0.5rem);
+    }
+
+    .monster-field-layout > .grid-double-span {
+        grid-column: span 1;
+    }
+}
+
+@container field-layout (max-width: 500px) {
+    .monster-field-layout {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .monster-field-layout > h1,
+    .monster-field-layout > h2,
+    .monster-field-layout > h3,
+    .monster-field-layout > h4,
+    .monster-field-layout > h5,
+    .monster-field-layout > h6 {
+        grid-column: 1;
+        margin: var(--monster-field-set-heading-margin-top-500, 1.3rem) 0 0.1rem;
+    }
+
+    .monster-field-layout > h1:first-of-type,
+    .monster-field-layout > h2:first-of-type,
+    .monster-field-layout > h3:first-of-type,
+    .monster-field-layout > h4:first-of-type,
+    .monster-field-layout > h5:first-of-type {
+        margin-top: var(--monster-field-set-heading-margin-top-first-500, 0.4rem);
+    }
+
+    .monster-field-layout > div.wrapper,
+    .monster-field-layout > input,
+    .monster-field-layout > monster-toggle-switch,
+    .monster-field-layout > monster-password,
+    .monster-field-layout > textarea,
+    .monster-field-layout > select,
+    .monster-field-layout > monster-button,
+    .monster-field-layout > monster-action-button,
+    .monster-field-layout > monster-state-button,
+    .monster-field-layout > monster-api-button,
+    .monster-field-layout > monster-datasource-save-button {
+        grid-column: 1;
+    }
+
+    .monster-field-layout > label,
+    .monster-field-layout > .label {
+        padding-top: 1rem;
+        border-bottom: none;
+    }
+
+    .monster-field-layout.multiple-columns {
+        grid-template-columns: 1fr;
+    }
+
+    .monster-field-layout > .grid-start-1,
+    .monster-field-layout > .grid-start-2,
+    .monster-field-layout > .grid-start-3,
+    .monster-field-layout > .grid-start-4,
+    .monster-field-layout > .grid-span-full {
+        grid-column: 1 !important;
+    }
+
+    .monster-field-layout > .grid-double-span {
+        grid-column: span 1 !important;
+    }
+}

package/source/components/form/style/field-set.pcss

@@ -82,6 +82,10 @@
     }
 }
 
+:host([data-monster-context="wizard"]) [data-monster-role=header] {
+    border-bottom: none;
+}
+
 .hidden {
     display: none !important;
 }

package/source/components/form/style/wizard.pcss

@@ -0,0 +1,57 @@
+@import "../../style/typography.pcss";
+@import "../../style/property.pcss";
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/control.pcss";
+
+:host {
+	display: block;
+	box-sizing: border-box;
+}
+
+[data-monster-role="control"] {
+	width: 100%;
+}
+
+[data-monster-role="body"] {
+	display: grid;
+	grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
+	gap: 1.5rem;
+	align-items: start;
+}
+
+[data-monster-role="content"] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 1rem;
+}
+
+[data-monster-role="status"] {
+	color: var(--monster-color-primary-2);
+	font-size: 0.95rem;
+	justify-self: end;
+	text-align: right;
+}
+
+monster-message-state-button {
+	min-width: 7rem;
+}
+
+::slotted([hidden]) {
+	display: none !important;
+}
+
+::slotted([data-monster-role="panel"]) {
+	box-sizing: border-box;
+	display: block;
+}
+
+@media (max-width: 820px) {
+	[data-monster-role="body"] {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	monster-message-state-button {
+		flex: 1 1 12rem;
+	}
+}