diff --git a/development/issues/open/237.html b/development/issues/open/237.html
new file mode 100644
index 0000000000000000000000000000000000000000..5996868ace9e9ad04672db051e8afb7ccee72c1c
--- /dev/null
+++ b/development/issues/open/237.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>new slieder control #237</title>
+ <script src="./237.mjs" type="module"></script>
+
+ <style>
+
+ :not(:defined) {
+ display: none;
+ }
+
+ .slide {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ }
+
+
+
+ main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ }
+
+ monster-slider::part(prev) {
+ }
+
+ monster-slider::part(control) {
+
+ }
+
+ .container {
+ padding: 10px;
+ width: 1200px;
+ height: 600px;
+ background-color: #cccccc;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+
+ </style>
+</head>
+<body>
+ <h1>new slieder control #237</h1>
+ <p>user aborted</p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/237">Issue #237</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+ <main>
+
+ <div class="container">
+ <monster-slider>
+ <div slot="prev"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
+ <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
+ </svg></div>
+ <div class="slide" style="background-color: #ff6666;width:50px">
+ <h1>SLIDE 1</h1>
+ </div>
+ <div class="slide" style="background-color: #ff6666;width:50px">
+ <h1>SLIDE 1 a</h1>
+ </div>
+ <div class="slide" style="background-color: #66ff66;width:50px;"><svg xmlns="http://www.w3.org/2000/svg"
+ width="467" height="462">
+ <rect x="80" y="60" width="250" height="250" rx="20"
+ style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
+
+ <rect x="140" y="120" width="250" height="250" rx="40"
+ style="fill:#0000ff; stroke:#000000; stroke-width:2px;
+ fill-opacity:0.7;" />
+ </svg></div>
+ <div class="slide" style="background-color: #6666ff;width:50px;">
+
+ <h1>SLIDE 3</h1>
+
+ </div>
+ <div slot="next">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
+ <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
+ </svg>
+
+ </div>
+ </monster-slider>
+ </div>
+
+ </main>
+</body>
+</html>
diff --git a/development/issues/open/237.mjs b/development/issues/open/237.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..13ab5f42440599af6fb2e48599d3472996444eb0
--- /dev/null
+++ b/development/issues/open/237.mjs
@@ -0,0 +1,15 @@
+/**
+* @file development/issues/open/237.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/237
+* @description new slieder control
+* @issue 237
+*/
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/layout/slider.mjs";
+
diff --git a/development/issues/open/test.jpeg b/development/issues/open/test.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..d64bf2b008b4b281e94da441f976c67294d612af
Binary files /dev/null and b/development/issues/open/test.jpeg differ
diff --git a/development/mock/issue-233.js b/development/mock/issue-233.js
index 478054c208674c35a9509680048411df66e18a53..eae7c9e3d75065e4783151929527f7af85df1a4a 100644
--- a/development/mock/issue-233.js
+++ b/development/mock/issue-233.js
@@ -475,16 +475,13 @@ const json =
"result": {},
"api_version": "1"
}
-}
-
-
- `;
+}`;
-// check if json is valid
+// check if JSON is valid
JSON.parse(json)
-const requestDelay = 100
+const requestDelay = 0
export default [
{
diff --git a/development/scripts/createNewClass.mjs b/development/scripts/createNewClass.mjs
index f831199cbe18871ba86983a8fdc67ac6b2cf70e1..14a3a2b2908db9d489aa36580a3dfb7f788debc7 100644
--- a/development/scripts/createNewClass.mjs
+++ b/development/scripts/createNewClass.mjs
@@ -336,15 +336,17 @@ if(onlyDocumentation) {
classPath = argsObj.path;
className = classPath.split('/').pop().replace('.mjs', '');
className = className.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-} else {
- classPath = `${directory}/${htmlTagSuffix}.mjs`;
-
}
const lowerFirst = className[0].toLowerCase() + className.slice(1);
className = className[0].toUpperCase() + className.slice(1);
const htmlTagSuffix = className.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+if(!onlyDocumentation) {
+ classPath = `${directory}/${htmlTagSuffix}.mjs`;
+}
+
+
const styleDirectory = `${directory}/style`;
const pcssPath = `${styleDirectory}/${htmlTagSuffix}.pcss`;
diff --git a/source/components/datatable/datasource/rest.mjs b/source/components/datatable/datasource/rest.mjs
index 344e7d3638381c038ab03851a44059d4f7cc2f41..43f810e722e9c7b06477a4be8411a1fa4d50b867 100644
--- a/source/components/datatable/datasource/rest.mjs
+++ b/source/components/datatable/datasource/rest.mjs
@@ -215,6 +215,7 @@ class Rest extends Datasource {
* @returns {Promise<never>|*}
*/
fetch() {
+
const opt = clone(this.getOption("read"));
this[dataSourceSymbol].setOption("read", opt);
diff --git a/source/components/layout/slider.mjs b/source/components/layout/slider.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..69f7e6fbb81be68fc8e95ae4c504aecbd51725b8
--- /dev/null
+++ b/source/components/layout/slider.mjs
@@ -0,0 +1,668 @@
+/**
+ * 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 {addAttributeToken} from "../../dom/attributes.mjs";
+import {
+ ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_PREFIX,
+ ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
+import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
+import {
+ assembleMethodSymbol,
+ registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {SliderStyleSheet} from "./stylesheet/slider.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
+
+import {getWindow} from "../../dom/util.mjs";
+
+export {Slider};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sliderElementSymbol = Symbol("sliderElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const prevElementSymbol = Symbol("prevElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const nextElementSymbol = Symbol("nextElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const configSymbol = Symbol("config");
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from"
+
+/**
+ * A Slider
+ *
+ * @fragments /fragments/components/form/slider/
+ *
+ * @example /examples/components/form/slider-simple
+ *
+ * @since 3.74.0
+ * @copyright schukai GmbH
+ * @summary A beautiful Slider that can make your life easier and also looks good.
+ */
+class Slider extends CustomElement {
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/layout/slider@@instance");
+ }
+
+ /**
+ *
+ * @return {Components.Layout.Slider
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+
+ this[configSymbol] = {
+ currentIndex: 0,
+
+ isDragging: false,
+ draggingPos: 0,
+ startPos: 0,
+ // currentTranslate: 0,
+ // prevTranslate: 0,
+ //
+ // startPositions: null,
+ // currentPositions: null,
+
+ autoPlayInterval: null,
+ }
+
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ initStructure.call(this);
+
+ return this;
+ }
+
+ /**
+ * To set the options via the html tag the attribute `data-monster-options` must be used.
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+ *
+ * The individual configuration values can be found in the table.
+ *
+ * @property {Object} templates Template definitions
+ * @property {string} templates.main Main template
+ * @property {Object} labels Label definitions
+ * @property {Object} actions Callbacks
+ * @property {string} actions.click="throw Error" Callback when clicked
+ * @property {Object} features Features
+ * @property {Object} classes CSS classes
+ * @property {boolean} disabled=false Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ labels: {},
+ classes: {},
+ disabled: false,
+
+ features: {
+ carousel: false,
+ autoPlay: true,
+ thumbnails: true,
+ },
+
+ autoPlay: {
+ delay: 1500,
+ startDelay: 1000,
+ direction: "next",
+ mouseOverPause: true,
+ touchPause: true,
+ drag: true,
+ },
+
+ actions: {
+ click: () => {
+ throw new Error("the click action is not defined");
+ },
+ }
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-slider";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [SliderStyleSheet];
+ }
+
+ /**
+ * moves the slider to the given index
+ *
+ * @param index
+ * @returns {void}
+ */
+ moveTo(index) {
+ return moveTo.call(this, index)
+ }
+
+ /**
+ * shows the previous slide
+ *
+ * @return {void}
+ */
+ previous() {
+ return prev.call(this);
+ }
+
+ /**
+ * shows the next slide
+ *
+ * @return {void}
+ */
+ next() {
+ return next.call(this);
+ }
+
+ /**
+ * stops the auto play
+ *
+ * @return {void}
+ */
+ stopAutoPlay() {
+ if (this[configSymbol].autoPlayInterval) {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ }
+ }
+
+ /**
+ * starts the auto play
+ *
+ * @return {void}
+ */
+ startAutoPlay() {
+ initAutoPlay.call(this);
+ }
+
+}
+
+/**
+ * @private
+ * @param name
+ */
+function initNavigation(name) {
+ const element = this.shadowRoot.querySelector("." + name + "");
+ const elementHeight = element.offsetHeight;
+ element.style.top = `calc(50% - ${elementHeight / 2}px)`;
+}
+
+/**
+ * @private
+ */
+function initStructure() {
+ initNavigation.call(this, "next");
+ initNavigation.call(this, "prev");
+
+ if (this.getOption("features.thumbnails")) {
+ initThumbnails.call(this);
+ }
+
+ if (this.getOption("features.carousel")) {
+ initCarousel.call(this);
+ }
+
+ if (this.getOption("features.autoPlay")) {
+ initAutoPlay.call(this);
+ }
+}
+
+/**
+ * @private
+ */
+function initThumbnails() {
+ const self = this;
+ const thumbnails = this.shadowRoot.querySelector("[data-monster-role='thumbnails']");
+ const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+
+ slides.forEach((slide, index) => {
+ const thumbnail = document.createElement("div");
+ thumbnail.classList.add("thumbnail");
+ thumbnail.addEventListener("click", () => {
+ if (self.getOption("features.carousel")) {
+ this.moveTo(index + 1);
+ } else {
+ this.moveTo(index);
+ }
+ });
+
+ thumbnails.appendChild(thumbnail);
+ })
+
+ this.addEventListener("monster-slider-moved", (e) => {
+ const index = e.detail.index;
+ const thumbnail = thumbnails.children[index];
+
+ if (!thumbnail) {
+ return;
+ }
+
+ Array.from(thumbnails.children).forEach((thumb) => {
+ thumb.classList.remove("current");
+ })
+
+ thumbnail.classList.add("current");
+ })
+}
+
+/**
+ * @private
+ */
+function initAutoPlay() {
+ const self = this;
+ const autoPlay = this.getOption("autoPlay");
+ const delay = autoPlay.delay;
+ const startDelay = autoPlay.startDelay;
+ const direction = autoPlay.direction;
+
+ function start() {
+
+ if (self[configSymbol].autoPlayInterval) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+
+ self[configSymbol].autoPlayInterval = setInterval(() => {
+ if (direction === "next") {
+ if(self.next() === -1) {
+ if (self.getOption("features.carousel")) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+ }
+ } else {
+ if (self.previous() === -1) {
+ if (self.getOption("features.carousel")) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+ }
+ }
+ }, delay);
+ }
+
+ setTimeout(() => {
+ start();
+ }, startDelay);
+
+ if (autoPlay.mouseOverPause) {
+ this.addEventListener("mouseover", () => {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ });
+
+ this.addEventListener("mouseout", () => {
+ if (this[configSymbol].isDragging) {
+ return;
+ }
+ start();
+ });
+ }
+
+ if (autoPlay.touchPause) {
+ this.addEventListener("touchstart", () => {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ });
+
+ this.addEventListener("touchend", () => {
+ start();
+ });
+ }
+
+}
+
+/**
+ * @private
+ */
+function initCarousel() {
+
+ const {slides, totalSlides} = getSlidesAndTotal.call(this);
+ if (this.getOption("features.carousel") && totalSlides > 2) {
+
+ const firstElement = slides[0].cloneNode(true);
+ firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
+
+ const lastElement = slides[totalSlides - 1].cloneNode(true);
+ lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
+ slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+
+ slides[0].insertAdjacentElement("beforebegin", lastElement);
+
+ moveTo.call(this, 1);
+
+ }
+}
+
+/**
+ * @private
+ * @returns {{slides: unknown[], totalSlides: number}}
+ */
+function getSlidesAndTotal() {
+ const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+ const totalSlides = slides.length;
+ return {slides, totalSlides};
+}
+
+/**
+ * @private
+ * @returns {number}
+ */
+function next() {
+
+ const {slides, totalSlides} = getSlidesAndTotal.call(this);
+ const nextIndex = this[configSymbol].currentIndex + 1;
+
+ if (nextIndex >= totalSlides) {
+ return -1;
+ }
+
+ queueMicrotask(() => {
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, nextIndex);
+ });
+ });
+ });
+
+ return 0;
+}
+
+/**
+ * @private
+ * @returns {number}
+ */
+function prev() {
+
+ const prevIndex = this[configSymbol].currentIndex - 1;
+
+ if (prevIndex < 0) {
+ return -1;
+ }
+
+ moveTo.call(this, prevIndex);
+ return 0;
+}
+
+/**
+ * @private
+ * @param slides
+ * @param index
+ */
+function setMoveProperties(slides, index) {
+
+ this[configSymbol].currentIndex = index
+
+ slides.forEach((slide) => {
+ slide.classList.remove("current");
+ })
+
+ let offset = -(index * 100);
+ if (offset !== 0) {
+ offset += "%";
+ }
+
+ this[sliderElementSymbol].style.transform = `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+ slides[index].classList.add("current");
+
+}
+
+/**
+ * @private
+ * @param index
+ * @fires monster-slider-moved
+ */
+function moveTo(index) {
+
+ const {slides, totalSlides} = getSlidesAndTotal.call(this);
+
+ if (index < 0) {
+ index = totalSlides - 1
+ } else if (index >= totalSlides) {
+ index = 0
+ }
+
+ const slider = this[sliderElementSymbol];
+
+ setMoveProperties.call(this, slides, index);
+
+ const style = getComputedStyle(this[sliderElementSymbol]);
+ const duration = style.transitionDuration;
+ const durationMilis = parseFloat(duration) * 1000;
+
+ let slideIndex = index;
+ let eventFired = false;
+
+ if (this.getOption("features.carousel")) {
+ slideIndex = index - 1;
+
+ if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
+ const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
+
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ setTimeout(() => {
+ slider.style.transitionProperty = "none";
+
+ setMoveProperties.call(this, slides, from);
+ slideIndex = from - 1;
+
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ slider.style.transitionProperty = "";
+
+ fireCustomEvent(this, "monster-slider-moved", {
+ index: slideIndex,
+ })
+
+ eventFired = true;
+ });
+ });
+ }, durationMilis);
+ });
+ });
+ }
+ }
+
+ if (!eventFired) {
+ fireCustomEvent(this, "monster-slider-moved", {
+ index: slideIndex,
+ })
+ }
+}
+
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+ const self = this;
+
+ const nextElements = this[nextElementSymbol];
+
+ if (nextElements) {
+ nextElements.addEventListener("click", () => {
+ self.next();
+ });
+ }
+
+ const prevElements = this[prevElementSymbol];
+
+ if (prevElements) {
+ prevElements.addEventListener("click", () => {
+ self.previous();
+ });
+ }
+
+ this[sliderElementSymbol].addEventListener('mousedown', (e) => startDragging.call(this, e, 'mouse'));
+ this[sliderElementSymbol].addEventListener('touchstart', (e) => startDragging.call(this, e, 'touch'));
+ // this[sliderElementSymbol].addEventListener('touchend', () => stopDragging.call(this, 'touch'));
+ // this[sliderElementSymbol].addEventListener('touchmove', (e) => dragging.call(this, e, 'touch'));
+ return this;
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ */
+function startDragging(e, type) {
+
+ this[configSymbol].isDragging = true;
+ this[configSymbol].startPos = getPositionX(e, type);
+ this[sliderElementSymbol].classList.add('grabbing');
+ this[sliderElementSymbol].style.transitionProperty = "none";
+
+ const callbackMousemove = (x) => {
+ dragging.call(this, x, type);
+ }
+
+ const callbackMouseUp = () => {
+
+ const endEvent = type === 'mouse' ? 'mouseup' : 'touchend';
+ const moveEvent = type === 'mouse' ? 'mousemove' : 'touchmove';
+
+ document.body.removeEventListener(endEvent, callbackMouseUp);
+ document.body.removeEventListener(moveEvent, callbackMousemove);
+
+ this[configSymbol].isDragging = false;
+ this[configSymbol].startPos = 0;
+ this[sliderElementSymbol].classList.remove('grabbing');
+ this[sliderElementSymbol].style.transitionProperty = "";
+
+ const lastPos = this[configSymbol].draggingPos;
+ const widthOfSlider = this[sliderElementSymbol].offsetWidth;
+ this[configSymbol].draggingPos = 0;
+
+ let newIndex = this[configSymbol].currentIndex;
+
+ const x = lastPos / widthOfSlider;
+ if (x > 0.5) {
+ newIndex--;
+ } else if (x < -0.5) {
+ newIndex++;
+ }
+
+ this.moveTo(newIndex);
+
+ }
+
+ document.body.addEventListener('mouseup', callbackMouseUp);
+ document.body.addEventListener('mousemove', callbackMousemove);
+
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ * @returns {*|number|number}
+ */
+function getPositionX(e, type) {
+ return type === 'mouse' ? e.pageX : e.touches[0].clientX;
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ */
+function dragging(e, type) {
+ if (!this[configSymbol].isDragging) return;
+ this[configSymbol].draggingPos = getPositionX(e, type) - this[configSymbol].startPos;
+ const {slides, totalSlides} = getSlidesAndTotal.call(this);
+ setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
+
+ this[sliderElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="slider"]`,
+ );
+
+ this[prevElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="prev"]`,
+ );
+
+ this[nextElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="next"]`,
+ );
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+ // language=HTML
+ return `
+ <div data-monster-role="control" part="control">
+ <div class="prev" data-monster-role="prev" part="prev">
+ <slot name="prev"></slot>
+ </div>
+ <div data-monster-role="slider">
+ <slot></slot>
+ </div>
+ <div data-monster-role="thumbnails"></div>
+ <div class="next" data-monster-role="next" part="next">
+ <slot name="next"></slot>
+ </div>
+ </div>`;
+}
+
+
+registerCustomElement(Slider);
diff --git a/source/components/layout/style/slider.pcss b/source/components/layout/style/slider.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..d95056c18e8980281818cd823c9c7aad22ef0c05
--- /dev/null
+++ b/source/components/layout/style/slider.pcss
@@ -0,0 +1,114 @@
+@import "../../style/property.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/theme.pcss";
+
+@import '../../style/mixin/typography.pcss';
+
+:host {
+ box-sizing: border-box;
+}
+
+[data-monster-role=control] {
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ box-sizing: border-box;
+}
+
+[data-monster-role=slider] {
+ display: flex;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+ width: 100%;
+ height: 100%;
+ scrollbar-width: none;
+ transition: all 0.3s ease-in-out;
+ box-sizing: border-box;
+}
+
+[data-monster-role=slider].grabbing {
+ cursor: grabbing;
+ user-select: none;
+ box-sizing: border-box;
+}
+
+::slotted(div) {
+ flex: 0 0 100%;
+ height: 100%;
+ display: flex;
+ box-sizing: border-box;
+}
+
+.prev {
+ position: absolute;
+ top: 28%;
+ left: 0.5rem;
+ height: max-content;
+ width: max-content;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ z-index: var(--monster-z-index-sticky);
+ box-sizing: border-box;
+}
+
+.prev:hover {
+ transform: scale(1.2);
+}
+
+.next {
+ position: absolute;
+ top: 28%;
+ right: 0.5rem;
+ height: max-content;
+ width: max-content;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ z-index: var(--monster-z-index-sticky);
+ box-sizing: border-box;
+}
+
+.next:hover {
+ transform: scale(1.2);
+}
+
+
+[data-monster-role="thumbnails"] {
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ border-radius: 0.5rem;
+ transform: translateX(-50%);
+ z-index: var(--monster-z-index-sticky);
+ display: grid;
+ grid-auto-flow: column;
+ gap: 0.5rem;
+}
+
+[data-monster-role="thumbnails"] .thumbnail {
+ width: 1rem;
+ height: 1rem;
+ margin: 0.5rem;
+ cursor: pointer;
+ border-radius: 50%;
+ background-color: var(--monster-bg-color-primary-1);
+ color: var(--monster-color-primary-1);
+ filter: chroma(0 0 0 0);
+ box-sizing: border-box;
+}
+
+[data-monster-role="thumbnails"] .thumbnail.current {
+ background-color: var(--monster-bg-color-primary-3);
+ color: var(--monster-color-primary-3);
+}
+
+
+
diff --git a/source/components/layout/stylesheet/slider.mjs b/source/components/layout/stylesheet/slider.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..094cced5d93e4ee386cd72cbd9f24ee461313fe3
--- /dev/null
+++ b/source/components/layout/stylesheet/slider.mjs
@@ -0,0 +1,31 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, 2024. 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 {SliderStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const SliderStyleSheet = new CSSStyleSheet();
+
+try {
+ SliderStyleSheet.insertRule(`
+@layer slider {
+: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-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);--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-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;--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);--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);--monster-border-style:solid;--monster-border-width:3px;--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;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@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);--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);--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)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}:host{box-sizing:border-box}[data-monster-role=control]{overflow:hidden;position:relative}[data-monster-role=control],[data-monster-role=slider]{box-sizing:border-box;display:flex;height:100%;width:100%}[data-monster-role=slider]{scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;transition:all .3s ease-in-out}[data-monster-role=slider].grabbing{box-sizing:border-box;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}::slotted(div){box-sizing:border-box;display:flex;flex:0 0 100%;height:100%}.prev{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;left:.5rem;position:absolute;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.prev:hover{transform:scale(1.2)}.next{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;position:absolute;right:.5rem;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.next:hover{transform:scale(1.2)}[data-monster-role=thumbnails]{border-radius:.5rem;bottom:20px;display:grid;gap:.5rem;grid-auto-flow:column;left:50%;position:absolute;transform:translateX(-50%);z-index:var(--monster-z-index-sticky)}[data-monster-role=thumbnails] .thumbnail{background-color:var(--monster-bg-color-primary-1);border-radius:50%;box-sizing:border-box;color:var(--monster-color-primary-1);cursor:pointer;filter:chroma(0 0 0 0);height:1rem;margin:.5rem;width:1rem}[data-monster-role=thumbnails] .thumbnail.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}
+}`, 0);
+} catch (e) {
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}
diff --git a/source/data/datasource/server/restapi.mjs b/source/data/datasource/server/restapi.mjs
index 2cc7816fe4152afbc56ed33aaef866a5b2b6d93e..ef8a551f5d12d79a4f2e1fef2876c56f2e827d54 100644
--- a/source/data/datasource/server/restapi.mjs
+++ b/source/data/datasource/server/restapi.mjs
@@ -193,7 +193,7 @@ class RestAPI extends Server {
*/
function fetchData(init, key, callback) {
let response;
-
+
return fetch(this.getOption(`${key}.url`), init)
.then((resp) => {
response = resp;
@@ -232,7 +232,6 @@ function fetchData(init, key, callback) {
if (callback && isFunction(callback)) {
callback(obj);
}
-
return response;
})
.catch((e) => {
diff --git a/source/dom/events.mjs b/source/dom/events.mjs
index 373b9f8c11fcd46e6586b32a9fdf4760d21a280c..9e68ad41c9b51907c9f4bee239a5da2c5634f197 100644
--- a/source/dom/events.mjs
+++ b/source/dom/events.mjs
@@ -93,7 +93,7 @@ function fireCustomEvent(element, type, detail) {
}
} else {
throw new TypeError(
- "value is not an instance of HTMLElement or HTMLCollection",
+ "element is not an instance of HTMLElement or HTMLCollection",
);
}
}
diff --git a/source/types/observer.mjs b/source/types/observer.mjs
index 8f590d1d4fb17c9fc5b1ab3eb3dc13153427b43b..19033a2e9c9155f43a276b7a3281212b6bc7a51c 100644
--- a/source/types/observer.mjs
+++ b/source/types/observer.mjs
@@ -139,9 +139,9 @@ class Observer extends Base {
return new Promise(function (resolve, reject) {
self.queue.add(subject);
- setTimeout(() => {
+ queueMicrotask(() => {
try {
- // the queue and the `setTimeout` ensure that an object is not
+ // the queue and the `queueMicrotask` ensure that an object is not
// informed of the same change more than once.
if (self.queue.isEmpty()) {
resolve();
@@ -160,7 +160,7 @@ class Observer extends Base {
} catch (e) {
reject(e);
}
- }, 0);
+ });
});
}
}