@schukai/monster 4.42.0 → 4.42.2

package/source/components/datatable/datatable.mjs

@@ -209,7 +209,7 @@ class DataTable extends CustomElement {
 
         datasource: {
           selector: null,
-          orderDelimiter: ",", // look at  initOptionsFromArguments()
+          orderDelimiter: ",", // see initOptionsFromArguments()
         },
 
         mapping: {
@@ -765,9 +765,9 @@ function initEventHandler() {
   let startX = 0;
   let startWidth = 0;
 
-  // --- Pointer-based resize handlers (robust für Maus/Touch/Stylus) ---
+  // --- Pointer-based resize handlers (robust for mouse/touch/stylus) ---
   const onPointerDown = (event) => {
-    // Wichtig: Helper mit (attrName, value) aufrufen – nicht mit CSS-Selector
+    // Important: Call helper with (attrName, value) – not with CSS selector
     const resizeHandle = findTargetElementFromEvent(
       event,
       "data-monster-role",
@@ -786,13 +786,13 @@ function initEventHandler() {
     startX = event.clientX;
     startWidth = headerCell.offsetWidth;
 
-    // Capture, damit Events beim schnellen Ziehen nicht “verloren gehen”
+    // Capture to prevent losing events during fast dragging
     event.target.setPointerCapture?.(event.pointerId);
 
     getWindow().addEventListener("pointermove", onPointerMove);
     getWindow().addEventListener("pointerup", onPointerUp);
 
-    // Globales Cursor-Styling während des Resizings
+    // Global cursor styling during resizing
     self.shadowRoot.host.classList.add("is-resizing");
   };
 
@@ -805,7 +805,7 @@ function initEventHandler() {
     const headers = self.getOption("headers");
     const resizingHeader = headers[resizingColumnIndex];
 
-    const minWidth = 50; // Fallback auf 50px
+    const minWidth = 50; 
 
     const visibleHeaders = headers.filter(
       (h) => h.getInternal("mode") !== ATTRIBUTE_DATATABLE_MODE_HIDDEN,
@@ -834,16 +834,16 @@ function initEventHandler() {
     self.shadowRoot.host.classList.remove("is-resizing");
   };
 
-  // Pointer statt Maus: resilienter
+  // Use pointer events instead of mouse: more resilient
   this[gridHeadersElementSymbol].addEventListener("pointerdown", onPointerDown);
 
-  // --- Copy-Konfiguration ---
+  // --- Copy configuration ---
   const quoteOpenChar = this.getOption("copy.quoteOpen");
   const quoteCloseChar = this.getOption("copy.quoteClose");
   const delimiterChar = this.getOption("copy.delimiter");
   const rowBreak = this.getOption("copy.rowBreak");
 
-  // --- Column-Bar -> Header Sichtbarkeit & Persistenz ---
+  // --- Column-Bar -> Header visibility & persistence ---
   if (self[columnBarElementSymbol]) {
     self[columnBarElementSymbol].attachObserver(
       new Observer(() => {
@@ -854,7 +854,7 @@ function initEventHandler() {
     );
   }
 
-  // --- Sortierung (Klick auf Header-Link) ---
+  // --- Sorting (click on header link) ---
   self[gridHeadersElementSymbol].addEventListener("click", function (event) {
     const datasource = self[datasourceLinkedElementSymbol];
     if (!datasource) return;
@@ -879,7 +879,7 @@ function initEventHandler() {
     }
   });
 
-  // --- Double-Click Copy (Spalte oder ganze Zeile mit Shift) ---
+  // --- Double-Click Copy (column or entire row with Shift) ---
   const eventHandlerDoubleClickCopyToClipboard = (event) => {
     const headCell = findTargetElementFromEvent(event, "data-monster-head");
     if (!headCell) return;
@@ -997,7 +997,7 @@ function initEventHandler() {
     });
   }
 
-  // --- Row Selection (einzeln) ---
+  // --- Row Selection (single) ---
   const selectRowCallback = (event) => {
     const checkbox = findTargetElementFromEvent(
       event,
@@ -1033,7 +1033,7 @@ function initEventHandler() {
       `[data-monster-role="select-all"]`,
     );
 
-    // Row-Action-Buttons je nach Selection sichtbar/unsichtbar
+    // Row-Action-Buttons visible/invisible depending on selection
     getSlottedElements
       .call(this, "[data-monster-role=row-action-button]", "bar")
       .forEach((i, e) => {
@@ -1048,7 +1048,7 @@ function initEventHandler() {
   this[gridElementSymbol].addEventListener("click", selectRowCallback);
   this[gridElementSymbol].addEventListener("touch", selectRowCallback);
 
-  // --- Row Selection (alle) ---
+  // --- Row Selection (all) ---
   const selectAllCallback = (event) => {
     const toggle = findTargetElementFromEvent(
       event,

package/source/components/datatable/style/datatable.pcss

@@ -327,7 +327,6 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
         @for $i from 0 to 500 {
             &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)] {
-                /*background-color: var(--monster-bg-color-selection-2);*/
                 box-sizing: border-box;
             }
         }