fix: update darkmode and small display issues

864dc5e4 · Volker Schukai · 5ac50466 · 864dc5e4 · 864dc5e4 · 864dc5e4
Verified Commit 864dc5e4 authored 7 months ago by Volker Schukai
--- a/development/issues/closed/232.html
+++ b/development/issues/closed/232.html
@@ -8,7 +8,10 @@
 </head>
 <body>
-    <main style="padding: 20px">
+    <main style="padding: 20px;">
        <h1>revision of the list design including filters #232</h1>
        <p></p>

--- a/development/issues/closed/260.html
+++ b/development/issues/closed/260.html
@@ -13,7 +13,15 @@
    <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/260">Issue #260</a></li>
    <li><a href="/">Back to overview</a></li>
 </ul>
-<main>
+<button id="button" onclick="getElementById('main').style.width = '650px';">650px</button>
+<button id="button" onclick="getElementById('main').style.width = '550px';">550px</button>
+<button id="button" onclick="getElementById('main').style.width = '450px';">450px</button>
+<button id="button" onclick="getElementById('main').style.width = '350px';">350px</button>
+<main id="main">
    <monster-datasource-dom id="myDataSourceID">
        <script type="application/json">

--- a/development/templates/vite.config.mjs
+++ b/development/templates/vite.config.mjs
@@ -88,7 +88,6 @@ export default defineConfig({
    },
    server: {
-        open: '/development/',
        port: 8443,
        host: "localhost.alvine.dev",
        https: {

--- a/nix/config/release.nix
+++ b/nix/config/release.nix
--- a/source/components/datatable/datasource/dom.mjs
+++ b/source/components/datatable/datasource/dom.mjs
@@ -33,18 +33,6 @@ const dataChangeEventHandlerSymbol = Symbol("dataChangeEventHandler");
 /**
 * The Datasource component is a basic class for the datatable component.
 *
- * <img src="./images/dom.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * @startuml dom.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Datasource
- * Datasource <|-- Dom
- * @enduml
- *
 * @copyright schukai GmbH
 * @summary A dom datasource
 */
@@ -110,6 +98,9 @@ class Dom extends Datasource {
 	 */
 	reload() {}
+	/**
+	 * @return {void}
+	 */
 	connectedCallback() {
 		super.connectedCallback();

--- a/source/components/datatable/datasource/rest.mjs
+++ b/source/components/datatable/datasource/rest.mjs
@@ -127,7 +127,6 @@ class Rest extends Datasource {
 	 * @property {Object} read.parameters.orderBy The order by of the rest api
 	 * @property {Object} read.parameters.page The page of the rest api
 	 * @property {Object} write Write configuration
 	 */
 	get defaults() {
 		const restOptions = new RestAPI().defaults;
@@ -175,7 +174,7 @@ class Rest extends Datasource {
 	 * @param {string} page
 	 * @param {string} query
 	 * @param {string} orderBy
-	 * @return {Monster.Components.Datatable.Datasource.Rest}
+	 * @return {Rest}
 	 */
 	setParameters({ page, query, orderBy }) {
 		const parameters = this.getOption("read.parameters");

--- a/source/components/datatable/datatable.mjs
+++ b/source/components/datatable/datatable.mjs
@@ -88,6 +88,12 @@ export { DataTable };
 */
 const gridElementSymbol = Symbol("gridElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dataControlElementSymbol = Symbol("dataControlElement");
 /**
 * @private
 * @type {symbol}
@@ -100,6 +106,12 @@ const gridHeadersElementSymbol = Symbol("gridHeadersElement");
 */
 const columnBarElementSymbol = Symbol("columnBarElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
 /**
 * The DataTable component is used to show the data from a data source.
 *
@@ -233,6 +245,30 @@ class DataTable extends CustomElement {
 		return "monster-datatable";
 	}
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+		}
+	}
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		const self = this;
+		super.connectedCallback();
+		this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+			updateGrid.call(self);
+		});
+		this[resizeObserverSymbol].observe(this.parentNode);
+	}
 	/**
 	 * @return void
 	 */
@@ -625,10 +661,6 @@ function updateConfigColumnBar() {
 function initEventHandler() {
 	const self = this;
-	getWindow().addEventListener("resize", (event) => {
-		updateGrid.call(self);
-	});
 	self[columnBarElementSymbol].attachObserver(
 		new Observer((e) => {
 			updateHeaderFromColumnBar.call(self);
@@ -858,9 +890,13 @@ function updateGrid() {
 	if (styles !== "") sheet.replaceSync(styles);
 	this.shadowRoot.adoptedStyleSheets = [...DataTable.getCSSStyleSheet(), sheet];
-	const bodyWidth = getDocument().body.getBoundingClientRect().width;
+	const bodyWidth = this.parentNode.clientWidth;
 	const breakpoint = this.getOption("responsive.breakpoint");
+	this[dataControlElementSymbol].classList.toggle(
+		"small",
+		bodyWidth <= breakpoint,
+	);
 	if (bodyWidth > breakpoint) {
 		this[gridElementSymbol].style.gridTemplateColumns =
@@ -875,7 +911,7 @@ function updateGrid() {
 /**
 * @private
- * @param {Monster.Components.Datatable.Header[]} headers
+ * @param {Header[]} headers
 * @param {bool} doFetch
 */
 function setDataSource({ orderBy }, doFetch) {
@@ -896,13 +932,17 @@ function setDataSource({ orderBy }, doFetch) {
 /**
 * @private
- * @return {Monster.Components.Datatable.Form}
+ * @return {DataTable}
 */
 function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
+	this[dataControlElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
 	this[gridElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=datatable]",
 	);

--- a/source/components/datatable/filter-button.mjs
+++ b/source/components/datatable/filter-button.mjs
@@ -20,44 +20,10 @@ import { ToggleButton } from "../host/toggle-button.mjs";
 export { FilterButton };
 /**
- * The Filter Button component is used to show and handle the filter values.
+ * A FilterButton is a button that can be used to show the filter.
- *
- * <img src="./images/filter-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-filter-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-filter-button');` method.
- *
- * ```html
- * <monster-datatable-filter-button></monster-datatable-filter-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-datatable/source/filter.mjs';
- * document.createElement('monster-datatable-filter-button');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml filter-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ToggleButton
- * ToggleButton <|-- FilterButton
- * @enduml
 *
 * @copyright schukai GmbH
- * @summary A data set
+ * @summary A Button that can be used to show the filter.
 */
 class FilterButton extends ToggleButton {
 	/**
@@ -86,7 +52,6 @@ class FilterButton extends ToggleButton {
 	}
 	/**
-	 *
 	 * @return {string}
 	 */
 	static getTag() {
@@ -94,7 +59,7 @@ class FilterButton extends ToggleButton {
 	}
 	/**
-	 * @return {Array}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		const styles = super.getCSSStyleSheet();

--- a/source/components/datatable/filter.mjs
+++ b/source/components/datatable/filter.mjs
@@ -738,7 +738,6 @@ function initTabEvents() {
 * @private
 */
 function updateFilterTabs() {
 	const element = this[filterTabElementSymbol];
 	if (!element) {
 		return;

--- a/source/components/datatable/pagination.mjs
+++ b/source/components/datatable/pagination.mjs
@@ -17,7 +17,8 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getWindow } from "../../dom/util.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
@@ -51,6 +52,24 @@ const paginationElementSymbol = Symbol.for("paginationElement");
 */
 const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
 /**
 * The Pagination component
 *
@@ -148,6 +167,81 @@ class Pagination extends CustomElement {
 		return "monster-pagination";
 	}
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this?.[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+		}
+	}
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		const self = this;
+		super.connectedCallback();
+		const parentNode = this.parentNode;
+		if (!parentNode) {
+			return;
+		}
+		const parentParentNode = parentNode?.parentNode || parentNode;
+		const parentWidth = parentParentNode.clientWidth;
+		const ownWidth = this.clientWidth;
+		this[sizeDataSymbol] = {
+			last: {
+				parentWidth: parentParentNode.clientWidth || 0,
+				ownWidth: this.clientWidth || 0,
+			},
+			showNumbers: ownWidth < parentWidth,
+		};
+		handleDataSourceChanges.call(this);
+		setTimeout(() => {
+			this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+				if (this[debounceSizeSymbol] instanceof DeadMansSwitch) {
+					try {
+						this[debounceSizeSymbol].touch();
+						return;
+					} catch (e) {
+						delete this[debounceSizeSymbol];
+					}
+				}
+				this[debounceSizeSymbol] = new DeadMansSwitch(400, () => {
+					queueMicrotask(() => {
+						const parentWidth = parentParentNode.clientWidth;
+						const ownWidth = this.clientWidth;
+						if (
+							this[sizeDataSymbol]?.last?.parentWidth === parentWidth &&
+							this[sizeDataSymbol]?.last?.ownWidth === ownWidth
+						) {
+							return;
+						}
+						this[sizeDataSymbol].last = {
+							parentWidth: parentWidth,
+							ownWidth: ownWidth,
+						};
+						this[sizeDataSymbol].showNumbers = ownWidth < parentWidth;
+						handleDataSourceChanges.call(this);
+					});
+				});
+			});
+			this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
+		}, 500);
+	}
 	/**
 	 * @return {void}
 	 */
@@ -173,6 +267,7 @@ class Pagination extends CustomElement {
 			element.datasource.attachObserver(
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
 			handleDataSourceChanges.call(this);
 		}
 	}
@@ -244,6 +339,10 @@ function initEventHandler() {
 			}
 		}
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
 		let page = null;
 		if (!element.hasAttribute("data-page-no")) {
@@ -264,7 +363,17 @@ function initEventHandler() {
 			return;
 		}
-		datasource.setParameters({ page }).reload();
+		if (typeof datasource.setParameters !== "function") {
+			return;
+		}
+		datasource.setParameters({ page });
+		if (typeof datasource.reload !== "function") {
+			return;
+		}
+		datasource.reload();
 	});
 }
@@ -320,11 +429,18 @@ function handleDataSourceChanges() {
 		this.getOption("currentPage"),
 		this.getOption("pages"),
 	);
+	if (this?.[sizeDataSymbol]?.showNumbers !== true) {
+		pagination.items = [];
+	}
+	getWindow().requestAnimationFrame(() => {
 		this.setOption("pagination", pagination);
+	});
 }
 /**
- *
+ * @private
 * @param current
 * @param max
 * @return  {object}
@@ -436,13 +552,15 @@ function getTemplate() {
            <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
                <ul class="pagination-list" data-monster-insert="items path:pagination.items"
                    data-monster-select-this="true">
-                    <li part="pagination-prev"><a data-monster-role="pagination-prev"
+                    <li part="pagination-prev" data-monster-role="pagination-prev"><a
+                            data-monster-role="pagination-prev"
                            data-monster-attributes="
            class path:pagination.prevClass | prefix: previous,
            data-page-no path:pagination.prevNo,
            href path:pagination.prevHref | prefix: #"
                            data-monster-replace="path:labels.previous">Previous</a></li>
-                    <li part="pagination-next"><a data-monster-role="pagination-next"
+                    <li part="pagination-next" data-monster-role="pagination-next"><a
+                            data-monster-role="pagination-next"
                            data-monster-attributes="class path:pagination.nextClass | prefix: next,
            data-page-no path:pagination.nextNo,
        href path:pagination.nextHref | prefix: #"

--- a/source/components/datatable/style/datatable.pcss
+++ b/source/components/datatable/style/datatable.pcss
@@ -18,12 +18,6 @@
 @import "../../style/theme.pcss";
 @import "../../style/skeleton.pcss";
-[data-monster-role="control"] {
-    container-type: inline-size ;
-    container-name: datatable;
-    @mixin text;
-} 
 ::slotted(monster-collapse) {
    --monster-color-gradient-1: none;
    --monster-color-gradient-2: none;
@@ -252,15 +246,14 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
    padding: var(--monster-space-7) 0;
 }
+[data-monster-role="control"].small {
-@container datatable (max-width: 900px) {
+    & [data-monster-role="datatable-headers"] {
-    [data-monster-role="datatable-headers"] {
        display: none;
    }
-    [data-monster-role="table-container"] {
+    & [data-monster-role="table-container"] {
        & .bar {
            display: flex;
@@ -285,7 +278,7 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
        }
    }
-    ::slotted(.monster-button-group) {
+    & ::slotted(.monster-button-group) {
        display: flex;
        flex-direction: column !important;
    }

--- a/source/components/datatable/style/embedded-pagination.pcss
+++ b/source/components/datatable/style/embedded-pagination.pcss
@@ -7,6 +7,8 @@
 @import "../../style/control.pcss";
 @import "../../style/property.pcss";
 [data-monster-role=pagination] {
    @mixin text;
    display: flex;
@@ -15,7 +17,7 @@
    & ul {
        display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        list-style: none;
@@ -23,14 +25,20 @@
        padding-left: 0;
        margin: 20px 0;
    }
    & ul li {
        margin: 0;
-        border-left: solid 1px black;
+        border-left: solid 1px var(--monster-theme-control-border-color);
        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
        & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
            width: max-content;
            color: var(--monster-theme-control-color);
@@ -92,67 +100,14 @@
        }
    }
- /*   
-    & [data-monster-error-state=hidden] {
-        display: none;
-    }
-    & [data-monster-loading-state=hidden] {
-        display: none;
-    }
-*/
-/**    & .pagination-loading-state {
-        align-items: center;
-        display: flex;
-        &.hidden {
-            display: none;
-        }
 }
-    & .pagination-error-state {
-        align-items: center;
-        display: flex;
-        &.hidden {
+@container (min-width: 800px) {
-            display: none;
+    [data-monster-role=pagination] {
-        }
+        background-color: red;
-    & .state-icon-container {
+        color: red;
-        width:2em;
-        height:2em;
-        margin:0 5px 0 2px;
-    }
-    }*/
-/*
-    & .pagination-state {
-        display: flex !important;
-        flex-wrap: nowrap;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        & [data-monster-error-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        & [data-monster-loading-state] {
-            width:2em;
-            height:2em;
-            margin:0 5px 0 2px;
    }
-    }*/
 }
--- a/source/components/datatable/style/filter-button.pcss
+++ b/source/components/datatable/style/filter-button.pcss
@@ -5,18 +5,21 @@
 [data-monster-role="control"] {
    & a {
        display: flex;
        align-items: center;
-        color: var(--monster-color-primary-1);
        background: none;
+        color: var(--monster-color-primary-1);
        &:after {
-            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%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-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%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-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            content: "";
-            margin: 2px 3px 0 5px;
+            display: inline-block;
-            padding-top: 4px;
+            width: 16px;
+            height: 16px;
+            background-color: var(--monster-color-primary-1);
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%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-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%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-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            mask-size: cover;
+            margin: 0 3px 0 5px;
        }
    }
 }
--- a/source/components/datatable/style/filter.pcss
+++ b/source/components/datatable/style/filter.pcss
@@ -97,7 +97,7 @@
            }
            & monster-select {
-                min-width: 350px;
+                min-width: 150px;
            }
            & [data-monster-visible=false] {

--- a/source/components/datatable/stylesheet/column-bar.mjs
+++ b/source/components/datatable/stylesheet/column-bar.mjs
--- a/source/components/datatable/stylesheet/datatable.mjs
+++ b/source/components/datatable/stylesheet/datatable.mjs
--- a/source/components/datatable/stylesheet/embedded-pagination.mjs
+++ b/source/components/datatable/stylesheet/embedded-pagination.mjs
--- a/source/components/datatable/stylesheet/filter-button.mjs
+++ b/source/components/datatable/stylesheet/filter-button.mjs
@@ -25,7 +25,7 @@ try {
 	FilterButtonStyleSheet.insertRule(
 		`
 @layer filterbutton { 
-:host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}:is([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' viewBox='0 0 16 16'%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}:is([data-monster-role=control] a):after{background-color:var(--monster-color-primary-1);content:\"\";display:inline-block;height:16px;margin:0 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%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\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%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\");-webkit-mask-size:cover;mask-size:cover;width:16px} 
 }`,
 		0,
 	);

--- a/source/components/datatable/stylesheet/filter.mjs
+++ b/source/components/datatable/stylesheet/filter.mjs
--- a/source/components/datatable/stylesheet/pagination.mjs
+++ b/source/components/datatable/stylesheet/pagination.mjs