@schukai/monster 3.67.0 → 3.68.0

package/CHANGELOG.md

@@ -2,34 +2,41 @@
 
 
 
+## [3.68.0] - 2024-06-23
+
+### Add Features
+
+- add on/off action to toggle switch [#207](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/207)
+### Bug Fixes
+
+- gitlab pipeline
+### Changes
+
+- repair toggle test
+- update changelog + mattermost info call
+
 ## [3.67.0] - 2024-06-22
 
 ### Add Features
 
-- new options to define the markers that are used for the label template. [#203](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/203) See merge request oss/libraries/javascript/monster[!53](https://gitlab.schukai.com/oss/libraries/javascript/monster/merge_requests/53)
 - new options to define the markers that are used for the label template [#203](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/203)
 
-## 2024-06-22
-- new options to define the markers that are used for the label template  [#203](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/203)
-
 ## [3.66.0] - 2024-06-21
 
 ### Add Features
 
 - new flag feature.useStrictValueComparison [#206](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/206)
 - new flag features.storeFetchedData and function Select::getLastFetchedData [#204](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/204)
+
 ### Bug Fixes
 
-- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200)
-- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) changes
-- [#201](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/201)
-- slight color adjustments
+- Reloading options in a select does not work [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200)
+
 ### Changes
 
 - tidy project files
-- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) move to close
-- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) move to close
-
+- call Button use findElementWithSelectorUpwards [#201](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/201)
+- slight color adjustments
 
 
 ## [3.65.21] - 2024-06-20

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.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":"3.67.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.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":"3.68.0"}

package/source/components/form/field-set.mjs

@@ -12,30 +12,49 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
-import { CustomControl } from "../../dom/customcontrol.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { isFunction } from "../../types/is.mjs";
-import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
-import { fireCustomEvent } from "../../dom/events.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {FieldSetStyleSheet} from "./stylesheet/field-set.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
 import "../layout/collapse.mjs";
+import {ToggleSwitch} from "./toggle-switch.mjs";
 
-export { FieldSet };
+export {FieldSet};
 
 /**
  * @private
  * @type {symbol}
  */
-export const fieldSetElementSymbol = Symbol("fieldSetElement");
+const fieldSetElementSymbol = Symbol("fieldSetElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const collapseElementSymbol = Symbol("collapseElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
 
 /**
  * This CustomControl creates a FieldSet element with a variety of options.
@@ -71,164 +90,174 @@ export const fieldSetElementSymbol = Symbol("fieldSetElement");
  * @summary A simple FieldSet
  */
 class FieldSet extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
-	}
-
-	/**
-	 *
-	 * @return {Components.Form.FieldSet
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		return this;
-	}
-
-	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} labels Label definitions
-	 * @property {Object} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {Object} classes CSS classes
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			labels: {},
-			classes: {},
-			disabled: false,
-			features: {},
-			actions: {
-				click: () => {
-					throw new Error("the click action is not defined");
-				},
-			},
-			value: null,
-		});
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-field-set";
-	}
-
-	/**
-	 *
-	 * @return {Array<CSSStyleSheet>}
-	 */
-	static getCSSStyleSheet() {
-		return [FieldSetStyleSheet];
-	}
-
-	/**
-	 * The FieldSet.click() method simulates a click on the internal element.
-	 *
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
-	 */
-	click() {
-		if (this.getOption("disabled") === true) {
-			return;
-		}
-
-		if (
-			this[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].click)
-		) {
-			this[fieldSetElementSymbol].click();
-		}
-	}
-
-	/**
-	 * The Button.focus() method sets focus on the internal element.
-	 *
-	 * @param {Object} options
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
-	 */
-	focus(options) {
-		if (this.getOption("disabled") === true) {
-			return;
-		}
-
-		if (
-			this[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].focus)
-		) {
-			this[fieldSetElementSymbol].focus(options);
-		}
-	}
-
-	/**
-	 * The Button.blur() method removes focus from the internal element.
-	 */
-	blur() {
-		if (
-			this[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].blur)
-		) {
-			this[fieldSetElementSymbol].blur();
-		}
-	}
-
-	/**
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
-	 * @return {boolean}
-	 */
-	static get formAssociated() {
-		return true;
-	}
-
-	/**
-	 * The current value of the form control.
-	 *
-	 * ```js
-	 * e = document.querySelector('monster-field-set');
-	 * console.log(e.value)
-	 * ```
-	 *
-	 * @property {string}
-	 */
-	get value() {
-		return this.getOption("value");
-	}
-
-	/**
-	 * Set value of the form control.
-	 *
-	 * ```
-	 * e = document.querySelector('monster-field-set');
-	 * e.value=1
-	 * ```
-	 *
-	 * @property {string} value
-	 * @throws {Error} unsupported type
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		try {
-			this?.setFormValue(this.value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-		}
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
+    }
+
+    /**
+     *
+     * @return {Components.Form.FieldSet
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        updateExtendedFields.call(this);
+        return this;
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} labels Label definitions
+     * @property {Object} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {Object} classes CSS classes
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            labels: {},
+            classes: {},
+            disabled: false,
+            features: {},
+            actions: {
+                click: () => {
+                    throw new Error("the click action is not defined");
+                },
+            },
+            value: null,
+        });
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-field-set";
+    }
+
+    /**
+     *
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [FieldSetStyleSheet];
+    }
+
+    /**
+     * The FieldSet.click() method simulates a click on the internal element.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+     */
+    click() {
+        if (this.getOption("disabled") === true) {
+            return;
+        }
+
+        if (
+            this[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].click)
+        ) {
+            this[fieldSetElementSymbol].click();
+        }
+    }
+
+    /**
+     * The Button.focus() method sets focus on the internal element.
+     *
+     * @param {Object} options
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+     */
+    focus(options) {
+        if (this.getOption("disabled") === true) {
+            return;
+        }
+
+        if (
+            this[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].focus)
+        ) {
+            this[fieldSetElementSymbol].focus(options);
+        }
+    }
+
+    /**
+     * The Button.blur() method removes focus from the internal element.
+     */
+    blur() {
+        if (
+            this[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].blur)
+        ) {
+            this[fieldSetElementSymbol].blur();
+        }
+    }
+
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+     * @return {boolean}
+     */
+    static get formAssociated() {
+        return true;
+    }
+
+    /**
+     * The current value of the form control.
+     *
+     * ```js
+     * e = document.querySelector('monster-field-set');
+     * console.log(e.value)
+     * ```
+     *
+     * @property {string}
+     */
+    get value() {
+        return this.getOption("value");
+    }
+
+    /**
+     * Set value of the form control.
+     *
+     * ```
+     * e = document.querySelector('monster-field-set');
+     * e.value=1
+     * ```
+     *
+     * @property {string} value
+     * @throws {Error} unsupported type
+     */
+    set value(value) {
+        this.setOption("value", value);
+        try {
+            this?.setFormValue(this.value);
+        } catch (e) {
+            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+        }
+    }
+}
+
+function updateExtendedFields() {
+    //  check if slot has extended fields
+    getSlottedElements.call(this, "", "extended").forEach((node) => {
+        if (node.hasAttribute(ATTRIBUTE_EXTENDED)) {
+            this.hasExtended = true;
+        }
+    })
 }
 
 /**
@@ -237,45 +266,78 @@ class FieldSet extends CustomControl {
  * @fires Monster.Components.Form.event:monster-field-set-clicked
  */
 function initEventHandler() {
-	const self = this;
-	const element = this[fieldSetElementSymbol];
-
-	const type = "click";
-
-	element.addEventListener(type, function (event) {
-		const callback = self.getOption("actions.click");
+    // const self = this;
+    // const element = this[fieldSetElementSymbol];
+    //
+    // const type = "click";
 
-		fireCustomEvent(self, "monster-field-set-clicked", {
-			element: self,
-		});
+    // element.addEventListener(type, function (event) {
+    // 	const callback = self.getOption("actions.click");
+    //
+    // 	fireCustomEvent(self, "monster-field-set-clicked", {
+    // 		element: self,
+    // 	});
+    //
+    // 	if (!isFunction(callback)) {
+    // 		return;
+    // 	}
+    //
+    // 	const element = findTargetElementFromEvent(
+    // 		event,
+    // 		ATTRIBUTE_ROLE,
+    // 		"control",
+    // 	);
+    //
+    // 	if (!(element instanceof Node && self.hasNode(element))) {
+    // 		return;
+    // 	}
+    //
+    // 	callback.call(self, event);
+    // });
 
-		if (!isFunction(callback)) {
-			return;
-		}
 
-		const element = findTargetElementFromEvent(
-			event,
-			ATTRIBUTE_ROLE,
-			"control",
-		);
+    this[toggleSwitchElementSymbol].setOption("actions.on",  () => {
+        console.log( this[collapseElementSymbol],"!!!")
+        this[collapseElementSymbol].open();
+    });
 
-		if (!(element instanceof Node && self.hasNode(element))) {
-			return;
-		}
+    this[toggleSwitchElementSymbol].setOption("actions.off",  () => {
+        this[collapseElementSymbol].close();
+    });
+    
+    // this[extendedSwitchElementSymbol].addEventListener(type, function (event) {
+    //     const element = findTargetElementFromEvent(
+    //         event,
+    //         ATTRIBUTE_ROLE,
+    //         "extended-switch",
+    //     );
+    //
+    //
+    //
+    // })
 
-		callback.call(self, event);
-	});
-
-	return this;
+    return this;
 }
 
 /**
  * @private
  */
 function initControlReferences() {
-	this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+    this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="control"]`,
+    );
+
+    this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="extended-switch"]`,
+    );
+
+    this[collapseElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="collapse"]`,
+    );
+
+    this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
+        `monster-toggle-switch`,
+    );
 }
 
 /**
@@ -283,12 +345,20 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
-			<monster-collapse>
-			<slot></slot>
-			</monster-collapse>
+            <div data-monster-role="header">
+                <monster-toggle-switch class="hidden"></monster-toggle-switch>
+            </div>
+            <div>
+                <slot></slot>
+                <monster-collapse data-monster-role="collapse">
+                    <slot name="extended"></slot>
+                </monster-collapse>
+            </div>
+
+
         </div>`;
 }
 

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

