@schukai/monster 3.85.0 → 3.85.2

package/source/components/datatable/columnbar.mjs

@@ -55,43 +55,17 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement");
  */
 const popperInstanceSymbol = Symbol("popperInstance");
 
+
 /**
- * The ColumnBar component is used to show and configure the columns of a datatable.
- *
- * <img src="./images/column-bar.png">
- *
- * You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-column-bar');` method.
- *
- * ```html
- * <monster-column-bar></monster-column-bar>
- * ```
+ * A column bar for a datatable
  *
- * Or you can create this CustomControl directly in Javascript:
+ * @fragments /fragments/components/datatable/datatable/
  *
- * ```js
- * import '@schukai/monster/components/datatable/column-bar.mjs';
- * document.createElement('monster-column-bar');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml column-bar.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ColumnBar
- * @enduml
+ * @example /examples/components/datatable/empty
  *
  * @copyright schukai GmbH
- * @summary A data set
- */
+ * @summary The ColumnBar component is used to show and configure the columns of a datatable.
+ **/
 class ColumnBar extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.
@@ -137,7 +111,7 @@ class ColumnBar extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Form.Form}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -147,7 +121,7 @@ class ColumnBar extends CustomElement {
 	}
 
 	/**
-	 * @return {Array<ColumnBarStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [ColumnBarStyleSheet];
@@ -156,7 +130,7 @@ class ColumnBar extends CustomElement {
 
 /**
  * @private
- * @return {Monster.Components.Datatable.Form}
+ * @return {ColumnBar}
  */
 function initControlReferences() {
 	if (!this.shadowRoot) {
@@ -166,12 +140,15 @@ function initControlReferences() {
 	this[settingsButtonElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=settings-button]",
 	);
+	
 	this[settingsLayerElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=settings-layer]",
 	);
+	
 	this[dotsContainerElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=dots]",
 	);
+	
 	return this;
 }
 
@@ -199,6 +176,7 @@ function initEventHandler() {
 	);
 
 	self[dotsContainerElementSymbol].addEventListener("click", function (event) {
+		
 		const element = findTargetElementFromEvent(
 			event,
 			"data-monster-role",
@@ -220,6 +198,7 @@ function initEventHandler() {
 	});
 
 	self[settingsButtonEventHandlerSymbol] = (event) => {
+		
 		const clickTarget = event.composedPath()?.[0];
 		if (
 			self[settingsLayerElementSymbol] === clickTarget ||
@@ -227,7 +206,7 @@ function initEventHandler() {
 		) {
 			return;
 		}
-		self[settingsLayerElementSymbol].classList.remove("visible");
+		
 		document.body.removeEventListener(
 			"click",
 			self[settingsButtonEventHandlerSymbol],

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

@@ -143,6 +143,7 @@ function initEventHandler() {
 function updateDataSource() {
 	let data = null;
 	getSlottedElements.call(this).forEach((element) => {
+		
 		if (!(element instanceof HTMLScriptElement)) {
 			return;
 		}