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

fix: fix loading select #135

parent 69718fe7
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1108 additions and 131 deletions
playground/select-fetch/index.html 0 → 100644
+ 43
− 0
View file @ 55db077b
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<script src="./main.js" type="module"></script>
</head>
<body>
<main style="width:300px">
<h1>Select with data</h1>
<monster-select value="DE"
data-monster-option-features-lazyLoad="false"
data-monster-option-url="http://localhost:8070/assets/world.json"
data-monster-option-closeonselect="true"
data-monster-option-filter-mode="options"
data-monster-option-filter-position="popper"
>
</monster-select>
<h1>Lazy load</h1>
<monster-select value="DE"
data-monster-option-features-lazyLoad="true"
data-monster-option-url="http://localhost:8070/assets/world.json"
data-monster-option-closeonselect="true"
data-monster-option-filter-mode="options"
data-monster-option-filter-position="popper"
>
</monster-select>
</main>
</body>
</html>
\ No newline at end of file
playground/select-fetch/main.js 0 → 100644
+ 52
− 0
View file @ 55db077b
import "../../source/components/style/property.pcss";
import "../../source/components/style/normalize.pcss";
import "../../source/components/style/color.pcss";
import "../../source/components/style/theme.pcss";
import "../../source/components/style/typography.pcss";
import "../../source/components/style/form.pcss";
import "../../source/components/style/link.pcss";
import "../../source/components/style/button.pcss";
import "../../source/components/style/ripple.pcss";
import "../../source/components/form/select.mjs";
import "./main.pcss";
const url = "http://localhost:8070/assets/world.json";
const selects = document.querySelectorAll("monster-select");
const option = {
// "url": url,
// "features": {
// "closeOnSelect": false
// // "loadOnOpen": false,
// },
"fetch": {
"headers": {
"Content-Type": "application/json",
"Accept": "application/json"
},
"mode": "cors"
},
"mapping": {
"selector": "*",
"urlTemplate": "/api/workflow/transfer?${name}",// $ muss enthalten sein
"labelTemplate": "${name}",
"valueTemplate": "${alpha-2}",//name > API Antwort wird zu $0.value Button
"labelSelector": "*",
}
}
for (let select of selects) {
select.setOptions(option);
}
//select.setOptions(option);
//
// select.fetch(url).then((data) => {
// console.log(data);
// }).catch((error) => {
// console.error(error);
// });
playground/select-fetch/main.pcss 0 → 100644
+ 0
− 0
View file @ 55db077b
playground/select/main.js
+ 0
− 1
View file @ 55db077b
...@@ -29,7 +29,6 @@ const option = { ...@@ -29,7 +29,6 @@ const option = {
}, },
"mapping": { "mapping": {
"selector": "dataset.possibleTransitions.*", "selector": "dataset.possibleTransitions.*",
"apiTemplate": "${name}",
"urlTemplate": "/api/workflow/transfer?${name}",// $ muss enthalten sein !! "urlTemplate": "/api/workflow/transfer?${name}",// $ muss enthalten sein !!
"labelTemplate": "Übergang zu ${to}", "labelTemplate": "Übergang zu ${to}",
"valueTemplate": "${name}",//name > API Antwort wird zu $0.value Button "valueTemplate": "${name}",//name > API Antwort wird zu $0.value Button
......
playground/tree-select/data.json 0 → 100644
+ 847
− 0
View file @ 55db077b
{
"dataset": {
"2": {
"cid": 2,
"name": "Fashion",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Mode",
"en": "Fashion",
"fr": "Mode"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 0,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"5": {
"cid": 5,
"name": "Outerwear",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Oberbekleidung",
"en": "Outer garments",
"fr": "Vêtements de dessus"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 2,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"7": {
"cid": 7,
"name": "Accessories",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Accessoires",
"en": "Accessoires",
"fr": "Accessoires"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 2,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"9": {
"cid": 9,
"name": "Shirts",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0
},
"localeLabel": {
"de": "Shirts",
"en": "Shirts"
},
"locale": {
"de": {
"description": ""
},
"en": {
"description": ""
}
},
"tags": [],
"parentCID": 2,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"10": {
"cid": 10,
"name": "Electronics",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 1000,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Elektronik",
"en": "Electronics",
"fr": "Electronique"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 0,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"11": {
"cid": 11,
"name": "Schmuck",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Schmuck",
"en": "Jewelry",
"fr": "Bijoux"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 2,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"12": {
"cid": 12,
"name": "Handtaschen",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Werkzeug",
"en": "Handbags",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 7,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"13": {
"cid": 13,
"name": "Schuhe",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Schuhe",
"en": "Shoes",
"fr": "Chaussures"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 2,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"14": {
"cid": 14,
"name": "Büroartikel",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Werkzeug",
"en": "Office supplies",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 0,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"15": {
"cid": 15,
"name": "Werkzeug",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Werkzeug",
"en": "Tools",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 0,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"16": {
"cid": 16,
"name": "Laptop",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Laptop",
"en": "Laptop",
"fr": "Ordinateurs"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 10,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"17": {
"cid": 17,
"name": "Bohrer",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"nl": 0,
"fr": 0
},
"localeLabel": {
"de": "Bohrer",
"en": "Driller",
"nl": "boor",
"fr": "perceuse"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"nl": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 15,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"18": {
"cid": 18,
"name": "Akkuschrauber",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"nl": 0,
"fr": 0
},
"localeLabel": {
"de": "Akkuschrauber",
"en": "Cordless Screwdriver",
"nl": "Accuschroevendraaier",
"fr": "Tournevis sans fil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"nl": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 15,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"19": {
"cid": 19,
"name": "Taschenmesser",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Taschenmesser",
"en": "Pocket Knife",
"fr": "Couteau de poche"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 15,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"20": {
"cid": 20,
"name": "Papier",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"nl": 0,
"fr": 0
},
"localeLabel": {
"de": "Papier",
"en": "Paper",
"nl": "Papier",
"fr": "Papier"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"nl": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 14,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"21": {
"cid": 21,
"name": "Büroklammern",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Büroklammern",
"en": "Paper clips",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 14,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"22": {
"cid": 22,
"name": "KONFIGURATOR",
"token": "",
"flag": false,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "KONFIGURATOR",
"en": "Configurator",
"fr": "KONFIGURATOR"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 0,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"23": {
"cid": 23,
"name": "KONFIG-STOFF",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Konfigurator Stoff",
"en": "Konfigurator Stoff",
"fr": "Konfigurator Stoff"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 22,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"24": {
"cid": 24,
"name": "KONFIG-COLLAR",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "config",
"en": "config 1",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 22,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
},
"25": {
"cid": 25,
"name": "KONFIG-SLEEVES",
"token": "",
"flag": true,
"specificationWeight": 0,
"specificationWeightUnit": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0
},
"localeLabel": {
"de": "Werkzeug",
"en": "config 2",
"fr": "Outil"
},
"locale": {
"de": {
"description": "",
"seo": ""
},
"en": {
"description": "",
"seo": ""
},
"fr": {
"description": "",
"seo": ""
}
},
"tags": [],
"parentCID": 22,
"ranking": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "1970-01-01T00:59:59",
"erpCreation": "1970-01-01T00:59:59",
"archived": false
}
},
"sys": {
"pagination": {
"currentPage": 1,
"nextOffset": 20,
"pages": 3,
"prevOffset": null,
"offset": 0,
"objectsPerPage": 20,
"total": 46
},
"message": "200 OK",
"code": 200
}
}
\ No newline at end of file
playground/tree-select/data2.json 0 → 100644
+ 27
− 0
View file @ 55db077b
{
"dataset": {
"state": "partlyopen",
"possibleTransitions": [
{
"name": "cmd-reset 2",
"from": null,
"to": "init 5"
},
{
"name": "cmd-partlyopen-to-edit 2",
"from": "partlyopen 4",
"to": "edit 6"
},
{
"name": "cmd-partlyopen-to-visuellCheck 2",
"from": "partlyopen",
"to": "visuellCheck 2"
},
{
"name": "cmd-partlyopen-to-visuellCheck 33",
"from": "xxxxx",
"to": "visuellCheck 3"
}
]
}
}
\ No newline at end of file
playground/tree-select/index.html 0 → 100644
+ 25
− 0
View file @ 55db077b
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<script src="./main.js" type="module"></script>
</head>
<body>
<main>
<h1>Select</h1>
<div id="container">
</div>
</main>
</body>
</html>
\ No newline at end of file
playground/tree-select/main.js 0 → 100644
+ 33
− 0
View file @ 55db077b
import "../../source/components/style/property.pcss";
import "../../source/components/style/normalize.pcss";
import "../../source/components/style/color.pcss";
import "../../source/components/style/theme.pcss";
import "../../source/components/style/typography.pcss";
import "../../source/components/style/form.pcss";
import "../../source/components/style/link.pcss";
import "../../source/components/style/button.pcss";
import "../../source/components/style/ripple.pcss";
import "../../source/components/form/tree-select.mjs";
import "./main.pcss";
const treeselect = document.createElement('monster-tree-select');
// URL
treeselect.setOption('url','data.json');
// Multiselect
treeselect.setOption('type', 'checkbox');
// search for data in dataset
treeselect.setOption('mapping.selector', 'dataset.*');
// define label and key
treeselect.setOption('mapping.labelTemplate', '${localeLabel | index:en}');
treeselect.setOption('mapping.valueTemplate', '${cid | tostring }');
// wich field is the parent ID?
treeselect.setOption('mapping.parentTemplate', 'parentCID');
treeselect.setOption('mapping.idTemplate', 'cid');
// append
document.getElementById('container').appendChild(treeselect); ;
\ No newline at end of file
playground/tree-select/main.pcss 0 → 100644
+ 0
− 0
View file @ 55db077b
playground/vite.config.js
+ 11
− 0
View file @ 55db077b
...@@ -111,6 +111,17 @@ export default defineConfig({ ...@@ -111,6 +111,17 @@ export default defineConfig({
}, },
}, },
'^/assets/world.json$': {
target: 'https://monsterjs.org/',
changeOrigin: true,
configure: (proxy, options) => {
proxy.secure = true
proxy.agent = null
},
},
}, },
}, },
......
source/components/datatable/stylesheet/column-bar.mjs
+ 7
− 13
View file @ 55db077b
This diff is collapsed.
source/components/datatable/stylesheet/dataset.mjs
+ 7
− 13
View file @ 55db077b
This diff is collapsed.
source/components/datatable/stylesheet/datasource.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { DatasourceStyleSheet }; export {DatasourceStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { DatasourceStyleSheet }; ...@@ -17,17 +18,10 @@ export { DatasourceStyleSheet };
const DatasourceStyleSheet = new CSSStyleSheet(); const DatasourceStyleSheet = new CSSStyleSheet();
try { try {
DatasourceStyleSheet.insertRule( DatasourceStyleSheet.insertRule(`
`
@layer datasource { @layer datasource {
:host{display:none}:host(.intersection-observer){display:block;height:1px;overflow:hidden;width:1px} :host{display:none}:host(.intersection-observer){display:block;height:1px;overflow:hidden;width:1px}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/datatable.mjs
+ 7
− 13
View file @ 55db077b
Source diff could not be displayed: it is too large. Options to address this: view the blob.
source/components/datatable/stylesheet/embedded-pagination.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { EmbeddedPaginationStyleSheet }; export {EmbeddedPaginationStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { EmbeddedPaginationStyleSheet }; ...@@ -17,17 +18,10 @@ export { EmbeddedPaginationStyleSheet };
const EmbeddedPaginationStyleSheet = new CSSStyleSheet(); const EmbeddedPaginationStyleSheet = new CSSStyleSheet();
try { try {
EmbeddedPaginationStyleSheet.insertRule( EmbeddedPaginationStyleSheet.insertRule(`
`
@layer embeddedpagination { @layer embeddedpagination {
:where(html){line-height:1.15}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(pre){font-family:monospace,monospace;font-size:1em}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%;min-height:100%}body{box-sizing:border-box;margin:0;min-height:99%;padding:0;word-break:break-word}.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}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.4}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{border-left:1px solid #000;margin:0;padding:0 10px}[data-monster-role=pagination] ul li a,[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover,[data-monster-role=pagination] ul li a:link,[data-monster-role=pagination] ul li a:visited{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);outline:none;padding:0 .4rem;text-decoration:none;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover{outline:none}[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:unset}[data-monster-role=pagination] ul li a.disabled{cursor:not-allowed}[data-monster-role=pagination] ul li:first-child{border-left:none}@media (max-width:768px){[data-monster-role=pagination] ul li{padding:0 2px}[data-monster-role=pagination] ul li:first-child,[data-monster-role=pagination] ul li:nth-child(2){display:none}[data-monster-role=pagination] ul li:nth-child(3){border-left:none}} :where(html){line-height:1.15}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(pre){font-family:monospace,monospace;font-size:1em}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%;min-height:100%}body{box-sizing:border-box;margin:0;min-height:99%;padding:0;word-break:break-word}.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}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.4}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{border-left:1px solid #000;margin:0;padding:0 10px}[data-monster-role=pagination] ul li a,[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover,[data-monster-role=pagination] ul li a:link,[data-monster-role=pagination] ul li a:visited{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);outline:none;padding:0 .4rem;text-decoration:none;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover{outline:none}[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:unset}[data-monster-role=pagination] ul li a.disabled{cursor:not-allowed}[data-monster-role=pagination] ul li:first-child{border-left:none}@media (max-width:768px){[data-monster-role=pagination] ul li{padding:0 2px}[data-monster-role=pagination] ul li:first-child,[data-monster-role=pagination] ul li:nth-child(2){display:none}[data-monster-role=pagination] ul li:nth-child(3){border-left:none}}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/filter-button.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FilterButtonStyleSheet }; export {FilterButtonStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { FilterButtonStyleSheet }; ...@@ -17,17 +18,10 @@ export { FilterButtonStyleSheet };
const FilterButtonStyleSheet = new CSSStyleSheet(); const FilterButtonStyleSheet = new CSSStyleSheet();
try { try {
FilterButtonStyleSheet.insertRule( FilterButtonStyleSheet.insertRule(`
`
@layer filterbutton { @layer filterbutton {
:host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}[data-monster-role=control] a:after{content: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-filter-square'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");margin:2px 3px 0 5px;padding-top:4px} :host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}[data-monster-role=control] a:after{content: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-filter-square'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");margin:2px 3px 0 5px;padding-top:4px}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/filter-controls-defaults.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FilterControlsDefaultsStyleSheet }; export {FilterControlsDefaultsStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { FilterControlsDefaultsStyleSheet }; ...@@ -17,17 +18,10 @@ export { FilterControlsDefaultsStyleSheet };
const FilterControlsDefaultsStyleSheet = new CSSStyleSheet(); const FilterControlsDefaultsStyleSheet = new CSSStyleSheet();
try { try {
FilterControlsDefaultsStyleSheet.insertRule( FilterControlsDefaultsStyleSheet.insertRule(`
`
@layer filtercontrolsdefaults { @layer filtercontrolsdefaults {
[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}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}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}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}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/filter-date-range.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FilterDateRangeStyleSheet }; export {FilterDateRangeStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { FilterDateRangeStyleSheet }; ...@@ -17,17 +18,10 @@ export { FilterDateRangeStyleSheet };
const FilterDateRangeStyleSheet = new CSSStyleSheet(); const FilterDateRangeStyleSheet = new CSSStyleSheet();
try { try {
FilterDateRangeStyleSheet.insertRule( FilterDateRangeStyleSheet.insertRule(`
`
@layer filterdaterange { @layer filterdaterange {
[data-monster-role=input]{width:100%}.hidden{display:none} [data-monster-role=input]{width:100%}.hidden{display:none}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/filter-range.mjs
+ 7
− 13
View file @ 55db077b
/** /**
* Copyright schukai GmbH and contributors 2024. All Rights Reserved. * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
...@@ -5,10 +6,10 @@ ...@@ -5,10 +6,10 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/ */
import { addAttributeToken } from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FilterRangeStyleSheet }; export {FilterRangeStyleSheet}
/** /**
* @private * @private
...@@ -17,17 +18,10 @@ export { FilterRangeStyleSheet }; ...@@ -17,17 +18,10 @@ export { FilterRangeStyleSheet };
const FilterRangeStyleSheet = new CSSStyleSheet(); const FilterRangeStyleSheet = new CSSStyleSheet();
try { try {
FilterRangeStyleSheet.insertRule( FilterRangeStyleSheet.insertRule(`
`
@layer filterrange { @layer filterrange {
[data-monster-role=input]{width:100%} [data-monster-role=input]{width:100%}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/datatable/stylesheet/filter.mjs
+ 7
− 13
View file @ 55db077b
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment