@schukai/monster 3.71.0 → 3.71.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.71.2] - 2024-06-25
+
+### Bug Fixes
+
+- data-monster-option-filter [#194](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/194)
+
+
+
+## [3.71.1] - 2024-06-25
+
+### Bug Fixes
+
+- remove polifill [#218](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/218)
+
+
+
 ## [3.71.0] - 2024-06-25
 
 ### Add Features

package/README.md

@@ -76,14 +76,7 @@ Voilà!
 ### Polyfill
 
 While we strive to work around some browser bugs, generally, we do not use polyfills or feature detection.
-However, many functions can be supplemented through [polyfill.io](https://polyfill.io/), thus enhancing compatibility.
-
-```html
-<script id="polyfill"
-        src="https://polyfill.io/v3/polyfill.min.js?features=AbortController,Array.prototype.entries,Array.prototype.fill,Array.prototype.find,Array.prototype.includes,Array.prototype.keys,Array.prototype.sort,Array.prototype.values,atob,AudioContext,blissfuljs,Blob,CharacterData.prototype.nextElementSibling,CharacterData.prototype.previousElementSibling,CharacterData.prototype.remove,console,console.error,console.log,CSS.supports,CustomEvent,DocumentFragment,DocumentFragment.prototype.append,DocumentFragment.prototype.prepend,DOMRect,DOMTokenList,DOMTokenList.prototype.forEach,DOMTokenList.prototype.replace,Element.prototype.append,Element.prototype.getAttributeNames,Element.prototype.prepend,Element.prototype.remove,Element.prototype.scroll,Event,EventSource,fetch,Function.prototype.name,globalThis,HTMLDocument,HTMLPictureElement,HTMLTemplateElement,IntersectionObserver,IntersectionObserverEntry,Intl,Intl.DateTimeFormat,Intl.NumberFormat,Intl.PluralRules,Map,Math.log2,MutationObserver,Node.prototype.contains,Node.prototype.getRootNode,Node.prototype.isConnected,Node.prototype.isSameNode,NodeList.prototype.forEach,Number.isFinite,Number.isInteger,Object.assign,Object.entries,Object.freeze,Object.getOwnPropertyNames,Object.prototype.toString,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,requestAnimationFrame,ResizeObserver,Set,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,TextDecoder,TextEncoder,Uint16Array,Uint8Array,URLSearchParams,WeakSet"
-        crossorigin="anonymous"
-        referrerpolicy="no-referrer"></script>
-```
+However, many functions can be supplemented through polyfills, thus enhancing compatibility.
 
 ## Questions
 

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.71.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.6","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.71.2"}

package/source/components/form/reload.mjs

@@ -12,24 +12,24 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	attributeObserverSymbol,
-	CustomElement,
-	initMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    attributeObserverSymbol,
+    CustomElement,
+    initMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString } from "../../types/is.mjs";
-import { ATTRIBUTE_FORM_RELOAD, ATTRIBUTE_FORM_URL } from "./constants.mjs";
-import { loadAndAssignContent } from "./util/fetch.mjs";
+import {isString} from "../../types/is.mjs";
+import {ATTRIBUTE_FORM_RELOAD, ATTRIBUTE_FORM_URL} from "./constants.mjs";
+import {loadAndAssignContent} from "./util/fetch.mjs";
 
-export { Reload };
+export {Reload};
 
 /**
  * @private
@@ -106,128 +106,128 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
  * @fires Monster.Components.event:monster-fetched
  */
 class Reload extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/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: false,
-				url: undefined,
-				reload: "onshow",
-				filter: undefined,
-				fetch: {
-					redirect: "error",
-					method: "GET",
-					mode: "same-origin",
-					credentials: "same-origin",
-					headers: {
-						accept: "text/html",
-					},
-				},
-			},
-			initOptionsFromArguments.call(this),
-		);
-	}
-
-	/**
-	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-	 *
-	 * @return {string[]}
-	 */
-	static get observedAttributes() {
-		const list = super.observedAttributes;
-		list.push(ATTRIBUTE_FORM_URL);
-		return list;
-	}
-
-	/**
-	 * @return {void}
-	 */
-	[initMethodSymbol]() {
-		super[initMethodSymbol]();
-
-		// data-monster-options
-		this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
-			if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
-				this.setOption("url", new URL(url, document.location).toString());
-			} else {
-				this.setOption("url", undefined);
-			}
-		};
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 * @throws {Error} missing default slot
-	 * @throws {Error} no shadow-root is defined
-	 * @throws {Error} missing url
-	 * @throws {Error} we won't be able to read the data
-	 * @throws {Error} request failed
-	 * @throws {Error} not found
-	 * @throws {Error} undefined status or type
-	 * @fires Monster.Components.event:monster-fetched
-	 * @return {Monster.Components.Form.Form}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initIntersectionObserver.call(this);
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-reload";
-	}
-
-	/**
-	 * load content from url
-	 *
-	 * It is important to know that with this function the loading is executed
-	 * directly. it is loaded as well when the element is not visible.
-	 *
-	 * @param {string|undefined} url
-	 */
-	fetch(url) {
-		if (isString(url) || url instanceof URL) {
-			this.setAttribute(ATTRIBUTE_FORM_URL, `${url}`);
-		}
-
-		return loadContent.call(this);
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     * @since 2.1.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/form/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: null,
+                url: null,
+                reload: "onshow",
+                filter: null,
+                fetch: {
+                    redirect: "error",
+                    method: "GET",
+                    mode: "same-origin",
+                    credentials: "same-origin",
+                    headers: {
+                        accept: "text/html",
+                    },
+                },
+            },
+            initOptionsFromArguments.call(this),
+        );
+    }
+
+    /**
+     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+     *
+     * @return {string[]}
+     */
+    static get observedAttributes() {
+        const list = super.observedAttributes;
+        list.push(ATTRIBUTE_FORM_URL);
+        return list;
+    }
+
+    /**
+     * @return {void}
+     */
+    [initMethodSymbol]() {
+        super[initMethodSymbol]();
+
+        // data-monster-options
+        this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
+            if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
+                this.setOption("url", new URL(url, document.location).toString());
+            } else {
+                this.setOption("url", undefined);
+            }
+        };
+    }
+
+    /**
+     * This method is called internal and should not be called directly.
+     * @throws {Error} missing default slot
+     * @throws {Error} no shadow-root is defined
+     * @throws {Error} missing url
+     * @throws {Error} we won't be able to read the data
+     * @throws {Error} request failed
+     * @throws {Error} not found
+     * @throws {Error} undefined status or type
+     * @fires Monster.Components.event:monster-fetched
+     * @return {Monster.Components.Form.Form}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initIntersectionObserver.call(this);
+    }
+
+    /**
+     * This method is called internal and should not be called directly.
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-reload";
+    }
+
+    /**
+     * load content from url
+     *
+     * It is important to know that with this function the loading is executed
+     * directly. it is loaded as well when the element is not visible.
+     *
+     * @param {string|undefined} url
+     */
+    fetch(url) {
+        if (isString(url) || url instanceof URL) {
+            this.setAttribute(ATTRIBUTE_FORM_URL, `${url}`);
+        }
+
+        return loadContent.call(this);
+    }
 }
 
 /**
@@ -241,19 +241,19 @@ class Reload extends CustomElement {
  * @return {object}
  */
 function initOptionsFromArguments() {
-	const options = {};
+    const options = {};
 
-	const url = this.getAttribute(ATTRIBUTE_FORM_URL);
+    const url = this.getAttribute(ATTRIBUTE_FORM_URL);
 
-	if (isString(url)) {
-		options["url"] = new URL(url, document.location).toString();
-	}
+    if (isString(url)) {
+        options["url"] = new URL(url, document.location).toString();
+    }
 
-	if (this.hasAttribute(ATTRIBUTE_FORM_RELOAD)) {
-		options["reload"] = this.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase();
-	}
+    if (this.hasAttribute(ATTRIBUTE_FORM_RELOAD)) {
+        options["reload"] = this.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase();
+    }
 
-	return options;
+    return options;
 }
 
 /**
@@ -268,37 +268,37 @@ function initOptionsFromArguments() {
  * @fires Monster.Components.event:monster-fetched
  */
 function initIntersectionObserver() {
-	if (this[intersectionObserverWasInitialized] === true) {
-		return;
-	}
-
-	this[intersectionObserverWasInitialized] = true;
-
-	const options = {
-		threshold: [0.5],
-	};
-
-	const callback = (entries, observer) => {
-		for (const [, entry] of entries.entries()) {
-			if (entry.isIntersecting === true) {
-				// undefined or always do the same
-				if (this.getOption("reload") === "onshow") {
-					observer.disconnect();
-				}
-
-				try {
-					loadContent.call(this).catch((e) => {
-						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
-					});
-				} catch (e) {
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
-				}
-			}
-		}
-	};
-
-	const observer = new IntersectionObserver(callback, options);
-	observer.observe(this);
+    if (this[intersectionObserverWasInitialized] === true) {
+        return;
+    }
+
+    this[intersectionObserverWasInitialized] = true;
+
+    const options = {
+        threshold: [0.5],
+    };
+
+    const callback = (entries, observer) => {
+        for (const [, entry] of entries.entries()) {
+            if (entry.isIntersecting === true) {
+                // undefined or always do the same
+                if (this.getOption("reload") === "onshow") {
+                    observer.disconnect();
+                }
+
+                try {
+                    loadContent.call(this).catch((e) => {
+                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+                    });
+                } catch (e) {
+                    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+                }
+            }
+        }
+    };
+
+    const observer = new IntersectionObserver(callback, options);
+    observer.observe(this);
 }
 
 /**
@@ -318,41 +318,41 @@ function initIntersectionObserver() {
  * @return {Promise}
  */
 function loadContent() {
-	const url = this.getOption("url", undefined);
-	if (!isString(url) || url === "") {
-		throw new Error("missing url");
-	}
-
-	const options = this.getOption("fetch", {});
-
-	let parentNode = this;
-	if (this.shadowRoot) {
-		parentNode = this.shadowRoot;
-	}
-
-	let container = parentNode.querySelector(`[${ATTRIBUTE_ROLE}=container]`);
-	let currentDisplayMode = container?.style?.display;
-
-	if (currentDisplayMode === undefined) {
-		currentDisplayMode = "inherit";
-	}
-
-	if (!(container instanceof HTMLElement)) {
-		container = document.createElement("div");
-		container.style.display = "none";
-		container.setAttribute(ATTRIBUTE_ROLE, "container");
-		parentNode.appendChild(container);
-	}
-
-	return loadAndAssignContent(container, url, options, this.getOption("filter"))
-		.then(() => {
-			if (currentDisplayMode !== undefined) {
-				container.style.display = currentDisplayMode;
-			}
-		})
-		.catch((e) => {
-			throw e;
-		});
+    const url = this.getOption("url", undefined);
+    if (!isString(url) || url === "") {
+        throw new Error("missing url");
+    }
+
+    const options = this.getOption("fetch", {});
+
+    let parentNode = this;
+    if (this.shadowRoot) {
+        parentNode = this.shadowRoot;
+    }
+
+    let container = parentNode.querySelector(`[${ATTRIBUTE_ROLE}=container]`);
+    let currentDisplayMode = container?.style?.display;
+
+    if (currentDisplayMode === undefined) {
+        currentDisplayMode = "inherit";
+    }
+
+    if (!(container instanceof HTMLElement)) {
+        container = document.createElement("div");
+        container.style.display = "none";
+        container.setAttribute(ATTRIBUTE_ROLE, "container");
+        parentNode.appendChild(container);
+    }
+
+    return loadAndAssignContent(container, url, options, this.getOption("filter"))
+        .then(() => {
+            if (currentDisplayMode !== undefined) {
+                container.style.display = currentDisplayMode;
+            }
+        })
+        .catch((e) => {
+            throw e;
+        });
 }
 
 /**
@@ -360,7 +360,7 @@ function loadContent() {
  * @return {string}
  */
 function getTemplate() {
-	return this.innerHTML;
+    return this.innerHTML;
 }
 
 registerCustomElement(Reload);

