@schukai/monster 3.51.4 → 3.52.0

package/source/components/form/constants.mjs

@@ -0,0 +1,111 @@
+/**
+ * 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 { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
+
+/**
+ * @memberOf Monster.Components.Form
+ * @since 1.0.0
+ * @type {string}
+ */
+const STYLE_DISPLAY_MODE_BLOCK = "block";
+
+/**
+ * This attribute `data-monster-url` can be used to pass a URL to the control.
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.0.0
+ * @type {string}
+ */
+const ATTRIBUTE_FORM_URL = `${ATTRIBUTE_PREFIX}url`;
+
+/**
+ * This attribute `data-monster-reload` can be used to control the reload.
+ *
+ * valid values: onshow
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.11.0
+ * @type {string}
+ */
+const ATTRIBUTE_FORM_RELOAD = `${ATTRIBUTE_PREFIX}reload`;
+
+/**
+ * `data-monster-intend`
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.9.0
+ * @type {string}
+ */
+const ATTRIBUTE_VISIBILITY = `${ATTRIBUTE_PREFIX}visibility`;
+/**
+ * `data-monster-intend`
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.9.0
+ * @deprecated since 3.32.0
+ * @type {string}
+ */
+const ATTRIBUTE_BUTTON_CLASS = `${ATTRIBUTE_PREFIX}button-class`;
+
+/**
+ * `data-monster-intend`
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.8.0
+ * @type {string}
+ */
+const ATTRIBUTE_INTEND = `${ATTRIBUTE_PREFIX}intend`;
+
+/**
+ * `data-monster-has-children`
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.8.0
+ * @type {string}
+ */
+const ATTRIBUTE_HAS_CHILDREN = `${ATTRIBUTE_PREFIX}has-children`;
+
+/**
+ * This attribute `data-monster-datasource` can be used to pass a datasource.
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.6.0
+ * @type {string}
+ */
+const ATTRIBUTE_FORM_DATASOURCE = `${ATTRIBUTE_PREFIX}datasource`;
+
+/**
+ * This attribute `data-monster-datasource-arguments` can be used to pass arguments.
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.6.0
+ * @type {string}
+ */
+const ATTRIBUTE_FORM_DATASOURCE_ARGUMENTS = `${ATTRIBUTE_PREFIX}datasource-arguments`;
+
+/**
+ * This attribute `data-monster-button-label` can be used to pass labels.
+ *
+ * @memberOf Monster.Components.Form
+ * @since 1.6.0
+ * @type {string}
+ */
+const ATTRIBUTE_BUTTON_LABEL = `${ATTRIBUTE_PREFIX}button-label`;
+
+export {
+	ATTRIBUTE_BUTTON_LABEL,
+	STYLE_DISPLAY_MODE_BLOCK,
+	ATTRIBUTE_FORM_URL,
+	ATTRIBUTE_FORM_DATASOURCE,
+	ATTRIBUTE_FORM_DATASOURCE_ARGUMENTS,
+	ATTRIBUTE_INTEND,
+	ATTRIBUTE_VISIBILITY,
+	ATTRIBUTE_FORM_RELOAD,
+	ATTRIBUTE_HAS_CHILDREN,
+	ATTRIBUTE_BUTTON_CLASS,
+};

package/source/components/form/context-help.mjs

@@ -0,0 +1,123 @@
+/**
+ * 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 { CustomControl } from "../../dom/customcontrol.mjs";
+import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { Popper } from "./popper.mjs";
+
+export { ContextHelp };
+
+/**
+ * The ContextHelp ist an element that can be used to display a tooltip or a popover.
+ *
+ * <img src="./images/context-help.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * as well as [pooperjs](https://popper.js.org/docs/v2/).
+ *
+ * You can create this control either by specifying the HTML tag <monster-context-help-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-context-help');` method.
+ *
+ * ```html
+ * <monster-context-help></monster-context-help>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {Popper} from '@schukai/component-form/source/popper.js';
+ * document.createElement('monster-context-help');
+ * ```
+ *
+ * @startuml context-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Popper
+ * Popper <|-- ContextHelp
+ * @enduml
+ *
+ * @since 3.29.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A control that can be used to display a tooltip or a popover.
+ */
+class ContextHelp extends Popper {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/popper@@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 - The templates for the control.
+	 * @property {string} templates.main - The main template.
+	 * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
+	 * @property {string} content - The content of the popper.
+	 * @property {object} popper - The popper options.
+	 * @property {string} popper.placement - The placement of the popper. Possible values are `top`, `bottom`, `left`, `right`, `auto`, `auto-start`, `auto-end`, `top-start`, `top-end`, `bottom-start`, `bottom-end`, `right-start`, `right-end`, `left-start`, `left-end`.
+	 * @extends {CustomControl}
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "hover",
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-context-help";
+	}
+
+	/**
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [ContextHelpStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            
+            <div data-monster-role="button" part="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
+                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+            </svg></div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex">
+                    <slot></slot>
+                </div>
+            </div>
+            
+        </div>
+    `;
+}
+
+registerCustomElement(ContextHelp);

package/source/components/form/events.mjs

@@ -0,0 +1,84 @@
+/**
+ * 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
+ */
+
+/**
+ * This event is fired when options are set
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-options-set
+ * @type {object}
+ * @property {Object[]} options options
+ * @property {string} options.value value
+ * @property {string} options.label label
+ */
+
+/**
+ * This event is fired when something is selected
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-selected
+ * @type {object}
+ * @property {array|string} selection
+ */
+
+/**
+ * This event will be fired when something will change
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-change
+ * @type {object}
+ * @property {string} [type] event type
+ * @property {string} [value] the value that was changed
+ * @property {boolean} [checked] if it is a boolean value
+ */
+
+/**
+ * This event will be fired when a selection is removed
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-selection-removed
+ * @type {object}
+ * @property {string} [type] event type
+ * @property {string} [value] the value that was changed
+ */
+
+/**
+ * This event will be fired when a selection is cleared
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-selection-cleared
+ * @type {object}
+ * @property {string} [type] event type
+ */
+
+/**
+ * This event will be fired if something has changed
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-changed
+ * @type {object}
+ * @property {string} [type] event type
+ * @property {string} [value] the value that was changed
+ * @property {boolean} [checked] if it is a boolean value
+ **/
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-fetched
+ * @type {object}
+ * @property {string} url loaded uri
+ */
+
+/**
+ * button clicked event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-button-clicked
+ * @type {object}
+ */