@schukai/monster 3.51.4 → 3.52.0

package/source/components/host/host.mjs

@@ -0,0 +1,420 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import "../notify/notify.mjs";
+import { HostStyleSheet } from "./stylesheet/host.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { Embed } from "../../i18n/providers/embed.mjs";
+import { getDocumentTranslations } from "../../i18n/translations.mjs";
+import { windowReady } from "../../dom/ready.mjs";
+import { FocusManager } from "../../dom/focusmanager.mjs";
+import { ResourceManager } from "../../dom/resourcemanager.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { isIterable } from "../../types/is.mjs";
+import "./config-manager.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+
+export { Host };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const promisesSymbol = Symbol("promisesSymbol");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const notifyElementSymbol = Symbol("notifyElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const overlayElementSymbol = Symbol("overlayElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const configManagerElementSymbol = Symbol("configManagerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const focusManagerSymbol = Symbol("focusManager");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const resourceManagerSymbol = Symbol("resourceManager");
+
+/**
+ * The Host component is used to encapsulate the content of a web app.
+ *
+ * <img src="./images/host.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-host></monster-host>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-state/source/host.mjs';
+ * document.createElement('monster-host');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml host.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Host
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A simple host component
+ * @fires Monster.Components.Host.Host#monster-host-connected
+ * @fires Monster.Components.Host.Host#monster-host-disconnected
+ */
+class Host extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/Host@@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} features Feature definitions
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 * @param key
+	 * @returns {Promise}
+	 */
+	getConfig(key) {
+		if (this[configManagerElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no config manager element");
+		}
+		return this[configManagerElementSymbol].getConfig(key);
+	}
+
+	/**
+	 *
+	 * @param {string} key
+	 * @param {*} value
+	 * @returns {Promise}
+	 */
+	setConfig(key, value) {
+		if (this[configManagerElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no config manager element");
+		}
+
+		return this[configManagerElementSymbol].setConfig(key, value);
+	}
+
+	/**
+	 * @private
+	 * @fires Monster.Components.Host.Host#monster-host-connected
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		/**
+		 * show the scroll bar always
+		 * @type {string}
+		 */
+		document.documentElement.style.overflowY = "scroll";
+
+		const classNames = this.getOption("classes.body");
+
+		if (document.body.classList.contains(classNames)) {
+			document.body.classList.remove(classNames);
+		}
+
+		fireCustomEvent(this, "monster-host-connected");
+	}
+
+	/**
+	 * @private
+	 * @fires Monster.Components.Host.Host#monster-host-disconnected
+	 */
+	disconnectedCallback() {;
+
+		super.disconnectedCallback();
+		document.documentElement.style.overflowY = "";
+
+		const classNames = this.getOption("classes.body");
+		if (!document.body.classList.contains(classNames)) {
+			document.body.classList.add(classNames);
+		}
+
+		if (isIterable(this[promisesSymbol]) === false) {
+			this[promisesSymbol] = [];
+		}
+
+		this[promisesSymbol].push(
+			new Promise((resolve, reject) => {
+				this.addEventListener(
+					"monster-host-connected",
+					() => {
+						resolve();
+					},
+					{ once: true },
+				);
+			}),
+		);
+
+		fireCustomEvent(this, "monster-host-disconnected");
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Host.Host}
+	 */
+	[assembleMethodSymbol]() {;
+
+		this[promisesSymbol] = [];
+		this[promisesSymbol].push(windowReady);
+
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initTranslations.call(this);
+
+		this[focusManagerSymbol] = new FocusManager(this);
+		this[resourceManagerSymbol] = new ResourceManager(this);
+
+		try {
+			this[promisesSymbol].push(this[resourceManagerSymbol].available());
+		} catch (e) {
+			return Promise.reject(e);
+		}
+
+		if (this.isConnected === false) {
+			this[promisesSymbol].push(
+				new Promise((resolve, reject) => {
+					this.addEventListener(
+						"monster-host-connected",
+						() => {
+							resolve();
+						},
+						{ once: true },
+					);
+				}),
+			);
+		}
+	}
+
+	/**
+	 * The Promise is resolved when the element is connected to the DOM and all resources are available.
+	 * If the element is not connected to the DOM, the Promise is rejected.
+	 *
+	 * @return {Promise}
+	 */
+	onReady() {;
+
+		if (isIterable(this[promisesSymbol]) === false) {
+			this[promisesSymbol] = [];
+		}
+
+		return Promise.all(this[promisesSymbol]).then(() => {
+			this[promisesSymbol] = [];
+			return this;
+		});
+	}
+
+	/**
+	 * @see {@link https://monsterjs.org/en/doc/monster/Monster.DOM.FocusManager.html|Monster.DOM.FocusManager}
+	 * @returns {*}
+	 */
+	get focusManager() {
+		return this[focusManagerSymbol];
+	}
+
+	/**
+	 * @see {@link https://monsterjs.org/en/doc/monster/Monster.DOM.ResourceManager.html|Monster.DOM.ResourceManager}
+	 * @returns {*}
+	 */
+	get resourceManager() {
+		return this[resourceManagerSymbol];
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Host}
+	 * @throws {Error} There is no overlay element defined.
+	 */
+	toggleOverlay() {
+		if (this[overlayElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no overlay element defined.");
+		}
+
+		this[overlayElementSymbol].toggle();
+		return this;
+	}
+
+	/**
+	 * @return {Host}
+	 * @throws {Error} There is no overlay element defined.
+	 */
+	openOverlay() {
+		if (this[overlayElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no overlay element defined.");
+		}
+
+		this[overlayElementSymbol].open();
+		return this;
+	}
+
+	/**
+	 * @return {Host}
+	 * @throws {Error} There is no overlay element defined.
+	 */
+	closeOverlay() {
+		if (this[overlayElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no overlay element defined.");
+		}
+
+		this[overlayElementSymbol].close();
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-host";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [HostStyleSheet];
+	}
+
+	/**
+	 *
+	 * @returns {Monster.I18n.Locale}
+	 */
+	get locale() {
+		return getLocaleOfDocument();
+	}
+
+	/**
+	 *
+	 * @returns {Translations}
+	 */
+	get translations() {
+		return getDocumentTranslations();
+	}
+
+	/**
+	 *
+	 * @param {string|Message} message
+	 */
+	pushNotification(message) {;
+		if (this[notifyElementSymbol] instanceof HTMLElement === false) {
+			throw new Error("There is no notify element defined.");
+		}
+
+		this[notifyElementSymbol].push(message);
+		return this;
+	}
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[overlayElementSymbol] = this.querySelector("monster-overlay");
+	this[notifyElementSymbol] = this.querySelector("monster-notify");
+	this[configManagerElementSymbol] = this.querySelector(
+		"monster-config-manager",
+	);
+}
+
+function initTranslations() {;
+
+	if (isIterable(this[promisesSymbol]) === false) {
+		this[promisesSymbol] = [];
+	}
+
+	this[promisesSymbol].push(Embed.assignTranslationsToElement());
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {;
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="host-container">
+            <div data-monster-replace="path:host-container.content"
+                 data-monster-attributes="part path:host-container.name, data-monster-role path:host-container.name"></div>
+        </template>
+
+        <div data-monster-role="host-container">
+            <slot></slot>
+        </div>`;
+}
+
+registerCustomElement(Host);

package/source/components/host/namespace.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all host related functions.
+ *
+ * @namespace Monster.Components.Host
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};