diff --git a/development/issues/closed/239.html b/development/issues/closed/239.html
new file mode 100644
index 0000000000000000000000000000000000000000..4644aded296088bd2973a9045488f99444fd2af0
--- /dev/null
+++ b/development/issues/closed/239.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Slider view more slides #239</title>
+ <script src="239.mjs" type="module"></script>
+</head>
+<body>
+<h1>Slider view more slides #239</h1>
+<ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/239">Issue #239</a></li>
+ <li><a href="/">Back to overview</a></li>
+</ul>
+<main style="width: 1200px">
+
+ <div class="container">
+ <monster-slider
+ data-monster-option-slides-0="3"
+ >
+ <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="height: 450px;background-color: #ff6666;">
+ <h1>SLIDE 1</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #66ff66;width:50px">
+ <h1>SLIDE 2</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #6666ff;width:50px">
+ <h1>SLIDE 3</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #ffff66;width:50px">
+ <h1>SLIDE 4</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #66ffff;width:50px">
+ <h1>SLIDE 5</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #ff66ff;width:50px">
+ <h1>SLIDE 6</h1>
+ </div>
+ <div class="slide" style="height: 450px;background-color: #ff66cc;width:50px">
+ <h1>SLIDE 7</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/closed/239.mjs b/development/issues/closed/239.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..0c43c5b59f88be4f951720bee1312376b977cf80
--- /dev/null
+++ b/development/issues/closed/239.mjs
@@ -0,0 +1,16 @@
+/**
+* @file development/issues/open/237.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/237
+* @description new slieder control
+* @issue 239
+*/
+
+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";
+import "../../../source/components/datatable/pagination.mjs";
+
diff --git a/source/components/layout/slider.mjs b/source/components/layout/slider.mjs
index 75841609220a6bcaa2569cee2a1c253d6ff20b5d..75d517189d4441328a9d9e5c64c776af606b4217 100644
--- a/source/components/layout/slider.mjs
+++ b/source/components/layout/slider.mjs
@@ -10,19 +10,21 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import { instanceSymbol } from "../../constants.mjs";
-import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
-import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
+import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
+ assembleMethodSymbol,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import { SliderStyleSheet } from "./stylesheet/slider.mjs";
-import { fireCustomEvent } from "../../dom/events.mjs";
+import {SliderStyleSheet} from "./stylesheet/slider.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
-import { getWindow } from "../../dom/util.mjs";
+import {getWindow} from "../../dom/util.mjs";
+import {isObject, isInteger} from "../../types/is.mjs";
-export { Slider };
+
+export {Slider};
/**
* @private
@@ -54,165 +56,177 @@ const nextElementSymbol = Symbol("nextElement");
*/
const configSymbol = Symbol("config");
-/**
- * @private
- * @type {string}
- */
-const ATTRIBUTE_CLONE_FROM = ATTRIBUTE_PREFIX + "clone-from";
-
/**
* A Slider
*
* @fragments /fragments/components/layout/slider/
*
* @example /examples/components/layout/slider-simple
+ * @example /examples/components/layout/slider-carousel
+ * @example /examples/components/layout/slider-multiple
*
* @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.
- * @return {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,
- 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 {string} actions.click="throw Error" Callback when clicked
- * @property {Object} features Features
- * @property {boolean} features.carousel=true Carousel feature
- * @property {boolean} features.autoPlay=true Auto play feature
- * @property {boolean} features.thumbnails=true Thumbnails feature
- * @property {boolean} features.drag=true Drag feature
- * @property {Object} autoPlay Auto play configuration
- * @property {number} autoPlay.delay=1500 Delay between slides
- * @property {number} autoPlay.startDelay=1000 Start delay
- * @property {string} autoPlay.direction="next" Direction of the autoplay
- * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
- * @property {boolean} autoPlay.touchPause=true Pause on touch
- * @property {Object} classes CSS classes
- * @property {boolean} disabled=false Disabled state
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
-
- classes: {},
- disabled: false,
-
- features: {
- carousel: true,
- autoPlay: true,
- thumbnails: true,
- drag: true,
- },
-
- autoPlay: {
- delay: 1500,
- startDelay: 1000,
- direction: "next",
- mouseOverPause: true,
- touchPause: true,
- },
- });
- }
-
- /**
- * @return {string}
- */
- static getTag() {
- return "monster-slider";
- }
-
- /**
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [SliderStyleSheet];
- }
-
- /**
- * moves the slider to the given index
- *
- * @param index
- * @return {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);
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @return {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,
+ autoPlayInterval: null,
+ };
+
+ // set --monster-slides-width
+ const slides = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="slider"]`);
+ const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+ slides.style.setProperty("--monster-slides-width", `${100 / slidesVisible}%`);
+
+ 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 {string} actions.click Callback when clicked
+ * @property {Object} features Features
+ * @property {boolean} features.carousel Carousel feature
+ * @property {boolean} features.autoPlay Auto play feature
+ * @property {boolean} features.thumbnails Thumbnails feature
+ * @property {boolean} features.drag Drag feature
+ * @property {Object} slides Slides configuration, an object with breakpoints and the number of slides to show
+ * @property {Object} carousel Carousel configuration
+ * @property {number} carousel.transition Transition time between a full rotation of the carousel
+ * @property {Object} autoPlay Auto play configuration
+ * @property {number} autoPlay.delay Delay between slides
+ * @property {number} autoPlay.startDelay Start delay
+ * @property {string} autoPlay.direction Direction of the autoplay
+ * @property {boolean} autoPlay.mouseOverPause Pause on mouse over
+ * @property {boolean} autoPlay.touchPause Pause on touch
+ * @property {Object} classes CSS classes
+ * @property {boolean} disabled Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+
+ classes: {},
+ disabled: false,
+
+ features: {
+ carousel: true,
+ autoPlay: true,
+ thumbnails: true,
+ drag: true,
+ },
+
+ slides: {
+ "0": 1,
+ },
+
+ carousel: {
+ transition: 250,
+ },
+
+ autoPlay: {
+ delay: 1500,
+ startDelay: 1000,
+ direction: "next",
+ mouseOverPause: true,
+ touchPause: true,
+ },
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-slider";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [SliderStyleSheet];
+ }
+
+ /**
+ * moves the slider to the given index
+ *
+ * @param index
+ * @return {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);
+ }
}
/**
@@ -220,148 +234,185 @@ class Slider extends CustomElement {
* @param name
*/
function initNavigation(name) {
- const element = this.shadowRoot.querySelector("." + name + "");
- const elementHeight = element.offsetHeight;
- element.style.top = `calc(50% - ${elementHeight / 2}px)`;
+ 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);
- }
+ initNavigation.call(this, "next");
+ initNavigation.call(this, "prev");
- if (this.getOption("features.carousel")) {
- initCarousel.call(this);
- }
+ if (this.getOption("features.thumbnails")) {
+ initThumbnails.call(this);
+ }
- if (this.getOption("features.autoPlay")) {
- initAutoPlay.call(this);
- }
+ initShadows.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");
- });
+ const self = this;
+ const thumbnails = this.shadowRoot.querySelector(
+ "[data-monster-role='thumbnails']",
+ );
+
+ const {originSlides} = getSlidesAndTotal.call(this);
+
+ originSlides.forEach((x, index) => {
+ const thumbnail = document.createElement("div");
+ thumbnail.classList.add("thumbnail");
+ thumbnail.addEventListener("click", () => {
+ 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();
- });
- }
+ 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(() => {
+
+ const {totalOriginSlides} = getSlidesAndTotal.call(self);
+
+ if (direction === "next") {
+ if (!self.getOption("features.carousel")&& self[configSymbol].currentIndex >= totalOriginSlides - 1) {
+ self[configSymbol].currentIndex = -1;
+ }
+ self.next();
+ } else {
+ if (!self.getOption("features.carousel") && self[configSymbol].currentIndex <= 0) {
+ self[configSymbol].currentIndex = totalOriginSlides;
+ }
+ self.previous();
+ }
+ }, 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_CLONE_FROM, 1);
+function getVisibleSlidesFromContainerWidth() {
+
+ const containerWidth = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="slider"]`).offsetWidth;
+ const slides = this.getOption("slides");
+ let visibleSlides = 1;
+
+ if (!isObject(slides)) {
+ return visibleSlides;
+ }
- const lastElement = slides[totalSlides - 1].cloneNode(true);
- lastElement.setAttribute(ATTRIBUTE_CLONE_FROM, totalSlides);
- slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+ for (const key in slides) {
+ if (containerWidth >= key) {
+ visibleSlides = slides[key];
+ }
+ }
- slides[0].insertAdjacentElement("beforebegin", lastElement);
+ const {originSlides} = getSlidesAndTotal.call(this);
+ if (visibleSlides > originSlides.length) {
+ visibleSlides = originSlides.length - 1;
+ }
- moveTo.call(this, 1);
- }
+
+ return visibleSlides;
+}
+
+/**
+ * @private
+ */
+function initShadows() {
+ const {slides, totalSlides} = getSlidesAndTotal.call(this);
+ const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+
+ if (totalSlides > slidesVisible) {
+
+ let current = slides[0];
+ let last = slides[totalSlides - 1];
+ for (let i = 0; i < slidesVisible; i++) {
+ const clone = current.cloneNode(true);
+ clone.setAttribute('data-monster-clone-from', i);
+ last.insertAdjacentElement('afterend', clone);
+ current = current.nextElementSibling;
+ last = clone;
+ }
+
+ current = slides[totalSlides - 1];
+ let first = slides[0];
+ for (let i = 0; i < slidesVisible; i++) {
+ const clone = current.cloneNode(true);
+ clone.setAttribute('data-monster-clone-from', totalSlides - i);
+ first.insertAdjacentElement('beforebegin', clone);
+ current = current.previousElementSibling;
+ first = clone;
+ }
+
+ moveTo.call(this, 0);
+
+ }
}
/**
@@ -369,9 +420,13 @@ function initCarousel() {
* @return {{slides: unknown[], totalSlides: number}}
*/
function getSlidesAndTotal() {
- const slides = Array.from(getSlottedElements.call(this, ":scope", null));
- const totalSlides = slides.length;
- return { slides, totalSlides };
+ const originSlides = Array.from(getSlottedElements.call(this, ":scope:not([data-monster-clone-from])", null));
+ const totalOriginSlides = originSlides.length;
+
+ const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+ const totalSlides = slides.length;
+
+ return {originSlides, totalOriginSlides, slides, totalSlides};
}
/**
@@ -379,22 +434,17 @@ function getSlidesAndTotal() {
* @return {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;
+ const nextIndex = this[configSymbol].currentIndex + 1;
+
+ queueMicrotask(() => {
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, nextIndex);
+ });
+ });
+ });
+
+ return 0;
}
/**
@@ -402,14 +452,17 @@ function next() {
* @return {number}
*/
function prev() {
- const prevIndex = this[configSymbol].currentIndex - 1;
+ const prevIndex = this[configSymbol].currentIndex - 1;
- if (prevIndex < 0) {
- return -1;
- }
+ queueMicrotask(() => {
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, prevIndex);
+ });
+ });
+ });
- moveTo.call(this, prevIndex);
- return 0;
+ return 0;
}
/**
@@ -418,83 +471,98 @@ function prev() {
* @param index
*/
function setMoveProperties(slides, index) {
- this[configSymbol].currentIndex = index;
+ slides.forEach((slide) => {
+ slide.classList.remove("current");
+ });
+
+ let offset = -(index * 100);
+ const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+
+ offset = offset / slidesVisible;
- slides.forEach((slide) => {
- slide.classList.remove("current");
- });
+ if (offset !== 0) {
+ offset += "%";
+ }
- let offset = -(index * 100);
- if (offset !== 0) {
- offset += "%";
- }
+ this[sliderElementSymbol].style.transform =
+ `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+
+ slides[index].classList.add("current");
+ this[configSymbol].lastOffset = offset;
- this[sliderElementSymbol].style.transform =
- `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
- slides[index].classList.add("current");
}
/**
* @private
- * @param index
+ * @param {number} index
+ * @param {boolean} animation
* @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_CLONE_FROM)) {
- const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLONE_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,
- });
- }
+function moveTo(index, animation) {
+
+ const {slides, totalSlides, originSlides, totalOriginSlides} = getSlidesAndTotal.call(this);
+
+ if (animation === false) {
+ this[sliderElementSymbol].classList.remove("animate");
+ } else {
+ this[sliderElementSymbol].classList.add("animate");
+ }
+
+ if (this.getOption("features.carousel") === true) {
+
+ if (index < 0) {
+ index = -1;
+ }
+
+ if (index > totalOriginSlides) {
+ index = totalOriginSlides;
+ }
+
+ } else {
+
+ if (index < 0) {
+ index = 0;
+ }
+
+ if (index >= totalOriginSlides) {
+ index = totalOriginSlides - 1;
+ }
+ }
+
+ if (!isInteger(index)) {
+ return;
+ }
+
+ this[configSymbol].currentIndex = index;
+ let slidesIndex = index + getVisibleSlidesFromContainerWidth.call(this);
+
+ if (slidesIndex < 0) {
+ slidesIndex = totalSlides - 1 - getVisibleSlidesFromContainerWidth.call(this);
+ this[configSymbol].currentIndex = totalOriginSlides - 1;
+ } else if (index > totalOriginSlides) {
+ slidesIndex = 0;
+ this[configSymbol].currentIndex = 0;
+ }
+
+ setMoveProperties.call(this, slides, slidesIndex);
+
+ if (index === totalOriginSlides) {
+ setTimeout(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, 0, false);
+ });
+ }, this.getOption("carousel.transition"));
+ } else if (index === -1) {
+ setTimeout(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, totalOriginSlides - 1, false);
+ });
+ }, this.getOption("carousel.transition"));
+ }
+
+ fireCustomEvent(this, "monster-slider-moved", {
+ index: index,
+ });
}
/**
@@ -502,35 +570,35 @@ function moveTo(index) {
* @return {initEventHandler}
*/
function initEventHandler() {
- const self = this;
+ const self = this;
- const nextElements = this[nextElementSymbol];
+ const nextElements = this[nextElementSymbol];
- if (nextElements) {
- nextElements.addEventListener("click", () => {
- self.next();
- });
- }
+ if (nextElements) {
+ nextElements.addEventListener("click", () => {
+ self.next();
+ });
+ }
- const prevElements = this[prevElementSymbol];
+ const prevElements = this[prevElementSymbol];
- if (prevElements) {
- prevElements.addEventListener("click", () => {
- self.previous();
- });
- }
+ if (prevElements) {
+ prevElements.addEventListener("click", () => {
+ self.previous();
+ });
+ }
- if (this.getOption("features.drag")) {
- this[sliderElementSymbol].addEventListener("mousedown", (e) =>
- startDragging.call(this, e, "mouse"),
- );
+ if (this.getOption("features.drag")) {
+ this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+ startDragging.call(this, e, "mouse"),
+ );
- this[sliderElementSymbol].addEventListener("touchstart", (e) =>
- startDragging.call(this, e, "touch"),
- );
- }
+ this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+ startDragging.call(this, e, "touch"),
+ );
+ }
- return this;
+ return this;
}
/**
@@ -539,45 +607,45 @@ function initEventHandler() {
* @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 {slides} = getSlidesAndTotal.call(this);
- const callbackMouseUp = () => {
- const endEvent = type === "mouse" ? "mouseup" : "touchend";
- const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
+ const widthOfSlider = slides[this[configSymbol].currentIndex]?.offsetWidth
- document.body.removeEventListener(endEvent, callbackMouseUp);
- document.body.removeEventListener(moveEvent, callbackMousemove);
+ this[configSymbol].isDragging = true;
+ this[configSymbol].startPos = getPositionX(e, type);
+ this[sliderElementSymbol].classList.add("grabbing");
+ this[sliderElementSymbol].style.transitionProperty = "none";
- this[configSymbol].isDragging = false;
- this[configSymbol].startPos = 0;
- this[sliderElementSymbol].classList.remove("grabbing");
- this[sliderElementSymbol].style.transitionProperty = "";
+ const callbackMousemove = (x) => {
+ dragging.call(this, x, type);
+ };
- const lastPos = this[configSymbol].draggingPos;
- const widthOfSlider = this[sliderElementSymbol].offsetWidth;
- this[configSymbol].draggingPos = 0;
+ const callbackMouseUp = () => {
+ const endEvent = type === "mouse" ? "mouseup" : "touchend";
+ const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
- let newIndex = this[configSymbol].currentIndex;
+ document.body.removeEventListener(endEvent, callbackMouseUp);
+ document.body.removeEventListener(moveEvent, callbackMousemove);
- const x = lastPos / widthOfSlider;
- if (x > 0.5) {
- newIndex--;
- } else if (x < -0.5) {
- newIndex++;
- }
+ this[configSymbol].isDragging = false;
+ this[configSymbol].startPos = 0;
+ this[sliderElementSymbol].classList.remove("grabbing");
+ this[sliderElementSymbol].style.transitionProperty = "";
- this.moveTo(newIndex);
- };
+ const lastPos = this[configSymbol].draggingPos;
+ this[configSymbol].draggingPos = 0;
- document.body.addEventListener("mouseup", callbackMouseUp);
- document.body.addEventListener("mousemove", callbackMousemove);
+ let newIndex = this[configSymbol].currentIndex;
+ const shift = lastPos / widthOfSlider;
+ const shiftIndex = Math.round(shift);
+
+ newIndex += (shiftIndex * -1);
+ this.moveTo(newIndex);
+ };
+
+ document.body.addEventListener("mouseup", callbackMouseUp);
+ document.body.addEventListener("mousemove", callbackMousemove);
}
/**
@@ -587,7 +655,7 @@ function startDragging(e, type) {
* @return {*|number|number}
*/
function getPositionX(e, type) {
- return type === "mouse" ? e.pageX : e.touches[0].clientX;
+ return type === "mouse" ? e.pageX : e.touches[0].clientX;
}
/**
@@ -596,11 +664,13 @@ function getPositionX(e, type) {
* @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);
+ if (!this[configSymbol].isDragging) return;
+ this[configSymbol].draggingPos =
+ getPositionX(e, type) - this[configSymbol].startPos;
+
+ this[sliderElementSymbol].style.transform =
+ `translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
+
}
/**
@@ -608,21 +678,21 @@ function dragging(e, type) {
* @return {void}
*/
function initControlReferences() {
- this[controlElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="control"]`,
- );
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
- this[sliderElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="slider"]`,
- );
+ this[sliderElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="slider"]`,
+ );
- this[prevElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="prev"]`,
- );
+ this[prevElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="prev"]`,
+ );
- this[nextElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="next"]`,
- );
+ this[nextElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="next"]`,
+ );
}
/**
@@ -630,8 +700,8 @@ function initControlReferences() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
<div class="prev" data-monster-role="prev" part="prev" part="prev">
<slot name="prev"></slot>
diff --git a/source/components/layout/style/slider.pcss b/source/components/layout/style/slider.pcss
index d95056c18e8980281818cd823c9c7aad22ef0c05..d5dd9a51b0bdb2dd1cac00fc3f9b7ee8a0cfafed 100644
--- a/source/components/layout/style/slider.pcss
+++ b/source/components/layout/style/slider.pcss
@@ -16,6 +16,7 @@
height: 100%;
position: relative;
box-sizing: border-box;
+ --monster-slides-width: 100%;
}
[data-monster-role=slider] {
@@ -25,10 +26,13 @@
width: 100%;
height: 100%;
scrollbar-width: none;
- transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
+[data-monster-role=slider].animate {
+ transition: all 0.3s ease-in-out;
+}
+
[data-monster-role=slider].grabbing {
cursor: grabbing;
user-select: none;
@@ -36,7 +40,7 @@
}
::slotted(div) {
- flex: 0 0 100%;
+ flex: 0 0 var(--monster-slides-width);
height: 100%;
display: flex;
box-sizing: border-box;
diff --git a/source/components/layout/stylesheet/slider.mjs b/source/components/layout/stylesheet/slider.mjs
index 7449967236c6e576282de34223c7b95fce472bde..ecab0ad3301d35c3f3232aaa49384ed0a72e56e7 100644
--- a/source/components/layout/stylesheet/slider.mjs
+++ b/source/components/layout/stylesheet/slider.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
-export { SliderStyleSheet };
+export {SliderStyleSheet}
/**
* @private
@@ -22,17 +22,10 @@ export { SliderStyleSheet };
const SliderStyleSheet = new CSSStyleSheet();
try {
- SliderStyleSheet.insertRule(
- `
+ 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-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--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)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.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,
- );
+:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--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)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.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;--monster-slides-width:100%}[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}[data-monster-role=slider].animate{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 var(--monster-slides-width);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 + "",
- );
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}