@schukai/monster 3.51.4 → 3.52.0

package/source/components/form/shadow-reload.mjs

@@ -0,0 +1,137 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { Reload } from "./reload.mjs";
+
+export { ShadowReload };
+
+/**
+ * This CustomControl reloads the content of a url and embeds it into the dom.
+ *
+ * <img src="./images/shadowreload.png">
+ *
+ * You can create this control either by specifying the HTML tag `<monster-shadow-reload />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-shadow-reload');` method.
+ *
+ * ```html
+ * <monster-shadow-reload></monster-shadow-reload>
+ *
+ * <script type="module">
+ * import {Reload} from '@schukai/component-form/source/shadow-reload.js';
+ * document.createElement('monster-shadow-reload');
+ * </script>
+ * ```
+ *
+ * A simple configuration can look like this
+ *
+ * ```html
+ * <script id="config"
+ *         type="application/json">
+ *     {
+ *         "url": "./content.html",
+ *     }
+ * </script>
+ *
+ * <monster-reload data-monster-options-selector="#config">
+ * </monster-reload>
+ * ```
+ *
+ * If you want to display a loader, you can insert a div with the attribute `data-monster-role="container"`.
+ * The content of this div will be replaced by the loaded code.
+ *
+ * ```html
+ * <monster-reload data-monster-options-selector="#config">
+ * <div data-monster-role="container">
+ * LOADER ...
+ * </div>
+ * </monster-reload>
+ * ```
+ *
+ * If you need additional structure, you can simply specify it.
+ *
+ * ```html
+ * <monster-shadow-reload data-monster-options-selector="#config">
+ * <div class="row">
+ *   <div class="col" data-monster-role="container">
+ *       LOADER ...
+ *   </div>
+ * </div>
+ * </monster-shadow-reload>
+ * ```
+ *
+ * @startuml shadowreload.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Reload
+ * Reload <|-- ShadowReload
+ * @enduml
+ *
+ * @since 3.6.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A shadow reload control
+ * @fires Monster.Components.Form.event:monster-fetched
+ */
+class ShadowReload extends Reload {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/shadow-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: "open",
+		});
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-shadow-reload";
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	return this.innerHTML;
+}
+
+registerCustomElement(ShadowReload);

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

