@schukai/monster 3.98.2 → 3.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/columnbar.mjs +19 -20
  4. package/source/components/datatable/datatable.mjs +94 -80
  5. package/source/components/datatable/filter/date-range.mjs +19 -20
  6. package/source/components/datatable/filter/input.mjs +19 -20
  7. package/source/components/datatable/filter/range.mjs +19 -19
  8. package/source/components/datatable/filter-button.mjs +19 -20
  9. package/source/components/datatable/filter.mjs +48 -31
  10. package/source/components/datatable/pagination.mjs +19 -20
  11. package/source/components/datatable/save-button.mjs +19 -20
  12. package/source/components/datatable/stylesheet/datatable.mjs +13 -6
  13. package/source/components/form/action-button.mjs +2 -1
  14. package/source/components/form/api-button.mjs +4 -4
  15. package/source/components/form/button-bar.mjs +2 -3
  16. package/source/components/form/button.mjs +1 -0
  17. package/source/components/form/context-error.mjs +1 -0
  18. package/source/components/form/field-set.mjs +21 -21
  19. package/source/components/form/popper-button.mjs +274 -273
  20. package/source/components/form/reload.mjs +1 -0
  21. package/source/components/form/select.mjs +56 -34
  22. package/source/components/form/toggle-switch.mjs +2 -2
  23. package/source/components/layout/details.mjs +19 -20
  24. package/source/components/layout/tabs.mjs +19 -20
  25. package/source/components/notify/monitor-attribute-errors.mjs +184 -179
  26. package/source/data/buildtree.mjs +1 -1
  27. package/source/dom/customelement.mjs +944 -945
  28. package/source/dom/error.mjs +106 -0
  29. package/source/monster.mjs +1 -0
  30. package/source/types/version.mjs +1 -1
  31. package/test/cases/dom/customcontrol.mjs +1 -1
  32. package/test/cases/dom/customelement.mjs +3 -3
  33. package/test/cases/monster.mjs +1 -1
  34. package/test/web/test.html +2 -2
  35. package/test/web/tests.js +334 -63
@@ -10,27 +10,27 @@
10
10
  * For more information about purchasing a commercial license, please contact schukai GmbH.
11
11
  */
12
12
 
13
- import {instanceSymbol} from "../../constants.mjs";
14
- import {addAttributeToken, hasObjectLink} from "../../dom/attributes.mjs";
13
+ import { instanceSymbol } from "../../constants.mjs";
14
+ import { addAttributeToken, hasObjectLink } from "../../dom/attributes.mjs";
15
15
  import {
16
- ATTRIBUTE_ERRORMESSAGE,
17
- ATTRIBUTE_ROLE,
18
- customElementUpdaterLinkSymbol,
16
+ ATTRIBUTE_ERRORMESSAGE,
17
+ ATTRIBUTE_ROLE,
18
+ customElementUpdaterLinkSymbol,
19
19
  } from "../../dom/constants.mjs";
20
- import {CustomControl} from "../../dom/customcontrol.mjs";
21
- import {CustomElement} from "../../dom/customelement.mjs";
20
+ import { CustomControl } from "../../dom/customcontrol.mjs";
21
+ import { CustomElement } from "../../dom/customelement.mjs";
22
22
  import {
23
- assembleMethodSymbol,
24
- registerCustomElement,
23
+ assembleMethodSymbol,
24
+ registerCustomElement,
25
25
  } from "../../dom/customelement.mjs";
26
- import {findTargetElementFromEvent} from "../../dom/events.mjs";
27
- import {isFunction} from "../../types/is.mjs";
28
- import {MonitorAttributeErrorsStyleSheet} from "./stylesheet/monitor-attribute-errors.mjs";
29
- import {fireCustomEvent} from "../../dom/events.mjs";
30
- import {getDocument} from "../../dom/util.mjs";
31
- import {clone} from "../../util/clone.mjs";
26
+ import { findTargetElementFromEvent } from "../../dom/events.mjs";
27
+ import { isFunction } from "../../types/is.mjs";
28
+ import { MonitorAttributeErrorsStyleSheet } from "./stylesheet/monitor-attribute-errors.mjs";
29
+ import { fireCustomEvent } from "../../dom/events.mjs";
30
+ import { getDocument } from "../../dom/util.mjs";
31
+ import { clone } from "../../util/clone.mjs";
32
32
 
