From 7078194c3f2f18c32b57e0c002412ad53fbec80f Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Tue, 1 Apr 2025 16:05:55 +0200
Subject: [PATCH] feat: new fetch-box control #303
---
development/issues/closed/303.html | 61 ++++
development/issues/closed/303.mjs | 15 +
development/mock/issue-303.js | 80 ++++
flake.lock | 6 +-
package-lock.json | 282 +++++++-------
package.json | 6 +-
source/components/content/camera.mjs | 2 +-
source/components/content/fetch-box.mjs | 345 ++++++++++++++++++
.../components/content/style/fetch-box.pcss | 36 ++
.../content/stylesheet/fetch-box.mjs | 31 ++
source/components/style/mixin/skeleton.pcss | 26 +-
source/components/style/skeleton.css | 165 +--------
source/components/style/skeleton.pcss | 20 +-
.../components/stylesheet/mixin/skeleton.mjs | 19 +-
source/components/stylesheet/skeleton.mjs | 21 +-
15 files changed, 753 insertions(+), 362 deletions(-)
create mode 100644 development/issues/closed/303.html
create mode 100644 development/issues/closed/303.mjs
create mode 100644 development/mock/issue-303.js
create mode 100644 source/components/content/fetch-box.mjs
create mode 100644 source/components/content/style/fetch-box.pcss
create mode 100644 source/components/content/stylesheet/fetch-box.mjs
diff --git a/development/issues/closed/303.html b/development/issues/closed/303.html
new file mode 100644
index 000000000..91fada935
--- /dev/null
+++ b/development/issues/closed/303.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <title>new fetch-box control #303</title>
+ <script src="./303.mjs" type="module"></script>
+</head>
+<body>
+<h1>new fetch-box control #303</h1>
+<p></p>
+<ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/303">Issue #303</a></li>
+ <li><a href="/">Back to overview</a></li>
+</ul>
+<main>
+
+ <p>Mein Land ist
+ <monster-fetch-box
+ data-monster-option-parameter="de"
+ data-monster-option-formatter-marker-open="{"
+ data-monster-option-formatter-marker-close="}"
+ data-monster-option-url="/issue-303.json?iso2={parameter}">
+ <span data-monster-replace="path:data.dataset.0.emoji"></span>
+ <span data-monster-replace="path:data.dataset.0.name"></span>
+ </monster-fetch-box>!
+ </p>
+
+ <p>Das ist ein inline element
+ <monster-fetch-box style="width: 190px"
+ data-monster-attributes="data-monster-option-parameter static:de"
+ data-monster-option-url="/issue-303.json?iso2={parameter}">
+ <span slot="loading">Loading...</span>
+ <span slot="error">Error</span>
+ <span slot="empty">No results</span>
+ <span>
+ <span data-monster-replace="path:data.dataset.0.emoji">1</span>
+ <span data-monster-replace="path:data.dataset.0.name">2</span>
+ </span>
+ </monster-fetch-box>
+ , mit lorem ipsum!!!!
+ </p>
+
+ <div style="width: 350px; height: 300px; border: 1px solid black;">
+ <monster-fetch-box
+ data-monster-attributes="data-monster-option-parameter static:de"
+ data-monster-option-url="/issue-303.json?iso2={parameter}">
+
+ <div slot="loading">Loading...</div>
+ <div slot="error">Error</div>
+ <div slot="empty">No results</div>
+ <div>
+ <span data-monster-replace="path:data.dataset.0.emoji">1</span>
+ <span data-monster-replace="path:data.dataset.0.name">2</span>
+ </div>
+ </monster-fetch-box>
+ </div>
+
+</main>
+</body>
+</html>
diff --git a/development/issues/closed/303.mjs b/development/issues/closed/303.mjs
new file mode 100644
index 000000000..539948ccd
--- /dev/null
+++ b/development/issues/closed/303.mjs
@@ -0,0 +1,15 @@
+/**
+* @file development/issues/open/303.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/303
+* @description new fetch-box control
+* @issue 303
+*/
+
+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/content/fetch-box.mjs";
+
diff --git a/development/mock/issue-303.js b/development/mock/issue-303.js
new file mode 100644
index 000000000..dc63e5a1b
--- /dev/null
+++ b/development/mock/issue-303.js
@@ -0,0 +1,80 @@
+const json =
+ `{
+ "dataset": [
+ {
+ "active": true,
+ "capital": "Berlin",
+ "createdAt": "2018-07-21 12:41:03",
+ "currency": "EUR",
+ "currencyName": "Euro",
+ "currencySymbol": "€",
+ "emoji": "🇩🇪",
+ "id": 82,
+ "iso2": "DE",
+ "iso3": "DEU",
+ "latitude": 51,
+ "longitude": 9,
+ "name": "Germany",
+ "nationality": "German",
+ "native": "Deutschland",
+ "numericCode": "276",
+ "phoneCode": "49",
+ "region": "Europe",
+ "subregion": "Western Europe",
+ "tags": null,
+ "tld": ".de",
+ "updatedAt": "2023-08-09 02:34:58"
+ }
+ ],
+ "sys": {
+ "code": 200,
+ "pagination": {
+ "total": 1,
+ "currentPage": 1,
+ "objectsPerPage": 10,
+ "offset": 0,
+ "nextOffset": null,
+ "prevOffset": null,
+ "pages": 1
+ },
+ "result": {},
+ "api_version": "1"
+ }
+}`;
+
+
+
+// check if JSON is valid
+JSON.parse(json)
+
+const requestDelay = 10
+
+export default [
+ {
+ url: '/issue-303.json',
+ method: 'get',
+ rawResponse: async (req, res) => {
+ res.setHeader('Content-Type', 'application/json')
+ res.statusCode = 200
+
+ const url= new URL(req.url, `http://${req.headers.host}`)
+ const q = Object.fromEntries(url.searchParams)
+
+ if (q && q.q) {
+ const query = q.q.toLowerCase()
+ const filtered = JSON.parse(json).filter(item => item.name.toLowerCase().includes(query))
+ setTimeout(function() {
+ res.end(JSON.stringify(filtered))
+ }, requestDelay);
+ return
+ }
+
+ setTimeout(function() {
+ res.end(json)
+ }, requestDelay);
+
+ },
+ },
+
+
+];
\ No newline at end of file
diff --git a/flake.lock b/flake.lock
index bd8baac8c..a7c918141 100644
--- a/flake.lock
+++ b/flake.lock
@@ -164,11 +164,11 @@
},
"nixpkgs_3": {
"locked": {
- "lastModified": 1743231893,
- "narHash": "sha256-tpJsHMUPEhEnzySoQxx7+kA+KUtgWqvlcUBqROYNNt0=",
+ "lastModified": 1743367904,
+ "narHash": "sha256-sOos1jZGKmT6xxPvxGQyPTApOunXvScV4lNjBCXd/CI=",
"owner": "nixos",
"repo": "nixpkgs",
- "rev": "c570c1f5304493cafe133b8d843c7c1c4a10d3a6",
+ "rev": "7ffe0edc685f14b8c635e3d6591b0bbb97365e6c",
"type": "github"
},
"original": {
diff --git a/package-lock.json b/package-lock.json
index 535b18fb9..30dc008f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@schukai/monster",
- "version": "3.114.5",
+ "version": "3.114.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@schukai/monster",
- "version": "3.114.5",
+ "version": "3.114.7",
"license": "AGPL 3.0",
"dependencies": {
"@floating-ui/dom": "^1.6.13",
@@ -29,7 +29,7 @@
"cssnano": "^7.0.6",
"dom-storage": "^2.1.0",
"element-internals-polyfill": "^3.0.1",
- "esbuild": "^0.25.1",
+ "esbuild": "^0.25.2",
"espree": "^10.3.0",
"estraverse": "^5.3.0",
"flow-bin": "^0.266.1",
@@ -52,13 +52,13 @@
"postcss-responsive-type": "^1.0.0",
"postcss-rtlcss": "^5.6.0",
"postcss-strip-units": "^2.0.1",
- "puppeteer": "^24.4.0",
+ "puppeteer": "^24.5.0",
"sinon": "^20.0.0",
"turbowatch": "^2.29.4",
"url": "^0.11.4",
"url-exist": "3.0.1",
"util": "^0.12.5",
- "vite": "6.2.3",
+ "vite": "6.2.4",
"vite-plugin-banner": "^0.8.0",
"vite-plugin-minify": "^2.1.0",
"vite-plugin-mock": "^3.0.2",
@@ -461,9 +461,9 @@
}
},
"node_modules/@esbuild/aix-ppc64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
- "integrity": "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",
+ "integrity": "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==",
"cpu": [
"ppc64"
],
@@ -478,9 +478,9 @@
}
},
"node_modules/@esbuild/android-arm": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.1.tgz",
- "integrity": "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.2.tgz",
+ "integrity": "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==",
"cpu": [
"arm"
],
@@ -495,9 +495,9 @@
}
},
"node_modules/@esbuild/android-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz",
- "integrity": "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.2.tgz",
+ "integrity": "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==",
"cpu": [
"arm64"
],
@@ -512,9 +512,9 @@
}
},
"node_modules/@esbuild/android-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.1.tgz",
- "integrity": "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.2.tgz",
+ "integrity": "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==",
"cpu": [
"x64"
],
@@ -529,9 +529,9 @@
}
},
"node_modules/@esbuild/darwin-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz",
- "integrity": "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.2.tgz",
+ "integrity": "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==",
"cpu": [
"arm64"
],
@@ -546,9 +546,9 @@
}
},
"node_modules/@esbuild/darwin-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz",
- "integrity": "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.2.tgz",
+ "integrity": "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==",
"cpu": [
"x64"
],
@@ -563,9 +563,9 @@
}
},
"node_modules/@esbuild/freebsd-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz",
- "integrity": "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.2.tgz",
+ "integrity": "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==",
"cpu": [
"arm64"
],
@@ -580,9 +580,9 @@
}
},
"node_modules/@esbuild/freebsd-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz",
- "integrity": "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.2.tgz",
+ "integrity": "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==",
"cpu": [
"x64"
],
@@ -597,9 +597,9 @@
}
},
"node_modules/@esbuild/linux-arm": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz",
- "integrity": "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.2.tgz",
+ "integrity": "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==",
"cpu": [
"arm"
],
@@ -614,9 +614,9 @@
}
},
"node_modules/@esbuild/linux-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz",
- "integrity": "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.2.tgz",
+ "integrity": "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==",
"cpu": [
"arm64"
],
@@ -631,9 +631,9 @@
}
},
"node_modules/@esbuild/linux-ia32": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz",
- "integrity": "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.2.tgz",
+ "integrity": "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==",
"cpu": [
"ia32"
],
@@ -648,9 +648,9 @@
}
},
"node_modules/@esbuild/linux-loong64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz",
- "integrity": "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.2.tgz",
+ "integrity": "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==",
"cpu": [
"loong64"
],
@@ -665,9 +665,9 @@
}
},
"node_modules/@esbuild/linux-mips64el": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz",
- "integrity": "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.2.tgz",
+ "integrity": "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==",
"cpu": [
"mips64el"
],
@@ -682,9 +682,9 @@
}
},
"node_modules/@esbuild/linux-ppc64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz",
- "integrity": "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.2.tgz",
+ "integrity": "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==",
"cpu": [
"ppc64"
],
@@ -699,9 +699,9 @@
}
},
"node_modules/@esbuild/linux-riscv64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz",
- "integrity": "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.2.tgz",
+ "integrity": "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==",
"cpu": [
"riscv64"
],
@@ -716,9 +716,9 @@
}
},
"node_modules/@esbuild/linux-s390x": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz",
- "integrity": "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.2.tgz",
+ "integrity": "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==",
"cpu": [
"s390x"
],
@@ -733,9 +733,9 @@
}
},
"node_modules/@esbuild/linux-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz",
- "integrity": "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.2.tgz",
+ "integrity": "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==",
"cpu": [
"x64"
],
@@ -750,9 +750,9 @@
}
},
"node_modules/@esbuild/netbsd-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz",
- "integrity": "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.2.tgz",
+ "integrity": "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==",
"cpu": [
"arm64"
],
@@ -767,9 +767,9 @@
}
},
"node_modules/@esbuild/netbsd-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz",
- "integrity": "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.2.tgz",
+ "integrity": "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==",
"cpu": [
"x64"
],
@@ -784,9 +784,9 @@
}
},
"node_modules/@esbuild/openbsd-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz",
- "integrity": "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.2.tgz",
+ "integrity": "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==",
"cpu": [
"arm64"
],
@@ -801,9 +801,9 @@
}
},
"node_modules/@esbuild/openbsd-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz",
- "integrity": "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.2.tgz",
+ "integrity": "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==",
"cpu": [
"x64"
],
@@ -818,9 +818,9 @@
}
},
"node_modules/@esbuild/sunos-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz",
- "integrity": "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.2.tgz",
+ "integrity": "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==",
"cpu": [
"x64"
],
@@ -835,9 +835,9 @@
}
},
"node_modules/@esbuild/win32-arm64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz",
- "integrity": "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.2.tgz",
+ "integrity": "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==",
"cpu": [
"arm64"
],
@@ -852,9 +852,9 @@
}
},
"node_modules/@esbuild/win32-ia32": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz",
- "integrity": "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.2.tgz",
+ "integrity": "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==",
"cpu": [
"ia32"
],
@@ -869,9 +869,9 @@
}
},
"node_modules/@esbuild/win32-x64": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz",
- "integrity": "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.2.tgz",
+ "integrity": "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==",
"cpu": [
"x64"
],
@@ -1120,9 +1120,9 @@
}
},
"node_modules/@puppeteer/browsers": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.8.0.tgz",
- "integrity": "sha512-yTwt2KWRmCQAfhvbCRjebaSX8pV1//I0Y3g+A7f/eS7gf0l4eRJoUCvcYdVtboeU4CTOZQuqYbZNS8aBYb8ROQ==",
+ "version": "2.9.0",
+ "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.9.0.tgz",
+ "integrity": "sha512-8+xM+cFydYET4X/5/3yZMHs7sjS6c9I6H5I3xJdb6cinzxWUT/I2QVw4avxCQ8QDndwdHkG/FiSZIrCjAbaKvQ==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
@@ -1810,25 +1810,33 @@
"optional": true
},
"node_modules/bare-fs": {
- "version": "4.0.1",
- "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.0.1.tgz",
- "integrity": "sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==",
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.0.2.tgz",
+ "integrity": "sha512-S5mmkMesiduMqnz51Bfh0Et9EX0aTCJxhsI4bvzFFLs8Z1AV8RDHadfY5CyLwdoLHgXbNBEN1gQcbEtGwuvixw==",
"dev": true,
"license": "Apache-2.0",
"optional": true,
"dependencies": {
- "bare-events": "^2.0.0",
+ "bare-events": "^2.5.4",
"bare-path": "^3.0.0",
- "bare-stream": "^2.0.0"
+ "bare-stream": "^2.6.4"
},
"engines": {
- "bare": ">=1.7.0"
+ "bare": ">=1.16.0"
+ },
+ "peerDependencies": {
+ "bare-buffer": "*"
+ },
+ "peerDependenciesMeta": {
+ "bare-buffer": {
+ "optional": true
+ }
}
},
"node_modules/bare-os": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.0.tgz",
- "integrity": "sha512-BUrFS5TqSBdA0LwHop4OjPJwisqxGy6JsWVqV6qaFoe965qqtaKfDzHY5T2YA1gUL0ZeeQeA+4BBc1FJTcHiPw==",
+ "version": "3.6.1",
+ "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz",
+ "integrity": "sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==",
"dev": true,
"license": "Apache-2.0",
"optional": true,
@@ -2298,9 +2306,9 @@
}
},
"node_modules/chromium-bidi": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-2.1.2.tgz",
- "integrity": "sha512-vtRWBK2uImo5/W2oG6/cDkkHSm+2t6VHgnj+Rcwhb0pP74OoUb4GipyRX/T/y39gYQPhioP0DPShn+A7P6CHNw==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-3.0.0.tgz",
+ "integrity": "sha512-ZOGRDAhBMX1uxL2Cm2TDuhImbrsEz5A/tTcVU6RpXEWaTNUNwsHW6njUXizh51Ir6iqHbKAfhA2XK33uBcLo5A==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
@@ -3233,9 +3241,9 @@
"license": "MIT"
},
"node_modules/esbuild": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
- "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
+ "version": "0.25.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
+ "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
@@ -3246,31 +3254,31 @@
"node": ">=18"
},
"optionalDependencies": {
- "@esbuild/aix-ppc64": "0.25.1",
- "@esbuild/android-arm": "0.25.1",
- "@esbuild/android-arm64": "0.25.1",
- "@esbuild/android-x64": "0.25.1",
- "@esbuild/darwin-arm64": "0.25.1",
- "@esbuild/darwin-x64": "0.25.1",
- "@esbuild/freebsd-arm64": "0.25.1",
- "@esbuild/freebsd-x64": "0.25.1",
- "@esbuild/linux-arm": "0.25.1",
- "@esbuild/linux-arm64": "0.25.1",
- "@esbuild/linux-ia32": "0.25.1",
- "@esbuild/linux-loong64": "0.25.1",
- "@esbuild/linux-mips64el": "0.25.1",
- "@esbuild/linux-ppc64": "0.25.1",
- "@esbuild/linux-riscv64": "0.25.1",
- "@esbuild/linux-s390x": "0.25.1",
- "@esbuild/linux-x64": "0.25.1",
- "@esbuild/netbsd-arm64": "0.25.1",
- "@esbuild/netbsd-x64": "0.25.1",
- "@esbuild/openbsd-arm64": "0.25.1",
- "@esbuild/openbsd-x64": "0.25.1",
- "@esbuild/sunos-x64": "0.25.1",
- "@esbuild/win32-arm64": "0.25.1",
- "@esbuild/win32-ia32": "0.25.1",
- "@esbuild/win32-x64": "0.25.1"
+ "@esbuild/aix-ppc64": "0.25.2",
+ "@esbuild/android-arm": "0.25.2",
+ "@esbuild/android-arm64": "0.25.2",
+ "@esbuild/android-x64": "0.25.2",
+ "@esbuild/darwin-arm64": "0.25.2",
+ "@esbuild/darwin-x64": "0.25.2",
+ "@esbuild/freebsd-arm64": "0.25.2",
+ "@esbuild/freebsd-x64": "0.25.2",
+ "@esbuild/linux-arm": "0.25.2",
+ "@esbuild/linux-arm64": "0.25.2",
+ "@esbuild/linux-ia32": "0.25.2",
+ "@esbuild/linux-loong64": "0.25.2",
+ "@esbuild/linux-mips64el": "0.25.2",
+ "@esbuild/linux-ppc64": "0.25.2",
+ "@esbuild/linux-riscv64": "0.25.2",
+ "@esbuild/linux-s390x": "0.25.2",
+ "@esbuild/linux-x64": "0.25.2",
+ "@esbuild/netbsd-arm64": "0.25.2",
+ "@esbuild/netbsd-x64": "0.25.2",
+ "@esbuild/openbsd-arm64": "0.25.2",
+ "@esbuild/openbsd-x64": "0.25.2",
+ "@esbuild/sunos-x64": "0.25.2",
+ "@esbuild/win32-arm64": "0.25.2",
+ "@esbuild/win32-ia32": "0.25.2",
+ "@esbuild/win32-x64": "0.25.2"
}
},
"node_modules/escalade": {
@@ -7053,18 +7061,18 @@
"license": "MIT"
},
"node_modules/puppeteer": {
- "version": "24.4.0",
- "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.4.0.tgz",
- "integrity": "sha512-E4JhJzjS8AAI+6N/b+Utwarhz6zWl3+MR725fal+s3UlOlX2eWdsvYYU+Q5bXMjs9eZEGkNQroLkn7j11s2k1Q==",
+ "version": "24.5.0",
+ "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.5.0.tgz",
+ "integrity": "sha512-3m0B48gj1A8cK01ma49WwjE8mg4i9UmnR2lP64rwBiLacJ2V20FpT67MgSUyzfz9BcHMQQweuF6Q854mnIYTqg==",
"dev": true,
"hasInstallScript": true,
"license": "Apache-2.0",
"dependencies": {
- "@puppeteer/browsers": "2.8.0",
- "chromium-bidi": "2.1.2",
+ "@puppeteer/browsers": "2.9.0",
+ "chromium-bidi": "3.0.0",
"cosmiconfig": "^9.0.0",
"devtools-protocol": "0.0.1413902",
- "puppeteer-core": "24.4.0",
+ "puppeteer-core": "24.5.0",
"typed-query-selector": "^2.12.0"
},
"bin": {
@@ -7075,14 +7083,14 @@
}
},
"node_modules/puppeteer-core": {
- "version": "24.4.0",
- "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.4.0.tgz",
- "integrity": "sha512-eFw66gCnWo0X8Hyf9KxxJtms7a61NJVMiSaWfItsFPzFBsjsWdmcNlBdsA1WVwln6neoHhsG+uTVesKmTREn/g==",
+ "version": "24.5.0",
+ "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.5.0.tgz",
+ "integrity": "sha512-vqibSk7xGOoqOlPUk3H+Iz02b4jCEd5QxaiuXclqyyBrJ6ZK22mXkg9HBSpyZePq6vKWh5ZAqUilSnbF2bv4Jg==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
- "@puppeteer/browsers": "2.8.0",
- "chromium-bidi": "2.1.2",
+ "@puppeteer/browsers": "2.9.0",
+ "chromium-bidi": "3.0.0",
"debug": "^4.4.0",
"devtools-protocol": "0.0.1413902",
"typed-query-selector": "^2.12.0",
@@ -8755,9 +8763,9 @@
}
},
"node_modules/vite": {
- "version": "6.2.3",
- "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
- "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
+ "version": "6.2.4",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.4.tgz",
+ "integrity": "sha512-veHMSew8CcRzhL5o8ONjy8gkfmFJAd5Ac16oxBUjlwgX3Gq2Wqr+qNC3TjPIpy7TPV/KporLga5GT9HqdrCizw==",
"dev": true,
"license": "MIT",
"dependencies": {
diff --git a/package.json b/package.json
index 7cd23f873..9401bdffb 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
"cssnano": "^7.0.6",
"dom-storage": "^2.1.0",
"element-internals-polyfill": "^3.0.1",
- "esbuild": "^0.25.1",
+ "esbuild": "^0.25.2",
"espree": "^10.3.0",
"estraverse": "^5.3.0",
"flow-bin": "^0.266.1",
@@ -83,13 +83,13 @@
"postcss-responsive-type": "^1.0.0",
"postcss-rtlcss": "^5.6.0",
"postcss-strip-units": "^2.0.1",
- "puppeteer": "^24.4.0",
+ "puppeteer": "^24.5.0",
"sinon": "^20.0.0",
"turbowatch": "^2.29.4",
"url": "^0.11.4",
"url-exist": "3.0.1",
"util": "^0.12.5",
- "vite": "6.2.3",
+ "vite": "6.2.4",
"vite-plugin-banner": "^0.8.0",
"vite-plugin-minify": "^2.1.0",
"vite-plugin-mock": "^3.0.2",
diff --git a/source/components/content/camera.mjs b/source/components/content/camera.mjs
index 85399e9a4..e310c3bf6 100644
--- a/source/components/content/camera.mjs
+++ b/source/components/content/camera.mjs
@@ -69,7 +69,7 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
*
* @fragments /fragments/components/content/camera-capture/
*
- * @example /examples/components/content/camera-capture/
+ * @example /examples/components/content/camera-capture-simple/
*
* @since 3.111.0
* @copyright schukai GmbH
diff --git a/source/components/content/fetch-box.mjs b/source/components/content/fetch-box.mjs
new file mode 100644
index 000000000..4120f5614
--- /dev/null
+++ b/source/components/content/fetch-box.mjs
@@ -0,0 +1,345 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {instanceSymbol} from "../../constants.mjs";
+import {
+ ATTRIBUTE_ROLE
+} from "../../dom/constants.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
+import {
+ assembleMethodSymbol,
+ registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {isString} from "../../types/is.mjs";
+import {FetchBoxStyleSheet} from "./stylesheet/fetch-box.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
+import {Formatter} from "../../text/formatter.mjs";
+
+export {FetchBox};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const fetchBoxElementSymbol = Symbol("fetchBoxElement");
+
+/**
+ * A FetchBox
+ *
+ * @fragments /fragments/components/content/fetch-box/
+ *
+ * @example /examples/components/content/fetch-box-simple
+ *
+ * @since 3.115.0
+ * @copyright schukai GmbH
+ * @summary A beautiful FetchBox that can make your life easier and also looks good. Its like a box, but it fetches data from a URL.
+ */
+class FetchBox extends CustomElement {
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/content/fetch-box@@instance");
+ }
+
+ /**
+ *
+ * @return {Components.Content.FetchBox
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ return this;
+ }
+
+
+ /**
+ * Handles the component's connection to the DOM.
+ * Determines the styling of the component based on its parent's tag name.
+ * Fetches necessary data for the component.
+ *
+ * @return {void} This method does not return a value.
+ */
+ connectedCallback() {
+ super.connectedCallback();
+
+
+ const parent = this.parentElement;
+
+ if (parent) {
+ const blockLevelElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'MAIN', 'NAV', 'ASIDE'];
+ const isBlockLevel = blockLevelElements.includes(parent.tagName);
+
+ if (isBlockLevel) {
+ this.style.display = 'block';
+ this.style.width = '100%';
+ this.style.height = '100%';
+ } else {
+ this.style.display = 'inline-flex';
+ this.style.height = '100%';
+ }
+ }
+
+ this.fetch();
+
+ }
+
+
+ /**
+ * 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} classes CSS classes
+ * @property {string} classes.default CSS class for the main template
+ * @property {string} classes.loading CSS class for the loading template
+ * @property {string} classes.error CSS class for the error template
+ * @property {string} classes.empty CSS class for the empty template
+ * @property {Object} fetch fetch options for the request
+ * @property {string} fetch.redirect error, follow, manual
+ * @property {string} fetch.method GET, POST, PUT, DELETE
+ * @property {string} fetch.mode same-origin, cors, no-cors, navigate
+ * @property {string} fetch.credentials omit, same-origin, include
+ * @property {Object} fetch.headers
+ * @property {string} fetch.headers.accept text/html, application/json
+ * @property {string} fetch.headers.content-type application/json
+ * @property {string} parameter value for the data url
+ * @property {Object} formatter
+ * @property {Object} formatter.marker
+ * @property {string} formatter.marker.open marker for the url
+ * @property {string} formatter.marker.close marker for the url
+ * @property {string} url url to fetch
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ classes: {
+ default: "monster-fetch-box-default",
+ loading: "loading",
+ error: "error",
+ empty: "empty",
+ },
+ data: {},
+ url: null,
+ fetch: {
+ redirect: "error",
+ method: "GET",
+ mode: "same-origin",
+ credentials: "same-origin",
+ headers: {
+ accept: "text/html",
+ },
+ },
+
+ content: {
+ // <slot name="loading"></slot>
+ loading: `<div class="monster-skeleton-animated monster-skeleton-col-100"></div>`,
+ error: `<slot name="error"></slot>`,
+ empty: `<slot name="empty"></slot>`,
+ },
+ visible: "loading",
+ parameter: null,
+
+
+ formatter: {
+ marker: {
+ open: null,
+ close: null,
+ },
+ },
+
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-fetch-box";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [FetchBoxStyleSheet];
+ }
+
+ /**
+ * load content from url
+ */
+ fetch() {
+ try {
+ return loadContent.call(this).then(obj => {
+
+ if (obj.type !== "application/json") {
+ this.setOption("visible", "error");
+ throw new Error("not a json response");
+ }
+
+ try {
+ const content = obj.content;
+ if (!isString(content)|| content === "") {
+ this.setOption("visible", "empty");
+ return
+ }
+
+ const jsonContent = JSON.parse(content);
+ if (jsonContent === null) {
+ this.setOption("visible", "empty");
+ return
+ }
+
+ this.setOption("data", jsonContent);
+ this.setOption("visible", "default");
+
+ } catch (e) {
+ this.setOption("visible", "error");
+ throw e;
+ }
+
+ }).catch(e => {
+ this.setOption("visible", "error");
+ addErrorAttribute(this, e);
+ });
+ } catch (e) {
+ addErrorAttribute(this, e);
+ this.setOption("visible", "error");
+ return Promise.reject(e);
+ }
+ }
+}
+
+/**
+ * @private
+ * @throws {Error} missing url
+ * @throws {Error} we won't be able to read the data
+ * @throws {Error} request failed
+ * @return {Promise}
+ */
+function loadContent() {
+ let url = this.getOption("url");
+
+ if (url instanceof URL) {
+ url = url.toString();
+ }
+
+ if (!isString(url) || url === "") {
+ throw new Error("missing url");
+ }
+
+ let p = this.getOption("parameter", null);
+ if (p === null) {
+ p = "";
+ }
+
+ const data = {
+ parameter : p
+ }
+
+ const formatter = new Formatter(data)
+
+ if (this.getOption("formatter.marker.open")) {
+
+ const open = this.getOption("formatter.marker.open");
+ if (!isString(open)) {
+ throw new TypeError("open is not a string");
+ }
+
+ const close = this.getOption("formatter.marker.close");
+ if (close !== undefined && !isString(close)) {
+ throw new TypeError("close is not a string");
+ }
+
+ formatter.setMarker(
+ open,
+ close
+ );
+ }
+
+ const formattedUrl = formatter.format(
+ url
+ );
+
+
+ const options = this.getOption("fetch", {});
+
+ return fetch(formattedUrl, options).then((response) => {
+ if (!response.ok) {
+ if (["error", "opaque", "opaqueredirect"].includes(response.type)) {
+ throw new Error(`we won't be able to read the data (${response.type})`);
+ }
+
+ const statusClass = String(response.status).charAt(0);
+ if (statusClass === "4") {
+ throw new Error(`client error ${response.statusText}`);
+ }
+ throw new Error(
+ `undefined status (${response.status} / ${response.statusText}) or type (${response.type})`,
+ );
+ }
+
+ return response.text().then((content) => ({
+ content,
+ type: response.headers.get("Content-Type"),
+ }));
+ });
+
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+ this[fetchBoxElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+ // language=HTML
+ return `
+ <div data-monster-role="control" part="control">
+ <div
+ data-monster-attributes="class path:classes.default,
+ data-monster-visible path:visible | equals:default | ?:true:false
+ ">
+ <slot></slot>
+ </div>
+ <div
+ data-monster-attributes="class path:classes.loading,
+ data-monster-visible path:visible | equals:loading | ?:true:false"
+ data-monster-replace="path:content.loading"></div>
+ <div
+ data-monster-attributes="class path:classes.error,
+ data-monster-visible path:visible | equals:error | ?:true:false"
+ data-monster-replace="path:content.error"></div>
+ <div
+ data-monster-attributes="class path:classes.empty,
+ data-monster-visible path:visible | equals:empty | ?:true:false"
+ data-monster-replace="path:content.empty"></div>
+ </div>`;
+}
+
+
+registerCustomElement(FetchBox);
diff --git a/source/components/content/style/fetch-box.pcss b/source/components/content/style/fetch-box.pcss
new file mode 100644
index 000000000..b7fe2a5dc
--- /dev/null
+++ b/source/components/content/style/fetch-box.pcss
@@ -0,0 +1,36 @@
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/skeleton.pcss";
+
+
+[data-monster-role="control"] {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ min-height: 1rem;
+ min-width: 1rem;
+ box-sizing: border-box;
+}
+
+[data-monster-visible="false"] {
+ display: none;
+}
+
+[data-monster-visible="true"] {
+ height: 100%;
+}
+
+:host {
+ display: inline-block;;
+ min-width: 1rem;
+ min-height: 1rem;
+ height: 100%;
+ box-sizing: border-box;
+}
+
+.monster-skeleton-animated {
+ height: 100%;
+ min-height: 1rem;
+}
+
diff --git a/source/components/content/stylesheet/fetch-box.mjs b/source/components/content/stylesheet/fetch-box.mjs
new file mode 100644
index 000000000..efcfd6272
--- /dev/null
+++ b/source/components/content/stylesheet/fetch-box.mjs
@@ -0,0 +1,31 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * 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";
+
+export {FetchBoxStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const FetchBoxStyleSheet = new CSSStyleSheet();
+
+try {
+ FetchBoxStyleSheet.insertRule(`
+@layer fetchbox {
+[data-monster-role=control]{outline:none}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{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}.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}[data-monster-role=control]{box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:1rem;min-width:1rem;width:100%}[data-monster-visible=false]{display:none}[data-monster-visible=true]{height:100%}:host{box-sizing:border-box;display:inline-block;height:100%;min-height:1rem;min-width:1rem}.monster-skeleton-animated{height:100%;min-height:1rem}
+}`, 0);
+} catch (e) {
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}
diff --git a/source/components/style/mixin/skeleton.pcss b/source/components/style/mixin/skeleton.pcss
index f7ab64716..7df6ce94f 100644
--- a/source/components/style/mixin/skeleton.pcss
+++ b/source/components/style/mixin/skeleton.pcss
@@ -1,26 +1,24 @@
-
-
-@define-mixin skeleton $width, $color:var(--monster-color-gray-3), $height:100% {
+@define-mixin skeleton $width, $color, $height:100% {
--monster-skeleton-color: $color;
+ --monster-skeleton-color-50: rgba(from $color 255 255 255 / 0.5);
--monster-skeleton-height: $height;
--monster-skeleton-width: $width;
- --monster-skeleton: linear-gradient(90deg, var(--monster-skeleton-color) 0, transparent var(--monster-skeleton-width));
+ --monster-skeleton: linear-gradient(
+ 99deg,
+ var(--monster-skeleton-color) 0%,
+ var(--monster-skeleton-color-50) 40%,
+ transparent 70%
+ );
- background-image:
- var(--monster-skeleton);
+ background-image: var(--monster-skeleton);
- background-size:
- var(--monster-skeleton-width) var(--monster-skeleton-height);
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- background-repeat:
- no-repeat;
+ background-repeat: no-repeat;
- background-position:
- 0 0;
+ background-position: 0 0;
color: var(--monster-skeleton-color);
min-height: 1px;
-
-
}
diff --git a/source/components/style/skeleton.css b/source/components/style/skeleton.css
index 20b943372..a01f5a912 100644
--- a/source/components/style/skeleton.css
+++ b/source/components/style/skeleton.css
@@ -1,165 +1,2 @@
/** generated from skeleton.pcss **/
-.monster-skeleton-col-10 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 10%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-10,
-.monster-skeleton-col-20 {
- background-image: var(--monster-skeleton);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- color: var(--monster-skeleton-color);
- min-height: 1px;
-}
-.monster-skeleton-col-20 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 20%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-30 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 30%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-30,
-.monster-skeleton-col-40 {
- background-image: var(--monster-skeleton);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- color: var(--monster-skeleton-color);
- min-height: 1px;
-}
-.monster-skeleton-col-40 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 40%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-50 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 50%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-50,
-.monster-skeleton-col-60 {
- background-image: var(--monster-skeleton);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- color: var(--monster-skeleton-color);
- min-height: 1px;
-}
-.monster-skeleton-col-60 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 60%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-70 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 70%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-70,
-.monster-skeleton-col-80 {
- background-image: var(--monster-skeleton);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- color: var(--monster-skeleton-color);
- min-height: 1px;
-}
-.monster-skeleton-col-80 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 80%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-90 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 90%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-col-100,
-.monster-skeleton-col-90 {
- background-image: var(--monster-skeleton);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
- color: var(--monster-skeleton-color);
- min-height: 1px;
-}
-.monster-skeleton-col-100 {
- --monster-skeleton-color: var(--monster-color-gray-3);
- --monster-skeleton-height: 100%;
- --monster-skeleton-width: 100%;
- --monster-skeleton: linear-gradient(
- 90deg,
- var(--monster-skeleton-color) 0,
- transparent var(--monster-skeleton-width)
- );
-}
-.monster-skeleton-animated {
- animation-duration: 2.25s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: shimmer;
- animation-timing-function: linear;
- border-radius: 4px;
-}
-@keyframes shimmer {
- 0% {
- filter: brightness(1);
- }
- 50% {
- filter: brightness(1.5);
- }
- to {
- filter: brightness(1);
- }
-}
+.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}
\ No newline at end of file
diff --git a/source/components/style/skeleton.pcss b/source/components/style/skeleton.pcss
index 442b48447..329c25b5b 100644
--- a/source/components/style/skeleton.pcss
+++ b/source/components/style/skeleton.pcss
@@ -2,27 +2,21 @@
@for $i from 10 to 100 by 10 {
.monster-skeleton-col-$(i) {
- @mixin skeleton $(i)%;
- }
+ @mixin skeleton $(i)%, var(--monster-color-pink-2);
+ }
}
.monster-skeleton-animated {
- animation-duration: 2.25s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: shimmer;
- animation-timing-function: linear;
+ animation: shimmer 4.25s linear infinite forwards;
border-radius: 4px;
}
+
@keyframes shimmer {
- 0% {
- filter: brightness(1);
+ 0%, 100% {
+ filter: brightness(0.81);
}
50% {
- filter: brightness(1.5);
- }
- 100% {
- filter: brightness(1);
+ filter: brightness(0.45);
}
}
\ No newline at end of file
diff --git a/source/components/stylesheet/mixin/skeleton.mjs b/source/components/stylesheet/mixin/skeleton.mjs
index 8341f1811..38dbcd9ba 100644
--- a/source/components/stylesheet/mixin/skeleton.mjs
+++ b/source/components/stylesheet/mixin/skeleton.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 { SkeletonStyleSheet };
+export {SkeletonStyleSheet}
/**
* @private
@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
const SkeletonStyleSheet = new CSSStyleSheet();
try {
- SkeletonStyleSheet.insertRule(
- `
+ SkeletonStyleSheet.insertRule(`
@layer skeleton {
-}`,
- 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/stylesheet/skeleton.mjs b/source/components/stylesheet/skeleton.mjs
index 0f4b88779..424a0e026 100644
--- a/source/components/stylesheet/skeleton.mjs
+++ b/source/components/stylesheet/skeleton.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 { SkeletonStyleSheet };
+export {SkeletonStyleSheet}
/**
* @private
@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
const SkeletonStyleSheet = new CSSStyleSheet();
try {
- SkeletonStyleSheet.insertRule(
- `
+ SkeletonStyleSheet.insertRule(`
@layer skeleton {
-.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation-duration:2.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;border-radius:4px}@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.5)}to{filter:brightness(1)}}
-}`,
- 0,
- );
+.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}
+}`, 0);
} catch (e) {
- addAttributeToken(
- document.getRootNode().querySelector("html"),
- ATTRIBUTE_ERRORMESSAGE,
- e + "",
- );
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
--
GitLab