package/test/web/test.html

@@ -5,12 +5,6 @@
     <title>Mocha Monster</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="mocha.css"/>
-   <script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=AbortController,Array.prototype.entries,Array.prototype.fill,Array.prototype.find,Array.prototype.includes,Array.prototype.keys,Array.prototype.sort,Array.prototype.values,atob,AudioContext,blissfuljs,Blob,CharacterData.prototype.nextElementSibling,CharacterData.prototype.previousElementSibling,CharacterData.prototype.remove,console,console.error,console.log,CSS.supports,CustomEvent,DocumentFragment,DocumentFragment.prototype.append,DocumentFragment.prototype.prepend,DOMRect,DOMTokenList,DOMTokenList.prototype.forEach,DOMTokenList.prototype.replace,Element.prototype.append,Element.prototype.getAttributeNames,Element.prototype.prepend,Element.prototype.remove,Element.prototype.scroll,Event,EventSource,fetch,Function.prototype.name,globalThis,HTMLDocument,HTMLPictureElement,HTMLTemplateElement,IntersectionObserver,IntersectionObserverEntry,Intl,Intl.DateTimeFormat,Intl.NumberFormat,Intl.PluralRules,Map,Math.log2,MutationObserver,Node.prototype.contains,Node.prototype.getRootNode,Node.prototype.isConnected,Node.prototype.isSameNode,NodeList.prototype.forEach,Number.isFinite,Number.isInteger,Object.assign,Object.entries,Object.freeze,Object.getOwnPropertyNames,Object.prototype.toString,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,requestAnimationFrame,ResizeObserver,Set,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,TextDecoder,TextEncoder,Uint16Array,Uint8Array,URLSearchParams,WeakSet"
-            src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.every,Array.prototype.fill,Array.prototype.filter,Array.prototype.find,Array.prototype.forEach,Array.prototype.includes,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.some,Array.prototype.sort,Array.prototype.values,ArrayBuffer,atob,Blob,console,CustomEvent,DataView,Date.prototype.toISOString,document,Document,DocumentFragment,Element,Event,fetch,Function.prototype.bind,getComputedStyle,globalThis,HTMLDocument,HTMLTemplateElement,IntersectionObserver,Intl,JSON,Map,Math.log2,MutationObserver,Number.isFinite,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,requestAnimationFrame,ResizeObserver,Set,String.prototype.endsWith,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
-            src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,DataView,document,DocumentFragment,Element,Event,globalThis,HTMLDocument,HTMLTemplateElement,JSON,Map,Math.log2,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.getOwnPropertyDescriptor,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.iterator,WeakMap,WeakSet"
-            crossorigin="anonymous"
-            referrerpolicy="no-referrer"></script>
-    <script src="https://cdn.jsdelivr.net/npm/element-internals-polyfill"></script>
 
 </head>
 <body>