@schukai/monster 4.20.1 → 4.22.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 (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +1 -1
  3. package/source/components/content/viewer.mjs +88 -40
  4. package/source/components/form/select.mjs +10 -3
  5. package/source/components/form/style/select.pcss +14 -3
  6. package/source/components/form/stylesheet/select.mjs +7 -14
  7. package/source/text/markdown-parser.mjs +264 -0
  8. package/test/cases/text/markdown-parser.mjs +104 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
2
2
 
3
3
 
4
4
 
5
+ ## [4.22.0] - 2025-06-22
6
+
7
+ ### Add Features
8
+
9
+ - Enhance select component with better messaging and user experience
10
+ ### Changes
11
+
12
+ - update packages
13
+
14
+
15
+
16
+ ## [4.21.0] - 2025-06-22
17
+
18
+ ### Add Features
19
+
20
+ - Add Markdown parser and HTML converter [#324](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/324)
21
+
22
+
23
+
5
24
  ## [4.20.1] - 2025-06-12
6
25
 
7
26
  ### Bug Fixes
package/package.json CHANGED
@@ -1 +1 @@
1
- {"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.20.1"}
1
+ {"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.22.0"}
package/source/components/content/viewer.mjs CHANGED
@@ -23,6 +23,7 @@ import { instanceSymbol } from "../../constants.mjs";
23
23
  import { isString } from "../../types/is.mjs";
24
24
  import { getGlobal } from "../../types/global.mjs";
25
25
  import { MediaType, parseMediaType } from "../../types/mediatype.mjs";
26
+ import { MarkdownToHTML } from "../../text/markdown-parser.mjs";
26
27
 
27
28
  export { Viewer };
28
29
 
@@ -33,7 +34,7 @@ export { Viewer };
33
34
  const viewerElementSymbol = Symbol("viewerElement");
34
35
 
35
36
  /**
36
- * The Viewer component is used to show a PDF, HTML or Image.
37
+ * The Viewer component is used to show a PDF, HTML, or Image.
37
38
  *
38
39
  * @fragments /fragments/components/content/viewer
39
40
  *
@@ -42,7 +43,7 @@ const viewerElementSymbol = Symbol("viewerElement");
42
43
  * @example /examples/components/content/html-viewer with HTML content
43
44
  *
44
45
  * @copyright schukai GmbH
45
- * @summary A simple viewer component for PDF, HTML and images.
46
+ * @summary A simple viewer component for PDF, HTML, and images.
46
47
  */
47
48
  class Viewer extends CustomElement {
48
49
  /**
@@ -64,6 +65,12 @@ class Viewer extends CustomElement {
64
65
  * @property {string} content Content to be displayed in the viewer
65
66
  * @property {Object} classes Css classes
66
67
  * @property {string} classes.viewer Css class for the viewer
68
+ * @property {Object} renderers Renderers for different media types
69
+ * @property {function} renderers.image Function to render image content
70
+ * @property {function} renderers.html Function to render HTML content
71
+ * @property {function} renderers.pdf Function to render PDF content
72
+ * @property {function} renderers.plaintext Function to render plain text content
73
+ * @property {function} renderers.markdown Function to render Markdown content
67
74
  */
68
75
  get defaults() {
69
76
  return Object.assign({}, super.defaults, {
@@ -74,63 +81,93 @@ class Viewer extends CustomElement {
74
81
  classes: {
75
82
  viewer: "",
76
83
  },
84
+ renderers : {
85
+ image: this.setImage,
86
+ html: this.setHTML,
87
+ pdf: this.setPDF,
88
+ plaintext: this.setPlainText,
89
+ markdown: this.setMarkdown,
90
+ }
77
91
  });
78
92
  }
79
93
 
80
94
  /**
81
- * Sets the content of an element based on the provided content and media type.
95
+ * Sets the content of the viewer by processing `data` according to the specified `mediaType`.
96
+ * If no `mediaType` is provided, it defaults to "text/plain".
97
+ * The method uses an appropriate renderer based on the media type to process and display the content.
82
98
  *
83
- * @param {string} content - The content to be set.
84
- * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
85
- * @return {void} This method does not return a value.
86
- * @throws {Error} Throws an error if shadowRoot is not defined.
99
+ * @param {any} data - The content to be displayed in the viewer.
100
+ * @param {string} [mediaType="text/plain"] - The media type of the content to determine the appropriate renderer.
101
+ * @return {void} This method does not return a value, but processes the content or throws an exception on failure.
102
+ * @throws {Error} Throws an error if there is no shadow root defined or if there is an issue with rendering `data`.
87
103
  */
88
- setContent(content, mediaType = "text/plain") {
104
+ setContent(data, mediaType = "text/plain") {
89
105
  if (!this.shadowRoot) {
90
106
  throw new Error("no shadow-root is defined");
91
107
  }
92
108
 
93
- let type;
94
- try {
95
- const m = new parseMediaType(mediaType);
96
- switch (m.type) {
97
- case "image":
98
- return this.setImage(content);
99
- }
100
109
 
101
- mediaType = m.toString();
102
- } catch (error) {
103
- type = null;
110
+ let mt;
111
+ try {
112
+ mt = new parseMediaType(mediaType).toString();
113
+ } catch {
114
+ mt = "text/plain";
104
115
  }
116
+ if (!mt) mt = "text/plain";
117
+
118
+ const { renderers } = this.options;
119
+ const primaryType = mt.split("/")[0];
120
+ const renderer =
121
+ renderers[mt] ||
122
+ renderers[primaryType] ||
123
+ ((d) => this.setPlainText(d));
105
124
 
106
- if (mediaType === undefined || mediaType === null || mediaType === "") {
107
- mediaType = "text/plain";
125
+ try {
126
+ const result = renderer.call(this, data);
127
+ if (result && typeof result.then === "function") {
128
+ result.catch((err) => {
129
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: err }));
130
+ });
131
+ }
132
+ } catch (err) {
133
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: err }));
134
+ throw new Error(err);
108
135
  }
136
+ }
137
+
138
+ /**
139
+ * Renders Markdown content using built-in or custom Markdown parser.
140
+ * Overrideable via `customRenderers['text/markdown']`.
141
+ *
142
+ * @param {string|Blob} data
143
+ */
144
+ setMarkdown(data) {
145
+ const render = (markdownText) => {
146
+ try {
147
+ const html = MarkdownToHTML.convert(markdownText);
148
+ this.setHTML(html);
149
+ } catch (error) {
150
+ this.setPlainText(markdownText); // Fallback
151
+ }
152
+ };
109
153
 
110
- switch (mediaType) {
111
- case "text/html":
112
- this.setHTML(content);
113
- break;
114
- case "text/plain":
115
- this.setPlainText(content);
116
- break;
117
- case "application/pdf":
118
- this.setPDF(content);
119
- break;
120
- case "image/png":
121
- case "image/jpeg":
122
- case "image/gif":
123
- this.setImage(content);
124
- break;
125
- default:
126
- this.setOption("content", content);
154
+ if (data instanceof Blob) {
155
+ blobToText(data)
156
+ .then(render)
157
+ .catch((err) => {
158
+ this.setPlainText("[Invalid Markdown]");
159
+ });
160
+ } else if (isString(data)) {
161
+ render(data);
162
+ } else {
163
+ this.setPlainText("[Unsupported Markdown input]");
127
164
  }
128
165
  }
129
166
 
130
167
  /**
131
168
  * Configures and embeds a PDF document into the application with customizable display settings.
132
169
  *
133
- * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
170
+ * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string.
134
171
  * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
135
172
  * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
136
173
  * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
@@ -163,6 +200,7 @@ class Viewer extends CustomElement {
163
200
 
164
201
  pdfURL = data;
165
202
  } else {
203
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
166
204
  throw new Error("Blob or URL expected");
167
205
  }
168
206
 
@@ -188,16 +226,20 @@ class Viewer extends CustomElement {
188
226
  } else if (isString(data)) {
189
227
  // nothing to do
190
228
  } else {
229
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
191
230
  throw new Error("Blob or URL expected");
192
231
  }
193
232
 
194
- this.setOption("content", '<img src="' + data + '" alt="image" />');
233
+ this.setOption(
234
+ "content",
235
+ `<img style="max-width: 100%" src="${data}" alt="image" part="image">`
236
+ );
195
237
  }
196
238
 
197
239
  /**
198
240
  *
199
241
  * if the data is a string, it is interpreted as HTML.
200
- * if the data is an url, the HTML is loaded from the url and set as content.
242
+ * if the data is a URL, the HTML is loaded from the url and set as content.
201
243
  * if the data is an HTMLElement, the outerHTML is used as content.
202
244
  *
203
245
  * @param {HTMLElement|URL|string|Blob} data
@@ -209,6 +251,7 @@ class Viewer extends CustomElement {
209
251
  this.setOption("content", html);
210
252
  })
211
253
  .catch((error) => {
254
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
212
255
  throw new Error(error);
213
256
  });
214
257
 
@@ -228,9 +271,11 @@ class Viewer extends CustomElement {
228
271
  this.setOption("content", html);
229
272
  })
230
273
  .catch((error) => {
274
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
231
275
  throw new Error(error);
232
276
  });
233
277
  } else {
278
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
234
279
  throw new Error("HTMLElement or string expected");
235
280
  }
236
281
 
@@ -265,6 +310,7 @@ class Viewer extends CustomElement {
265
310
  this.setOption("content", mkPreSpan(text));
266
311
  })
267
312
  .catch((error) => {
313
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
268
314
  throw new Error(error);
269
315
  });
270
316
 
@@ -289,9 +335,11 @@ class Viewer extends CustomElement {
289
335
  this.setOption("content", mkPreSpan(text));
290
336
  })
291
337
  .catch((error) => {
338
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
292
339
  throw new Error(error);
293
340
  });
294
341
  } else {
342
+ this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
295
343
  throw new Error("HTMLElement or string expected");
296
344
  }
297
345
 
package/source/components/form/select.mjs CHANGED
@@ -1594,7 +1594,7 @@ function getSelectionTemplate() {
1594
1594
  data-monster-role="filter"
1595
1595
  autocomplete="off"
1596
1596
  tabindex="0"
1597
- ><div data-monster-replace="path:messages.control"></div>
1597
+ ><div data-monster-replace="path:messages.control" data-monster-role="selection-messages"></div>
1598
1598
  </div>`;
1599
1599
  }
1600
1600
 
@@ -1611,7 +1611,7 @@ function getSummaryTemplate() {
1611
1611
  autocomplete="off"
1612
1612
  tabindex="0"
1613
1613
  >
1614
- <div data-monster-replace="path:messages.selected"></div>
1614
+ <div data-monster-replace="path:messages.selected" data-monster-role="summary-messages"></div>
1615
1615
  </div>`;
1616
1616
  }
1617
1617
 
@@ -2580,7 +2580,14 @@ function areOptionsAvailableAndInitInternal() {
2580
2580
  msg = "";
2581
2581
  }
2582
2582
 
2583
- this.setOption("messages.control", msg);
2583
+ setTimeout(()=>{
2584
+ const opt = this.getOption("options");
2585
+ if (opt === undefined || opt === null || opt.length === 0) {
2586
+ this.setOption("messages.control", msg);
2587
+ }
2588
+ },1000);
2589
+
2590
+ //this.setOption("messages.control", msg);
2584
2591
  this.setOption("messages.summary", "");
2585
2592
 
2586
2593
  if (this.getOption("features.emptyValueIfNoOptions") === true) {
package/source/components/form/style/select.pcss CHANGED
@@ -19,6 +19,10 @@
19
19
  scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
20
20
  scrollbar-width: thin;
21
21
 
22
+ user-select: none;
23
+ -webkit-user-select: none;
24
+ -moz-user-select: none;
25
+ -ms-user-select: none;
22
26
  }
23
27
 
24
28
  .d-none {
@@ -300,11 +304,8 @@ div[data-monster-role=selection] {
300
304
  [data-monster-role=option][data-monster-focused=true] {
301
305
  outline: 1px dashed var(--monster-color-selection-4);
302
306
  }
303
-
304
-
305
307
  }
306
308
 
307
-
308
309
  [data-monster-role="filter"]::placeholder {
309
310
  color: var(--monster-color-primary-2);
310
311
  background-color: var(--monster-bg-color-primary-2);
@@ -314,3 +315,13 @@ div[data-monster-role=selection] {
314
315
  [data-monster-role=option] > input:focus {
315
316
  outline: none
316
317
  }
318
+
319
+
320
+ [data-monster-role=selection-messages]:empty::before {
321
+ content: "\u00A0";
322
+ }
323
+
324
+ [data-monster-role=summary-messages]:empty::before {
325
+ content: "\u00A0";
326
+ }
327
+
package/source/components/form/stylesheet/select.mjs CHANGED
@@ -10,10 +10,10 @@
10
10
  * For more information about purchasing a commercial license, please contact schukai GmbH.
11
11
  */
12
12
 
13
- import { addAttributeToken } from "../../../dom/attributes.mjs";
14
- import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
13
+ import {addAttributeToken} from "../../../dom/attributes.mjs";
14
+ import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
15
15
 
16
- export { SelectStyleSheet };
16
+ export {SelectStyleSheet}
17
17
 
18
18
  /**
19
19
  * @private
@@ -22,17 +22,10 @@ export { SelectStyleSheet };
22
22
  const SelectStyleSheet = new CSSStyleSheet();
23
23
 
24
24
  try {
25
- SelectStyleSheet.insertRule(
26
- `
25
+ SelectStyleSheet.insertRule(`
27
26
  @layer select {
28
- .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)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.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)}.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)}.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)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.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}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;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;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}
29
- }`,
30
- 0,
31
- );
27
+ .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)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.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)}.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)}.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)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.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}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;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;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%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\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}[data-monster-role=selection-messages]:empty:before,[data-monster-role=summary-messages]:empty:before{content:\"\u00A0\"}
28
+ }`, 0);
32
29
  } catch (e) {
33
- addAttributeToken(
34
- document.getRootNode().querySelector("html"),
35
- ATTRIBUTE_ERRORMESSAGE,
36
- e + "",
37
- );
30
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
38
31
  }
package/source/text/markdown-parser.mjs ADDED
@@ -0,0 +1,264 @@
1
+ /**
2
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
3
+ * Node module: @schukai/monster
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
11
+ *
12
+ * SPDX-License-Identifier: AGPL-3.0
13
+ */
14
+
15
+ export { MarkdownToHTML };
16
+
17
+ /**
18
+ * A class to convert Markdown text into HTML. It includes multiple parsing
19
+ * features such as handling headings, lists, code blocks, inline formatting,
20
+ * and task list items.
21
+ */
22
+ class MarkdownToHTML {
23
+ constructor(markdown, options = {}) {
24
+ this.markdown = markdown;
25
+ this.tokens = [];
26
+
27
+ this.options = {
28
+ taskListDisabled: true,
29
+ codeHighlightClassPrefix: 'language-',
30
+ escapeHTML: true,
31
+ ...options
32
+ };
33
+
34
+ this._taskId = 0; // For unique checkbox IDs in task lists
35
+ }
36
+
37
+ /**
38
+ * Tokenizes the Markdown input into a structured array of tokens.
39
+ */
40
+ tokenize() {
41
+ const lines = this.markdown.split('\n');
42
+ let inCodeBlock = false;
43
+ let codeBuffer = [];
44
+ let listBuffer = null;
45
+ let listType = null; // 'ul' or 'ol'
46
+ let codeLang = '';
47
+
48
+ for (const line of lines) {
49
+ const trimmed = line.trim();
50
+
51
+ // Detect start/end of fenced code blocks
52
+ const codeFenceMatch = trimmed.match(/^```(\w+)?/);
53
+ if (codeFenceMatch) {
54
+ if (inCodeBlock) {
55
+ this.tokens.push({
56
+ type: 'code-block',
57
+ content: codeBuffer.join('\n'),
58
+ language: codeLang || null
59
+ });
60
+ codeBuffer = [];
61
+ codeLang = '';
62
+ inCodeBlock = false;
63
+ } else {
64
+ this._flushList(listBuffer);
65
+ listBuffer = null;
66
+ listType = null;
67
+ codeLang = codeFenceMatch[1] || '';
68
+ inCodeBlock = true;
69
+ }
70
+ continue;
71
+ }
72
+
73
+ if (inCodeBlock) {
74
+ codeBuffer.push(line);
75
+ continue;
76
+ }
77
+
78
+ // Heading (e.g. #, ##, ###, etc.)
79
+ if (/^#{1,6}\s/.test(trimmed)) {
80
+ this._flushList(listBuffer);
81
+ listBuffer = null;
82
+ listType = null;
83
+ const level = trimmed.match(/^#+/)[0].length;
84
+ this.tokens.push({ type: 'heading', level, content: trimmed.slice(level + 1).trim() });
85
+ continue;
86
+ }
87
+
88
+ // Ordered list item (e.g. 1. Item)
89
+ if (/^\d+\.\s+/.test(trimmed)) {
90
+ if (listType && listType !== 'ol') {
91
+ this._flushList(listBuffer);
92
+ listBuffer = null;
93
+ }
94
+ listBuffer = listBuffer || { type: 'ordered-list', items: [] };
95
+ listType = 'ol';
96
+ listBuffer.items.push(trimmed.replace(/^\d+\.\s+/, ''));
97
+ continue;
98
+ }
99
+
100
+ // Unordered list item or task list (e.g. - Item, - [x] Task)
101
+ if (/^[-+*]\s+/.test(trimmed)) {
102
+ if (listType && listType !== 'ul') {
103
+ this._flushList(listBuffer);
104
+ listBuffer = null;
105
+ }
106
+ listBuffer = listBuffer || { type: 'unordered-list', items: [] };
107
+ listType = 'ul';
108
+
109
+ const content = trimmed.replace(/^[-+*]\s+/, '');
110
+ const taskMatch = content.match(/^\[( |x|X)]\s+(.*)/);
111
+
112
+ if (taskMatch) {
113
+ listBuffer.items.push({
114
+ type: 'task',
115
+ checked: taskMatch[1].toLowerCase() === 'x',
116
+ content: taskMatch[2]
117
+ });
118
+ } else {
119
+ listBuffer.items.push(content);
120
+ }
121
+ continue;
122
+ }
123
+
124
+ // Blank line
125
+ if (trimmed === '') {
126
+ this._flushList(listBuffer);
127
+ listBuffer = null;
128
+ listType = null;
129
+ this.tokens.push({ type: 'blank' });
130
+ continue;
131
+ }
132
+
133
+ // Plain paragraph
134
+ this._flushList(listBuffer);
135
+ listBuffer = null;
136
+ listType = null;
137
+ this.tokens.push({ type: 'paragraph', content: trimmed });
138
+ }
139
+
140
+ // Flush any remaining list or code buffer at EOF
141
+ this._flushList(listBuffer);
142
+ if (inCodeBlock && codeBuffer.length > 0) {
143
+ this.tokens.push({ type: 'code-block', content: codeBuffer.join('\n'), language: codeLang || null });
144
+ }
145
+
146
+ return this.tokens;
147
+ }
148
+
149
+ /**
150
+ * Pushes the current list buffer into the token stream if it's not empty.
151
+ */
152
+ _flushList(listBuffer) {
153
+ if (listBuffer && Array.isArray(listBuffer.items) && listBuffer.items.length > 0) {
154
+ this.tokens.push(listBuffer);
155
+ }
156
+ }
157
+
158
+ /**
159
+ * Escapes HTML characters to prevent injection.
160
+ */
161
+ static escapeHTML(text) {
162
+ return text
163
+ .replace(/&/g, '&amp;')
164
+ .replace(/</g, '&lt;')
165
+ .replace(/>/g, '&gt;');
166
+ }
167
+
168
+ /**
169
+ * Filters out invalid characters in code language names.
170
+ */
171
+ static safeCodeLang(lang) {
172
+ return typeof lang === 'string'
173
+ ? lang.replace(/[^a-zA-Z0-9\-_]/g, '').slice(0, 32)
174
+ : '';
175
+ }
176
+
177
+ /**
178
+ * Converts inline Markdown to HTML (bold, italic, code, links).
179
+ * Optionally escapes HTML.
180
+ */
181
+ parseInline(text) {
182
+ let out = this.options.escapeHTML ? MarkdownToHTML.escapeHTML(text) : text;
183
+
184
+ // Markdown elements
185
+ out = out.replace(/\[([^\]]+)]\(([^)]+)\)/g, '<a href="$2">$1</a>'); // Links
186
+ out = out.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); // Bold
187
+ out = out.replace(/\*(.+?)\*/g, '<em>$1</em>'); // Italic
188
+ out = out.replace(/`(.+?)`/g, '<code>$1</code>'); // Inline code
189
+ return out;
190
+ }
191
+
192
+ /**
193
+ * Converts tokens to final HTML.
194
+ */
195
+ render() {
196
+ if (this.tokens.length === 0) {
197
+ this.tokenize();
198
+ }
199
+
200
+ let html = '';
201
+
202
+ for (const token of this.tokens) {
203
+ switch (token.type) {
204
+ case 'heading':
205
+ html += `<h${token.level}>${this.parseInline(token.content)}</h${token.level}>\n`;
206
+ break;
207
+
208
+ case 'paragraph':
209
+ html += `<p>${this.parseInline(token.content)}</p>\n`;
210
+ break;
211
+
212
+ case 'unordered-list':
213
+ html += '<ul>\n';
214
+ for (const item of token.items) {
215
+ if (typeof item === 'string') {
216
+ html += ` <li>${this.parseInline(item)}</li>\n`;
217
+ } else if (item && item.type === 'task') {
218
+ this._taskId += 1;
219
+ const inputId = `mdtask-${this._taskId}`;
220
+ const checked = item.checked ? ' checked' : '';
221
+ const disabled = this.options.taskListDisabled ? ' disabled' : '';
222
+ html += ` <li><input type="checkbox" id="${inputId}"${disabled}${checked}><label for="${inputId}"> ${this.parseInline(item.content)}</label></li>\n`;
223
+ }
224
+ }
225
+ html += '</ul>\n';
226
+ break;
227
+
228
+ case 'ordered-list':
229
+ html += '<ol>\n';
230
+ for (const item of token.items) {
231
+ html += ` <li>${this.parseInline(item)}</li>\n`;
232
+ }
233
+ html += '</ol>\n';
234
+ break;
235
+
236
+ case 'code-block': {
237
+ const safeLang = MarkdownToHTML.safeCodeLang(token.language);
238
+ const langClass = safeLang
239
+ ? ` class="${this.options.codeHighlightClassPrefix}${safeLang}"`
240
+ : '';
241
+ const codeContent = this.options.escapeHTML
242
+ ? MarkdownToHTML.escapeHTML(token.content)
243
+ : token.content;
244
+ html += `<pre><code${langClass}>${codeContent}</code></pre>\n`;
245
+ break;
246
+ }
247
+
248
+ case 'blank':
249
+ html += '\n';
250
+ break;
251
+ }
252
+ }
253
+
254
+ return html.trim();
255
+ }
256
+
257
+ /**
258
+ * Convenience static method to render Markdown directly.
259
+ */
260
+ static convert(markdown, options = {}) {
261
+ const converter = new MarkdownToHTML(markdown, options);
262
+ return converter.render();
263
+ }
264
+ }
package/test/cases/text/markdown-parser.mjs ADDED
@@ -0,0 +1,104 @@
1
+ import { expect } from 'chai';
2
+ import { MarkdownToHTML } from '../../../source/text/markdown-parser.mjs';
3
+
4
+ describe('MarkdownToHTML', () => {
5
+
6
+ it('should convert headings correctly', () => {
7
+ const md = '# Title\n## Subtitle';
8
+ const html = MarkdownToHTML.convert(md);
9
+ expect(html).to.include('<h1>Title</h1>');
10
+ expect(html).to.include('<h2>Subtitle</h2>');
11
+ });
12
+
13
+ it('should convert paragraphs correctly', () => {
14
+ const md = 'This is a paragraph.\n\nAnother one.';
15
+ const html = MarkdownToHTML.convert(md);
16
+ expect(html).to.include('<p>This is a paragraph.</p>');
17
+ expect(html).to.include('<p>Another one.</p>');
18
+ });
19
+
20
+ it('should convert bold, italic and inline code', () => {
21
+ const md = '**bold** *italic* `code`';
22
+ const html = MarkdownToHTML.convert(md);
23
+ expect(html).to.include('<strong>bold</strong>');
24
+ expect(html).to.include('<em>italic</em>');
25
+ expect(html).to.include('<code>code</code>');
26
+ });
27
+
28
+ it('should convert links correctly', () => {
29
+ const md = '[Link](https://example.com)';
30
+ const html = MarkdownToHTML.convert(md);
31
+ expect(html).to.include('<a href="https://example.com">Link</a>');
32
+ });
33
+
34
+ it('should convert unordered lists', () => {
35
+ const md = '- Item 1\n- Item 2';
36
+ const html = MarkdownToHTML.convert(md);
37
+ expect(html).to.include('<ul>');
38
+ expect(html).to.include('<li>Item 1</li>');
39
+ expect(html).to.include('<li>Item 2</li>');
40
+ });
41
+
42
+ it('should convert ordered lists', () => {
43
+ const md = '1. First\n2. Second';
44
+ const html = MarkdownToHTML.convert(md);
45
+ expect(html).to.include('<ol>');
46
+ expect(html).to.include('<li>First</li>');
47
+ expect(html).to.include('<li>Second</li>');
48
+ });
49
+
50
+ it('should convert task lists with disabled checkboxes', () => {
51
+ const md = '- [ ] Task A\n- [x] Task B';
52
+ const html = MarkdownToHTML.convert(md);
53
+ expect(html).to.include('type="checkbox"');
54
+ expect(html).to.include('disabled');
55
+ expect(html).to.include('checked');
56
+ });
57
+
58
+ it('should generate unique checkbox IDs for task list items', () => {
59
+ const md = '- [ ] A\n- [ ] B';
60
+ const html = MarkdownToHTML.convert(md);
61
+ expect(html).to.match(/<input type="checkbox" id="mdtask-1"/);
62
+ expect(html).to.match(/<input type="checkbox" id="mdtask-2"/);
63
+ });
64
+
65
+ it('should render code blocks with language class', () => {
66
+ const md = '```js\nconst x = 1;\n```';
67
+ const html = MarkdownToHTML.convert(md);
68
+ expect(html).to.include('<pre><code class="language-js">');
69
+ expect(html).to.include('const x = 1;');
70
+ });
71
+
72
+ it('should handle open code blocks at EOF', () => {
73
+ const md = '```python\nprint("Hi")';
74
+ const html = MarkdownToHTML.convert(md);
75
+ expect(html).to.include('print("Hi")');
76
+ expect(html).to.include('<code class="language-python">');
77
+ });
78
+
79
+ it('should escape HTML in paragraphs and code blocks by default', () => {
80
+ const md = '<div>\n\n```html\n<div></div>\n```';
81
+ const html = MarkdownToHTML.convert(md);
82
+ expect(html).to.include('&lt;div&gt;');
83
+ expect(html).to.include('&lt;/div&gt;');
84
+ });
85
+
86
+ it('should disable HTML escaping when escapeHTML=false', () => {
87
+ const md = '<span>';
88
+ const html = MarkdownToHTML.convert(md, { escapeHTML: false });
89
+ expect(html).to.include('<span>');
90
+ });
91
+
92
+ it('should parse inline markdown correctly inside list items', () => {
93
+ const md = '- **bold** and *italic*';
94
+ const html = MarkdownToHTML.convert(md);
95
+ expect(html).to.include('<strong>bold</strong>');
96
+ expect(html).to.include('<em>italic</em>');
97
+ });
98
+
99
+ it('should ignore empty input', () => {
100
+ const html = MarkdownToHTML.convert('');
101
+ expect(html).to.equal('');
102
+ });
103
+
104
+ });