@schukai/monster 3.75.0 → 3.76.0

package/source/components/layout/details.mjs

@@ -38,49 +38,15 @@ const buttonElementSymbol = Symbol("buttonElement");
 const buttonEventHandlerSymbol = Symbol("buttonEventHandler");
 
 /**
- * The Details component is used to show a details.
+ * A Details component
  *
- * <img src="./images/details.png">
+ * @fragments /fragments/components/layout/details/
  *
- * 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
+ * @example /examples/components/layout/details-simple
  *
+ * @since 3.74.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.Layout
- * @summary A simple details component
- * @fires Monster.Components.Layout.Details.event:monster-details-before-open
- * @fires Monster.Components.Layout.Details.event:monster-details-open
- * @fires Monster.Components.Layout.Details.event:monster-details-before-close
- * @fires Monster.Components.Layout.Details.event:monster-details-closed
+ * @summary A simple but cool Details component
  */
 class Details extends Collapse {
 	/**
@@ -215,13 +181,17 @@ function initButtonLabel() {
 	if (this.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
 		label = this.getAttribute(ATTRIBUTE_BUTTON_LABEL);
 	} else {
-		label = this.innerText;
+		label = this.getOption("labels.button", "Details");
 	}
 
 	if (!isString(label)) {
 		label = "";
 	}
 
+	if (label==="") {
+		label = this.innerText;
+	}
+
 	label = label.trim();
 
 	if (label === "") {

package/source/components/layout/iframe.mjs

@@ -0,0 +1,358 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { IframeStyleSheet } from "./stylesheet/iframe.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+export { Iframe };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const iframeElementSymbol = Symbol("iframeElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const PanelElementSymbol = Symbol("PanelElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * A Iframe Control
+ *
+ * @fragments /fragments/components/layout/iframe/
+ *
+ * @example /examples/components/layout/iframe-simple
+ * 
+ * @since 3.76.0
+ * @copyright schukai GmbH
+ * @summary A cool and fancy Iframe that can make your life easier and also looks good.
+ */
+class Iframe extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/iframe@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Layout.Iframe
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		calcHeight.call(this);
+		return this;
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		attachResizeObserver.call(this);
+
+		// disable scrolling in parent node
+		if (this.parentNode && this.parentNode instanceof HTMLElement) {
+			this.parentNode.style.overflow = "hidden";
+		}
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		disconnectResizeObserver.call(this);
+	}
+
+	/**
+	 * 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} labels Label definitions
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			src: null,
+
+			/* "allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"*/
+			sandbox: null,
+
+			labels: {},
+			classes: {},
+
+			name: "",
+
+			referrerpolicy: "no-referrer",
+
+			disabled: false,
+			features: {
+				allowfullscreen: true,
+				allowpaymentrequest: true,
+				loading: "egager",
+			},
+			actions: {
+				click: () => {
+					throw new Error("the click action is not defined");
+				},
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-iframe";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [IframeStyleSheet];
+	}
+}
+
+/**
+ * @private
+ */
+function calcHeight() {
+	this.style.boxSizing = "border-box";
+
+	const height = calculateMaximumHeight.call(this, this.parentNode);
+	console.log("height", height);
+	if (height < 0 || isNaN(height)) {
+		return;
+	}
+
+	this[iframeElementSymbol].style.height = `${height}px`;
+}
+
+/**
+ * Calculate the maximum height of an element based on the window's inner height
+ * @param element
+ * @returns {*}
+ */
+function calculateMaximumHeight(element) {
+	let totalBottomBorder = 0;
+	let totalBottomPadding = 0;
+	let totalBottomMargin = 0;
+	let totalOutlineHeight = 0;
+	let totalBoxShadowHeight = 0;
+	let currentElement = element;
+
+	while (currentElement && currentElement !== document.body) {
+		const style = window.getComputedStyle(currentElement);
+		const boxSizing = style.boxSizing;
+
+		const elementHeight = currentElement.getBoundingClientRect().height;
+
+		const borderBottomWidth = parseFloat(style.borderBottomWidth);
+		const paddingBottom = parseFloat(style.paddingBottom);
+		const marginBottom = parseFloat(style.marginBottom);
+
+		const outlineHeight = parseFloat(style.outlineWidth);
+
+		totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
+		totalBottomPadding +=
+			isNaN(paddingBottom) || boxSizing === "border-box" ? 0 : paddingBottom;
+		totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
+		totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
+
+		const boxShadow = style.boxShadow;
+		let boxShadowVerticalTotal = 0;
+
+		if (boxShadow !== "none") {
+			const boxShadowValues = boxShadow.split(" ");
+			const verticalOffset = parseFloat(boxShadowValues[3]);
+			const blurRadius = parseFloat(boxShadowValues[4]);
+			const spreadRadius = parseFloat(boxShadowValues[5]);
+
+			boxShadowVerticalTotal = verticalOffset + blurRadius + spreadRadius;
+		}
+
+		totalBoxShadowHeight += isNaN(boxShadowVerticalTotal)
+			? 0
+			: boxShadowVerticalTotal;
+
+		if (elementHeight > 200) {
+			return (
+				elementHeight -
+				totalBottomBorder -
+				totalBottomPadding -
+				totalBottomMargin -
+				totalOutlineHeight -
+				totalBoxShadowHeight
+			);
+		}
+
+		currentElement = currentElement.parentNode || currentElement.host;
+	}
+}
+
+/**
+ * @private
+ */
+function attachResizeObserver() {
+	// against flickering
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			calcHeight.call(this);
+		});
+	});
+
+	this[resizeObserverSymbol].observe(this.ownerDocument.body);
+	this[resizeObserverSymbol].observe(document.scrollingElement);
+}
+
+function disconnectResizeObserver() {
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+	}
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ * @fires monster-iframe-clicked
+ */
+function initEventHandler() {
+	const self = this;
+	const element = this[iframeElementSymbol];
+
+	const type = "click";
+
+	element.addEventListener(type, function (event) {
+		const callback = self.getOption("actions.click");
+
+		fireCustomEvent(self, "monster-iframe-clicked", {
+			element: self,
+		});
+
+		if (!isFunction(callback)) {
+			return;
+		}
+
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+
+		if (!(element instanceof Node && self.hasNode(element))) {
+			return;
+		}
+
+		callback.call(self, event);
+	});
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[PanelElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+
+	this[iframeElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"] iframe`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+			<iframe data-monster-role="iframe"
+					data-monster-attributes="sandbox path:sandbox,
+					name path:name,
+					referrerpolicy path:referrerpolicy,
+					loading path:features.loading,
+					allowpaymentrequest path:features.allowpaymentrequest,
+					allowfullscreen path:features.allowfullscreen, 
+					src path:src"
+					></iframe></div>`;
+}
+
+registerCustomElement(Iframe);

package/source/components/layout/panel.mjs

@@ -44,35 +44,15 @@ const resizeObserverSymbol = Symbol("resizeObserver");
 const timerCallbackSymbol = Symbol("timerCallback");
 
 /**
- * The Panel component is used to display a panel, isn't that cool?
+ * A Slider
  *
- * <img src="./images/panel.png">
+ * @fragments /fragments/components/layout/panel/
  *
- * You can create this control either by specifying the HTML tag <monster-panel />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-panel');` method.
- *
- * ```html
- * <monster-panel></monster-panel>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/monster/components/layout/panel.mjs';
- * document.createElement('monster-panel');
- * ```
- *
- * @startuml panel.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Panel
- * @enduml
+ * @example /examples/components/layout/panel-simple
  *
+ * @since 3.54.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.Layout
- * @summary A simple panel component
+ * @summary The Panel component is used to display a panel, isn't that cool?
  */
 class Panel extends CustomElement {
 	/**
@@ -169,6 +149,11 @@ function calcHeight() {
 	this.style.height = `${height}px`;
 }
 
+/**
+ * Calculate the maximum height of an element based on the window's inner height
+ * @param element
+ * @returns {*}
+ */
 function calculateMaximumHeight(element) {
 	let totalBottomBorder = 0;
 	let totalBottomPadding = 0;

package/source/components/layout/slider.mjs

@@ -58,14 +58,14 @@ const configSymbol = Symbol("config");
  * @private
  * @type {string}
  */
-const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from";
+const ATTRIBUTE_CLONE_FROM = ATTRIBUTE_PREFIX + "clone-from";
 
 /**
  * A Slider
  *
- * @fragments /fragments/components/form/slider/
+ * @fragments /fragments/components/layout/slider/
  *
- * @example /examples/components/form/slider-simple
+ * @example /examples/components/layout/slider-simple
  *
  * @since 3.74.0
  * @copyright schukai GmbH
@@ -120,7 +120,7 @@ class Slider extends CustomElement {
 	 * @property {Object} autoPlay Auto play configuration
 	 * @property {number} autoPlay.delay=1500 Delay between slides
 	 * @property {number} autoPlay.startDelay=1000 Start delay
-	 * @property {string} autoPlay.direction="next" Direction of the auto play
+	 * @property {string} autoPlay.direction="next" Direction of the autoplay
 	 * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
 	 * @property {boolean} autoPlay.touchPause=true Pause on touch
 	 * @property {Object} classes CSS classes
@@ -352,10 +352,10 @@ function initCarousel() {
 	const { slides, totalSlides } = getSlidesAndTotal.call(this);
 	if (this.getOption("features.carousel") && totalSlides > 2) {
 		const firstElement = slides[0].cloneNode(true);
-		firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
+		firstElement.setAttribute(ATTRIBUTE_CLONE_FROM, 1);
 
 		const lastElement = slides[totalSlides - 1].cloneNode(true);
-		lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
+		lastElement.setAttribute(ATTRIBUTE_CLONE_FROM, totalSlides);
 		slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
 
 		slides[0].insertAdjacentElement("beforebegin", lastElement);
@@ -462,8 +462,8 @@ function moveTo(index) {
 	if (this.getOption("features.carousel")) {
 		slideIndex = index - 1;
 
-		if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
-			const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
+		if (slides[index].hasAttribute(ATTRIBUTE_CLONE_FROM)) {
+			const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLONE_FROM));
 
 			getWindow().requestAnimationFrame(() => {
 				getWindow().requestAnimationFrame(() => {
@@ -633,14 +633,14 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <div class="prev" data-monster-role="prev" part="prev">
+            <div class="prev" data-monster-role="prev" part="prev" part="prev">
                 <slot name="prev"></slot>
             </div>
-            <div data-monster-role="slider">
+            <div data-monster-role="slider" part="slides">
                 <slot></slot>
             </div>
             <div data-monster-role="thumbnails"></div>
-            <div class="next" data-monster-role="next" part="next">
+            <div class="next" data-monster-role="next" part="next" part="next">
                 <slot name="next"></slot>
             </div>
         </div>`;

package/source/components/layout/split-panel.mjs

@@ -65,49 +65,17 @@ const TYPE_VERTICAL = "vertical";
 const TYPE_HORIZONTAL = "horizontal";
 
 /**
- * The SplitPanel control is a simple layout control that allows you to split the screen
- * into two parts. The split can be either vertical or horizontal. The control provides a
- * draggable handle that allows you to adjust the size of the two panels.
- *
- * <img src="./images/split-panel.png">
- *
- * You can create this control either by specifying the HTML tag <monster-split-panel />`
- * directly in the HTML or using Javascript via the `document.createElement('monster-split-panel');`
- * method.
- *
- * ```html
- * <monster-split-panel></monster-split-panel>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
+ * A SplitPanel Control
  *
- * ```js
- * import '@schukai/monster/components/layout/split-panel.mjs';
- * document.createElement('monster-split-panel');
- * ```
+ * @fragments /fragments/components/layout/split-panel/
  *
- * It is best to hide unregistered elements with the css property `visibility: hidden;`
- *
- * ```css
- * <style>
- *     *:not(:defined) {
- *       visibility: hidden;
- *     }
- * </style>
- * ```
- *
- * @startuml split-panel.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- SplitPanel
- * @enduml
+ * @example /examples/components/layout/split-panel-simple
  *
+ * @since 3.54.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.Layout
- * @summary A simple split screen layout
- * @fires Monster.Components.Layout.event:monster-dimension-changed
+ * @summary The SplitPanel control is a simple layout control that allows you to split the screen
+ * into two parts. The split can be either vertical or horizontal. The control provides a
+ * draggable handle that allows you to adjust the size of the two panels.
  */
 class SplitPanel extends CustomElement {
 	/**

package/source/components/layout/style/iframe.pcss

@@ -0,0 +1,39 @@
+
+:host {
+    display: block;
+    border: none;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    height: fill-available;
+    height: -moz-available;
+}
+
+
+iframe {
+    display: block;
+    border: none;
+    box-sizing: border-box;
+
+    padding: 0;
+    margin: 0;
+
+    height: fill-available;
+    height: stretch;
+    width: 100%;
+}
+
+
+[data-monster-role="control"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    border: none;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    height: fill-available;
+    height: stretch;
+}

package/source/components/layout/style/panel.pcss

@@ -14,7 +14,11 @@
     width: 100%;
     box-sizing: border-box;
     overflow: auto;
-    
+
+    height: fill-available;
+    height: -moz-available;
+    height: stretch;
+
 }
 
 [data-monster-role="control"] {
@@ -26,8 +30,11 @@
     overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
-    
-    
+
+    height: fill-available;
+    height: -moz-available;
+    height: stretch;
+
     //position: fixed; 
     //top: 0;
     //left: 0;

package/source/components/layout/style/split-panel.pcss

@@ -9,6 +9,8 @@
     flex-direction: row;
     margin: 0;
     padding: 0;
+    
+    
 
     & .panel {
         flex-grow: 1;