fix: include state-button #183

.gitlab/issue_templates/default.md

@@ -2,11 +2,13 @@
 
 <!---
 
-* [ ] Can you reproduce the problem in playgrounds?
-* [ ] Are you running the latest version?
-* [ ] Did you check the FAQs?
 * [ ] Are you reporting to the correct repository?
-* [ ] May you report a bug? Use the template for bugs (select the template from the drop-down menu above).
+* [ ] Did you check the documentation?
+* [ ] Are you using the latest version of Monster?
+* [ ] Can you reproduce the problem in the playground?
+* [ ] May you report a bug? 
+      Use the template for bugs (select the template 
+      from the drop-down menu above).
 
 You can erase any parts of this template 
 not applicable to your Issue. 

development/issues/182.js

-import "../../source/components/style/property.pcss";
-import "../../source/components/style/normalize.pcss";
-// import "../../source/components/style/color.pcss";
-// import "../../source/components/style/link.pcss";
-// import "../../source/components/style/button.pcss";
-// import "../../source/components/style/theme.pcss";
-import "../../source/components/style/typography.pcss";
-import "../../source/components/form/select.mjs";
-
-
-
-import "../../source/components/form/button.mjs";
-import "../../source/components/host/overlay.mjs";
-import "../../source/components/datatable/datatable.mjs";
-import "../../source/components/datatable/dataset.mjs";
-import "../../source/components/datatable/datasource/dom.mjs";
-import "../../source/components/datatable/datasource/rest.mjs";
-import "../../source/components/datatable/save-button.mjs";
-
-import "../../source/components/style/color.pcss";
-import "../../source/components/style/theme.pcss";
-import "../../source/components/style/table.pcss";
-import "../../source/components/style/property.pcss";
-import "../../source/components/style/badge.pcss";
-import "../../source/components/style/button.pcss";
-import "../../source/components/style/link.pcss";
-import "../../source/components/style/data-grid.pcss";
-import "../../source/components/style/property.pcss";
-import "../../source/components/style/typography.pcss";
-import "../../source/components/style/display.pcss";
-import "../../source/components/datatable/datasource/rest.mjs";
-import "../../source/components/datatable/filter.mjs";
-import "../../source/components/datatable/filter-button.mjs";
-import "../../source/components/datatable/embedded-pagination.mjs";
-import "../../source/components/datatable/datatable.mjs";
-import "../../source/components/datatable/dataset.mjs";
-import "../../source/components/datatable/status.mjs";
-import "../../source/components/datatable/save-button.mjs";
-import "../../source/components/datatable/change-button.mjs";
-import "../../source/components/datatable/filter/range.mjs";
-import "../../source/components/datatable/filter/select.mjs";
-import "../../source/components/datatable/filter/input.mjs";
-import "../../source/components/datatable/filter/date-range.mjs";
-import {windowReady} from "../../source/dom/ready.mjs";
-import "../../source/components/host/host.mjs";
-import "../../source/components/form/button.mjs";
-import "../../source/components/form/button-bar.mjs";
-import "../../source/components/form/popper-button.mjs";
-import "../../source/components/layout/tabs.mjs";
-import "../../source/components/layout/width-toggle.mjs";
-
-//
-// let form = document.getElementById("form");
-// let checkbox = document.getElementById("checkbox1");
-// console.log(checkbox);
-// checkbox.defaultValue = "true1";
-// checkbox.value = "true2";
-//
-// let butjon = document.getElementById("button");
-// button.addEventListener("click", function() {
-//    
-//     let formDana = new FormData(form);
-//     for (let [key, value] of formData.entries()) {
-//         console.log(key, value);
-//     }
-//    
-//    
-//     console.log("Button clicked");
-// })
-
-
-//
-// console.log("Hello world");
-// setTimeout(() => {
-//     console.log("Hello world");
-// }
\ No newline at end of file

development/issues/closed/183.html

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
+
+    <title>Issues</title>
+    <script src="./183.js" type="module"></script>
+</head>
+<body>
+
+
+<main>
+
+    <h1>Issues 183</h1>
+    <ul>
+        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/183"
+           target="_blank">issues/183</a></li>
+        <li><a href="../../">Back to overview</a></li>
+    </ul>
+
+
+    <monster-datatable-change-button>
+       
+
+    </monster-datatable-change-button>
+
+
+
+
+</main>
+
+</body>
+</html>

