@schukai/monster 3.60.0 → 3.61.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/package.json +1 -1
  3. package/source/components/events.mjs +17 -0
  4. package/source/components/form/api-button.mjs +4 -0
  5. package/source/components/form/button-bar.mjs +1 -1
  6. package/source/components/form/events.mjs +28 -4
  7. package/source/components/form/reload.mjs +4 -4
  8. package/source/components/form/shadow-reload.mjs +1 -1
  9. package/source/components/form/tabs.mjs +1 -1
  10. package/source/components/form/template.mjs +4 -4
  11. package/source/components/layout/events.mjs +30 -0
  12. package/source/components/layout/split-screen.mjs +28 -2
  13. package/source/components/layout/style/tabs.pcss +6 -2
  14. package/source/components/layout/stylesheet/tabs.mjs +1 -1
  15. package/source/components/layout/tabs.mjs +55 -1
  16. package/source/types/version.mjs +1 -1
  17. package/test/cases/monster.mjs +1 -1
  18. package/test/web/test.html +2 -2
  19. package/test/web/tests.js +181 -88
package/CHANGELOG.md CHANGED
@@ -1,9 +1,22 @@
1
1
 
2
+ ## [3.61.0] - 2024-03-24
3
+
4
+ ### Add Features
5
+
6
+ - new methods and tidy [#174](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/174) [#173](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/173)
7
+ ### Changes
8
+
9
+ - update tests and doc
10
+ - events
11
+
2
12
  ## [3.60.0] - 2024-03-24
3
13
 
4
14
  ### Add Features
5
15
 
6
16
  - min/max for split screen [#172](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/172)
17
+ ### Changes
18
+
19
+ - release and publish to npm new version 3.60.0
7
20
 
8
21
  ## [3.59.1] - 2024-03-23
9
22
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schukai/monster",
3
- "version": "3.60.0",
3
+ "version": "3.61.0",
4
4
  "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
5
5
  "keywords": [
6
6
  "framework",
package/source/components/events.mjs ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
3
+ * Node module: @schukai/monster
4
+ * This file is licensed under the AGPLv3 License.
5
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
6
+ */
7
+
8
+
9
+
10
+ /**
11
+ * content fetched event
12
+ *
13
+ * @memberOf Monster.Components
14
+ * @event event:monster-fetched
15
+ * @type {object}
16
+ * @property {string} url loaded uri
17
+ */
package/source/components/form/api-button.mjs CHANGED
@@ -74,6 +74,10 @@ const containerElementSymbol = Symbol("containerElement");
74
74
  * @copyright schukai GmbH
75
75
  * @memberOf Monster.Components.Form
76
76
  * @summary A button that opens a popper element with possible actions.
77
+ * @fires Monster.Components.Form.event:monster-button-set
78
+ * @fires Monster.Components.Form.event:monster-api-button-click
79
+ * @fires Monster.Components.Form.event:monster-api-button-successful
80
+ * @fires Monster.Components.Form.event:monster-api-button-failed
77
81
  */
78
82
  class ApiButton extends ActionButton {
79
83
  /**
package/source/components/form/button-bar.mjs CHANGED
@@ -148,7 +148,7 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
148
148
  * @copyright schukai GmbH
149
149
  * @memberOf Monster.Components.Form
150
150
  * @summary A configurable tab control
151
- * @fires Monster.Components.Form.event:monster-fetched
151
+ * @fires Monster.Components.event:monster-fetched
152
152
  */
153
153
  class ButtonBar extends CustomElement {
154
154
  /**
package/source/components/form/events.mjs CHANGED
@@ -66,19 +66,43 @@
66
66
  * @property {boolean} [checked] if it is a boolean value
67
67
  **/
68
68
 
69
+ /**
70
+ * button clicked event
71
+ *
72
+ * @memberOf Monster.Components.Form
73
+ * @event event:monster-button-clicked
74
+ * @type {object}
75
+ */
76
+
69
77
  /**
70
78
  * content fetched event
71
79
  *
72
80
  * @memberOf Monster.Components.Form
73
- * @event event:monster-fetched
81
+ * @event event:monster-button-set
74
82
  * @type {object}
75
- * @property {string} url loaded uri
76
83
  */
77
84
 
78
85
  /**
79
- * button clicked event
86
+ * content fetched event
80
87
  *
81
88
  * @memberOf Monster.Components.Form
82
- * @event event:monster-button-clicked
89
+ * @event event:monster-api-button-click
90
+ * @type {object}
91
+ */
92
+
93
+ /**
94
+ * content fetched event
95
+ *
96
+ * @memberOf Monster.Components.Form
97
+ * @event event:monster-api-button-successful
83
98
  * @type {object}
84
99
  */
100
+
101
+ /**
102
+ * content fetched event
103
+ *
104
+ * @memberOf Monster.Components.Form
105
+ * @event event:monster-api-button-failed
106
+ * @type {object}
107
+ */
108
+
package/source/components/form/reload.mjs CHANGED
@@ -95,7 +95,7 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
95
95
  * @copyright schukai GmbH
96
96
  * @memberOf Monster.Components.Form
97
97
  * @summary A reload control
98
- * @fires Monster.Components.Form.event:monster-fetched
98
+ * @fires Monster.Components.event:monster-fetched
99
99
  */
100
100
  class Reload extends CustomElement {
101
101
  /**
@@ -188,7 +188,7 @@ class Reload extends CustomElement {
188
188
  * @throws {Error} request failed
189
189
  * @throws {Error} not found
190
190
  * @throws {Error} undefined status or type
191
- * @fires Monster.Components.Form.event:monster-fetched
191
+ * @fires Monster.Components.event:monster-fetched
192
192
  * @return {Monster.Components.Form.Form}
193
193
  */
194
194
  [assembleMethodSymbol]() {
@@ -257,7 +257,7 @@ function initOptionsFromArguments() {
257
257
  * @throws {Error} request failed
258
258
  * @throws {Error} not found
259
259
  * @throws {Error} undefined status or type
260
- * @fires Monster.Components.Form.event:monster-fetched
260
+ * @fires Monster.Components.event:monster-fetched
261
261
  */
262
262
  function initIntersectionObserver() {
263
263
  if (this[intersectionObserverWasInitialized] === true) {
@@ -306,7 +306,7 @@ function initIntersectionObserver() {
306
306
  * @throws {Error} undefined status or type
307
307
  * @throws {TypeError} value is not an instance of
308
308
  * @throws {TypeError} value is not a string
309
- * @fires Monster.Components.Form.event:monster-fetched
309
+ * @fires Monster.Components.event:monster-fetched
310
310
  * @return {Promise}
311
311
  */
312
312
  function loadContent() {
package/source/components/form/shadow-reload.mjs CHANGED
@@ -77,7 +77,7 @@ export { ShadowReload };
77
77
  * @copyright schukai GmbH
78
78
  * @memberOf Monster.Components.Form
79
79
  * @summary A shadow reload control
80
- * @fires Monster.Components.Form.event:monster-fetched
80
+ * @fires Monster.Components.event:monster-fetched
81
81
  */
82
82
  class ShadowReload extends Reload {
83
83
  /**
package/source/components/form/tabs.mjs CHANGED
@@ -45,7 +45,7 @@ export { Tabs };
45
45
  * @copyright schukai GmbH
46
46
  * @memberOf Monster.Components.Form
47
47
  * @summary A configurable tab control
48
- * @fires Monster.Components.Form.event:monster-fetched
48
+ * @fires Monster.Components.event:monster-fetched
49
49
  * @deprecated since 3.59.0 use {@link Monster.Components.Layout.Tabs}
50
50
  */
51
51
  class Tabs extends NewTabs {
package/source/components/form/template.mjs CHANGED
@@ -64,7 +64,7 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
64
64
  * @copyright schukai GmbH
65
65
  * @memberOf Monster.Components.Form
66
66
  * @summary A template control
67
- * @fires Monster.Components.Form.event:monster-fetched
67
+ * @fires Monster.Components.event:monster-fetched
68
68
  */
69
69
  class Template extends CustomElement {
70
70
  /**
@@ -155,7 +155,7 @@ class Template extends CustomElement {
155
155
  * @throws {Error} request failed
156
156
  * @throws {Error} not found
157
157
  * @throws {Error} undefined status or type
158
- * @fires Monster.Components.Form.event:monster-fetched
158
+ * @fires Monster.Components.event:monster-fetched
159
159
  * @return {Monster.Components.Form.Form}
160
160
  */
161
161
  [assembleMethodSymbol]() {
@@ -241,7 +241,7 @@ function initOptionsFromArguments() {
241
241
  * @throws {Error} request failed
242
242
  * @throws {Error} not found
243
243
  * @throws {Error} undefined status or type
244
- * @fires Monster.Components.Form.event:monster-fetched
244
+ * @fires Monster.Components.event:monster-fetched
245
245
  */
246
246
  function initIntersectionObserver() {
247
247
  if (this[intersectionObserverWasInitialized] === true) {
@@ -287,7 +287,7 @@ function initIntersectionObserver() {
287
287
  * @throws {Error} undefined status or type
288
288
  * @throws {TypeError} value is not an instance of
289
289
  * @throws {TypeError} value is not a string
290
- * @fires Monster.Components.Form.event:monster-fetched
290
+ * @fires Monster.Components.event:monster-fetched
291
291
  */
292
292
  function loadContent() {
293
293
  if (!this.shadowRoot) {
package/source/components/layout/events.mjs ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
3
+ * Node module: @schukai/monster
4
+ * This file is licensed under the AGPLv3 License.
5
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
6
+ */
7
+
8
+ /**
9
+ * This event is fired when a dimension of a control is changed.
10
+ *
11
+ * @memberOf Monster.Components.Layout
12
+ * @event event:monster-dimension-changed
13
+ * @type {object}
14
+ * @property {Object} control control
15
+ * @property {string} details[].dimension
16
+ */
17
+
18
+ /**
19
+ * This event is fired when a tab is changed.
20
+ *
21
+ * @memberOf Monster.Components.Layout
22
+ * @event event:monster-tab-changed
23
+ */
24
+
25
+ /**
26
+ * This event is fired when a tab is changed.
27
+ *
28
+ * @memberOf Monster.Components.Layout
29
+ * @event event:monster-tab-remove
30
+ */
package/source/components/layout/split-screen.mjs CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  registerCustomElement,
10
10
  } from "../../dom/customelement.mjs";
11
11
  import "../notify/notify.mjs";
12
+ import {fireCustomEvent} from "../../dom/events.mjs";
12
13
  import {Observer} from "../../types/observer.mjs";
13
14
  import {SplitScreenStyleSheet} from "./stylesheet/split-screen.mjs";
14
15
  import {instanceSymbol} from "../../constants.mjs";
@@ -85,6 +86,7 @@ const TYPE_HORIZONTAL = "horizontal";
85
86
  * @copyright schukai GmbH
86
87
  * @memberOf Monster.Components.Layout
87
88
  * @summary A simple split screen layout
89
+ * @fires Monster.Components.Layout.event:monster-dimension-changed
88
90
  */
89
91
  class SplitScreen extends CustomElement {
90
92
 
@@ -123,6 +125,23 @@ class SplitScreen extends CustomElement {
123
125
  },
124
126
  });
125
127
  }
128
+
129
+ fullStartScreen() {
130
+ this.setDimension("100%");
131
+ return this;
132
+ }
133
+
134
+ fullEndScreen() {
135
+ this.setDimension("0%");
136
+ return this;
137
+ }
138
+
139
+ resetScreen() {
140
+ this.setDimension(this.getOption("dimension").initial);
141
+ return this;
142
+ }
143
+
144
+
126
145
 
127
146
  setContent(html) {
128
147
  this.setOption("content", html);
@@ -182,6 +201,7 @@ class SplitScreen extends CustomElement {
182
201
 
183
202
  /**
184
203
  * Set the dimensions of the panel based on the split type.
204
+ * @fires Monster.Components.Layout.event:monster-dimension-changed
185
205
  */
186
206
  function applyPanelDimensions() {
187
207
 
@@ -203,6 +223,12 @@ function applyPanelDimensions() {
203
223
  this[splitScreenElementSymbol].classList.remove("vertical");
204
224
 
205
225
  }
226
+
227
+ fireCustomEvent(this, "monster-dimension-changed", {
228
+ controller: this,
229
+ dimension: dimension
230
+ });
231
+
206
232
  }
207
233
 
208
234
 
@@ -373,12 +399,12 @@ function initEventHandler() {
373
399
  function getTemplate() {
374
400
  // language=HTML
375
401
  return `
376
- <div data-monster-role="split-screen" part="container">
402
+ <div data-monster-role="split-screen" part="control">
377
403
  <div data-monster-role="startPanel" class="panel" part="startPanel">
378
404
  <slot name="start"></slot>
379
405
  </div>
380
406
  <div data-monster-role="dragger" part="dragger">
381
- <div data-monster-role="handle"></div>
407
+ <div data-monster-role="handle" part="handle"></div>
382
408
  </div>
383
409
  <div data-monster-role="endPanel" class="panel" part="endPanel">
384
410
  <slot name="end"></slot>
package/source/components/layout/style/tabs.pcss CHANGED
@@ -8,7 +8,6 @@
8
8
  @import '../../style/mixin/typography.pcss';
9
9
  @import '../../style/mixin/hover.pcss';
10
10
 
11
-
12
11
  [data-monster-role=nav] button.hidden {
13
12
  display: none;
14
13
  }
@@ -26,7 +25,11 @@ nav[data-monster-role=nav] {
26
25
  border-radius: var(--monster-border-radius);
27
26
  border-bottom-style: var(--monster-border-style);
28
27
  box-shadow: var(--monster-box-shadow-1);
29
- border-color: var(--monster-bg-color-primary-2);
28
+ border-color: var(--monster-bg-color-primary-2);
29
+
30
+ color: var(--monster-color-gray-6);
31
+ background-color: var(--monster-color-gray-1);
32
+
30
33
  }
31
34
 
32
35
  [data-monster-role=nav] button .remove-tab {
@@ -49,6 +52,7 @@ nav[data-monster-role=nav] {
49
52
  font-size: 1rem;
50
53
  line-height: 1.4;
51
54
  font-weight: normal;
55
+
52
56
  }
53
57
 
54
58
  [data-monster-role=nav] button {
package/source/components/layout/stylesheet/tabs.mjs CHANGED
@@ -20,7 +20,7 @@ const TabsStyleSheet = new CSSStyleSheet();
20
20
  try {
21
21
  TabsStyleSheet.insertRule(`
22
22
  @layer tabs {
23
- :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}div[data-monster-role=popper]{background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;padding:1.1em;z-index:var(--monster-z-index-modal)}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2)}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{box-sizing:border-box;content:\"\";transform:rotate(45deg);visibility:visible}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-bottom:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-bottom:transparent;border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:transparent}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}[data-monster-role=nav] button.hidden{display:none}nav[data-monster-role=nav]{align-items:flex-end;border-bottom-style:var(--monster-border-style);border-bottom-width:thin;border-color:var(--monster-bg-color-primary-2);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;margin-bottom:.75rem;overflow:hidden}[data-monster-role=nav] button .remove-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;background-size:16px;flex-wrap:nowrap;height:16px;min-height:16px;order:2;width:16px}[data-monster-role=nav] button span{display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;line-height:1.4;white-space:pre}[data-monster-role=nav] button{align-content:center;align-items:center;align-self:stretch;background-color:var(--monster-color-gray-1);border:none;border-bottom:var(--monster-border-style);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-gray-6);cursor:pointer;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5;margin-right:.75rem;outline:none;padding:.375rem 0;text-align:center;text-decoration:none;transition:color .8s;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}@media (prefers-color-scheme:dark){[data-monster-role=nav] button{background-color:var(--monster-color-gray-6);color:var(--monster-color-gray-1)}}[data-monster-role=nav] button:not([disabled]):hover,[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-bottom-style:var(--monster-border-style);border-color:var(--monster-bg-color-secondary-3);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-secondary-3)}[data-monster-role=nav] button[disabled]{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1);cursor:not-allowed}[data-monster-role=nav] button[data-monster-role=switch]{align-self:center;border:0;order:2;touch-action:none}[data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover{border-bottom-width:0}[data-monster-role=nav] button img{height:1.3rem;margin-left:.4rem;width:1.3rem}::slotted(:not([slot]):not(.active)){display:none}::slotted(*){align-self:center}::slotted([slot]){border-bottom-style:var(--monster-border-style);border-bottom-width:var(--monster-border-width);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1)}::slotted([slot=start]){margin-right:.75rem;order:0}::slotted([slot=end]){margin-left:.75rem;order:3}[data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]){border:0;justify-content:left;padding-left:15px;padding-right:15px;width:100%}[data-monster-role=nav] [data-monster-role=popper-nav] button:hover,[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{border:0}
23
+ :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}div[data-monster-role=popper]{background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;padding:1.1em;z-index:var(--monster-z-index-modal)}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2)}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{box-sizing:border-box;content:\"\";transform:rotate(45deg);visibility:visible}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-bottom:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-bottom:transparent;border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:transparent}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}[data-monster-role=nav] button.hidden{display:none}nav[data-monster-role=nav]{align-items:flex-end;background-color:var(--monster-color-gray-1);border-bottom-style:var(--monster-border-style);border-bottom-width:thin;border-color:var(--monster-bg-color-primary-2);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-gray-6);display:flex;flex-direction:row;flex-wrap:nowrap;margin-bottom:.75rem;overflow:hidden}[data-monster-role=nav] button .remove-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;background-size:16px;flex-wrap:nowrap;height:16px;min-height:16px;order:2;width:16px}[data-monster-role=nav] button span{display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;line-height:1.4;white-space:pre}[data-monster-role=nav] button{align-content:center;align-items:center;align-self:stretch;background-color:var(--monster-color-gray-1);border:none;border-bottom:var(--monster-border-style);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-gray-6);cursor:pointer;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5;margin-right:.75rem;outline:none;padding:.375rem 0;text-align:center;text-decoration:none;transition:color .8s;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}@media (prefers-color-scheme:dark){[data-monster-role=nav] button{background-color:var(--monster-color-gray-6);color:var(--monster-color-gray-1)}}[data-monster-role=nav] button:not([disabled]):hover,[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-bottom-style:var(--monster-border-style);border-color:var(--monster-bg-color-secondary-3);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-secondary-3)}[data-monster-role=nav] button[disabled]{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1);cursor:not-allowed}[data-monster-role=nav] button[data-monster-role=switch]{align-self:center;border:0;order:2;touch-action:none}[data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover{border-bottom-width:0}[data-monster-role=nav] button img{height:1.3rem;margin-left:.4rem;width:1.3rem}::slotted(:not([slot]):not(.active)){display:none}::slotted(*){align-self:center}::slotted([slot]){border-bottom-style:var(--monster-border-style);border-bottom-width:var(--monster-border-width);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);box-shadow:var(--monster-box-shadow-1)}::slotted([slot=start]){margin-right:.75rem;order:0}::slotted([slot=end]){margin-left:.75rem;order:3}[data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]){border:0;justify-content:left;padding-left:15px;padding-right:15px;width:100%}[data-monster-role=nav] [data-monster-role=popper-nav] button:hover,[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{border:0}
24
24
  }`, 0);
25
25
  } catch (e) {
26
26
  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
package/source/components/layout/tabs.mjs CHANGED
@@ -168,7 +168,9 @@ const resizeObserverSymbol = Symbol("resizeObserver");
168
168
  * @copyright schukai GmbH
169
169
  * @memberOf Monster.Components.Layout
170
170
  * @summary A configurable tab control
171
- * @fires Monster.Components.Layout.event:monster-fetched
171
+ * @fires Monster.Components.event:monster-fetched
172
+ * @fires Monster.Components.Layout.event:monster-tab-changed
173
+ * @fires Monster.Components.Layout.event:monster-tab-remove
172
174
  */
173
175
  class Tabs extends CustomElement {
174
176
  /**
@@ -285,6 +287,58 @@ class Tabs extends CustomElement {
285
287
  return "monster-tabs";
286
288
  }
287
289
 
290
+ /**
291
+ * A function that activates a tab based on the provided name.
292
+ *
293
+ * The tabs have to be named with the `data-monster-name` attribute.
294
+ *
295
+ * @param {type} idOrName - the name or id of the tab to activate
296
+ * @return {Tabs} - The current instance
297
+ */
298
+ activeTab(idOrName) {
299
+
300
+ let found = false;
301
+
302
+ getSlottedElements.call(this).forEach((node) => {
303
+ if (found === true) {
304
+ return
305
+ }
306
+
307
+ if (node.getAttribute("data-monster-name") === idOrName) {
308
+ this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
309
+ found = true;
310
+ }
311
+
312
+ if (node.getAttribute("id") === idOrName) {
313
+ this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
314
+ found = true;
315
+ }
316
+ })
317
+
318
+ return this
319
+ }
320
+
321
+ /**
322
+ * A function that returns the name or id of the currently active tab.
323
+ *
324
+ * The tabs have to be named with the `data-monster-name` attribute.
325
+ *
326
+ * @returns {string|null}
327
+ */
328
+ getActiveTab() {
329
+ const nodes = getSlottedElements.call(this);
330
+ for (const node of nodes) {
331
+ if (node.matches(".active") === true) {
332
+ if (node.hasAttribute("data-monster-name")) {
333
+ return node.getAttribute("data-monster-name");
334
+ }
335
+
336
+ return node.getAttribute("id");
337
+ }
338
+ }
339
+ return null;
340
+ }
341
+
288
342
  /**
289
343
  * This method is called by the dom and should not be called directly.
290
344
  *
package/source/types/version.mjs CHANGED
@@ -152,7 +152,7 @@ function getMonsterVersion() {
152
152
  }
153
153
 
154
154
  /** don't touch, replaced by make with package.json version */
155
- monsterVersion = new Version("3.60.0");
155
+ monsterVersion = new Version("3.61.0");
156
156
 
157
157
  return monsterVersion;
158
158
  }
package/test/cases/monster.mjs CHANGED
@@ -7,7 +7,7 @@ describe('Monster', function () {
7
7
  let monsterVersion
8
8
 
9
9
  /** don´t touch, replaced by make with package.json version */
10
- monsterVersion = new Version("3.60.0")
10
+ monsterVersion = new Version("3.61.0")
11
11
 
12
12
  let m = getMonsterVersion();
13
13
 
package/test/web/test.html CHANGED
@@ -15,8 +15,8 @@
15
15
  </head>
16
16
  <body>
17
17
  <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
18
- <h1 style='margin-bottom: 0.1em;'>Monster 3.59.0</h1>
19
- <div id="lastupdate" style='font-size:0.7em'>last update Sa 23. Mär 22:14:15 CET 2024</div>
18
+ <h1 style='margin-bottom: 0.1em;'>Monster 3.60.0</h1>
19
+ <div id="lastupdate" style='font-size:0.7em'>last update So 24. Mär 19:58:09 CET 2024</div>
20
20
  </div>
21
21
  <div id="mocha-errors"
22
22
  style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>