@schukai/monster 3.63.0 → 3.63.2

package/CHANGELOG.md

@@ -1,9 +1,30 @@
 
+## [3.63.2] - 2024-03-28
+
+### Bug Fixes
+
+- colors and more, add igrnore change to savebutton [#181](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/181) [#180](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/180)
+### Changes
+
+- reorganize playground
+
+## [3.63.1] - 2024-03-27
+
+### Bug Fixes
+
+- [#179](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/179) [#176](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/176)
+### Changes
+
+- release and publish to npm new version 3.63.1
+
 ## [3.63.0] - 2024-03-25
 
 ### Add Features
 
 - add events to dataset methods [#178](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/178)
+### Changes
+
+- release and publish to npm new version 3.63.0
 
 ## [3.62.0] - 2024-03-25
 

package/package.json

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

package/source/components/datatable/dataset.mjs

@@ -35,8 +35,6 @@ export { DataSet };
  *
  * <img src="./images/dataset.png">
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
  * You can create this control either by specifying the HTML tag <monster-dataset />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-dataset');` method.
  *
@@ -233,7 +231,6 @@ class DataSet extends CustomElement {
 	}
 
 	/**
-	 *
 	 * @return [CSSStyleSheet]
 	 */
 	static getCSSStyleSheet() {

package/source/components/datatable/datatable.mjs

@@ -113,7 +113,7 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  * skinparam monochrome true
  * skinparam shadowing false
  * HTMLElement <|-- CustomElement
- * CustomElement <|-- Datatable
+ * CustomElement <|-- DataTable
  * @enduml
  *
  * @copyright schukai GmbH
@@ -150,6 +150,8 @@ class DataTable extends CustomElement {
      * @property {number} responsive.breakpoint Breakpoint for responsive mode
      * @property {Object} labels Labels
      * @property {string} labels.theListContainsNoEntries Label for empty state
+     * @property {Object} classes Classes
+     * @property {string} classes.container Container class
      * @property {Object} features Features
      * @property {boolean} features.settings Settings feature
      * @property {boolean} features.footer Footer feature
@@ -187,6 +189,12 @@ class DataTable extends CustomElement {
                     theListContainsNoEntries: "The list contains no entries",
                 },
 
+                classes : {
+                    control: "monster-theme-control-container-1",
+                    container: "monster-theme-control-container-1",
+                    row: "monster-theme-control-row-1",
+                },
+
                 features: {
                     settings: true,
                     footer: true,
@@ -933,6 +941,11 @@ function initOptionsFromArguments() {
 function getEmptyTemplate() {
     return `<monster-state data-monster-role="empty-without-action">
     <div part="visual">
+    <style>
+      path {
+        fill: var(--monster-bg-color-primary-4);
+        }
+    </style>
         <svg width="4rem" height="4rem" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="m21.5 22h-19c-1.378 0-2.5-1.121-2.5-2.5v-7c0-.07.015-.141.044-.205l3.969-8.82c.404-.896 1.299-1.475 2.28-1.475h11.414c.981 0 1.876.579 2.28 1.475l3.969 8.82c.029.064.044.135.044.205v7c0 1.379-1.122 2.5-2.5 2.5zm-20.5-9.393v6.893c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-6.893l-3.925-8.723c-.242-.536-.779-.884-1.368-.884h-11.414c-.589 0-1.126.348-1.368.885z"/>
             <path d="m16.807 17h-9.614c-.622 0-1.186-.391-1.404-.973l-1.014-2.703c-.072-.194-.26-.324-.468-.324h-3.557c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h3.557c.622 0 1.186.391 1.405.973l1.013 2.703c.073.194.261.324.468.324h9.613c.208 0 .396-.13.468-.324l1.013-2.703c.22-.582.784-.973 1.406-.973h3.807c.276 0 .5.224.5.5s-.224.5-.5.5h-3.807c-.208 0-.396.13-.468.324l-1.013 2.703c-.219.582-.784.973-1.405.973z"/>
@@ -951,14 +964,15 @@ function getEmptyTemplate() {
 function getTemplate() {
     // language=HTML
     return `
-        <div data-monster-role="control" part="control">
+        <div data-monster-role="control" part="control" data-monster-attributes="class path:classes.control">
             <template id="headers-row">
-                <div data-monster-attributes="class path:headers-row.classname,
+                <div data-monster-attributes="class path:headers-row.classes,
                                               data-monster-index path:headers-row.index"
                      data-monster-replace="path:headers-row.html"></div>
             </template>
             <slot></slot>
-            <div class="table-container" part="table-container">
+            <div data-monster-attributes="class path:classes.container"
+                    data-monster-role="table-container" part="table-container">
                 <div class="filter">
                     <slot name="filter"></slot>
                 </div>

package/source/components/datatable/pagination.mjs

@@ -48,8 +48,6 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
  *
  * <img src="./images/pagination.png">
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
  * You can create this control either by specifying the HTML tag <monster-pagination />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-pagination');` method.
  *