diff --git a/development/issues/closed/318.html b/development/issues/closed/318.html
new file mode 100644
index 0000000000000000000000000000000000000000..357cb1c10cc8e6d244169ab63a53b698f0afb829
--- /dev/null
+++ b/development/issues/closed/318.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <title>layout problems with split panel #318</title>
+ <script src="./318.mjs" type="module"></script>
+
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ overflow: hidden;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ /* Optional: alle Elemente im Box-Modell einheitlich behandeln */
+ *, *::before, *::after {
+ box-sizing: inherit;
+ }
+
+ monster-split-panel {
+ height: 100%;
+ width: 100%;
+ }
+
+ </style>
+
+</head>
+<body>
+
+<div style="display: none">
+ <h1>layout problems with split panel #318</h1>
+ <p></p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318">Issue #318</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+
+</div>
+
+<monster-panel id="p1">
+ <monster-split-panel>
+ <monster-panel id="p2">
+ <div>Panel 1</div>
+ </monster-panel>
+ <monster-panel id="p3">
+ <div>Panel 5</div>
+ </monster-panel>
+ </monster-split-panel>
+</monster-panel>
+
+
+</body>
+</html>
diff --git a/development/issues/closed/318.mjs b/development/issues/closed/318.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..c9e7ea07ec5219b4c287958a2f990cfb9d216761
--- /dev/null
+++ b/development/issues/closed/318.mjs
@@ -0,0 +1,16 @@
+/**
+* @file development/issues/open/318.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318
+* @description layout problems with split panel
+* @issue 318
+*/
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/layout/split-panel.mjs";
+import "../../../source/components/layout/panel.mjs";
+
diff --git a/source/components/content/camera-capture.mjs b/source/components/content/camera-capture.mjs
index 835450a383a39d8e40143f008306ba3b9835d062..174f277d2e777ab4ec38b74a6d4982c48c22fc11 100644
--- a/source/components/content/camera-capture.mjs
+++ b/source/components/content/camera-capture.mjs
@@ -12,24 +12,24 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
-import {CustomElement} from "../../dom/customelement.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
+ assembleMethodSymbol,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import {CameraCaptureStyleSheet} from "./stylesheet/camera-capture.mjs";
+import { CameraCaptureStyleSheet } from "./stylesheet/camera-capture.mjs";
import "../form/button.mjs";
import "../state/state.mjs";
-import {getLocaleOfDocument} from "../../dom/locale.mjs";
-import {addErrorAttribute} from "../../dom/error.mjs";
-import {Queue} from "../../types/queue.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Queue } from "../../types/queue.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
import "../layout/full-screen.mjs";
-export {CameraCapture};
+export { CameraCapture };
/**
* @private
@@ -80,334 +80,332 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
* @fires monster-camera-capture-captured
*/
class CameraCapture extends CustomElement {
- /**
- * Constructor for the CameraCapture class.
- * Calls the parent class constructor.
- */
- constructor() {
- super();
-
- this[queueSymbol] = new Queue();
- }
-
- /**
- * This method is called by the `instanceof` operator.
- * @return {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for(
- "@schukai/monster/components/content/camera-capture@instance",
- );
- }
-
- /**
- *
- * @return {Components.Content.Copy
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
- initControlReferences.call(this);
- initEventHandler.call(this);
- initCameraControl.call(this);
- return this;
- }
-
- /**
- * 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} actions Callbacks
- * @property {string} actions.click="throw Error" Callback when clicked
- * @property {Object} features Features
- * @property {boolean} features.stripTags=true Strip tags from the copied text
- * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
- * @property {Object} popper Popper configuration
- * @property {string} popper.placement="top" Popper placement
- * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
- * @property {boolean} disabled=false Disabled state
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
-
- disabled: false,
- features: {},
-
- labels: getTranslations(),
- });
- }
-
- /**
- * @return {string}
- */
- static getTag() {
- return "monster-camera-capture";
- }
-
- /**
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [CameraCaptureStyleSheet];
- }
-
- /**
- * Retrieve the next image from the queue.
- * If the queue is empty, it returns `null`.
- * @returns {string|null}
- */
- getNextImage() {
- if (!this[queueSymbol].isEmpty()) {
- const next = this[queueSymbol].poll();
- if (!next) {
- return null;
- }
- return next;
- }
- return null;
- }
-
- /**
- * Capture an image from the camera and add it to the queue.
- * The image is returned as a data URL.
- * @returns {string}
- */
- capture() {
- this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
- this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
- const ctx = this[canvasElementSymbol].getContext("2d");
- ctx.drawImage(
- this[videoElementSymbol],
- 0,
- 0,
- this[canvasElementSymbol].width,
- this[canvasElementSymbol].height,
- );
- const dataURL = this[canvasElementSymbol].toDataURL("image/png");
- this[queueSymbol].add(dataURL);
- return dataURL;
- }
+ /**
+ * Constructor for the CameraCapture class.
+ * Calls the parent class constructor.
+ */
+ constructor() {
+ super();
+
+ this[queueSymbol] = new Queue();
+ }
+
+ /**
+ * This method is called by the `instanceof` operator.
+ * @return {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for(
+ "@schukai/monster/components/content/camera-capture@instance",
+ );
+ }
+
+ /**
+ *
+ * @return {Components.Content.Copy
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ initCameraControl.call(this);
+ return this;
+ }
+
+ /**
+ * 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} actions Callbacks
+ * @property {string} actions.click="throw Error" Callback when clicked
+ * @property {Object} features Features
+ * @property {boolean} features.stripTags=true Strip tags from the copied text
+ * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
+ * @property {Object} popper Popper configuration
+ * @property {string} popper.placement="top" Popper placement
+ * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+ * @property {boolean} disabled=false Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+
+ disabled: false,
+ features: {},
+
+ labels: getTranslations(),
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-camera-capture";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [CameraCaptureStyleSheet];
+ }
+
+ /**
+ * Retrieve the next image from the queue.
+ * If the queue is empty, it returns `null`.
+ * @returns {string|null}
+ */
+ getNextImage() {
+ if (!this[queueSymbol].isEmpty()) {
+ const next = this[queueSymbol].poll();
+ if (!next) {
+ return null;
+ }
+ return next;
+ }
+ return null;
+ }
+
+ /**
+ * Capture an image from the camera and add it to the queue.
+ * The image is returned as a data URL.
+ * @returns {string}
+ */
+ capture() {
+ this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
+ this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
+ const ctx = this[canvasElementSymbol].getContext("2d");
+ ctx.drawImage(
+ this[videoElementSymbol],
+ 0,
+ 0,
+ this[canvasElementSymbol].width,
+ this[canvasElementSymbol].height,
+ );
+ const dataURL = this[canvasElementSymbol].toDataURL("image/png");
+ this[queueSymbol].add(dataURL);
+ return dataURL;
+ }
}
/**
* @private
*/
function initCameraControl() {
- const self = this;
-
- if (
- !navigator ||
- !navigator.mediaDevices ||
- !navigator.mediaDevices.getUserMedia
- ) {
- addErrorAttribute(self, "Browser not supported");
- return;
- }
-
- navigator.mediaDevices.enumerateDevices().then((devices) => {
- const cameras = devices.filter((device) => device.kind === "videoinput");
-
- if (cameras.length === 0) {
- addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
- return;
- }
-
- // Nur Dropdown anzeigen, wenn mehr als 1 Kamera vorhanden
- if (cameras.length > 1) {
- const select = document.createElement("select");
- select.setAttribute("data-monster-role", "cameraSelector");
- select.style.marginBottom = "0.5rem";
-
- cameras.forEach((camera, index) => {
- const option = document.createElement("option");
- option.value = camera.deviceId;
- option.text = camera.label || `Kamera ${index + 1}`;
- select.appendChild(option);
- });
-
- select.addEventListener("change", () => {
- startCameraWithDeviceId.call(self, select.value);
- });
-
- // Vor dem Video-Element einfügen
- self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
- }
-
- // Mit der ersten Kamera starten
- startCameraWithDeviceId.call(self, cameras[0].deviceId);
- });
+ const self = this;
+
+ if (
+ !navigator ||
+ !navigator.mediaDevices ||
+ !navigator.mediaDevices.getUserMedia
+ ) {
+ addErrorAttribute(self, "Browser not supported");
+ return;
+ }
+
+ navigator.mediaDevices.enumerateDevices().then((devices) => {
+ const cameras = devices.filter((device) => device.kind === "videoinput");
+
+ if (cameras.length === 0) {
+ addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
+ return;
+ }
+
+ // Nur Dropdown anzeigen, wenn mehr als 1 Kamera vorhanden
+ if (cameras.length > 1) {
+ const select = document.createElement("select");
+ select.setAttribute("data-monster-role", "cameraSelector");
+ select.style.marginBottom = "0.5rem";
+
+ cameras.forEach((camera, index) => {
+ const option = document.createElement("option");
+ option.value = camera.deviceId;
+ option.text = camera.label || `Kamera ${index + 1}`;
+ select.appendChild(option);
+ });
+
+ select.addEventListener("change", () => {
+ startCameraWithDeviceId.call(self, select.value);
+ });
+
+ // Vor dem Video-Element einfügen
+ self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
+ }
+
+ // Mit der ersten Kamera starten
+ startCameraWithDeviceId.call(self, cameras[0].deviceId);
+ });
}
-
function startCameraWithDeviceId(deviceId) {
- const self = this;
- navigator.mediaDevices
- .getUserMedia({ video: { deviceId: { exact: deviceId } } })
- .then(function (stream) {
- self[takePictureButtonElementSymbol].style.display = "block";
- self[videoElementSymbol].style.display = "block";
- self[emptyHistoryStateElementSymbol].style.display = "none";
-
- self[videoElementSymbol].srcObject = stream;
- })
- .catch(function (e) {
- addErrorAttribute(self, e);
- });
+ const self = this;
+ navigator.mediaDevices
+ .getUserMedia({ video: { deviceId: { exact: deviceId } } })
+ .then(function (stream) {
+ self[takePictureButtonElementSymbol].style.display = "block";
+ self[videoElementSymbol].style.display = "block";
+ self[emptyHistoryStateElementSymbol].style.display = "none";
+
+ self[videoElementSymbol].srcObject = stream;
+ })
+ .catch(function (e) {
+ addErrorAttribute(self, e);
+ });
}
-
/**
* @private
* @returns {{takePicture: string}}
*/
function getTranslations() {
- const locale = getLocaleOfDocument();
- switch (locale.language) {
- case "de":
- return {
- takePicture: "Bild aufnehmen",
- cameraNotSupportedOrNotAllowed:
- "Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
- };
-
- case "es":
- return {
- takePicture: "Tomar una foto",
- cameraNotSupportedOrNotAllowed:
- "La cámara no es compatible o no se ha otorgado permiso.",
- };
-
- case "zh":
- return {
- takePicture: "拍照",
- cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
- };
-
- case "hi":
- return {
- takePicture: "तस्वीर खींचें",
- cameraNotSupportedOrNotAllowed:
- "कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
- };
-
- case "bn":
- return {
- takePicture: "ছবি তুলুন",
- cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
- };
-
- case "pt":
- return {
- takePicture: "Tirar uma foto",
- cameraNotSupportedOrNotAllowed:
- "A câmera não é suportada ou a permissão não foi concedida.",
- };
-
- case "ru":
- return {
- takePicture: "Сделать фото",
- cameraNotSupportedOrNotAllowed:
- "Камера не поддерживается или разрешение не предоставлено.",
- };
-
- case "ja":
- return {
- takePicture: "写真を撮る",
- cameraNotSupportedOrNotAllowed:
- "カメラがサポートされていないか、許可が付与されていません。",
- };
-
- case "pa":
- return {
- takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
- cameraNotSupportedOrNotAllowed:
- "ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
- };
-
- case "mr":
- return {
- takePicture: "फोटो घ्या",
- cameraNotSupportedOrNotAllowed:
- "कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
- };
-
- case "fr":
- return {
- takePicture: "Prendre une photo",
- cameraNotSupportedOrNotAllowed:
- "La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
- };
-
- case "it":
- return {
- takePicture: "Scattare una foto",
- cameraNotSupportedOrNotAllowed:
- "La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
- };
-
- case "nl":
- return {
- takePicture: "Maak een foto",
- cameraNotSupportedOrNotAllowed:
- "De camera wordt niet ondersteund of er is geen toestemming verleend.",
- };
-
- case "sv":
- return {
- takePicture: "Ta ett foto",
- cameraNotSupportedOrNotAllowed:
- "Kameran stöds inte eller tillståndet har inte beviljats.",
- };
-
- case "pl":
- return {
- takePicture: "Zrób zdjęcie",
- cameraNotSupportedOrNotAllowed:
- "Kamera nie jest obsługiwana lub nie udzielono zgody.",
- };
-
- case "da":
- return {
- takePicture: "Tag et billede",
- cameraNotSupportedOrNotAllowed:
- "Kameraen understøttes ikke eller tilladelsen er ikke givet.",
- };
-
- case "fi":
- return {
- takePicture: "Ota kuva",
- cameraNotSupportedOrNotAllowed:
- "Kameraa ei tueta tai lupaa ei ole myönnetty.",
- };
-
- case "no":
- return {
- takePicture: "Ta et bilde",
- cameraNotSupportedOrNotAllowed:
- "Kameraen støttes ikke eller tillatelsen er ikke gitt.",
- };
-
- case "cs":
- return {
- takePicture: "Vyfotit",
- cameraNotSupportedOrNotAllowed:
- "Fotoaparát není podporován nebo povolení nebylo uděleno.",
- };
-
- case "en":
- default:
- return {
- takePicture: "Take a picture",
- cameraNotSupportedOrNotAllowed:
- "The camera is not supported or permission has not been granted.",
- };
- }
+ const locale = getLocaleOfDocument();
+ switch (locale.language) {
+ case "de":
+ return {
+ takePicture: "Bild aufnehmen",
+ cameraNotSupportedOrNotAllowed:
+ "Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
+ };
+
+ case "es":
+ return {
+ takePicture: "Tomar una foto",
+ cameraNotSupportedOrNotAllowed:
+ "La cámara no es compatible o no se ha otorgado permiso.",
+ };
+
+ case "zh":
+ return {
+ takePicture: "拍照",
+ cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
+ };
+
+ case "hi":
+ return {
+ takePicture: "तस्वीर खींचें",
+ cameraNotSupportedOrNotAllowed:
+ "कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
+ };
+
+ case "bn":
+ return {
+ takePicture: "ছবি তুলুন",
+ cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
+ };
+
+ case "pt":
+ return {
+ takePicture: "Tirar uma foto",
+ cameraNotSupportedOrNotAllowed:
+ "A câmera não é suportada ou a permissão não foi concedida.",
+ };
+
+ case "ru":
+ return {
+ takePicture: "Сделать фото",
+ cameraNotSupportedOrNotAllowed:
+ "Камера не поддерживается или разрешение не предоставлено.",
+ };
+
+ case "ja":
+ return {
+ takePicture: "写真を撮る",
+ cameraNotSupportedOrNotAllowed:
+ "カメラがサポートされていないか、許可が付与されていません。",
+ };
+
+ case "pa":
+ return {
+ takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
+ cameraNotSupportedOrNotAllowed:
+ "ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
+ };
+
+ case "mr":
+ return {
+ takePicture: "फोटो घ्या",
+ cameraNotSupportedOrNotAllowed:
+ "कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
+ };
+
+ case "fr":
+ return {
+ takePicture: "Prendre une photo",
+ cameraNotSupportedOrNotAllowed:
+ "La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
+ };
+
+ case "it":
+ return {
+ takePicture: "Scattare una foto",
+ cameraNotSupportedOrNotAllowed:
+ "La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
+ };
+
+ case "nl":
+ return {
+ takePicture: "Maak een foto",
+ cameraNotSupportedOrNotAllowed:
+ "De camera wordt niet ondersteund of er is geen toestemming verleend.",
+ };
+
+ case "sv":
+ return {
+ takePicture: "Ta ett foto",
+ cameraNotSupportedOrNotAllowed:
+ "Kameran stöds inte eller tillståndet har inte beviljats.",
+ };
+
+ case "pl":
+ return {
+ takePicture: "Zrób zdjęcie",
+ cameraNotSupportedOrNotAllowed:
+ "Kamera nie jest obsługiwana lub nie udzielono zgody.",
+ };
+
+ case "da":
+ return {
+ takePicture: "Tag et billede",
+ cameraNotSupportedOrNotAllowed:
+ "Kameraen understøttes ikke eller tilladelsen er ikke givet.",
+ };
+
+ case "fi":
+ return {
+ takePicture: "Ota kuva",
+ cameraNotSupportedOrNotAllowed:
+ "Kameraa ei tueta tai lupaa ei ole myönnetty.",
+ };
+
+ case "no":
+ return {
+ takePicture: "Ta et bilde",
+ cameraNotSupportedOrNotAllowed:
+ "Kameraen støttes ikke eller tillatelsen er ikke gitt.",
+ };
+
+ case "cs":
+ return {
+ takePicture: "Vyfotit",
+ cameraNotSupportedOrNotAllowed:
+ "Fotoaparát není podporován nebo povolení nebylo uděleno.",
+ };
+
+ case "en":
+ default:
+ return {
+ takePicture: "Take a picture",
+ cameraNotSupportedOrNotAllowed:
+ "The camera is not supported or permission has not been granted.",
+ };
+ }
}
/**
@@ -416,17 +414,17 @@ function getTranslations() {
* @fires monster-camera-capture-captured
*/
function initEventHandler() {
- const self = this;
+ const self = this;
- this[takePictureButtonElementSymbol].setOption("actions.click", function () {
- self.capture();
+ this[takePictureButtonElementSymbol].setOption("actions.click", function () {
+ self.capture();
- fireCustomEvent(self, "monster-camera-capture-captured", {
- element: self,
- })
- });
+ fireCustomEvent(self, "monster-camera-capture-captured", {
+ element: self,
+ });
+ });
- return this;
+ return this;
}
/**
@@ -434,22 +432,22 @@ function initEventHandler() {
* @return {void}
*/
function initControlReferences() {
- this[controlElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="control"]`,
- );
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
- this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
- `[data-monster-role="takePicture"]`,
- );
+ this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
+ `[data-monster-role="takePicture"]`,
+ );
- this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
+ this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
- this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
+ this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
- // data-monster-role="emptyHistoryState"
- this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
- `[data-monster-role="emptyHistoryState"]`,
- );
+ // data-monster-role="emptyHistoryState"
+ this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
+ `[data-monster-role="emptyHistoryState"]`,
+ );
}
/**
@@ -457,10 +455,10 @@ function initControlReferences() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
- <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="#stream"></monster-full-screen>
+ <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
<monster-state data-monster-role="emptyHistoryState">
<svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="350"
@@ -494,7 +492,7 @@ function getTemplate() {
- <video id="stream" autoplay style="display:none"></video>
+ <video autoplay style="display:none"></video>
<canvas style="display:none;"></canvas>
<div>
<monster-button part="takePictureButton" style="display:none"
diff --git a/source/components/content/style/camera-capture.pcss b/source/components/content/style/camera-capture.pcss
index 5490f9f306da6a380563e82d3d640bf96f7a0365..591e96231416b77656f8e0d740e3cfeb74cabac2 100644
--- a/source/components/content/style/camera-capture.pcss
+++ b/source/components/content/style/camera-capture.pcss
@@ -5,7 +5,7 @@
[data-monster-role="control"] {
display: flex;
- justify-content: space-between;
+ justify-content: flex-end;
margin: 0;
padding: 0;
flex-direction: column;
@@ -25,9 +25,9 @@
[ data-monster-role="full-screen"] {
position:absolute;
- top:10px;
- right:10px;
- z-index: 99999;
+ top:2rem;
+ right:1rem;
+ z-index: var(--monster-z-index-dropdown);
}
.camera-not-supported-text {
diff --git a/source/components/content/stylesheet/camera-capture.mjs b/source/components/content/stylesheet/camera-capture.mjs
index 8edeb8fe87e38d6b6e807325eed99363803c85da..b142d8bec22215b3386da91b778f186c5851c5da 100644
--- a/source/components/content/stylesheet/camera-capture.mjs
+++ b/source/components/content/stylesheet/camera-capture.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {CameraCaptureStyleSheet}
+export { CameraCaptureStyleSheet };
/**
* @private
@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
const CameraCaptureStyleSheet = new CSSStyleSheet();
try {
- CameraCaptureStyleSheet.insertRule(`
+ CameraCaptureStyleSheet.insertRule(
+ `
@layer cameracapture {
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:10px;top:10px;z-index:99999}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none}
-}`, 0);
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:1rem;top:2rem;z-index:var(--monster-z-index-dropdown)}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none}
+}`,
+ 0,
+ );
} catch (e) {
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+ addAttributeToken(
+ document.getRootNode().querySelector("html"),
+ ATTRIBUTE_ERRORMESSAGE,
+ e + "",
+ );
}
diff --git a/source/components/content/viewer.mjs b/source/components/content/viewer.mjs
index f5c51ab6d157d3819c573d2550b6a3898999f05d..7785b4b1d131c74f87b7fa4449b920b4a864fdc1 100644
--- a/source/components/content/viewer.mjs
+++ b/source/components/content/viewer.mjs
@@ -13,18 +13,18 @@
*/
import {
- assembleMethodSymbol,
- CustomElement,
- registerCustomElement,
+ assembleMethodSymbol,
+ CustomElement,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
import "../notify/notify.mjs";
-import {ViewerStyleSheet} from "./stylesheet/viewer.mjs";
-import {instanceSymbol} from "../../constants.mjs";
-import {isString} from "../../types/is.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {MediaType, parseMediaType} from "../../types/mediatype.mjs";
+import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { isString } from "../../types/is.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { MediaType, parseMediaType } from "../../types/mediatype.mjs";
-export {Viewer};
+export { Viewer };
/**
* @private
@@ -45,286 +45,284 @@ const viewerElementSymbol = Symbol("viewerElement");
* @summary A simple viewer component for PDF, HTML and images.
*/
class Viewer extends CustomElement {
- /**
- * This method is called by the `instanceof` operator.
- * @return {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/content/viewer@@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 {string} content Content to be displayed in the viewer
- * @property {Object} classes Css classes
- * @property {string} classes.viewer Css class for the viewer
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
- content: "<slot></slot>",
- classes: {
- viewer: "",
- },
- });
- }
-
- /**
- * Sets the content of an element based on the provided content and media type.
- *
- * @param {string} content - The content to be set.
- * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
- * @return {void} This method does not return a value.
- * @throws {Error} Throws an error if shadowRoot is not defined.
- */
- setContent(content, mediaType = "text/plain") {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- let type;
- try {
- const m = new parseMediaType(mediaType);
- switch (m.type) {
- case "image":
- return this.setImage(content);
- }
-
- mediaType = m.toString();
- } catch (error) {
- type = null;
- }
-
- if (mediaType === undefined || mediaType === null || mediaType === "") {
- mediaType = "text/plain";
- }
-
- switch (mediaType) {
- case "text/html":
- this.setHTML(content);
- break;
- case "text/plain":
- this.setPlainText(content);
- break;
- case "application/pdf":
- this.setPDF(content);
- break;
- case "image/png":
- case "image/jpeg":
- case "image/gif":
- this.setImage(content);
- break;
- default:
- this.setOption("content", content);
- }
- }
-
- /**
- * Configures and embeds a PDF document into the application with customizable display settings.
- *
- * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
- * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
- * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
- * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
- * @return {void} This method returns nothing but sets the embedded PDF as the content.
- */
- setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
- const hashes =
- "#toolbar=" +
- (toolbar ? "1" : "0") +
- "&navpanes=" +
- (navigation ? "1" : "0") +
- "&scrollbar=" +
- (scrollbar ? "1" : "0");
-
- let pdfURL = "";
- if (isBlob(data)) {
- pdfURL = URL.createObjectURL(data);
- pdfURL += hashes;
- } else if (isURL(data)) {
- // check if the url already contains the hashes
- if (data?.hash?.indexOf("#") === -1) {
- pdfURL = data.toString() + hashes;
- } else {
- pdfURL = data.toString();
- }
- } else if (isString(data)) {
- //URL.createObjectURL(data);
- const blobObj = new Blob([atob(data)], {type: "application/pdf"});
- const url = window.URL.createObjectURL(blobObj);
-
- pdfURL = data;
- } else {
- throw new Error("Blob or URL expected");
- }
-
- const html =
- '<object part="pdf" data="' +
- pdfURL +
- '" width="100%" height="100%" type="application/pdf"></object>';
-
- this.setOption("content", html);
- }
-
- /**
- * Sets an image for the target by accepting a blob, URL, or string representation of the image.
- *
- * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
- * @return {void} Does not return a value.
- */
- setImage(data) {
- if (isBlob(data)) {
- data = URL.createObjectURL(data);
- } else if (isURL(data)) {
- // nothing to do
- } else if (isString(data)) {
- // nothing to do
- } else {
- throw new Error("Blob or URL expected");
- }
-
- this.setOption("content", '<img src="' + data + '" alt="image" />');
- }
-
- /**
- *
- * if the data is a string, it is interpreted as HTML.
- * if the data is an url, the HTML is loaded from the url and set as content.
- * if the data is an HTMLElement, the outerHTML is used as content.
- *
- * @param {HTMLElement|URL|string|Blob} data
- */
- setHTML(data) {
- if (data instanceof Blob) {
- blobToText(data)
- .then((html) => {
- this.setOption("content", html);
- })
- .catch((error) => {
- throw new Error(error);
- });
-
- return;
- } else if (data instanceof HTMLElement) {
- data = data.outerHTML;
- } else if (isString(data)) {
- // nothing to do
- } else if (isURL(data)) {
- // fetch element
- getGlobal()
- .fetch(data)
- .then((response) => {
- return response.text();
- })
- .then((html) => {
- this.setOption("content", html);
- })
- .catch((error) => {
- throw new Error(error);
- });
- } else {
- throw new Error("HTMLElement or string expected");
- }
-
- this.setOption("content", data);
- }
-
- /**
- * Sets the plain text content by processing the input data, which can be of various types, including Blob,
- * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
- *
- * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
- * a plain string, or a string formatted as a valid URL. The method determines
- * the data type and processes it accordingly.
- * @return {void} - This method does not return any value. It processes the content and updates the relevant option
- * property.
- */
- setPlainText(data) {
-
- const mkPreSpan = (text) => {
- const pre = document.createElement("pre");
- pre.innerText = text;
- pre.setAttribute("part", "text");
- return pre.outerHTML;
- }
-
- if (data instanceof Blob) {
- blobToText(data)
- .then((text) => {
- const div = document.createElement("div");
- div.innerHTML = test;
- text = div.innerText;
-
- this.setOption("content", mkPreSpan(text));
- })
- .catch((error) => {
- throw new Error(error);
- });
-
- return;
- } else if (data instanceof HTMLElement) {
- data = data.outerText;
- } else if (isString(data)) {
- const div = document.createElement("div");
- div.innerHTML = data;
- data = div.innerText;
- } else if (isURL(data)) {
-
- getGlobal()
- .fetch(data)
- .then((response) => {
- return response.text();
- })
- .then((text) => {
- const div = document.createElement("div");
- div.innerHTML = text;
- text = div.innerText;
-
- this.setOption("content", mkPreSpan(text));
- })
- .catch((error) => {
- throw new Error(error);
- });
- } else {
- throw new Error("HTMLElement or string expected");
- }
-
- this.setOption("content", mkPreSpan(data));
- }
-
- /**
- *
- * @return {Viewer}
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
-
- initControlReferences.call(this);
- initEventHandler.call(this);
- }
-
- /**
- *
- * @return {string}
- */
- static getTag() {
- return "monster-viewer";
- }
-
- /**
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [ViewerStyleSheet];
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @return {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/content/viewer@@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 {string} content Content to be displayed in the viewer
+ * @property {Object} classes Css classes
+ * @property {string} classes.viewer Css class for the viewer
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ content: "<slot></slot>",
+ classes: {
+ viewer: "",
+ },
+ });
+ }
+
+ /**
+ * Sets the content of an element based on the provided content and media type.
+ *
+ * @param {string} content - The content to be set.
+ * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
+ * @return {void} This method does not return a value.
+ * @throws {Error} Throws an error if shadowRoot is not defined.
+ */
+ setContent(content, mediaType = "text/plain") {
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ let type;
+ try {
+ const m = new parseMediaType(mediaType);
+ switch (m.type) {
+ case "image":
+ return this.setImage(content);
+ }
+
+ mediaType = m.toString();
+ } catch (error) {
+ type = null;
+ }
+
+ if (mediaType === undefined || mediaType === null || mediaType === "") {
+ mediaType = "text/plain";
+ }
+
+ switch (mediaType) {
+ case "text/html":
+ this.setHTML(content);
+ break;
+ case "text/plain":
+ this.setPlainText(content);
+ break;
+ case "application/pdf":
+ this.setPDF(content);
+ break;
+ case "image/png":
+ case "image/jpeg":
+ case "image/gif":
+ this.setImage(content);
+ break;
+ default:
+ this.setOption("content", content);
+ }
+ }
+
+ /**
+ * Configures and embeds a PDF document into the application with customizable display settings.
+ *
+ * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
+ * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
+ * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
+ * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
+ * @return {void} This method returns nothing but sets the embedded PDF as the content.
+ */
+ setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
+ const hashes =
+ "#toolbar=" +
+ (toolbar ? "1" : "0") +
+ "&navpanes=" +
+ (navigation ? "1" : "0") +
+ "&scrollbar=" +
+ (scrollbar ? "1" : "0");
+
+ let pdfURL = "";
+ if (isBlob(data)) {
+ pdfURL = URL.createObjectURL(data);
+ pdfURL += hashes;
+ } else if (isURL(data)) {
+ // check if the url already contains the hashes
+ if (data?.hash?.indexOf("#") === -1) {
+ pdfURL = data.toString() + hashes;
+ } else {
+ pdfURL = data.toString();
+ }
+ } else if (isString(data)) {
+ //URL.createObjectURL(data);
+ const blobObj = new Blob([atob(data)], { type: "application/pdf" });
+ const url = window.URL.createObjectURL(blobObj);
+
+ pdfURL = data;
+ } else {
+ throw new Error("Blob or URL expected");
+ }
+
+ const html =
+ '<object part="pdf" data="' +
+ pdfURL +
+ '" width="100%" height="100%" type="application/pdf"></object>';
+
+ this.setOption("content", html);
+ }
+
+ /**
+ * Sets an image for the target by accepting a blob, URL, or string representation of the image.
+ *
+ * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
+ * @return {void} Does not return a value.
+ */
+ setImage(data) {
+ if (isBlob(data)) {
+ data = URL.createObjectURL(data);
+ } else if (isURL(data)) {
+ // nothing to do
+ } else if (isString(data)) {
+ // nothing to do
+ } else {
+ throw new Error("Blob or URL expected");
+ }
+
+ this.setOption("content", '<img src="' + data + '" alt="image" />');
+ }
+
+ /**
+ *
+ * if the data is a string, it is interpreted as HTML.
+ * if the data is an url, the HTML is loaded from the url and set as content.
+ * if the data is an HTMLElement, the outerHTML is used as content.
+ *
+ * @param {HTMLElement|URL|string|Blob} data
+ */
+ setHTML(data) {
+ if (data instanceof Blob) {
+ blobToText(data)
+ .then((html) => {
+ this.setOption("content", html);
+ })
+ .catch((error) => {
+ throw new Error(error);
+ });
+
+ return;
+ } else if (data instanceof HTMLElement) {
+ data = data.outerHTML;
+ } else if (isString(data)) {
+ // nothing to do
+ } else if (isURL(data)) {
+ // fetch element
+ getGlobal()
+ .fetch(data)
+ .then((response) => {
+ return response.text();
+ })
+ .then((html) => {
+ this.setOption("content", html);
+ })
+ .catch((error) => {
+ throw new Error(error);
+ });
+ } else {
+ throw new Error("HTMLElement or string expected");
+ }
+
+ this.setOption("content", data);
+ }
+
+ /**
+ * Sets the plain text content by processing the input data, which can be of various types, including Blob,
+ * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
+ *
+ * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
+ * a plain string, or a string formatted as a valid URL. The method determines
+ * the data type and processes it accordingly.
+ * @return {void} - This method does not return any value. It processes the content and updates the relevant option
+ * property.
+ */
+ setPlainText(data) {
+ const mkPreSpan = (text) => {
+ const pre = document.createElement("pre");
+ pre.innerText = text;
+ pre.setAttribute("part", "text");
+ return pre.outerHTML;
+ };
+
+ if (data instanceof Blob) {
+ blobToText(data)
+ .then((text) => {
+ const div = document.createElement("div");
+ div.innerHTML = test;
+ text = div.innerText;
+
+ this.setOption("content", mkPreSpan(text));
+ })
+ .catch((error) => {
+ throw new Error(error);
+ });
+
+ return;
+ } else if (data instanceof HTMLElement) {
+ data = data.outerText;
+ } else if (isString(data)) {
+ const div = document.createElement("div");
+ div.innerHTML = data;
+ data = div.innerText;
+ } else if (isURL(data)) {
+ getGlobal()
+ .fetch(data)
+ .then((response) => {
+ return response.text();
+ })
+ .then((text) => {
+ const div = document.createElement("div");
+ div.innerHTML = text;
+ text = div.innerText;
+
+ this.setOption("content", mkPreSpan(text));
+ })
+ .catch((error) => {
+ throw new Error(error);
+ });
+ } else {
+ throw new Error("HTMLElement or string expected");
+ }
+
+ this.setOption("content", mkPreSpan(data));
+ }
+
+ /**
+ *
+ * @return {Viewer}
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ }
+
+ /**
+ *
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-viewer";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [ViewerStyleSheet];
+ }
}
/**
@@ -333,12 +331,12 @@ class Viewer extends CustomElement {
* @return {boolean}
*/
function isURL(variable) {
- try {
- new URL(variable);
- return true;
- } catch (error) {
- return false;
- }
+ try {
+ new URL(variable);
+ return true;
+ } catch (error) {
+ return false;
+ }
}
/**
@@ -347,7 +345,7 @@ function isURL(variable) {
* @return {boolean}
*/
function isBlob(variable) {
- return variable instanceof Blob;
+ return variable instanceof Blob;
}
/**
@@ -356,12 +354,12 @@ function isBlob(variable) {
* @return {Promise<unknown>}
*/
function blobToText(blob) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onloadend = () => resolve(reader.result);
- reader.onerror = reject;
- reader.readAsText(blob);
- });
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onloadend = () => resolve(reader.result);
+ reader.onerror = reject;
+ reader.readAsText(blob);
+ });
}
/**
@@ -370,18 +368,18 @@ function blobToText(blob) {
* @throws {Error} no shadow-root is defined
*/
function initControlReferences() {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
- this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
+ this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
}
/**
* @private
*/
function initEventHandler() {
- return this;
+ return this;
}
/**
@@ -389,8 +387,8 @@ function initEventHandler() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div id="viewer" data-monster-role="viewer" part="viewer"
data-monster-replace="path:content"
data-monster-attributes="class path:classes.viewer">
diff --git a/source/components/form/login.mjs b/source/components/form/login.mjs
index ad6b1a5c438c039b4cf9e82e80cd3cc8c9379ee2..569187e0f36a8e2337baf10e4b6b447d3c00dbfb 100644
--- a/source/components/form/login.mjs
+++ b/source/components/form/login.mjs
@@ -274,9 +274,9 @@ class Login extends CustomElement {
},
actions: {},
- callbacks : {
- username : null,
- forgotPassword : null,
+ callbacks: {
+ username: null,
+ forgotPassword: null,
},
digits: 6,
@@ -477,7 +477,6 @@ function getTranslations() {
"Dieses Formular ist nicht konfiguriert.",
messagePasswordResetDisabled:
"Sie können keinen Code anfordern, da die<br>Zwei-Faktor-Authentifizierung bei Ihrem Konto aktiviert ist.<br>Bitte kontaktieren Sie den Administrator.",
-
};
case "es":
return {
@@ -511,9 +510,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Este formulario no está configurado.",
messagePasswordResetDisabled:
"Esta función no funciona porque la autenticación de dos factores está activada en su cuenta. Por favor, póngase en contacto con el administrador.",
-
-
-
};
case "zh":
return {
@@ -543,9 +539,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "此表单尚未配置。",
messagePasswordResetDisabled:
"此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。",
-
-
-
};
case "hi":
@@ -576,8 +569,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "यह फर कनगर नह ह।",
messagePasswordResetDisabled:
"यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।",
-
-
};
case "bn":
@@ -608,8 +599,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।",
messagePasswordResetDisabled:
"এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।",
-
-
};
case "pt": // Portuguese
@@ -641,8 +630,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Este formulário não está configurado.",
messagePasswordResetDisabled:
"Esta função não funciona porque a autenticação de dois fatores<br>está ativada em sua conta. Por favor, entre em contato com o administrador.",
-
-
};
case "ru": // Russian
@@ -674,8 +661,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Эта форма не настроена.",
messagePasswordResetDisabled:
"Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.",
-
-
};
case "ja": // Japanese
@@ -708,7 +693,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "このフォームは設定されていません。",
messagePasswordResetDisabled:
"この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。",
-
};
case "pa": // Western Punjabi
@@ -739,8 +723,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।",
messagePasswordResetDisabled:
"ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।",
-
-
};
case "mr": // Marathi
@@ -771,8 +753,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.",
messagePasswordResetDisabled:
"य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.",
-
-
};
case "fr": // French
@@ -806,8 +786,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Ce formulaire n'est pas configuré.",
messagePasswordResetDisabled:
"Cette fonctionnalité ne fonctionne pas car l'authentification à deux facteurs est activée sur<br>votre compte. Veuillez contacter l'administrateur.",
-
-
};
case "it": // Italian
@@ -840,7 +818,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Questo modulo non è configurato.",
messagePasswordResetDisabled:
"Questa funzione non funziona perché l'autenticazione a due<br>fattori è attiva sul tuo account. Contatta l'amministratore.",
-
};
case "nl": // Dutch
@@ -872,7 +849,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Dit formulier is niet geconfigureerd.",
messagePasswordResetDisabled:
"Deze functie werkt niet omdat tweefactorauthenticatie is<br>ingeschakeld op uw account. Neem contact op met de beheerder.",
-
};
case "sv": // Swedish
@@ -904,7 +880,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Detta formulär är inte konfigurerat.",
messagePasswordResetDisabled:
"Denna funktion fungerar inte eftersom tvåfaktorsautentisering är aktiverad på ditt konto. Kontakta administratören.",
-
};
case "pl": // Polish
@@ -937,7 +912,6 @@ function getTranslations() {
"Ten formularz nie jest skonfigurowany.",
messagePasswordResetDisabled:
"Ta funkcja nie działa, ponieważ włączona jest autoryzacja dwuetapowa na twoim koncie. Skontaktuj się z administratorem.",
-
};
case "da": // Danish
@@ -968,7 +942,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.",
messagePasswordResetDisabled:
"Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.",
-
};
case "no": // Norwegian
@@ -1001,7 +974,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.",
messagePasswordResetDisabled:
"Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.",
-
};
case "cs": // Czech
@@ -1032,7 +1004,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "Tento formulář není nakonfigurován.",
messagePasswordResetDisabled:
"Tato funkce nefunguje, protože je na vašem<br>účtu aktivováno dvoufaktorové ověřování. Kontaktujte správce.",
-
};
default:
@@ -1064,7 +1035,6 @@ function getTranslations() {
messageThisFormIsNotConfigured: "This form is not configured.",
messagePasswordResetDisabled:
"This function does not work because two-factor<br>authentication is enabled on your account.<br>Please contact the administrator.",
-
};
}
}
@@ -1155,7 +1125,6 @@ function initEventHandler() {
});
this[loginButtonSymbol].setOption("actions.click", (event) => {
-
let username = this.shadowRoot.querySelector(
"input[name='username']",
).value;
diff --git a/source/components/form/select.mjs b/source/components/form/select.mjs
index 5f9b13025383e5c583b5bfe6b85aa4eeb825fba4..f8060a565f8b64172fcca87225d47f65b17830df 100644
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -12,61 +12,61 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import {instanceSymbol, internalSymbol} from "../../constants.mjs";
-import {buildMap, build as buildValue} from "../../data/buildmap.mjs";
+import { instanceSymbol, internalSymbol } from "../../constants.mjs";
+import { buildMap, build as buildValue } from "../../data/buildmap.mjs";
import {
- addAttributeToken,
- containsAttributeToken,
- findClosestByAttribute,
- removeAttributeToken,
+ addAttributeToken,
+ containsAttributeToken,
+ findClosestByAttribute,
+ removeAttributeToken,
} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
+import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
import {
- assembleMethodSymbol,
- getSlottedElements,
- registerCustomElement,
+ assembleMethodSymbol,
+ getSlottedElements,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import {addErrorAttribute, removeErrorAttribute} from "../../dom/error.mjs";
+import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
import {
- findTargetElementFromEvent,
- fireCustomEvent,
- fireEvent,
+ findTargetElementFromEvent,
+ fireCustomEvent,
+ fireEvent,
} from "../../dom/events.mjs";
-import {getLocaleOfDocument} from "../../dom/locale.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { getDocument } from "../../dom/util.mjs";
import {
- getDocumentTranslations,
- Translations,
+ getDocumentTranslations,
+ Translations,
} from "../../i18n/translations.mjs";
-import {Formatter} from "../../text/formatter.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {ID} from "../../types/id.mjs";
+import { Formatter } from "../../text/formatter.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
import {
- isArray,
- isFunction,
- isInteger,
- isIterable,
- isObject,
- isPrimitive,
- isString,
+ isArray,
+ isFunction,
+ isInteger,
+ isIterable,
+ isObject,
+ isPrimitive,
+ isString,
} from "../../types/is.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {ProxyObserver} from "../../types/proxyobserver.mjs";
-import {validateArray, validateString} from "../../types/validate.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-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";
+import { Observer } from "../../types/observer.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
+import { validateArray, validateString } from "../../types/validate.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+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,
- getSummaryTemplate,
- popperElementSymbol,
- Select,
+ getSelectionTemplate,
+ getSummaryTemplate,
+ popperElementSymbol,
+ Select,
};
/**
@@ -187,7 +187,7 @@ const popperFilterElementSymbol = Symbol("popperFilterElement");
* @type {Symbol}
*/
const popperFilterContainerElementSymbol = Symbol(
- "popperFilterContainerElement",
+ "popperFilterContainerElement",
);
/**
@@ -245,7 +245,7 @@ const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
* @type {symbol}
*/
const debounceOptionsMutationObserverSymbol = Symbol(
- "debounceOptionsMutationObserver",
+ "debounceOptionsMutationObserver",
);
/**
@@ -313,468 +313,467 @@ const FILTER_POSITION_INLINE = "inline";
* @fires monster-selection-cleared
*/
class Select extends CustomControl {
- /**
- *
- */
- constructor() {
- super();
- initOptionObserver.call(this);
- }
-
- /**
- * This method is called by the `instanceof` operator.
- * @return {Symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/form/select@@instance");
- }
-
- /**
- * The current selection of the Select
- *
- * ```
- * e = document.querySelector('monster-select');
- * console.log(e.value)
- * // ↦ 1
- * // ↦ ['1','2']
- * ```
- *
- * @return {string}
- */
- get value() {
- return convertSelectionToValue.call(this, this.getOption("selection"));
- }
-
- /**
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
- * @return {boolean}
- */
- static get formAssociated() {
- return true;
- }
-
- /**
- * Set selection
- *
- * ```
- * e = document.querySelector('monster-select');
- * e.value=1
- * ```
- *
- * @property {string|array} value
- * @throws {Error} unsupported type
- * @fires monster-selected this event is fired when the selection is set
- */
- set value(value) {
- const result = convertValueToSelection.call(this, value);
-
- setSelection
- .call(this, result.selection)
- .then(() => {
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- /**
- * 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 {string[]} toggleEventType Array of DOM event names (e.g. ["click","touch"]) to toggle the dropdown.
- * @property {boolean} delegatesFocus Whether the element delegates focus to its internal control (e.g. the filter input).
- * @property {Array<Object>} options Array of option objects {label,value,visibility?,data?} for static option list.
- * @property {string|string[]} selection Initial selected value(s) as string, comma-separated string, or array of strings.
- * @property {number} showMaxOptions Maximum visible options before the dropdown scrolls.
- * @property {"radio"|"checkbox"} type Selection mode: "radio" for single, "checkbox" for multiple.
- * @property {string} name Name of the hidden form field for form submission.
- * @property {string|null} url URL to dynamically fetch options via HTTP when opening or filtering.
- * @property {string} lookup.url URL template with ${filter} placeholder to fetch only selected entries on init when `url` is set and either `features.lazyLoad` or `filter.mode==="remote"`.
- * @property {boolean} lookup.grouping Group lookup requests: true to fetch all selected values in one request, false to fetch each individually.
- * @property {string} fetch.redirect Fetch redirect mode (e.g. "error").
- * @property {string} fetch.method HTTP method for fetching options (e.g. "GET").
- * @property {string} fetch.mode Fetch mode (e.g. "same-origin").
- * @property {string} fetch.credentials Credentials policy for fetch (e.g. "same-origin").
- * @property {Object.<string,string>} fetch.headers HTTP headers for fetch requests.
- * @property {string} labels.cannot-be-loaded Message when options cannot be loaded.
- * @property {string} labels.no-options-available Message when no static options are available.
- * @property {string} labels.click-to-load-options Message prompting user to click to load options when `features.lazyLoad` is enabled.
- * @property {string} labels.select-an-option Placeholder text when no selection is made.
- * @property {string} labels.no-options Message when neither slots nor fetched options exist.
- * @property {string} labels.no-options-found Message when filter yields no matching options.
- * @property {string} labels.summary-text.zero Plural template for zero selected entries (e.g. "No entries were selected").
- * @property {string} labels.summary-text.one Plural template for one selected entry.
- * @property {string} labels.summary-text.other Plural template for multiple selected entries.
- * @property {boolean} features.clearAll Show a "clear all" badge to reset selection.
- * @property {boolean} features.clear Show remove icon on individual selection badges.
- * @property {boolean} features.lazyLoad Lazy-load options on first open (initial fetch on show and triggers `lookup.url` preload; automatically disabled if `filter.mode==="remote"`).
- * @property {boolean} features.closeOnSelect Automatically close dropdown after selection.
- * @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.
- * @property {string} filter.marker.open Opening marker for embedding filter value in `filter.mode==="remote"` URLs.
- * @property {string} filter.marker.close Closing marker for embedding filter value in URLs.
- * @property {string|null} filter.defaultOptionsUrl URL for default options when `filter.mode==="remote"` is set and no filter value is provided.
- * @property {string} templates.main HTML template string for rendering options and selection badges.
- * @property {string} templateMapping.selected Template variant for selected items (e.g. badge vs summary view).
- * @property {string} popper.placement Popper.js placement strategy for dropdown (e.g. "bottom").
- * @property {Array<string|Object>} popper.middleware Popper.js middleware or offset configurations.
- * @property {string} mapping.selector Data path or selector to identify entries in imported data.
- * @property {string} mapping.labelTemplate Template for option labels using placeholders like `${name}`.
- * @property {string} mapping.valueTemplate Template for option values using placeholders like `${name}`.
- * @property {Function} mapping.filter Optional callback to filter imported map entries before building `options[]`.
- * @property {string} empty.defaultValueRadio Default radio-value when no selection exists.
- * @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(
- {},
- super.defaults,
- {
- toggleEventType: ["click", "touch"],
- delegatesFocus: false,
- options: [],
- selection: [],
- showMaxOptions: 10,
- type: "radio",
- name: new ID("s").toString(),
- features: {
- clearAll: true,
- clear: true,
- lazyLoad: false,
- closeOnSelect: false,
- 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",
- method: "GET",
- mode: "same-origin",
- credentials: "same-origin",
- headers: {
- accept: "application/json",
- },
- },
- filter: {
- defaultValue: null,
- mode: FILTER_MODE_DISABLED,
- position: FILTER_POSITION_INLINE,
- marker: {
- open: "{",
- close: "}",
- },
- defaultOptionsUrl: null,
- },
- 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: "",
- defaultValueCheckbox: [],
- equivalents: [undefined, null, "", NaN],
- },
- formatter: {
- selection: buildSelectionLabel,
- },
- templates: {
- main: getTemplate(),
- },
- templateMapping: {
- /** with the attribute `data-monster-selected-template` the template for the selected options can be defined. */
- selected: getSelectionTemplate(),
- },
-
- total: null,
-
- popper: {
- placement: "bottom",
- middleware: ["flip", "offset:1"],
- },
- },
- initOptionsFromArguments.call(this),
- );
- }
-
- /**
- * @return {Select}
- */
- [assembleMethodSymbol]() {
- const self = this;
- super[assembleMethodSymbol]();
-
- initControlReferences.call(self);
- initEventHandler.call(self);
-
- let lazyLoadFlag = self.getOption("features.lazyLoad", false);
- const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
-
- initTotal.call(self);
-
- if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
- self.setOption("features.lazyLoad", false);
- lazyLoadFlag = false;
- }
-
- if (self.hasAttribute("value")) {
- new Processing(10, () => {
- const oldValue = self.value;
- const newValue = self.getAttribute("value");
- if (oldValue !== newValue) {
- self.value = newValue;
- }
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- if (self.getOption("url") !== null) {
- if (lazyLoadFlag || remoteFilterFlag) {
- lookupSelection.call(self);
- } else {
- self.fetch().then(() => {
-
- }).catch((e) => {
- addErrorAttribute(self, e);
- });
- }
- }
-
- setTimeout(() => {
- let lastValue = self.value;
- self[internalSymbol].attachObserver(
- new Observer(function () {
- if (isObject(this) && this instanceof ProxyObserver) {
- const n = this.getSubject()?.options?.value;
-
- if (lastValue !== n && n !== undefined) {
- lastValue = n;
- setSelection
- .call(self, n)
- .then(() => {
- })
- .catch((e) => {
- addErrorAttribute(self, e);
- });
- }
- }
- }),
- );
-
- areOptionsAvailableAndInit.call(self);
- }, 0);
-
- return this;
- }
-
- /**
- *
- * @return {*}
- * @throws {Error} storeFetchedData is not enabled
- * @since 3.66.0
- */
- getLastFetchedData() {
- if (this.getOption("features.storeFetchedData") === false) {
- throw new Error("storeFetchedData is not enabled");
- }
-
- return this?.[lastFetchedDataSymbol];
- }
-
- /**
- * The Button.click() method simulates a click on the internal button element.
- *
- * @since 3.27.0
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
- */
- click() {
- if (this.getOption("disabled") === true) {
- return;
- }
-
- toggle.call(this);
- }
-
- /**
- * The Button.focus() method sets focus on the internal button element.
- *
- * @since 3.27.0
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
- */
- focus(options) {
- if (this.getOption("disabled") === true) {
- return;
- }
-
- new Processing(() => {
- gatherState.call(this);
- focusFilter.call(this, options);
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- /**
- * The Button.blur() method removes focus from the internal button element.
- * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
- */
- blur() {
- new Processing(() => {
- gatherState.call(this);
- blurFilter.call(this);
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- /**
- * If no url is specified, the options are taken from the Component itself.
- *
- * @param {string|URL} url URL to fetch the options
- * @return {Promise}
- */
- fetch(url) {
- return fetchIt.call(this, url);
- }
-
- /**
- * @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]);
- }
-
- parseSlotsToOptions.call(this);
- attachResizeObserver.call(this);
- updatePopper.call(this);
-
- new Processing(() => {
- gatherState.call(this);
- focusFilter.call(this);
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- /**
- * @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);
- }
-
- /**
- * Import Select Options from dataset
- * Not to be confused with the control defaults/options
- *
- * @param {array|object|Map|Set} data
- * @return {Select}
- * @throws {Error} map is not iterable
- * @throws {Error} missing label configuration
- * @fires monster-options-set this event is fired when the options are set
- */
- importOptions(data) {
- this[cleanupOptionsListSymbol] = true;
- return importOptionsIntern.call(this, data);
- }
-
- /**
- * @private
- * @return {Select}
- */
- calcAndSetOptionsDimension() {
- calcAndSetOptionsDimension.call(this);
- return this;
- }
-
- /**
- *
- * @return {string}
- */
- static getTag() {
- return "monster-select";
- }
-
- /**
- *
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [SelectStyleSheet];
- }
+ /**
+ *
+ */
+ constructor() {
+ super();
+ initOptionObserver.call(this);
+ }
+
+ /**
+ * This method is called by the `instanceof` operator.
+ * @return {Symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/form/select@@instance");
+ }
+
+ /**
+ * The current selection of the Select
+ *
+ * ```
+ * e = document.querySelector('monster-select');
+ * console.log(e.value)
+ * // ↦ 1
+ * // ↦ ['1','2']
+ * ```
+ *
+ * @return {string}
+ */
+ get value() {
+ return convertSelectionToValue.call(this, this.getOption("selection"));
+ }
+
+ /**
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+ * @return {boolean}
+ */
+ static get formAssociated() {
+ return true;
+ }
+
+ /**
+ * Set selection
+ *
+ * ```
+ * e = document.querySelector('monster-select');
+ * e.value=1
+ * ```
+ *
+ * @property {string|array} value
+ * @throws {Error} unsupported type
+ * @fires monster-selected this event is fired when the selection is set
+ */
+ set value(value) {
+ const result = convertValueToSelection.call(this, value);
+
+ setSelection
+ .call(this, result.selection)
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ /**
+ * 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 {string[]} toggleEventType Array of DOM event names (e.g. ["click","touch"]) to toggle the dropdown.
+ * @property {boolean} delegatesFocus Whether the element delegates focus to its internal control (e.g. the filter input).
+ * @property {Array<Object>} options Array of option objects {label,value,visibility?,data?} for static option list.
+ * @property {string|string[]} selection Initial selected value(s) as string, comma-separated string, or array of strings.
+ * @property {number} showMaxOptions Maximum visible options before the dropdown scrolls.
+ * @property {"radio"|"checkbox"} type Selection mode: "radio" for single, "checkbox" for multiple.
+ * @property {string} name Name of the hidden form field for form submission.
+ * @property {string|null} url URL to dynamically fetch options via HTTP when opening or filtering.
+ * @property {string} lookup.url URL template with ${filter} placeholder to fetch only selected entries on init when `url` is set and either `features.lazyLoad` or `filter.mode==="remote"`.
+ * @property {boolean} lookup.grouping Group lookup requests: true to fetch all selected values in one request, false to fetch each individually.
+ * @property {string} fetch.redirect Fetch redirect mode (e.g. "error").
+ * @property {string} fetch.method HTTP method for fetching options (e.g. "GET").
+ * @property {string} fetch.mode Fetch mode (e.g. "same-origin").
+ * @property {string} fetch.credentials Credentials policy for fetch (e.g. "same-origin").
+ * @property {Object.<string,string>} fetch.headers HTTP headers for fetch requests.
+ * @property {string} labels.cannot-be-loaded Message when options cannot be loaded.
+ * @property {string} labels.no-options-available Message when no static options are available.
+ * @property {string} labels.click-to-load-options Message prompting user to click to load options when `features.lazyLoad` is enabled.
+ * @property {string} labels.select-an-option Placeholder text when no selection is made.
+ * @property {string} labels.no-options Message when neither slots nor fetched options exist.
+ * @property {string} labels.no-options-found Message when filter yields no matching options.
+ * @property {string} labels.summary-text.zero Plural template for zero selected entries (e.g. "No entries were selected").
+ * @property {string} labels.summary-text.one Plural template for one selected entry.
+ * @property {string} labels.summary-text.other Plural template for multiple selected entries.
+ * @property {boolean} features.clearAll Show a "clear all" badge to reset selection.
+ * @property {boolean} features.clear Show remove icon on individual selection badges.
+ * @property {boolean} features.lazyLoad Lazy-load options on first open (initial fetch on show and triggers `lookup.url` preload; automatically disabled if `filter.mode==="remote"`).
+ * @property {boolean} features.closeOnSelect Automatically close dropdown after selection.
+ * @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.
+ * @property {string} filter.marker.open Opening marker for embedding filter value in `filter.mode==="remote"` URLs.
+ * @property {string} filter.marker.close Closing marker for embedding filter value in URLs.
+ * @property {string|null} filter.defaultOptionsUrl URL for default options when `filter.mode==="remote"` is set and no filter value is provided.
+ * @property {string} templates.main HTML template string for rendering options and selection badges.
+ * @property {string} templateMapping.selected Template variant for selected items (e.g. badge vs summary view).
+ * @property {string} popper.placement Popper.js placement strategy for dropdown (e.g. "bottom").
+ * @property {Array<string|Object>} popper.middleware Popper.js middleware or offset configurations.
+ * @property {string} mapping.selector Data path or selector to identify entries in imported data.
+ * @property {string} mapping.labelTemplate Template for option labels using placeholders like `${name}`.
+ * @property {string} mapping.valueTemplate Template for option values using placeholders like `${name}`.
+ * @property {Function} mapping.filter Optional callback to filter imported map entries before building `options[]`.
+ * @property {string} empty.defaultValueRadio Default radio-value when no selection exists.
+ * @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(
+ {},
+ super.defaults,
+ {
+ toggleEventType: ["click", "touch"],
+ delegatesFocus: false,
+ options: [],
+ selection: [],
+ showMaxOptions: 10,
+ type: "radio",
+ name: new ID("s").toString(),
+ features: {
+ clearAll: true,
+ clear: true,
+ lazyLoad: false,
+ closeOnSelect: false,
+ 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",
+ method: "GET",
+ mode: "same-origin",
+ credentials: "same-origin",
+ headers: {
+ accept: "application/json",
+ },
+ },
+ filter: {
+ defaultValue: null,
+ mode: FILTER_MODE_DISABLED,
+ position: FILTER_POSITION_INLINE,
+ marker: {
+ open: "{",
+ close: "}",
+ },
+ defaultOptionsUrl: null,
+ },
+ 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: "",
+ defaultValueCheckbox: [],
+ equivalents: [undefined, null, "", NaN],
+ },
+ formatter: {
+ selection: buildSelectionLabel,
+ },
+ templates: {
+ main: getTemplate(),
+ },
+ templateMapping: {
+ /** with the attribute `data-monster-selected-template` the template for the selected options can be defined. */
+ selected: getSelectionTemplate(),
+ },
+
+ total: null,
+
+ popper: {
+ placement: "bottom",
+ middleware: ["flip", "offset:1"],
+ },
+ },
+ initOptionsFromArguments.call(this),
+ );
+ }
+
+ /**
+ * @return {Select}
+ */
+ [assembleMethodSymbol]() {
+ const self = this;
+ super[assembleMethodSymbol]();
+
+ initControlReferences.call(self);
+ initEventHandler.call(self);
+
+ let lazyLoadFlag = self.getOption("features.lazyLoad", false);
+ const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
+
+ initTotal.call(self);
+
+ if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+ self.setOption("features.lazyLoad", false);
+ lazyLoadFlag = false;
+ }
+
+ if (self.hasAttribute("value")) {
+ new Processing(10, () => {
+ const oldValue = self.value;
+ const newValue = self.getAttribute("value");
+ if (oldValue !== newValue) {
+ self.value = newValue;
+ }
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ if (self.getOption("url") !== null) {
+ if (lazyLoadFlag || remoteFilterFlag) {
+ lookupSelection.call(self);
+ } else {
+ self
+ .fetch()
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(self, e);
+ });
+ }
+ }
+
+ setTimeout(() => {
+ let lastValue = self.value;
+ self[internalSymbol].attachObserver(
+ new Observer(function () {
+ if (isObject(this) && this instanceof ProxyObserver) {
+ const n = this.getSubject()?.options?.value;
+
+ if (lastValue !== n && n !== undefined) {
+ lastValue = n;
+ setSelection
+ .call(self, n)
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(self, e);
+ });
+ }
+ }
+ }),
+ );
+
+ areOptionsAvailableAndInit.call(self);
+ }, 0);
+
+ return this;
+ }
+
+ /**
+ *
+ * @return {*}
+ * @throws {Error} storeFetchedData is not enabled
+ * @since 3.66.0
+ */
+ getLastFetchedData() {
+ if (this.getOption("features.storeFetchedData") === false) {
+ throw new Error("storeFetchedData is not enabled");
+ }
+
+ return this?.[lastFetchedDataSymbol];
+ }
+
+ /**
+ * The Button.click() method simulates a click on the internal button element.
+ *
+ * @since 3.27.0
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+ */
+ click() {
+ if (this.getOption("disabled") === true) {
+ return;
+ }
+
+ toggle.call(this);
+ }
+
+ /**
+ * The Button.focus() method sets focus on the internal button element.
+ *
+ * @since 3.27.0
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+ */
+ focus(options) {
+ if (this.getOption("disabled") === true) {
+ return;
+ }
+
+ new Processing(() => {
+ gatherState.call(this);
+ focusFilter.call(this, options);
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ /**
+ * The Button.blur() method removes focus from the internal button element.
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
+ */
+ blur() {
+ new Processing(() => {
+ gatherState.call(this);
+ blurFilter.call(this);
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ /**
+ * If no url is specified, the options are taken from the Component itself.
+ *
+ * @param {string|URL} url URL to fetch the options
+ * @return {Promise}
+ */
+ fetch(url) {
+ return fetchIt.call(this, url);
+ }
+
+ /**
+ * @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]);
+ }
+
+ parseSlotsToOptions.call(this);
+ attachResizeObserver.call(this);
+ updatePopper.call(this);
+
+ new Processing(() => {
+ gatherState.call(this);
+ focusFilter.call(this);
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ /**
+ * @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);
+ }
+
+ /**
+ * Import Select Options from dataset
+ * Not to be confused with the control defaults/options
+ *
+ * @param {array|object|Map|Set} data
+ * @return {Select}
+ * @throws {Error} map is not iterable
+ * @throws {Error} missing label configuration
+ * @fires monster-options-set this event is fired when the options are set
+ */
+ importOptions(data) {
+ this[cleanupOptionsListSymbol] = true;
+ return importOptionsIntern.call(this, data);
+ }
+
+ /**
+ * @private
+ * @return {Select}
+ */
+ calcAndSetOptionsDimension() {
+ calcAndSetOptionsDimension.call(this);
+ return this;
+ }
+
+ /**
+ *
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-select";
+ }
+
+ /**
+ *
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [SelectStyleSheet];
+ }
}
/**
@@ -783,106 +782,104 @@ class Select extends CustomControl {
* @returns {any}
*/
function importOptionsIntern(data) {
- const self = this;
- const mappingOptions = this.getOption("mapping", {});
- const selector = mappingOptions?.["selector"];
- const labelTemplate = mappingOptions?.["labelTemplate"];
- const valueTemplate = mappingOptions?.["valueTemplate"];
- let filter = mappingOptions?.["filter"];
-
- let flag = false;
- if (labelTemplate === "") {
- addErrorAttribute(this, "empty label template");
- flag = true;
- }
-
- if (valueTemplate === "") {
- addErrorAttribute(this, "empty value template");
- flag = true;
- }
-
- if (flag === true) {
- throw new Error("missing label configuration");
- }
-
- if (isString(filter)) {
- if (0 === filter.indexOf("run:")) {
- const code = filter.replace("run:", "");
- filter = (m, v, k) => {
- const fkt = new Function("m", "v", "k", "control", code);
- return fkt(m, v, k, self);
- };
- } else if (0 === filter.indexOf("call:")) {
- const parts = filter.split(":");
- parts.shift(); // remove prefix
- const fkt = parts.shift();
-
- switch (fkt) {
- case "filterValueOfAttribute":
- const attribute = parts.shift();
- const attrValue = self.getAttribute(attribute);
-
- filter = (m, v, k) => {
- const mm = buildValue(m, valueTemplate);
- return mm != attrValue; // no type check, no !==
- };
- break;
-
- default:
- addErrorAttribute(this, new Error(`Unknown filter function ${fkt}`));
- }
- }
- }
-
- const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
-
- let options = [];
- if (this[cleanupOptionsListSymbol] !== true) {
- options = this.getOption("options", []);
- }
-
- if (!isIterable(map)) {
- throw new Error("map is not iterable");
- }
-
- 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,
- visibility,
- data: map.get(value),
- });
- });
-
- this.setOption("options", options);
-
- fireCustomEvent(this, "monster-options-set", {
- options,
- });
-
- setTimeout(() => {
- setSelection
- .call(this, this.getOption("selection"))
- .then(() => {
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- }, 10);
-
- return this;
+ const self = this;
+ const mappingOptions = this.getOption("mapping", {});
+ const selector = mappingOptions?.["selector"];
+ const labelTemplate = mappingOptions?.["labelTemplate"];
+ const valueTemplate = mappingOptions?.["valueTemplate"];
+ let filter = mappingOptions?.["filter"];
+
+ let flag = false;
+ if (labelTemplate === "") {
+ addErrorAttribute(this, "empty label template");
+ flag = true;
+ }
+
+ if (valueTemplate === "") {
+ addErrorAttribute(this, "empty value template");
+ flag = true;
+ }
+
+ if (flag === true) {
+ throw new Error("missing label configuration");
+ }
+
+ if (isString(filter)) {
+ if (0 === filter.indexOf("run:")) {
+ const code = filter.replace("run:", "");
+ filter = (m, v, k) => {
+ const fkt = new Function("m", "v", "k", "control", code);
+ return fkt(m, v, k, self);
+ };
+ } else if (0 === filter.indexOf("call:")) {
+ const parts = filter.split(":");
+ parts.shift(); // remove prefix
+ const fkt = parts.shift();
+
+ switch (fkt) {
+ case "filterValueOfAttribute":
+ const attribute = parts.shift();
+ const attrValue = self.getAttribute(attribute);
+
+ filter = (m, v, k) => {
+ const mm = buildValue(m, valueTemplate);
+ return mm != attrValue; // no type check, no !==
+ };
+ break;
+
+ default:
+ addErrorAttribute(this, new Error(`Unknown filter function ${fkt}`));
+ }
+ }
+ }
+
+ const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
+
+ let options = [];
+ if (this[cleanupOptionsListSymbol] !== true) {
+ options = this.getOption("options", []);
+ }
+
+ if (!isIterable(map)) {
+ throw new Error("map is not iterable");
+ }
+
+ 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,
+ visibility,
+ data: map.get(value),
+ });
+ });
+
+ this.setOption("options", options);
+
+ fireCustomEvent(this, "monster-options-set", {
+ options,
+ });
+
+ setTimeout(() => {
+ setSelection
+ .call(this, this.getOption("selection"))
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }, 10);
+
+ return this;
}
/**
@@ -890,463 +887,516 @@ function importOptionsIntern(data) {
* @returns {object}
*/
function getTranslations() {
- const locale = getLocaleOfDocument();
- switch (locale.language) {
- case "de":
- return {
- "cannot-be-loaded": "Kann nicht geladen werden",
- "no-options-available": "Keine Auswahl verfügbar.",
- "click-to-load-options": "Klicken, um Auswahl zu laden.",
- "select-an-option": "Bitte Auswahl treffen",
- "summary-text": {
- zero: "Keine Auswahl getroffen",
- one: '<span class="monster-badge-primary-pill">1</span> Auswahl getroffen',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> Auswahlen getroffen',
- },
- "no-options": '<span class="monster-badge-error-pill">Leider gibt es keine Auswahlmöglichkeiten in der Liste.</span>',
- "no-options-found": '<span class="monster-badge-error-pill">Keine Auswahlmöglichkeiten verfügbar. Bitte ändern Sie den Filter.</span>',
- "total": {
- zero: '<span class="monster-badge-primary-pill">Es sind keine weiteren Auswahlmöglichkeiten verfügbar.</span>',
- one: '<span class="monster-badge-primary-pill">Es ist 1 weitere Auswahlmöglichkeit verfügbar.</span>',
- other: '<span class="monster-badge-primary-pill">Es sind ${count} weitere Auswahlmöglichkeiten verfügbar.</span>',
- }
- };
-
-
- case "es":
- return {
- "cannot-be-loaded": "No se puede cargar",
- "no-options-available": "No hay opciones disponibles.",
- "click-to-load-options": "Haga clic para cargar opciones.",
- "select-an-option": "Seleccione una opción",
- "summary-text": {
- zero: "No se seleccionaron entradas",
- one: '<span class="monster-badge-primary-pill">1</span> entrada seleccionada',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas',
- },
- "no-options": '<span class="monster-badge-error-pill">Desafortunadamente, no hay opciones disponibles en la lista.</span>',
- "no-options-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。",
- "select-an-option": "Seleziona un'opzione",
- "summary-text": {
- zero: "Nessuna voce selezionata",
- one: '<span class="monster-badge-primary-pill">1</span> voce selezionata',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> voci selezionate',
- },
- "no-options": '<span class="monster-badge-error-pill">Purtroppo, non ci sono opzioni disponibili nella lista。</span>',
- "no-options-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。",
- "select-an-option": "Wybierz opcję",
- "summary-text": {
- zero: "Nie wybrano żadnych wpisów",
- one: '<span class="monster-badge-primary-pill">1</span> wpis został wybrany',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane',
- },
- "no-options": '<span class="monster-badge-error-pill">Niestety, nie ma dostępnych opcji na liście。</span>',
- "no-options-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。",
- "select-an-option": "Velg et alternativ",
- "summary-text": {
- zero: "Ingen oppføringer ble valgt",
- one: '<span class="monster-badge-primary-pill">1</span> oppføring valgt',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt',
- },
- "no-options": '<span class="monster-badge-error-pill">Dessverre er det ingen alternativer tilgjengelig i listen。</span>',
- "no-options-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 "cs":
- return {
- "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: "Žá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> položky vybrány',
- },
- "no-options": '<span class="monster-badge-error-pill">Bohužel nejsou k dispozici žádné možnosti v seznamu。</span>',
- "no-options-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:
- // Fallback to English if locale.language is unrecognized
- return {
- "cannot-be-loaded": "Cannot be loaded",
- "no-options-available": "No options available.",
- "click-to-load-options": "Click to load options.",
- "select-an-option": "Select an option",
- "summary-text": {
- zero: "No entries were selected",
- one: '<span class="monster-badge-primary-pill">1</span> entry was selected',
- other:
- '<span class="monster-badge-primary-pill">${count}</span> entries were selected',
- },
- "no-options": '<span class="monster-badge-error-pill">Unfortunately, there are no options available in the list.</span>',
- "no-options-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>',
- }
- };
- }
+ const locale = getLocaleOfDocument();
+ switch (locale.language) {
+ case "de":
+ return {
+ "cannot-be-loaded": "Kann nicht geladen werden",
+ "no-options-available": "Keine Auswahl verfügbar.",
+ "click-to-load-options": "Klicken, um Auswahl zu laden.",
+ "select-an-option": "Bitte Auswahl treffen",
+ "summary-text": {
+ zero: "Keine Auswahl getroffen",
+ one: '<span class="monster-badge-primary-pill">1</span> Auswahl getroffen',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> Auswahlen getroffen',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Leider gibt es keine Auswahlmöglichkeiten in der Liste.</span>',
+ "no-options-found":
+ '<span class="monster-badge-error-pill">Keine Auswahlmöglichkeiten verfügbar. Bitte ändern Sie den Filter.</span>',
+ total: {
+ zero: '<span class="monster-badge-primary-pill">Es sind keine weiteren Auswahlmöglichkeiten verfügbar.</span>',
+ one: '<span class="monster-badge-primary-pill">Es ist 1 weitere Auswahlmöglichkeit verfügbar.</span>',
+ other:
+ '<span class="monster-badge-primary-pill">Es sind ${count} weitere Auswahlmöglichkeiten verfügbar.</span>',
+ },
+ };
+
+ case "es":
+ return {
+ "cannot-be-loaded": "No se puede cargar",
+ "no-options-available": "No hay opciones disponibles.",
+ "click-to-load-options": "Haga clic para cargar opciones.",
+ "select-an-option": "Seleccione una opción",
+ "summary-text": {
+ zero: "No se seleccionaron entradas",
+ one: '<span class="monster-badge-primary-pill">1</span> entrada seleccionada',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Desafortunadamente, no hay opciones disponibles en la lista.</span>',
+ "no-options-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。",
+ "select-an-option": "Seleziona un'opzione",
+ "summary-text": {
+ zero: "Nessuna voce selezionata",
+ one: '<span class="monster-badge-primary-pill">1</span> voce selezionata',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> voci selezionate',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Purtroppo, non ci sono opzioni disponibili nella lista。</span>',
+ "no-options-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。",
+ "select-an-option": "Wybierz opcję",
+ "summary-text": {
+ zero: "Nie wybrano żadnych wpisów",
+ one: '<span class="monster-badge-primary-pill">1</span> wpis został wybrany',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Niestety, nie ma dostępnych opcji na liście。</span>',
+ "no-options-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。",
+ "select-an-option": "Velg et alternativ",
+ "summary-text": {
+ zero: "Ingen oppføringer ble valgt",
+ one: '<span class="monster-badge-primary-pill">1</span> oppføring valgt',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Dessverre er det ingen alternativer tilgjengelig i listen。</span>',
+ "no-options-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 "cs":
+ return {
+ "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: "Žá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> položky vybrány',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Bohužel nejsou k dispozici žádné možnosti v seznamu。</span>',
+ "no-options-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:
+ // Fallback to English if locale.language is unrecognized
+ return {
+ "cannot-be-loaded": "Cannot be loaded",
+ "no-options-available": "No options available.",
+ "click-to-load-options": "Click to load options.",
+ "select-an-option": "Select an option",
+ "summary-text": {
+ zero: "No entries were selected",
+ one: '<span class="monster-badge-primary-pill">1</span> entry was selected',
+ other:
+ '<span class="monster-badge-primary-pill">${count}</span> entries were selected',
+ },
+ "no-options":
+ '<span class="monster-badge-error-pill">Unfortunately, there are no options available in the list.</span>',
+ "no-options-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
*/
function lookupSelection() {
- const self = this;
-
- setTimeout(() => {
- const selection = self.getOption("selection");
- if (selection.length === 0) {
- return;
- }
-
- if (self[isLoadingSymbol] === true) {
- return;
- }
-
- if (self[lazyLoadDoneSymbol] === true) {
- return;
- }
-
- let url = self.getOption("url");
- const lookupUrl = self.getOption("lookup.url");
- if (lookupUrl !== null) {
- url = lookupUrl;
- }
-
- this[cleanupOptionsListSymbol] = false;
-
- if (this.getOption("lookup.grouping") === true) {
- filterFromRemoteByValue
- .call(
- self,
- url,
- selection.map((s) => s?.["value"]),
- )
- .catch((e) => {
- addErrorAttribute(self, e);
- });
- return;
- }
-
- for (const s of selection) {
- if (s?.["value"]) {
- filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => {
- addErrorAttribute(self, e);
- });
- }
- }
-
-
- }, 100);
+ const self = this;
+
+ setTimeout(() => {
+ const selection = self.getOption("selection");
+ if (selection.length === 0) {
+ return;
+ }
+
+ if (self[isLoadingSymbol] === true) {
+ return;
+ }
+
+ if (self[lazyLoadDoneSymbol] === true) {
+ return;
+ }
+
+ let url = self.getOption("url");
+ const lookupUrl = self.getOption("lookup.url");
+ if (lookupUrl !== null) {
+ url = lookupUrl;
+ }
+
+ this[cleanupOptionsListSymbol] = false;
+
+ if (this.getOption("lookup.grouping") === true) {
+ filterFromRemoteByValue
+ .call(
+ self,
+ url,
+ selection.map((s) => s?.["value"]),
+ )
+ .catch((e) => {
+ addErrorAttribute(self, e);
+ });
+ return;
+ }
+
+ for (const s of selection) {
+ if (s?.["value"]) {
+ filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => {
+ addErrorAttribute(self, e);
+ });
+ }
+ }
+ }, 100);
}
/**
@@ -1356,85 +1406,84 @@ function lookupSelection() {
* @returns {Promise<never>|Promise<unknown>}
*/
function fetchIt(url, controlOptions) {
- const self = this;
-
- if (url instanceof URL) {
- url = url.toString();
- }
-
- if (url !== undefined && url !== null) {
- url = validateString(url);
- } else {
- url = this.getOption("url");
- if (url === null) {
- return Promise.reject(new Error("No url defined"));
- }
- }
-
- return new Promise((resolve, reject) => {
- setStatusOrRemoveBadges.call(this, "loading");
-
- new Processing(10, () => {
- fetchData
- .call(this, url)
- .then((map) => {
- if (
- isObject(map) ||
- isArray(map) ||
- map instanceof Set ||
- map instanceof Map
- ) {
- try {
- importOptionsIntern.call(self, map);
- } catch (e) {
- setStatusOrRemoveBadges.call(this, "error");
- reject(e);
- return;
- }
-
- this[lastFetchedDataSymbol] = map;
-
- let result;
- const selection = this.getOption("selection");
- let newValue = [];
- if (selection) {
- newValue = selection;
- } else if (this.hasAttribute("value")) {
- newValue = this.getAttribute("value");
- }
-
- result = setSelection.call(this, newValue);
-
- queueMicrotask(() => {
- checkOptionState.call(this);
- setTotalText.call(this);
- updatePopper.call(this);
- setStatusOrRemoveBadges.call(this, "closed");
-
- resolve(result);
- });
-
- return;
- }
-
- setStatusOrRemoveBadges.call(this, "error");
- reject(new Error("invalid response"));
- })
- .catch((e) => {
- setStatusOrRemoveBadges.call(this, "error");
- reject(e);
- });
- })
- .run()
- .catch((e) => {
- setStatusOrRemoveBadges.call(this, "error");
- addErrorAttribute(this, e);
- reject(e);
- });
- });
+ const self = this;
+
+ if (url instanceof URL) {
+ url = url.toString();
+ }
+
+ if (url !== undefined && url !== null) {
+ url = validateString(url);
+ } else {
+ url = this.getOption("url");
+ if (url === null) {
+ return Promise.reject(new Error("No url defined"));
+ }
+ }
+
+ return new Promise((resolve, reject) => {
+ setStatusOrRemoveBadges.call(this, "loading");
+
+ new Processing(10, () => {
+ fetchData
+ .call(this, url)
+ .then((map) => {
+ if (
+ isObject(map) ||
+ isArray(map) ||
+ map instanceof Set ||
+ map instanceof Map
+ ) {
+ try {
+ importOptionsIntern.call(self, map);
+ } catch (e) {
+ setStatusOrRemoveBadges.call(this, "error");
+ reject(e);
+ return;
+ }
+
+ this[lastFetchedDataSymbol] = map;
+
+ let result;
+ const selection = this.getOption("selection");
+ let newValue = [];
+ if (selection) {
+ newValue = selection;
+ } else if (this.hasAttribute("value")) {
+ newValue = this.getAttribute("value");
+ }
+
+ result = setSelection.call(this, newValue);
+
+ queueMicrotask(() => {
+ checkOptionState.call(this);
+ setTotalText.call(this);
+ updatePopper.call(this);
+ setStatusOrRemoveBadges.call(this, "closed");
+
+ resolve(result);
+ });
+
+ return;
+ }
+
+ setStatusOrRemoveBadges.call(this, "error");
+ reject(new Error("invalid response"));
+ })
+ .catch((e) => {
+ setStatusOrRemoveBadges.call(this, "error");
+ reject(e);
+ });
+ })
+ .run()
+ .catch((e) => {
+ setStatusOrRemoveBadges.call(this, "error");
+ addErrorAttribute(this, e);
+ reject(e);
+ });
+ });
}
-
/**
* This attribute can be used to pass a URL to this select.
*
@@ -1447,66 +1496,66 @@ function fetchIt(url, controlOptions) {
* @return {object}
*/
function initOptionsFromArguments() {
- const options = {};
-
- const template = this.getAttribute("data-monster-selected-template");
- if (isString(template)) {
- if (!options["templateMapping"]) options["templateMapping"] = {};
-
- switch (template) {
- case "summary":
- case "default":
- options["templateMapping"]["selected"] = getSummaryTemplate();
- break;
- case "selected":
- options["templateMapping"]["selected"] = getSelectionTemplate();
- break;
- default:
- addErrorAttribute(this, "invalid template, use summary or selected");
- }
- }
-
- return options;
+ const options = {};
+
+ const template = this.getAttribute("data-monster-selected-template");
+ if (isString(template)) {
+ if (!options["templateMapping"]) options["templateMapping"] = {};
+
+ switch (template) {
+ case "summary":
+ case "default":
+ options["templateMapping"]["selected"] = getSummaryTemplate();
+ break;
+ case "selected":
+ options["templateMapping"]["selected"] = getSelectionTemplate();
+ break;
+ default:
+ addErrorAttribute(this, "invalid template, use summary or selected");
+ }
+ }
+
+ return options;
}
/**
* @private
*/
function attachResizeObserver() {
- // against flickering
- this[resizeObserverSymbol] = new ResizeObserver((entries) => {
- if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
- try {
- this[timerCallbackSymbol].touch();
- return;
- } catch (e) {
- delete this[timerCallbackSymbol];
- }
- }
-
- this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
- updatePopper.call(this);
- delete this[timerCallbackSymbol];
- });
- });
-
- let parent = this.parentNode;
- while (!(parent instanceof HTMLElement) && parent !== null) {
- parent = parent.parentNode;
- }
-
- if (parent instanceof HTMLElement) {
- this[resizeObserverSymbol].observe(parent);
- }
+ // against flickering
+ this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+ if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+ try {
+ this[timerCallbackSymbol].touch();
+ return;
+ } catch (e) {
+ delete this[timerCallbackSymbol];
+ }
+ }
+
+ this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+ updatePopper.call(this);
+ delete this[timerCallbackSymbol];
+ });
+ });
+
+ let parent = this.parentNode;
+ while (!(parent instanceof HTMLElement) && parent !== null) {
+ parent = parent.parentNode;
+ }
+
+ if (parent instanceof HTMLElement) {
+ this[resizeObserverSymbol].observe(parent);
+ }
}
/**
* @private
*/
function disconnectResizeObserver() {
- if (this[resizeObserverSymbol] instanceof ResizeObserver) {
- this[resizeObserverSymbol].disconnect();
- }
+ if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+ this[resizeObserverSymbol].disconnect();
+ }
}
/**
@@ -1514,7 +1563,7 @@ function disconnectResizeObserver() {
* @returns {string}
*/
function getSelectionTemplate() {
- return `<div data-monster-role="selection" part="selection"
+ return `<div data-monster-role="selection" part="selection"
data-monster-insert="selection path:selection" role="search"
><input type="text" role="searchbox"
part="inline-filter" name="inline-filter"
@@ -1531,7 +1580,7 @@ function getSelectionTemplate() {
* @returns {string}
*/
function getSummaryTemplate() {
- return `<div data-monster-role="selection" role="search" part="summary">
+ 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"
@@ -1548,34 +1597,34 @@ function getSummaryTemplate() {
* @private
*/
function parseSlotsToOptions() {
- let options = this.getOption("options");
- if (!isIterable(options)) {
- options = [];
- }
-
- let counter = 1;
- getSlottedElements.call(this, "div").forEach((node) => {
- let value = (counter++).toString();
- let visibility = "visible";
-
- if (node.hasAttribute("data-monster-value")) {
- value = node.getAttribute("data-monster-value");
- }
-
- let label = node.outerHTML;
-
- if (node.style.display === "none") {
- visibility = "hidden";
- }
-
- options.push({
- value,
- label,
- visibility,
- });
- });
-
- this.setOption("options", options);
+ let options = this.getOption("options");
+ if (!isIterable(options)) {
+ options = [];
+ }
+
+ let counter = 1;
+ getSlottedElements.call(this, "div").forEach((node) => {
+ let value = (counter++).toString();
+ let visibility = "visible";
+
+ if (node.hasAttribute("data-monster-value")) {
+ value = node.getAttribute("data-monster-value");
+ }
+
+ let label = node.outerHTML;
+
+ if (node.style.display === "none") {
+ visibility = "hidden";
+ }
+
+ options.push({
+ value,
+ label,
+ visibility,
+ });
+ });
+
+ this.setOption("options", options);
}
/**
@@ -1584,38 +1633,38 @@ function parseSlotsToOptions() {
* @return {*}
*/
function buildSelectionLabel(value) {
- const options = this.getOption("options");
-
- for (let i = 0; i < options.length; i++) {
- let o = options?.[i];
- let l, v, v2;
-
- if (this.getOption("features.useStrictValueComparison") === true) {
- v = value;
- } else {
- v = `${value}`;
- }
-
- if (isPrimitive(o) && o === value) {
- return o;
- } else if (!isObject(o)) {
- continue;
- }
-
- if (this.getOption("features.useStrictValueComparison") === true) {
- l = o?.["label"];
- v2 = o?.["value"];
- } else {
- l = `${o?.["label"]}`;
- v2 = `${o?.["value"]}`;
- }
-
- if (v2 === v) {
- return l;
- }
- }
-
- return undefined;
+ const options = this.getOption("options");
+
+ for (let i = 0; i < options.length; i++) {
+ let o = options?.[i];
+ let l, v, v2;
+
+ if (this.getOption("features.useStrictValueComparison") === true) {
+ v = value;
+ } else {
+ v = `${value}`;
+ }
+
+ if (isPrimitive(o) && o === value) {
+ return o;
+ } else if (!isObject(o)) {
+ continue;
+ }
+
+ if (this.getOption("features.useStrictValueComparison") === true) {
+ l = o?.["label"];
+ v2 = o?.["value"];
+ } else {
+ l = `${o?.["label"]}`;
+ v2 = `${o?.["value"]}`;
+ }
+
+ if (v2 === v) {
+ return l;
+ }
+ }
+
+ return undefined;
}
/**
@@ -1625,17 +1674,17 @@ function buildSelectionLabel(value) {
* @throws {Error} no value found
*/
function getSelectionLabel(value) {
- const callback = this.getOption("formatter.selection");
- if (isFunction(callback)) {
- const label = callback.call(this, value);
- if (isString(label)) return label;
- }
+ const callback = this.getOption("formatter.selection");
+ if (isFunction(callback)) {
+ const label = callback.call(this, value);
+ if (isString(label)) return label;
+ }
- if (isString(value) || isInteger(value)) {
- return `${value}`;
- }
+ if (isString(value) || isInteger(value)) {
+ return `${value}`;
+ }
- return this.getOption("labels.cannot-be-loaded", value);
+ return this.getOption("labels.cannot-be-loaded", value);
}
/**
@@ -1643,25 +1692,25 @@ function getSelectionLabel(value) {
* @param {Event} event
*/
function handleToggleKeyboardEvents(event) {
- switch (event?.["code"]) {
- case "Escape":
- toggle.call(this);
- event.preventDefault();
- break;
- case "Space":
- toggle.call(this);
- event.preventDefault();
- break;
- case "ArrowDown":
- show.call(this);
- activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
- event.preventDefault();
- break;
- case "ArrowUp":
- hide.call(this);
- event.preventDefault();
- break;
- }
+ switch (event?.["code"]) {
+ case "Escape":
+ toggle.call(this);
+ event.preventDefault();
+ break;
+ case "Space":
+ toggle.call(this);
+ event.preventDefault();
+ break;
+ case "ArrowDown":
+ show.call(this);
+ activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+ event.preventDefault();
+ break;
+ case "ArrowUp":
+ hide.call(this);
+ event.preventDefault();
+ break;
+ }
}
/**
@@ -1671,28 +1720,28 @@ function handleToggleKeyboardEvents(event) {
* @this CustomElement
*/
function initOptionObserver() {
- const self = this;
-
- self.attachObserver(
- new Observer(function () {
- new Processing(() => {
- try {
- self.updateI18n();
- } catch (e) {
- addErrorAttribute(self, e);
- setStatusOrRemoveBadges.call(self, "error");
- }
- try {
- areOptionsAvailableAndInit.call(self);
- } catch (e) {
- addErrorAttribute(self, e);
- setStatusOrRemoveBadges.call(self, "error");
- }
-
- setSummaryAndControlText.call(self);
- }).run();
- }),
- );
+ const self = this;
+
+ self.attachObserver(
+ new Observer(function () {
+ new Processing(() => {
+ try {
+ self.updateI18n();
+ } catch (e) {
+ addErrorAttribute(self, e);
+ setStatusOrRemoveBadges.call(self, "error");
+ }
+ try {
+ areOptionsAvailableAndInit.call(self);
+ } catch (e) {
+ addErrorAttribute(self, e);
+ setStatusOrRemoveBadges.call(self, "error");
+ }
+
+ setSummaryAndControlText.call(self);
+ }).run();
+ }),
+ );
}
/**
@@ -1700,58 +1749,52 @@ function initOptionObserver() {
* @returns {Translations}
*/
function getDefaultTranslation() {
- const translation = new Translations("en").assignTranslations(
- this.getOption("labels", {}),
- );
+ const translation = new Translations("en").assignTranslations(
+ this.getOption("labels", {}),
+ );
- try {
- const doc = getDocumentTranslations();
- translation.locale = doc.locale;
- } catch (e) {
- }
+ try {
+ const doc = getDocumentTranslations();
+ translation.locale = doc.locale;
+ } catch (e) {}
- return translation;
+ return translation;
}
/**
* @private
*/
function setTotalText() {
+ if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
+ return;
+ }
- if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
- return;
- }
-
- if (this.getOption("features.showRemoteInfo") !== true) {
- return;
- }
+ if (this.getOption("features.showRemoteInfo") !== true) {
+ return;
+ }
- const count = this.getOption("options").length;
- const total = Number.parseInt(this.getOption("total"));
+ const count = this.getOption("options").length;
+ const total = Number.parseInt(this.getOption("total"));
- if (Number.isNaN(total)) {
- this.setOption("messages.total", "");
- return;
- }
+ if (Number.isNaN(total)) {
+ this.setOption("messages.total", "");
+ return;
+ }
- const translations = getDefaultTranslation.call(this);
- const text = translations.getPluralRuleText(
- "total",
- total,
- "",
- );
+ const translations = getDefaultTranslation.call(this);
+ const text = translations.getPluralRuleText("total", total, "");
- const diff = total - count;
- if (diff <= 0) {
- this.setOption("messages.total", "");
- return;
- }
+ const diff = total - count;
+ if (diff <= 0) {
+ this.setOption("messages.total", "");
+ return;
+ }
- const selectedText = new Formatter({
- count: String(diff),
- }).format(text);
+ const selectedText = new Formatter({
+ count: String(diff),
+ }).format(text);
- this.setOption("messages.total", selectedText);
+ this.setOption("messages.total", selectedText);
}
/**
@@ -1759,36 +1802,36 @@ function setTotalText() {
* @return {string|*}
*/
function setSummaryAndControlText() {
- const translations = getDefaultTranslation.call(this);
- const selections = this.getOption("selection");
-
- const text = translations.getPluralRuleText(
- "summary-text",
- selections.length,
- "",
- );
-
- const selectedText = new Formatter({
- count: String(selections.length),
- }).format(text);
-
- this.setOption("messages.selected", selectedText);
-
- const current = this.getOption("messages.control");
- const msg = this.getOption("labels.select-an-option");
-
- if (
- current === "" ||
- current === undefined ||
- current === msg ||
- current === null
- ) {
- if (selections.length === 0) {
- this.setOption("messages.control", msg);
- } else {
- this.setOption("messages.control", "");
- }
- }
+ const translations = getDefaultTranslation.call(this);
+ const selections = this.getOption("selection");
+
+ const text = translations.getPluralRuleText(
+ "summary-text",
+ selections.length,
+ "",
+ );
+
+ const selectedText = new Formatter({
+ count: String(selections.length),
+ }).format(text);
+
+ this.setOption("messages.selected", selectedText);
+
+ const current = this.getOption("messages.control");
+ const msg = this.getOption("labels.select-an-option");
+
+ if (
+ current === "" ||
+ current === undefined ||
+ current === msg ||
+ current === null
+ ) {
+ if (selections.length === 0) {
+ this.setOption("messages.control", msg);
+ } else {
+ this.setOption("messages.control", "");
+ }
+ }
}
/**
@@ -1796,9 +1839,9 @@ function setSummaryAndControlText() {
* @return {NodeList}
*/
function getOptionElements() {
- return this[optionsElementSymbol].querySelectorAll(
- `[${ATTRIBUTE_ROLE}=option]`,
- );
+ return this[optionsElementSymbol].querySelectorAll(
+ `[${ATTRIBUTE_ROLE}=option]`,
+ );
}
/**
@@ -1822,82 +1865,80 @@ function getOptionElements() {
* @private
*/
function calcAndSetOptionsDimension() {
- const options = getOptionElements.call(this);
- const container = this[optionsElementSymbol];
- if (!(container instanceof HTMLElement && options instanceof NodeList)) {
- return;
- }
-
- let visible = 0;
- let optionHeight = 0;
- const max = this.getOption("showMaxOptions", 10);
-
- let scrollFlag = false;
- for (const [, option] of Object.entries(options)) {
-
- const computedStyle = getGlobal().getComputedStyle(option);
- if (computedStyle.display === "none") continue;
-
- let h = option.getBoundingClientRect().height;
- h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
- h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
- optionHeight += h;
-
- visible++;
-
- if (visible > max) {
- break;
- }
- }
-
- if (visible > max) {
- visible = max;
- scrollFlag = true;
- }
-
- if (visible === 0) {
- if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
- this.setOption(
- "messages.emptyOptions",
- this.getOption("labels.no-options-available"),
- );
- } else {
- this.setOption(
- "messages.emptyOptions",
- this.getOption("labels.no-options-found"),
- );
- }
-
- let classes = new TokenList(this.getOption("classes.noOptions"));
- classes.remove("d-none");
- this.setOption("classes.noOptions", classes.toString());
-
- } else {
- let classes = new TokenList(this.getOption("classes.noOptions"));
- classes.add("d-none");
- this.setOption("classes.noOptions", classes.toString());
- }
-
- const styles = getGlobal().getComputedStyle(this[optionsElementSymbol]);
- let padding = parseInt(styles.getPropertyValue("padding-top"), 10);
- padding += parseInt(styles.getPropertyValue("padding-bottom"), 10);
-
- let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
- margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
-
- const containerHeight = optionHeight + padding + margin;
- container.style.height = `${containerHeight}px`;
-
- if (scrollFlag === true) {
- container.style.overflowY = "scroll";
- } else {
- container.style.overflowY = "auto";
- }
-
- const domRect = this[controlElementSymbol].getBoundingClientRect();
-
- this[popperElementSymbol].style.width = `${domRect.width}px`;
- container.style.overflowX = "auto";
+ const options = getOptionElements.call(this);
+ const container = this[optionsElementSymbol];
+ if (!(container instanceof HTMLElement && options instanceof NodeList)) {
+ return;
+ }
+
+ let visible = 0;
+ let optionHeight = 0;
+ const max = this.getOption("showMaxOptions", 10);
+
+ let scrollFlag = false;
+ for (const [, option] of Object.entries(options)) {
+ const computedStyle = getGlobal().getComputedStyle(option);
+ if (computedStyle.display === "none") continue;
+
+ let h = option.getBoundingClientRect().height;
+ h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
+ h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
+ optionHeight += h;
+
+ visible++;
+
+ if (visible > max) {
+ break;
+ }
+ }
+
+ if (visible > max) {
+ visible = max;
+ scrollFlag = true;
+ }
+
+ if (visible === 0) {
+ if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+ this.setOption(
+ "messages.emptyOptions",
+ this.getOption("labels.no-options-available"),
+ );
+ } else {
+ this.setOption(
+ "messages.emptyOptions",
+ this.getOption("labels.no-options-found"),
+ );
+ }
+
+ let classes = new TokenList(this.getOption("classes.noOptions"));
+ classes.remove("d-none");
+ this.setOption("classes.noOptions", classes.toString());
+ } else {
+ let classes = new TokenList(this.getOption("classes.noOptions"));
+ classes.add("d-none");
+ this.setOption("classes.noOptions", classes.toString());
+ }
+
+ const styles = getGlobal().getComputedStyle(this[optionsElementSymbol]);
+ let padding = parseInt(styles.getPropertyValue("padding-top"), 10);
+ padding += parseInt(styles.getPropertyValue("padding-bottom"), 10);
+
+ let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
+ margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
+
+ const containerHeight = optionHeight + padding + margin;
+ container.style.height = `${containerHeight}px`;
+
+ if (scrollFlag === true) {
+ container.style.overflowY = "scroll";
+ } else {
+ container.style.overflowY = "auto";
+ }
+
+ const domRect = this[controlElementSymbol].getBoundingClientRect();
+
+ this[popperElementSymbol].style.width = `${domRect.width}px`;
+ container.style.overflowX = "auto";
}
/**
@@ -1906,126 +1947,126 @@ function calcAndSetOptionsDimension() {
* @throws {Error} no shadow-root is defined
*/
function activateCurrentOption(direction) {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- let focused = this.shadowRoot.querySelector(`[${ATTRIBUTE_PREFIX}focused]`);
-
- if (
- !(focused instanceof HTMLElement) ||
- focused.matches("[data-monster-visibility=hidden]")
- ) {
- for (const [, e] of Object.entries(
- this.shadowRoot.querySelectorAll(`[${ATTRIBUTE_ROLE}=option]`),
- )) {
- if (e.matches("[data-monster-visibility=visible]")) {
- focused = e;
- break;
- }
- }
- } else {
- if (direction === FOCUS_DIRECTION_DOWN) {
- while (focused.nextSibling) {
- focused = focused.nextSibling;
-
- if (
- focused instanceof HTMLElement &&
- focused.hasAttribute(ATTRIBUTE_ROLE) &&
- focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
- focused.matches("[data-monster-visibility=visible]") &&
- focused.matches(":not([data-monster-filtered=true])")
- ) {
- break;
- }
- }
- } else {
- let found = false;
- while (focused.previousSibling) {
- focused = focused.previousSibling;
- if (
- focused instanceof HTMLElement &&
- focused.hasAttribute(ATTRIBUTE_ROLE) &&
- focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
- focused.matches("[data-monster-visibility=visible]") &&
- focused.matches(":not([data-monster-filtered=true])")
- ) {
- found = true;
- break;
- }
- }
- if (found === false) {
- focusFilter.call(this);
- }
- }
- }
-
- new Processing(() => {
- if (focused instanceof HTMLElement) {
- this.shadowRoot
- .querySelectorAll(`[${ATTRIBUTE_PREFIX}focused]`)
- .forEach((e) => {
- e.removeAttribute(`${ATTRIBUTE_PREFIX}focused`);
- });
-
- focused.focus();
- focused.setAttribute(`${ATTRIBUTE_PREFIX}focused`, true);
- }
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ let focused = this.shadowRoot.querySelector(`[${ATTRIBUTE_PREFIX}focused]`);
+
+ if (
+ !(focused instanceof HTMLElement) ||
+ focused.matches("[data-monster-visibility=hidden]")
+ ) {
+ for (const [, e] of Object.entries(
+ this.shadowRoot.querySelectorAll(`[${ATTRIBUTE_ROLE}=option]`),
+ )) {
+ if (e.matches("[data-monster-visibility=visible]")) {
+ focused = e;
+ break;
+ }
+ }
+ } else {
+ if (direction === FOCUS_DIRECTION_DOWN) {
+ while (focused.nextSibling) {
+ focused = focused.nextSibling;
+
+ if (
+ focused instanceof HTMLElement &&
+ focused.hasAttribute(ATTRIBUTE_ROLE) &&
+ focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
+ focused.matches("[data-monster-visibility=visible]") &&
+ focused.matches(":not([data-monster-filtered=true])")
+ ) {
+ break;
+ }
+ }
+ } else {
+ let found = false;
+ while (focused.previousSibling) {
+ focused = focused.previousSibling;
+ if (
+ focused instanceof HTMLElement &&
+ focused.hasAttribute(ATTRIBUTE_ROLE) &&
+ focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
+ focused.matches("[data-monster-visibility=visible]") &&
+ focused.matches(":not([data-monster-filtered=true])")
+ ) {
+ found = true;
+ break;
+ }
+ }
+ if (found === false) {
+ focusFilter.call(this);
+ }
+ }
+ }
+
+ new Processing(() => {
+ if (focused instanceof HTMLElement) {
+ this.shadowRoot
+ .querySelectorAll(`[${ATTRIBUTE_PREFIX}focused]`)
+ .forEach((e) => {
+ e.removeAttribute(`${ATTRIBUTE_PREFIX}focused`);
+ });
+
+ focused.focus();
+ focused.setAttribute(`${ATTRIBUTE_PREFIX}focused`, true);
+ }
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
}
/**
* @private
*/
function filterOptions() {
- new Processing(() => {
- let filterValue;
-
- switch (this.getOption("filter.position")) {
- case FILTER_POSITION_INLINE:
- if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
- filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
- } else {
- return;
- }
-
- break;
- case FILTER_POSITION_POPPER:
- default:
- if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
- filterValue = this[popperFilterElementSymbol].value.toLowerCase();
- } else {
- return;
- }
- }
-
- const options = this.getOption("options");
- for (const [i, option] of Object.entries(options)) {
- if (option.label.toLowerCase().indexOf(filterValue) === -1) {
- this.setOption(`options.${i}.filtered`, "true");
- } else {
- this.setOption(`options.${i}.filtered`, undefined);
- }
- }
- })
- .run()
- .then(() => {
- new Processing(100, () => {
- calcAndSetOptionsDimension.call(this);
- focusFilter.call(this);
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- });
+ new Processing(() => {
+ let filterValue;
+
+ switch (this.getOption("filter.position")) {
+ case FILTER_POSITION_INLINE:
+ if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
+ filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
+ } else {
+ return;
+ }
+
+ break;
+ case FILTER_POSITION_POPPER:
+ default:
+ if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+ filterValue = this[popperFilterElementSymbol].value.toLowerCase();
+ } else {
+ return;
+ }
+ }
+
+ const options = this.getOption("options");
+ for (const [i, option] of Object.entries(options)) {
+ if (option.label.toLowerCase().indexOf(filterValue) === -1) {
+ this.setOption(`options.${i}.filtered`, "true");
+ } else {
+ this.setOption(`options.${i}.filtered`, undefined);
+ }
+ }
+ })
+ .run()
+ .then(() => {
+ new Processing(100, () => {
+ calcAndSetOptionsDimension.call(this);
+ focusFilter.call(this);
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ })
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
}
/**
@@ -2033,37 +2074,37 @@ function filterOptions() {
* @param {Event} event
*/
function handleFilterKeyboardEvents(event) {
- const shiftKey = event?.["shiftKey"];
-
- switch (event?.["code"]) {
- case "Tab":
- activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
- event.preventDefault();
- break;
- case "Escape":
- toggle.call(this);
- event.preventDefault();
- break;
- case "Tab" && shiftKey === true:
- case "ArrowUp":
- activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
- event.preventDefault();
- break;
- case "Tab" && !shiftKey:
- case "ArrowDown":
- activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
- event.preventDefault();
- break;
- default:
- if (
- this.getOption("features.lazyLoad") === true &&
- this[lazyLoadDoneSymbol] !== true
- ) {
- this.click();
- }
-
- handleFilterKeyEvents.call(this);
- }
+ const shiftKey = event?.["shiftKey"];
+
+ switch (event?.["code"]) {
+ case "Tab":
+ activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+ event.preventDefault();
+ break;
+ case "Escape":
+ toggle.call(this);
+ event.preventDefault();
+ break;
+ case "Tab" && shiftKey === true:
+ case "ArrowUp":
+ activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
+ event.preventDefault();
+ break;
+ case "Tab" && !shiftKey:
+ case "ArrowDown":
+ activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+ event.preventDefault();
+ break;
+ default:
+ if (
+ this.getOption("features.lazyLoad") === true &&
+ this[lazyLoadDoneSymbol] !== true
+ ) {
+ this.click();
+ }
+
+ handleFilterKeyEvents.call(this);
+ }
}
/**
@@ -2077,69 +2118,68 @@ function handleFilterKeyboardEvents(event) {
* @return {void} This method does not return anything.
*/
function handleFilterKeyEvents() {
- if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
- try {
- this[keyFilterEventSymbol].touch();
- return;
- } catch (e) {
- delete this[keyFilterEventSymbol];
- }
- }
-
- this[keyFilterEventSymbol] = new DeadMansSwitch(200, () => {
- if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
- filterOptions.call(this);
- } else {
- this[cleanupOptionsListSymbol] = true;
-
- filterFromRemote.call(this).catch((e) => {
- addErrorAttribute(this, e);
- });
- }
-
- delete this[keyFilterEventSymbol];
- });
+ if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
+ try {
+ this[keyFilterEventSymbol].touch();
+ return;
+ } catch (e) {
+ delete this[keyFilterEventSymbol];
+ }
+ }
+
+ this[keyFilterEventSymbol] = new DeadMansSwitch(200, () => {
+ if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
+ filterOptions.call(this);
+ } else {
+ this[cleanupOptionsListSymbol] = true;
+
+ filterFromRemote.call(this).catch((e) => {
+ addErrorAttribute(this, e);
+ });
+ }
+
+ delete this[keyFilterEventSymbol];
+ });
}
/**
* @private
*/
function filterFromRemote() {
-
- if (
- !(this[inlineFilterElementSymbol] instanceof HTMLElement) &&
- !(this[popperFilterElementSymbol] instanceof HTMLElement)
- ) {
- return Promise.reject(new Error("Missing Filter Element."));
- }
-
- show.call(this);
-
- const url = this.getOption("url");
- if (!url) {
- addErrorAttribute(this, "Missing URL for Remote Filter.");
- return Promise.reject(new Error("Missing URL for Remote Filter."));
- }
-
- let filterValue;
- let showFlag = false;
-
- switch (this.getOption("filter.position")) {
- case FILTER_POSITION_INLINE:
- if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
- filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
- }
- showFlag = true;
-
- break;
- case FILTER_POSITION_POPPER:
- default:
- if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
- filterValue = this[popperFilterElementSymbol].value.toLowerCase();
- }
- }
-
- return filterFromRemoteByValue.call(this, url, filterValue, showFlag);
+ if (
+ !(this[inlineFilterElementSymbol] instanceof HTMLElement) &&
+ !(this[popperFilterElementSymbol] instanceof HTMLElement)
+ ) {
+ return Promise.reject(new Error("Missing Filter Element."));
+ }
+
+ show.call(this);
+
+ const url = this.getOption("url");
+ if (!url) {
+ addErrorAttribute(this, "Missing URL for Remote Filter.");
+ return Promise.reject(new Error("Missing URL for Remote Filter."));
+ }
+
+ let filterValue;
+ let showFlag = false;
+
+ switch (this.getOption("filter.position")) {
+ case FILTER_POSITION_INLINE:
+ if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
+ filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
+ }
+ showFlag = true;
+
+ break;
+ case FILTER_POSITION_POPPER:
+ default:
+ if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+ filterValue = this[popperFilterElementSymbol].value.toLowerCase();
+ }
+ }
+
+ return filterFromRemoteByValue.call(this, url, filterValue, showFlag);
}
/**
@@ -2149,25 +2189,25 @@ function filterFromRemote() {
* @returns {string}
*/
function formatURL(url, value) {
- if (value === undefined || value === null || value === "") {
- value = this.getOption("filter.defaultValue");
- if (value === undefined || value === null) {
- value = disabledRequestMarker.toString();
- }
- }
-
- const formatter = new Formatter({filter: encodeURI(value)});
- const openMarker = this.getOption("filter.marker.open");
- let closeMarker = this.getOption("filter.marker.close");
- if (!closeMarker) {
- closeMarker = openMarker;
- }
-
- if (openMarker && closeMarker) {
- formatter.setMarker(openMarker, closeMarker);
- }
-
- return formatter.format(url);
+ if (value === undefined || value === null || value === "") {
+ value = this.getOption("filter.defaultValue");
+ if (value === undefined || value === null) {
+ value = disabledRequestMarker.toString();
+ }
+ }
+
+ const formatter = new Formatter({ filter: encodeURI(value) });
+ const openMarker = this.getOption("filter.marker.open");
+ let closeMarker = this.getOption("filter.marker.close");
+ if (!closeMarker) {
+ closeMarker = openMarker;
+ }
+
+ if (openMarker && closeMarker) {
+ formatter.setMarker(openMarker, closeMarker);
+ }
+
+ return formatter.format(url);
}
/**
@@ -2179,30 +2219,30 @@ function formatURL(url, value) {
* @return {string} The formatted URL with the applied filters and markers.
*/
function filterFromRemoteByValue(optionUrl, value, openPopper) {
- return new Processing(() => {
- let url = formatURL.call(this, optionUrl, value);
- if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
- return;
- }
-
- fetchIt
- .call(this, url, {
- disableHiding: true,
- })
- .then(() => {
- checkOptionState.call(this);
- if (openPopper === true) {
- show.call(this);
- }
- })
- .catch((e) => {
- throw e;
- });
- })
- .run()
- .catch((e) => {
- throw e;
- });
+ return new Processing(() => {
+ let url = formatURL.call(this, optionUrl, value);
+ if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
+ return;
+ }
+
+ fetchIt
+ .call(this, url, {
+ disableHiding: true,
+ })
+ .then(() => {
+ checkOptionState.call(this);
+ if (openPopper === true) {
+ show.call(this);
+ }
+ })
+ .catch((e) => {
+ throw e;
+ });
+ })
+ .run()
+ .catch((e) => {
+ throw e;
+ });
}
/**
@@ -2210,50 +2250,50 @@ function filterFromRemoteByValue(optionUrl, value, openPopper) {
* @private
*/
function handleOptionKeyboardEvents(event) {
- const shiftKey = event?.["shiftKey"];
-
- switch (event?.["code"]) {
- case "Escape":
- toggle.call(this);
- event.preventDefault();
- break;
- case "Enter":
- case "Space":
- const path = event.composedPath();
- const element = path?.[0];
- if (element instanceof HTMLElement) {
- const input = element.getElementsByTagName("input");
- if (!input) {
- return;
- }
- fireEvent(input, "click");
- }
- event.preventDefault();
- break;
-
- case "Tab" && shiftKey === true:
- case "ArrowUp":
- activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
- event.preventDefault();
- break;
-
- case "Tab" && !shiftKey:
- case "ArrowLeft":
- case "ArrowRight":
- // handled by tree select
- break;
- case "ArrowDown":
- activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
- event.preventDefault();
- break;
- default:
- const p = event.composedPath();
- if (p?.[0] instanceof HTMLInputElement) {
- return;
- }
- focusFilter.call(this);
- break;
- }
+ const shiftKey = event?.["shiftKey"];
+
+ switch (event?.["code"]) {
+ case "Escape":
+ toggle.call(this);
+ event.preventDefault();
+ break;
+ case "Enter":
+ case "Space":
+ const path = event.composedPath();
+ const element = path?.[0];
+ if (element instanceof HTMLElement) {
+ const input = element.getElementsByTagName("input");
+ if (!input) {
+ return;
+ }
+ fireEvent(input, "click");
+ }
+ event.preventDefault();
+ break;
+
+ case "Tab" && shiftKey === true:
+ case "ArrowUp":
+ activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
+ event.preventDefault();
+ break;
+
+ case "Tab" && !shiftKey:
+ case "ArrowLeft":
+ case "ArrowRight":
+ // handled by tree select
+ break;
+ case "ArrowDown":
+ activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+ event.preventDefault();
+ break;
+ default:
+ const p = event.composedPath();
+ if (p?.[0] instanceof HTMLInputElement) {
+ return;
+ }
+ focusFilter.call(this);
+ break;
+ }
}
/**
@@ -2261,33 +2301,33 @@ function handleOptionKeyboardEvents(event) {
* @return {string}
*/
function getFilterMode() {
- switch (this.getOption("filter.mode")) {
- case FILTER_MODE_OPTIONS:
- return FILTER_MODE_OPTIONS;
- case FILTER_MODE_REMOTE:
- return FILTER_MODE_REMOTE;
- default:
- return FILTER_MODE_DISABLED;
- }
+ switch (this.getOption("filter.mode")) {
+ case FILTER_MODE_OPTIONS:
+ return FILTER_MODE_OPTIONS;
+ case FILTER_MODE_REMOTE:
+ return FILTER_MODE_REMOTE;
+ default:
+ return FILTER_MODE_DISABLED;
+ }
}
/**
* @private
*/
function blurFilter() {
- if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
- return;
- }
+ if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
+ return;
+ }
- if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
- return;
- }
+ if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+ return;
+ }
- this[popperFilterContainerElementSymbol].classList.remove("active");
- this[popperFilterContainerElementSymbol].blur();
+ this[popperFilterContainerElementSymbol].classList.remove("active");
+ this[popperFilterContainerElementSymbol].blur();
- this[inlineFilterElementSymbol].classList.remove("active");
- this[inlineFilterElementSymbol].blur();
+ this[inlineFilterElementSymbol].classList.remove("active");
+ this[inlineFilterElementSymbol].blur();
}
/**
@@ -2295,25 +2335,25 @@ function blurFilter() {
* @param focusOptions
*/
function focusPopperFilter(focusOptions) {
- this[popperFilterContainerElementSymbol].classList.remove("d-none");
- this[popperFilterElementSymbol].classList.add("active");
- this[inlineFilterElementSymbol].classList.remove("active");
- this[inlineFilterElementSymbol].classList.add("d-none");
-
- if (!(this[popperFilterElementSymbol] instanceof HTMLElement)) {
- addErrorAttribute(this, "Missing Popper Filter Element.");
- return;
- }
-
- // visibility is set to visible, because focus() does not work on invisible elements
- // and the class definition is assigned later in the processing
- setTimeout(() => {
- if (focusOptions === undefined || focusOptions === null) {
- this[popperFilterElementSymbol].focus();
- } else {
- this[popperFilterElementSymbol].focus(focusOptions);
- }
- }, 100);
+ this[popperFilterContainerElementSymbol].classList.remove("d-none");
+ this[popperFilterElementSymbol].classList.add("active");
+ this[inlineFilterElementSymbol].classList.remove("active");
+ this[inlineFilterElementSymbol].classList.add("d-none");
+
+ if (!(this[popperFilterElementSymbol] instanceof HTMLElement)) {
+ addErrorAttribute(this, "Missing Popper Filter Element.");
+ return;
+ }
+
+ // visibility is set to visible, because focus() does not work on invisible elements
+ // and the class definition is assigned later in the processing
+ setTimeout(() => {
+ if (focusOptions === undefined || focusOptions === null) {
+ this[popperFilterElementSymbol].focus();
+ } else {
+ this[popperFilterElementSymbol].focus(focusOptions);
+ }
+ }, 100);
}
/**
@@ -2321,44 +2361,44 @@ function focusPopperFilter(focusOptions) {
* @param focusOptions
*/
function focusInlineFilter(focusOptions) {
- const options = this.getOption("options");
- if (
- (!isArray(options) || options.length === 0) &&
- getFilterMode.call(this) !== FILTER_MODE_REMOTE
- ) {
- return;
- }
-
- this[popperFilterContainerElementSymbol].classList.add("d-none");
- this[inlineFilterElementSymbol].classList.add("active");
- this[inlineFilterElementSymbol].classList.remove("d-none");
-
- // visibility is set to visible, because focus() does not work on invisible elements
- // and the class definition is assigned later in the processing
- setTimeout(() => {
- if (focusOptions === undefined || focusOptions === null) {
- this[inlineFilterElementSymbol].focus();
- } else {
- this[inlineFilterElementSymbol].focus(focusOptions);
- }
- }, 100);
+ const options = this.getOption("options");
+ if (
+ (!isArray(options) || options.length === 0) &&
+ getFilterMode.call(this) !== FILTER_MODE_REMOTE
+ ) {
+ return;
+ }
+
+ this[popperFilterContainerElementSymbol].classList.add("d-none");
+ this[inlineFilterElementSymbol].classList.add("active");
+ this[inlineFilterElementSymbol].classList.remove("d-none");
+
+ // visibility is set to visible, because focus() does not work on invisible elements
+ // and the class definition is assigned later in the processing
+ setTimeout(() => {
+ if (focusOptions === undefined || focusOptions === null) {
+ this[inlineFilterElementSymbol].focus();
+ } else {
+ this[inlineFilterElementSymbol].focus(focusOptions);
+ }
+ }, 100);
}
/**
* @private
*/
function focusFilter(focusOptions) {
- if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
- this[popperFilterContainerElementSymbol].classList.add("d-none");
- this[inlineFilterElementSymbol].classList.add("d-none");
- return;
- }
+ if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+ this[popperFilterContainerElementSymbol].classList.add("d-none");
+ this[inlineFilterElementSymbol].classList.add("d-none");
+ return;
+ }
- if (this.getOption("filter.position") === FILTER_POSITION_INLINE) {
- return focusInlineFilter.call(this, focusOptions);
- }
+ if (this.getOption("filter.position") === FILTER_POSITION_INLINE) {
+ return focusInlineFilter.call(this, focusOptions);
+ }
- return focusPopperFilter.call(this, focusOptions);
+ return focusPopperFilter.call(this, focusOptions);
}
/**
@@ -2368,40 +2408,39 @@ function focusFilter(focusOptions) {
* @throws {Error} unsupported type
*/
function gatherState() {
- const type = this.getOption("type");
- if (["radio", "checkbox"].indexOf(type) === -1) {
- throw new Error("unsupported type");
- }
-
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- const selection = [];
- const elements = this.shadowRoot.querySelectorAll(
- `input[type=${type}]:checked`,
- );
-
- for (const e of elements) {
- selection.push({
- label: getSelectionLabel.call(this, e.value),
- value: e.value,
- });
- }
-
- setSelection
- .call(this, selection)
- .then(() => {
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- });
-
- if (this.getOption("features.closeOnSelect") === true) {
- hide.call(this);
- }
-
- return this;
+ const type = this.getOption("type");
+ if (["radio", "checkbox"].indexOf(type) === -1) {
+ throw new Error("unsupported type");
+ }
+
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ const selection = [];
+ const elements = this.shadowRoot.querySelectorAll(
+ `input[type=${type}]:checked`,
+ );
+
+ for (const e of elements) {
+ selection.push({
+ label: getSelectionLabel.call(this, e.value),
+ value: e.value,
+ });
+ }
+
+ setSelection
+ .call(this, selection)
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+
+ if (this.getOption("features.closeOnSelect") === true) {
+ hide.call(this);
+ }
+
+ return this;
}
/**
@@ -2410,22 +2449,21 @@ function gatherState() {
* @throws {Error} unsupported type
*/
function clearSelection() {
- const type = this.getOption("type");
- if (["radio", "checkbox"].indexOf(type) === -1) {
- throw new Error("unsupported type");
- }
-
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- setSelection
- .call(this, [])
- .then(() => {
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- });
+ const type = this.getOption("type");
+ if (["radio", "checkbox"].indexOf(type) === -1) {
+ throw new Error("unsupported type");
+ }
+
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ setSelection
+ .call(this, [])
+ .then(() => {})
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
}
const optionAvailableDeadManSymbol = Symbol("optionAvailableDeadManSymbol");
@@ -2434,125 +2472,127 @@ const optionAvailableDeadManSymbol = Symbol("optionAvailableDeadManSymbol");
* @private
*/
function areOptionsAvailableAndInit() {
- // against flickering
- if (this[optionAvailableDeadManSymbol] instanceof DeadMansSwitch) {
- try {
- this[optionAvailableDeadManSymbol].touch();
- return;
- } catch (e) {
- delete this[optionAvailableDeadManSymbol];
- }
- }
-
- this[optionAvailableDeadManSymbol] = new DeadMansSwitch(200, () => {
- areOptionsAvailableAndInitInternal.call(this);
- delete this[timerCallbackSymbol];
- });
+ // against flickering
+ if (this[optionAvailableDeadManSymbol] instanceof DeadMansSwitch) {
+ try {
+ this[optionAvailableDeadManSymbol].touch();
+ return;
+ } catch (e) {
+ delete this[optionAvailableDeadManSymbol];
+ }
+ }
+
+ this[optionAvailableDeadManSymbol] = new DeadMansSwitch(200, () => {
+ areOptionsAvailableAndInitInternal.call(this);
+ delete this[timerCallbackSymbol];
+ });
}
function areOptionsAvailableAndInitInternal() {
- // prevent multiple calls
- if (this[areOptionsAvailableAndInitSymbol] === undefined) {
- this[areOptionsAvailableAndInitSymbol] = 0;
- }
-
- if (this[areOptionsAvailableAndInitSymbol] > 0) {
- this[areOptionsAvailableAndInitSymbol]--;
- return true;
- }
-
- this[areOptionsAvailableAndInitSymbol]++;
-
- const options = this.getOption("options");
-
- if (
- options === undefined ||
- options === null ||
- (isArray(options) && options.length === 0)
- ) {
- setStatusOrRemoveBadges.call(this, "empty");
-
-
- let msg = this.getOption("labels.no-options-available");
-
- if (
- this.getOption("url") !== null &&
- this.getOption("features.lazyLoad") === true &&
- this[lazyLoadDoneSymbol] !== true
- ) {
- msg = this.getOption("labels.click-to-load-options");
- }
-
- if (this.getOption("filter.mode") === FILTER_MODE_REMOTE) {
- msg = "";
- } else {
- this.setOption("filter.defaultValue", undefined);
- }
-
- if (containsAttributeToken(this[controlElementSymbol], "class", "open") === true) {
- msg = "";
- }
-
- this.setOption("messages.control", msg);
- this.setOption("messages.summary", "");
-
- if (this.getOption("features.emptyValueIfNoOptions") === true) {
- this.value = "";
- }
- addErrorAttribute(this, "No options available.");
- return false;
- }
-
- const selections = this.getOption("selection");
- if (
- selections === undefined ||
- selections === null ||
- selections.length === 0
- ) {
- this.setOption(
- "messages.control",
- this.getOption("labels.select-an-option"),
- );
- } else {
- this.setOption("messages.control", "");
- }
-
- this.setOption("messages.summary", setSummaryAndControlText.call(this));
-
- let updated = false;
- let valueCounter = 1;
- for (const option of options) {
- if (option?.visibility === undefined) {
- option.visibility = "visible";
- updated = true;
- }
-
- if (option?.value === undefined && option?.label === undefined) {
- option.value = `${valueCounter++}`;
- option.label = option.value;
- updated = true;
- continue;
- }
-
- if (option?.value === undefined) {
- option.value = option.label;
- updated = true;
- }
-
- if (option?.label === undefined) {
- option.label = option.value;
- updated = true;
- }
- }
-
- if (updated) {
- this.setOption("options", options);
- }
-
- setStatusOrRemoveBadges.call(this);
-
- removeErrorAttribute(this, "No options available.");
- return true;
+ // prevent multiple calls
+ if (this[areOptionsAvailableAndInitSymbol] === undefined) {
+ this[areOptionsAvailableAndInitSymbol] = 0;
+ }
+
+ if (this[areOptionsAvailableAndInitSymbol] > 0) {
+ this[areOptionsAvailableAndInitSymbol]--;
+ return true;
+ }
+
+ this[areOptionsAvailableAndInitSymbol]++;
+
+ const options = this.getOption("options");
+
+ if (
+ options === undefined ||
+ options === null ||
+ (isArray(options) && options.length === 0)
+ ) {
+ setStatusOrRemoveBadges.call(this, "empty");
+
+ let msg = this.getOption("labels.no-options-available");
+
+ if (
+ this.getOption("url") !== null &&
+ this.getOption("features.lazyLoad") === true &&
+ this[lazyLoadDoneSymbol] !== true
+ ) {
+ msg = this.getOption("labels.click-to-load-options");
+ }
+
+ if (this.getOption("filter.mode") === FILTER_MODE_REMOTE) {
+ msg = "";
+ } else {
+ this.setOption("filter.defaultValue", undefined);
+ }
+
+ if (
+ containsAttributeToken(this[controlElementSymbol], "class", "open") ===
+ true
+ ) {
+ msg = "";
+ }
+
+ this.setOption("messages.control", msg);
+ this.setOption("messages.summary", "");
+
+ if (this.getOption("features.emptyValueIfNoOptions") === true) {
+ this.value = "";
+ }
+ addErrorAttribute(this, "No options available.");
+ return false;
+ }
+
+ const selections = this.getOption("selection");
+ if (
+ selections === undefined ||
+ selections === null ||
+ selections.length === 0
+ ) {
+ this.setOption(
+ "messages.control",
+ this.getOption("labels.select-an-option"),
+ );
+ } else {
+ this.setOption("messages.control", "");
+ }
+
+ this.setOption("messages.summary", setSummaryAndControlText.call(this));
+
+ let updated = false;
+ let valueCounter = 1;
+ for (const option of options) {
+ if (option?.visibility === undefined) {
+ option.visibility = "visible";
+ updated = true;
+ }
+
+ if (option?.value === undefined && option?.label === undefined) {
+ option.value = `${valueCounter++}`;
+ option.label = option.value;
+ updated = true;
+ continue;
+ }
+
+ if (option?.value === undefined) {
+ option.value = option.label;
+ updated = true;
+ }
+
+ if (option?.label === undefined) {
+ option.label = option.value;
+ updated = true;
+ }
+ }
+
+ if (updated) {
+ this.setOption("options", options);
+ }
+
+ setStatusOrRemoveBadges.call(this);
+
+ removeErrorAttribute(this, "No options available.");
+ return true;
}
/**
@@ -2560,30 +2600,30 @@ function areOptionsAvailableAndInitInternal() {
* @throws {Error} no shadow-root is defined
*/
function checkOptionState() {
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- const elements = this.shadowRoot.querySelectorAll(
- `[${ATTRIBUTE_ROLE}=option] input`,
- );
-
- let selection = this.getOption("selection");
- if (!isArray(selection)) {
- selection = [];
- }
-
- const checkedValues = selection.map((a) => {
- return a.value;
- });
-
- for (const e of elements) {
- if (checkedValues.indexOf(e.value) !== -1) {
- if (e.checked !== true) e.checked = true;
- } else {
- if (e.checked !== false) e.checked = false;
- }
- }
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ const elements = this.shadowRoot.querySelectorAll(
+ `[${ATTRIBUTE_ROLE}=option] input`,
+ );
+
+ let selection = this.getOption("selection");
+ if (!isArray(selection)) {
+ selection = [];
+ }
+
+ const checkedValues = selection.map((a) => {
+ return a.value;
+ });
+
+ for (const e of elements) {
+ if (checkedValues.indexOf(e.value) !== -1) {
+ if (e.checked !== true) e.checked = true;
+ } else {
+ if (e.checked !== false) e.checked = false;
+ }
+ }
}
/**
@@ -2592,41 +2632,41 @@ function checkOptionState() {
* @return {Object}
*/
function convertValueToSelection(value) {
- const selection = [];
-
- if (isString(value)) {
- value = value
- .split(",")
- .map((a) => {
- return a.trim();
- })
- .filter((a) => {
- return a !== "";
- });
- }
-
- if (isString(value) || isInteger(value)) {
- selection.push({
- label: getSelectionLabel.call(this, value),
- value: value,
- });
- } else if (isArray(value)) {
- for (const v of value) {
- selection.push({
- label: getSelectionLabel.call(this, v),
- value: v,
- });
- }
-
- value = value.join(",");
- } else {
- throw new Error("unsupported type");
- }
-
- return {
- selection: selection,
- value: value,
- };
+ const selection = [];
+
+ if (isString(value)) {
+ value = value
+ .split(",")
+ .map((a) => {
+ return a.trim();
+ })
+ .filter((a) => {
+ return a !== "";
+ });
+ }
+
+ if (isString(value) || isInteger(value)) {
+ selection.push({
+ label: getSelectionLabel.call(this, value),
+ value: value,
+ });
+ } else if (isArray(value)) {
+ for (const v of value) {
+ selection.push({
+ label: getSelectionLabel.call(this, v),
+ value: v,
+ });
+ }
+
+ value = value.join(",");
+ } else {
+ throw new Error("unsupported type");
+ }
+
+ return {
+ selection: selection,
+ value: value,
+ };
}
/**
@@ -2635,25 +2675,25 @@ function convertValueToSelection(value) {
* @return {string}
*/
function convertSelectionToValue(selection) {
- const value = [];
-
- if (isArray(selection)) {
- for (const obj of selection) {
- const v = obj?.["value"];
- if (v !== undefined) value.push(`${v}`);
- }
- }
-
- if (value.length === 0) {
- return "";
- } else if (value.length === 1) {
- const v = value.pop();
- if (v === undefined) return "";
- if (v === null) return "";
- return `${v}`;
- }
-
- return value.join(",");
+ const value = [];
+
+ if (isArray(selection)) {
+ for (const obj of selection) {
+ const v = obj?.["value"];
+ if (v !== undefined) value.push(`${v}`);
+ }
+ }
+
+ if (value.length === 0) {
+ return "";
+ } else if (value.length === 1) {
+ const v = value.pop();
+ if (v === undefined) return "";
+ if (v === null) return "";
+ return `${v}`;
+ }
+
+ return value.join(",");
}
/**
@@ -2662,15 +2702,15 @@ function convertSelectionToValue(selection) {
* @returns {boolean}
*/
function isValueIsEmpty(value) {
- let equivalents = this.getOption("empty.equivalents");
- if (!isArray(equivalents)) {
- if (equivalents === undefined) {
- return false;
- }
- equivalents = [equivalents];
- }
-
- return equivalents.indexOf(value) !== -1;
+ let equivalents = this.getOption("empty.equivalents");
+ if (!isArray(equivalents)) {
+ if (equivalents === undefined) {
+ return false;
+ }
+ equivalents = [equivalents];
+ }
+
+ return equivalents.indexOf(value) !== -1;
}
/**
@@ -2679,18 +2719,18 @@ function isValueIsEmpty(value) {
* @returns {*}
*/
function isValueIsEmptyThenGetNormalize(value) {
- let emptyDefault = null;
- if (this.getOption("type") === "checkbox") {
- emptyDefault = this.getOption("empty.defaultValueCheckbox");
- } else {
- emptyDefault = this.getOption("empty.defaultValueRadio");
- }
-
- if (isValueIsEmpty.call(this, value)) {
- return emptyDefault;
- }
-
- return value;
+ let emptyDefault = null;
+ if (this.getOption("type") === "checkbox") {
+ emptyDefault = this.getOption("empty.defaultValueCheckbox");
+ } else {
+ emptyDefault = this.getOption("empty.defaultValueRadio");
+ }
+
+ if (isValueIsEmpty.call(this, value)) {
+ return emptyDefault;
+ }
+
+ return value;
}
/**
@@ -2699,97 +2739,97 @@ function isValueIsEmptyThenGetNormalize(value) {
* @returns {Promise<unknown | void>}
*/
function setSelection(selection) {
- const self = this;
-
- selection = isValueIsEmptyThenGetNormalize.call(this, selection);
-
- if (isString(selection) || isInteger(selection)) {
- const result = convertValueToSelection.call(this, selection);
- selection = result?.selection;
- }
-
- validateArray(selection);
-
- let resultSelection = [];
- for (let i = 0; i < selection.length; i++) {
- if (isValueIsEmpty.call(this, selection[i].value)) {
- continue;
- }
-
- let l = getSelectionLabel.call(this, selection[i].value);
- if (l === selection[i].value) {
- l = selection[i].label;
- }
-
- resultSelection.push({
- label: l,
- value: selection[i].value,
- });
- }
-
- selection = resultSelection;
-
- this.setOption("selection", selection);
-
- checkOptionState.call(this);
- setSummaryAndControlText.call(this);
-
- try {
- this?.setFormValue(this.value);
- } catch (e) {
- addErrorAttribute(this, e);
- }
-
- fireCustomEvent(this, "monster-selected", {
- selection,
- });
-
- fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
-
- if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
- this[runLookupOnceSymbol] = true;
-
- const lazyLoadFlag =
- this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
- const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
- if (lazyLoadFlag || remoteFilterFlag) {
- lookupSelection.call(self);
- }
- }
-
- return new Processing(() => {
- const CLASSNAME = "selected";
-
- if (!this.shadowRoot) {
- throw new Error("no shadow-root is defined");
- }
-
- const notSelected = this.shadowRoot.querySelectorAll(":not(:checked)");
-
- if (notSelected) {
- notSelected.forEach((node) => {
- const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
- if (parent) {
- parent.classList.remove(CLASSNAME);
- }
- });
- }
-
- const selected = this.shadowRoot.querySelectorAll(":checked");
-
- if (selected) {
- selected.forEach((node) => {
- const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
- if (parent) {
- parent.classList.add(CLASSNAME);
- }
- });
- }
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
+ const self = this;
+
+ selection = isValueIsEmptyThenGetNormalize.call(this, selection);
+
+ if (isString(selection) || isInteger(selection)) {
+ const result = convertValueToSelection.call(this, selection);
+ selection = result?.selection;
+ }
+
+ validateArray(selection);
+
+ let resultSelection = [];
+ for (let i = 0; i < selection.length; i++) {
+ if (isValueIsEmpty.call(this, selection[i].value)) {
+ continue;
+ }
+
+ let l = getSelectionLabel.call(this, selection[i].value);
+ if (l === selection[i].value) {
+ l = selection[i].label;
+ }
+
+ resultSelection.push({
+ label: l,
+ value: selection[i].value,
+ });
+ }
+
+ selection = resultSelection;
+
+ this.setOption("selection", selection);
+
+ checkOptionState.call(this);
+ setSummaryAndControlText.call(this);
+
+ try {
+ this?.setFormValue(this.value);
+ } catch (e) {
+ addErrorAttribute(this, e);
+ }
+
+ fireCustomEvent(this, "monster-selected", {
+ selection,
+ });
+
+ fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
+
+ if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
+ this[runLookupOnceSymbol] = true;
+
+ const lazyLoadFlag =
+ this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
+ const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
+ if (lazyLoadFlag || remoteFilterFlag) {
+ lookupSelection.call(self);
+ }
+ }
+
+ return new Processing(() => {
+ const CLASSNAME = "selected";
+
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ const notSelected = this.shadowRoot.querySelectorAll(":not(:checked)");
+
+ if (notSelected) {
+ notSelected.forEach((node) => {
+ const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
+ if (parent) {
+ parent.classList.remove(CLASSNAME);
+ }
+ });
+ }
+
+ const selected = this.shadowRoot.querySelectorAll(":checked");
+
+ if (selected) {
+ selected.forEach((node) => {
+ const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
+ if (parent) {
+ parent.classList.add(CLASSNAME);
+ }
+ });
+ }
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
}
/**
@@ -2800,215 +2840,220 @@ function setSelection(selection) {
* @throws {TypeError} unsupported response
*/
function fetchData(url) {
- const self = this;
- if (!url) url = this.getOption("url");
- if (!url) return Promise.resolve();
-
- const fetchOptions = this.getOption("fetch", {});
-
- let delayWatch = false;
-
- // if fetch short time, do not show loading badge, because of flickering
- requestAnimationFrame(() => {
- if (delayWatch === true) return;
- setStatusOrRemoveBadges.call(this, "loading");
- delayWatch = true;
- });
-
- url = formatURL.call(this, url);
-
- self[isLoadingSymbol] = true;
- const global = getGlobal();
- return global
- .fetch(url, fetchOptions)
- .then((response) => {
- self[isLoadingSymbol] = false;
- delayWatch = true;
-
- if (!(response.status >= 200 && response.status < 300)) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
-
- const contentType = response.headers.get("content-type");
- if (contentType && contentType.indexOf("application/json") !== -1) {
- return response.text();
- }
-
- throw new TypeError(`unsupported response ${contentType}`);
- })
- .then((text) => {
- try {
- return Promise.resolve(JSON.parse(String(text)));
- } catch (e) {
- throw new TypeError("the result cannot be parsed, check the URL");
- }
- })
- .catch((e) => {
- self[isLoadingSymbol] = false;
- delayWatch = true;
- throw e;
- });
+ const self = this;
+ if (!url) url = this.getOption("url");
+ if (!url) return Promise.resolve();
+
+ const fetchOptions = this.getOption("fetch", {});
+
+ let delayWatch = false;
+
+ // if fetch short time, do not show loading badge, because of flickering
+ requestAnimationFrame(() => {
+ if (delayWatch === true) return;
+ setStatusOrRemoveBadges.call(this, "loading");
+ delayWatch = true;
+ });
+
+ url = formatURL.call(this, url);
+
+ self[isLoadingSymbol] = true;
+ const global = getGlobal();
+ return global
+ .fetch(url, fetchOptions)
+ .then((response) => {
+ self[isLoadingSymbol] = false;
+ delayWatch = true;
+
+ if (!(response.status >= 200 && response.status < 300)) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const contentType = response.headers.get("content-type");
+ if (contentType && contentType.indexOf("application/json") !== -1) {
+ return response.text();
+ }
+
+ throw new TypeError(`unsupported response ${contentType}`);
+ })
+ .then((text) => {
+ try {
+ return Promise.resolve(JSON.parse(String(text)));
+ } catch (e) {
+ throw new TypeError("the result cannot be parsed, check the URL");
+ }
+ })
+ .catch((e) => {
+ self[isLoadingSymbol] = false;
+ delayWatch = true;
+ throw e;
+ });
}
/**
* @private
*/
function hide() {
- this[popperElementSymbol].style.display = "none";
- setStatusOrRemoveBadges.call(this, "closed");
- removeAttributeToken(this[controlElementSymbol], "class", "open");
+ this[popperElementSymbol].style.display = "none";
+ setStatusOrRemoveBadges.call(this, "closed");
+ removeAttributeToken(this[controlElementSymbol], "class", "open");
}
/**
* @private
*/
function show() {
- if (this.getOption("disabled", undefined) === true) {
- return;
- }
-
- if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
- return;
- }
-
- setTotalText.call(this);
-
- focusFilter.call(this);
-
- const lazyLoadFlag =
- this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
-
- if (lazyLoadFlag === true) {
- this[lazyLoadDoneSymbol] = true;
- setStatusOrRemoveBadges.call(this, "loading");
-
- new Processing(200, () => {
- this.fetch()
- .then(() => {
- checkOptionState.call(this);
- requestAnimationFrame(() => {
- show.call(this);
- });
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- setStatusOrRemoveBadges.call(this, "error");
- });
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- setStatusOrRemoveBadges.call(this, "error");
- });
-
- return;
- }
-
- initDefaultOptionsFromUrl.call(this);
-
- const hasPopperFilterFlag =
- this.getOption("filter.position") === FILTER_POSITION_POPPER &&
- getFilterMode.call(this) !== FILTER_MODE_DISABLED;
-
- const options = getOptionElements.call(this);
- if (options.length === 0 && hasPopperFilterFlag === false) {
- return;
- }
-
- this[popperElementSymbol].style.visibility = "hidden";
- this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
- setStatusOrRemoveBadges.call(this, "open");
-
- addAttributeToken(this[controlElementSymbol], "class", "open");
-
- new Processing(() => {
- calcAndSetOptionsDimension.call(this);
- focusFilter.call(this);
- this[popperElementSymbol].style.removeProperty("visibility");
- updatePopper.call(this);
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
+ if (this.getOption("disabled", undefined) === true) {
+ return;
+ }
+
+ if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+ return;
+ }
+
+ setTotalText.call(this);
+
+ focusFilter.call(this);
+
+ const lazyLoadFlag =
+ this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
+
+ if (lazyLoadFlag === true) {
+ this[lazyLoadDoneSymbol] = true;
+ setStatusOrRemoveBadges.call(this, "loading");
+
+ new Processing(200, () => {
+ this.fetch()
+ .then(() => {
+ checkOptionState.call(this);
+ requestAnimationFrame(() => {
+ show.call(this);
+ });
+ })
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ setStatusOrRemoveBadges.call(this, "error");
+ });
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ setStatusOrRemoveBadges.call(this, "error");
+ });
+
+ return;
+ }
+
+ initDefaultOptionsFromUrl.call(this);
+
+ const hasPopperFilterFlag =
+ this.getOption("filter.position") === FILTER_POSITION_POPPER &&
+ getFilterMode.call(this) !== FILTER_MODE_DISABLED;
+
+ const options = getOptionElements.call(this);
+ if (options.length === 0 && hasPopperFilterFlag === false) {
+ return;
+ }
+
+ this[popperElementSymbol].style.visibility = "hidden";
+ this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+ setStatusOrRemoveBadges.call(this, "open");
+
+ addAttributeToken(this[controlElementSymbol], "class", "open");
+
+ new Processing(() => {
+ calcAndSetOptionsDimension.call(this);
+ focusFilter.call(this);
+ this[popperElementSymbol].style.removeProperty("visibility");
+ updatePopper.call(this);
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
}
function initDefaultOptionsFromUrl() {
- const url = this.getOption("filter.defaultOptionsUrl");
- if (!url) {
- return;
- }
-
- this.setOption("filter.defaultOptionsUrl", null);
-
- fetchData
- .call(this, url)
- .then((data) => {
- this[cleanupOptionsListSymbol] = false;
- importOptionsIntern.call(this, data);
- setStatusOrRemoveBadges.call(this, "open");
- initTotal.call(this, data)
- })
- .catch((e) => {
- addErrorAttribute(this, e);
- setStatusOrRemoveBadges.call(this, "error");
- });
+ const url = this.getOption("filter.defaultOptionsUrl");
+ if (!url) {
+ return;
+ }
+
+ this.setOption("filter.defaultOptionsUrl", null);
+
+ fetchData
+ .call(this, url)
+ .then((data) => {
+ this[cleanupOptionsListSymbol] = false;
+ importOptionsIntern.call(this, data);
+ setStatusOrRemoveBadges.call(this, "open");
+ initTotal.call(this, data);
+ })
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ setStatusOrRemoveBadges.call(this, "error");
+ });
}
/**
* @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);
- });
-
+ 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
*/
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);
+ }
}
/**
@@ -3017,217 +3062,217 @@ function toggle() {
* @fires monster-selection-cleared
*/
function initEventHandler() {
- const self = this;
-
- /**
- * @param {Event} event
- */
- self[clearOptionEventHandler] = (event) => {
- const element = findTargetElementFromEvent(
- event,
- ATTRIBUTE_ROLE,
- "remove-badge",
- );
-
- if (element instanceof HTMLElement) {
- const badge = findClosestByAttribute(element, ATTRIBUTE_ROLE, "badge");
- if (badge instanceof HTMLElement) {
- const value = badge.getAttribute(`${ATTRIBUTE_PREFIX}value`);
-
- let selection = self.getOption("selection");
- selection = selection.filter((b) => {
- return value !== b.value;
- });
-
- setSelection
- .call(self, selection)
- .then(() => {
- fireCustomEvent(self, "monster-selection-removed", {
- value,
- });
- })
- .catch((e) => {
- addErrorAttribute(self, e);
- });
- }
- }
- };
-
- /**
- * @param {Event} event
- */
- self[closeEventHandler] = (event) => {
- const path = event.composedPath();
-
- for (const [, element] of Object.entries(path)) {
- if (element === self) {
- return;
- }
- }
- hide.call(self);
- };
-
- /**
- * @param {Event} event
- */
- self[inputEventHandler] = (event) => {
- const path = event.composedPath();
- const element = path?.[0];
-
- if (element instanceof HTMLElement) {
- if (
- element.hasAttribute(ATTRIBUTE_ROLE) &&
- element.getAttribute(ATTRIBUTE_ROLE) === "option-control"
- ) {
- fireCustomEvent(self, "monster-change", {
- type: event.type,
- value: element.value,
- checked: element.checked,
- });
- } else if (
- element.hasAttribute(ATTRIBUTE_ROLE) &&
- element.getAttribute(ATTRIBUTE_ROLE) === "filter"
- ) {
- }
- }
- };
-
- /**
- * @param {Event} event
- */
- self[changeEventHandler] = (event) => {
- gatherState.call(self);
- fireCustomEvent(self, "monster-changed", event?.detail);
- };
-
- self[keyEventHandler] = (event) => {
- const path = event.composedPath();
- const element = path.shift();
-
- let role;
-
- if (element instanceof HTMLElement) {
- if (element.hasAttribute(ATTRIBUTE_ROLE)) {
- role = element.getAttribute(ATTRIBUTE_ROLE);
- } else if (element === this) {
- show.call(this);
- // focusFilter.call(self);
- } else {
- const e = element.closest(`[${ATTRIBUTE_ROLE}]`);
- if (e instanceof HTMLElement && e.hasAttribute(ATTRIBUTE_ROLE)) {
- role = e.getAttribute(ATTRIBUTE_ROLE);
- }
- }
- } else {
- return;
- }
-
- switch (role) {
- case "filter":
- handleFilterKeyboardEvents.call(self, event);
- break;
- case "option-label":
- case "option-control":
- case "option":
- handleOptionKeyboardEvents.call(self, event);
- break;
- case "control":
- case "toggle":
- handleToggleKeyboardEvents.call(self, event);
- break;
- }
- };
-
- const types = self.getOption("toggleEventType", ["click"]);
-
- for (const [, type] of Object.entries(types)) {
- self[controlElementSymbol]
- .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
- .addEventListener(type, function (event) {
- const element = findTargetElementFromEvent(
- event,
- ATTRIBUTE_ROLE,
- "remove-badge",
- );
-
- if (element instanceof HTMLElement) {
- return;
- }
-
- toggle.call(self);
- });
-
- self[controlElementSymbol]
- .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
- .addEventListener(type, function (event) {
- if (self.getOption("disabled", undefined) === true) {
- return;
- }
-
- const path = event.composedPath();
- const element = path?.[0];
- if (element instanceof HTMLElement) {
- const control = element.closest(
- `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
- );
- if (control instanceof HTMLElement) {
- if (control.classList.contains("clear")) {
- clearSelection.call(self);
-
- fireCustomEvent(self, "monster-selection-cleared", {});
- } else {
- const element = findTargetElementFromEvent(
- event,
- ATTRIBUTE_ROLE,
- "remove-badge",
- );
- if (element instanceof HTMLElement) {
- return;
- }
-
- toggle.call(self);
- }
- }
- }
- });
-
- // badge, selection
- self.addEventListener(type, self[clearOptionEventHandler]);
- }
-
- self.addEventListener("monster-change", self[changeEventHandler]);
- self.addEventListener("input", self[inputEventHandler]);
- self.addEventListener("keydown", self[keyEventHandler]);
-
- const callback = () => {
- if (this[debounceOptionsMutationObserverSymbol] instanceof DeadMansSwitch) {
- try {
- this[debounceOptionsMutationObserverSymbol].touch();
- return;
- } catch (e) {
- delete this[debounceOptionsMutationObserverSymbol];
- }
- }
-
- this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
- 100,
- () => {
- checkOptionState.call(self);
- calcAndSetOptionsDimension.call(self);
- updatePopper.call(self);
- delete this[debounceOptionsMutationObserverSymbol];
- },
- );
- };
-
- const observer = new MutationObserver(callback);
- observer.observe(self[optionsElementSymbol], {
- attributes: false,
- childList: true,
- subtree: true,
- });
-
- return self;
+ const self = this;
+
+ /**
+ * @param {Event} event
+ */
+ self[clearOptionEventHandler] = (event) => {
+ const element = findTargetElementFromEvent(
+ event,
+ ATTRIBUTE_ROLE,
+ "remove-badge",
+ );
+
+ if (element instanceof HTMLElement) {
+ const badge = findClosestByAttribute(element, ATTRIBUTE_ROLE, "badge");
+ if (badge instanceof HTMLElement) {
+ const value = badge.getAttribute(`${ATTRIBUTE_PREFIX}value`);
+
+ let selection = self.getOption("selection");
+ selection = selection.filter((b) => {
+ return value !== b.value;
+ });
+
+ setSelection
+ .call(self, selection)
+ .then(() => {
+ fireCustomEvent(self, "monster-selection-removed", {
+ value,
+ });
+ })
+ .catch((e) => {
+ addErrorAttribute(self, e);
+ });
+ }
+ }
+ };
+
+ /**
+ * @param {Event} event
+ */
+ self[closeEventHandler] = (event) => {
+ const path = event.composedPath();
+
+ for (const [, element] of Object.entries(path)) {
+ if (element === self) {
+ return;
+ }
+ }
+ hide.call(self);
+ };
+
+ /**
+ * @param {Event} event
+ */
+ self[inputEventHandler] = (event) => {
+ const path = event.composedPath();
+ const element = path?.[0];
+
+ if (element instanceof HTMLElement) {
+ if (
+ element.hasAttribute(ATTRIBUTE_ROLE) &&
+ element.getAttribute(ATTRIBUTE_ROLE) === "option-control"
+ ) {
+ fireCustomEvent(self, "monster-change", {
+ type: event.type,
+ value: element.value,
+ checked: element.checked,
+ });
+ } else if (
+ element.hasAttribute(ATTRIBUTE_ROLE) &&
+ element.getAttribute(ATTRIBUTE_ROLE) === "filter"
+ ) {
+ }
+ }
+ };
+
+ /**
+ * @param {Event} event
+ */
+ self[changeEventHandler] = (event) => {
+ gatherState.call(self);
+ fireCustomEvent(self, "monster-changed", event?.detail);
+ };
+
+ self[keyEventHandler] = (event) => {
+ const path = event.composedPath();
+ const element = path.shift();
+
+ let role;
+
+ if (element instanceof HTMLElement) {
+ if (element.hasAttribute(ATTRIBUTE_ROLE)) {
+ role = element.getAttribute(ATTRIBUTE_ROLE);
+ } else if (element === this) {
+ show.call(this);
+ // focusFilter.call(self);
+ } else {
+ const e = element.closest(`[${ATTRIBUTE_ROLE}]`);
+ if (e instanceof HTMLElement && e.hasAttribute(ATTRIBUTE_ROLE)) {
+ role = e.getAttribute(ATTRIBUTE_ROLE);
+ }
+ }
+ } else {
+ return;
+ }
+
+ switch (role) {
+ case "filter":
+ handleFilterKeyboardEvents.call(self, event);
+ break;
+ case "option-label":
+ case "option-control":
+ case "option":
+ handleOptionKeyboardEvents.call(self, event);
+ break;
+ case "control":
+ case "toggle":
+ handleToggleKeyboardEvents.call(self, event);
+ break;
+ }
+ };
+
+ const types = self.getOption("toggleEventType", ["click"]);
+
+ for (const [, type] of Object.entries(types)) {
+ self[controlElementSymbol]
+ .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
+ .addEventListener(type, function (event) {
+ const element = findTargetElementFromEvent(
+ event,
+ ATTRIBUTE_ROLE,
+ "remove-badge",
+ );
+
+ if (element instanceof HTMLElement) {
+ return;
+ }
+
+ toggle.call(self);
+ });
+
+ self[controlElementSymbol]
+ .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
+ .addEventListener(type, function (event) {
+ if (self.getOption("disabled", undefined) === true) {
+ return;
+ }
+
+ const path = event.composedPath();
+ const element = path?.[0];
+ if (element instanceof HTMLElement) {
+ const control = element.closest(
+ `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
+ );
+ if (control instanceof HTMLElement) {
+ if (control.classList.contains("clear")) {
+ clearSelection.call(self);
+
+ fireCustomEvent(self, "monster-selection-cleared", {});
+ } else {
+ const element = findTargetElementFromEvent(
+ event,
+ ATTRIBUTE_ROLE,
+ "remove-badge",
+ );
+ if (element instanceof HTMLElement) {
+ return;
+ }
+
+ toggle.call(self);
+ }
+ }
+ }
+ });
+
+ // badge, selection
+ self.addEventListener(type, self[clearOptionEventHandler]);
+ }
+
+ self.addEventListener("monster-change", self[changeEventHandler]);
+ self.addEventListener("input", self[inputEventHandler]);
+ self.addEventListener("keydown", self[keyEventHandler]);
+
+ const callback = () => {
+ if (this[debounceOptionsMutationObserverSymbol] instanceof DeadMansSwitch) {
+ try {
+ this[debounceOptionsMutationObserverSymbol].touch();
+ return;
+ } catch (e) {
+ delete this[debounceOptionsMutationObserverSymbol];
+ }
+ }
+
+ this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
+ 100,
+ () => {
+ checkOptionState.call(self);
+ calcAndSetOptionsDimension.call(self);
+ updatePopper.call(self);
+ delete this[debounceOptionsMutationObserverSymbol];
+ },
+ );
+ };
+
+ const observer = new MutationObserver(callback);
+ observer.observe(self[optionsElementSymbol], {
+ attributes: false,
+ childList: true,
+ subtree: true,
+ });
+
+ return self;
}
/**
@@ -3235,69 +3280,69 @@ function initEventHandler() {
* @return {Select}
*/
function setStatusOrRemoveBadges(suggestion) {
- requestAnimationFrame(() => {
- const selection = this.getOption("selection");
-
- const clearAllFlag =
- isArray(selection) &&
- selection.length > 0 &&
- this.getOption("features.clearAll") === true;
-
- const current = this.getOption("classes.statusOrRemoveBadge");
-
- if (suggestion === "error") {
- if (current !== "error") {
- this.setOption("classes.statusOrRemoveBadge", "error");
- }
- return;
- }
-
- if (this[isLoadingSymbol] === true) {
- if (current !== "loading") {
- this.setOption("classes.statusOrRemoveBadge", "loading");
- }
- return;
- }
-
- if (suggestion === "loading") {
- if (current !== "loading") {
- this.setOption("classes.statusOrRemoveBadge", "loading");
- }
- return;
- }
-
- if (this[controlElementSymbol].classList.contains("open")) {
- if (current !== "open") {
- this.setOption("classes.statusOrRemoveBadge", "open");
- }
- return;
- }
-
- if (clearAllFlag) {
- if (current !== "clear") {
- this.setOption("classes.statusOrRemoveBadge", "clear");
- }
- return;
- }
-
- const options = this.getOption("options");
- if (
- options === undefined ||
- options === null ||
- (isArray(options) && options.length === 0)
- ) {
- if (current !== "empty") {
- this.setOption("classes.statusOrRemoveBadge", "empty");
- }
- return;
- }
-
- if (suggestion) {
- if (current !== suggestion) {
- this.setOption("classes.statusOrRemoveBadge", suggestion);
- }
- }
- });
+ requestAnimationFrame(() => {
+ const selection = this.getOption("selection");
+
+ const clearAllFlag =
+ isArray(selection) &&
+ selection.length > 0 &&
+ this.getOption("features.clearAll") === true;
+
+ const current = this.getOption("classes.statusOrRemoveBadge");
+
+ if (suggestion === "error") {
+ if (current !== "error") {
+ this.setOption("classes.statusOrRemoveBadge", "error");
+ }
+ return;
+ }
+
+ if (this[isLoadingSymbol] === true) {
+ if (current !== "loading") {
+ this.setOption("classes.statusOrRemoveBadge", "loading");
+ }
+ return;
+ }
+
+ if (suggestion === "loading") {
+ if (current !== "loading") {
+ this.setOption("classes.statusOrRemoveBadge", "loading");
+ }
+ return;
+ }
+
+ if (this[controlElementSymbol].classList.contains("open")) {
+ if (current !== "open") {
+ this.setOption("classes.statusOrRemoveBadge", "open");
+ }
+ return;
+ }
+
+ if (clearAllFlag) {
+ if (current !== "clear") {
+ this.setOption("classes.statusOrRemoveBadge", "clear");
+ }
+ return;
+ }
+
+ const options = this.getOption("options");
+ if (
+ options === undefined ||
+ options === null ||
+ (isArray(options) && options.length === 0)
+ ) {
+ if (current !== "empty") {
+ this.setOption("classes.statusOrRemoveBadge", "empty");
+ }
+ return;
+ }
+
+ if (suggestion) {
+ if (current !== suggestion) {
+ this.setOption("classes.statusOrRemoveBadge", suggestion);
+ }
+ }
+ });
}
/**
@@ -3306,72 +3351,72 @@ function setStatusOrRemoveBadges(suggestion) {
* @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[selectionElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=selection]`,
- );
- this[containerElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=container]`,
- );
- this[popperElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=popper]`,
- );
- this[inlineFilterElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=filter][name="inline-filter"]`,
- );
- this[popperFilterElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=filter][name="popper-filter"]`,
- );
- this[popperFilterContainerElementSymbol] =
- this[popperFilterElementSymbol].parentElement;
- this[optionsElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=options]`,
- );
- this[noOptionsAvailableElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="no-options"]`,
- );
- this[statusOrRemoveBadgesElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=status-or-remove-badges]`,
- );
-
- this[remoteInfoElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}=remote-info]`,
- );
+ if (!this.shadowRoot) {
+ throw new Error("no shadow-root is defined");
+ }
+
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=control]`,
+ );
+ this[selectionElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=selection]`,
+ );
+ this[containerElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=container]`,
+ );
+ this[popperElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=popper]`,
+ );
+ this[inlineFilterElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=filter][name="inline-filter"]`,
+ );
+ this[popperFilterElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=filter][name="popper-filter"]`,
+ );
+ this[popperFilterContainerElementSymbol] =
+ this[popperFilterElementSymbol].parentElement;
+ this[optionsElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=options]`,
+ );
+ this[noOptionsAvailableElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="no-options"]`,
+ );
+ this[statusOrRemoveBadgesElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=status-or-remove-badges]`,
+ );
+
+ this[remoteInfoElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}=remote-info]`,
+ );
}
/**
* @private
*/
function updatePopper() {
- if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
- return;
- }
-
- if (this.getOption("disabled", false) === true) {
- return;
- }
-
- new Processing(() => {
- calcAndSetOptionsDimension.call(this);
- positionPopper.call(
- this,
- this[controlElementSymbol],
- this[popperElementSymbol],
- this.getOption("popper", {}),
- );
- })
- .run()
- .catch((e) => {
- addErrorAttribute(this, e);
- });
-
- return this;
+ if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+ return;
+ }
+
+ if (this.getOption("disabled", false) === true) {
+ return;
+ }
+
+ new Processing(() => {
+ calcAndSetOptionsDimension.call(this);
+ positionPopper.call(
+ this,
+ this[controlElementSymbol],
+ this[popperElementSymbol],
+ this.getOption("popper", {}),
+ );
+ })
+ .run()
+ .catch((e) => {
+ addErrorAttribute(this, e);
+ });
+
+ return this;
}
/**
@@ -3379,8 +3424,8 @@ function updatePopper() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<template id="options">
<div data-monster-role="option" tabindex="-1"
data-monster-attributes="
diff --git a/source/components/form/stylesheet/select.mjs b/source/components/form/stylesheet/select.mjs
index f2c640ff42bbb955e860a688695edf8e7994c795..238b5c5ca9612e4cb6cd11312b60f84752634a9d 100644
--- a/source/components/form/stylesheet/select.mjs
+++ b/source/components/form/stylesheet/select.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {SelectStyleSheet}
+export { SelectStyleSheet };
/**
* @private
@@ -22,10 +22,17 @@ 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}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}
-}`, 0);
+}`,
+ 0,
+ );
} catch (e) {
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+ addAttributeToken(
+ document.getRootNode().querySelector("html"),
+ ATTRIBUTE_ERRORMESSAGE,
+ e + "",
+ );
}
diff --git a/source/components/layout/full-screen.mjs b/source/components/layout/full-screen.mjs
index 1edc64130bce10953d2f022a3f1fb2caa89d1d3e..bc27c88f781a652fa0721e98498f178ef3519b3a 100644
--- a/source/components/layout/full-screen.mjs
+++ b/source/components/layout/full-screen.mjs
@@ -10,30 +10,32 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
import {
- ATTRIBUTE_ERRORMESSAGE,
- ATTRIBUTE_ROLE,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
-import {CustomElement} from "../../dom/customelement.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
+ assembleMethodSymbol,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
-import {FullScreenStyleSheet} from "./stylesheet/full-screen.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { FullScreenStyleSheet } from "./stylesheet/full-screen.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
-export {FullScreen};
+export { FullScreen };
/**
* @private
* @type {symbol}
*/
-export const fullScreenControlElementSymbol = Symbol("fullScreenControlElement");
+export const fullScreenControlElementSymbol = Symbol(
+ "fullScreenControlElement",
+);
/**
* @private
* @type {symbol}
@@ -45,7 +47,6 @@ export const fullScreenElementSymbol = Symbol("fullScreenElement");
*/
export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement");
-
/**
* A FullScreen
*
@@ -58,59 +59,59 @@ export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement");
* @summary A beautiful FullScreen that can make your life easier and also looks good.
*/
class FullScreen extends CustomElement {
- /**
- * This method is called by the `instanceof` operator.
- * @returns {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/layout/full-screen@@instance");
- }
-
- /**
- *
- * @return {Components.Layout.FullScreen
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
- initControlReferences.call(this);
- initEventHandler.call(this);
- return this;
- }
-
- /**
- * 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 {string} selector Selector for the control
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
- selector: ":first-child"
- });
- }
-
- /**
- * @return {string}
- */
- static getTag() {
- return "monster-full-screen";
- }
-
- /**
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [FullScreenStyleSheet];
- }
-
-
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for(
+ "@schukai/monster/components/layout/full-screen@@instance",
+ );
+ }
+
+ /**
+ *
+ * @return {Components.Layout.FullScreen
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ return this;
+ }
+
+ /**
+ * 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 {string} selector Selector for the control
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ selector: ":first-child",
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-full-screen";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [FullScreenStyleSheet];
+ }
}
/**
@@ -118,43 +119,39 @@ class FullScreen extends CustomElement {
* @return {initEventHandler}
*/
function initEventHandler() {
- const self = this;
- const element = this[fullScreenControlElementSymbol];
-
- document.addEventListener('fullscreenchange', (event) => {
- const control = findTargetControl.call(self);
+ const self = this;
+ const element = this[fullScreenControlElementSymbol];
- if (document.fullscreenElement === control) {
- self[fullScreenElementSymbol].classList.add("hidden");
- self[fullScreenExitElementSymbol].classList.remove("hidden");
- } else {
- self[fullScreenExitElementSymbol].classList.add("hidden");
- self[fullScreenElementSymbol].classList.remove("hidden");
- }
+ document.addEventListener("fullscreenchange", (event) => {
+ const control = findTargetControl.call(self);
- });
+ if (document.fullscreenElement === control) {
+ self[fullScreenElementSymbol].classList.add("hidden");
+ self[fullScreenExitElementSymbol].classList.remove("hidden");
+ } else {
+ self[fullScreenExitElementSymbol].classList.add("hidden");
+ self[fullScreenElementSymbol].classList.remove("hidden");
+ }
+ });
+ const type = "click";
- const type = "click";
+ element.addEventListener(type, function (event) {
+ const control = findTargetControl.call(self);
- element.addEventListener(type, function (event) {
+ if (!control) {
+ addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, "No control found");
+ return;
+ }
- const control = findTargetControl.call(self);
+ fireCustomEvent(self, "monster-full-screen-clicked", {
+ element: control,
+ });
- if(!control) {
- addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, "No control found");
- return;
- }
+ toggleFullscreen.call(self, control);
+ });
- fireCustomEvent(self, "monster-full-screen-clicked", {
- element: control,
- });
-
- toggleFullscreen.call(self, control);
-
- });
-
- return this;
+ return this;
}
/**
@@ -162,17 +159,17 @@ function initEventHandler() {
* @return {void}
*/
function initControlReferences() {
- this[fullScreenControlElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="control"]`,
- );
+ this[fullScreenControlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
- this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="fullscreen"]`,
- );
+ this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="fullscreen"]`,
+ );
- this[fullScreenExitElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="fullscreen-exit"]`,
- );
+ this[fullScreenExitElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="fullscreen-exit"]`,
+ );
}
/**
@@ -181,9 +178,9 @@ function initControlReferences() {
* @returns {*}
*/
function findTargetControl(self) {
- const rootNode = this.getRootNode?.() ?? document;
- const selector = this.getOption("selector");
- return rootNode.querySelector(selector);
+ const rootNode = this.getRootNode?.() ?? document;
+ const selector = this.getOption("selector");
+ return rootNode.querySelector(selector);
}
/**
@@ -191,13 +188,13 @@ function findTargetControl(self) {
* @param element
*/
function toggleFullscreen(element) {
- if (!document.fullscreenElement) {
- element.requestFullscreen().catch(err => {
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, err.message);
- });
- } else {
- document.exitFullscreen();
- }
+ if (!document.fullscreenElement) {
+ element.requestFullscreen().catch((err) => {
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, err.message);
+ });
+ } else {
+ document.exitFullscreen();
+ }
}
/**
@@ -205,8 +202,8 @@ function toggleFullscreen(element) {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
<div data-monster-role="fullscreen">
@@ -226,5 +223,4 @@ function getTemplate() {
</div>`;
}
-
registerCustomElement(FullScreen);
diff --git a/source/components/layout/panel.mjs b/source/components/layout/panel.mjs
index a097586fc08c9c4d81baece072c8711c23b2c02a..c65cf49b7953c4d6883bb82e91f6bb95534016d6 100644
--- a/source/components/layout/panel.mjs
+++ b/source/components/layout/panel.mjs
@@ -44,7 +44,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
const timerCallbackSymbol = Symbol("timerCallback");
/**
- * A Slider
+ * A Panel is a container that can hold other elements and is used to display content in a structured way.
*
* @fragments /fragments/components/layout/panel/
*
diff --git a/source/components/layout/stylesheet/full-screen.mjs b/source/components/layout/stylesheet/full-screen.mjs
index 282aabc5d1a961cefa533ce413a171b401468107..4db56117e278ef6a2db2bc0de5a90115c2088a0f 100644
--- a/source/components/layout/stylesheet/full-screen.mjs
+++ b/source/components/layout/stylesheet/full-screen.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FullScreenStyleSheet}
+export { FullScreenStyleSheet };
/**
* @private
@@ -22,10 +22,17 @@ export {FullScreenStyleSheet}
const FullScreenStyleSheet = new CSSStyleSheet();
try {
- FullScreenStyleSheet.insertRule(`
+ FullScreenStyleSheet.insertRule(
+ `
@layer fullscreen {
[data-monster-role=control]{align-items:center;background-color:var(--monster-bg-color-primary-1);border:1px solid var(--monster-bg-color-primary-4);border-radius:2rem;color:var(--monster-color-primary-1);cursor:pointer;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0;overflow:hidden;padding:.5rem;position:relative;width:2rem}[data-monster-role=fullscreen-exit],[data-monster-role=fullscreen]{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.hidden{display:none}
-}`, 0);
+}`,
+ 0,
+ );
} catch (e) {
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+ addAttributeToken(
+ document.getRootNode().querySelector("html"),
+ ATTRIBUTE_ERRORMESSAGE,
+ e + "",
+ );
}