33
- export {MonitorAttributeErrors};
33
+ export { MonitorAttributeErrors };
34
34
 
35
35
  /**
36
36
  * @private
@@ -50,88 +50,88 @@ const mutationObserversSymbol = Symbol("mutationObservers");
50
50
  * @summary A beautiful MonitorAttributeErrors that can make your life easier and also looks good.
51
51
  */
52
52
  class MonitorAttributeErrors extends CustomElement {
53
- /**
54
- * This method is called by the `instanceof` operator.
55
- * @returns {symbol}
56
- */
57
- static get [instanceSymbol]() {
58
- return Symbol.for(
59
- "@schukai/monster/components/notify/monitor-attribute-errors@@instance",
60
- );
61
- }
62
-
63
- /**
64
- *
65
- * @return {Components.Notify.MonitorAttributeErrors
66
- */
67
- [assembleMethodSymbol]() {
68
- super[assembleMethodSymbol]();
69
- return this;
70
- }
71
-
72
- /**
73
- * @return {void}
74
- */
75
- connectedCallback() {
76
- super.connectedCallback();
77
- setupMutationObserver.call(this, getDocument());
78
- }
79
-
80
- /**
81
- * @return {void}
82
- */
83
- disconnectedCallback() {
84
- super.disconnectedCallback();
85
- deactivateAllObservers.call(this);
86
- }
87
-
88
- /**
89
- * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
90
- * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
91
- *
92
- * The individual configuration values can be found in the table.
93
- *
94
- * @property {Object} templates Template definitions
95
- * @property {string} templates.main Main template
96
- * @property {Object} features Features
97
- * @property {boolean} features.notifyUser Notify user (monster-notify control is required)
98
- * @property {Object} notifyUser Notify user
99
- * @property {string} notifyUser.selector Selector for the notify user control (feature notifyUser must be enabled)
100
- */
101
- get defaults() {
102
- return Object.assign({}, super.defaults, {
103
- templates: {
104
- main: getTemplate(),
105
- },
106
- features: {
107
- notifyUser: false,
108
- },
109
-
110
- notifyUser: {
111
- selector: "monster-notify",
112
- },
113
-
114
- actions: {
115
- click: () => {
116
- throw new Error("the click action is not defined");
117
- },
118
- },
119
- });
120
- }
121
-
122
- /**
123
- * @return {string}
124
- */
125
- static getTag() {
126
- return "monster-monitor-attribute-errors";
127
- }
128
-
129
- /**
130
- * @return {CSSStyleSheet[]}
131
- */
132
- static getCSSStyleSheet() {
133
- return [MonitorAttributeErrorsStyleSheet];
134
- }
53
+ /**
54
+ * This method is called by the `instanceof` operator.
55
+ * @returns {symbol}
56
+ */
57
+ static get [instanceSymbol]() {
58
+ return Symbol.for(
59
+ "@schukai/monster/components/notify/monitor-attribute-errors@@instance",
60
+ );
61
+ }
62
+
63
+ /**
64
+ *
65
+ * @return {Components.Notify.MonitorAttributeErrors
66
+ */
67
+ [assembleMethodSymbol]() {
68
+ super[assembleMethodSymbol]();
69
+ return this;
70
+ }
71
+
72
+ /**
73
+ * @return {void}
74
+ */
75
+ connectedCallback() {
76
+ super.connectedCallback();
77
+ setupMutationObserver.call(this, getDocument());
78
+ }
79
+
80
+ /**
81
+ * @return {void}
82
+ */
83
+ disconnectedCallback() {
84
+ super.disconnectedCallback();
85
+ deactivateAllObservers.call(this);
86
+ }
87
+
88
+ /**
89
+ * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
90
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
91
+ *
92
+ * The individual configuration values can be found in the table.
93
+ *
94
+ * @property {Object} templates Template definitions
95
+ * @property {string} templates.main Main template
96
+ * @property {Object} features Features
97
+ * @property {boolean} features.notifyUser Notify user (monster-notify control is required)
98
+ * @property {Object} notifyUser Notify user
99
+ * @property {string} notifyUser.selector Selector for the notify user control (feature notifyUser must be enabled)
100
+ */
101
+ get defaults() {
102
+ return Object.assign({}, super.defaults, {
103
+ templates: {
104
+ main: getTemplate(),
105
+ },
106
+ features: {
107
+ notifyUser: false,
108
+ },
109
+
110
+ notifyUser: {
111
+ selector: "monster-notify",
112
+ },
113
+
114
+ actions: {
115
+ click: () => {
116
+ throw new Error("the click action is not defined");
117
+ },
118
+ },
119
+ });
120
+ }
121
+
122
+ /**
123
+ * @return {string}
124
+ */
125
+ static getTag() {
126
+ return "monster-monitor-attribute-errors";
127
+ }
128
+
129
+ /**
130
+ * @return {CSSStyleSheet[]}
131
+ */
132
+ static getCSSStyleSheet() {
133
+ return [MonitorAttributeErrorsStyleSheet];
134
+ }
135
135
  }
