@schukai/monster 3.51.5 → 3.52.0

package/source/components/host/config-manager.mjs

@@ -0,0 +1,304 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { ConfigManagerStyleSheet } from "./stylesheet/config-manager.mjs";
+import { getWindow } from "../../dom/util.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+
+export { ConfigManager };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const indexDBInstanceSymbol = Symbol("indexDBInstance");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const initializedPromiseSymbol = Symbol("initializedPromiseSymbol");
+
+/**
+ * @private
+ * @type {string}
+ */
+const MODE_READONLY = "readonly";
+
+/**
+ * @private
+ * @type {string}
+ */
+const MODE_READ_WRITE = "readwrite";
+
+/**
+ * The Config Manager component is used to encapsulate the configuration of the application.
+ *
+ * <img src="./images/config-manager.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-host />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-host');` method.
+ *
+ * ```html
+ * <monster-config-manager></monster-config-manager>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-state/source/config-manager.mjs';
+ * document.createElement('monster-config-manager');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml config-manager.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ConfigManager
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A config manager component
+ */
+class ConfigManager extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/config-manager@@instance");
+	}
+
+	constructor() {
+		super();
+
+		/**
+		 * @private
+		 * @type {symbol}
+		 */
+		this[initializedPromiseSymbol] = [];
+		this[indexDBInstanceSymbol] = null;
+		this[initializedPromiseSymbol].push(openDatabase.call(this));
+	}
+
+	/**
+	 * @returns {Promise}
+	 */
+	ready() {
+		return Promise.all(this[initializedPromiseSymbol]);
+	}
+
+	/**
+	 * 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
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			indexDB: {
+				name: "monster",
+				version: 2,
+				objectStore: {
+					name: "config",
+					keyPath: "key",
+				},
+			},
+		});
+	}
+
+	/**
+	 * @param {string} key
+	 * @returns {Promise<unknown>}
+	 */
+	getConfig(key) {;
+
+		return this.ready().then(() => {
+			return getBlob.call(this, key);
+		});
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {*} value
+	 * @returns {Promise<unknown>}
+	 */
+	setConfig(key, value) {;
+		return this.ready().then(() => {
+			return setBlob.call(this, key, value);
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-config-manager";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ConfigManagerStyleSheet];
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Host.Host}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+	}
+}
+
+function openDatabase() {;
+	const window = getWindow();
+
+	const name = this.getOption("indexDB.name");
+	const version = this.getOption("indexDB.version");
+	const storageName = this.getOption("indexDB.objectStore.name");
+	const KeyPath = this.getOption("indexDB.objectStore.keyPath");
+
+	if (!name || !version) {
+		throw new Error("The database name and version must be set.");
+	}
+
+	const request = window.indexedDB.open(name, version);
+
+	return new Promise((resolve, reject) => {
+		request.onerror = (event) => {
+			console.error("Error opening database", event);
+			reject(request.error);
+		};
+
+		request.onsuccess = (event) => {
+			this[indexDBInstanceSymbol] = event?.target?.result;
+			resolve(request.result);
+		};
+
+		request.onupgradeneeded = (event) => {
+			const db = event.target.result;
+
+			let objectStore;
+			if (!db.objectStoreNames.contains(storageName)) {
+				objectStore = db.createObjectStore(storageName, { keyPath: KeyPath });
+			}
+
+			objectStore.transaction.oncomplete = (event) => {
+				console.log("Database upgrade complete");
+				resolve();
+			};
+		};
+	});
+}
+
+/**
+ * @param {string} mode either "readonly" or "readwrite"
+ */
+function getObjectStore(mode) {;
+	const storageName = this.getOption("indexDB.objectStore.name");
+
+	if (!this[indexDBInstanceSymbol]) {
+		throw new Error("The database is not open.");
+	}
+
+	// @see https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/transaction
+	// transaction(storeNames, mode, options)
+	const tx = this[indexDBInstanceSymbol].transaction(storageName, mode);
+	return tx.objectStore(storageName);
+}
+
+/**
+ * @param {string} key
+ * @returns {Promise<unknown>}
+ */
+function clearObjectStore() {;
+
+	const store = getObjectStore.call(this, "readwrite");
+
+	return new Promise((resolve, reject) => {
+		const req = store.clear();
+		req.onsuccess = function (evt) {
+			console.log("clearObjectStore completed");
+			resolve();
+		};
+		req.onerror = function (evt) {
+			console.error("clearObjectStore:", evt.target.errorCode);
+			reject(evt.target.errorCode);
+		};
+	});
+}
+
+function getBlob(key) {;
+	const store = getObjectStore.call(this, MODE_READONLY);
+
+	const req = store.get(key);
+
+	return new Promise((resolve, reject) => {
+		req.onsuccess = function (evt) {
+			const value = evt.target.result;
+			if (value) {
+				resolve(value.blob);
+				return;
+			}
+			reject();
+		};
+	});
+}
+
+function setBlob(key, blob) {;
+	const store = getObjectStore.call(this, MODE_READ_WRITE);
+
+	const KeyPath = this.getOption("indexDB.objectStore.keyPath");
+	const obj = {};
+	obj[KeyPath] = key;
+	obj.blob = blob;
+	const req = store.put(obj);
+
+	return new Promise((resolve, reject) => {
+		req.onsuccess = function (evt) {
+			resolve();
+		};
+
+		req.onerror = function (evt) {
+			console.error("setBlob:", evt.target.errorCode);
+			reject(evt.target.errorCode);
+		};
+	});
+}
+
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+        </div>`;
+}
+
+registerCustomElement(ConfigManager);

package/source/components/host/constants.mjs

@@ -0,0 +1,18 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/component-form
+ * 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";
+
+/**
+ * This attribute `data-monster-button-label` can be used to pass labels.
+ *
+ * @memberOf Monster.Components.Host
+ * @type {string}
+ */
+const ATTRIBUTE_BUTTON_LABEL = `${ATTRIBUTE_PREFIX}button-label`;
+
+export { ATTRIBUTE_BUTTON_LABEL };

package/source/components/host/details.mjs

@@ -0,0 +1,268 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { Host } from "./host.mjs";
+import { DetailsStyleSheet } from "./stylesheet/details.mjs";
+import { ATTRIBUTE_BUTTON_LABEL } from "./constants.mjs";
+import { isString } from "../../types/is.mjs";
+import { generateUniqueConfigKey } from "./util.mjs";
+import { Collapse, nameSymbol } from "./collapse.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+
+export { Details };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonElementSymbol = Symbol("buttonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonEventHandlerSymbol = Symbol("buttonEventHandler");
+
+/**
+ * The Details component is used to show a details.
+ *
+ * <img src="./images/details.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-details />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-details');` method.
+ *
+ * ```html
+ * <monster-details></monster-details>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-state/source/details.mjs';
+ * document.createElement('monster-details');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml details.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Collapse
+ * Collapse <|-- Details
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A simple details component
+ * @fires Monster.Components.Host.Details.event:monster-details-before-open
+ * @fires Monster.Components.Host.Details.event:monster-details-open
+ * @fires Monster.Components.Host.Details.event:monster-details-before-close
+ * @fires Monster.Components.Host.Details.event:monster-details-closed
+ */
+class Details extends Collapse {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/details@@instance");
+	}
+
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		// the name is only used for the host config and the event name
+		this[nameSymbol] = "details";
+	}
+
+	/**
+	 * 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} classes CSS classes
+	 * @property {string} classes.button CSS class for the button
+	 * @property {Object} button Button configuration
+	 * @property {string} button.label Button label
+	 * @property {Object} features Feature configuration
+	 * @property {boolean} features.accordion Enable accordion mode
+	 * @property {boolean} features.persistState Persist the state in the host configuration
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				button: "Details",
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Details}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initButtonLabel.call(this);
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	connectedCallback() {;
+		super.connectedCallback();
+
+		const containDocument = this.shadowRoot;
+
+		if (containDocument !== null) {
+			const previousElement = this.previousElementSibling;
+			if (previousElement && previousElement.tagName === "MONSTER-DETAILS") {
+				this[buttonElementSymbol].style.borderTop = "0";
+			}
+		}
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-details";
+	}
+
+	/**
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		const css = super.getCSSStyleSheet();
+		css.push(DetailsStyleSheet);
+		return css;
+	}
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[buttonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=button]",
+	);
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[buttonEventHandlerSymbol] = (event) => {
+		this.toggle();
+	};
+
+	this[buttonElementSymbol].addEventListener(
+		"click",
+		this[buttonEventHandlerSymbol],
+	);
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function initButtonLabel() {;
+
+	let label;
+	const setLabel = false;
+	if (this.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
+		label = this.getAttribute(ATTRIBUTE_BUTTON_LABEL);
+	} else {
+		label = this.innerText;
+	}
+
+	if (!isString(label)) {
+		label = "";
+	}
+
+	label = label.trim();
+
+	if (label === "") {
+		label = this.getOption("labels.button", "Details");
+	}
+
+	if (label.length > 100) {
+		label = `${label.substring(0, 99)}…`;
+	}
+
+	this.setAttribute(ATTRIBUTE_BUTTON_LABEL, label);
+	this.setOption("labels.button", label);
+
+	return label;
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function getConfigKey() {;
+	return generateUniqueConfigKey("details", this.id, "state");
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" class="overflow-hidden">
+            <div data-monster-role="summary" part="summary">
+                <button part="button" data-monster-attributes="class path:classes.button"
+                        data-monster-role="button"
+                        data-monster-replace="path:labels.button | default:click me">click me
+                </button>
+            </div>
+            <div data-monster-role="detail">
+                <div data-monster-attributes="class path:classes.container" part="container"
+                     data-monster-role="container">
+                    <slot></slot>
+                </div>
+                <div class="deco-line" data-monster-role="deco"></div>
+            </div>
+        </div>`;
+}
+
+registerCustomElement(Details);

