@schukai/monster 3.71.2 → 3.72.0

package/source/components/form/reload.mjs

@@ -12,24 +12,24 @@
  * 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 {
-    assembleMethodSymbol,
-    attributeObserverSymbol,
-    CustomElement,
-    initMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	attributeObserverSymbol,
+	CustomElement,
+	initMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {isString} from "../../types/is.mjs";
-import {ATTRIBUTE_FORM_RELOAD, ATTRIBUTE_FORM_URL} from "./constants.mjs";
-import {loadAndAssignContent} from "./util/fetch.mjs";
+import { isString } from "../../types/is.mjs";
+import { ATTRIBUTE_FORM_RELOAD, ATTRIBUTE_FORM_URL } from "./constants.mjs";
+import { loadAndAssignContent } from "./util/fetch.mjs";
 
-export {Reload};
+export { Reload };
 
 /**
  * @private
@@ -106,128 +106,128 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
  * @fires Monster.Components.event:monster-fetched
  */
 class Reload extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     * @since 2.1.0
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/form/reload");
-    }
-
-    /**
-     * 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 {string} url=undefined
-     * @property {string} reload=undefined currently the values defined are `onshow` and `always`. The default `onshow` removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.
-     * @property {string} filter=undefined dom selectors to search for elements, if undefined then everything is taken
-     * @property {Monster.Components.Form.Processor[]} processors
-     * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-     * @property {String} fetch.redirect=error
-     * @property {String} fetch.method=GET
-     * @property {String} fetch.mode=same-origin
-     * @property {String} fetch.credentials=same-origin
-     * @property {Object} fetch.headers={"accept":"text/html"}}
-     */
-    get defaults() {
-        return Object.assign(
-            {},
-            super.defaults,
-            {
-                templates: {
-                    main: getTemplate.call(this),
-                },
-                shadowMode: null,
-                url: null,
-                reload: "onshow",
-                filter: null,
-                fetch: {
-                    redirect: "error",
-                    method: "GET",
-                    mode: "same-origin",
-                    credentials: "same-origin",
-                    headers: {
-                        accept: "text/html",
-                    },
-                },
-            },
-            initOptionsFromArguments.call(this),
-        );
-    }
-
-    /**
-     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-     *
-     * @return {string[]}
-     */
-    static get observedAttributes() {
-        const list = super.observedAttributes;
-        list.push(ATTRIBUTE_FORM_URL);
-        return list;
-    }
-
-    /**
-     * @return {void}
-     */
-    [initMethodSymbol]() {
-        super[initMethodSymbol]();
-
-        // data-monster-options
-        this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
-            if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
-                this.setOption("url", new URL(url, document.location).toString());
-            } else {
-                this.setOption("url", undefined);
-            }
-        };
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     * @throws {Error} missing default slot
-     * @throws {Error} no shadow-root is defined
-     * @throws {Error} missing url
-     * @throws {Error} we won't be able to read the data
-     * @throws {Error} request failed
-     * @throws {Error} not found
-     * @throws {Error} undefined status or type
-     * @fires Monster.Components.event:monster-fetched
-     * @return {Monster.Components.Form.Form}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initIntersectionObserver.call(this);
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-reload";
-    }
-
-    /**
-     * load content from url
-     *
-     * It is important to know that with this function the loading is executed
-     * directly. it is loaded as well when the element is not visible.
-     *
-     * @param {string|undefined} url
-     */
-    fetch(url) {
-        if (isString(url) || url instanceof URL) {
-            this.setAttribute(ATTRIBUTE_FORM_URL, `${url}`);
-        }
-
-        return loadContent.call(this);
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/reload");
+	}
+
+	/**
+	 * 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 {string} url=undefined
+	 * @property {string} reload=undefined currently the values defined are `onshow` and `always`. The default `onshow` removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.
+	 * @property {string} filter=undefined dom selectors to search for elements, if undefined then everything is taken
+	 * @property {Monster.Components.Form.Processor[]} processors
+	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+	 * @property {String} fetch.redirect=error
+	 * @property {String} fetch.method=GET
+	 * @property {String} fetch.mode=same-origin
+	 * @property {String} fetch.credentials=same-origin
+	 * @property {Object} fetch.headers={"accept":"text/html"}}
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				templates: {
+					main: getTemplate.call(this),
+				},
+				shadowMode: null,
+				url: null,
+				reload: "onshow",
+				filter: null,
+				fetch: {
+					redirect: "error",
+					method: "GET",
+					mode: "same-origin",
+					credentials: "same-origin",
+					headers: {
+						accept: "text/html",
+					},
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 */
+	static get observedAttributes() {
+		const list = super.observedAttributes;
+		list.push(ATTRIBUTE_FORM_URL);
+		return list;
+	}
+
+	/**
+	 * @return {void}
+	 */
+	[initMethodSymbol]() {
+		super[initMethodSymbol]();
+
+		// data-monster-options
+		this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
+			if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
+				this.setOption("url", new URL(url, document.location).toString());
+			} else {
+				this.setOption("url", undefined);
+			}
+		};
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 * @throws {Error} missing default slot
+	 * @throws {Error} no shadow-root is defined
+	 * @throws {Error} missing url
+	 * @throws {Error} we won't be able to read the data
+	 * @throws {Error} request failed
+	 * @throws {Error} not found
+	 * @throws {Error} undefined status or type
+	 * @fires Monster.Components.event:monster-fetched
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initIntersectionObserver.call(this);
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-reload";
+	}
+
+	/**
+	 * load content from url
+	 *
+	 * It is important to know that with this function the loading is executed
+	 * directly. it is loaded as well when the element is not visible.
+	 *
+	 * @param {string|undefined} url
+	 */
+	fetch(url) {
+		if (isString(url) || url instanceof URL) {
+			this.setAttribute(ATTRIBUTE_FORM_URL, `${url}`);
+		}
+
+		return loadContent.call(this);
+	}
 }
 
 /**
@@ -241,19 +241,19 @@ class Reload extends CustomElement {
  * @return {object}
  */
 function initOptionsFromArguments() {
-    const options = {};
+	const options = {};
 
-    const url = this.getAttribute(ATTRIBUTE_FORM_URL);
+	const url = this.getAttribute(ATTRIBUTE_FORM_URL);
 
-    if (isString(url)) {
-        options["url"] = new URL(url, document.location).toString();
-    }
+	if (isString(url)) {
+		options["url"] = new URL(url, document.location).toString();
+	}
 
-    if (this.hasAttribute(ATTRIBUTE_FORM_RELOAD)) {
-        options["reload"] = this.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase();
-    }
+	if (this.hasAttribute(ATTRIBUTE_FORM_RELOAD)) {
+		options["reload"] = this.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase();
+	}
 
-    return options;
+	return options;
 }
 
 /**
@@ -268,37 +268,37 @@ function initOptionsFromArguments() {
  * @fires Monster.Components.event:monster-fetched
  */
 function initIntersectionObserver() {
-    if (this[intersectionObserverWasInitialized] === true) {
-        return;
-    }
-
-    this[intersectionObserverWasInitialized] = true;
-
-    const options = {
-        threshold: [0.5],
-    };
-
-    const callback = (entries, observer) => {
-        for (const [, entry] of entries.entries()) {
-            if (entry.isIntersecting === true) {
-                // undefined or always do the same
-                if (this.getOption("reload") === "onshow") {
-                    observer.disconnect();
-                }
-
-                try {
-                    loadContent.call(this).catch((e) => {
-                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
-                    });
-                } catch (e) {
-                    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
-                }
-            }
-        }
-    };
-
-    const observer = new IntersectionObserver(callback, options);
-    observer.observe(this);
+	if (this[intersectionObserverWasInitialized] === true) {
+		return;
+	}
+
+	this[intersectionObserverWasInitialized] = true;
+
+	const options = {
+		threshold: [0.5],
+	};
+
+	const callback = (entries, observer) => {
+		for (const [, entry] of entries.entries()) {
+			if (entry.isIntersecting === true) {
+				// undefined or always do the same
+				if (this.getOption("reload") === "onshow") {
+					observer.disconnect();
+				}
+
+				try {
+					loadContent.call(this).catch((e) => {
+						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+					});
+				} catch (e) {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+				}
+			}
+		}
+	};
+
+	const observer = new IntersectionObserver(callback, options);
+	observer.observe(this);
 }
 
 /**
@@ -318,41 +318,41 @@ function initIntersectionObserver() {
  * @return {Promise}
  */
 function loadContent() {
-    const url = this.getOption("url", undefined);
-    if (!isString(url) || url === "") {
-        throw new Error("missing url");
-    }
-
-    const options = this.getOption("fetch", {});
-
-    let parentNode = this;
-    if (this.shadowRoot) {
-        parentNode = this.shadowRoot;
-    }
-
-    let container = parentNode.querySelector(`[${ATTRIBUTE_ROLE}=container]`);
-    let currentDisplayMode = container?.style?.display;
-
-    if (currentDisplayMode === undefined) {
-        currentDisplayMode = "inherit";
-    }
-
-    if (!(container instanceof HTMLElement)) {
-        container = document.createElement("div");
-        container.style.display = "none";
-        container.setAttribute(ATTRIBUTE_ROLE, "container");
-        parentNode.appendChild(container);
-    }
-
-    return loadAndAssignContent(container, url, options, this.getOption("filter"))
-        .then(() => {
-            if (currentDisplayMode !== undefined) {
-                container.style.display = currentDisplayMode;
-            }
-        })
-        .catch((e) => {
-            throw e;
-        });
+	const url = this.getOption("url", undefined);
+	if (!isString(url) || url === "") {
+		throw new Error("missing url");
+	}
+
+	const options = this.getOption("fetch", {});
+
+	let parentNode = this;
+	if (this.shadowRoot) {
+		parentNode = this.shadowRoot;
+	}
+
+	let container = parentNode.querySelector(`[${ATTRIBUTE_ROLE}=container]`);
+	let currentDisplayMode = container?.style?.display;
+
+	if (currentDisplayMode === undefined) {
+		currentDisplayMode = "inherit";
+	}
+
+	if (!(container instanceof HTMLElement)) {
+		container = document.createElement("div");
+		container.style.display = "none";
+		container.setAttribute(ATTRIBUTE_ROLE, "container");
+		parentNode.appendChild(container);
+	}
+
+	return loadAndAssignContent(container, url, options, this.getOption("filter"))
+		.then(() => {
+			if (currentDisplayMode !== undefined) {
+				container.style.display = currentDisplayMode;
+			}
+		})
+		.catch((e) => {
+			throw e;
+		});
 }
 
 /**
@@ -360,7 +360,7 @@ function loadContent() {
  * @return {string}
  */
 function getTemplate() {
-    return this.innerHTML;
+	return this.innerHTML;
 }
 
 registerCustomElement(Reload);