136
136
 
137
137
  /**
@@ -139,88 +139,93 @@ class MonitorAttributeErrors extends CustomElement {
139
139
  * @param root
140
140
  */
141
141
  function setupMutationObserver(root) {
142
- const self = this;
143
-
144
- if (!this?.[mutationObserversSymbol]) {
145
- this[mutationObserversSymbol] = [];
146
- }
147
-
148
- const config = {
149
- childList: true,
150
- subtree: true,
151
- attributes: true,
152
- attributeFilter: ["data-monster-error"],
153
- };
154
-
155
- const callback = (mutationsList, observer) => {
156
- for (const mutation of mutationsList) {
157
- if (mutation.type === "childList") {
158
- mutation.addedNodes.forEach((node) => {
159
- checkNodeForErrors(node);
160
- observeShadowRoots(node);
161
- });
162
- }
163
- if (
164
- mutation.type === "attributes" &&
165
- mutation.attributeName === "data-monster-error"
166
- ) {
167
- const node = mutation.target;
168
-
169
- checkNodeForErrors(node);
170
- }
171
- }
172
- };
173
-
174
- const observer = new MutationObserver(callback);
175
- observer.observe(root, config);
176
- this[mutationObserversSymbol].push(observer); // Speichert den Observer
177
-
178
- root.querySelectorAll("*").forEach((node) => {
179
- checkNodeForErrors(node);
180
- observeShadowRoots(node);
181
- });
182
-
183
- function checkNodeForErrors(node) {
184
- if (node.nodeType === 1 && node.hasAttribute("data-monster-error")) {
185
-
186
- const fktOpen = console.groupCollapsed || console.group || console.log || function () {
187
- };
188
- const fktLog = console.log || function () {
189
- };
190
- const fktClose = console.groupEnd || function () {
191
- };
192
-
193
- fktOpen("MonitorAttributeErrors " + node.tagName);
194
- fktLog(node);
195
- fktLog(node.getAttribute('data-monster-error'));
196
- fktClose();
197
-
198
- if (self.getOption("features.notifyUser")) {
199
- const notifyUser = getDocument().querySelector(self.getOption("notifyUser.selector"));
200
- if (notifyUser) {
201
- notifyUser.push(node.getAttribute('data-monster-error'));
202
- }
203
- }
204
-
205
- }
206
- }
207
-
208
- function observeShadowRoots(node) {
209
- if (
210
- node.nodeType === 1 &&
211
- node.shadowRoot &&
212
- node.shadowRoot.mode === "open"
213
- ) {
214
- setupMutationObserver.call(self, node.shadowRoot);
215
- }
216
- }
142
+ const self = this;
143
+
144
+ if (!this?.[mutationObserversSymbol]) {
145
+ this[mutationObserversSymbol] = [];
146
+ }
147
+
148
+ const config = {
149
+ childList: true,
150
+ subtree: true,
151
+ attributes: true,
152
+ attributeFilter: ["data-monster-error"],
153
+ };
154
+
155
+ const callback = (mutationsList, observer) => {
156
+ for (const mutation of mutationsList) {
157
+ if (mutation.type === "childList") {
158
+ mutation.addedNodes.forEach((node) => {
159
+ checkNodeForErrors(node);
160
+ observeShadowRoots(node);
161
+ });
162
+ }
163
+ if (
164
+ mutation.type === "attributes" &&
165
+ mutation.attributeName === "data-monster-error"
166
+ ) {
167
+ const node = mutation.target;
168
+
169
+ checkNodeForErrors(node);
170
+ }
171
+ }
172
+ };
173
+
174
+ const observer = new MutationObserver(callback);
175
+ observer.observe(root, config);
176
+ this[mutationObserversSymbol].push(observer); // Speichert den Observer
177
+
178
+ root.querySelectorAll("*").forEach((node) => {
179
+ checkNodeForErrors(node);
180
+ observeShadowRoots(node);
181
+ });
182
+
183
+ function checkNodeForErrors(node) {
184
+ if (node.nodeType === 1 && node.hasAttribute("data-monster-error")) {
185
+ const fktOpen =
186
+ console.groupCollapsed ||
187
+ console.group ||
188
+ console.log ||
189
+ function () {};
190
+ const fktLog = console.log || function () {};
191
+ const fktClose = console.groupEnd || function () {};
192
+
193
+ fktOpen("MonitorAttributeErrors " + node.tagName);
194
+ fktLog(node);
195
+
196
+ const errors = node.getAttribute("data-monster-error").split("::");
197
+ errors.forEach((error) => {
198
+ fktLog(error);
199
+ });
200
+ fktClose();
201
+
202
+ if (self.getOption("features.notifyUser")) {
203
+ const notifyUser = getDocument().querySelector(
204
+ self.getOption("notifyUser.selector"),
205
+ );
206
+ if (notifyUser) {
207
+ notifyUser.push(node.getAttribute("data-monster-error"));
208
+ }
209
+ }
210
+ }
211
+ }
212
+
213
+ function observeShadowRoots(node) {
214
+ if (
215
+ node.nodeType === 1 &&
216
+ node.shadowRoot &&
217
+ node.shadowRoot.mode === "open"
218
+ ) {
219
+ setupMutationObserver.call(self, node.shadowRoot);
220
+ }
221
+ }
217
222
  }
