@schukai/monster 3.74.0 → 3.76.0

package/source/components/layout/slider.mjs

@@ -10,26 +10,19 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
 import {
-    ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_PREFIX,
-    ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
-import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
-import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
-import {SliderStyleSheet} from "./stylesheet/slider.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { SliderStyleSheet } from "./stylesheet/slider.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
 
-import {getWindow} from "../../dom/util.mjs";
+import { getWindow } from "../../dom/util.mjs";
 
-export {Slider};
+export { Slider };
 
 /**
  * @private
@@ -65,166 +58,161 @@ const configSymbol = Symbol("config");
  * @private
  * @type {string}
  */
-const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from"
+const ATTRIBUTE_CLONE_FROM = ATTRIBUTE_PREFIX + "clone-from";
 
 /**
  * A Slider
  *
- * @fragments /fragments/components/form/slider/
+ * @fragments /fragments/components/layout/slider/
  *
- * @example /examples/components/form/slider-simple
+ * @example /examples/components/layout/slider-simple
  *
  * @since 3.74.0
  * @copyright schukai GmbH
  * @summary A beautiful Slider that can make your life easier and also looks good.
  */
 class Slider extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/slider@@instance");
-    }
-
-    /**
-     *
-     * @return {Components.Layout.Slider
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        this[configSymbol] = {
-            currentIndex: 0,
-
-            isDragging: false,
-            draggingPos: 0,
-            startPos: 0,
-            //  currentTranslate: 0,
-            //  prevTranslate: 0,
-            //
-            // startPositions: null,
-            // currentPositions: null,
-
-            autoPlayInterval: null,
-        }
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initStructure.call(this);
-
-        return this;
-    }
-
-    /**
-     * To set the options via the html tag the attribute `data-monster-options` must be used.
-     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-     *
-     * The individual configuration values can be found in the table.
-     *
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} labels Label definitions
-     * @property {Object} actions Callbacks
-     * @property {string} actions.click="throw Error" Callback when clicked
-     * @property {Object} features Features
-     * @property {Object} classes CSS classes
-     * @property {boolean} disabled=false Disabled state
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            labels: {},
-            classes: {},
-            disabled: false,
-
-            features: {
-                carousel: false,
-                autoPlay: true,
-                thumbnails: true,
-            },
-
-            autoPlay: {
-                delay: 1500,
-                startDelay: 1000,
-                direction: "next",
-                mouseOverPause: true,
-                touchPause: true,
-                drag: true,
-            },
-
-            actions: {
-                click: () => {
-                    throw new Error("the click action is not defined");
-                },
-            }
-        });
-    }
-
-    /**
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-slider";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [SliderStyleSheet];
-    }
-
-    /**
-     * moves the slider to the given index
-     *
-     * @param index
-     * @returns {void}
-     */
-    moveTo(index) {
-        return moveTo.call(this, index)
-    }
-
-    /**
-     * shows the previous slide
-     *
-     * @return {void}
-     */
-    previous() {
-        return prev.call(this);
-    }
-
-    /**
-     * shows the next slide
-     *
-     * @return {void}
-     */
-    next() {
-        return next.call(this);
-    }
-
-    /**
-     * stops the auto play
-     *
-     * @return {void}
-     */
-    stopAutoPlay() {
-        if (this[configSymbol].autoPlayInterval) {
-            clearInterval(this[configSymbol].autoPlayInterval);
-        }
-    }
-
-    /**
-     * starts the auto play
-     *
-     * @return {void}
-     */
-    startAutoPlay() {
-        initAutoPlay.call(this);
-    }
-
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/slider@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Layout.Slider
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		this[configSymbol] = {
+			currentIndex: 0,
+
+			isDragging: false,
+			draggingPos: 0,
+			startPos: 0,
+			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
+	 * @returns {void}
+	 */
+	moveTo(index) {
+		return moveTo.call(this, index);
+	}
+
+	/**
+	 * shows the previous slide
+	 *
+	 * @return {void}
+	 */
+	previous() {
+		return prev.call(this);
+	}
+
+	/**
+	 * shows the next slide
+	 *
+	 * @return {void}
+	 */
+	next() {
+		return next.call(this);
+	}
+
+	/**
+	 * stops the auto play
+	 *
+	 * @return {void}
+	 */
+	stopAutoPlay() {
+		if (this[configSymbol].autoPlayInterval) {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		}
+	}
+
+	/**
+	 * starts the auto play
+	 *
+	 * @return {void}
+	 */
+	startAutoPlay() {
+		initAutoPlay.call(this);
+	}
 }
 
 /**
@@ -232,151 +220,148 @@ 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");
+	initNavigation.call(this, "next");
+	initNavigation.call(this, "prev");
 
-    if (this.getOption("features.thumbnails")) {
-        initThumbnails.call(this);
-    }
+	if (this.getOption("features.thumbnails")) {
+		initThumbnails.call(this);
+	}
 
-    if (this.getOption("features.carousel")) {
-        initCarousel.call(this);
-    }
+	if (this.getOption("features.carousel")) {
+		initCarousel.call(this);
+	}
 
-    if (this.getOption("features.autoPlay")) {
-        initAutoPlay.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 slides = Array.from(getSlottedElements.call(this, ":scope", null));
+
+	slides.forEach((slide, index) => {
+		const thumbnail = document.createElement("div");
+		thumbnail.classList.add("thumbnail");
+		thumbnail.addEventListener("click", () => {
+			if (self.getOption("features.carousel")) {
+				this.moveTo(index + 1);
+			} else {
+				this.moveTo(index);
+			}
+		});
+
+		thumbnails.appendChild(thumbnail);
+	});
+
+	this.addEventListener("monster-slider-moved", (e) => {
+		const index = e.detail.index;
+		const thumbnail = thumbnails.children[index];
+
+		if (!thumbnail) {
+			return;
+		}
+
+		Array.from(thumbnails.children).forEach((thumb) => {
+			thumb.classList.remove("current");
+		});
+
+		thumbnail.classList.add("current");
+	});
 }
 
 /**
  * @private
  */
 function initAutoPlay() {
-    const self = this;
-    const autoPlay = this.getOption("autoPlay");
-    const delay = autoPlay.delay;
-    const startDelay = autoPlay.startDelay;
-    const direction = autoPlay.direction;
-
-    function start() {
-
-        if (self[configSymbol].autoPlayInterval) {
-            clearInterval(self[configSymbol].autoPlayInterval);
-        }
-
-        self[configSymbol].autoPlayInterval = setInterval(() => {
-            if (direction === "next") {
-                if(self.next() === -1) {
-                    if (self.getOption("features.carousel")) {
-                        clearInterval(self[configSymbol].autoPlayInterval);
-                    }
-                }
-            } else {
-                if (self.previous() === -1) {
-                    if (self.getOption("features.carousel")) {
-                        clearInterval(self[configSymbol].autoPlayInterval);
-                    }
-                }
-            }
-        }, delay);
-    }
-
-    setTimeout(() => {
-        start();
-    }, startDelay);
-
-    if (autoPlay.mouseOverPause) {
-        this.addEventListener("mouseover", () => {
-            clearInterval(this[configSymbol].autoPlayInterval);
-        });
-
-        this.addEventListener("mouseout", () => {
-            if (this[configSymbol].isDragging) {
-                return;
-            }
-            start();
-        });
-    }
-
-    if (autoPlay.touchPause) {
-        this.addEventListener("touchstart", () => {
-            clearInterval(this[configSymbol].autoPlayInterval);
-        });
-
-        this.addEventListener("touchend", () => {
-            start();
-        });
-    }
-
+	const self = this;
+	const autoPlay = this.getOption("autoPlay");
+	const delay = autoPlay.delay;
+	const startDelay = autoPlay.startDelay;
+	const direction = autoPlay.direction;
+
+	function start() {
+		if (self[configSymbol].autoPlayInterval) {
+			clearInterval(self[configSymbol].autoPlayInterval);
+		}
+
+		self[configSymbol].autoPlayInterval = setInterval(() => {
+			if (direction === "next") {
+				if (self.next() === -1) {
+					if (self.getOption("features.carousel")) {
+						clearInterval(self[configSymbol].autoPlayInterval);
+					}
+				}
+			} else {
+				if (self.previous() === -1) {
+					if (self.getOption("features.carousel")) {
+						clearInterval(self[configSymbol].autoPlayInterval);
+					}
+				}
+			}
+		}, delay);
+	}
+
+	setTimeout(() => {
+		start();
+	}, startDelay);
+
+	if (autoPlay.mouseOverPause) {
+		this.addEventListener("mouseover", () => {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		});
+
+		this.addEventListener("mouseout", () => {
+			if (this[configSymbol].isDragging) {
+				return;
+			}
+			start();
+		});
+	}
+
+	if (autoPlay.touchPause) {
+		this.addEventListener("touchstart", () => {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		});
+
+		this.addEventListener("touchend", () => {
+			start();
+		});
+	}
 }
 
 /**
  * @private
  */
 function initCarousel() {
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	if (this.getOption("features.carousel") && totalSlides > 2) {
+		const firstElement = slides[0].cloneNode(true);
+		firstElement.setAttribute(ATTRIBUTE_CLONE_FROM, 1);
 
-    const {slides, totalSlides} = getSlidesAndTotal.call(this);
-    if (this.getOption("features.carousel") && totalSlides > 2) {
-
-        const firstElement = slides[0].cloneNode(true);
-        firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
-
-        const lastElement = slides[totalSlides - 1].cloneNode(true);
-        lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
-        slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+		const lastElement = slides[totalSlides - 1].cloneNode(true);
+		lastElement.setAttribute(ATTRIBUTE_CLONE_FROM, totalSlides);
+		slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
 
-        slides[0].insertAdjacentElement("beforebegin", lastElement);
+		slides[0].insertAdjacentElement("beforebegin", lastElement);
 
-        moveTo.call(this, 1);
-
-    }
+		moveTo.call(this, 1);
+	}
 }
 
 /**
@@ -384,9 +369,9 @@ function initCarousel() {
  * @returns {{slides: unknown[], totalSlides: number}}
  */
 function getSlidesAndTotal() {
-    const slides = Array.from(getSlottedElements.call(this, ":scope", null));
-    const totalSlides = slides.length;
-    return {slides, totalSlides};
+	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+	const totalSlides = slides.length;
+	return { slides, totalSlides };
 }
 
 /**
@@ -394,23 +379,22 @@ function getSlidesAndTotal() {
  * @returns {number}
  */
 function next() {
-
-    const {slides, totalSlides} = getSlidesAndTotal.call(this);
-    const nextIndex = this[configSymbol].currentIndex + 1;
-
-    if (nextIndex >= totalSlides) {
-        return -1;
-    }
-
-    queueMicrotask(() => {
-        getWindow().requestAnimationFrame(() => {
-            getWindow().requestAnimationFrame(() => {
-                moveTo.call(this, nextIndex);
-            });
-        });
-    });
-    
-    return 0;
+	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;
 }
 
 /**
@@ -418,15 +402,14 @@ function next() {
  * @returns {number}
  */
 function prev() {
+	const prevIndex = this[configSymbol].currentIndex - 1;
 
-    const prevIndex = this[configSymbol].currentIndex - 1;
-
-    if (prevIndex < 0) {
-        return -1;
-    }
+	if (prevIndex < 0) {
+		return -1;
+	}
 
-    moveTo.call(this, prevIndex);
-    return 0;
+	moveTo.call(this, prevIndex);
+	return 0;
 }
 
 /**
@@ -435,21 +418,20 @@ function prev() {
  * @param index
  */
 function setMoveProperties(slides, index) {
+	this[configSymbol].currentIndex = index;
 
-    this[configSymbol].currentIndex = index
-
-    slides.forEach((slide) => {
-        slide.classList.remove("current");
-    })
-
-    let offset = -(index * 100);
-    if (offset !== 0) {
-        offset += "%";
-    }
+	slides.forEach((slide) => {
+		slide.classList.remove("current");
+	});
 
-    this[sliderElementSymbol].style.transform = `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
-    slides[index].classList.add("current");
+	let offset = -(index * 100);
+	if (offset !== 0) {
+		offset += "%";
+	}
 
+	this[sliderElementSymbol].style.transform =
+		`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+	slides[index].classList.add("current");
 }
 
 /**
@@ -458,93 +440,97 @@ function setMoveProperties(slides, index) {
  * @fires monster-slider-moved
  */
 function moveTo(index) {
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
 
-    const {slides, totalSlides} = getSlidesAndTotal.call(this);
+	if (index < 0) {
+		index = totalSlides - 1;
+	} else if (index >= totalSlides) {
+		index = 0;
+	}
 
-    if (index < 0) {
-        index = totalSlides - 1
-    } else if (index >= totalSlides) {
-        index = 0
-    }
+	const slider = this[sliderElementSymbol];
 
-    const slider = this[sliderElementSymbol];
+	setMoveProperties.call(this, slides, index);
 
-    setMoveProperties.call(this, slides, index);
+	const style = getComputedStyle(this[sliderElementSymbol]);
+	const duration = style.transitionDuration;
+	const durationMilis = parseFloat(duration) * 1000;
 
-    const style = getComputedStyle(this[sliderElementSymbol]);
-    const duration = style.transitionDuration;
-    const durationMilis = parseFloat(duration) * 1000;
+	let slideIndex = index;
+	let eventFired = false;
 
-    let slideIndex = index;
-    let eventFired = false;
+	if (this.getOption("features.carousel")) {
+		slideIndex = index - 1;
 
-    if (this.getOption("features.carousel")) {
-        slideIndex = index - 1;
+		if (slides[index].hasAttribute(ATTRIBUTE_CLONE_FROM)) {
+			const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLONE_FROM));
 
-        if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
-            const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
+			getWindow().requestAnimationFrame(() => {
+				getWindow().requestAnimationFrame(() => {
+					setTimeout(() => {
+						slider.style.transitionProperty = "none";
 
-            getWindow().requestAnimationFrame(() => {
-                getWindow().requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        slider.style.transitionProperty = "none";
+						setMoveProperties.call(this, slides, from);
+						slideIndex = from - 1;
 
-                        setMoveProperties.call(this, slides, from);
-                        slideIndex = from - 1;
+						getWindow().requestAnimationFrame(() => {
+							getWindow().requestAnimationFrame(() => {
+								slider.style.transitionProperty = "";
 
-                        getWindow().requestAnimationFrame(() => {
-                            getWindow().requestAnimationFrame(() => {
-                                slider.style.transitionProperty = "";
+								fireCustomEvent(this, "monster-slider-moved", {
+									index: slideIndex,
+								});
 
-                                fireCustomEvent(this, "monster-slider-moved", {
-                                    index: slideIndex,
-                                })
+								eventFired = true;
+							});
+						});
+					}, durationMilis);
+				});
+			});
+		}
+	}
 
-                                eventFired = true;
-                            });
-                        });
-                    }, durationMilis);
-                });
-            });
-        }
-    }
-
-    if (!eventFired) {
-        fireCustomEvent(this, "monster-slider-moved", {
-            index: slideIndex,
-        })
-    }
+	if (!eventFired) {
+		fireCustomEvent(this, "monster-slider-moved", {
+			index: slideIndex,
+		});
+	}
 }
 
