@schukai/monster 4.21.0 → 4.22.1

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 (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +1 -1
  3. package/source/components/content/viewer.mjs +455 -355
  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
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
2
2
 
3
3
 
4
4
 
5
+ ## [4.22.1] - 2025-06-22
6
+
7
+ ### Bug Fixes
8
+
9
+ - Refactor Viewer component and clean up markdown-related content [#309](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/309)
10
+
11
+
12
+
13
+ ## [4.22.0] - 2025-06-22
14
+
15
+ ### Add Features
16
+
17
+ - Enhance select component with better messaging and user experience
18
+ ### Changes
19
+
20
+ - update packages
21
+
22
+
23
+
5
24
  ## [4.21.0] - 2025-06-22
6
25
 
7
26
  ### Add Features
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.21.0"}
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.1"}
package/source/components/content/viewer.mjs CHANGED
@@ -13,19 +13,19 @@
13
13
  */
14
14
 
15
15
  import {
16
- assembleMethodSymbol,
17
- CustomElement,
18
- registerCustomElement,
16
+ assembleMethodSymbol,
17
+ CustomElement,
18
+ registerCustomElement,
19
19
  } from "../../dom/customelement.mjs";
20
20
  import "../notify/notify.mjs";
21
- import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
22
- import { instanceSymbol } from "../../constants.mjs";
23
- import { isString } from "../../types/is.mjs";
24
- import { getGlobal } from "../../types/global.mjs";
25
- import { MediaType, parseMediaType } from "../../types/mediatype.mjs";
26
- import { MarkdownToHTML } from "../../text/markdown-parser.mjs";
21
+ import {ViewerStyleSheet} from "./stylesheet/viewer.mjs";
22
+ import {instanceSymbol} from "../../constants.mjs";
23
+ import {isString} from "../../types/is.mjs";
24
+ import {getGlobal} from "../../types/global.mjs";
25
+ import {MediaType, parseMediaType} from "../../types/mediatype.mjs";
26
+ import {MarkdownToHTML} from "../../text/markdown-parser.mjs";
27
27
 
28
- export { Viewer };
28
+ export {Viewer};
29
29
 
30
30
  /**
31
31
  * @private
@@ -46,331 +46,431 @@ const viewerElementSymbol = Symbol("viewerElement");
46
46
  * @summary A simple viewer component for PDF, HTML, and images.
47
47
  */
48
48
  class Viewer extends CustomElement {
49
- /**
50
- * This method is called by the `instanceof` operator.
51
- * @return {symbol}
52
- */
53
- static get [instanceSymbol]() {
54
- return Symbol.for("@schukai/monster/components/content/viewer@@instance");
55
- }
56
-
57
- /**
58
- * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
59
- * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
60
- *
61
- * The individual configuration values can be found in the table.
62
- *
63
- * @property {Object} templates Template definitions
64
- * @property {string} templates.main Main template
65
- * @property {string} content Content to be displayed in the viewer
66
- * @property {Object} classes Css classes
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
74
- */
75
- get defaults() {
76
- return Object.assign({}, super.defaults, {
77
- templates: {
78
- main: getTemplate(),
79
- },
80
- content: "<slot></slot>",
81
- classes: {
82
- viewer: "",
83
- },
84
- renderers : {
85
- image: this.setImage,
86
- html: this.setHTML,
87
- pdf: this.setPDF,
88
- plaintext: this.setPlainText,
89
- markdown: this.setMarkdown,
90
- }
91
- });
92
- }
93
-
94
- /**
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.
98
- *
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`.
103
- */
104
- setContent(data, mediaType = "text/plain") {
105
- if (!this.shadowRoot) {
106
- throw new Error("no shadow-root is defined");
107
- }
108
-
109
-
110
- let mt;
111
- try {
112
- mt = new parseMediaType(mediaType).toString();
113
- } catch {
114
- mt = "text/plain";
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));
124
-
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);
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
- };
153
-
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]");
164
- }
165
- }
166
-
167
- /**
168
- * Configures and embeds a PDF document into the application with customizable display settings.
169
- *
170
- * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string.
171
- * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
172
- * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
173
- * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
174
- * @return {void} This method returns nothing but sets the embedded PDF as the content.
175
- */
176
- setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
177
- const hashes =
178
- "#toolbar=" +
179
- (toolbar ? "1" : "0") +
180
- "&navpanes=" +
181
- (navigation ? "1" : "0") +
182
- "&scrollbar=" +
183
- (scrollbar ? "1" : "0");
184
-
185
- let pdfURL = "";
186
- if (isBlob(data)) {
187
- pdfURL = URL.createObjectURL(data);
188
- pdfURL += hashes;
189
- } else if (isURL(data)) {
190
- // check if the url already contains the hashes
191
- if (data?.hash?.indexOf("#") === -1) {
192
- pdfURL = data.toString() + hashes;
193
- } else {
194
- pdfURL = data.toString();
195
- }
196
- } else if (isString(data)) {
197
- //URL.createObjectURL(data);
198
- const blobObj = new Blob([atob(data)], { type: "application/pdf" });
199
- const url = window.URL.createObjectURL(blobObj);
200
-
201
- pdfURL = data;
202
- } else {
203
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
204
- throw new Error("Blob or URL expected");
205
- }
206
-
207
- const html =
208
- '<object part="pdf" data="' +
209
- pdfURL +
210
- '" width="100%" height="100%" type="application/pdf"></object>';
211
-
212
- this.setOption("content", html);
213
- }
214
-
215
- /**
216
- * Sets an image for the target by accepting a blob, URL, or string representation of the image.
217
- *
218
- * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
219
- * @return {void} Does not return a value.
220
- */
221
- setImage(data) {
222
- if (isBlob(data)) {
223
- data = URL.createObjectURL(data);
224
- } else if (isURL(data)) {
225
- // nothing to do
226
- } else if (isString(data)) {
227
- // nothing to do
228
- } else {
229
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
230
- throw new Error("Blob or URL expected");
231
- }
232
-
233
- this.setOption(
234
- "content",
235
- `<img style="max-width: 100%" src="${data}" alt="image" part="image">`
236
- );
237
- }
238
-
239
- /**
240
- *
241
- * if the data is a string, it is interpreted as HTML.
242
- * if the data is a URL, the HTML is loaded from the url and set as content.
243
- * if the data is an HTMLElement, the outerHTML is used as content.
244
- *
245
- * @param {HTMLElement|URL|string|Blob} data
246
- */
247
- setHTML(data) {
248
- if (data instanceof Blob) {
249
- blobToText(data)
250
- .then((html) => {
251
- this.setOption("content", html);
252
- })
253
- .catch((error) => {
254
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
255
- throw new Error(error);
256
- });
257
-
258
- return;
259
- } else if (data instanceof HTMLElement) {
260
- data = data.outerHTML;
261
- } else if (isString(data)) {
262
- // nothing to do
263
- } else if (isURL(data)) {
264
- // fetch element
265
- getGlobal()
266
- .fetch(data)
267
- .then((response) => {
268
- return response.text();
269
- })
270
- .then((html) => {
271
- this.setOption("content", html);
272
- })
273
- .catch((error) => {
274
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
275
- throw new Error(error);
276
- });
277
- } else {
278
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
279
- throw new Error("HTMLElement or string expected");
280
- }
281
-
282
- this.setOption("content", data);
283
- }
284
-
285
- /**
286
- * Sets the plain text content by processing the input data, which can be of various types, including Blob,
287
- * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
288
- *
289
- * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
290
- * a plain string, or a string formatted as a valid URL. The method determines
291
- * the data type and processes it accordingly.
292
- * @return {void} - This method does not return any value. It processes the content and updates the relevant option
293
- * property.
294
- */
295
- setPlainText(data) {
296
- const mkPreSpan = (text) => {
297
- const pre = document.createElement("pre");
298
- pre.innerText = text;
299
- pre.setAttribute("part", "text");
300
- return pre.outerHTML;
301
- };
302
-
303
- if (data instanceof Blob) {
304
- blobToText(data)
305
- .then((text) => {
306
- const div = document.createElement("div");
307
- div.innerHTML = test;
308
- text = div.innerText;
309
-
310
- this.setOption("content", mkPreSpan(text));
311
- })
312
- .catch((error) => {
313
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
314
- throw new Error(error);
315
- });
316
-
317
- return;
318
- } else if (data instanceof HTMLElement) {
319
- data = data.outerText;
320
- } else if (isString(data)) {
321
- const div = document.createElement("div");
322
- div.innerHTML = data;
323
- data = div.innerText;
324
- } else if (isURL(data)) {
325
- getGlobal()
326
- .fetch(data)
327
- .then((response) => {
328
- return response.text();
329
- })
330
- .then((text) => {
331
- const div = document.createElement("div");
332
- div.innerHTML = text;
333
- text = div.innerText;
334
-
335
- this.setOption("content", mkPreSpan(text));
336
- })
337
- .catch((error) => {
338
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
339
- throw new Error(error);
340
- });
341
- } else {
342
- this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
343
- throw new Error("HTMLElement or string expected");
344
- }
345
-
346
- this.setOption("content", mkPreSpan(data));
347
- }
348
-
349
- /**
350
- *
351
- * @return {Viewer}
352
- */
353
- [assembleMethodSymbol]() {
354
- super[assembleMethodSymbol]();
355
-
356
- initControlReferences.call(this);
357
- initEventHandler.call(this);
358
- }
359
-
360
- /**
361
- *
362
- * @return {string}
363
- */
364
- static getTag() {
365
- return "monster-viewer";
366
- }
367
-
368
- /**
369
- * @return {CSSStyleSheet[]}
370
- */
371
- static getCSSStyleSheet() {
372
- return [ViewerStyleSheet];
373
- }
49
+ /**
50
+ * This method is called by the `instanceof` operator.
51
+ * @return {symbol}
52
+ */
53
+ static get [instanceSymbol]() {
54
+ return Symbol.for("@schukai/monster/components/content/viewer@@instance");
55
+ }
56
+
57
+ /**
58
+ * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
59
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
60
+ *
61
+ * The individual configuration values can be found in the table.
62
+ *
63
+ * @property {Object} templates Template definitions
64
+ * @property {string} templates.main Main template
65
+ * @property {string} content Content to be displayed in the viewer
66
+ * @property {Object} classes Css classes
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
74
+ */
75
+ get defaults() {
76
+ return Object.assign({}, super.defaults, {
77
+ templates: {
78
+ main: getTemplate(),
79
+ },
80
+ content: "<slot></slot>",
81
+ classes: {
82
+ viewer: "",
83
+ },
84
+ renderers: {
85
+ image: this.setImage,
86
+ html: this.setHTML,
87
+ pdf: this.setPDF,
88
+ plaintext: this.setPlainText,
89
+ markdown: this.setMarkdown,
90
+ }
91
+ });
92
+ }
93
+
94
+ /**
95
+ * Sets the content of an element based on the provided content and media type.
96
+ *
97
+ * @param {string} content - The content to be set.
98
+ * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
99
+ * @return {void} This method does not return a value.
100
+ * @throws {Error} Throws an error if shadowRoot is not defined.
101
+ */
102
+ setContent(content, mediaType = "text/plain") {
103
+ if (!this.shadowRoot) {
104
+ throw new Error("no shadow-root is defined");
105
+ }
106
+
107
+ const renderers = this.getOption("renderers");
108
+
109
+ const isDataURL = (value) => {
110
+ return (typeof value === "string" && value.startsWith("data:")) ||
111
+ (value instanceof URL && value.protocol === "data:");
112
+ };
113
+
114
+ if (isDataURL(content)) {
115
+ try {
116
+ const dataUrl = content.toString();
117
+ const [header] = dataUrl.split(",");
118
+ const [typeSegment] = header.split(";");
119
+ mediaType = typeSegment.replace("data:", "") || "text/plain";
120
+ } catch (error) {
121
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Invalid data URL format"}));
122
+ return;
123
+ }
124
+ }
125
+
126
+ if (mediaType === undefined || mediaType === null || mediaType === "") {
127
+ mediaType = "text/plain";
128
+ }
129
+
130
+ let mediaTypeObject;
131
+
132
+ try {
133
+ mediaTypeObject = new parseMediaType(mediaType);
134
+ if (!(mediaTypeObject instanceof MediaType)) {
135
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Invalid MediaType"}));
136
+ return;
137
+ }
138
+
139
+ } catch (error) {
140
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
141
+ return
142
+ }
143
+
144
+ const checkRenderer = (renderer, contentType) => {
145
+ if (renderers && typeof renderers[renderer] === "function") {
146
+ return true;
147
+ } else {
148
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: `Renderer for ${contentType} not found`}));
149
+ return false;
150
+ }
151
+ }
152
+
153
+ switch (mediaTypeObject.type) {
154
+ case "text":
155
+ switch (mediaTypeObject.subtype) {
156
+ case "html":
157
+ if (checkRenderer("html", mediaTypeObject.toString())) {
158
+ renderers.html.call(this, content);
159
+ }
160
+ break;
161
+ case "plain":
162
+ if (checkRenderer("plaintext", mediaTypeObject.toString())) {
163
+ renderers.plaintext.call(this, content);
164
+ }
165
+ break;
166
+ case "markdown":
167
+ if (checkRenderer("markdown", mediaTypeObject.toString())) {
168
+ this.setMarkdown(content);
169
+ }
170
+ break;
171
+ default:
172
+ if (checkRenderer("plaintext", mediaTypeObject.toString())) {
173
+ renderers.plaintext.call(this, content);
174
+ }
175
+ break;
176
+ }
177
+ break;
178
+
179
+ case "application":
180
+ switch (mediaTypeObject.subtype) {
181
+ case "pdf":
182
+ if (checkRenderer("pdf", mediaTypeObject.toString())) {
183
+ renderers.pdf.call(this, content);
184
+ }
185
+ break;
186
+ default:
187
+ this.setOption("content", content);
188
+ break;
189
+ }
190
+ break;
191
+
192
+ case "image":
193
+ if (checkRenderer("image", mediaTypeObject.toString())) {
194
+ renderers.image.call(this, content);
195
+ }
196
+ break;
197
+
198
+ default:
199
+ this.setOption("content", content);
200
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: `Unsupported media type: ${mediaTypeObject.toString()}`})); // Notify about unsupported media type
201
+ return;
202
+ }
203
+ }
204
+
205
+ /**
206
+ * Renders Markdown content using built-in or custom Markdown parser.
207
+ * Overrideable via `customRenderers['text/markdown']`.
208
+ *
209
+ * @param {string|Blob} data
210
+ */
211
+ setMarkdown(data) {
212
+
213
+ if (isBlob(data)) {
214
+ blobToText(data)
215
+ .then((markdownText) => {
216
+ try {
217
+ const html = MarkdownToHTML.convert(markdownText);
218
+ this.setHTML(html);
219
+ } catch (error) {
220
+ this.setPlainText(markdownText); // Fallback to plain text if conversion fails
221
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
222
+ }
223
+ })
224
+ .catch((error) => {
225
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
226
+ throw new Error(error);
227
+ });
228
+ return;
229
+ } else if (isURL(data)) {
230
+ getGlobal()
231
+ .fetch(data)
232
+ .then((response) => {
233
+ return response.text();
234
+ })
235
+ .then((markdownText) => {
236
+ try {
237
+ const html = MarkdownToHTML.convert(markdownText);
238
+ this.setHTML(html);
239
+ } catch (error) {
240
+ this.setPlainText(markdownText); // Fallback to plain text if conversion fails
241
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
242
+ }
243
+ })
244
+ .catch((error) => {
245
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
246
+ throw new Error(error);
247
+ });
248
+ return;
249
+ } else if (isString(data)) {
250
+ try {
251
+ const html = MarkdownToHTML.convert(data);
252
+ this.setHTML(html);
253
+ } catch (error) {
254
+ this.setPlainText(data); // Fallback to plain text if conversion fails
255
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
256
+ }
257
+ return;
258
+ }
259
+
260
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Blob or string expected"}));
261
+ throw new Error("Blob or string expected");
262
+
263
+ }
264
+
265
+ /**
266
+ * Configures and embeds a PDF document into the application with customizable display settings.
267
+ *
268
+ * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string.
269
+ * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
270
+ * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
271
+ * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
272
+ * @return {void} This method returns nothing but sets the embedded PDF as the content.
273
+ */
274
+ setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
275
+ const hashes =
276
+ "#toolbar=" +
277
+ (toolbar ? "1" : "0") +
278
+ "&navpanes=" +
279
+ (navigation ? "1" : "0") +
280
+ "&scrollbar=" +
281
+ (scrollbar ? "1" : "0");
282
+
283
+ let pdfURL = "";
284
+ if (isBlob(data)) {
285
+ pdfURL = URL.createObjectURL(data);
286
+ pdfURL += hashes;
287
+ } else if (isURL(data)) {
288
+ // check if the url already contains the hashes
289
+ if (data?.hash?.indexOf("#") === -1) {
290
+ pdfURL = data.toString() + hashes;
291
+ } else {
292
+ pdfURL = data.toString();
293
+ }
294
+ } else if (isString(data)) {
295
+ //URL.createObjectURL(data);
296
+ const blobObj = new Blob([atob(data)], {type: "application/pdf"});
297
+ const url = window.URL.createObjectURL(blobObj);
298
+
299
+ pdfURL = data;
300
+ } else {
301
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Blob or URL expected"}));
302
+ throw new Error("Blob or URL expected");
303
+ }
304
+
305
+ const html =
306
+ '<object part="pdf" data="' +
307
+ pdfURL +
308
+ '" width="100%" height="100%" type="application/pdf"></object>';
309
+
310
+ this.setOption("content", html);
311
+ }
312
+
313
+ /**
314
+ * Sets an image for the target by accepting a blob, URL, or string representation of the image.
315
+ *
316
+ * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
317
+ * @return {void} Does not return a value.
318
+ */
319
+ setImage(data) {
320
+ if (isBlob(data)) {
321
+ data = URL.createObjectURL(data);
322
+ } else if (isURL(data)) {
323
+ // nothing to do
324
+ } else if (isString(data)) {
325
+ // nothing to do
326
+ } else {
327
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Blob or URL expected"}));
328
+ throw new Error("Blob or URL expected");
329
+ }
330
+
331
+ const onloaderror = `onerror="this.dispatchEvent(new CustomEvent('viewer-error', {detail: 'Image loading error'}));"`;
332
+
333
+ this.setOption(
334
+ "content",
335
+ `<img style="max-width: 100%" src="${data}" alt="image" part="image" ${onloaderror}>`
336
+ );
337
+ }
338
+
339
+ /**
340
+ *
341
+ * if the data is a string, it is interpreted as HTML.
342
+ * if the data is a URL, the HTML is loaded from the url and set as content.
343
+ * if the data is an HTMLElement, the outerHTML is used as content.
344
+ *
345
+ * @param {HTMLElement|URL|string|Blob} data
346
+ */
347
+ setHTML(data) {
348
+ if (data instanceof Blob) {
349
+ blobToText(data)
350
+ .then((html) => {
351
+ this.setOption("content", html);
352
+ })
353
+ .catch((error) => {
354
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
355
+ throw new Error(error);
356
+ });
357
+
358
+ return;
359
+ } else if (data instanceof HTMLElement) {
360
+ data = data.outerHTML;
361
+ } else if (isString(data)) {
362
+ // nothing to do
363
+ } else if (isURL(data)) {
364
+ // fetch element
365
+ getGlobal()
366
+ .fetch(data)
367
+ .then((response) => {
368
+ return response.text();
369
+ })
370
+ .then((html) => {
371
+ this.setOption("content", html);
372
+ })
373
+ .catch((error) => {
374
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
375
+ throw new Error(error);
376
+ });
377
+ } else {
378
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "HTMLElement or string expected"}));
379
+ throw new Error("HTMLElement or string expected");
380
+ }
381
+
382
+ this.setOption("content", data);
383
+ }
384
+
385
+ /**
386
+ * Sets the plain text content by processing the input data, which can be of various types, including Blob,
387
+ * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
388
+ *
389
+ * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
390
+ * a plain string, or a string formatted as a valid URL. The method determines
391
+ * the data type and processes it accordingly.
392
+ * @return {void} - This method does not return any value. It processes the content and updates the relevant option
393
+ * property.
394
+ */
395
+ setPlainText(data) {
396
+ const mkPreSpan = (text) => {
397
+ const pre = document.createElement("pre");
398
+ pre.innerText = text;
399
+ pre.setAttribute("part", "text");
400
+ return pre.outerHTML;
401
+ };
402
+
403
+ if (data instanceof Blob) {
404
+ blobToText(data)
405
+ .then((text) => {
406
+ const div = document.createElement("div");
407
+ div.innerHTML = test;
408
+ text = div.innerText;
409
+
410
+ this.setOption("content", mkPreSpan(text));
411
+ })
412
+ .catch((error) => {
413
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
414
+ throw new Error(error);
415
+ });
416
+
417
+ return;
418
+ } else if (data instanceof HTMLElement) {
419
+ data = data.outerText;
420
+ } else if (isString(data)) {
421
+ const div = document.createElement("div");
422
+ div.innerHTML = data;
423
+ data = div.innerText;
424
+ } else if (isURL(data)) {
425
+ getGlobal()
426
+ .fetch(data)
427
+ .then((response) => {
428
+ return response.text();
429
+ })
430
+ .then((text) => {
431
+ const div = document.createElement("div");
432
+ div.innerHTML = text;
433
+ text = div.innerText;
434
+
435
+ this.setOption("content", mkPreSpan(text));
436
+ })
437
+ .catch((error) => {
438
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: error}));
439
+ throw new Error(error);
440
+ });
441
+ } else {
442
+ this.dispatchEvent(new CustomEvent("viewer-error", {detail: "HTMLElement or string expected"}));
443
+ throw new Error("HTMLElement or string expected");
444
+ }
445
+
446
+ this.setOption("content", mkPreSpan(data));
447
+ }
448
+
449
+ /**
450
+ *
451
+ * @return {Viewer}
452
+ */
453
+ [assembleMethodSymbol]() {
454
+ super[assembleMethodSymbol]();
455
+
456
+ initControlReferences.call(this);
457
+ initEventHandler.call(this);
458
+ }
459
+
460
+ /**
461
+ *
462
+ * @return {string}
463
+ */
464
+ static getTag() {
465
+ return "monster-viewer";
466
+ }
467
+
468
+ /**
469
+ * @return {CSSStyleSheet[]}
470
+ */
471
+ static getCSSStyleSheet() {
472
+ return [ViewerStyleSheet];
473
+ }
374
474
  }