218
223
 
219
224
  function deactivateAllObservers() {
220
- this[mutationObserversSymbol].forEach((observer) => {
221
- observer.disconnect();
222
- });
223
- this[mutationObserversSymbol] = [];
225
+ this[mutationObserversSymbol].forEach((observer) => {
226
+ observer.disconnect();
227
+ });
228
+ this[mutationObserversSymbol] = [];
224
229
  }
225
230
 
226
231
  /**
@@ -228,8 +233,8 @@ function deactivateAllObservers() {
228
233
  * @return {string}
229
234
  */
230
235
  function getTemplate() {
231
- // language=HTML
232
- return `<div></div>`;
236
+ // language=HTML
237
+ return `<div></div>`;
233
238
  }
234
239
 
235
240
  registerCustomElement(MonitorAttributeErrors);
@@ -125,7 +125,7 @@ const rootSymbol = Symbol("root");
125
125
  * @param {string} idKey - The property key to use as the unique ID of each node.
126
126
  * @param {string} parentIDKey - The property key to use as the parent ID of each node.
127
127
  * @param {object} [options] - Additional options to modify the function behavior.
128
- * @param {Array<*>} [options.rootReferences=[null, undefined]] - An array of values to treat as root references when creating the tree.
128
+ * @param {Array} [options.rootReferences=[null, undefined]] - An array of values to treat as root references when creating the tree.
129
129
  * @param {function} [options.filter] - A filter function to apply to each node.
130
130
  *
131
131
  * @return {*} The resulting tree structure as a NodeList.