@schukai/monster 1.30.0 → 2.0.0

package/source/dom/{customelement.js → customelement.mjs}

@@ -1,31 +1,33 @@
-'use strict';
-
 /**
- * @author schukai GmbH
+ * Copyright schukai GmbH and contributors 2022. 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 {internalSymbol} from "../constants.js";
-import {extend} from "../data/extend.js";
-import {Pathfinder} from "../data/pathfinder.js";
-import {assignToNamespace, Monster} from '../namespace.js';
-import {parseDataURL} from "../types/dataurl.js";
-import {getGlobalObject} from "../types/global.js";
-import {isArray, isFunction, isObject, isString} from "../types/is.js";
-import {Observer} from "../types/observer.js";
-import {ProxyObserver} from "../types/proxyobserver.js";
-import {validateFunction, validateInstance, validateObject, validateString} from "../types/validate.js";
-import {clone} from "../util/clone.js";
-import {addAttributeToken, addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
+import {internalSymbol} from "../constants.mjs";
+import {extend} from "../data/extend.mjs";
+import {Pathfinder} from "../data/pathfinder.mjs";
+
+import {parseDataURL} from "../types/dataurl.mjs";
+import {getGlobalObject} from "../types/global.mjs";
+import {isArray, isFunction, isObject, isString} from "../types/is.mjs";
+import {Observer} from "../types/observer.mjs";
+import {ProxyObserver} from "../types/proxyobserver.mjs";
+import {validateFunction, validateInstance, validateObject, validateString} from "../types/validate.mjs";
+import {clone} from "../util/clone.mjs";
+import {addAttributeToken, addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.mjs";
 import {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_OPTIONS,
     ATTRIBUTE_OPTIONS_SELECTOR,
     objectUpdaterLinkSymbol
-} from "./constants.js";
-import {findDocumentTemplate, Template} from "./template.js";
-import {Updater} from "./updater.js";
+} from "./constants.mjs";
+import {findDocumentTemplate, Template} from "./template.mjs";
+import {Updater} from "./updater.mjs";
 
+export {CustomElement, initMethodSymbol, assembleMethodSymbol, attributeObserverSymbol, registerCustomElement, assignUpdaterToElement}
 
 /**
  * @memberOf Monster.DOM
@@ -101,12 +103,6 @@ const attributeObserverSymbol = Symbol('attributeObserver');
  *
  * You can create the object via the function `document.createElement()`.
  *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * document.createElement('monster-')
- * </script>
- * ```
  *
  * ## Interaction
  *
@@ -172,24 +168,10 @@ const attributeObserverSymbol = Symbol('attributeObserver');
  *       }
  * ```
  *
- * @example
- *
- * // In the example the the user can use his own template by creating a template in the DOM with the ID `my-custom-element`.
- * // You can also specify a theme (for example `mytheme`), then it will search for the ID `my-custom-element-mytheme` and
- * // if not available for the ID `my-custom-element`.
- *
- * class MyCustomElement extends CustomElement {
- * 
- *    static getTag() {
- *        return "my-custom-element"
- *    }
- *
- * }
- *
- * // ↦ <my-custom-element></my-custom-element>
- *
+ * @externalExample ../../example/dom/theme.mjs
  * @see https://github.com/WICG/webcomponents
  * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
+ * @license AGPLv3
  * @since 1.7.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -207,7 +189,7 @@ class CustomElement extends HTMLElement {
      */
     constructor() {
         super();
-        this[internalSymbol] = new ProxyObserver({'options': extend({}, this.defaults, getOptionsFromAttributes.call(this), getOptionsFromScriptTag.call(this))});
+        this[internalSymbol] = new ProxyObserver({'options': extend({}, this.defaults)});
         this[attributeObserverSymbol] = {};
         initOptionObserver.call(this);
         this[initMethodSymbol]();
@@ -234,7 +216,7 @@ class CustomElement extends HTMLElement {
      * }
      * ```
      *
-     * to set the options via the html tag the attribute data-monster-options must be set.
+     * To set the options via the html tag the attribute data-monster-options must be set.
      * As value a JSON object with the desired values must be defined.
      *
      * Since 1.18.0 the JSON can be specified as a DataURI.
@@ -248,11 +230,11 @@ class CustomElement extends HTMLElement {
      *        }
      *    })),'application/json',true).toString()
      * ```
-     * 
+     *
      * The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.
-     * 
+     *
      * As value a selector must be specified, which belongs to a script tag and contains the configuration as json.
-     * 
+     *
      * ```
      * <script id="id-for-this-config" type="application/json">
      *    {
@@ -260,7 +242,8 @@ class CustomElement extends HTMLElement {
      *    }
      * </script>
      * ```
-     * 
+     *
+     * The individual configuration values can be found in the table.
      *
      * @property {boolean} disabled=false Object The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.
      * @property {string} shadowMode=open `open` Elements of the shadow root are accessible from JavaScript outside the root, for example using. `close` Denies access to the node(s) of a closed shadow root from JavaScript outside it
@@ -423,6 +406,17 @@ class CustomElement extends HTMLElement {
         const self = this;
         let elements, nodeList;
 
+        const AttributeOptions = getOptionsFromAttributes.call(self);
+        if (isObject(AttributeOptions) && Object.keys(AttributeOptions).length > 0) {
+            self.setOptions(AttributeOptions);
+        }
+
+        const ScriptOptions = getOptionsFromScriptTag.call(self);
+        if (isObject(ScriptOptions) && Object.keys(ScriptOptions).length > 0) {
+            self.setOptions(ScriptOptions);
+        }
+
+
         if (self.getOption('shadowMode', false) !== false) {
             try {
                 initShadowRoot.call(self);
@@ -545,6 +539,7 @@ class CustomElement extends HTMLElement {
  * @param {String|undefined|null} name name of the slot (if the parameter is undefined, all slots are searched, if the parameter has the value null, all slots without a name are searched. if a string is specified, the slots with this name are searched.)
  * @return {*}
  * @this CustomElement
+ * @license AGPLv3
  * @since 1.23.0
  * @throws {Error} query must be a string
  */
@@ -619,6 +614,7 @@ function containChildNode(node) {
 }
 
 /**
+ * @license AGPLv3
  * @since 1.15.0
  * @private
  * @this CustomElement
@@ -693,7 +689,15 @@ function initOptionObserver() {
     // data-monster-options
     self[attributeObserverSymbol][ATTRIBUTE_OPTIONS] = () => {
         const options = getOptionsFromAttributes.call(self);
-        if (isObject(options)) {
+        if (isObject(options) && Object.keys(options).length > 0) {
+            self.setOptions(options);
+        }
+    }
+
+    // data-monster-options-selector
+    self[attributeObserverSymbol][ATTRIBUTE_OPTIONS_SELECTOR] = () => {
+        const options = getOptionsFromScriptTag.call(self);
+        if (isObject(options) && Object.keys(options).length > 0) {
             self.setOptions(options);
         }
     }
@@ -808,6 +812,7 @@ function initHtmlContent() {
  * @return {CustomElement}
  * @memberOf Monster.DOM
  * @this CustomElement
+ * @license AGPLv3
  * @since 1.16.0
  * @throws {TypeError} value is not an instance of
  */
@@ -871,6 +876,7 @@ function initCSSStylesheet() {
  * @throws {Error} html is not set.
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
  * @memberOf Monster.DOM
+ * @license AGPLv3
  * @since 1.8.0
  */
 function initShadowRoot() {
@@ -907,6 +913,7 @@ function initShadowRoot() {
  *
  * @param {CustomElement} element
  * @return {void}
+ * @license AGPLv3
  * @since 1.7.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -923,6 +930,7 @@ function registerCustomElement(element) {
  * @param element
  * @param object
  * @return {Promise[]}
+ * @license AGPLv3
  * @since 1.23.0
  * @memberOf Monster.DOM
  */
@@ -957,15 +965,3 @@ function assignUpdaterToElement(elements, object) {
 
     return result;
 }
-
-assignToNamespace('Monster.DOM', CustomElement, registerCustomElement, assignUpdaterToElement);
-export {
-    Monster,
-    registerCustomElement,
-    CustomElement,
-    initMethodSymbol,
-    assembleMethodSymbol,
-    assignUpdaterToElement,
-    attributeObserverSymbol,
-    getSlottedElements
-}

package/source/dom/{events.js → events.mjs}

@@ -1,36 +1,23 @@
-'use strict';
-
-
 /**
- * @author schukai GmbH
+ * Copyright schukai GmbH and contributors 2022. 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 {assignToNamespace, Monster} from '../namespace.js';
-import {isArray,isObject} from "../types/is.js";
-import {validateInstance, validateString} from "../types/validate.js";
-import {getDocument} from "./util.js";
+
+import {isArray, isObject} from "../types/is.mjs";
+import {validateInstance, validateString} from "../types/validate.mjs";
+import {getDocument} from "./util.mjs";
+
+export {fireEvent, fireCustomEvent, findTargetElementFromEvent}
 
 /**
- * You can call the function via the monster namespace `new Monster.DOM.fireEvent()`.
- *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.fireEvent()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
- * fireEvent()
- * </script>
- * ```
+ * The function sends an event
  *
  * @param {HTMLElement|HTMLCollection|NodeList} element
  * @param {string} type
  * @return {void}
+ * @license AGPLv3
  * @since 1.10.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -68,25 +55,10 @@ function fireEvent(element, type) {
 /**
  * You can call the function via the monster namespace `new Monster.DOM.fireCustomEvent()`.
  *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.fireCustomEvent()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {fireCustomEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
- * fireCustomEvent()
- * </script>
- * ```
- *
  * @param {HTMLElement|HTMLCollection|NodeList} element
  * @param {string} type
  * @return {void}
+ * @license AGPLv3
  * @since 1.29.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -125,25 +97,8 @@ function fireCustomEvent(element, type, detail) {
  * This function gets the path `Event.composedPath()` from an event and tries to find the next element
  * up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null,
  * is specified, only the attribute is searched.
- *
- * You can call the function via the monster namespace `new Monster.DOM.findTargetElementFromEvent()`.
- *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.findTargetElementFromEvent()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/events.js';
- * findTargetElementFromEvent()
- * </script>
- * ```
- *
+ * 
+ * @license AGPLv3
  * @since 1.14.0
  * @param {Event} event
  * @param {string} attributeName
@@ -179,7 +134,3 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
     return undefined;
 
 }
-
-
-assignToNamespace('Monster.DOM', findTargetElementFromEvent, fireEvent, fireCustomEvent);
-export {Monster, findTargetElementFromEvent, fireEvent, fireCustomEvent}

package/source/dom/{focusmanager.js → focusmanager.mjs}

@@ -1,18 +1,18 @@
-'use strict';
-
-
 /**
- * @author schukai GmbH
+ * Copyright schukai GmbH and contributors 2022. 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 {extend} from "../data/extend.mjs";
+import {BaseWithOptions} from "../types/basewithoptions.mjs";
+import {getGlobalObject} from "../types/global.mjs";
+import {isArray} from "../types/is.mjs";
+import {Stack} from "../types/stack.mjs";
+import {validateInstance, validateString} from "../types/validate.mjs";
 
-import {extend} from "../data/extend.js";
-import {assignToNamespace} from "../namespace.js";
-import {BaseWithOptions} from "../types/basewithoptions.js";
-import {getGlobalObject} from "../types/global.js";
-import {isArray} from "../types/is.js";
-import {Stack} from "../types/stack.js";
-import {validateInstance, validateString} from "../types/validate.js";
+export {FocusManager}
 
 /**
  * @private
@@ -37,31 +37,14 @@ const stackSymbol = Symbol('stack');
 /**
  * With the focusmanager the focus can be stored in a document, recalled and moved.
  *
- * You can create the object via the monster namespace `new Monster.DOM.FocusManager()`.
- *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.FocusManager()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this object individually.
- *
- * ```
- * <script type="module">
- * import {FocusManager} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/focusmanager.js';
- * new FocusManager()
- * </script>
- * ```
- *
+ * @license AGPLv3
  * @since 1.25.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
  * @throws {Error} unsupported locale
  * @summary Handle the focus
  */
-class FocusManager extends BaseWithOptions {
+ class FocusManager extends BaseWithOptions {
 
     /**
      *
@@ -239,10 +222,6 @@ class FocusManager extends BaseWithOptions {
 }
 
 
-assignToNamespace('Monster.DOM', FocusManager);
-export {FocusManager}
-
-
 
 
 

package/source/dom/{locale.js → locale.mjs}

@@ -1,12 +1,15 @@
-'use strict';
-
 /**
- * @author schukai GmbH
+ * Copyright schukai GmbH and contributors 2022. 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 {parseLocale} from "../i18n/locale.js";
-import {assignToNamespace, Monster} from '../namespace.js';
-import {getDocument} from "./util.js";
+import {parseLocale} from "../i18n/locale.mjs";
+
+import {getDocument} from "./util.mjs";
+
+export {getLocaleOfDocument}
 
 /**
  * @private
@@ -17,29 +20,14 @@ const DEFAULT_LANGUAGE = 'en';
 /**
  * With this function you can read the language version set by the document.
  * For this the attribute `lang` in the html tag is read. If no attribute is set, `en` is used as default.
- * 
+ *
  * ```html
  * <html lang="en">
  * ```
  *
  * You can call the function via the monster namespace `new Monster.DOM.getLocaleOfDocument()`.
  *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.getLocaleOfDocument()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/locale.js';
- * new getLocaleOfDocument()
- * </script>
- * ```
- *
+ * @license AGPLv3
  * @since 1.13.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -61,6 +49,3 @@ function getLocaleOfDocument() {
 
     return parseLocale(DEFAULT_LANGUAGE);
 }
-
-assignToNamespace('Monster.DOM', getLocaleOfDocument);
-export {Monster, getLocaleOfDocument}

package/source/dom/{namespace.js → namespace.mjs}

@@ -1,5 +1,3 @@
-'use strict';
-
 /**
  * In this namespace you will find classes and methods for handling the DOM.
  *
@@ -7,9 +5,4 @@
  * @memberOf Monster
  * @author schukai GmbH
  */
-
-/**
- * @private
- * @type {string}
- */
-export const namespace = "Monster.DOM";
+const ns = {};

package/source/dom/ready.mjs

@@ -0,0 +1,63 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. 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 {getDocument, getWindow} from "./util.mjs";
+
+export {domReady, windowReady}
+
+/**
+ * This variable is a promise that is fulfilled as soon as the dom is available.
+ *
+ * The DOMContentLoaded event is fired when the original HTML document is fully loaded and parsed
+ * without waiting for stylesheets, images, and subframes to finish loading.
+ *
+ * @license AGPLv3
+ * @since 1.31.0
+ * @memberOf Monster.DOM
+ * @summary variable to check if dom is ready
+ * @type {Promise}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
+ */
+const domReady = new Promise(resolve => {
+
+    const document = getDocument();
+
+    if (document.readyState === "loading") {
+        document.addEventListener('DOMContentLoaded', resolve);
+    } else {
+        resolve();
+    }
+});
+
+
+/**
+ * This variable is a promise that is fulfilled as soon as the windows is available.
+ *
+ * The load event fires when the entire page is loaded, including all dependent resources such as stylesheets,
+ * assets, and images. Unlike DOMContentLoaded, which fires as soon as the DOM of the page is loaded,
+ * without waiting for the resources to finish loading.
+ *
+ * @license AGPLv3
+ * @since 1.31.0
+ * @memberOf Monster.DOM
+ * @summary variable to check if window is ready
+ * @type {Promise}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
+ */
+const windowReady = new Promise(resolve => {
+
+    const document = getDocument();
+    const window = getWindow();
+
+    if (document.readyState === 'complete') {
+        resolve();
+    } else {
+        window.addEventListener('load', resolve);
+    }
+});

package/source/dom/resource/{data.js → data.mjs}

@@ -1,13 +1,13 @@
-'use strict';
-
 /**
- * @author schukai GmbH
+ * Copyright schukai GmbH and contributors 2022. 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 {internalStateSymbol} from "../../constants.js";
-import {extend} from "../../data/extend.js";
-import {assignToNamespace, Monster} from "../../namespace.js";
-import {getGlobalFunction} from "../../types/global.js";
+import {internalStateSymbol} from "../../constants.mjs";
+import {extend} from "../../data/extend.mjs";
+import {getGlobalFunction} from "../../types/global.mjs";
 import {
     ATTRIBUTE_CLASS,
     ATTRIBUTE_ERRORMESSAGE,
@@ -16,31 +16,15 @@ import {
     ATTRIBUTE_TITLE,
     ATTRIBUTE_TYPE,
     TAG_SCRIPT
-} from "../constants.js";
-import {KEY_DOCUMENT, KEY_QUERY, referenceSymbol, Resource} from "../resource.js";
+} from "../constants.mjs";
+import {KEY_DOCUMENT, KEY_QUERY, referenceSymbol, Resource} from "../resource.mjs";
 
+export {Data}
 
 /**
  * This class is used by the resource manager to embed data.
  *
- * You can call the method via the monster namespace `new Monster.DOM.Resource.Data()`.
- *
- * ```
- * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
- * new Monster.DOM.Resource.Data()
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {Data} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/resource/data.js';
- * new Data()
- * </script>
- * ```
- *
+ * @license AGPLv3
  * @since 1.25.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM.Resource
@@ -164,7 +148,3 @@ function appendToDocument() {
 
     return self;
 }
-
-
-assignToNamespace('Monster.DOM.Resource', Data);
-export {Monster, Data}

package/source/dom/resource/link/namespace.mjs

@@ -0,0 +1,10 @@
+
+
+/**
+ * In this namespace you will find classes and methods for links
+ *
+ * @namespace Monster.DOM.Resource.Link
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/dom/resource/link/stylesheet.mjs

@@ -0,0 +1,35 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. 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 {extend} from "../../../data/extend.mjs";
+import {Link} from "../link.mjs";
+
+export {Stylesheet}
+
+/**
+ * This class is used by the resource manager to embed external resources.
+ *
+ * @license AGPLv3
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM.Resource
+ * @summary A Resource class
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
+ */
+class Stylesheet extends Link {
+
+    /**
+     * @property {string} rel {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel}
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            rel: 'stylesheet'
+        })
+    }
+
+}
+