@schukai/monster 3.52.1 → 3.53.0

package/CHANGELOG.md

@@ -1,10 +1,23 @@
 
+## [3.53.0] - 2023-11-11
+
+### Add Features
+
+- new icons (css) [#130](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/130)
+### Changes
+
+- tidy code
+- tidy code
+
 ## [3.52.1] - 2023-11-05
 
 ### Bug Fixes
 
 - only 10 tabs can be activated [#129](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/129)
 - fix some css bugs [#128](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/128)
+### Changes
+
+- release and publish to npm new version 3.52.1
 
 ## [3.52.0] - 2023-11-03
 

package/README.md

@@ -76,7 +76,7 @@ We do try to work around some browser bugs, but on the whole we don't use polyfi
 However, many functions can be mapped via [polyfill.io](https://polyfill.io/) and thus the compatibility can be increased.
 
 ```html
-<script id="polyfill" 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"
+<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>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.52.1",
+  "version": "3.53.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/components/datatable/columnbar.mjs

@@ -133,7 +133,7 @@ class ColumnBar extends CustomElement {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -152,8 +152,7 @@ class ColumnBar extends CustomElement {
  * @private
  * @return {Monster.Components.Datatable.Form}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}

package/source/components/datatable/dataset.mjs

@@ -130,7 +130,7 @@ class DataSet extends CustomElement {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		// initControlReferences.call(self);
@@ -174,8 +174,7 @@ class DataSet extends CustomElement {
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
 		const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
 		if (index) {
@@ -188,8 +187,7 @@ function initEventHandler() {;
  *
  * @param {Onject} options
  */
-function updateOptionsFromArguments(options) {;
-
+function updateOptionsFromArguments(options) {
 	const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
 
 	if (index !== null && index !== undefined) {

package/source/components/datatable/datasource/dom.mjs

@@ -74,7 +74,7 @@ class Dom extends Datasource {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initEventHandler.call(this);
 		updateDataSource.call(this);
@@ -100,11 +100,10 @@ class Dom extends Datasource {
 	 * Reloads the data
 	 * @returns {Promise<never>|*}
 	 */
-	reload() {;
-	}
+	reload() {}
 
 	connectedCallback() {
-		super.connectedCallback();;
+		super.connectedCallback();
 
 		if (this.getOption("features.autoInit")) {
 			updateDataSource.call(this);
@@ -115,8 +114,7 @@ class Dom extends Datasource {
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	/**
 	 * @param {Event} event
 	 */
@@ -134,8 +132,7 @@ function initEventHandler() {;
 /**
  * @private
  */
-function updateDataSource() {;
-
+function updateDataSource() {
 	let data = null;
 	getSlottedElements.call(this).forEach((element) => {
 		if (!(element instanceof HTMLScriptElement)) {

package/source/components/datatable/datasource/rest.mjs

@@ -139,7 +139,7 @@ class Rest extends Datasource {
 	 * @param {string} orderBy
 	 * @returns {Monster.Components.Datatable.Datasource.Rest}
 	 */
-	setParameters({ page, query, orderBy }) {;
+	setParameters({ page, query, orderBy }) {
 		const parameters = this.getOption("read.parameters");
 		if (query !== undefined) {
 			parameters.query = `${query}`;
@@ -157,7 +157,7 @@ class Rest extends Datasource {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initEventHandler.call(this);
@@ -176,8 +176,7 @@ class Rest extends Datasource {
 	 * Fetches the data from the rest api
 	 * @returns {Promise<never>|*}
 	 */
-	fetch() {;
-
+	fetch() {
 		const opt = clone(this.getOption("read"));
 		this[dataSourceSymbol].setOption("read", opt);
 
@@ -225,7 +224,7 @@ class Rest extends Datasource {
 	 * @private
 	 */
 	connectedCallback() {
-		super.connectedCallback();;
+		super.connectedCallback();
 
 		setTimeout(() => {
 			if (this.getOption("features.filter", false) === true) {
@@ -238,7 +237,7 @@ class Rest extends Datasource {
 	 * @private
 	 */
 	disconnectedCallback() {
-		super.disconnectedCallback();;
+		super.disconnectedCallback();
 		removeFilter.call(this);
 	}
 }
@@ -246,7 +245,7 @@ class Rest extends Datasource {
 /**
  * @private
  */
-function removeFilter() {;
+function removeFilter() {
 	const filterID = this.getOption("filter.id", undefined);
 	if (!filterID) return;
 
@@ -260,7 +259,7 @@ function removeFilter() {;
 /**
  * @private
  */
-function initFilter() {;
+function initFilter() {
 	const filterID = this.getOption("filter.id", undefined);
 
 	if (!filterID)
@@ -277,8 +276,7 @@ function initFilter() {;
 	this[filterObserverSymbol] = new Observer(() => {
 		const query = filterControl.getOption("query", undefined);
 		this.setParameters({ query: query });
-		this
-			.fetch()
+		this.fetch()
 			.then(() => {
 				this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
 				filterControl?.showSuccess();
@@ -319,8 +317,7 @@ function initFilter() {;
 /**
  * @private
  */
-function initAutoInit() {;
-
+function initAutoInit() {
 	const autoInit = this.getOption("features.autoInit");
 	validateBoolean(autoInit);
 
@@ -332,8 +329,7 @@ function initAutoInit() {;
 	}
 
 	setTimeout(() => {
-		this
-			.fetch()
+		this.fetch()
 			.then(() => {
 				fireCustomEvent(this, "monster-datasource-fetched", {
 					datasource: this,
@@ -349,8 +345,7 @@ function initAutoInit() {;
 	}, 0);
 }
 
-function initEventHandler() {;
-
+function initEventHandler() {
 	this[intersectionObserverHandlerSymbol] = (entries) => {
 		entries.forEach((entry) => {
 			if (entry.isIntersecting) {
@@ -370,8 +365,7 @@ function initEventHandler() {;
 	};
 }
 
-function initIntersectionObserver() {;
-
+function initIntersectionObserver() {
 	this.classList.add("intersection-observer");
 
 	const options = {

package/source/components/datatable/datasource.mjs

@@ -72,7 +72,7 @@ class Datasource extends CustomElement {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 	}
 

package/source/components/datatable/datatable/header.mjs

@@ -52,7 +52,7 @@ const DIRECTION_NONE = "";
  */
 class Header extends Base {
 	constructor() {
-		super();;
+		super();
 
 		/**
 		 * - attachInternalObserver
@@ -98,8 +98,7 @@ class Header extends Base {
 		};
 	}
 
-	changeDirection() {;
-
+	changeDirection() {
 		let direction = this.getInternal("direction");
 		if (direction === DIRECTION_ASC) {
 			direction = DIRECTION_DESC;
@@ -242,8 +241,7 @@ function createOrderStatement(headers) {
 /**
  * @private
  */
-function updateStruct() {;
-
+function updateStruct() {
 	const label = this.getInternal("label");
 	const direction = this.getInternal("direction");
 	const field = this.getInternal("field");

package/source/components/datatable/datatable.mjs

@@ -218,8 +218,7 @@ class DataTable extends CustomElement {
 	 *
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
-
+	[assembleMethodSymbol]() {
 		const rawKey = this.getOption("templateMapping.row-key");
 
 		if (rawKey === null) {
@@ -328,7 +327,7 @@ function getFilterConfigKey() {
  * @private
  * @returns {Promise}
  */
-function getHostConfig(callback) {;
+function getHostConfig(callback) {
 	const document = getDocument();
 	const host = document.querySelector("monster-host");
 
@@ -354,7 +353,7 @@ function getHostConfig(callback) {;
 /**
  * @private
  */
-function updateColumnBar() {;
+function updateColumnBar() {
 	if (!this[columnBarElementSymbol]) {
 		return;
 	}
@@ -380,8 +379,7 @@ function updateColumnBar() {;
 /**
  * @private
  */
-function updateHeaderFromColumnBar() {;
-
+function updateHeaderFromColumnBar() {
 	if (!this[columnBarElementSymbol]) {
 		return;
 	}
@@ -414,8 +412,7 @@ function updateHeaderFromColumnBar() {;
 /**
  * @private
  */
-function updateConfigColumnBar() {;
-
+function updateConfigColumnBar() {
 	if (!this[columnBarElementSymbol]) {
 		return;
 	}
@@ -496,8 +493,7 @@ function initEventHandler() {
 /**
  * @private
  */
-function initGridAndStructs(hostConfig) {;
-
+function initGridAndStructs(hostConfig) {
 	const rowID = this.getOption("templateMapping.row-key");
 
 	if (!this[gridElementSymbol]) {
@@ -618,8 +614,7 @@ function initGridAndStructs(hostConfig) {;
 /**
  * @private
  */
-function updateGrid() {;
-
+function updateGrid() {
 	if (!this[gridElementSymbol]) {
 		throw new Error("no grid element is defined");
 	}
@@ -667,7 +662,7 @@ function updateGrid() {;
  * @param {Monster.Components.Datatable.Header[]} headers
  * @param {bool} doFetch
  */
-function setDataSource({ orderBy }, doFetch) {;
+function setDataSource({ orderBy }, doFetch) {
 	const datasource = this[datasourceLinkedElementSymbol];
 
 	if (!datasource) {
@@ -687,8 +682,7 @@ function setDataSource({ orderBy }, doFetch) {;
  * @private
  * @return {Monster.Components.Datatable.Form}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -711,8 +705,7 @@ function initControlReferences() {;
  * @throws {TypeError} incorrect arguments passed for the datasource
  * @throws {Error} the datasource could not be initialized
  */
-function initOptionsFromArguments() {;
-
+function initOptionsFromArguments() {
 	const options = {};
 	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
 
@@ -720,7 +713,9 @@ function initOptionsFromArguments() {;
 		options.datasource = { selector: selector };
 	}
 
-	const breakpoint = this.getAttribute(ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT);
+	const breakpoint = this.getAttribute(
+		ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
+	);
 	if (breakpoint) {
 		options.responsive = {};
 		options.responsive.breakpoint = parseInt(breakpoint);

package/source/components/datatable/filter/date-range.mjs

@@ -152,7 +152,7 @@ class DateRange extends AbstractBase {
 	 *
 	 * @return {FilterButton}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -249,7 +249,7 @@ class DateRange extends AbstractBase {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -311,8 +311,7 @@ class DateRange extends AbstractBase {
  * @param {HTMLElement} group
  * @param {string} type
  */
-function updateMainFilterValueFromPopperChange(group, type) {;
-
+function updateMainFilterValueFromPopperChange(group, type) {
 	function calculateTargetDate(diff) {
 		if (isNaN(diff)) {
 			diff = 0;
@@ -405,8 +404,7 @@ function updateMainFilterValueFromPopperChange(group, type) {;
  * @private
  * @return {initEventHandler}
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	this[closeEventHandler] = (event) => {
 		const path = event.composedPath();
 
@@ -536,8 +534,7 @@ function initEventHandler() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -557,7 +554,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -566,8 +563,7 @@ function disconnectResizeObserver() {;
 /**
  * @private
  */
-function hide() {;
-
+function hide() {
 	this[popperElementSymbol].style.display = "none";
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 }
@@ -576,8 +572,7 @@ function hide() {;
  * @private
  * @this PopperButton
  */
-function show() {;
-
+function show() {
 	if (this.getOption("disabled", false) === true) {
 		return;
 	}
@@ -605,8 +600,7 @@ function show() {;
 /**
  * @private
  */
-function clearAndDisableFormGroups() {;
-
+function clearAndDisableFormGroups() {
 	this[radioInputsElementSymbol].forEach((radio) => {
 		radio.checked = false;
 	});
@@ -626,8 +620,7 @@ function clearAndDisableFormGroups() {;
  * @private
  * @returns {string}
  */
-function guessRangeTypeFromCurrentValue() {;
-
+function guessRangeTypeFromCurrentValue() {
 	const value = this[inputElementSymbol].value.trim();
 
 	if (value === "") {
@@ -658,8 +651,7 @@ function guessRangeTypeFromCurrentValue() {;
 	return "invalid";
 }
 
-function getRangeTypeFromForm() {;
-
+function getRangeTypeFromForm() {
 	const group = this[formContainerElementSymbol].querySelector(
 		"input[type=radio][name=rangeType]:checked",
 	);
@@ -714,8 +706,7 @@ function calculateDateRangeFromToday(date, unit) {
 /**
  * @private
  */
-function updatePopperInputsFromMainValue() {;
-
+function updatePopperInputsFromMainValue() {
 	const featuresMoreThan = this.getOption("features.moreThan", false);
 	const featuresWithin = this.getOption("features.within", false);
 
@@ -886,8 +877,7 @@ function updatePopperInputsFromMainValue() {;
  * @private
  * @return {Monster.Components.Datatable.Filter.Range}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -926,16 +916,14 @@ function initControlReferences() {;
  * @param {object} options
  * @return {object}
  */
-function initOptionsFromArguments(options) {;
-
+function initOptionsFromArguments(options) {
 	return options;
 }
 
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}

package/source/components/datatable/filter/input.mjs

@@ -105,7 +105,7 @@ class Input extends AbstractBase {
 	 *
 	 * @return {FilterButton}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -140,8 +140,7 @@ class Input extends AbstractBase {
  * @private
  * @return {FilterButton}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -155,8 +154,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventHandler() {;
-}
+function initEventHandler() {}
 
 /**
  * @private

package/source/components/datatable/filter/range.mjs

@@ -122,7 +122,7 @@ class Range extends AbstractBase {
 	 *
 	 * @return {FilterButton}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -205,7 +205,7 @@ class Range extends AbstractBase {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -319,8 +319,7 @@ function updateFilterValue(type, self, value, element) {
  * @private
  * @return {initEventHandler}
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	this[closeEventHandler] = (event) => {
 		const path = event.composedPath();
 
@@ -450,8 +449,7 @@ function initEventHandler() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -471,7 +469,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -480,8 +478,7 @@ function disconnectResizeObserver() {;
 /**
  * @private
  */
-function hide() {;
-
+function hide() {
 	this[popperElementSymbol].style.display = "none";
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 }
@@ -490,8 +487,7 @@ function hide() {;
  * @private
  * @this PopperButton
  */
-function show() {;
-
+function show() {
 	if (this.getOption("disabled", false) === true) {
 		return;
 	}
@@ -563,8 +559,7 @@ function updateInputFromValue() {
  * @private
  * @return {Monster.Components.Datatable.Filter.Range}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -593,16 +588,14 @@ function initControlReferences() {;
  * @param {object} options
  * @return {object}
  */
-function initOptionsFromArguments(options) {;
-
+function initOptionsFromArguments(options) {
 	return options;
 }
 
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}