development/issues/closed/183.js

+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components//datatable/change-button.mjs";
+

development/issues/open/182.js

+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+// import "../../../source/components/style/color.pcss";
+// import "../../../source/components/style/link.pcss";
+// import "../../../source/components/style/button.pcss";
+// import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/form/select.mjs";
+
+
+
+import "../../../source/components/form/button.mjs";
+import "../../../source/components/host/overlay.mjs";
+import "../../../source/components/datatable/datatable.mjs";
+import "../../../source/components/datatable/dataset.mjs";
+import "../../../source/components/datatable/datasource/dom.mjs";
+import "../../../source/components/datatable/datasource/rest.mjs";
+import "../../../source/components/datatable/save-button.mjs";
+
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/table.pcss";
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/badge.pcss";
+import "../../../source/components/style/button.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/data-grid.pcss";
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/style/display.pcss";
+import "../../../source/components/datatable/datasource/rest.mjs";
+import "../../../source/components/datatable/filter.mjs";
+import "../../../source/components/datatable/filter-button.mjs";
+import "../../../source/components/datatable/embedded-pagination.mjs";
+import "../../../source/components/datatable/datatable.mjs";
+import "../../../source/components/datatable/dataset.mjs";
+import "../../../source/components/datatable/status.mjs";
+import "../../../source/components/datatable/save-button.mjs";
+import "../../../source/components/datatable/change-button.mjs";
+import "../../../source/components/datatable/filter/range.mjs";
+import "../../../source/components/datatable/filter/select.mjs";
+import "../../../source/components/datatable/filter/input.mjs";
+import "../../../source/components/datatable/filter/date-range.mjs";
+import {windowReady} from "../../../source/dom/ready.mjs";
+import "../../../source/components/host/host.mjs";
+import "../../../source/components/form/button.mjs";
+import "../../../source/components/form/button-bar.mjs";
+import "../../../source/components/form/popper-button.mjs";
+import "../../../source/components/layout/tabs.mjs";
+import "../../../source/components/layout/width-toggle.mjs";
+
+//
+// let form = document.getElementById("form");
+// let checkbox = document.getElementById("checkbox1");
+// console.log(checkbox);
+// checkbox.defaultValue = "true1";
+// checkbox.value = "true2";
+//
+// let butjon = document.getElementById("button");
+// button.addEventListener("click", function() {
+//    
+//     let formDana = new FormData(form);
+//     for (let [key, value] of formData.entries()) {
+//         console.log(key, value);
+//     }
+//    
+//    
+//     console.log("Button clicked");
+// })
+
+
+//
+// console.log("Hello world");
+// setTimeout(() => {
+//     console.log("Hello world");
+// }
\ No newline at end of file

source/components/datatable/change-button.mjs

@@ -4,7 +4,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { diff } from "../../data/diff.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
@@ -12,10 +11,9 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString, isArray } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { clone } from "../../util/clone.mjs";
+import { isString } from "../../types/is.mjs";
 import { State } from "../form/types/state.mjs";
+import  "../form/state-button.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { ChangeButtonStyleSheet } from "./stylesheet/change-button.mjs";
 
@@ -38,6 +36,47 @@ const datasetLinkedElementSymbol = Symbol("datasetLinkedElement");
  */
 const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
 
+
+
+/**
+ * The ColumnBar component is used to show and configure the columns of a datatable.
+ *
+ * <img src="./images/change-button.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-datatable-change-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-datatable-change-button');` method.
+ *
+ * ```html
+ * <monster-datatable-change-button></monster-datatable-change-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/datatable/change-button.mjs';
+ * document.createElement('monster-datatable-change-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the 
+ * styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml change-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ChangeButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
 class ChangeButton extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.

source/components/datatable/columnbar.mjs

@@ -51,8 +51,6 @@ const popperInstanceSymbol = Symbol("popperInstance");
  *
  * <img src="./images/column-bar.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-column-bar />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-column-bar');` method.
  *
@@ -63,7 +61,7 @@ const popperInstanceSymbol = Symbol("popperInstance");
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/component-datatable/source/columnbar.mjs';
+ * import '@schukai/monster/components/datatable/column-bar.mjs';
  * document.createElement('monster-column-bar');
  * ```
  *