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

feat: Add placeholder support for select filter (Issue #316)

- Created `development/issues/closed/316.html` to document and showcase the placeholder feature added to the `monster-select`.
- Implemented `development/issues/closed/316.mjs` to include any necessary JavaScript functionality for the select component.
- Added mock data for testing in `development/mock/issue-316.js`, including a dataset that the select filter can utilize, facilitating development and testing.
- Enhanced the select component in `source/components/form/select.mjs` to handle the new placeholder attributes for the filter options and configured various components to handle remote fetching of options.
- Updated related styles in `source/components/form/style/select.pcss` and `source/components/form/stylesheet/select.mjs`, ensuring the placeholders are visually integrated and styled consistently.

These changes address the need for more informative placeholder instructions in the select filters to improve the user experience, especially for remote data loading scenarios.
parent 0f9f65e1
No related branches found
No related tags found
No related merge requests found
<!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>add placeholder to select filter #316</title>
<script src="./316.mjs" type="module"></script>
</head>
<body>
<h1>add placeholder to select filter #316</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/316">Issue #316</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<h2>Select (no url)</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-filter-defaultvalue=""
value="2000"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
>
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-filter-defaultvalue=""
value="2000"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-lookup-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="inline"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
</main>
</body>
</html>
/**
* @file development/issues/open/316.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/316
* @description add placeholder to select filter
* @issue 316
*/
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/form/select.mjs";
const json =
`{
"dataset": [
{
"id": 2000,
"name": "Autobahn"
},
{
"id": 2001,
"name": "Bus"
},
{
"id": 2002,
"name": "Autobus"
},
{
"id": 2003,
"name": "Fahrrad"
},
{
"id": 2004,
"name": "Tram"
},
{
"id": 2005,
"name": "Flugzeug"
}
],
"sys": {
"total": 6
}
}`;
// check if JSON is valid
JSON.parse(json)
const requestDelay = 10
export default [
{
url: '/issue-316.json',
method: 'get',
rawResponse: async (req, res) => {
try {
res.setHeader('Content-Type', 'application/json');
res.statusCode = 200;
const url = new URL(req.url, `http://${req.headers.host}`);
const q = Object.fromEntries(url.searchParams);
if (q?.default === 'true') {
const parsedJson = JSON.parse(json);
setTimeout(() => {
res.end(JSON.stringify({dataset: [parsedJson.dataset[0]], sys: {total: 1}}));
}, requestDelay);
return;
}
if (q?.q) {
const query = q.q.toLowerCase();
const parsedJson = JSON.parse(json);
const filtered = parsedJson.dataset.filter(item =>
item.name.toLowerCase().includes(query)
);
setTimeout(() => {
res.end(JSON.stringify({dataset: filtered, sys: {total: filtered.length}}));
}, requestDelay);
return;
}
setTimeout(() => {
res.end(json);
}, requestDelay);
} catch (error) {
res.statusCode = 500;
res.end(JSON.stringify({error: 'Internal Server Error'}));
}
},
}
];
\ No newline at end of file
......@@ -59,6 +59,8 @@ import { Processing } from "../../util/processing.mjs";
import {STYLE_DISPLAY_MODE_BLOCK} from "./constants.mjs";
import {SelectStyleSheet} from "./stylesheet/select.mjs";
import {positionPopper} from "./util/floating-ui.mjs";
import {Pathfinder} from "../../data/pathfinder.mjs";
import {TokenList} from "../../types/tokenlist.mjs";
export {
getSelectionTemplate,
......@@ -209,6 +211,11 @@ const noOptionsAvailableElementSymbol = Symbol("noOptionsAvailableElement");
*/
const statusOrRemoveBadgesElementSymbol = Symbol("statusOrRemoveBadgesElement");
/**
* local symbol
* @type {symbol}
*/
const remoteInfoElementSymbol = Symbol("remoteInfoElement");
/**
* @private
* @type {Symbol}
......@@ -363,7 +370,8 @@ class Select extends CustomControl {
setSelection
.call(this, result.selection)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -406,6 +414,12 @@ class Select extends CustomControl {
* @property {boolean} features.emptyValueIfNoOptions Set value to empty when no options are available.
* @property {boolean} features.storeFetchedData Persist raw fetched data for later retrieval via `getLastFetchedData()`.
* @property {boolean} features.useStrictValueComparison Use strict (`===`) comparison when matching option values.
* @property {boolean} features.showRemoteInfo When the filter mode is set to "remote," display a badge indicating the possibility of additional remote options.
* @property {Object} remoteInfo Configuration for remote info badge.
* @property {string} remoteInfo.path Path to the remote info badge.
* @property {string} remoteInfo.url URL for total count of options when `filter.mode==="remote"` is set.
* @property {Object} placeholder Placeholder text for the control.
* @property {string} placeholder.filter Placeholder text for filter input.
* @property {string|null} filter.defaultValue Default filter value for remote requests; if unset or empty, disabled marker prevents request.
* @property {"options"|"remote"|"disabled"} filter.mode Client-side ("options"), server-side ("remote"; disables `features.lazyLoad`), or disabled filtering.
* @property {"inline"|"popper"} filter.position Position of filter input: inline within control or inside popper dropdown.
......@@ -424,6 +438,12 @@ class Select extends CustomControl {
* @property {Array} empty.defaultValueCheckbox Default checkbox-values array when no selection exists.
* @property {Array} empty.equivalents Values considered empty (e.g. `undefined`, `null`, `""`, `NaN`) and normalized to defaults.
* @property {Function} formatter.selection Callback `(value)=>string` to format the display label of each selected value.
* @property {Object} classes CSS classes for styling.
* @property {string} classes.badge CSS class for the selection badge.
* @property {string} classes.statusOrRemoveBadge CSS class for the status or remove badge.
* @property {string} classes.remoteInfo CSS class for the remote info badge.
* @property {string} classes.noOptions CSS class for the no options available message.
* @property {number|null} total Total number of options available.
*/
get defaults() {
return Object.assign(
......@@ -445,17 +465,29 @@ class Select extends CustomControl {
emptyValueIfNoOptions: false,
storeFetchedData: false,
useStrictValueComparison: false,
showRemoteInfo: true,
},
placeholder: {
filter: "",
},
url: null,
remoteInfo: {
path: null,
url: null,
},
lookup: {
url: null,
grouping: false,
},
labels: getTranslations(),
messages: {
control: null,
selected: null,
emptyOptions: null,
total: null,
},
fetch: {
redirect: "error",
......@@ -479,12 +511,15 @@ class Select extends CustomControl {
classes: {
badge: "monster-badge-primary",
statusOrRemoveBadge: "empty",
remoteInfo: "monster-margin-start-4 monster-margin-top-4",
noOptions: "monster-margin-top-4 monster-margin-start-4",
},
mapping: {
selector: "*",
labelTemplate: "",
valueTemplate: "",
filter: null,
total: null,
},
empty: {
defaultValueRadio: "",
......@@ -502,6 +537,8 @@ class Select extends CustomControl {
selected: getSelectionTemplate(),
},
total: null,
popper: {
placement: "bottom",
middleware: ["flip", "offset:1"],
......@@ -522,7 +559,7 @@ class Select extends CustomControl {
initEventHandler.call(self);
let lazyLoadFlag = self.getOption("features.lazyLoad", false);
let remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
self.setOption("features.lazyLoad", false);
......@@ -547,12 +584,17 @@ class Select extends CustomControl {
if (lazyLoadFlag || remoteFilterFlag) {
lookupSelection.call(self);
} else {
self.fetch().catch((e) => {
self.fetch().then(() => {
setTotalText.call(self);
}).catch((e) => {
addErrorAttribute(self, e);
});
}
}
initTotal.call(self);
setTimeout(() => {
let lastValue = self.value;
self[internalSymbol].attachObserver(
......@@ -564,7 +606,8 @@ class Select extends CustomControl {
lastValue = n;
setSelection
.call(self, n)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(self, e);
});
......@@ -762,6 +805,7 @@ function importOptionsIntern(data) {
if (flag === true) {
throw new Error("missing label configuration");
}
if (isString(filter)) {
if (0 === filter.indexOf("run:")) {
const code = filter.replace("run:", "");
......@@ -805,6 +849,16 @@ function importOptionsIntern(data) {
const visibility = "visible";
map.forEach((label, value) => {
for (const option of options) {
if (option.value === value) {
option.label = label;
option.visibility = visibility;
option.data = map.get(value);
return;
}
}
options.push({
value,
label,
......@@ -822,7 +876,8 @@ function importOptionsIntern(data) {
setTimeout(() => {
setSelection
.call(this, this.getOption("selection"))
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -850,29 +905,16 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> Einträge ausgewählt',
},
"no-options": "Leider gibt es keine Optionen in der Liste.",
"no-options-found":
"Keine Optionen in der Liste verfügbar. Bitte ändern Sie den Filter.",
};
case "fr":
return {
"cannot-be-loaded": "Impossible de charger",
"no-options-available": "Aucune option disponible.",
"click-to-load-options": "Cliquez pour charger les options.",
"select-an-option": "Sélectionnez une option",
"summary-text": {
zero: "Aucune entrée sélectionnée",
one: '<span class="monster-badge-primary-pill">1</span> entrée sélectionnée',
other:
'<span class="monster-badge-primary-pill">${count}</span> entrées sélectionnées',
},
"no-options":
"Malheureusement, il n'y a pas d'options disponibles dans la liste.",
"no-options-found":
"Aucune option disponible dans la liste. Veuillez modifier le filtre.",
"no-options": '<span class="monster-badge-error-pill">Leider gibt es keine Optionen in der Liste.</span>',
"no-options-found": '<span class="monster-badge-error-pill">Keine Optionen in der Liste verfügbar. Bitte ändern Sie den Filter.</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">Es sind keine weiteren Beiträge verfügbar.</span>',
one: '<span class="monster-badge-primary-pill">Es ist 1 weiterer Beitrag verfügbar.</span>',
other: '<span class="monster-badge-primary-pill">Es sind ${count} weitere Beiträge verfügbar.</span>',
}
};
case "sp":
case "es":
return {
"cannot-be-loaded": "No se puede cargar",
"no-options-available": "No hay opciones disponibles.",
......@@ -884,16 +926,188 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas',
},
"no-options":
"Desafortunadamente, no hay opciones disponibles en la lista.",
"no-options-found":
"No hay opciones disponibles en la lista. Considere modificar el filtro.",
"no-options": '<span class="monster-badge-error-pill">Desafortunadamente, no hay opciones disponibles en la lista.</span>',
"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>',
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>',
}
};
case "zh":
return {
"cannot-be-loaded": "无法加载",
"no-options-available": "没有可用选项。",
"click-to-load-options": "点击以加载选项。",
"select-an-option": "选择一个选项",
"summary-text": {
zero: "未选择任何条目",
one: '<span class="monster-badge-primary-pill">1</span> 个条目已选择',
other:
'<span class="monster-badge-primary-pill">${count}</span> 个条目已选择',
},
"no-options": '<span class="monster-badge-error-pill">很抱歉,列表中没有可用选项。</span>',
"no-options-found": '<span class="monster-badge-error-pill">列表中没有可用选项。请修改筛选条件。</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">没有更多条目可用。</span>',
one: '<span class="monster-badge-primary-pill">还有 1 个可用条目。</span>',
other: '<span class="monster-badge-primary-pill">还有 ${count} 个可用条目。</span>',
}
};
case "hi":
return {
"cannot-be-loaded": "लोड नहीं किया जा सकता",
"no-options-available": "कोई विकल्प उपलब्ध नहीं है।",
"click-to-load-options": "विकल्प लोड करने के लिए क्लिक करें।",
"select-an-option": "एक विकल्प चुनें",
"summary-text": {
zero: "कोई प्रविष्टि चयनित नहीं",
one: '<span class="monster-badge-primary-pill">1</span> प्रविष्टि चयनित',
other:
'<span class="monster-badge-primary-pill">${count}</span> प्रविष्टियाँ चयनित',
},
"no-options": '<span class="monster-badge-error-pill">क्षमा करें, सूची में कोई विकल्प उपलब्ध नहीं है।</span>',
"no-options-found": '<span class="monster-badge-error-pill">सूची में कोई विकल्प उपलब्ध नहीं है। कृपया फ़िल्टर बदलें।</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">कोई अतिरिक्त प्रविष्टि उपलब्ध नहीं है।</span>',
one: '<span class="monster-badge-primary-pill">1 अतिरिक्त प्रविष्टि उपलब्ध है।</span>',
other: '<span class="monster-badge-primary-pill">${count} अतिरिक्त प्रविष्टियाँ उपलब्ध हैं।</span>',
}
};
case "bn":
return {
"cannot-be-loaded": "লোড করা যায়নি",
"no-options-available": "কোন বিকল্প উপলব্ধ নেই।",
"click-to-load-options": "বিকল্প লোড করতে ক্লিক করুন।",
"select-an-option": "একটি বিকল্প নির্বাচন করুন",
"summary-text": {
zero: "কোন এন্ট্রি নির্বাচিত হয়নি",
one: '<span class="monster-badge-primary-pill">1</span> এন্ট্রি নির্বাচিত',
other:
'<span class="monster-badge-primary-pill">${count}</span> এন্ট্রি নির্বাচিত',
},
"no-options": '<span class="monster-badge-error-pill">দুঃখিত, তালিকায় কোন বিকল্প পাওয়া যায়নি।</span>',
"no-options-found": '<span class="monster-badge-error-pill">তালিকায় কোন বিকল্প পাওয়া যায়নি। দয়া করে ফিল্টার পরিবর্তন করুন।</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">আর কোনো এন্ট্রি উপলব্ধ নেই।</span>',
one: '<span class="monster-badge-primary-pill">1 অতিরিক্ত এন্ট্রি উপলব্ধ।</span>',
other: '<span class="monster-badge-primary-pill">${count} অতিরিক্ত এন্ট্রি উপলব্ধ।</span>',
}
};
case "pt":
return {
"cannot-be-loaded": "Não é possível carregar",
"no-options-available": "Nenhuma opção disponível.",
"click-to-load-options": "Clique para carregar opções.",
"select-an-option": "Selecione uma opção",
"summary-text": {
zero: "Nenhuma entrada selecionada",
one: '<span class="monster-badge-primary-pill">1</span> entrada selecionada',
other:
'<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-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>',
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>',
}
};
case "ru":
return {
"cannot-be-loaded": "Не удалось загрузить",
"no-options-available": "Нет доступных вариантов.",
"click-to-load-options": "Нажмите, чтобы загрузить варианты.",
"select-an-option": "Выберите вариант",
"summary-text": {
zero: "Нет выбранных записей",
one: '<span class="monster-badge-primary-pill">1</span> запись выбрана',
other:
'<span class="monster-badge-primary-pill">${count}</span> записей выбрано',
},
"no-options": '<span class="monster-badge-error-pill">К сожалению, в списке нет доступных вариантов.</span>',
"no-options-found": '<span class="monster-badge-error-pill">В списке нет доступных вариантов. Пожалуйста, измените фильтр.</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">Дополнительных записей нет.</span>',
one: '<span class="monster-badge-primary-pill">Доступна 1 дополнительная запись.</span>',
other: '<span class="monster-badge-primary-pill">${count} дополнительных записей доступны.</span>',
}
};
case "ja":
return {
"cannot-be-loaded": "読み込めません",
"no-options-available": "利用可能なオプションがありません。",
"click-to-load-options": "クリックしてオプションを読み込む。",
"select-an-option": "オプションを選択",
"summary-text": {
zero: "選択された項目はありません",
one: '<span class="monster-badge-primary-pill">1</span> 件選択されました',
other:
'<span class="monster-badge-primary-pill">${count}</span> 件選択されました',
},
"no-options": '<span class="monster-badge-error-pill">申し訳ありませんが、リストに利用可能なオプションがありません。</span>',
"no-options-found": '<span class="monster-badge-error-pill">リストに利用可能なオプションがありません。フィルターを変更してください。</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">追加の項目はありません。</span>',
one: '<span class="monster-badge-primary-pill">1 件の追加項目があります。</span>',
other: '<span class="monster-badge-primary-pill">${count} 件の追加項目があります。</span>',
}
};
case "pa":
return {
"cannot-be-loaded": "ਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ",
"no-options-available": "ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ।",
"click-to-load-options": "ਚੋਣਾਂ ਲੋਡ ਕਰਨ ਲਈ ਕਲਿੱਕ ਕਰੋ।",
"select-an-option": "ਇੱਕ ਚੋਣ ਚੁਣੋ",
"summary-text": {
zero: "ਕੋਈ ਐਂਟਰੀ ਚੁਣੀ ਨਹੀਂ ਗਈ",
one: '<span class="monster-badge-primary-pill">1</span> ਐਂਟਰੀ ਚੁਣੀ ਗਈ',
other:
'<span class="monster-badge-primary-pill">${count}</span> ਐਂਟਰੀਆਂ ਚੁਣੀਆਂ ਗਈਆਂ',
},
"no-options": '<span class="monster-badge-error-pill">ਮਾਫ ਕਰਨਾ, ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।</span>',
"no-options-found": '<span class="monster-badge-error-pill">ਸੂਚੀ ਵਿੱਚ ਕੋਈ ਚੋਣ ਉਪਲਬਧ ਨਹੀਂ ਹੈ। ਕਿਰਪਾ ਕਰਕੇ ਫਿਲਟਰ ਬਦਲੋ।</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">ਹੋਰ ਕੋਈ ਐਡਿਸ਼ਨਲ ਐਂਟਰੀ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।</span>',
one: '<span class="monster-badge-primary-pill">1 ਵਾਧੂ ਐਂਟਰੀ ਉਪਲਬਧ ਹੈ।</span>',
other: '<span class="monster-badge-primary-pill">${count} ਵਾਧੂ ਐਂਟਰੀਆਂ ਉਪਲਬਧ ਹਨ。</span>',
}
};
case "mr":
return {
"cannot-be-loaded": "लोड केले जाऊ शकत नाही",
"no-options-available": "कोणतीही पर्याय उपलब्ध नाहीत。",
"click-to-load-options": "पर्याय लोड करण्यासाठी क्लिक करा。",
"select-an-option": "एक पर्याय निवडा",
"summary-text": {
zero: "कोणीही नोंद निवडलेली नाही",
one: '<span class="monster-badge-primary-pill">1</span> नोंद निवडली',
other:
'<span class="monster-badge-primary-pill">${count}</span> नोंदी निवडल्या',
},
"no-options": '<span class="monster-badge-error-pill">क्षमस्व, यादीमध्ये कोणतीही पर्याय उपलब्ध नाहीत。</span>',
"no-options-found": '<span class="monster-badge-error-pill">यादीमध्ये कोणतेही पर्याय उपलब्ध नाहीत। कृपया फिल्टर बदला。</span>',
"total": {
zero: '<span class="monster-badge-primary-pill">आणखी कोणतीही नोंद उपलब्ध नाही。</span>',
one: '<span class="monster-badge-primary-pill">1 अतिरिक्त नोंद उपलब्ध आहे。</span>',
other: '<span class="monster-badge-primary-pill">${count} अतिरिक्त नोंदी उपलब्ध आहेत。</span>',
}
};
case "it":
return {
"cannot-be-loaded": "Non può essere caricato",
"no-options-available": "Nessuna opzione disponibile.",
"click-to-load-options": "Clicca per caricare le opzioni.",
"no-options-available": "Nessuna opzione disponibile",
"click-to-load-options": "Clicca per caricare le opzioni",
"select-an-option": "Seleziona un'opzione",
"summary-text": {
zero: "Nessuna voce selezionata",
......@@ -901,15 +1115,62 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> voci selezionate',
},
"no-options": "Purtroppo, non ci sono opzioni disponibili nella lista.",
"no-options-found":
"Nessuna opzione disponibile nella lista. Si prega di modificare il filtro.",
"no-options": '<span class="monster-badge-error-pill">Purtroppo, non ci sono opzioni disponibili nella lista。</span>',
"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>',
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>',
}
};
case "nl":
return {
"cannot-be-loaded": "Kan niet worden geladen",
"no-options-available": "Geen opties beschikbaar。",
"click-to-load-options": "Klik om opties te laden。",
"select-an-option": "Selecteer een optie",
"summary-text": {
zero: "Er zijn geen items geselecteerd",
one: '<span class="monster-badge-primary-pill">1</span> item geselecteerd',
other:
'<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-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>',
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>',
}
};
case "sv":
return {
"cannot-be-loaded": "Kan inte laddas",
"no-options-available": "Inga alternativ tillgängliga。",
"click-to-load-options": "Klicka för att ladda alternativ。",
"select-an-option": "Välj ett alternativ",
"summary-text": {
zero: "Inga poster valdes",
one: '<span class="monster-badge-primary-pill">1</span> post valdes',
other:
'<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-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>',
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>',
}
};
case "pl":
return {
"cannot-be-loaded": "Nie można załadować",
"no-options-available": "Brak dostępnych opcji.",
"click-to-load-options": "Kliknij, aby załadować opcje.",
"no-options-available": "Brak dostępnych opcji",
"click-to-load-options": "Kliknij, aby załadować opcje",
"select-an-option": "Wybierz opcję",
"summary-text": {
zero: "Nie wybrano żadnych wpisów",
......@@ -917,15 +1178,62 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane',
},
"no-options": "Niestety, nie ma dostępnych opcji na liście.",
"no-options-found":
"Brak dostępnych opcji na liście. Rozważ zmianę filtra.",
"no-options": '<span class="monster-badge-error-pill">Niestety, nie ma dostępnych opcji na liście。</span>',
"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>',
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>',
}
};
case "da":
return {
"cannot-be-loaded": "Kan ikke indlæses",
"no-options-available": "Ingen muligheder tilgængelige。",
"click-to-load-options": "Klik for at indlæse muligheder。",
"select-an-option": "Vælg en mulighed",
"summary-text": {
zero: "Ingen indlæg blev valgt",
one: '<span class="monster-badge-primary-pill">1</span> indlæg blev valgt',
other:
'<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-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>',
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>',
}
};
case "fi":
return {
"cannot-be-loaded": "Ei voi ladata",
"no-options-available": "Ei vaihtoehtoja saatavilla。",
"click-to-load-options": "Napsauta ladataksesi vaihtoehtoja。",
"select-an-option": "Valitse vaihtoehto",
"summary-text": {
zero: "Ei valittuja kohteita",
one: '<span class="monster-badge-primary-pill">1</span> kohde valittu',
other:
'<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-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>',
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>',
}
};
case "no":
return {
"cannot-be-loaded": "Kan ikke lastes",
"no-options-available": "Ingen alternativer tilgjengelig.",
"click-to-load-options": "Klikk for å laste alternativer.",
"no-options-available": "Ingen alternativer tilgjengelig",
"click-to-load-options": "Klikk for å laste alternativer",
"select-an-option": "Velg et alternativ",
"summary-text": {
zero: "Ingen oppføringer ble valgt",
......@@ -933,48 +1241,38 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt',
},
"no-options":
"Dessverre er det ingen alternativer tilgjengelig i listen.",
"no-options-found":
"Ingen alternativer tilgjengelig på listen. Vurder å endre filteret.",
"no-options": '<span class="monster-badge-error-pill">Dessverre er det ingen alternativer tilgjengelig i listen。</span>',
"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>',
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>',
}
};
case "dk":
return {
"cannot-be-loaded": "Kan ikke indlæses",
"no-options-available": "Ingen muligheder tilgængelige.",
"click-to-load-options": "Klik for at indlæse muligheder.",
"select-an-option": "Vælg en mulighed",
"summary-text": {
zero: "Ingen indlæg blev valgt",
one: '<span class="monster-badge-primary-pill">1</span> indlæg blev valgt',
other:
'<span class="monster-badge-primary-pill">${count}</span> indlæg blev valgt',
},
"no-options":
"Desværre er der ingen muligheder tilgængelige på listen.",
"no-options-found":
"Ingen muligheder tilgængelige på listen. Overvej at ændre filteret.",
};
case "sw":
case "cs":
return {
"cannot-be-loaded": "Kan inte laddas",
"no-options-available": "Inga alternativ tillgängliga.",
"click-to-load-options": "Klicka för att ladda alternativ.",
"select-an-option": "Välj ett alternativ",
"cannot-be-loaded": "Nelze načíst",
"no-options-available": "Žádné možnosti nejsou k dispozici。",
"click-to-load-options": "Klikněte pro načtení možností。",
"select-an-option": "Vyberte možnost",
"summary-text": {
zero: "Inga poster valdes",
one: '<span class="monster-badge-primary-pill">1</span> post valdes',
zero: "Žádné položky nebyly vybrány",
one: '<span class="monster-badge-primary-pill">1</span> položka vybrána',
other:
'<span class="monster-badge-primary-pill">${count}</span> poster valdes',
'<span class="monster-badge-primary-pill">${count}</span> položky vybrány',
},
"no-options": "Tyvärr finns det inga alternativ tillgängliga i listan.",
"no-options-found":
"Inga alternativ finns tillgängliga i listan. Överväg att modifiera filtret.",
"no-options": '<span class="monster-badge-error-pill">Bohužel nejsou k dispozici žádné možnosti v seznamu。</span>',
"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>',
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>',
}
};
default:
case "en":
// Fallback to English if locale.language is unrecognized
return {
"cannot-be-loaded": "Cannot be loaded",
"no-options-available": "No options available.",
......@@ -986,14 +1284,18 @@ function getTranslations() {
other:
'<span class="monster-badge-primary-pill">${count}</span> entries were selected',
},
"no-options":
"Unfortunately, there are no options available in the list.",
"no-options-found":
"No options are available in the list. Please consider modifying the filter.",
"no-options": '<span class="monster-badge-error-pill">Unfortunately, there are no options available in the list.</span>',
"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>',
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>',
}
};
}
}
/**
* @private
*/
......@@ -1042,9 +1344,17 @@ function lookupSelection() {
});
}
}
}, 100);
}
/**
*
* @param url
* @param controlOptions
* @returns {Promise<never>|Promise<unknown>}
*/
function fetchIt(url, controlOptions) {
const self = this;
......@@ -1099,6 +1409,8 @@ function fetchIt(url, controlOptions) {
checkOptionState.call(this);
setStatusOrRemoveBadges.call(this, "closed");
updatePopper.call(this);
setTotalText.call(this);
resolve(result);
});
......@@ -1122,6 +1434,7 @@ function fetchIt(url, controlOptions) {
});
}
/**
* This attribute can be used to pass a URL to this select.
*
......@@ -1205,6 +1518,7 @@ function getSelectionTemplate() {
data-monster-insert="selection path:selection" role="search"
><input type="text" role="searchbox"
part="inline-filter" name="inline-filter"
data-monster-attributes="placeholder path:placeholder.filter"
data-monster-role="filter"
autocomplete="off"
tabindex="0"
......@@ -1219,6 +1533,7 @@ function getSelectionTemplate() {
function getSummaryTemplate() {
return `<div data-monster-role="selection" role="search" part="summary">
<input type="text" role="searchbox"
data-monster-attributes="placeholder path:placeholder.filter"
part="inline-filter" name="inline-filter"
data-monster-role="filter"
autocomplete="off"
......@@ -1392,11 +1707,50 @@ function getDefaultTranslation() {
try {
const doc = getDocumentTranslations();
translation.locale = doc.locale;
} catch (e) {}
} catch (e) {
}
return translation;
}
function setTotalText() {
if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
return;
}
if (this.getOption("features.showRemoteInfo") !== true) {
return;
}
const count = this.getOption("options").length;
const total = Number.parseInt(this.getOption("total"));
if (Number.isNaN(total)) {
this.setOption("messages.total", "");
return;
}
const translations = getDefaultTranslation.call(this);
const text = translations.getPluralRuleText(
"total",
total,
"",
);
const diff = total - count;
if (diff <= 0) {
this.setOption("messages.total", "");
return;
}
const selectedText = new Formatter({
count: String(diff),
}).format(text);
this.setOption("messages.total", selectedText);
}
/**
* @private
* @return {string|*}
......@@ -1477,6 +1831,7 @@ function calcAndSetOptionsDimension() {
let scrollFlag = false;
for (const [, option] of Object.entries(options)) {
const computedStyle = getGlobal().getComputedStyle(option);
if (computedStyle.display === "none") continue;
......@@ -1509,9 +1864,15 @@ function calcAndSetOptionsDimension() {
this.getOption("labels.no-options-found"),
);
}
this[noOptionsAvailableElementSymbol].classList.remove("d-none");
let classes = new TokenList(this.getOption("classes.noOptions"));
classes.remove("d-none");
this.setOption("classes.noOptions", classes.toString());
} else {
this[noOptionsAvailableElementSymbol].classList.add("d-none");
let classes = new TokenList(this.getOption("classes.noOptions"));
classes.add("d-none");
this.setOption("classes.noOptions", classes.toString());
}
const styles = getGlobal().getComputedStyle(this[optionsElementSymbol]);
......@@ -1741,11 +2102,12 @@ function handleFilterKeyEvents() {
* @private
*/
function filterFromRemote() {
if (
!(this[inlineFilterElementSymbol] instanceof HTMLElement) &&
!(this[popperFilterElementSymbol] instanceof HTMLElement)
) {
return;
return Promise.reject(new Error("Missing Filter Element."));
}
show.call(this);
......@@ -1753,7 +2115,7 @@ function filterFromRemote() {
const url = this.getOption("url");
if (!url) {
addErrorAttribute(this, "Missing URL for Remote Filter.");
return;
return Promise.reject(new Error("Missing URL for Remote Filter."));
}
let filterValue;
......@@ -1777,10 +2139,16 @@ function filterFromRemote() {
return filterFromRemoteByValue.call(this, url, filterValue, showFlag);
}
/**
* @private
* @param url
* @param value
* @returns {string}
*/
function formatURL(url, value) {
if (value === undefined || value === null || value === "") {
value = this.getOption("filter.defaultValue");
if (value === undefined || value === null || value === "") {
if (value === undefined || value === null) {
value = disabledRequestMarker.toString();
}
}
......@@ -2020,7 +2388,8 @@ function gatherState() {
setSelection
.call(this, selection)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2049,7 +2418,8 @@ function clearSelection() {
setSelection
.call(this, [])
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2099,7 +2469,6 @@ function areOptionsAvailableAndInitInternal() {
) {
setStatusOrRemoveBadges.call(this, "empty");
// hide.call(this);
let msg = this.getOption("labels.no-options-available");
......@@ -2113,12 +2482,11 @@ function areOptionsAvailableAndInitInternal() {
if (this.getOption("filter.mode") === FILTER_MODE_REMOTE) {
msg = "";
} else {
this.setOption("filter.defaultValue", undefined);
}
if (
containsAttributeToken(this[controlElementSymbol], "class", "open") ===
true
) {
if (containsAttributeToken(this[controlElementSymbol], "class", "open") === true) {
msg = "";
}
......@@ -2380,7 +2748,7 @@ function setSelection(selection) {
const lazyLoadFlag =
this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
let remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
if (lazyLoadFlag || remoteFilterFlag) {
lookupSelection.call(self);
}
......@@ -2574,6 +2942,7 @@ function initDefaultOptionsFromUrl() {
this[cleanupOptionsListSymbol] = false;
importOptionsIntern.call(this, data);
setStatusOrRemoveBadges.call(this, "open");
setTotal.call(this, data)
})
.catch((e) => {
addErrorAttribute(this, e);
......@@ -2581,6 +2950,51 @@ function initDefaultOptionsFromUrl() {
});
}
/**
* @private
*/
function initTotal() {
if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
return;
}
const url = this.getOption("remoteInfo.url");
const mapping = this.getOption("mapping.total");
if (!isString(mapping) || !isString(url)) {
return;
}
getGlobal().fetch(url).then((response) => {
if (!response.ok) { // Improved status checking using `response.ok`
addErrorAttribute(this, `HTTP error! status: ${response.status} - ${response.statusText}`);
return;
}
return response.text();
}).then((text) => {
try {
const data = JSON.parse(String(text));
const pathfinder = new Pathfinder(data);
const total = pathfinder.getVia(mapping);
if (!isInteger(total)) {
addErrorAttribute(this, "total is not an integer");
return;
}
this.setOption("total", total);
} catch (e) {
addErrorAttribute(this, e);
}
})
.catch((e) => {
addErrorAttribute(this, e);
});
}
/**
* @private
*/
......@@ -2921,6 +3335,10 @@ function initControlReferences() {
this[statusOrRemoveBadgesElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}=status-or-remove-badges]`,
);
this[remoteInfoElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}=remote-info]`,
);
}
/**
......@@ -3005,6 +3423,7 @@ function getTemplate() {
<div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
<div class="option-filter-control" role="search">
<input type="text" role="searchbox"
data-monster-attributes="placeholder path:placeholder.filter"
part="popper-filter" name="popper-filter"
data-monster-role="filter"
autocomplete="off"
......@@ -3014,7 +3433,12 @@ function getTemplate() {
<div part="options" data-monster-role="options" data-monster-insert="options path:options"
tabindex="-1"></div>
</div>
<div part="remote-info"
data-monster-role="remote-info"
data-monster-attributes="class path:classes.remoteInfo"
data-monster-replace="path:messages.total"></div>
<div part="no-options" data-monster-role="no-options"
data-monster-attributes="class path:classes.noOptions"
data-monster-replace="path:messages.emptyOptions"></div>
</div>
<div part="status-or-remove-badges" data-monster-role="status-or-remove-badges"
......
......@@ -2,6 +2,7 @@
@import "../../style/border.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import "../../style/space.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/mixin/hover.pcss';
......@@ -269,11 +270,6 @@ div[data-monster-role=selection] {
}
[data-monster-role="no-options"] {
margin: 1.1em 1.1em 0 1.1em;
padding: 0.3em 0.8em;
border-radius: 0.2em;
color: var(--monster-color-warning-4);
background-color: var(--monster-bg-color-warning-4);
}
.selected {
......@@ -303,6 +299,12 @@ div[data-monster-role=selection] {
}
[data-monster-role="filter"]::placeholder {
color: var(--monster-color-primary-2);
background-color: var(--monster-bg-color-primary-2);
}
[data-monster-role=option] > label:focus,
[data-monster-role=option] > input:focus {
outline: none
......
......@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { SelectStyleSheet };
export {SelectStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { SelectStyleSheet };
const SelectStyleSheet = new CSSStyleSheet();
try {
SelectStyleSheet.insertRule(
`
SelectStyleSheet.insertRule(`
@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}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=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%}[data-monster-role=no-options]{background-color:var(--monster-bg-color-warning-4);border-radius:.2em;color:var(--monster-color-warning-4);margin:1.1em 1.1em 0;padding:.3em .8em}.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=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}
}`,
0,
);
.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=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);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
......@@ -156,7 +156,7 @@ function getMonsterVersion() {
}
/** don't touch, replaced by make with package.json version */
monsterVersion = new Version("3.120.0");
monsterVersion = new Version("4.4.1");
return monsterVersion;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment