@schukai/monster 4.20.0 → 4.21.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.
- package/CHANGELOG.md +20 -0
- package/package.json +1 -1
- package/source/components/content/viewer.mjs +88 -40
- package/source/components/datatable/columnbar.mjs +27 -16
- package/source/components/datatable/filter.mjs +4 -4
- package/source/components/form/select.mjs +2765 -2763
- package/source/components/layout/collapse.mjs +1 -4
- package/source/components/layout/style/collapse.pcss +0 -13
- package/source/components/layout/stylesheet/collapse.mjs +14 -7
- package/source/dom/customelement.mjs +3 -4
- package/source/text/markdown-parser.mjs +264 -0
- package/test/cases/text/markdown-parser.mjs +104 -0
@@ -27,7 +27,7 @@ import { Host } from "../host/host.mjs";
|
|
27
27
|
import { generateUniqueConfigKey } from "../host/util.mjs";
|
28
28
|
import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
|
29
29
|
import { instanceSymbol } from "../../constants.mjs";
|
30
|
-
import {Queue} from "../../types/queue.mjs";
|
30
|
+
import { Queue } from "../../types/queue.mjs";
|
31
31
|
|
32
32
|
export { Collapse, nameSymbol };
|
33
33
|
|
@@ -86,7 +86,6 @@ const eventQueueSymbol = Symbol("eventQueue");
|
|
86
86
|
*/
|
87
87
|
const isTransitioningSymbol = Symbol("isTransitioning");
|
88
88
|
|
89
|
-
|
90
89
|
/**
|
91
90
|
* @private
|
92
91
|
* @type {symbol}
|
@@ -307,7 +306,6 @@ function handleCloseCommand() {
|
|
307
306
|
runEventQueue.call(this);
|
308
307
|
}, 0);
|
309
308
|
}, 0);
|
310
|
-
|
311
309
|
}
|
312
310
|
|
313
311
|
/**
|
@@ -315,7 +313,6 @@ function handleCloseCommand() {
|
|
315
313
|
* @returns {handleOpenCommand}
|
316
314
|
*/
|
317
315
|
function handleOpenCommand() {
|
318
|
-
|
319
316
|
let node;
|
320
317
|
if (this[detailsElementSymbol].classList.contains("active")) {
|
321
318
|
return this;
|
@@ -14,19 +14,6 @@
|
|
14
14
|
box-sizing: border-box;
|
15
15
|
}
|
16
16
|
|
17
|
-
::slotted(*) {
|
18
|
-
display: block;
|
19
|
-
margin: 0;
|
20
|
-
padding: 0;
|
21
|
-
box-sizing: border-box;
|
22
|
-
overflow: hidden;
|
23
|
-
}
|
24
|
-
|
25
|
-
[data-monster-role=container] {
|
26
|
-
overflow: hidden;
|
27
|
-
position: relative;
|
28
|
-
}
|
29
|
-
|
30
17
|
|
31
18
|
[data-monster-role=control] {
|
32
19
|
@mixin text;
|
@@ -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 {CollapseStyleSheet}
|
16
|
+
export { CollapseStyleSheet };
|
17
17
|
|
18
18
|
/**
|
19
19
|
* @private
|
@@ -22,10 +22,17 @@ export {CollapseStyleSheet}
|
|
22
22
|
const CollapseStyleSheet = new CSSStyleSheet();
|
23
23
|
|
24
24
|
try {
|
25
|
-
|
25
|
+
CollapseStyleSheet.insertRule(
|
26
|
+
`
|
26
27
|
@layer collapse {
|
27
|
-
:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.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}button{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-button-primary,button{align-items:center;background-position:50%;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);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);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);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-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);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=container],[data-monster-role=deco],[data-monster-role=detail]{box-sizing:border-box}::slotted(*){box-sizing:border-box;display:block;margin:0;overflow:hidden;padding:0}[data-monster-role=container]{overflow:hidden;position:relative}[data-monster-role=control]{font-size:1rem;font-weight:400;line-height:1.6}.overflow-hidden[data-monster-role=control]{overflow:hidden}[data-monster-role=control] button{border-left:0;border-right:0;border-top:0}[data-monster-role=control] .button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}[data-monster-role=control] [data-monster-role=detail]{box-sizing:border-box;font-size:1rem;font-weight:400;height:0;line-height:1.6;transition:height .4s ease-in-out;width:100%}:is([data-monster-role=control] [data-monster-role=detail]) .padding{padding:1rem}:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{background:linear-gradient(to right,var(--monster-color-gradient-1) 0,var(--monster-color-gradient-2) 50%,var(--monster-color-gradient-3) 100%);border:0;height:2px;margin:0;padding:0}@media (prefers-color-scheme:dark){:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{background:var(--monster-color-primary-1)}}:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{transition:background .4s ease-in-out}[data-monster-role=control] .active[data-monster-role=detail]{height:var(--monster-height);transition:height .4s ease-in-out}
|
28
|
-
}`,
|
28
|
+
:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.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}button{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-button-primary,button{align-items:center;background-position:50%;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);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);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);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-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);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=container],[data-monster-role=deco],[data-monster-role=detail]{box-sizing:border-box}[data-monster-role=control]{font-size:1rem;font-weight:400;line-height:1.6}.overflow-hidden[data-monster-role=control]{overflow:hidden}[data-monster-role=control] button{border-left:0;border-right:0;border-top:0}[data-monster-role=control] .button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}[data-monster-role=control] [data-monster-role=detail]{box-sizing:border-box;font-size:1rem;font-weight:400;height:0;line-height:1.6;transition:height .4s ease-in-out;width:100%}:is([data-monster-role=control] [data-monster-role=detail]) .padding{padding:1rem}:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{background:linear-gradient(to right,var(--monster-color-gradient-1) 0,var(--monster-color-gradient-2) 50%,var(--monster-color-gradient-3) 100%);border:0;height:2px;margin:0;padding:0}@media (prefers-color-scheme:dark){:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{background:var(--monster-color-primary-1)}}:is([data-monster-role=control] [data-monster-role=detail]) .deco-line{transition:background .4s ease-in-out}[data-monster-role=control] .active[data-monster-role=detail]{height:var(--monster-height);transition:height .4s ease-in-out}
|
29
|
+
}`,
|
30
|
+
0,
|
31
|
+
);
|
29
32
|
} catch (e) {
|
30
|
-
|
33
|
+
addAttributeToken(
|
34
|
+
document.getRootNode().querySelector("html"),
|
35
|
+
ATTRIBUTE_ERRORMESSAGE,
|
36
|
+
e + "",
|
37
|
+
);
|
31
38
|
}
|
@@ -315,7 +315,7 @@ class CustomElement extends HTMLElement {
|
|
315
315
|
open: null,
|
316
316
|
close: null,
|
317
317
|
},
|
318
|
-
i18n
|
318
|
+
i18n: false,
|
319
319
|
},
|
320
320
|
|
321
321
|
eventProcessing: false,
|
@@ -1083,8 +1083,7 @@ function parseOptionsJSON(data) {
|
|
1083
1083
|
* @returns {*|string}
|
1084
1084
|
*/
|
1085
1085
|
function substituteI18n(html) {
|
1086
|
-
|
1087
|
-
if(!this.getOption("templateFormatter.i18n", false)) {
|
1086
|
+
if (!this.getOption("templateFormatter.i18n", false)) {
|
1088
1087
|
return html;
|
1089
1088
|
}
|
1090
1089
|
|
@@ -1094,7 +1093,7 @@ function substituteI18n(html) {
|
|
1094
1093
|
}
|
1095
1094
|
|
1096
1095
|
const formatter = new Formatter(labels, {});
|
1097
|
-
formatter.setMarker("i18n{",
|
1096
|
+
formatter.setMarker("i18n{", "}");
|
1098
1097
|
return formatter.format(html);
|
1099
1098
|
}
|
1100
1099
|
|
@@ -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, '&')
|
164
|
+
.replace(/</g, '<')
|
165
|
+
.replace(/>/g, '>');
|
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
|
+
}
|
@@ -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('<div>');
|
83
|
+
expect(html).to.include('</div>');
|
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
|
+
});
|