package/source/components/host/events.mjs

@@ -0,0 +1,131 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/component-form
+ * 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 before the overlay is opened. The event is fired on the overlay opener element.
+ *
+ * @memberOf Monster.Components.Host.Overlay
+ * @event event:monster-overlay-before-open
+ * @type {object}
+ */
+
+/**
+ * This event is fired after the overlay is opened. The event is fired on the overlay opener element.
+ *
+ * @memberOf Monster.Components.Host.Overlay
+ * @event event:monster-overlay-opened
+ * @type {object}
+ */
+
+/**
+ * This event is fired before the overlay is closed. The event is fired on the overlay opener element.
+ *
+ * @memberOf Monster.Components.Host.Overlay
+ * @event event:monster-overlay-before-close
+ * @type {object}
+ */
+
+/**
+ * This event is fired after the overlay is closed. The event is fired on the overlay opener element.
+ *
+ * @memberOf Monster.Components.Host.Overlay
+ * @event event:monster-overlay-closed
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the host connection process. The event is fired on the host element.
+ *
+ * @memberOf Monster.Components.Host.Host
+ * @event event:monster-host-connected
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the host disconnection process. The event is fired on the host element.
+ *
+ * @memberOf Monster.Components.Host.Host
+ * @event event:monster-host-disconnected
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component opening process.
+ *
+ * @memberOf Monster.Components.Host.Details
+ * @fires event:monster-details-before-open
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component opening process.
+ *
+ * @memberOf Monster.Components.Host.Details
+ * @fires event:monster-details-open
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Details
+ * @fires event:monster-details-before-close
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Details
+ * @fires event:monster-details-closed
+ * @type {object}
+ */
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Details
+ * @fires Monster.Components.Host.Details.event:monster-details-adjust-height
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component opening process.
+ *
+ * @memberOf Monster.Components.Host.Collapse
+ * @fires event:monster-collapse-before-open
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component opening process.
+ *
+ * @memberOf Monster.Components.Host.Collapse
+ * @fires event:monster-collapse-open
+ * @type {object}
+ */
+
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Collapse
+ * @fires event:monster-collapse-before-close
+ * @type {object}
+ */
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Collapse
+ * @fires event:monster-collapse-closed
+ * @type {object}
+ */
+/**
+ * This event is fired during the Details component closing process.
+ *
+ * @memberOf Monster.Components.Host.Collapse
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
+ * @type {object}
+ */