@@ -9,5 +9,12 @@
 @import "../../style/floating-ui.pcss";
 
 [data-monster-role=control] {
-   border: 1px solid red;   
-}
+      
+} 
+
+
+[data-monster-role=header] {
+   display: flex;
+   align-items: center;
+   justify-content: flex-end;    
+}

package/source/components/form/style/toggle-switch.pcss

@@ -10,24 +10,21 @@
     margin: 0;
     outline: none;
     box-sizing: border-box;
-
+    
     &:focus {
         outline: 1px dashed var(--monster-color-selection-3);
         outline-offset: 2px;
     }
 
-
     & .switch {
         position: relative;
-        height: 2.5em;
-        border-width: thin;
+        border-width: var(--monster-border-width);
         border-style: var(--monster-border-style);
         transition: background-color 0.2s;
         display: inline-grid;
         grid-template-columns: 1fr 1fr;
         box-sizing: border-box;
         width: 100%;
-        
     }
 
     & .label {
@@ -35,10 +32,8 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        height: 2.5em;
         display: block;
         text-align: center;
-        line-height: 2.5em;
         user-select: none;
         padding: 0 0.2em;
     }
@@ -69,7 +64,6 @@
         visibility: hidden;
     }
 
-
     & .switch[data-monster-state="on"] .switch-slider {
         transform: translateX(100%);