@@ -0,0 +1,182 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { isInteger } from "../../types/is.mjs";
+import { validateInstance, validateString } from "../../types/validate.mjs";
+import { Button } from "./button.mjs";
+import { StateButtonStyleSheet } from "./stylesheet/state-button.mjs";
+import { getStateInstanceFor, State } from "./types/state.mjs";
+
+export { StateButton };
+
+/**
+ * This CustomControl creates a button element with a variety of options.
+ *
+ * <img src="./images/state-button.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-state-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-state-button');` method.
+ *
+ * ```html
+ * <monster-state-button></monster-state-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {StateButton} from '@schukai/component-form/source/state-button.js';
+ * document.createElement('monster-state-button');
+ * ```
+ *
+ * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
+ *
+ * @startuml state-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Button
+ * Button <|-- StateButton
+ * @enduml
+ *
+ * @since 1.5.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A state button with icons
+ */
+class StateButton extends Button {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/state-button@@instance");
+	}
+
+	/**
+	 * 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} states Available status
+	 * @property {Monster.Components.Form.Types.State} states.successful= successful
+	 * @property {Monster.Components.Form.Types.State} states.activity= activity
+	 * @property {Monster.Components.Form.Types.State} states.failed= failed
+	 * @property {Monster.Components.Form.Types.State} current current status
+	 * @property {Monster.Components.Form~exampleActionCallback} actions.click
+	 * @extends {Button}
+	 * @see {@link https://github.com/twbs/icons/blob/main/LICENSE.md|Bootstrap icons license}
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			states: {
+				successful: getStateInstanceFor("successful"),
+				activity: getStateInstanceFor("activity"),
+				failed: getStateInstanceFor("failed"),
+			},
+			current: getStateInstanceFor("stateless"),
+		});
+	}
+
+	/**
+	 * This method sets the current state of the button.
+	 * If a timeout is set, the state is automatically removed after the
+	 * specified time.
+	 *
+	 * @since 3.18.0 a previously set timeout is cleared
+	 *
+	 * @param {state} state
+	 * @param {number} timeout
+	 * @return {Monster.Components.Form.StateButton}
+	 * @throws {TypeError} value is not a string
+	 * @throws {TypeError} value is not an instance
+	 */
+	setState(state, timeout) {
+		const timeoutSymbol = Symbol.for("timeout");
+		if (this[timeoutSymbol] !== undefined) {
+			clearTimeout(this[timeoutSymbol]);
+			delete this[timeoutSymbol];
+		}
+
+		const obj = this.getOption(`states.${validateString(state)}`);
+		if (obj === undefined) {
+			throw new Error("not found");
+		}
+
+		this.setOption("current", validateInstance(obj, State));
+
+		if (isInteger(timeout) && timeout > 0) {
+			this[timeoutSymbol] = setTimeout(() => {
+				this.removeState();
+				delete this[timeoutSymbol];
+			}, timeout);
+		}
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.StateButton}
+	 */
+	removeState() {
+		this.setOption("current", getStateInstanceFor("stateless"));
+		return this;
+	}
+
+	/**
+	 * @return {Monster.Components.Form.Types.State|undefined}
+	 */
+	getState() {
+		return this.getOption("current");
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-state-button";
+	}
+
+	/**
+	 *
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		const styles = Button.getCSSStyleSheet();
+		styles.push(StateButtonStyleSheet);
+		return styles;
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	return `<div data-monster-role="control" part="control">
+    <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
+            data-monster-role="button"
+            part="button">
+        <div data-monster-role="label" data-monster-replace="path:labels.button"></div>
+        <div data-monster-role="state" data-monster-replace="path:current.presentation"></div>
+    </button>
+</div>`;
+}
+
+registerCustomElement(StateButton);

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

@@ -0,0 +1,41 @@
+@import "../../style/property.pcss";
+@import "../../style/color.pcss";
+@import "../../style/border.pcss";
+
+[data-monster-role=control] {
+
+    & div[data-monster-role=popper] {
+        padding: 2px;
+    }
+
+    [data-monster-role=container] {
+
+        [data-monster-role=buttons] {
+
+            display: flex;
+            flex-direction: column;
+
+            & button {
+                border: 0;
+                background: transparent;
+            }
+
+            & monster-message-state-button:not(:last-child) {
+                border-bottom-color: var(--monster-color-primary-1);
+                border-bottom-style: var(--monster-border-style);
+                border-bottom-width: var(--monster-border-width);
+
+                & ::part(button) {
+                    border-bottom-color: var(--monster-color-primary-1);
+                    border-bottom-style: var(--monster-border-style);
+                    border-bottom-width: var(--monster-border-width);
+
+                }
+
+            }
+        }
+
+    }
+
+}
+

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

@@ -0,0 +1,51 @@
+@import "../../style/display.pcss";
+@import "../../style/control.pcss";
+@import "../../style/border.pcss";
+@import "../../style/button.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/floating-ui.pcss";
+
+div[data-monster-role="control"] {
+    position: relative;
+    height: 100%;
+
+    & [data-monster-role=button-bar] {
+        display: flex;
+        flex-direction: row;
+        
+        & :not(slot[name=button]) {
+            display: flex;
+        }
+
+
+        & [data-monster-role=popper-nav] {
+            display: flex;
+            align-items: stretch;
+        }
+
+        & [data-monster-role=switch] {
+            display: flex;
+
+            &.hidden {
+                display: none;
+            }
+        }
+
+        & ::slotted(*:not(:last-child)) {
+            margin-right: calc(-1 * var(--monster-border-width));
+        }
+
+    }
+
+    & slot[name=popper] {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        align-content: center;
+        justify-content: space-between;
+    }
+
+
+}
+

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

@@ -0,0 +1,8 @@
+@import "../../style/control.pcss";
+@import "../../style/button.pcss";
+@import "../../style/border.pcss";
+
+[data-monster-role="control"] {
+    display: flex;
+    align-items: stretch;   
+}

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

@@ -0,0 +1,17 @@
+@import "../../style/display.pcss";
+@import "../../style/control.pcss";
+@import "../../style/border.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/floating-ui.pcss";
+
+div[data-monster-role="decision"] {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-evenly;
+    margin: 1rem 0 0.4rem 0;
+}
+
+div[data-monster-role="control"] {
+    height: 100%;
+}

package/source/components/form/style/context-help.pcss

@@ -0,0 +1,16 @@
+@import "../../style/control.pcss";
+@import "../../style/floating-ui.pcss";
+
+[data-monster-role=control] {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    
+    & [data-monster-role="button"] {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+    }
+}
+

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

@@ -0,0 +1,10 @@
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/form.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/control.pcss";
+
+
+[data-monster-role="control"] {
+    position: relative;
+}

package/source/components/form/style/message-state-button.pcss

@@ -0,0 +1,10 @@
+
+
+
+
+
+[data-monster-role=control] {
+    [data-monster-role=button] {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,16 @@
+@import "../../style/control.pcss";
+@import "../../style/floating-ui.pcss";
+@import "../../style/button.pcss";
+
+[data-monster-role=control] {
+    position: relative;
+    display: flex;
+}
+
+[data-monster-role=button] {
+    width: fill-available;
+}
+
+div[data-monster-role="control"] {
+    height: 100%;
+}

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

@@ -0,0 +1,8 @@
+@import "../../style/control.pcss";
+@import "../../style/floating-ui.pcss";
+
+[data-monster-role=control] {
+    position: relative;
+    display: flex;
+}
+