375
475
 
376
476
  /**
@@ -379,12 +479,12 @@ class Viewer extends CustomElement {
379
479
  * @return {boolean}
380
480
  */
381
481
  function isURL(variable) {
382
- try {
383
- new URL(variable);
384
- return true;
385
- } catch (error) {
386
- return false;
387
- }
482
+ try {
483
+ new URL(variable);
484
+ return true;
485
+ } catch (error) {
486
+ return false;
487
+ }
388
488
  }
389
489
 
390
490
  /**
@@ -393,7 +493,7 @@ function isURL(variable) {
393
493
  * @return {boolean}
394
494
  */
395
495
  function isBlob(variable) {
396
- return variable instanceof Blob;
496
+ return variable instanceof Blob;
397
497
  }
398
498
 
399
499
  /**
@@ -402,12 +502,12 @@ function isBlob(variable) {
402
502
  * @return {Promise<unknown>}
403
503
  */
404
504
  function blobToText(blob) {
405
- return new Promise((resolve, reject) => {
406
- const reader = new FileReader();
407
- reader.onloadend = () => resolve(reader.result);
408
- reader.onerror = reject;
409
- reader.readAsText(blob);
410
- });
505
+ return new Promise((resolve, reject) => {
506
+ const reader = new FileReader();
507
+ reader.onloadend = () => resolve(reader.result);
508
+ reader.onerror = reject;
509
+ reader.readAsText(blob);
510
+ });
411
511
  }
412
512
 
413
513
  /**
@@ -416,18 +516,18 @@ function blobToText(blob) {
416
516
  * @throws {Error} no shadow-root is defined
417
517
  */
418
518
  function initControlReferences() {
419
- if (!this.shadowRoot) {
420
- throw new Error("no shadow-root is defined");
421
- }
519
+ if (!this.shadowRoot) {
520
+ throw new Error("no shadow-root is defined");
521
+ }
422
522
 
423
- this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
523
+ this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
424
524
  }
425
525
 
426
526
  /**
427
527
  * @private
428
528
  */
429
529
  function initEventHandler() {
430
- return this;
530
+ return this;
431
531
  }
432
532
 
433
533
  /**
@@ -435,8 +535,8 @@ function initEventHandler() {
435
535
  * @return {string}
436
536
  */
437
537
  function getTemplate() {
438
- // language=HTML
439
- return `
538
+ // language=HTML
539
+ return `
440
540
  <div id="viewer" data-monster-role="viewer" part="viewer"
441
541
  data-monster-replace="path:content"
442
542
  data-monster-attributes="class path:classes.viewer">
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
  }