@schukai/monster 3.76.0 → 3.77.0

package/source/components/form/tree-select.mjs

@@ -78,7 +78,7 @@ class TreeSelect extends Select {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/call-button.mjs

@@ -95,7 +95,7 @@ class CallButton extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/collapse.mjs

@@ -19,6 +19,6 @@ export { Collapse };
  * @since 1.10.0
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
- * @deprecated since 3.64.0 use {@link Monster.Components.Layout.Collapse}
+ * @deprecated since 3.64.0 use Layout.Collapse instead
  */
 class Collapse extends NewCollapse {}

package/source/components/host/config-manager.mjs

@@ -116,7 +116,7 @@ class ConfigManager extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/host.mjs

@@ -120,7 +120,7 @@ class Host extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/overlay.mjs

@@ -119,7 +119,7 @@ class Overlay extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/toggle-button.mjs

@@ -69,7 +69,7 @@ class ToggleButton extends CallButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/host/viewer.mjs

@@ -74,7 +74,7 @@ class Viewer extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/collapse.mjs

@@ -109,7 +109,7 @@ class Collapse extends CustomElement {
     }
 
     /**
-     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * 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.
@@ -143,7 +143,7 @@ class Collapse extends CustomElement {
 
     /**
      *
-     * @returns {Monster.Components.Host.Collapse}
+     * @returns {void}
      */
     [assembleMethodSymbol]() {
         super[assembleMethodSymbol]();
@@ -158,25 +158,22 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
+     * @returns {void}
      */
     connectedCallback() {
         super.connectedCallback();
         updateResizeObserverObservation.call(this);
-        //  this[resizeObserverSymbol].observe(getDocument().body);
     }
 
     /**
-     *
+     * @returns {void}
      */
     disconnectedCallback() {
         super.disconnectedCallback();
-        //this[resizeObserverSymbol].disconnect();
     }
 
     /**
-     *
-     * @returns {Monster.Components.Host.Collapse}
+     * @returns {Collapse}
      */
     toggle() {
         if (this[detailsElementSymbol].classList.contains("active")) {
@@ -188,7 +185,6 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
      * @returns {boolean}
      */
     isClosed() {
@@ -196,7 +192,6 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
      * @returns {boolean}
      */
     isOpen() {
@@ -204,10 +199,10 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
-     * @returns {Monster.Components.Host.Collapse}
-     * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-open
-     * @fires Monster.Components.Host.Collapse.event:monster-collapse-open
+     * Open the collapse
+     * @returns {Collapse}
+     * @fires event:monster-collapse-before-open
+     * @fires event:monster-collapse-open
      */
     open() {
         let node;
@@ -248,10 +243,10 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
-     * @returns {Monster.Components.Host.Collapse}
-     * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-close
-     * @fires Monster.Components.Host.Collapse.event:monster-collapse-closed
+     * Close the collapse
+     * @returns {Collapse}
+     * @fires event:monster-collapse-before-close
+     * @fires event:monster-collapse-closed
      */
     close() {
         if (!this[detailsElementSymbol].classList.contains("active")) {
@@ -273,7 +268,6 @@ class Collapse extends CustomElement {
     }
 
     /**
-     *
      * @return {string}
      */
     static getTag() {
@@ -289,8 +283,8 @@ class Collapse extends CustomElement {
 
     /**
      * This method is called when the element is inserted into a document, including into a shadow tree.
-     * @return {Monster.Components.Host.Collapse}
-     * @fires Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
+     * @return {Collapse}
+     * @fires event:monster-collapse-adjust-height
      */
     adjustHeight() {
         adjustHeight.call(this);
@@ -298,6 +292,11 @@ class Collapse extends CustomElement {
     }
 }
 
+/**
+ * @private
+ * @returns {void}
+ * @fires event:monster-collapse-adjust-height
+ */
 function adjustHeight() {
     let height = 0;
 
@@ -336,6 +335,7 @@ function adjustHeight() {
         height,
         "important",
     );
+    
     fireCustomEvent(this, "monster-" + this[nameSymbol] + "-adjust-height", {});
 }
 

package/source/components/layout/details.mjs

@@ -43,10 +43,14 @@ const buttonEventHandlerSymbol = Symbol("buttonEventHandler");
  * @fragments /fragments/components/layout/details/
  *
  * @example /examples/components/layout/details-simple
+ * @example /examples/components/layout/details-with-label
+ * @example /examples/components/layout/details-as-accordion
+ * @example /examples/components/layout/details-with-your-own-design
  *
  * @since 3.74.0
  * @copyright schukai GmbH
- * @summary A simple but cool Details component
+ * @summary A simple but cool detail component. This is based on the collapse component and extends it with a button.
+ * @summary You can also easily build an accordion from the component.
  */
 class Details extends Collapse {
 	/**
@@ -67,20 +71,15 @@ class Details extends Collapse {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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} classes CSS classes
-	 * @property {string} classes.button CSS class for the button
 	 * @property {Object} button Button configuration
 	 * @property {string} button.label Button label
-	 * @property {Object} features Feature configuration
-	 * @property {boolean} features.accordion Enable accordion mode
-	 * @property {boolean} features.persistState Persist the state in the host configuration
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -94,8 +93,7 @@ class Details extends Collapse {
 	}
 
 	/**
-	 *
-	 * @returns {Monster.Components.Layout.Details}
+	 * @returns {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -105,6 +103,9 @@ class Details extends Collapse {
 		initEventHandler.call(this);
 	}
 
+	/**
+	 * @returns {void}
+	 */
 	connectedCallback() {
 		super.connectedCallback();
 
@@ -119,7 +120,6 @@ class Details extends Collapse {
 	}
 
 	/**
-	 *
 	 * @return {string}
 	 */
 	static getTag() {
@@ -127,7 +127,7 @@ class Details extends Collapse {
 	}
 
 	/**
-	 * @return {Array<CSSStyleSheet>}
+	 * @returns {Array<CSSStyleSheet>}
 	 */
 	static getCSSStyleSheet() {
 		const css = super.getCSSStyleSheet();

package/source/components/layout/iframe.mjs

@@ -113,7 +113,7 @@ class Iframe extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the HTML Tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/panel.mjs

@@ -64,7 +64,7 @@ class Panel extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/popper.mjs

@@ -105,7 +105,7 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/slider.mjs

@@ -104,7 +104,7 @@ class Slider extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -87,7 +87,7 @@ class SplitPanel extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/tabs.mjs

@@ -162,7 +162,7 @@ class Tabs extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/layout/width-toggle.mjs

@@ -45,12 +45,11 @@ const toggleElementSymbol = Symbol("toggleElement");
 const insideElementSymbol = Symbol("insideElement");
 
 /**
- *
  * @type {string}
  */
 const MODE_SMALL = "small";
+
 /**
- *
  * @type {string}
  */
 const MODE_WIDE = "wide";
@@ -64,7 +63,9 @@ const MODE_WIDE = "wide";
  *
  * @since 3.57.0
  * @copyright schukai GmbH
- * @summary The WidthToggle component is used to change the width of a panel by clicking on a button.
+ * @summary The WidthToggle component allows users to dynamically change the width of a panel by clicking a button. 
+ * @summary This feature improves readability and space utilization by allowing the panel width to be adjusted 
+ * @summary according to user preferences.
  */
 class WidthToggle extends CustomElement {
 	/**
@@ -78,7 +79,7 @@ class WidthToggle extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.
@@ -105,8 +106,7 @@ class WidthToggle extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @returns {Monster.Components.Host.Viewer}
+	 * @returns {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -123,6 +123,13 @@ class WidthToggle extends CustomElement {
 	 * @return {Object} - Returns the current object instance for chaining.
 	 * @throws {Error} - If the mode is not supported.
 	 */
+
+
+	/**
+	 * @param {string} mode
+	 * @returns {WidthToggle}
+	 * @throws {Error} no shadow-root is defined
+	 */
 	setWidth(mode) {
 		applyContainerWidth.call(this, mode);
 		return this;
@@ -137,7 +144,7 @@ class WidthToggle extends CustomElement {
 	}
 
 	/**
-	 * @return {CSSStyleSheet[]}
+	 * @returns {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [WidthToggleStyleSheet];
@@ -146,8 +153,9 @@ class WidthToggle extends CustomElement {
 
 /**
  * Set the dimensions of the panel based on the split type.
- * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
- * @fires Monster.Components.Layout.event:monster-dimension-changed
+ * @param {string} mode
+ * @throws {Error} no shadow-root is defined
+ * @private
  */
 function applyContainerWidth(mode) {
 	const width = this.getOption("width." + mode);

package/source/components/navigation/table-of-content.mjs

@@ -103,7 +103,7 @@ class TableOfContent extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.