Skip to content
Snippets Groups Projects
Verified Commit 592e01ef authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: Add layout files for issue #318 and improve camera capture component 

- Added `318.html` and `318.mjs` for documenting layout problems related to the split panel.
- Updated `camera-capture.mjs` to enhance formatting and structure in imports and methods, ensuring better readability and maintainability.
- Refined error handling and logging throughout the component to prevent potential uncaught exceptions.
- Organized component dependencies more clearly to eliminate redundancies and improve performance.
- Improved inline comments to clarify the intent and functionality of existing code.

This refactoring not only resolves layout-related issues but also aids future developers in navigating and understanding the codebase.
parent 328cdd8a
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 3604 additions and 3504 deletions
development/issues/closed/318.html 0 → 100644
+ 57
− 0
View file @ 592e01ef
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>layout problems with split panel #318</title>
<script src="./318.mjs" type="module"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
/* Optional: alle Elemente im Box-Modell einheitlich behandeln */
*, *::before, *::after {
box-sizing: inherit;
}
monster-split-panel {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div style="display: none">
<h1>layout problems with split panel #318</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318">Issue #318</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
</div>
<monster-panel id="p1">
<monster-split-panel>
<monster-panel id="p2">
<div>Panel 1</div>
</monster-panel>
<monster-panel id="p3">
<div>Panel 5</div>
</monster-panel>
</monster-split-panel>
</monster-panel>
</body>
</html>
development/issues/closed/318.mjs 0 → 100644
+ 16
− 0
View file @ 592e01ef
/**
* @file development/issues/open/318.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318
* @description layout problems with split panel
* @issue 318
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/layout/split-panel.mjs";
import "../../../source/components/layout/panel.mjs";
source/components/content/camera-capture.mjs
+ 345
− 347
View file @ 592e01ef
...@@ -244,7 +244,6 @@ function initCameraControl() { ...@@ -244,7 +244,6 @@ function initCameraControl() {
}); });
} }
function startCameraWithDeviceId(deviceId) { function startCameraWithDeviceId(deviceId) {
const self = this; const self = this;
navigator.mediaDevices navigator.mediaDevices
...@@ -261,7 +260,6 @@ function startCameraWithDeviceId(deviceId) { ...@@ -261,7 +260,6 @@ function startCameraWithDeviceId(deviceId) {
}); });
} }
/** /**
* @private * @private
* @returns {{takePicture: string}} * @returns {{takePicture: string}}
...@@ -423,7 +421,7 @@ function initEventHandler() { ...@@ -423,7 +421,7 @@ function initEventHandler() {
fireCustomEvent(self, "monster-camera-capture-captured", { fireCustomEvent(self, "monster-camera-capture-captured", {
element: self, element: self,
}) });
}); });
return this; return this;
...@@ -460,7 +458,7 @@ function getTemplate() { ...@@ -460,7 +458,7 @@ function getTemplate() {
// language=HTML // language=HTML
return ` return `
<div data-monster-role="control" part="control"> <div data-monster-role="control" part="control">
<monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="#stream"></monster-full-screen> <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
<monster-state data-monster-role="emptyHistoryState"> <monster-state data-monster-role="emptyHistoryState">
<svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="350" width="350"
...@@ -494,7 +492,7 @@ function getTemplate() { ...@@ -494,7 +492,7 @@ function getTemplate() {
<video id="stream" autoplay style="display:none"></video> <video autoplay style="display:none"></video>
<canvas style="display:none;"></canvas> <canvas style="display:none;"></canvas>
<div> <div>
<monster-button part="takePictureButton" style="display:none" <monster-button part="takePictureButton" style="display:none"
......
source/components/content/style/camera-capture.pcss
+ 4
− 4
View file @ 592e01ef
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
[data-monster-role="control"] { [data-monster-role="control"] {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
margin: 0; margin: 0;
padding: 0; padding: 0;
flex-direction: column; flex-direction: column;
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
[ data-monster-role="full-screen"] { [ data-monster-role="full-screen"] {
position:absolute; position:absolute;
top:10px; top:2rem;
right:10px; right:1rem;
z-index: 99999; z-index: var(--monster-z-index-dropdown);
} }
.camera-not-supported-text { .camera-not-supported-text {
......
source/components/content/stylesheet/camera-capture.mjs
+ 14
− 7
View file @ 592e01ef
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs"; import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {CameraCaptureStyleSheet} export { CameraCaptureStyleSheet };
/** /**
* @private * @private
...@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet} ...@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
const CameraCaptureStyleSheet = new CSSStyleSheet(); const CameraCaptureStyleSheet = new CSSStyleSheet();
try { try {
CameraCaptureStyleSheet.insertRule(` CameraCaptureStyleSheet.insertRule(
`
@layer cameracapture { @layer cameracapture {
[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}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=control]{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);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:10px;top:10px;z-index:99999}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none} [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}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=control]{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);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:1rem;top:2rem;z-index:var(--monster-z-index-dropdown)}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none}
}`, 0); }`,
0,
);
} catch (e) { } catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + ""); addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/content/viewer.mjs
+ 307
− 309
View file @ 592e01ef
...@@ -248,13 +248,12 @@ class Viewer extends CustomElement { ...@@ -248,13 +248,12 @@ class Viewer extends CustomElement {
* property. * property.
*/ */
setPlainText(data) { setPlainText(data) {
const mkPreSpan = (text) => { const mkPreSpan = (text) => {
const pre = document.createElement("pre"); const pre = document.createElement("pre");
pre.innerText = text; pre.innerText = text;
pre.setAttribute("part", "text"); pre.setAttribute("part", "text");
return pre.outerHTML; return pre.outerHTML;
} };
if (data instanceof Blob) { if (data instanceof Blob) {
blobToText(data) blobToText(data)
...@@ -277,7 +276,6 @@ class Viewer extends CustomElement { ...@@ -277,7 +276,6 @@ class Viewer extends CustomElement {
div.innerHTML = data; div.innerHTML = data;
data = div.innerText; data = div.innerText;
} else if (isURL(data)) { } else if (isURL(data)) {
getGlobal() getGlobal()
.fetch(data) .fetch(data)
.then((response) => { .then((response) => {
......
source/components/form/login.mjs
+ 3
− 34
View file @ 592e01ef
...@@ -477,7 +477,6 @@ function getTranslations() { ...@@ -477,7 +477,6 @@ function getTranslations() {
"Dieses Formular ist nicht konfiguriert.", "Dieses Formular ist nicht konfiguriert.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Sie können keinen Code anfordern, da die<br>Zwei-Faktor-Authentifizierung bei Ihrem Konto aktiviert ist.<br>Bitte kontaktieren Sie den Administrator.", "Sie können keinen Code anfordern, da die<br>Zwei-Faktor-Authentifizierung bei Ihrem Konto aktiviert ist.<br>Bitte kontaktieren Sie den Administrator.",
}; };
case "es": case "es":
return { return {
...@@ -511,9 +510,6 @@ function getTranslations() { ...@@ -511,9 +510,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Este formulario no está configurado.", messageThisFormIsNotConfigured: "Este formulario no está configurado.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Esta función no funciona porque la autenticación de dos factores está activada en su cuenta. Por favor, póngase en contacto con el administrador.", "Esta función no funciona porque la autenticación de dos factores está activada en su cuenta. Por favor, póngase en contacto con el administrador.",
}; };
case "zh": case "zh":
return { return {
...@@ -543,9 +539,6 @@ function getTranslations() { ...@@ -543,9 +539,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "此表单尚未配置。", messageThisFormIsNotConfigured: "此表单尚未配置。",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。", "此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。",
}; };
case "hi": case "hi":
...@@ -576,8 +569,6 @@ function getTranslations() { ...@@ -576,8 +569,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "यह फर कनगर नह ह।", messageThisFormIsNotConfigured: "यह फर कनगर नह ह।",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।", "यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।",
}; };
case "bn": case "bn":
...@@ -608,8 +599,6 @@ function getTranslations() { ...@@ -608,8 +599,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।", messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।", "এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।",
}; };
case "pt": // Portuguese case "pt": // Portuguese
...@@ -641,8 +630,6 @@ function getTranslations() { ...@@ -641,8 +630,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Este formulário não está configurado.", messageThisFormIsNotConfigured: "Este formulário não está configurado.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Esta função não funciona porque a autenticação de dois fatores<br>está ativada em sua conta. Por favor, entre em contato com o administrador.", "Esta função não funciona porque a autenticação de dois fatores<br>está ativada em sua conta. Por favor, entre em contato com o administrador.",
}; };
case "ru": // Russian case "ru": // Russian
...@@ -674,8 +661,6 @@ function getTranslations() { ...@@ -674,8 +661,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Эта форма не настроена.", messageThisFormIsNotConfigured: "Эта форма не настроена.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.", "Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.",
}; };
case "ja": // Japanese case "ja": // Japanese
...@@ -708,7 +693,6 @@ function getTranslations() { ...@@ -708,7 +693,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "このフォームは設定されていません。", messageThisFormIsNotConfigured: "このフォームは設定されていません。",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。", "この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。",
}; };
case "pa": // Western Punjabi case "pa": // Western Punjabi
...@@ -739,8 +723,6 @@ function getTranslations() { ...@@ -739,8 +723,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।", messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।", "ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।",
}; };
case "mr": // Marathi case "mr": // Marathi
...@@ -771,8 +753,6 @@ function getTranslations() { ...@@ -771,8 +753,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.", messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.", "य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.",
}; };
case "fr": // French case "fr": // French
...@@ -806,8 +786,6 @@ function getTranslations() { ...@@ -806,8 +786,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Ce formulaire n'est pas configuré.", messageThisFormIsNotConfigured: "Ce formulaire n'est pas configuré.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Cette fonctionnalité ne fonctionne pas car l'authentification à deux facteurs est activée sur<br>votre compte. Veuillez contacter l'administrateur.", "Cette fonctionnalité ne fonctionne pas car l'authentification à deux facteurs est activée sur<br>votre compte. Veuillez contacter l'administrateur.",
}; };
case "it": // Italian case "it": // Italian
...@@ -840,7 +818,6 @@ function getTranslations() { ...@@ -840,7 +818,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Questo modulo non è configurato.", messageThisFormIsNotConfigured: "Questo modulo non è configurato.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Questa funzione non funziona perché l'autenticazione a due<br>fattori è attiva sul tuo account. Contatta l'amministratore.", "Questa funzione non funziona perché l'autenticazione a due<br>fattori è attiva sul tuo account. Contatta l'amministratore.",
}; };
case "nl": // Dutch case "nl": // Dutch
...@@ -872,7 +849,6 @@ function getTranslations() { ...@@ -872,7 +849,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Dit formulier is niet geconfigureerd.", messageThisFormIsNotConfigured: "Dit formulier is niet geconfigureerd.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Deze functie werkt niet omdat tweefactorauthenticatie is<br>ingeschakeld op uw account. Neem contact op met de beheerder.", "Deze functie werkt niet omdat tweefactorauthenticatie is<br>ingeschakeld op uw account. Neem contact op met de beheerder.",
}; };
case "sv": // Swedish case "sv": // Swedish
...@@ -904,7 +880,6 @@ function getTranslations() { ...@@ -904,7 +880,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Detta formulär är inte konfigurerat.", messageThisFormIsNotConfigured: "Detta formulär är inte konfigurerat.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Denna funktion fungerar inte eftersom tvåfaktorsautentisering är aktiverad på ditt konto. Kontakta administratören.", "Denna funktion fungerar inte eftersom tvåfaktorsautentisering är aktiverad på ditt konto. Kontakta administratören.",
}; };
case "pl": // Polish case "pl": // Polish
...@@ -937,7 +912,6 @@ function getTranslations() { ...@@ -937,7 +912,6 @@ function getTranslations() {
"Ten formularz nie jest skonfigurowany.", "Ten formularz nie jest skonfigurowany.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Ta funkcja nie działa, ponieważ włączona jest autoryzacja dwuetapowa na twoim koncie. Skontaktuj się z administratorem.", "Ta funkcja nie działa, ponieważ włączona jest autoryzacja dwuetapowa na twoim koncie. Skontaktuj się z administratorem.",
}; };
case "da": // Danish case "da": // Danish
...@@ -968,7 +942,6 @@ function getTranslations() { ...@@ -968,7 +942,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.", messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.", "Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.",
}; };
case "no": // Norwegian case "no": // Norwegian
...@@ -1001,7 +974,6 @@ function getTranslations() { ...@@ -1001,7 +974,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.", messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.", "Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.",
}; };
case "cs": // Czech case "cs": // Czech
...@@ -1032,7 +1004,6 @@ function getTranslations() { ...@@ -1032,7 +1004,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Tento formulář není nakonfigurován.", messageThisFormIsNotConfigured: "Tento formulář není nakonfigurován.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"Tato funkce nefunguje, protože je na vašem<br>účtu aktivováno dvoufaktorové ověřování. Kontaktujte správce.", "Tato funkce nefunguje, protože je na vašem<br>účtu aktivováno dvoufaktorové ověřování. Kontaktujte správce.",
}; };
default: default:
...@@ -1064,7 +1035,6 @@ function getTranslations() { ...@@ -1064,7 +1035,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "This form is not configured.", messageThisFormIsNotConfigured: "This form is not configured.",
messagePasswordResetDisabled: messagePasswordResetDisabled:
"This function does not work because two-factor<br>authentication is enabled on your account.<br>Please contact the administrator.", "This function does not work because two-factor<br>authentication is enabled on your account.<br>Please contact the administrator.",
}; };
} }
} }
...@@ -1155,7 +1125,6 @@ function initEventHandler() { ...@@ -1155,7 +1125,6 @@ function initEventHandler() {
}); });
this[loginButtonSymbol].setOption("actions.click", (event) => { this[loginButtonSymbol].setOption("actions.click", (event) => {
let username = this.shadowRoot.querySelector( let username = this.shadowRoot.querySelector(
"input[name='username']", "input[name='username']",
).value; ).value;
......
source/components/form/select.mjs
+ 2716
− 2671
View file @ 592e01ef
...@@ -370,8 +370,7 @@ class Select extends CustomControl { ...@@ -370,8 +370,7 @@ class Select extends CustomControl {
setSelection setSelection
.call(this, result.selection) .call(this, result.selection)
.then(() => { .then(() => {})
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -586,9 +585,10 @@ class Select extends CustomControl { ...@@ -586,9 +585,10 @@ class Select extends CustomControl {
if (lazyLoadFlag || remoteFilterFlag) { if (lazyLoadFlag || remoteFilterFlag) {
lookupSelection.call(self); lookupSelection.call(self);
} else { } else {
self.fetch().then(() => { self
.fetch()
}).catch((e) => { .then(() => {})
.catch((e) => {
addErrorAttribute(self, e); addErrorAttribute(self, e);
}); });
} }
...@@ -605,8 +605,7 @@ class Select extends CustomControl { ...@@ -605,8 +605,7 @@ class Select extends CustomControl {
lastValue = n; lastValue = n;
setSelection setSelection
.call(self, n) .call(self, n)
.then(() => { .then(() => {})
})
.catch((e) => { .catch((e) => {
addErrorAttribute(self, e); addErrorAttribute(self, e);
}); });
...@@ -848,7 +847,6 @@ function importOptionsIntern(data) { ...@@ -848,7 +847,6 @@ function importOptionsIntern(data) {
const visibility = "visible"; const visibility = "visible";
map.forEach((label, value) => { map.forEach((label, value) => {
for (const option of options) { for (const option of options) {
if (option.value === value) { if (option.value === value) {
option.label = label; option.label = label;
...@@ -875,8 +873,7 @@ function importOptionsIntern(data) { ...@@ -875,8 +873,7 @@ function importOptionsIntern(data) {
setTimeout(() => { setTimeout(() => {
setSelection setSelection
.call(this, this.getOption("selection")) .call(this, this.getOption("selection"))
.then(() => { .then(() => {})
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -904,16 +901,18 @@ function getTranslations() { ...@@ -904,16 +901,18 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> Auswahlen getroffen', '<span class="monster-badge-primary-pill">${count}</span> Auswahlen getroffen',
}, },
"no-options": '<span class="monster-badge-error-pill">Leider gibt es keine Auswahlmöglichkeiten in der Liste.</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Keine Auswahlmöglichkeiten verfügbar. Bitte ändern Sie den Filter.</span>', '<span class="monster-badge-error-pill">Leider gibt es keine Auswahlmöglichkeiten in der Liste.</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Keine Auswahlmöglichkeiten verfügbar. Bitte ändern Sie den Filter.</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Es sind keine weiteren Auswahlmöglichkeiten verfügbar.</span>', zero: '<span class="monster-badge-primary-pill">Es sind keine weiteren Auswahlmöglichkeiten verfügbar.</span>',
one: '<span class="monster-badge-primary-pill">Es ist 1 weitere Auswahlmöglichkeit verfügbar.</span>', one: '<span class="monster-badge-primary-pill">Es ist 1 weitere Auswahlmöglichkeit verfügbar.</span>',
other: '<span class="monster-badge-primary-pill">Es sind ${count} weitere Auswahlmöglichkeiten verfügbar.</span>', other:
} '<span class="monster-badge-primary-pill">Es sind ${count} weitere Auswahlmöglichkeiten verfügbar.</span>',
},
}; };
case "es": case "es":
return { return {
"cannot-be-loaded": "No se puede cargar", "cannot-be-loaded": "No se puede cargar",
...@@ -926,13 +925,16 @@ function getTranslations() { ...@@ -926,13 +925,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas', '<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas',
}, },
"no-options": '<span class="monster-badge-error-pill">Desafortunadamente, no hay opciones disponibles en la lista.</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">No hay opciones disponibles en la lista. Por favor, modifique el filtro.</span>', '<span class="monster-badge-error-pill">Desafortunadamente, no hay opciones disponibles en la lista.</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">No hay opciones disponibles en la lista. Por favor, modifique el filtro.</span>',
total: {
zero: '<span class="monster-badge-primary-pill">No hay entradas adicionales disponibles.</span>', zero: '<span class="monster-badge-primary-pill">No hay entradas adicionales disponibles.</span>',
one: '<span class="monster-badge-primary-pill">1 entrada adicional está disponible.</span>', one: '<span class="monster-badge-primary-pill">1 entrada adicional está disponible.</span>',
other: '<span class="monster-badge-primary-pill">${count} entradas adicionales están disponibles.</span>', other:
} '<span class="monster-badge-primary-pill">${count} entradas adicionales están disponibles.</span>',
},
}; };
case "zh": case "zh":
...@@ -947,13 +949,16 @@ function getTranslations() { ...@@ -947,13 +949,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> 个条目已选择', '<span class="monster-badge-primary-pill">${count}</span> 个条目已选择',
}, },
"no-options": '<span class="monster-badge-error-pill">很抱歉，列表中没有可用选项。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">列表中没有可用选项。请修改筛选条件。</span>', '<span class="monster-badge-error-pill">很抱歉，列表中没有可用选项。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">列表中没有可用选项。请修改筛选条件。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">没有更多条目可用。</span>', zero: '<span class="monster-badge-primary-pill">没有更多条目可用。</span>',
one: '<span class="monster-badge-primary-pill">还有 1 个可用条目。</span>', one: '<span class="monster-badge-primary-pill">还有 1 个可用条目。</span>',
other: '<span class="monster-badge-primary-pill">还有 ${count} 个可用条目。</span>', other:
} '<span class="monster-badge-primary-pill">还有 ${count} 个可用条目。</span>',
},
}; };
case "hi": case "hi":
...@@ -968,13 +973,16 @@ function getTranslations() { ...@@ -968,13 +973,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> प्रविष्टियाँ चयनित', '<span class="monster-badge-primary-pill">${count}</span> प्रविष्टियाँ चयनित',
}, },
"no-options": '<span class="monster-badge-error-pill">क्षमा करें, सूची में कोई विकल्प उपलब्ध नहीं है।</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">सूची में कोई विकल्प उपलब्ध नहीं है। कृपया फ़िल्टर बदलें।</span>', '<span class="monster-badge-error-pill">क्षमा करें, सूची में कोई विकल्प उपलब्ध नहीं है।</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">सूची में कोई विकल्प उपलब्ध नहीं है। कृपया फ़िल्टर बदलें।</span>',
total: {
zero: '<span class="monster-badge-primary-pill">कोई अतिरिक्त प्रविष्टि उपलब्ध नहीं है।</span>', zero: '<span class="monster-badge-primary-pill">कोई अतिरिक्त प्रविष्टि उपलब्ध नहीं है।</span>',
one: '<span class="monster-badge-primary-pill">1 अतिरिक्त प्रविष्टि उपलब्ध है।</span>', one: '<span class="monster-badge-primary-pill">1 अतिरिक्त प्रविष्टि उपलब्ध है।</span>',
other: '<span class="monster-badge-primary-pill">${count} अतिरिक्त प्रविष्टियाँ उपलब्ध हैं।</span>', other:
} '<span class="monster-badge-primary-pill">${count} अतिरिक्त प्रविष्टियाँ उपलब्ध हैं।</span>',
},
}; };
case "bn": case "bn":
...@@ -989,13 +997,16 @@ function getTranslations() { ...@@ -989,13 +997,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> এন্ট্রি নির্বাচিত', '<span class="monster-badge-primary-pill">${count}</span> এন্ট্রি নির্বাচিত',
}, },
"no-options": '<span class="monster-badge-error-pill">দুঃখিত, তালিকায় কোন বিকল্প পাওয়া যায়নি।</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">তালিকায় কোন বিকল্প পাওয়া যায়নি। দয়া করে ফিল্টার পরিবর্তন করুন।</span>', '<span class="monster-badge-error-pill">দুঃখিত, তালিকায় কোন বিকল্প পাওয়া যায়নি।</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">তালিকায় কোন বিকল্প পাওয়া যায়নি। দয়া করে ফিল্টার পরিবর্তন করুন।</span>',
total: {
zero: '<span class="monster-badge-primary-pill">আর কোনো এন্ট্রি উপলব্ধ নেই।</span>', zero: '<span class="monster-badge-primary-pill">আর কোনো এন্ট্রি উপলব্ধ নেই।</span>',
one: '<span class="monster-badge-primary-pill">1 অতিরিক্ত এন্ট্রি উপলব্ধ।</span>', one: '<span class="monster-badge-primary-pill">1 অতিরিক্ত এন্ট্রি উপলব্ধ।</span>',
other: '<span class="monster-badge-primary-pill">${count} অতিরিক্ত এন্ট্রি উপলব্ধ।</span>', other:
} '<span class="monster-badge-primary-pill">${count} অতিরিক্ত এন্ট্রি উপলব্ধ।</span>',
},
}; };
case "pt": case "pt":
...@@ -1010,13 +1021,16 @@ function getTranslations() { ...@@ -1010,13 +1021,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> entradas selecionadas', '<span class="monster-badge-primary-pill">${count}</span> entradas selecionadas',
}, },
"no-options": '<span class="monster-badge-error-pill">Infelizmente, não há opções disponíveis na lista.</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Nenhuma opção disponível na lista. Considere modificar o filtro.</span>', '<span class="monster-badge-error-pill">Infelizmente, não há opções disponíveis na lista.</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Nenhuma opção disponível na lista. Considere modificar o filtro.</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Não há entradas adicionais disponíveis.</span>', zero: '<span class="monster-badge-primary-pill">Não há entradas adicionais disponíveis.</span>',
one: '<span class="monster-badge-primary-pill">1 entrada adicional está disponível.</span>', one: '<span class="monster-badge-primary-pill">1 entrada adicional está disponível.</span>',
other: '<span class="monster-badge-primary-pill">${count} entradas adicionais estão disponíveis.</span>', other:
} '<span class="monster-badge-primary-pill">${count} entradas adicionais estão disponíveis.</span>',
},
}; };
case "ru": case "ru":
...@@ -1031,13 +1045,16 @@ function getTranslations() { ...@@ -1031,13 +1045,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> записей выбрано', '<span class="monster-badge-primary-pill">${count}</span> записей выбрано',
}, },
"no-options": '<span class="monster-badge-error-pill">К сожалению, в списке нет доступных вариантов.</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">В списке нет доступных вариантов. Пожалуйста, измените фильтр.</span>', '<span class="monster-badge-error-pill">К сожалению, в списке нет доступных вариантов.</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">В списке нет доступных вариантов. Пожалуйста, измените фильтр.</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Дополнительных записей нет.</span>', zero: '<span class="monster-badge-primary-pill">Дополнительных записей нет.</span>',
one: '<span class="monster-badge-primary-pill">Доступна 1 дополнительная запись.</span>', one: '<span class="monster-badge-primary-pill">Доступна 1 дополнительная запись.</span>',
other: '<span class="monster-badge-primary-pill">${count} дополнительных записей доступны.</span>', other:
} '<span class="monster-badge-primary-pill">${count} дополнительных записей доступны.</span>',
},
}; };
case "ja": case "ja":
...@@ -1052,13 +1069,16 @@ function getTranslations() { ...@@ -1052,13 +1069,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> 件選択されました', '<span class="monster-badge-primary-pill">${count}</span> 件選択されました',
}, },
"no-options": '<span class="monster-badge-error-pill">申し訳ありませんが、リストに利用可能なオプションがありません。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">リストに利用可能なオプションがありません。フィルターを変更してください。</span>', '<span class="monster-badge-error-pill">申し訳ありませんが、リストに利用可能なオプションがありません。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">リストに利用可能なオプションがありません。フィルターを変更してください。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">追加の項目はありません。</span>', zero: '<span class="monster-badge-primary-pill">追加の項目はありません。</span>',
one: '<span class="monster-badge-primary-pill">1 件の追加項目があります。</span>', one: '<span class="monster-badge-primary-pill">1 件の追加項目があります。</span>',
other: '<span class="monster-badge-primary-pill">${count} 件の追加項目があります。</span>', other:
} '<span class="monster-badge-primary-pill">${count} 件の追加項目があります。</span>',
},
}; };
case "pa": case "pa":
...@@ -1073,13 +1093,16 @@ function getTranslations() { ...@@ -1073,13 +1093,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> ਐਂਟਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ', '<span class="monster-badge-primary-pill">${count}</span> ਐਂਟਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ',
}, },
"no-options": '<span class="monster-badge-error-pill">ਮਾਫ ਕਰਨਾ, ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ। ਕਿਰਪਾ ਕਰਕੇ ਫਿਲਟਰ ਬਦਲੋ।</span>', '<span class="monster-badge-error-pill">ਮਾਫ ਕਰਨਾ, ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ। ਕਿਰਪਾ ਕਰਕੇ ਫਿਲਟਰ ਬਦਲੋ।</span>',
total: {
zero: '<span class="monster-badge-primary-pill">ਕੋਈ ਹੋਰ ਐਂਟਰੀ ਉਪਲਬਧ ਨਹੀਂ ਹੈ.</span>', zero: '<span class="monster-badge-primary-pill">ਕੋਈ ਹੋਰ ਐਂਟਰੀ ਉਪਲਬਧ ਨਹੀਂ ਹੈ.</span>',
one: '<span class="monster-badge-primary-pill">1 ਵਾਧੂ ਐਂਟਰੀ ਉਪਲਬਧ ਹੈ.</span>', one: '<span class="monster-badge-primary-pill">1 ਵਾਧੂ ਐਂਟਰੀ ਉਪਲਬਧ ਹੈ.</span>',
other: '<span class="monster-badge-primary-pill">${count} ਵਾਧੂ ਐਂਟਰੀਆਂ ਉਪਲਬਧ ਹਨ.</span>', other:
} '<span class="monster-badge-primary-pill">${count} ਵਾਧੂ ਐਂਟਰੀਆਂ ਉਪਲਬਧ ਹਨ.</span>',
},
}; };
case "mr": case "mr":
...@@ -1094,13 +1117,16 @@ function getTranslations() { ...@@ -1094,13 +1117,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> नोंदी निवडल्या', '<span class="monster-badge-primary-pill">${count}</span> नोंदी निवडल्या',
}, },
"no-options": '<span class="monster-badge-error-pill">क्षमस्व, यादीमध्ये कोणतीही पर्याय उपलब्ध नाहीत。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">यादीमध्ये कोणतेही पर्याय उपलब्ध नाहीत। कृपया फिल्टर बदला。</span>', '<span class="monster-badge-error-pill">क्षमस्व, यादीमध्ये कोणतीही पर्याय उपलब्ध नाहीत。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">यादीमध्ये कोणतेही पर्याय उपलब्ध नाहीत। कृपया फिल्टर बदला。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">आणखी कोणतीही नोंद उपलब्ध नाही。</span>', zero: '<span class="monster-badge-primary-pill">आणखी कोणतीही नोंद उपलब्ध नाही。</span>',
one: '<span class="monster-badge-primary-pill">1 अतिरिक्त नोंद उपलब्ध आहे。</span>', one: '<span class="monster-badge-primary-pill">1 अतिरिक्त नोंद उपलब्ध आहे。</span>',
other: '<span class="monster-badge-primary-pill">${count} अतिरिक्त नोंदी उपलब्ध आहेत。</span>', other:
} '<span class="monster-badge-primary-pill">${count} अतिरिक्त नोंदी उपलब्ध आहेत。</span>',
},
}; };
case "it": case "it":
...@@ -1115,13 +1141,16 @@ function getTranslations() { ...@@ -1115,13 +1141,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> voci selezionate', '<span class="monster-badge-primary-pill">${count}</span> voci selezionate',
}, },
"no-options": '<span class="monster-badge-error-pill">Purtroppo, non ci sono opzioni disponibili nella lista。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Nessuna opzione disponibile nella lista。Si prega di modificare il filtro。</span>', '<span class="monster-badge-error-pill">Purtroppo, non ci sono opzioni disponibili nella lista。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Nessuna opzione disponibile nella lista。Si prega di modificare il filtro。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Non ci sono altre voci disponibili。</span>', zero: '<span class="monster-badge-primary-pill">Non ci sono altre voci disponibili。</span>',
one: '<span class="monster-badge-primary-pill">C\'è 1 voce aggiuntiva disponibile。</span>', one: '<span class="monster-badge-primary-pill">C\'è 1 voce aggiuntiva disponibile。</span>',
other: '<span class="monster-badge-primary-pill">Ci sono ${count} voci aggiuntive disponibili。</span>', other:
} '<span class="monster-badge-primary-pill">Ci sono ${count} voci aggiuntive disponibili。</span>',
},
}; };
case "nl": case "nl":
...@@ -1136,13 +1165,16 @@ function getTranslations() { ...@@ -1136,13 +1165,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> items geselecteerd', '<span class="monster-badge-primary-pill">${count}</span> items geselecteerd',
}, },
"no-options": '<span class="monster-badge-error-pill">Helaas zijn er geen opties beschikbaar in de lijst。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Geen opties beschikbaar in de lijst。Overweeg het filter aan te passen。</span>', '<span class="monster-badge-error-pill">Helaas zijn er geen opties beschikbaar in de lijst。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Geen opties beschikbaar in de lijst。Overweeg het filter aan te passen。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Er zijn geen extra items beschikbaar。</span>', zero: '<span class="monster-badge-primary-pill">Er zijn geen extra items beschikbaar。</span>',
one: '<span class="monster-badge-primary-pill">1 extra item is beschikbaar。</span>', one: '<span class="monster-badge-primary-pill">1 extra item is beschikbaar。</span>',
other: '<span class="monster-badge-primary-pill">${count} extra items zijn beschikbaar。</span>', other:
} '<span class="monster-badge-primary-pill">${count} extra items zijn beschikbaar。</span>',
},
}; };
case "sv": case "sv":
...@@ -1157,13 +1189,16 @@ function getTranslations() { ...@@ -1157,13 +1189,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> poster valdes', '<span class="monster-badge-primary-pill">${count}</span> poster valdes',
}, },
"no-options": '<span class="monster-badge-error-pill">Tyvärr finns det inga alternativ tillgängliga i listan。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Inga alternativ finns tillgängliga i listan。Överväg att modifiera filtret。</span>', '<span class="monster-badge-error-pill">Tyvärr finns det inga alternativ tillgängliga i listan。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Inga alternativ finns tillgängliga i listan。Överväg att modifiera filtret。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Det finns inga fler poster tillgängliga。</span>', zero: '<span class="monster-badge-primary-pill">Det finns inga fler poster tillgängliga。</span>',
one: '<span class="monster-badge-primary-pill">Det finns 1 ytterligare post tillgänglig。</span>', one: '<span class="monster-badge-primary-pill">Det finns 1 ytterligare post tillgänglig。</span>',
other: '<span class="monster-badge-primary-pill">Det finns ${count} ytterligare poster tillgängliga。</span>', other:
} '<span class="monster-badge-primary-pill">Det finns ${count} ytterligare poster tillgängliga。</span>',
},
}; };
case "pl": case "pl":
...@@ -1178,13 +1213,16 @@ function getTranslations() { ...@@ -1178,13 +1213,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane', '<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane',
}, },
"no-options": '<span class="monster-badge-error-pill">Niestety, nie ma dostępnych opcji na liście。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Brak dostępnych opcji na liście。Rozważ zmianę filtra。</span>', '<span class="monster-badge-error-pill">Niestety, nie ma dostępnych opcji na liście。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Brak dostępnych opcji na liście。Rozważ zmianę filtra。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Nie ma więcej dostępnych wpisów。</span>', zero: '<span class="monster-badge-primary-pill">Nie ma więcej dostępnych wpisów。</span>',
one: '<span class="monster-badge-primary-pill">Jest 1 dodatkowy wpis dostępny。</span>', one: '<span class="monster-badge-primary-pill">Jest 1 dodatkowy wpis dostępny。</span>',
other: '<span class="monster-badge-primary-pill">Jest ${count} dodatkowych wpisów dostępnych。</span>', other:
} '<span class="monster-badge-primary-pill">Jest ${count} dodatkowych wpisów dostępnych。</span>',
},
}; };
case "da": case "da":
...@@ -1199,13 +1237,16 @@ function getTranslations() { ...@@ -1199,13 +1237,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> indlæg blev valgt', '<span class="monster-badge-primary-pill">${count}</span> indlæg blev valgt',
}, },
"no-options": '<span class="monster-badge-error-pill">Desværre er der ingen muligheder tilgængelige på listen。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Ingen muligheder tilgængelige på listen。Overvej at ændre filteret。</span>', '<span class="monster-badge-error-pill">Desværre er der ingen muligheder tilgængelige på listen。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Ingen muligheder tilgængelige på listen。Overvej at ændre filteret。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Der er ingen yderligere poster tilgængelige。</span>', zero: '<span class="monster-badge-primary-pill">Der er ingen yderligere poster tilgængelige。</span>',
one: '<span class="monster-badge-primary-pill">Der er 1 yderligere post tilgængelig。</span>', one: '<span class="monster-badge-primary-pill">Der er 1 yderligere post tilgængelig。</span>',
other: '<span class="monster-badge-primary-pill">Der er ${count} yderligere poster tilgængelige。</span>', other:
} '<span class="monster-badge-primary-pill">Der er ${count} yderligere poster tilgængelige。</span>',
},
}; };
case "fi": case "fi":
...@@ -1220,13 +1261,16 @@ function getTranslations() { ...@@ -1220,13 +1261,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> kohdetta valittu', '<span class="monster-badge-primary-pill">${count}</span> kohdetta valittu',
}, },
"no-options": '<span class="monster-badge-error-pill">Valitettavasti listalla ei ole vaihtoehtoja saatavilla。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Listalla ei ole vaihtoehtoja saatavilla。Harkitse suodattimen muuttamista。</span>', '<span class="monster-badge-error-pill">Valitettavasti listalla ei ole vaihtoehtoja saatavilla。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Listalla ei ole vaihtoehtoja saatavilla。Harkitse suodattimen muuttamista。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Lisäkohteita ei ole saatavilla。</span>', zero: '<span class="monster-badge-primary-pill">Lisäkohteita ei ole saatavilla。</span>',
one: '<span class="monster-badge-primary-pill">1 lisäkohde on saatavilla。</span>', one: '<span class="monster-badge-primary-pill">1 lisäkohde on saatavilla。</span>',
other: '<span class="monster-badge-primary-pill">${count} lisäkohdetta on saatavilla。</span>', other:
} '<span class="monster-badge-primary-pill">${count} lisäkohdetta on saatavilla。</span>',
},
}; };
case "no": case "no":
...@@ -1241,13 +1285,16 @@ function getTranslations() { ...@@ -1241,13 +1285,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt', '<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt',
}, },
"no-options": '<span class="monster-badge-error-pill">Dessverre er det ingen alternativer tilgjengelig i listen。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">Ingen alternativer tilgjengelig på listen。Vurder å endre filteret。</span>', '<span class="monster-badge-error-pill">Dessverre er det ingen alternativer tilgjengelig i listen。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">Ingen alternativer tilgjengelig på listen。Vurder å endre filteret。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Det er ingen flere poster tilgjengelige。</span>', zero: '<span class="monster-badge-primary-pill">Det er ingen flere poster tilgjengelige。</span>',
one: '<span class="monster-badge-primary-pill">Det er 1 ytterligere post tilgjengelig。</span>', one: '<span class="monster-badge-primary-pill">Det er 1 ytterligere post tilgjengelig。</span>',
other: '<span class="monster-badge-primary-pill">Det er ${count} ytterligere poster tilgjengelig。</span>', other:
} '<span class="monster-badge-primary-pill">Det er ${count} ytterligere poster tilgjengelig。</span>',
},
}; };
case "cs": case "cs":
...@@ -1262,13 +1309,16 @@ function getTranslations() { ...@@ -1262,13 +1309,16 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> položky vybrány', '<span class="monster-badge-primary-pill">${count}</span> položky vybrány',
}, },
"no-options": '<span class="monster-badge-error-pill">Bohužel nejsou k dispozici žádné možnosti v seznamu。</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">V seznamu nejsou k dispozici žádné možnosti。Zvažte změnu filtru。</span>', '<span class="monster-badge-error-pill">Bohužel nejsou k dispozici žádné možnosti v seznamu。</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">V seznamu nejsou k dispozici žádné možnosti。Zvažte změnu filtru。</span>',
total: {
zero: '<span class="monster-badge-primary-pill">Žádné další položky nejsou k dispozici。</span>', zero: '<span class="monster-badge-primary-pill">Žádné další položky nejsou k dispozici。</span>',
one: '<span class="monster-badge-primary-pill">Je k dispozici 1 další položka。</span>', one: '<span class="monster-badge-primary-pill">Je k dispozici 1 další položka。</span>',
other: '<span class="monster-badge-primary-pill">K dispozici je ${count} dalších položek。</span>', other:
} '<span class="monster-badge-primary-pill">K dispozici je ${count} dalších položek。</span>',
},
}; };
default: default:
...@@ -1284,18 +1334,20 @@ function getTranslations() { ...@@ -1284,18 +1334,20 @@ function getTranslations() {
other: other:
'<span class="monster-badge-primary-pill">${count}</span> entries were selected', '<span class="monster-badge-primary-pill">${count}</span> entries were selected',
}, },
"no-options": '<span class="monster-badge-error-pill">Unfortunately, there are no options available in the list.</span>', "no-options":
"no-options-found": '<span class="monster-badge-error-pill">No options are available in the list. Please consider modifying the filter.</span>', '<span class="monster-badge-error-pill">Unfortunately, there are no options available in the list.</span>',
"total": { "no-options-found":
'<span class="monster-badge-error-pill">No options are available in the list. Please consider modifying the filter.</span>',
total: {
zero: '<span class="monster-badge-primary-pill">No additional entries are available.</span>', zero: '<span class="monster-badge-primary-pill">No additional entries are available.</span>',
one: '<span class="monster-badge-primary-pill">1 additional entry is available.</span>', one: '<span class="monster-badge-primary-pill">1 additional entry is available.</span>',
other: '<span class="monster-badge-primary-pill">${count} additional entries are available.</span>', other:
} '<span class="monster-badge-primary-pill">${count} additional entries are available.</span>',
},
}; };
} }
} }
/** /**
* @private * @private
*/ */
...@@ -1344,8 +1396,6 @@ function lookupSelection() { ...@@ -1344,8 +1396,6 @@ function lookupSelection() {
}); });
} }
} }
}, 100); }, 100);
} }
...@@ -1434,7 +1484,6 @@ function fetchIt(url, controlOptions) { ...@@ -1434,7 +1484,6 @@ function fetchIt(url, controlOptions) {
}); });
} }
/** /**
* This attribute can be used to pass a URL to this select. * This attribute can be used to pass a URL to this select.
* *
...@@ -1707,8 +1756,7 @@ function getDefaultTranslation() { ...@@ -1707,8 +1756,7 @@ function getDefaultTranslation() {
try { try {
const doc = getDocumentTranslations(); const doc = getDocumentTranslations();
translation.locale = doc.locale; translation.locale = doc.locale;
} catch (e) { } catch (e) {}
}
return translation; return translation;
} }
...@@ -1717,7 +1765,6 @@ function getDefaultTranslation() { ...@@ -1717,7 +1765,6 @@ function getDefaultTranslation() {
* @private * @private
*/ */
function setTotalText() { function setTotalText() {
if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) { if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
return; return;
} }
...@@ -1735,11 +1782,7 @@ function setTotalText() { ...@@ -1735,11 +1782,7 @@ function setTotalText() {
} }
const translations = getDefaultTranslation.call(this); const translations = getDefaultTranslation.call(this);
const text = translations.getPluralRuleText( const text = translations.getPluralRuleText("total", total, "");
"total",
total,
"",
);
const diff = total - count; const diff = total - count;
if (diff <= 0) { if (diff <= 0) {
...@@ -1834,7 +1877,6 @@ function calcAndSetOptionsDimension() { ...@@ -1834,7 +1877,6 @@ function calcAndSetOptionsDimension() {
let scrollFlag = false; let scrollFlag = false;
for (const [, option] of Object.entries(options)) { for (const [, option] of Object.entries(options)) {
const computedStyle = getGlobal().getComputedStyle(option); const computedStyle = getGlobal().getComputedStyle(option);
if (computedStyle.display === "none") continue; if (computedStyle.display === "none") continue;
...@@ -1871,7 +1913,6 @@ function calcAndSetOptionsDimension() { ...@@ -1871,7 +1913,6 @@ function calcAndSetOptionsDimension() {
let classes = new TokenList(this.getOption("classes.noOptions")); let classes = new TokenList(this.getOption("classes.noOptions"));
classes.remove("d-none"); classes.remove("d-none");
this.setOption("classes.noOptions", classes.toString()); this.setOption("classes.noOptions", classes.toString());
} else { } else {
let classes = new TokenList(this.getOption("classes.noOptions")); let classes = new TokenList(this.getOption("classes.noOptions"));
classes.add("d-none"); classes.add("d-none");
...@@ -2105,7 +2146,6 @@ function handleFilterKeyEvents() { ...@@ -2105,7 +2146,6 @@ function handleFilterKeyEvents() {
* @private * @private
*/ */
function filterFromRemote() { function filterFromRemote() {
if ( if (
!(this[inlineFilterElementSymbol] instanceof HTMLElement) && !(this[inlineFilterElementSymbol] instanceof HTMLElement) &&
!(this[popperFilterElementSymbol] instanceof HTMLElement) !(this[popperFilterElementSymbol] instanceof HTMLElement)
...@@ -2391,8 +2431,7 @@ function gatherState() { ...@@ -2391,8 +2431,7 @@ function gatherState() {
setSelection setSelection
.call(this, selection) .call(this, selection)
.then(() => { .then(() => {})
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -2421,8 +2460,7 @@ function clearSelection() { ...@@ -2421,8 +2460,7 @@ function clearSelection() {
setSelection setSelection
.call(this, []) .call(this, [])
.then(() => { .then(() => {})
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -2472,7 +2510,6 @@ function areOptionsAvailableAndInitInternal() { ...@@ -2472,7 +2510,6 @@ function areOptionsAvailableAndInitInternal() {
) { ) {
setStatusOrRemoveBadges.call(this, "empty"); setStatusOrRemoveBadges.call(this, "empty");
let msg = this.getOption("labels.no-options-available"); let msg = this.getOption("labels.no-options-available");
if ( if (
...@@ -2489,7 +2526,10 @@ function areOptionsAvailableAndInitInternal() { ...@@ -2489,7 +2526,10 @@ function areOptionsAvailableAndInitInternal() {
this.setOption("filter.defaultValue", undefined); this.setOption("filter.defaultValue", undefined);
} }
if (containsAttributeToken(this[controlElementSymbol], "class", "open") === true) { if (
containsAttributeToken(this[controlElementSymbol], "class", "open") ===
true
) {
msg = ""; msg = "";
} }
...@@ -2947,7 +2987,7 @@ function initDefaultOptionsFromUrl() { ...@@ -2947,7 +2987,7 @@ function initDefaultOptionsFromUrl() {
this[cleanupOptionsListSymbol] = false; this[cleanupOptionsListSymbol] = false;
importOptionsIntern.call(this, data); importOptionsIntern.call(this, data);
setStatusOrRemoveBadges.call(this, "open"); setStatusOrRemoveBadges.call(this, "open");
initTotal.call(this, data) initTotal.call(this, data);
}) })
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
...@@ -2959,7 +2999,6 @@ function initDefaultOptionsFromUrl() { ...@@ -2959,7 +2999,6 @@ function initDefaultOptionsFromUrl() {
* @private * @private
*/ */
function initTotal() { function initTotal() {
if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) { if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
return; return;
} }
...@@ -2971,14 +3010,21 @@ function initTotal() { ...@@ -2971,14 +3010,21 @@ function initTotal() {
return; return;
} }
getGlobal().fetch(url).then((response) => { getGlobal()
if (!response.ok) { // Improved status checking using `response.ok` .fetch(url)
addErrorAttribute(this, `HTTP error status: ${response.status} - ${response.statusText}`); .then((response) => {
if (!response.ok) {
// Improved status checking using `response.ok`
addErrorAttribute(
this,
`HTTP error status: ${response.status} - ${response.statusText}`,
);
return; return;
} }
return response.text(); return response.text();
}).then((text) => { })
.then((text) => {
try { try {
const data = JSON.parse(String(text)); const data = JSON.parse(String(text));
const pathfinder = new Pathfinder(data); const pathfinder = new Pathfinder(data);
...@@ -2997,7 +3043,6 @@ function initTotal() { ...@@ -2997,7 +3043,6 @@ function initTotal() {
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
} }
/** /**
......
source/components/form/stylesheet/select.mjs
+ 13
− 6
View file @ 592e01ef
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs"; import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {SelectStyleSheet} export { SelectStyleSheet };
/** /**
* @private * @private
...@@ -22,10 +22,17 @@ export {SelectStyleSheet} ...@@ -22,10 +22,17 @@ export {SelectStyleSheet}
const SelectStyleSheet = new CSSStyleSheet(); const SelectStyleSheet = new CSSStyleSheet();
try { try {
SelectStyleSheet.insertRule(` SelectStyleSheet.insertRule(
`
@layer select { @layer select {
.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} .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}
}`, 0); }`,
0,
);
} catch (e) { } catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + ""); addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/layout/full-screen.mjs
+ 115
− 119
View file @ 592e01ef
...@@ -33,7 +33,9 @@ export {FullScreen}; ...@@ -33,7 +33,9 @@ export {FullScreen};
* @private * @private
* @type {symbol} * @type {symbol}
*/ */
export const fullScreenControlElementSymbol = Symbol("fullScreenControlElement"); export const fullScreenControlElementSymbol = Symbol(
"fullScreenControlElement",
);
/** /**
* @private * @private
* @type {symbol} * @type {symbol}
...@@ -45,7 +47,6 @@ export const fullScreenElementSymbol = Symbol("fullScreenElement"); ...@@ -45,7 +47,6 @@ export const fullScreenElementSymbol = Symbol("fullScreenElement");
*/ */
export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement"); export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement");
/** /**
* A FullScreen * A FullScreen
* *
...@@ -63,7 +64,9 @@ class FullScreen extends CustomElement { ...@@ -63,7 +64,9 @@ class FullScreen extends CustomElement {
* @returns {symbol} * @returns {symbol}
*/ */
static get [instanceSymbol]() { static get [instanceSymbol]() {
return Symbol.for("@schukai/monster/components/layout/full-screen@@instance"); return Symbol.for(
"@schukai/monster/components/layout/full-screen@@instance",
);
} }
/** /**
...@@ -92,7 +95,7 @@ class FullScreen extends CustomElement { ...@@ -92,7 +95,7 @@ class FullScreen extends CustomElement {
templates: { templates: {
main: getTemplate(), main: getTemplate(),
}, },
selector: ":first-child" selector: ":first-child",
}); });
} }
...@@ -109,8 +112,6 @@ class FullScreen extends CustomElement { ...@@ -109,8 +112,6 @@ class FullScreen extends CustomElement {
static getCSSStyleSheet() { static getCSSStyleSheet() {
return [FullScreenStyleSheet]; return [FullScreenStyleSheet];
} }
} }
/** /**
...@@ -121,7 +122,7 @@ function initEventHandler() { ...@@ -121,7 +122,7 @@ function initEventHandler() {
const self = this; const self = this;
const element = this[fullScreenControlElementSymbol]; const element = this[fullScreenControlElementSymbol];
document.addEventListener('fullscreenchange', (event) => { document.addEventListener("fullscreenchange", (event) => {
const control = findTargetControl.call(self); const control = findTargetControl.call(self);
if (document.fullscreenElement === control) { if (document.fullscreenElement === control) {
...@@ -131,14 +132,11 @@ function initEventHandler() { ...@@ -131,14 +132,11 @@ function initEventHandler() {
self[fullScreenExitElementSymbol].classList.add("hidden"); self[fullScreenExitElementSymbol].classList.add("hidden");
self[fullScreenElementSymbol].classList.remove("hidden"); self[fullScreenElementSymbol].classList.remove("hidden");
} }
}); });
const type = "click"; const type = "click";
element.addEventListener(type, function (event) { element.addEventListener(type, function (event) {
const control = findTargetControl.call(self); const control = findTargetControl.call(self);
if (!control) { if (!control) {
...@@ -151,7 +149,6 @@ function initEventHandler() { ...@@ -151,7 +149,6 @@ function initEventHandler() {
}); });
toggleFullscreen.call(self, control); toggleFullscreen.call(self, control);
}); });
return this; return this;
...@@ -192,7 +189,7 @@ function findTargetControl(self) { ...@@ -192,7 +189,7 @@ function findTargetControl(self) {
*/ */
function toggleFullscreen(element) { function toggleFullscreen(element) {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
element.requestFullscreen().catch(err => { element.requestFullscreen().catch((err) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, err.message); addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, err.message);
}); });
} else { } else {
...@@ -226,5 +223,4 @@ function getTemplate() { ...@@ -226,5 +223,4 @@ function getTemplate() {
</div>`; </div>`;
} }
registerCustomElement(FullScreen); registerCustomElement(FullScreen);
source/components/layout/panel.mjs
+ 1
− 1
View file @ 592e01ef
...@@ -44,7 +44,7 @@ const resizeObserverSymbol = Symbol("resizeObserver"); ...@@ -44,7 +44,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
const timerCallbackSymbol = Symbol("timerCallback"); const timerCallbackSymbol = Symbol("timerCallback");
/** /**
* A Slider * A Panel is a container that can hold other elements and is used to display content in a structured way.
* *
* @fragments /fragments/components/layout/panel/ * @fragments /fragments/components/layout/panel/
* *
......
source/components/layout/stylesheet/full-screen.mjs
+ 13
− 6
View file @ 592e01ef
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs"; import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {FullScreenStyleSheet} export { FullScreenStyleSheet };
/** /**
* @private * @private
...@@ -22,10 +22,17 @@ export {FullScreenStyleSheet} ...@@ -22,10 +22,17 @@ export {FullScreenStyleSheet}
const FullScreenStyleSheet = new CSSStyleSheet(); const FullScreenStyleSheet = new CSSStyleSheet();
try { try {
FullScreenStyleSheet.insertRule(` FullScreenStyleSheet.insertRule(
`
@layer fullscreen { @layer fullscreen {
[data-monster-role=control]{align-items:center;background-color:var(--monster-bg-color-primary-1);border:1px solid var(--monster-bg-color-primary-4);border-radius:2rem;color:var(--monster-color-primary-1);cursor:pointer;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0;overflow:hidden;padding:.5rem;position:relative;width:2rem}[data-monster-role=fullscreen-exit],[data-monster-role=fullscreen]{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.hidden{display:none} [data-monster-role=control]{align-items:center;background-color:var(--monster-bg-color-primary-1);border:1px solid var(--monster-bg-color-primary-4);border-radius:2rem;color:var(--monster-color-primary-1);cursor:pointer;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0;overflow:hidden;padding:.5rem;position:relative;width:2rem}[data-monster-role=fullscreen-exit],[data-monster-role=fullscreen]{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.hidden{display:none}
}`, 0); }`,
0,
);
} catch (e) { } catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + ""); addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment