diff --git a/playground/issues/139.html b/playground/issues/139.html
new file mode 100644
index 0000000000000000000000000000000000000000..c6d78836abe8bc841ad2ed607a95f3f5940d3008
--- /dev/null
+++ b/playground/issues/139.html
@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
+
+ <title>Issues</title>
+ <script src="./139.js" type="module"></script>
+
+ <style>
+ monster-button-bar {
+
+ }
+
+ monster-button-bar button {
+ padding: 0;
+ margin-right: -2px;
+ }
+
+ monster-button-bar button:first-child {
+
+ }
+
+ </style>
+
+</head>
+<body>
+
+
+<main>
+
+ <h1>Issues #139</h1>
+
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/139" target="_blank">#139</a>
+ </li>
+ <li><a href="../../">Back to overview</a></li>
+ </ul>
+
+
+ <div style="width: 950px;margin: 0 auto;">
+
+ <monster-host>
+ <monster-config-manager></monster-config-manager>
+ </monster-host>
+
+
+ <monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json"
+ data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
+
+
+ <monster-datatable
+ id="test-datatable" data-monster-datasource-selector="#data1">
+
+
+ <monster-collapse id="my-collapse" data-monster-role="filter-collapse">
+ <div class="flex">
+ <monster-tabs style="width: 100%" data-monster-option-classes-button="monster-theme-primary-2"
+ id="filtertabs">
+ <div data-monster-button-label="Filter" data-monster-state="active" class="active">
+ <monster-datatable-filter id="listfilter1" slot="filter"
+ data-monster-option-storedconfig-selector="#filtertabs">
+ <label data-monster-label="companySHID" id="companySHID"
+ data-monster-template="${value | call:range:companySHID}">
+ RANGE companySHID
+ <monster-filter-range></monster-filter-range>
+ </label>
+ <label data-monster-label="paymentPID" id="paymentPID"
+ data-monster-template="${value | call:date-range:paymentPID}">paymentPID
+ <monster-filter-date-range></monster-filter-date-range>
+ </label>
+ <label data-monster-label="orderState" id="orderState"
+ data-monster-template="${value | call:date-range:orderState}">orderState
+ <monster-filter-date-range></monster-filter-date-range>
+ </label>
+ <label data-monster-label="OID" data-monster-template="${value | call:range:oid}"
+ id="OID">OID
+ <monster-filter-input name="OID" type="search"></monster-filter-input>
+ </label>
+
+
+ </monster-datatable-filter>
+ </div>
+ <div data-monster-button-label="BUTTON"></div>
+ </monster-tabs>
+
+ </div>
+ </monster-collapse>
+
+ <div slot="bar" class="monster-button-group">
+ <monster-datasource-save-button slot="bar" data-monster-option-datasource-selector="#data1">
+ </monster-datasource-save-button>
+ <monster-datasource-status slot="bar" data-monster-option-datasource-selector="#data1">
+ </monster-datasource-status>
+
+ <monster-datasource-status data-monster-option-datasource-selector="#data1"></monster-datasource-status>
+ <monster-embedded-pagination
+ data-monster-datasource-selector="#data1"></monster-embedded-pagination>
+ <!-- <monster-embedded-state-->
+ <!-- data-monster-datasource-selector="#data1"></monster-embedded-state>-->
+
+ <monster-datatable-filter-button data-monster-reference="#my-collapse"
+ data-monster-role="filter-button">Filter
+ </monster-datatable-filter-button>
+ </div>
+
+ <template id="test-datatable-row">
+ <div data-monster-mode="fixed" data-monster-sortable="oid asc" data-monster-head="OID">
+ <a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#"
+ data-monster-replace="path:t12-row.oid | tostring">Link</a>
+ </div>
+ <div data-monster-grid-template="1fr" data-monster-head="i18n:key22">
+ <ul>
+ <li><input type="date"></li>
+ <li data-monster-replace="path:t12-row.oid">test 1</li>
+ <li>asdfjasdkfjk</li>
+ </ul>
+ </div>
+ <div data-monster-mode="fixed" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
+ type="checkbox"></div>
+ <div data-monster-head="orderState 2" class="center" data-monster-align="center"
+ data-monster-replace="path:t12-row.orderState"></div>
+ <div class="end" data-monster-align="end"
+ data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
+ <div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
+ <div data-monster-sortable="orderState" data-monster-head="State"
+ data-monster-replace="path:t12-row.orderState | tostring | prefix:____"></div>
+ <div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
+ <div style="overflow:visible">
+ <monster-popper-button>
+ <form class="monster-form">
+ <label><input>test 1</label>
+ <label>test 2<input></label>
+ <button>OK</button>
+ </form>
+ </monster-popper-button>
+
+ </div>
+ </template>
+
+ </monster-datatable>
+ </div>
+</main>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/playground/issues/139.js b/playground/issues/139.js
new file mode 100644
index 0000000000000000000000000000000000000000..9dffa8cbf93e89bd7efd140d7bdadb90c58f61f4
--- /dev/null
+++ b/playground/issues/139.js
@@ -0,0 +1,45 @@
+import "../../source/components/host/overlay.mjs";
+import "../../source/components/datatable/datatable.mjs";
+import "../../source/components/datatable/dataset.mjs";
+import "../../source/components/datatable/datasource/dom.mjs";
+import "../../source/components/datatable/datasource/rest.mjs";
+import "../../source/components/datatable/save-button.mjs";
+
+import "../../source/components/form/button.mjs";
+import "../../source/components/form/select.mjs";
+import "../../source/components/form/toggle-switch.mjs";
+
+import "../../source/components/style/common.pcss";
+import "../../source/components/style/color.pcss";
+import "../../source/components/style/theme.pcss";
+import "../../source/components/style/table.pcss";
+import "../../source/components/style/badge.pcss";
+import "../../source/components/style/button.pcss";
+import "../../source/components/style/link.pcss";
+import "../../source/components/style/data-grid.pcss";
+import "../../source/components/style/property.pcss";
+import "../../source/components/style/typography.pcss";
+import "../../source/components/style/display.pcss";
+
+import "../../source/components/datatable/datasource/rest.mjs";
+import "../../source/components/datatable/filter.mjs";
+import "../../source/components/datatable/filter-button.mjs";
+import "../../source/components/datatable/embedded-pagination.mjs";
+import "../../source/components/datatable/datatable.mjs";
+import "../../source/components/datatable/dataset.mjs";
+import "../../source/components/datatable/status.mjs";
+import "../../source/components/datatable/save-button.mjs";
+import "../../source/components/datatable/change-button.mjs";
+import "../../source/components/datatable/filter/range.mjs";
+import "../../source/components/datatable/filter/select.mjs";
+import "../../source/components/datatable/filter/input.mjs";
+import "../../source/components/datatable/filter/date-range.mjs";
+import {windowReady} from "../../source/dom/ready.mjs";
+import "../../source/components/host/host.mjs";
+import "../../source/components/host/config-manager.mjs";
+import "../../source/components/form/button.mjs";
+import "../../source/components/form/button-bar.mjs";
+import "../../source/components/form/popper-button.mjs";
+import "../../source/components/form/tabs.mjs";
+import "./generic.pcss";
+
diff --git a/source/components/datatable/dataset.mjs b/source/components/datatable/dataset.mjs
index 05937e7830d256ec4a3359d8d73f07b0865fda10..32d5a020438dd2a4109597bdfce9241d00794e72 100644
--- a/source/components/datatable/dataset.mjs
+++ b/source/components/datatable/dataset.mjs
@@ -137,7 +137,6 @@ class DataSet extends CustomElement {
}
write() {
-
return new Promise((resolve, reject) => {
if (!this[datasourceLinkedElementSymbol]) {
reject(new Error("No datasource"));
diff --git a/source/components/datatable/datatable.mjs b/source/components/datatable/datatable.mjs
index 63f75a794ec76409cb5b84bb971f2a319fefb340..9ad68667762bfd1474a6c408d03ffc56752a09f9 100644
--- a/source/components/datatable/datatable.mjs
+++ b/source/components/datatable/datatable.mjs
@@ -40,7 +40,6 @@ import {
DIRECTION_DESC,
DIRECTION_NONE,
} from "./datatable/header.mjs";
-import { getStoredFilterConfigKey } from "./filter/util.mjs";
import { DatatableStyleSheet } from "./stylesheet/datatable.mjs";
import {
handleDataSourceChanges,
diff --git a/source/components/datatable/filter.mjs b/source/components/datatable/filter.mjs
index 508a8615d0e8b02d2bb1476cbdb8c9ba1b6b4424..3b7fc805956a3fab72f35827abbd80185416413a 100644
--- a/source/components/datatable/filter.mjs
+++ b/source/components/datatable/filter.mjs
@@ -366,12 +366,23 @@ function initControlReferences() {
return this;
}
+function updateFilterSelections() {
+ setTimeout(() => {
+ const options = this[settingsSymbol].getOptions();
+ this[filterSelectElementSymbol].setOption("options", options);
+ setTimeout(() => {
+ this[filterSelectElementSymbol].value =
+ this[settingsSymbol].getSelected();
+ }, 10);
+ }, 10);
+}
+
/**
* @private
* @throws {Error} no filter label is defined
*/
function initFilter() {
- const storedConfig = this[settingsSymbol];
+ const storedSetting = this[settingsSymbol];
this[settingsSymbol] = new Settings();
const result = parseBracketedKeyValueHash(getGlobal().location.hash);
@@ -397,7 +408,7 @@ function initFilter() {
element.id = value;
}
- let setting = storedConfig.get(value);
+ let setting = storedSetting.get(value);
if (setting) {
this[settingsSymbol].set(setting);
@@ -407,31 +418,22 @@ function initFilter() {
const v = escapeAttributeValue(valuesFromHash[element.id]);
const searchInput = element.firstElementChild;
try {
- // searchInput.value = valuesFromHash[element.id];
- searchInput.value = v; //valuesFromHash[element.id];
+ searchInput.value = v;
} catch (error) {}
}
setting = this[settingsSymbol].get(value);
+ let visible = false;
if (setting) {
setSlotAttribute(element, setting.visible);
- //style.display = setting.visible ? "block" : "none";
+ visible = setting.visible;
+ } else {
+ visible = getVisibilityFromSlotAttribute(element);
}
- //const visible = window.getComputedStyle(element).display !== "none";
- const visible = getVisibilityFromSlotAttribute(element);
-
this[settingsSymbol].set({ value, label, visible });
});
-
- this[filterSelectElementSymbol].setOption(
- "options",
- this[settingsSymbol].getOptions(),
- );
-
- setTimeout(() => {
- this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
- }, 10);
+ updateFilterSelections.call(this);
}
/**
@@ -512,7 +514,6 @@ function initEventHandler() {
event.detail.value,
);
if (filterElement) {
- //filterElement.style.display = event.detail.checked ? "block" : "none";
setSlotAttribute(filterElement, event.detail.checked);
}
@@ -651,15 +652,18 @@ function initEventHandler() {
}
});
- doSearch.call(self, { showEffect: false });
+ doSearch
+ .call(self, { showEffect: false })
+ .then(() => {})
+ .catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
});
self[locationChangeHandlerSymbol] = (event) => {
- if (event instanceof HashChangeEvent) {
- if (event.oldURL === event.newURL) {
- return;
- }
- }
+ // if (event instanceof HashChangeEvent) {
+ // if (event.oldURL === event.newURL) {
+ // return;
+ // }
+ // }
};
self.addEventListener("keyup", (event) => {
@@ -788,8 +792,7 @@ function updateFilterTabs() {
element.insertAdjacentHTML(
"beforeend",
- `
- <div data-monster-button-label="${name}"
+ `<div data-monster-button-label="${name}"
data-monster-removable="true"
data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
</div>`,
@@ -1054,7 +1057,8 @@ function getControlValuesFromLabel(label) {
* @private
* @returns {Promise<unknown>}
*/
-function initFromConfig() {
+function initFromConfig() {;
+
const document = getDocument();
const host = document.querySelector("monster-host");
@@ -1068,7 +1072,7 @@ function initFromConfig() {
host
.getConfig(configKey)
.then((config) => {
- if (config && isObject(config)) {
+ if ((config && isObject(config)) || isArray(config)) {
this[settingsSymbol].setOptions(config);
}
resolve();
diff --git a/source/components/datatable/style/filter.pcss b/source/components/datatable/style/filter.pcss
index 18c425630cbd16b29de727439d862ea021bfe1da..6478fff327fc7d70e4ef846fb271ab5dcbf75b43 100644
--- a/source/components/datatable/style/filter.pcss
+++ b/source/components/datatable/style/filter.pcss
@@ -13,7 +13,6 @@
width: 100%;
}
-
[data-monster-role=control] {
& .hidden {
@@ -33,7 +32,7 @@
align-items: flex-end;
display: flex;
- justify-content: space-between;
+ justify-content: flex-start;
width: 100%;
flex-direction: column;
@@ -44,7 +43,7 @@
width: 100%;
column-gap: 1rem;
row-gap: 0.5rem;
- justify-content: space-between;
+ justify-content: flex-start;
& ::slotted(label) {
diff --git a/source/components/datatable/stylesheet/filter.mjs b/source/components/datatable/stylesheet/filter.mjs
index 1b128a0871289a0905d1213eb2904245a7029e77..1497a73c9c5d15db3424eeb0cef7e0f769cb1b84 100644
--- a/source/components/datatable/stylesheet/filter.mjs
+++ b/source/components/datatable/stylesheet/filter.mjs
@@ -20,7 +20,7 @@ const FilterStyleSheet = new CSSStyleSheet();
try {
FilterStyleSheet.insertRule(`
@layer filter {
-:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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)}}a,a:active,a:focus,a:hover,a:link,a:visited{background-image:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0 3px;color:var(--monster-color-primary-1);outline:none;text-decoration:none;transition:background-size .4s}a:active,a:focus,a:hover{background:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));-webkit-background-clip:text;background-clip:text;color:transparent;outline:none}a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}:host{width:100%}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{height:100%;width:100%}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;flex-direction:column;justify-content:space-between;width:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%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] [data-monster-role=layout] [data-monster-role=filter]{align-items:stretch;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:.5rem;width:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter] ::slotted(label){align-items:stretch;border-bottom:var(--monster-border-width) solid var(--monster-border-color);display:flex;flex-direction:column;gap:.1rem;min-width:15em;padding:2px}[data-monster-role=control] [data-monster-role=layout] [name=hidden]{display:none}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search]{align-items:stretch;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row-reverse nowrap;margin-top:1rem;place-content:center flex-end;row-gap:1.5rem}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-button{display:flex}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(control){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(button-button){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(button-control){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-select{min-width:350px}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] [data-monster-visible=false]{display:none}@media (max-width:1200px){[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search]{-moz-column-gap:0;column-gap:0;flex-flow:column nowrap;row-gap:.5rem}}@media (max-width:768px){[data-monster-role=control] [data-monster-role=layout]{-moz-column-gap:0;column-gap:0;flex-flow:column nowrap;row-gap:.5rem}[data-monster-role=control] [data-monster-role=layout] monster-select{width:100%}}@media (max-width:480px){[data-monster-role=control] [data-monster-role=layout]{-moz-column-gap:0;column-gap:0;display:contents;flex-flow:column nowrap;row-gap:.5rem}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter]{display:contents}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter] ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-select{min-width:-moz-fit-content;min-width:fit-content;width:100%}}
+:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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)}}a,a:active,a:focus,a:hover,a:link,a:visited{background-image:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0 3px;color:var(--monster-color-primary-1);outline:none;text-decoration:none;transition:background-size .4s}a:active,a:focus,a:hover{background:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));-webkit-background-clip:text;background-clip:text;color:transparent;outline:none}a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}:host{width:100%}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{height:100%;width:100%}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;flex-direction:column;justify-content:flex-start;width:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%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] [data-monster-role=layout] [data-monster-role=filter]{align-items:stretch;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:.5rem;width:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter] ::slotted(label){align-items:stretch;border-bottom:var(--monster-border-width) solid var(--monster-border-color);display:flex;flex-direction:column;gap:.1rem;min-width:15em;padding:2px}[data-monster-role=control] [data-monster-role=layout] [name=hidden]{display:none}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search]{align-items:stretch;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row-reverse nowrap;margin-top:1rem;place-content:center flex-end;row-gap:1.5rem}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-button{display:flex}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(control){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(button-button){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] .stretched-control ::part(button-control){height:100%}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-select{min-width:350px}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] [data-monster-visible=false]{display:none}@media (max-width:1200px){[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search]{-moz-column-gap:0;column-gap:0;flex-flow:column nowrap;row-gap:.5rem}}@media (max-width:768px){[data-monster-role=control] [data-monster-role=layout]{-moz-column-gap:0;column-gap:0;flex-flow:column nowrap;row-gap:.5rem}[data-monster-role=control] [data-monster-role=layout] monster-select{width:100%}}@media (max-width:480px){[data-monster-role=control] [data-monster-role=layout]{-moz-column-gap:0;column-gap:0;display:contents;flex-flow:column nowrap;row-gap:.5rem}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter]{display:contents}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=filter] ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}[data-monster-role=control] [data-monster-role=layout] [data-monster-role=select-and-search] monster-select{min-width:-moz-fit-content;min-width:fit-content;width:100%}}
}`, 0);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
diff --git a/source/components/form/button-bar.mjs b/source/components/form/button-bar.mjs
index 0ad939315120fdbb5ef4f4603abbca49cd61e643..4443bf7dfe1e8e348400039353868fdb1f08b8f0 100644
--- a/source/components/form/button-bar.mjs
+++ b/source/components/form/button-bar.mjs
@@ -4,34 +4,37 @@
* This file is licensed under the AGPLv3 License.
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
import {
- addAttributeToken,
- removeAttributeToken,
+ addAttributeToken,
+ removeAttributeToken,
} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
import {
- assembleMethodSymbol,
- getSlottedElements,
- registerCustomElement,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+ assembleMethodSymbol,
+ getSlottedElements,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
import {
- CustomElement,
- attributeObserverSymbol,
+ CustomElement,
+ attributeObserverSymbol,
} from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {ID} from "../../types/id.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {Processing} from "../../util/processing.mjs";
-import {STYLE_DISPLAY_MODE_BLOCK} from "./constants.mjs";
-import {ButtonBarStyleSheet} from "./stylesheet/button-bar.mjs";
-import {positionPopper} from "./util/floating-ui.mjs";
-import {convertToPixels} from "../../dom/dimension.mjs";
-
-export {ButtonBar};
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { Processing } from "../../util/processing.mjs";
+import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
+import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
+import { positionPopper } from "./util/floating-ui.mjs";
+import { convertToPixels } from "../../dom/dimension.mjs";
+
+export { ButtonBar };
/**
* @private
@@ -148,154 +151,154 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
* @fires Monster.Components.Form.event:monster-fetched
*/
class ButtonBar extends CustomElement {
- /**
- * This method is called by the `instanceof` operator.
- * @returns {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/form/button-bar@@instance");
- }
-
- /**
- * To set the options via the html tag the attribute `data-monster-options` must be used.
- * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
- *
- * The individual configuration values can be found in the table.
- *
- * @property {Object} templates Template definitions
- * @property {string} templates.main Main template
- * @property {Object} labels
- * @property {Object} popper FloatingUI popper configuration
- * @property {string} popper.placement=top Placement of the popper
- * @property {number} popper.middleware [middlerware](https://floating-ui.js.org/docs/middleware) to be used
- */
- get defaults() {
- const obj = Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
- labels: {},
- popper: {
- placement: "bottom",
- },
- });
-
- initDefaultsFromAttributes.call(this, obj);
-
- return obj;
- }
-
- /**
- * This method is called internal and should not be called directly.
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
-
- this[dimensionsSymbol] = new Pathfinder({data: {}});
-
- initControlReferences.call(this);
- initEventHandler.call(this);
-
- // setup structure
- initButtonBar.call(this).then(() => {
- initPopperSwitch.call(this);
- });
- }
-
- /**
- * This method is called internal and should not be called directly.
- *
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [ButtonBarStyleSheet];
- }
-
- /**
- * This method is called internal and should not be called directly.
- *
- * @return {string}
- */
- static getTag() {
- return "monster-button-bar";
- }
-
- /**
- * This method is called by the dom and should not be called directly.
- *
- * @return {void}
- */
- connectedCallback() {
- super.connectedCallback();
-
- const document = getDocument();
-
- for (const [, type] of Object.entries(["click", "touch"])) {
- // close on outside ui-events
- document.addEventListener(type, this[closeEventHandler]);
- }
-
- setTimeout(() => {
- updatePopper.call(this);
- updateResizeObserverObservation.call(this);
- }, 0);
- }
-
- /**
- * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
- *
- * @return {string[]}
- */
- static get observedAttributes() {
- const attributes = super.observedAttributes;
- attributes.push(ATTRIBUTE_POPPER_POSITION);
- return attributes;
- }
-
- /**
- * This method is called by the dom and should not be called directly.
- *
- * @return {void}
- */
- disconnectedCallback() {
- super.disconnectedCallback();
-
- const document = getDocument();
-
- // close on outside ui-events
- for (const [, type] of Object.entries(["click", "touch"])) {
- document.removeEventListener(type, this[closeEventHandler]);
- }
-
- disconnectResizeObserver.call(this);
- }
-
- /**
- * Close the slotted dialog.
- * @return {ButtonBar}
- */
- hideDialog() {
- hide.call(this);
- return this;
- }
-
- /**
- * Open the slotted dialog.
- * @return {ButtonBar}
- */
- showDialog() {
- show.call(this);
- return this;
- }
-
- /**
- * Toggle the slotted dialog.
- * @return {ButtonBar}
- */
- toggleDialog() {
- toggle.call(this);
- return this;
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/form/button-bar@@instance");
+ }
+
+ /**
+ * To set the options via the html tag the attribute `data-monster-options` must be used.
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+ *
+ * The individual configuration values can be found in the table.
+ *
+ * @property {Object} templates Template definitions
+ * @property {string} templates.main Main template
+ * @property {Object} labels
+ * @property {Object} popper FloatingUI popper configuration
+ * @property {string} popper.placement=top Placement of the popper
+ * @property {number} popper.middleware [middlerware](https://floating-ui.js.org/docs/middleware) to be used
+ */
+ get defaults() {
+ const obj = Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ labels: {},
+ popper: {
+ placement: "bottom",
+ },
+ });
+
+ initDefaultsFromAttributes.call(this, obj);
+
+ return obj;
+ }
+
+ /**
+ * This method is called internal and should not be called directly.
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+
+ this[dimensionsSymbol] = new Pathfinder({ data: {} });
+
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+
+ // setup structure
+ initButtonBar.call(this).then(() => {
+ initPopperSwitch.call(this);
+ });
+ }
+
+ /**
+ * This method is called internal and should not be called directly.
+ *
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [ButtonBarStyleSheet];
+ }
+
+ /**
+ * This method is called internal and should not be called directly.
+ *
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-button-bar";
+ }
+
+ /**
+ * This method is called by the dom and should not be called directly.
+ *
+ * @return {void}
+ */
+ connectedCallback() {
+ super.connectedCallback();
+
+ const document = getDocument();
+
+ for (const [, type] of Object.entries(["click", "touch"])) {
+ // close on outside ui-events
+ document.addEventListener(type, this[closeEventHandler]);
+ }
+
+ setTimeout(() => {
+ updatePopper.call(this);
+ updateResizeObserverObservation.call(this);
+ }, 0);
+ }
+
+ /**
+ * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+ *
+ * @return {string[]}
+ */
+ static get observedAttributes() {
+ const attributes = super.observedAttributes;
+ attributes.push(ATTRIBUTE_POPPER_POSITION);
+ return attributes;
+ }
+
+ /**
+ * This method is called by the dom and should not be called directly.
+ *
+ * @return {void}
+ */
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ const document = getDocument();
+
+ // close on outside ui-events
+ for (const [, type] of Object.entries(["click", "touch"])) {
+ document.removeEventListener(type, this[closeEventHandler]);
+ }
+
+ disconnectResizeObserver.call(this);
+ }
+
+ /**
+ * Close the slotted dialog.
+ * @return {ButtonBar}
+ */
+ hideDialog() {
+ hide.call(this);
+ return this;
+ }
+
+ /**
+ * Open the slotted dialog.
+ * @return {ButtonBar}
+ */
+ showDialog() {
+ show.call(this);
+ return this;
+ }
+
+ /**
+ * Toggle the slotted dialog.
+ * @return {ButtonBar}
+ */
+ toggleDialog() {
+ toggle.call(this);
+ return this;
+ }
}
/**
@@ -304,88 +307,88 @@ class ButtonBar extends CustomElement {
* @returns {*}
*/
function initDefaultsFromAttributes(obj) {
- if (this.hasAttribute(ATTRIBUTE_POPPER_POSITION)) {
- obj.popper.placement = this.getAttribute(ATTRIBUTE_POPPER_POSITION);
- }
+ if (this.hasAttribute(ATTRIBUTE_POPPER_POSITION)) {
+ obj.popper.placement = this.getAttribute(ATTRIBUTE_POPPER_POSITION);
+ }
- return obj;
+ return obj;
}
/**
* @private
*/
function initEventHandler() {
- const self = this;
- /**
- * @param {Event} event
- */
- self[closeEventHandler] = (event) => {
- const path = event.composedPath();
-
- for (const [, element] of Object.entries(path)) {
- if (element === self) {
- return;
- }
- }
-
- hide.call(self);
- };
-
- if (self[buttonBarSlotElementSymbol]) {
- self[buttonBarSlotElementSymbol].addEventListener("slotchange", (event) => {
- checkAndRearrangeButtons.call(self);
- });
- }
-
- if (self[popperElementSymbol]) {
- self[popperElementSymbol].addEventListener("slotchange", (event) => {
- checkAndRearrangeButtons.call(self);
- });
- }
-
- // data-monster-options
- self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
- self.setOption("classes.button", value);
- };
-
- self[resizeObserverSymbol] = new ResizeObserver((entries) => {
- if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
- try {
- self[timerCallbackSymbol].touch();
- return;
- } catch (e) {
- // catch Error("has already run");
- if (e.message !== "has already run") {
- throw e;
- }
- delete self[timerCallbackSymbol];
- }
- }
-
- self[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
- setTimeout(() => {
- updatePopper.call(self);
- self[dimensionsSymbol].setVia("data.calculated", false);
- checkAndRearrangeButtons.call(self);
- }, 50);
- });
- });
-
- initSlotChangedHandler.call(self);
+ const self = this;
+ /**
+ * @param {Event} event
+ */
+ self[closeEventHandler] = (event) => {
+ const path = event.composedPath();
+
+ for (const [, element] of Object.entries(path)) {
+ if (element === self) {
+ return;
+ }
+ }
+
+ hide.call(self);
+ };
+
+ if (self[buttonBarSlotElementSymbol]) {
+ self[buttonBarSlotElementSymbol].addEventListener("slotchange", (event) => {
+ checkAndRearrangeButtons.call(self);
+ });
+ }
+
+ if (self[popperElementSymbol]) {
+ self[popperElementSymbol].addEventListener("slotchange", (event) => {
+ checkAndRearrangeButtons.call(self);
+ });
+ }
+
+ // data-monster-options
+ self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
+ self.setOption("classes.button", value);
+ };
+
+ self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+ if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
+ try {
+ self[timerCallbackSymbol].touch();
+ return;
+ } catch (e) {
+ // catch Error("has already run");
+ if (e.message !== "has already run") {
+ throw e;
+ }
+ delete self[timerCallbackSymbol];
+ }
+ }
+
+ self[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+ setTimeout(() => {
+ updatePopper.call(self);
+ self[dimensionsSymbol].setVia("data.calculated", false);
+ checkAndRearrangeButtons.call(self);
+ }, 50);
+ });
+ });
+
+ initSlotChangedHandler.call(self);
}
function initSlotChangedHandler() {
- this[buttonBarElementSymbol].addEventListener("slotchange", () => {
- updateResizeObserverObservation.call(this);
- });
+ this[buttonBarElementSymbol].addEventListener("slotchange", () => {
+ updateResizeObserverObservation.call(this);
+ });
}
function checkAndRearrangeButtons() {
- if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
- calculateButtonBarDimensions.call(this);
- }
+ if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
+ calculateButtonBarDimensions.call(this);
+ }
- rearrangeButtons.call(this);
+ rearrangeButtons.call(this);
}
/**
@@ -393,58 +396,57 @@ function checkAndRearrangeButtons() {
* @return {Object}
*/
function rearrangeButtons() {
+ let sum = this[switchElementSymbol].offsetWidth;
+ const space = this[dimensionsSymbol].getVia("data.space");
+
+ const buttonReferences = this[dimensionsSymbol].getVia(
+ "data.buttonReferences",
+ );
+
+ for (const ref of buttonReferences) {
+ sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+ let elements = getSlottedElements.call(
+ this,
+ '[data-monster-reference="' + ref + '"]',
+ null,
+ ); // null ↦ o
+ if (elements.size === 0) {
+ elements = getSlottedElements.call(
+ this,
+ '[data-monster-reference="' + ref + '"]',
+ "popper",
+ ); // null ↦ o
+ }
+
+ const nextValue = elements.values().next();
+ if (!nextValue) {
+ continue;
+ }
+
+ const element = nextValue?.value;
+ if (!(element instanceof HTMLElement)) {
+ continue;
+ }
+
+ const buttonLabel = element.innerText;
+
+ if (sum > space) {
+ element.setAttribute("slot", "popper");
+ } else {
+ element.removeAttribute("slot");
+ }
+ }
- let sum = this[switchElementSymbol].offsetWidth;
- const space = this[dimensionsSymbol].getVia("data.space");
-
- const buttonReferences = this[dimensionsSymbol].getVia(
- "data.buttonReferences",
- );
-
- for (const ref of buttonReferences) {
- sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
-
- let elements = getSlottedElements.call(
- this,
- '[data-monster-reference="' + ref + '"]',
- null,
- ); // null ↦ o
- if (elements.size === 0) {
- elements = getSlottedElements.call(
- this,
- '[data-monster-reference="' + ref + '"]',
- "popper",
- ); // null ↦ o
- }
-
- const nextValue = elements.values().next();
- if (!nextValue) {
- continue;
- }
-
- const element = nextValue?.value;
- if (!(element instanceof HTMLElement)) {
- continue;
- }
-
- const buttonLabel = element.innerText;
-
- if (sum > space) {
- element.setAttribute("slot", "popper");
- } else {
- element.removeAttribute("slot");
- }
- }
-
- const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
- if (inVisibleButtons.size > 0) {
- this[switchElementSymbol].classList.remove("hidden");
- } else {
- this[switchElementSymbol].classList.add("hidden");
- setTimeout(() => {
- hide.call(this);
- }, 1);
- }
+ const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
+ if (inVisibleButtons.size > 0) {
+ this[switchElementSymbol].classList.remove("hidden");
+ } else {
+ this[switchElementSymbol].classList.add("hidden");
+ setTimeout(() => {
+ hide.call(this);
+ }, 1);
+ }
}
/**
@@ -453,22 +455,22 @@ function rearrangeButtons() {
* @return {number}
*/
function calcBoxWidth(node) {
- const dim = getGlobal()?.getComputedStyle(node);
+ const dim = getGlobal()?.getComputedStyle(node);
if (dim === null) {
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
- throw new Error("no computed style");
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
+ throw new Error("no computed style");
}
- const bounding = node.getBoundingClientRect();
-
- return (
- convertToPixels(dim["border-left-width"]) +
- convertToPixels(dim["padding-left"]) +
- convertToPixels(dim["margin-left"]) +
- bounding["width"] +
- convertToPixels(dim["border-right-width"]) +
- convertToPixels(dim["margin-right"]) +
- convertToPixels(dim["padding-left"])
- );
+ const bounding = node.getBoundingClientRect();
+
+ return (
+ convertToPixels(dim["border-left-width"]) +
+ convertToPixels(dim["padding-left"]) +
+ convertToPixels(dim["margin-left"]) +
+ bounding["width"] +
+ convertToPixels(dim["border-right-width"]) +
+ convertToPixels(dim["margin-right"]) +
+ convertToPixels(dim["padding-left"])
+ );
}
/**
@@ -476,112 +478,112 @@ function calcBoxWidth(node) {
* @return {Object}
*/
function calculateButtonBarDimensions() {
- const computedStyle = getComputedStyle(this.parentElement);
- if (computedStyle === null) {
- throw new Error("no computed style");
- }
-
- let width = this.parentElement.clientWidth;
- if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
- width = computedStyle.getPropertyValue("width");
- this[dimensionsSymbol].setVia("data.space", convertToPixels(width));
- } else {
- let borderWidth = getComputedStyle(this).getPropertyValue(
- "--monster-border-width",
- );
- if (borderWidth === null || borderWidth === "") {
- borderWidth = "0px";
- }
-
- const borderWidthWithoutUnit = convertToPixels(borderWidth);
-
- // space to be allocated
- this[dimensionsSymbol].setVia(
- "data.space",
- width - 2 * borderWidthWithoutUnit,
- );
- }
-
- this[dimensionsSymbol].setVia("data.visible", !(width === 0));
-
- const buttonReferences = [];
-
- const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
-
- for (const [, button] of visibleButtons.entries()) {
- if (!button.hasAttribute("data-monster-reference")) {
- button.setAttribute("data-monster-reference", new ID("vb").toString());
- }
-
- const ref = button.getAttribute("data-monster-reference");
- if (ref === null) continue;
-
- buttonReferences.push(ref);
- this[dimensionsSymbol].setVia(
- `data.button.${ref}`,
- calcBoxWidth.call(this, button),
- );
- }
-
- const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
- for (const [, button] of invisibleButtons.entries()) {
- if (!button.hasAttribute("data-monster-reference")) {
- button.setAttribute("data-monster-reference", new ID("ib").toString());
- }
-
- const ref = button.getAttribute("data-monster-reference");
- if (ref === null) continue;
-
- if (ref.indexOf("ib") !== 0) {
- buttonReferences.push(ref);
- }
- }
-
- this[dimensionsSymbol].setVia("data.calculated", true);
- this[dimensionsSymbol].setVia("data.buttonReferences", buttonReferences);
+ const computedStyle = getComputedStyle(this.parentElement);
+ if (computedStyle === null) {
+ throw new Error("no computed style");
+ }
+
+ let width = this.parentElement.clientWidth;
+ if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
+ width = computedStyle.getPropertyValue("width");
+ this[dimensionsSymbol].setVia("data.space", convertToPixels(width));
+ } else {
+ let borderWidth = getComputedStyle(this).getPropertyValue(
+ "--monster-border-width",
+ );
+ if (borderWidth === null || borderWidth === "") {
+ borderWidth = "0px";
+ }
+
+ const borderWidthWithoutUnit = convertToPixels(borderWidth);
+
+ // space to be allocated
+ this[dimensionsSymbol].setVia(
+ "data.space",
+ width - 2 * borderWidthWithoutUnit,
+ );
+ }
+
+ this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+
+ const buttonReferences = [];
+
+ const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
+
+ for (const [, button] of visibleButtons.entries()) {
+ if (!button.hasAttribute("data-monster-reference")) {
+ button.setAttribute("data-monster-reference", new ID("vb").toString());
+ }
+
+ const ref = button.getAttribute("data-monster-reference");
+ if (ref === null) continue;
+
+ buttonReferences.push(ref);
+ this[dimensionsSymbol].setVia(
+ `data.button.${ref}`,
+ calcBoxWidth.call(this, button),
+ );
+ }
+
+ const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
+ for (const [, button] of invisibleButtons.entries()) {
+ if (!button.hasAttribute("data-monster-reference")) {
+ button.setAttribute("data-monster-reference", new ID("ib").toString());
+ }
+
+ const ref = button.getAttribute("data-monster-reference");
+ if (ref === null) continue;
+
+ if (ref.indexOf("ib") !== 0) {
+ buttonReferences.push(ref);
+ }
+ }
+
+ this[dimensionsSymbol].setVia("data.calculated", true);
+ this[dimensionsSymbol].setVia("data.buttonReferences", buttonReferences);
}
/**
* @private
*/
function updateResizeObserverObservation() {
- this[resizeObserverSymbol].disconnect();
+ this[resizeObserverSymbol].disconnect();
- const slottedNodes = getSlottedElements.call(this);
- slottedNodes.forEach((node) => {
- this[resizeObserverSymbol].observe(node);
- });
+ const slottedNodes = getSlottedElements.call(this);
+ slottedNodes.forEach((node) => {
+ this[resizeObserverSymbol].observe(node);
+ });
- if (this.parentElement === null) return;
- this[resizeObserverSymbol].observe(this.parentElement);
+ if (this.parentElement === null) return;
+ this[resizeObserverSymbol].observe(this.parentElement);
}
/**
* @private
*/
function disconnectResizeObserver() {
- if (this[resizeObserverSymbol] instanceof ResizeObserver) {
- this[resizeObserverSymbol].disconnect();
- }
+ if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+ this[resizeObserverSymbol].disconnect();
+ }
}
/**
* @private
*/
function toggle() {
- if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
- hide.call(this);
- } else {
- show.call(this);
- }
+ if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+ hide.call(this);
+ } else {
+ show.call(this);
+ }
}
/**
* @private
*/
function hide() {
- this[popperElementSymbol].style.display = "none";
- removeAttributeToken(this[controlElementSymbol], "class", "open");
+ this[popperElementSymbol].style.display = "none";
+ removeAttributeToken(this[controlElementSymbol], "class", "open");
}
/**
@@ -589,40 +591,40 @@ function hide() {
* @this PopperButton
*/
function show() {
- if (this.getOption("disabled", false) === true) {
- return;
- }
+ if (this.getOption("disabled", false) === true) {
+ return;
+ }
- if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
- return;
- }
+ if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+ return;
+ }
- this[popperElementSymbol].style.visibility = "hidden";
- this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+ this[popperElementSymbol].style.visibility = "hidden";
+ this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
- addAttributeToken(this[controlElementSymbol], "class", "open");
+ addAttributeToken(this[controlElementSymbol], "class", "open");
- updatePopper.call(this);
+ updatePopper.call(this);
}
/**
* @private
*/
function updatePopper() {
- if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
- return;
- }
-
- if (this.getOption("disabled", false) === true) {
- return;
- }
-
- positionPopper.call(
- this,
- this[switchElementSymbol],
- this[popperElementSymbol],
- this.getOption("popper", {}),
- );
+ if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+ return;
+ }
+
+ if (this.getOption("disabled", false) === true) {
+ return;
+ }
+
+ positionPopper.call(
+ this,
+ this[switchElementSymbol],
+ this[popperElementSymbol],
+ this.getOption("popper", {}),
+ );
}
/**
@@ -631,34 +633,34 @@ function updatePopper() {
* @throws {Error} no shadow-root is defined
*/
function initControlReferences() {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- this[controlElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=control]`,
- );
- this[buttonBarElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=button-bar]`,
- );
- this[popperElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=popper]`,
- );
- this[popperNavElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=popper-nav]`,
- );
- this[switchElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=switch]`,
- );
-
- this[buttonBarSlotElementSymbol] = null;
- if (this[buttonBarElementSymbol])
- this[buttonBarSlotElementSymbol] =
- this[buttonBarElementSymbol].querySelector(`slot`);
- this[popperSlotElementSymbol] = null;
- if (this[popperElementSymbol])
- this[popperSlotElementSymbol] =
- this[popperElementSymbol].querySelector(`slot`);
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=control]`,
+ );
+ this[buttonBarElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=button-bar]`,
+ );
+ this[popperElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=popper]`,
+ );
+ this[popperNavElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=popper-nav]`,
+ );
+ this[switchElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=switch]`,
+ );
+
+ this[buttonBarSlotElementSymbol] = null;
+ if (this[buttonBarElementSymbol])
+ this[buttonBarSlotElementSymbol] =
+ this[buttonBarElementSymbol].querySelector(`slot`);
+ this[popperSlotElementSymbol] = null;
+ if (this[popperElementSymbol])
+ this[popperSlotElementSymbol] =
+ this[popperElementSymbol].querySelector(`slot`);
}
/**
@@ -668,36 +670,36 @@ function initControlReferences() {
*
*/
function initButtonBar() {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
- return new Processing(() => {
- checkAndRearrangeButtons.call(this);
- }).run();
+ return new Processing(() => {
+ checkAndRearrangeButtons.call(this);
+ }).run();
}
/**
* @private
*/
function initPopperSwitch() {
- /**
- * @param {Event} event
- */
- this[popperSwitchEventHandler] = (event) => {
- const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
-
- if (element instanceof HTMLButtonElement) {
- toggle.call(this);
- }
- };
-
- for (const type of ["click", "touch"]) {
- this[switchElementSymbol].addEventListener(
- type,
- this[popperSwitchEventHandler],
- );
- }
+ /**
+ * @param {Event} event
+ */
+ this[popperSwitchEventHandler] = (event) => {
+ const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
+
+ if (element instanceof HTMLButtonElement) {
+ toggle.call(this);
+ }
+ };
+
+ for (const type of ["click", "touch"]) {
+ this[switchElementSymbol].addEventListener(
+ type,
+ this[popperSwitchEventHandler],
+ );
+ }
}
/**
@@ -705,8 +707,8 @@ function initPopperSwitch() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
<div data-monster-role="button-bar">
<slot></slot>
diff --git a/source/components/form/toggle-switch.mjs b/source/components/form/toggle-switch.mjs
index 6f4811a6076e5ea2e1b98eb656451105e3c3e5f4..8c6da98f7d7203454a896e6d61add09f863b744e 100644
--- a/source/components/form/toggle-switch.mjs
+++ b/source/components/form/toggle-switch.mjs
@@ -335,7 +335,7 @@ function toggleClassOff() {
/**
* @private
*/
-function toggleClass() {;
+function toggleClass() {
if (this.getOption("value") === this.getOption("values.on")) {
toggleClassOn.call(this);
} else {
@@ -346,7 +346,7 @@ function toggleClass() {;
/**
* @private
*/
-function toggleValues() {;
+function toggleValues() {
if (this.getOption("disabled") === true) {
return;
@@ -366,7 +366,7 @@ function toggleValues() {;
/**
* @private
*/
-function validateAndSetValue() {;
+function validateAndSetValue() {
const value = this.getOption("value");
const validatedValues = [];
diff --git a/source/dom/events.mjs b/source/dom/events.mjs
index 098a32f0b10d4ac1e84cfbac418f69852ad5911a..2c1ac85a8901aadade91b885607cd0037de43ac6 100644
--- a/source/dom/events.mjs
+++ b/source/dom/events.mjs
@@ -67,7 +67,6 @@ function fireEvent(element, type) {
* @summary Construct and send and event
*/
function fireCustomEvent(element, type, detail) {
-
if (element instanceof HTMLElement) {
if (!isObject(detail)) {
detail = { detail };
diff --git a/source/monster.mjs b/source/monster.mjs
index 86a2bb9f479d037005d7a2ff88056dbebc665d3e..d312e88da10aca13852dd835f8d556ff3914b3cc 100644
--- a/source/monster.mjs
+++ b/source/monster.mjs
@@ -1,4 +1,3 @@
-
/**
* Copyright schukai GmbH and contributors 2023. All Rights Reserved.
* Node module: @schukai/monster
diff --git a/source/util/freeze.mjs b/source/util/freeze.mjs
index d1162658689f66d03614dedbe999cfd5147fa821..d691f48360f750264b3cf96f13303971758647fd 100644
--- a/source/util/freeze.mjs
+++ b/source/util/freeze.mjs
@@ -24,7 +24,7 @@ function deepFreeze(object) {
validateObject(object);
// Retrieve the defined property names of the object
- var propNames = Object.getOwnPropertyNames(object);
+ let propNames = Object.getOwnPropertyNames(object);
// Freeze properties before freezing yourself
for (const name of propNames) {