package/source/components/form/select.mjs

@@ -698,7 +698,7 @@ class Select extends CustomControl {
 							const selection = this.getOption("selection");
 							let newValue = [];
 							if (selection) {
-								newValue = selection
+								newValue = selection;
 							} else if (this.hasAttribute("value")) {
 								newValue = this.getAttribute("value");
 							}
@@ -710,7 +710,7 @@ class Select extends CustomControl {
 								resolve(result);
 							}, 10);
 
-							return
+							return;
 						}
 
 						setStatusOrRemoveBadges.call(this, "error");
@@ -1866,7 +1866,6 @@ function areOptionsAvailableAndInit() {
  * @throws {Error} no shadow-root is defined
  */
 function checkOptionState() {
-	
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1891,8 +1890,6 @@ function checkOptionState() {
 			if (e.checked !== false) e.checked = false;
 		}
 	}
-	
-	
 }
 
 /**
@@ -1976,8 +1973,8 @@ function setSelection(selection) {
 		selection = [];
 	}
 
-	validateArray(selection)
-	
+	validateArray(selection);
+
 	for (let i = 0; i < selection.length; i++) {
 		selection[i] = {
 			label: getSelectionLabel.call(this, selection[i].value),
@@ -2112,14 +2109,16 @@ function show() {
 	if (lazyLoadFlag === true) {
 		this[lazyLoadDoneSymbol] = true;
 		setStatusOrRemoveBadges.call(this, "loading");
-		
+
 		new Processing(200, () => {
-			this.fetch().then(() => {
+			this.fetch()
+				.then(() => {
 					checkOptionState.call(this);
-				}).catch((e) => {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-				setStatusOrRemoveBadges.call(this, "error");
-			});
+				})
+				.catch((e) => {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+					setStatusOrRemoveBadges.call(this, "error");
+				});
 		})
 			.run()
 			.catch((e) => {

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

@@ -13,7 +13,7 @@
    container-type: inline-size;
    container-name: form-set;
    margin-bottom: 1rem;
-   @mixin paragraph;
+   @mixin text;
 }
 
 .collapse-alignment {
@@ -30,7 +30,7 @@
    
    & label {
       padding-right: 0.3rem;
-      @mixin paragraph;
+      @mixin text;
    }
    
    & [data-monster-role=extended-switch] {

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

@@ -9,4 +9,12 @@
     background-color: red;
 }
 
+:host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    outline: none;
+}