-
 /**
  * @private
  * @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"),
+		);
 
-    this[sliderElementSymbol].addEventListener('mousedown', (e) => startDragging.call(this, e, 'mouse'));
-    this[sliderElementSymbol].addEventListener('touchstart', (e) => startDragging.call(this, e, 'touch'));
-    // this[sliderElementSymbol].addEventListener('touchend', () => stopDragging.call(this, 'touch'));
-    // this[sliderElementSymbol].addEventListener('touchmove', (e) => dragging.call(this, e, 'touch'));
-    return this;
+		this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+			startDragging.call(this, e, "touch"),
+		);
+	}
+
+	return this;
 }
 
 /**
@@ -553,49 +539,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";
 
-    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 callbackMousemove = (x) => {
+		dragging.call(this, x, type);
+	};
 
-    const callbackMouseUp = () => {
-        
-        const endEvent = type === 'mouse' ? 'mouseup' : 'touchend';
-        const moveEvent = type === 'mouse' ? 'mousemove' : 'touchmove';
+	const callbackMouseUp = () => {
+		const endEvent = type === "mouse" ? "mouseup" : "touchend";
+		const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
 
-        document.body.removeEventListener(endEvent, callbackMouseUp);
-        document.body.removeEventListener(moveEvent, callbackMousemove);
+		document.body.removeEventListener(endEvent, callbackMouseUp);
+		document.body.removeEventListener(moveEvent, callbackMousemove);
 
-        this[configSymbol].isDragging = false;
-        this[configSymbol].startPos = 0;
-        this[sliderElementSymbol].classList.remove('grabbing');
-        this[sliderElementSymbol].style.transitionProperty = "";
+		this[configSymbol].isDragging = false;
+		this[configSymbol].startPos = 0;
+		this[sliderElementSymbol].classList.remove("grabbing");
+		this[sliderElementSymbol].style.transitionProperty = "";
 
-        const lastPos = this[configSymbol].draggingPos;
-        const widthOfSlider = this[sliderElementSymbol].offsetWidth;
-        this[configSymbol].draggingPos = 0;
+		const lastPos = this[configSymbol].draggingPos;
+		const widthOfSlider = this[sliderElementSymbol].offsetWidth;
+		this[configSymbol].draggingPos = 0;
 
-        let newIndex = this[configSymbol].currentIndex;
+		let newIndex = this[configSymbol].currentIndex;
 
-        const x = lastPos / widthOfSlider;
-        if (x > 0.5) {
-            newIndex--;
-        } else if (x < -0.5) {
-            newIndex++;
-        }
+		const x = lastPos / widthOfSlider;
+		if (x > 0.5) {
+			newIndex--;
+		} else if (x < -0.5) {
+			newIndex++;
+		}
 
-        this.moveTo(newIndex);
-
-    }
-
-    document.body.addEventListener('mouseup', callbackMouseUp);
-    document.body.addEventListener('mousemove', callbackMousemove);
+		this.moveTo(newIndex);
+	};
 
+	document.body.addEventListener("mouseup", callbackMouseUp);
+	document.body.addEventListener("mousemove", callbackMousemove);
 }
 
 /**
@@ -605,7 +587,7 @@ function startDragging(e, type) {
  * @returns {*|number|number}
  */
 function getPositionX(e, type) {
-    return type === 'mouse' ? e.pageX : e.touches[0].clientX;
+	return type === "mouse" ? e.pageX : e.touches[0].clientX;
 }
 
 /**
@@ -614,10 +596,11 @@ 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;
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
 }
 
 /**
@@ -625,22 +608,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"]`,
+	);
 }
 
 /**
@@ -648,21 +630,20 @@ 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">
+            <div class="prev" data-monster-role="prev" part="prev" part="prev">
                 <slot name="prev"></slot>
             </div>
-            <div data-monster-role="slider">
+            <div data-monster-role="slider" part="slides">
                 <slot></slot>
             </div>
             <div data-monster-role="thumbnails"></div>
-            <div class="next" data-monster-role="next" part="next">
+            <div class="next" data-monster-role="next" part="next" part="next">
                 <slot name="next"></slot>
             </div>
         </div>`;
 }
 
-
 registerCustomElement(Slider);