@schukai/monster 3.99.3 → 3.99.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.99.
|
1
|
+
{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.99.4"}
|
@@ -10,19 +10,21 @@
|
|
10
10
|
* For more information about purchasing a commercial license, please contact schukai GmbH.
|
11
11
|
*/
|
12
12
|
|
13
|
-
import {
|
14
|
-
import {
|
15
|
-
import {
|
13
|
+
import {instanceSymbol} from "../../constants.mjs";
|
14
|
+
import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
|
15
|
+
import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
|
16
16
|
import {
|
17
|
-
|
18
|
-
|
17
|
+
assembleMethodSymbol,
|
18
|
+
registerCustomElement,
|
19
19
|
} from "../../dom/customelement.mjs";
|
20
|
-
import {
|
21
|
-
import {
|
20
|
+
import {SliderStyleSheet} from "./stylesheet/slider.mjs";
|
21
|
+
import {fireCustomEvent} from "../../dom/events.mjs";
|
22
22
|
|
23
|
-
import {
|
23
|
+
import {getWindow} from "../../dom/util.mjs";
|
24
|
+
import {isObject, isInteger} from "../../types/is.mjs";
|
24
25
|
|
25
|
-
|
26
|
+
|
27
|
+
export {Slider};
|
26
28
|
|
27
29
|
/**
|
28
30
|
* @private
|
@@ -54,165 +56,177 @@ const nextElementSymbol = Symbol("nextElement");
|
|
54
56
|
*/
|
55
57
|
const configSymbol = Symbol("config");
|
56
58
|
|
57
|
-
/**
|
58
|
-
* @private
|
59
|
-
* @type {string}
|
60
|
-
*/
|
61
|
-
const ATTRIBUTE_CLONE_FROM = ATTRIBUTE_PREFIX + "clone-from";
|
62
|
-
|
63
59
|
/**
|
64
60
|
* A Slider
|
65
61
|
*
|
66
62
|
* @fragments /fragments/components/layout/slider/
|
67
63
|
*
|
68
64
|
* @example /examples/components/layout/slider-simple
|
65
|
+
* @example /examples/components/layout/slider-carousel
|
66
|
+
* @example /examples/components/layout/slider-multiple
|
69
67
|
*
|
70
68
|
* @since 3.74.0
|
71
69
|
* @copyright schukai GmbH
|
72
70
|
* @summary A beautiful Slider that can make your life easier and also looks good.
|
73
71
|
*/
|
74
72
|
class Slider extends CustomElement {
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
73
|
+
/**
|
74
|
+
* This method is called by the `instanceof` operator.
|
75
|
+
* @return {symbol}
|
76
|
+
*/
|
77
|
+
static get [instanceSymbol]() {
|
78
|
+
return Symbol.for("@schukai/monster/components/layout/slider@@instance");
|
79
|
+
}
|
80
|
+
|
81
|
+
/**
|
82
|
+
*
|
83
|
+
* @return {Components.Layout.Slider
|
84
|
+
*/
|
85
|
+
[assembleMethodSymbol]() {
|
86
|
+
super[assembleMethodSymbol]();
|
87
|
+
|
88
|
+
this[configSymbol] = {
|
89
|
+
currentIndex: 0,
|
90
|
+
|
91
|
+
isDragging: false,
|
92
|
+
draggingPos: 0,
|
93
|
+
startPos: 0,
|
94
|
+
autoPlayInterval: null,
|
95
|
+
};
|
96
|
+
|
97
|
+
// set --monster-slides-width
|
98
|
+
const slides = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="slider"]`);
|
99
|
+
const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
|
100
|
+
slides.style.setProperty("--monster-slides-width", `${100 / slidesVisible}%`);
|
101
|
+
|
102
|
+
initControlReferences.call(this);
|
103
|
+
initEventHandler.call(this);
|
104
|
+
initStructure.call(this);
|
105
|
+
|
106
|
+
return this;
|
107
|
+
}
|
108
|
+
|
109
|
+
/**
|
110
|
+
* To set the options via the HTML tag, the attribute `data-monster-options` must be used.
|
111
|
+
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
|
112
|
+
*
|
113
|
+
* The individual configuration values can be found in the table.
|
114
|
+
*
|
115
|
+
* @property {Object} templates Template definitions
|
116
|
+
* @property {string} templates.main Main template
|
117
|
+
* @property {string} actions.click Callback when clicked
|
118
|
+
* @property {Object} features Features
|
119
|
+
* @property {boolean} features.carousel Carousel feature
|
120
|
+
* @property {boolean} features.autoPlay Auto play feature
|
121
|
+
* @property {boolean} features.thumbnails Thumbnails feature
|
122
|
+
* @property {boolean} features.drag Drag feature
|
123
|
+
* @property {Object} slides Slides configuration, an object with breakpoints and the number of slides to show
|
124
|
+
* @property {Object} carousel Carousel configuration
|
125
|
+
* @property {number} carousel.transition Transition time between a full rotation of the carousel
|
126
|
+
* @property {Object} autoPlay Auto play configuration
|
127
|
+
* @property {number} autoPlay.delay Delay between slides
|
128
|
+
* @property {number} autoPlay.startDelay Start delay
|
129
|
+
* @property {string} autoPlay.direction Direction of the autoplay
|
130
|
+
* @property {boolean} autoPlay.mouseOverPause Pause on mouse over
|
131
|
+
* @property {boolean} autoPlay.touchPause Pause on touch
|
132
|
+
* @property {Object} classes CSS classes
|
133
|
+
* @property {boolean} disabled Disabled state
|
134
|
+
*/
|
135
|
+
get defaults() {
|
136
|
+
return Object.assign({}, super.defaults, {
|
137
|
+
templates: {
|
138
|
+
main: getTemplate(),
|
139
|
+
},
|
140
|
+
|
141
|
+
classes: {},
|
142
|
+
disabled: false,
|
143
|
+
|
144
|
+
features: {
|
145
|
+
carousel: true,
|
146
|
+
autoPlay: true,
|
147
|
+
thumbnails: true,
|
148
|
+
drag: true,
|
149
|
+
},
|
150
|
+
|
151
|
+
slides: {
|
152
|
+
"0": 1,
|
153
|
+
},
|
154
|
+
|
155
|
+
carousel: {
|
156
|
+
transition: 250,
|
157
|
+
},
|
158
|
+
|
159
|
+
autoPlay: {
|
160
|
+
delay: 1500,
|
161
|
+
startDelay: 1000,
|
162
|
+
direction: "next",
|
163
|
+
mouseOverPause: true,
|
164
|
+
touchPause: true,
|
165
|
+
},
|
166
|
+
});
|
167
|
+
}
|
168
|
+
|
169
|
+
/**
|
170
|
+
* @return {string}
|
171
|
+
*/
|
172
|
+
static getTag() {
|
173
|
+
return "monster-slider";
|
174
|
+
}
|
175
|
+
|
176
|
+
/**
|
177
|
+
* @return {CSSStyleSheet[]}
|
178
|
+
*/
|
179
|
+
static getCSSStyleSheet() {
|
180
|
+
return [SliderStyleSheet];
|
181
|
+
}
|
182
|
+
|
183
|
+
/**
|
184
|
+
* moves the slider to the given index
|
185
|
+
*
|
186
|
+
* @param index
|
187
|
+
* @return {void}
|
188
|
+
*/
|
189
|
+
moveTo(index) {
|
190
|
+
return moveTo.call(this, index);
|
191
|
+
}
|
192
|
+
|
193
|
+
/**
|
194
|
+
* shows the previous slide
|
195
|
+
*
|
196
|
+
* @return {void}
|
197
|
+
*/
|
198
|
+
previous() {
|
199
|
+
return prev.call(this);
|
200
|
+
}
|
201
|
+
|
202
|
+
/**
|
203
|
+
* shows the next slide
|
204
|
+
*
|
205
|
+
* @return {void}
|
206
|
+
*/
|
207
|
+
next() {
|
208
|
+
return next.call(this);
|
209
|
+
}
|
210
|
+
|
211
|
+
/**
|
212
|
+
* stops the auto play
|
213
|
+
*
|
214
|
+
* @return {void}
|
215
|
+
*/
|
216
|
+
stopAutoPlay() {
|
217
|
+
if (this[configSymbol].autoPlayInterval) {
|
218
|
+
clearInterval(this[configSymbol].autoPlayInterval);
|
219
|
+
}
|
220
|
+
}
|
221
|
+
|
222
|
+
/**
|
223
|
+
* starts the auto play
|
224
|
+
*
|
225
|
+
* @return {void}
|
226
|
+
*/
|
227
|
+
startAutoPlay() {
|
228
|
+
initAutoPlay.call(this);
|
229
|
+
}
|
216
230
|
}
|
217
231
|
|
218
232
|
/**
|
@@ -220,148 +234,185 @@ class Slider extends CustomElement {
|
|
220
234
|
* @param name
|
221
235
|
*/
|
222
236
|
function initNavigation(name) {
|
223
|
-
|
224
|
-
|
225
|
-
|
237
|
+
const element = this.shadowRoot.querySelector("." + name + "");
|
238
|
+
const elementHeight = element.offsetHeight;
|
239
|
+
element.style.top = `calc(50% - ${elementHeight / 2}px)`;
|
226
240
|
}
|
227
241
|
|
228
242
|
/**
|
229
243
|
* @private
|
230
244
|
*/
|
231
245
|
function initStructure() {
|
232
|
-
initNavigation.call(this, "next");
|
233
|
-
initNavigation.call(this, "prev");
|
234
246
|
|
235
|
-
|
236
|
-
|
237
|
-
}
|
247
|
+
initNavigation.call(this, "next");
|
248
|
+
initNavigation.call(this, "prev");
|
238
249
|
|
239
|
-
|
240
|
-
|
241
|
-
|
250
|
+
if (this.getOption("features.thumbnails")) {
|
251
|
+
initThumbnails.call(this);
|
252
|
+
}
|
242
253
|
|
243
|
-
|
244
|
-
|
245
|
-
|
254
|
+
initShadows.call(this);
|
255
|
+
|
256
|
+
if (this.getOption("features.autoPlay")) {
|
257
|
+
initAutoPlay.call(this);
|
258
|
+
}
|
246
259
|
}
|
247
260
|
|
248
261
|
/**
|
249
262
|
* @private
|
250
263
|
*/
|
251
264
|
function initThumbnails() {
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
thumbnail.classList.add("current");
|
285
|
-
});
|
265
|
+
const self = this;
|
266
|
+
const thumbnails = this.shadowRoot.querySelector(
|
267
|
+
"[data-monster-role='thumbnails']",
|
268
|
+
);
|
269
|
+
|
270
|
+
const {originSlides} = getSlidesAndTotal.call(this);
|
271
|
+
|
272
|
+
originSlides.forEach((x, index) => {
|
273
|
+
const thumbnail = document.createElement("div");
|
274
|
+
thumbnail.classList.add("thumbnail");
|
275
|
+
thumbnail.addEventListener("click", () => {
|
276
|
+
this.moveTo(index);
|
277
|
+
});
|
278
|
+
|
279
|
+
thumbnails.appendChild(thumbnail);
|
280
|
+
});
|
281
|
+
|
282
|
+
this.addEventListener("monster-slider-moved", (e) => {
|
283
|
+
const index = e.detail.index;
|
284
|
+
const thumbnail = thumbnails.children[index];
|
285
|
+
|
286
|
+
if (!thumbnail) {
|
287
|
+
return;
|
288
|
+
}
|
289
|
+
|
290
|
+
Array.from(thumbnails.children).forEach((thumb) => {
|
291
|
+
thumb.classList.remove("current");
|
292
|
+
});
|
293
|
+
|
294
|
+
thumbnail.classList.add("current");
|
295
|
+
});
|
286
296
|
}
|
287
297
|
|
288
298
|
/**
|
289
299
|
* @private
|
290
300
|
*/
|
291
301
|
function initAutoPlay() {
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
302
|
+
const self = this;
|
303
|
+
const autoPlay = this.getOption("autoPlay");
|
304
|
+
const delay = autoPlay.delay;
|
305
|
+
const startDelay = autoPlay.startDelay;
|
306
|
+
const direction = autoPlay.direction;
|
307
|
+
|
308
|
+
function start() {
|
309
|
+
if (self[configSymbol].autoPlayInterval) {
|
310
|
+
clearInterval(self[configSymbol].autoPlayInterval);
|
311
|
+
}
|
312
|
+
|
313
|
+
self[configSymbol].autoPlayInterval = setInterval(() => {
|
314
|
+
|
315
|
+
const {totalOriginSlides} = getSlidesAndTotal.call(self);
|
316
|
+
|
317
|
+
if (direction === "next") {
|
318
|
+
if (!self.getOption("features.carousel")&& self[configSymbol].currentIndex >= totalOriginSlides - 1) {
|
319
|
+
self[configSymbol].currentIndex = -1;
|
320
|
+
}
|
321
|
+
self.next();
|
322
|
+
} else {
|
323
|
+
if (!self.getOption("features.carousel") && self[configSymbol].currentIndex <= 0) {
|
324
|
+
self[configSymbol].currentIndex = totalOriginSlides;
|
325
|
+
}
|
326
|
+
self.previous();
|
327
|
+
}
|
328
|
+
}, delay);
|
329
|
+
}
|
330
|
+
|
331
|
+
setTimeout(() => {
|
332
|
+
start();
|
333
|
+
}, startDelay);
|
334
|
+
|
335
|
+
if (autoPlay.mouseOverPause) {
|
336
|
+
this.addEventListener("mouseover", () => {
|
337
|
+
clearInterval(this[configSymbol].autoPlayInterval);
|
338
|
+
});
|
339
|
+
|
340
|
+
this.addEventListener("mouseout", () => {
|
341
|
+
if (this[configSymbol].isDragging) {
|
342
|
+
return;
|
343
|
+
}
|
344
|
+
start();
|
345
|
+
});
|
346
|
+
}
|
347
|
+
|
348
|
+
if (autoPlay.touchPause) {
|
349
|
+
this.addEventListener("touchstart", () => {
|
350
|
+
clearInterval(this[configSymbol].autoPlayInterval);
|
351
|
+
});
|
352
|
+
|
353
|
+
this.addEventListener("touchend", () => {
|
354
|
+
start();
|
355
|
+
});
|
356
|
+
}
|
346
357
|
}
|
347
358
|
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
359
|
+
function getVisibleSlidesFromContainerWidth() {
|
360
|
+
|
361
|
+
const containerWidth = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="slider"]`).offsetWidth;
|
362
|
+
const slides = this.getOption("slides");
|
363
|
+
let visibleSlides = 1;
|
364
|
+
|
365
|
+
if (!isObject(slides)) {
|
366
|
+
return visibleSlides;
|
367
|
+
}
|
356
368
|
|
357
|
-
|
358
|
-
|
359
|
-
|
369
|
+
for (const key in slides) {
|
370
|
+
if (containerWidth >= key) {
|
371
|
+
visibleSlides = slides[key];
|
372
|
+
}
|
373
|
+
}
|
360
374
|
|
361
|
-
|
375
|
+
const {originSlides} = getSlidesAndTotal.call(this);
|
376
|
+
if (visibleSlides > originSlides.length) {
|
377
|
+
visibleSlides = originSlides.length - 1;
|
378
|
+
}
|
362
379
|
|
363
|
-
|
364
|
-
|
380
|
+
|
381
|
+
return visibleSlides;
|
382
|
+
}
|
383
|
+
|
384
|
+
/**
|
385
|
+
* @private
|
386
|
+
*/
|
387
|
+
function initShadows() {
|
388
|
+
const {slides, totalSlides} = getSlidesAndTotal.call(this);
|
389
|
+
const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
|
390
|
+
|
391
|
+
if (totalSlides > slidesVisible) {
|
392
|
+
|
393
|
+
let current = slides[0];
|
394
|
+
let last = slides[totalSlides - 1];
|
395
|
+
for (let i = 0; i < slidesVisible; i++) {
|
396
|
+
const clone = current.cloneNode(true);
|
397
|
+
clone.setAttribute('data-monster-clone-from', i);
|
398
|
+
last.insertAdjacentElement('afterend', clone);
|
399
|
+
current = current.nextElementSibling;
|
400
|
+
last = clone;
|
401
|
+
}
|
402
|
+
|
403
|
+
current = slides[totalSlides - 1];
|
404
|
+
let first = slides[0];
|
405
|
+
for (let i = 0; i < slidesVisible; i++) {
|
406
|
+
const clone = current.cloneNode(true);
|
407
|
+
clone.setAttribute('data-monster-clone-from', totalSlides - i);
|
408
|
+
first.insertAdjacentElement('beforebegin', clone);
|
409
|
+
current = current.previousElementSibling;
|
410
|
+
first = clone;
|
411
|
+
}
|
412
|
+
|
413
|
+
moveTo.call(this, 0);
|
414
|
+
|
415
|
+
}
|
365
416
|
}
|
366
417
|
|
367
418
|
/**
|
@@ -369,9 +420,13 @@ function initCarousel() {
|
|
369
420
|
* @return {{slides: unknown[], totalSlides: number}}
|
370
421
|
*/
|
371
422
|
function getSlidesAndTotal() {
|
372
|
-
|
373
|
-
|
374
|
-
|
423
|
+
const originSlides = Array.from(getSlottedElements.call(this, ":scope:not([data-monster-clone-from])", null));
|
424
|
+
const totalOriginSlides = originSlides.length;
|
425
|
+
|
426
|
+
const slides = Array.from(getSlottedElements.call(this, ":scope", null));
|
427
|
+
const totalSlides = slides.length;
|
428
|
+
|
429
|
+
return {originSlides, totalOriginSlides, slides, totalSlides};
|
375
430
|
}
|
376
431
|
|
377
432
|
/**
|
@@ -379,22 +434,17 @@ function getSlidesAndTotal() {
|
|
379
434
|
* @return {number}
|
380
435
|
*/
|
381
436
|
function next() {
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
});
|
394
|
-
});
|
395
|
-
});
|
396
|
-
|
397
|
-
return 0;
|
437
|
+
const nextIndex = this[configSymbol].currentIndex + 1;
|
438
|
+
|
439
|
+
queueMicrotask(() => {
|
440
|
+
getWindow().requestAnimationFrame(() => {
|
441
|
+
getWindow().requestAnimationFrame(() => {
|
442
|
+
moveTo.call(this, nextIndex);
|
443
|
+
});
|
444
|
+
});
|
445
|
+
});
|
446
|
+
|
447
|
+
return 0;
|
398
448
|
}
|
399
449
|
|
400
450
|
/**
|
@@ -402,14 +452,17 @@ function next() {
|
|
402
452
|
* @return {number}
|
403
453
|
*/
|
404
454
|
function prev() {
|
405
|
-
|
455
|
+
const prevIndex = this[configSymbol].currentIndex - 1;
|
406
456
|
|
407
|
-
|
408
|
-
|
409
|
-
|
457
|
+
queueMicrotask(() => {
|
458
|
+
getWindow().requestAnimationFrame(() => {
|
459
|
+
getWindow().requestAnimationFrame(() => {
|
460
|
+
moveTo.call(this, prevIndex);
|
461
|
+
});
|
462
|
+
});
|
463
|
+
});
|
410
464
|
|
411
|
-
|
412
|
-
return 0;
|
465
|
+
return 0;
|
413
466
|
}
|
414
467
|
|
415
468
|
/**
|
@@ -418,83 +471,98 @@ function prev() {
|
|
418
471
|
* @param index
|
419
472
|
*/
|
420
473
|
function setMoveProperties(slides, index) {
|
421
|
-
|
474
|
+
slides.forEach((slide) => {
|
475
|
+
slide.classList.remove("current");
|
476
|
+
});
|
477
|
+
|
478
|
+
let offset = -(index * 100);
|
479
|
+
const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
|
480
|
+
|
481
|
+
offset = offset / slidesVisible;
|
422
482
|
|
423
|
-
|
424
|
-
|
425
|
-
|
483
|
+
if (offset !== 0) {
|
484
|
+
offset += "%";
|
485
|
+
}
|
426
486
|
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
487
|
+
this[sliderElementSymbol].style.transform =
|
488
|
+
`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
|
489
|
+
|
490
|
+
slides[index].classList.add("current");
|
491
|
+
this[configSymbol].lastOffset = offset;
|
431
492
|
|
432
|
-
this[sliderElementSymbol].style.transform =
|
433
|
-
`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
|
434
|
-
slides[index].classList.add("current");
|
435
493
|
}
|
436
494
|
|
437
495
|
/**
|
438
496
|
* @private
|
439
|
-
* @param index
|
497
|
+
* @param {number} index
|
498
|
+
* @param {boolean} animation
|
440
499
|
* @fires monster-slider-moved
|
441
500
|
*/
|
442
|
-
function moveTo(index) {
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
501
|
+
function moveTo(index, animation) {
|
502
|
+
|
503
|
+
const {slides, totalSlides, originSlides, totalOriginSlides} = getSlidesAndTotal.call(this);
|
504
|
+
|
505
|
+
if (animation === false) {
|
506
|
+
this[sliderElementSymbol].classList.remove("animate");
|
507
|
+
} else {
|
508
|
+
this[sliderElementSymbol].classList.add("animate");
|
509
|
+
}
|
510
|
+
|
511
|
+
if (this.getOption("features.carousel") === true) {
|
512
|
+
|
513
|
+
if (index < 0) {
|
514
|
+
index = -1;
|
515
|
+
}
|
516
|
+
|
517
|
+
if (index > totalOriginSlides) {
|
518
|
+
index = totalOriginSlides;
|
519
|
+
}
|
520
|
+
|
521
|
+
} else {
|
522
|
+
|
523
|
+
if (index < 0) {
|
524
|
+
index = 0;
|
525
|
+
}
|
526
|
+
|
527
|
+
if (index >= totalOriginSlides) {
|
528
|
+
index = totalOriginSlides - 1;
|
529
|
+
}
|
530
|
+
}
|
531
|
+
|
532
|
+
if (!isInteger(index)) {
|
533
|
+
return;
|
534
|
+
}
|
535
|
+
|
536
|
+
this[configSymbol].currentIndex = index;
|
537
|
+
let slidesIndex = index + getVisibleSlidesFromContainerWidth.call(this);
|
538
|
+
|
539
|
+
if (slidesIndex < 0) {
|
540
|
+
slidesIndex = totalSlides - 1 - getVisibleSlidesFromContainerWidth.call(this);
|
541
|
+
this[configSymbol].currentIndex = totalOriginSlides - 1;
|
542
|
+
} else if (index > totalOriginSlides) {
|
543
|
+
slidesIndex = 0;
|
544
|
+
this[configSymbol].currentIndex = 0;
|
545
|
+
}
|
546
|
+
|
547
|
+
setMoveProperties.call(this, slides, slidesIndex);
|
548
|
+
|
549
|
+
if (index === totalOriginSlides) {
|
550
|
+
setTimeout(() => {
|
551
|
+
getWindow().requestAnimationFrame(() => {
|
552
|
+
moveTo.call(this, 0, false);
|
553
|
+
});
|
554
|
+
}, this.getOption("carousel.transition"));
|
555
|
+
} else if (index === -1) {
|
556
|
+
setTimeout(() => {
|
557
|
+
getWindow().requestAnimationFrame(() => {
|
558
|
+
moveTo.call(this, totalOriginSlides - 1, false);
|
559
|
+
});
|
560
|
+
}, this.getOption("carousel.transition"));
|
561
|
+
}
|
562
|
+
|
563
|
+
fireCustomEvent(this, "monster-slider-moved", {
|
564
|
+
index: index,
|
565
|
+
});
|
498
566
|
}
|
499
567
|
|
500
568
|
/**
|
@@ -502,35 +570,35 @@ function moveTo(index) {
|
|
502
570
|
* @return {initEventHandler}
|
503
571
|
*/
|
504
572
|
function initEventHandler() {
|
505
|
-
|
573
|
+
const self = this;
|
506
574
|
|
507
|
-
|
575
|
+
const nextElements = this[nextElementSymbol];
|
508
576
|
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
577
|
+
if (nextElements) {
|
578
|
+
nextElements.addEventListener("click", () => {
|
579
|
+
self.next();
|
580
|
+
});
|
581
|
+
}
|
514
582
|
|
515
|
-
|
583
|
+
const prevElements = this[prevElementSymbol];
|
516
584
|
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
585
|
+
if (prevElements) {
|
586
|
+
prevElements.addEventListener("click", () => {
|
587
|
+
self.previous();
|
588
|
+
});
|
589
|
+
}
|
522
590
|
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
591
|
+
if (this.getOption("features.drag")) {
|
592
|
+
this[sliderElementSymbol].addEventListener("mousedown", (e) =>
|
593
|
+
startDragging.call(this, e, "mouse"),
|
594
|
+
);
|
527
595
|
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
596
|
+
this[sliderElementSymbol].addEventListener("touchstart", (e) =>
|
597
|
+
startDragging.call(this, e, "touch"),
|
598
|
+
);
|
599
|
+
}
|
532
600
|
|
533
|
-
|
601
|
+
return this;
|
534
602
|
}
|
535
603
|
|
536
604
|
/**
|
@@ -539,45 +607,45 @@ function initEventHandler() {
|
|
539
607
|
* @param type
|
540
608
|
*/
|
541
609
|
function startDragging(e, type) {
|
542
|
-
this[configSymbol].isDragging = true;
|
543
|
-
this[configSymbol].startPos = getPositionX(e, type);
|
544
|
-
this[sliderElementSymbol].classList.add("grabbing");
|
545
|
-
this[sliderElementSymbol].style.transitionProperty = "none";
|
546
610
|
|
547
|
-
|
548
|
-
dragging.call(this, x, type);
|
549
|
-
};
|
611
|
+
const {slides} = getSlidesAndTotal.call(this);
|
550
612
|
|
551
|
-
|
552
|
-
const endEvent = type === "mouse" ? "mouseup" : "touchend";
|
553
|
-
const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
|
613
|
+
const widthOfSlider = slides[this[configSymbol].currentIndex]?.offsetWidth
|
554
614
|
|
555
|
-
|
556
|
-
|
615
|
+
this[configSymbol].isDragging = true;
|
616
|
+
this[configSymbol].startPos = getPositionX(e, type);
|
617
|
+
this[sliderElementSymbol].classList.add("grabbing");
|
618
|
+
this[sliderElementSymbol].style.transitionProperty = "none";
|
557
619
|
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
this[sliderElementSymbol].style.transitionProperty = "";
|
620
|
+
const callbackMousemove = (x) => {
|
621
|
+
dragging.call(this, x, type);
|
622
|
+
};
|
562
623
|
|
563
|
-
|
564
|
-
|
565
|
-
|
624
|
+
const callbackMouseUp = () => {
|
625
|
+
const endEvent = type === "mouse" ? "mouseup" : "touchend";
|
626
|
+
const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
|
566
627
|
|
567
|
-
|
628
|
+
document.body.removeEventListener(endEvent, callbackMouseUp);
|
629
|
+
document.body.removeEventListener(moveEvent, callbackMousemove);
|
568
630
|
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
newIndex++;
|
574
|
-
}
|
631
|
+
this[configSymbol].isDragging = false;
|
632
|
+
this[configSymbol].startPos = 0;
|
633
|
+
this[sliderElementSymbol].classList.remove("grabbing");
|
634
|
+
this[sliderElementSymbol].style.transitionProperty = "";
|
575
635
|
|
576
|
-
|
577
|
-
|
636
|
+
const lastPos = this[configSymbol].draggingPos;
|
637
|
+
this[configSymbol].draggingPos = 0;
|
578
638
|
|
579
|
-
|
580
|
-
|
639
|
+
let newIndex = this[configSymbol].currentIndex;
|
640
|
+
const shift = lastPos / widthOfSlider;
|
641
|
+
const shiftIndex = Math.round(shift);
|
642
|
+
|
643
|
+
newIndex += (shiftIndex * -1);
|
644
|
+
this.moveTo(newIndex);
|
645
|
+
};
|
646
|
+
|
647
|
+
document.body.addEventListener("mouseup", callbackMouseUp);
|
648
|
+
document.body.addEventListener("mousemove", callbackMousemove);
|
581
649
|
}
|
582
650
|
|
583
651
|
/**
|
@@ -587,7 +655,7 @@ function startDragging(e, type) {
|
|
587
655
|
* @return {*|number|number}
|
588
656
|
*/
|
589
657
|
function getPositionX(e, type) {
|
590
|
-
|
658
|
+
return type === "mouse" ? e.pageX : e.touches[0].clientX;
|
591
659
|
}
|
592
660
|
|
593
661
|
/**
|
@@ -596,11 +664,13 @@ function getPositionX(e, type) {
|
|
596
664
|
* @param type
|
597
665
|
*/
|
598
666
|
function dragging(e, type) {
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
667
|
+
if (!this[configSymbol].isDragging) return;
|
668
|
+
this[configSymbol].draggingPos =
|
669
|
+
getPositionX(e, type) - this[configSymbol].startPos;
|
670
|
+
|
671
|
+
this[sliderElementSymbol].style.transform =
|
672
|
+
`translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
|
673
|
+
|
604
674
|
}
|
605
675
|
|
606
676
|
/**
|
@@ -608,21 +678,21 @@ function dragging(e, type) {
|
|
608
678
|
* @return {void}
|
609
679
|
*/
|
610
680
|
function initControlReferences() {
|
611
|
-
|
612
|
-
|
613
|
-
|
681
|
+
this[controlElementSymbol] = this.shadowRoot.querySelector(
|
682
|
+
`[${ATTRIBUTE_ROLE}="control"]`,
|
683
|
+
);
|
614
684
|
|
615
|
-
|
616
|
-
|
617
|
-
|
685
|
+
this[sliderElementSymbol] = this.shadowRoot.querySelector(
|
686
|
+
`[${ATTRIBUTE_ROLE}="slider"]`,
|
687
|
+
);
|
618
688
|
|
619
|
-
|
620
|
-
|
621
|
-
|
689
|
+
this[prevElementSymbol] = this.shadowRoot.querySelector(
|
690
|
+
`[${ATTRIBUTE_ROLE}="prev"]`,
|
691
|
+
);
|
622
692
|
|
623
|
-
|
624
|
-
|
625
|
-
|
693
|
+
this[nextElementSymbol] = this.shadowRoot.querySelector(
|
694
|
+
`[${ATTRIBUTE_ROLE}="next"]`,
|
695
|
+
);
|
626
696
|
}
|
627
697
|
|
628
698
|
/**
|
@@ -630,8 +700,8 @@ function initControlReferences() {
|
|
630
700
|
* @return {string}
|
631
701
|
*/
|
632
702
|
function getTemplate() {
|
633
|
-
|
634
|
-
|
703
|
+
// language=HTML
|
704
|
+
return `
|
635
705
|
<div data-monster-role="control" part="control">
|
636
706
|
<div class="prev" data-monster-role="prev" part="prev" part="prev">
|
637
707
|
<slot name="prev"></slot>
|
@@ -16,6 +16,7 @@
|
|
16
16
|
height: 100%;
|
17
17
|
position: relative;
|
18
18
|
box-sizing: border-box;
|
19
|
+
--monster-slides-width: 100%;
|
19
20
|
}
|
20
21
|
|
21
22
|
[data-monster-role=slider] {
|
@@ -25,10 +26,13 @@
|
|
25
26
|
width: 100%;
|
26
27
|
height: 100%;
|
27
28
|
scrollbar-width: none;
|
28
|
-
transition: all 0.3s ease-in-out;
|
29
29
|
box-sizing: border-box;
|
30
30
|
}
|
31
31
|
|
32
|
+
[data-monster-role=slider].animate {
|
33
|
+
transition: all 0.3s ease-in-out;
|
34
|
+
}
|
35
|
+
|
32
36
|
[data-monster-role=slider].grabbing {
|
33
37
|
cursor: grabbing;
|
34
38
|
user-select: none;
|
@@ -36,7 +40,7 @@
|
|
36
40
|
}
|
37
41
|
|
38
42
|
::slotted(div) {
|
39
|
-
flex: 0 0
|
43
|
+
flex: 0 0 var(--monster-slides-width);
|
40
44
|
height: 100%;
|
41
45
|
display: flex;
|
42
46
|
box-sizing: border-box;
|
@@ -10,10 +10,10 @@
|
|
10
10
|
* For more information about purchasing a commercial license, please contact schukai GmbH.
|
11
11
|
*/
|
12
12
|
|
13
|
-
import {
|
14
|
-
import {
|
13
|
+
import {addAttributeToken} from "../../../dom/attributes.mjs";
|
14
|
+
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
|
15
15
|
|
16
|
-
export {
|
16
|
+
export {SliderStyleSheet}
|
17
17
|
|
18
18
|
/**
|
19
19
|
* @private
|
@@ -22,17 +22,10 @@ export { SliderStyleSheet };
|
|
22
22
|
const SliderStyleSheet = new CSSStyleSheet();
|
23
23
|
|
24
24
|
try {
|
25
|
-
|
26
|
-
`
|
25
|
+
SliderStyleSheet.insertRule(`
|
27
26
|
@layer slider {
|
28
|
-
: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)}
|
29
|
-
}`,
|
30
|
-
0,
|
31
|
-
);
|
27
|
+
: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)}
|
28
|
+
}`, 0);
|
32
29
|
} catch (e) {
|
33
|
-
|
34
|
-
document.getRootNode().querySelector("html"),
|
35
|
-
ATTRIBUTE_ERRORMESSAGE,
|
36
|
-
e + "",
|
37
|
-
);
|
30
|
+
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
|
38
31
|
}
|