@mozaic-ds/web-components 0.11.1 → 0.12.0-beta.0

package/public/components/carousel/Carousel.js

@@ -0,0 +1,710 @@
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, e as element, d as space, x as create_component, n as noop, g as attr, y as set_style, j as append, A as mount_component, l as listen, C as transition_in, E as check_outros, D as transition_out, o as detach, G as destroy_component, J as destroy_each, H as run_all, Z as HtmlTag, M as group_outros, v as binding_callbacks } from '../../index-c33b3772.js';
+import Link_nested from '../link/Link.nested.js';
+import CarouselCard_nested from './CarouselCard.nested.js';
+import Button_nested from '../button/Button.nested.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import '../../EventForward-8492ff62.js';
+import '../loader/Loader.nested.js';
+
+/* src/components/carousel/Carousel.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[40] = list[i];
+	return child_ctx;
+}
+
+// (236:6) {#each carouselItems as item}
+function create_each_block(ctx) {
+	let button;
+	let carouselcard;
+	let t;
+	let current;
+	let mounted;
+	let dispose;
+
+	carouselcard = new CarouselCard_nested({
+			props: {
+				titleTag: /*item*/ ctx[40].titleTag,
+				imgAlt: /*item*/ ctx[40].imgAlt,
+				cardIsInLayer: false,
+				title: /*item*/ ctx[40].title,
+				imgSrc: /*item*/ ctx[40].imgSrc
+			}
+		});
+
+	function click_handler_1() {
+		return /*click_handler_1*/ ctx[28](/*item*/ ctx[40]);
+	}
+
+	return {
+		c() {
+			button = element("button");
+			create_component(carouselcard.$$.fragment);
+			t = space();
+			attr(button, "class", "mc-carousel-body__item");
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			mount_component(carouselcard, button, null);
+			append(button, t);
+			current = true;
+
+			if (!mounted) {
+				dispose = [
+					listen(button, "click", click_handler_1),
+					listen(button, "touchstart", /*handleTouchStart*/ ctx[17]),
+					listen(button, "touchmove", /*handleTouchMove*/ ctx[18]),
+					listen(button, "touchend", /*handleTouchEnd*/ ctx[19], { passive: true })
+				];
+
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const carouselcard_changes = {};
+			if (dirty[0] & /*carouselItems*/ 32) carouselcard_changes.titleTag = /*item*/ ctx[40].titleTag;
+			if (dirty[0] & /*carouselItems*/ 32) carouselcard_changes.imgAlt = /*item*/ ctx[40].imgAlt;
+			if (dirty[0] & /*carouselItems*/ 32) carouselcard_changes.title = /*item*/ ctx[40].title;
+			if (dirty[0] & /*carouselItems*/ 32) carouselcard_changes.imgSrc = /*item*/ ctx[40].imgSrc;
+			carouselcard.$set(carouselcard_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(carouselcard.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(carouselcard.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(button);
+			destroy_component(carouselcard);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div5;
+	let div2;
+	let div1;
+	let html_tag;
+	let raw_value = `<${/*titleTag*/ ctx[1]} class="mc-carousel-header__container__title">${/*title*/ ctx[0]}</${/*titleTag*/ ctx[1]}>` + "";
+	let t0;
+	let div0;
+	let link;
+	let t1;
+	let nav;
+	let button0;
+	let t2;
+	let button1;
+	let nav_class_value;
+	let t3;
+	let div4;
+	let div3;
+	let current;
+	let mounted;
+	let dispose;
+
+	link = new Link_nested({
+			props: {
+				href: "#layer",
+				iconname: "navigation-arrow-arrow--right-24px",
+				iconposition: "right",
+				label: /*subtitle*/ ctx[2],
+				size: "s",
+				target: "_self"
+			}
+		});
+
+	link.$on("click", /*click_handler*/ ctx[27]);
+
+	button0 = new Button_nested({
+			props: {
+				theme: "neutral",
+				size: "s",
+				bordered: true,
+				iconmode: "only",
+				iconname: "navigation-arrow-arrow--left-32px",
+				"aria-label": "Previous page",
+				disabled: /*isScrollBeginning*/ ctx[7],
+				label: "Previous",
+				loader: ""
+			}
+		});
+
+	button0.$on("click", /*previousCards*/ ctx[13]);
+
+	button1 = new Button_nested({
+			props: {
+				theme: "neutral",
+				size: "s",
+				type: "button",
+				bordered: true,
+				disabled: /*isScrollEnd*/ ctx[8],
+				iconmode: "only",
+				iconname: "navigation-arrow-arrow--right-32px",
+				"aria-label": "Next Page",
+				label: "Next",
+				loader: ""
+			}
+		});
+
+	button1.$on("click", /*nextCards*/ ctx[12]);
+	let each_value = /*carouselItems*/ ctx[5];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			div5 = element("div");
+			div2 = element("div");
+			div1 = element("div");
+			html_tag = new HtmlTag(false);
+			t0 = space();
+			div0 = element("div");
+			create_component(link.$$.fragment);
+			t1 = space();
+			nav = element("nav");
+			create_component(button0.$$.fragment);
+			t2 = space();
+			create_component(button1.$$.fragment);
+			t3 = space();
+			div4 = element("div");
+			div3 = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.c = noop;
+			html_tag.a = t0;
+			attr(div0, "class", "mc-carousel-header__container__subtitle");
+			attr(div1, "class", "mc-carousel-header__titles");
+			attr(nav, "aria-label", "pagination");
+
+			attr(nav, "class", nav_class_value = "mc-carousel-header__buttons " + (/*mobile*/ ctx[3]
+			? 'mc-carousel-header__buttons-mobile'
+			: 'mc-carousel-header__buttons-desktop'));
+
+			attr(div2, "class", "mc-carousel-header");
+			attr(div3, "class", "mc-carousel-body__content");
+			set_style(div3, "--carousel__container-width-space", /*carouselContainerWidthSpace*/ ctx[10] + "px");
+			set_style(div3, "--carousel__items-count", /*carouselCurrentItemsSize*/ ctx[4]);
+			set_style(div3, "--carousel__item-width-space", /*carouselItemWidthSpace*/ ctx[11] + "px");
+			set_style(div3, "--carousel__items-visible", /*carouselCurrentItemsVisibleAndHalf*/ ctx[9]);
+			set_style(div3, "--carousel__scrollbar-left", carouselScrollbarLeft);
+			set_style(div3, "--carousel__container-separate-item-size", separateItemPixelSize + "px");
+			attr(div4, "class", "mc-carousel-body");
+			set_style(div4, "--carousel__accessibility-focus-padding", accessibilityFocusPadding + "px");
+			attr(div5, "class", "mc-carousel");
+		},
+		m(target, anchor) {
+			insert(target, div5, anchor);
+			append(div5, div2);
+			append(div2, div1);
+			html_tag.m(raw_value, div1);
+			append(div1, t0);
+			append(div1, div0);
+			mount_component(link, div0, null);
+			append(div2, t1);
+			append(div2, nav);
+			mount_component(button0, nav, null);
+			append(nav, t2);
+			mount_component(button1, nav, null);
+			append(div5, t3);
+			append(div5, div4);
+			append(div4, div3);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(div3, null);
+				}
+			}
+
+			/*div4_binding*/ ctx[29](div4);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(div4, "scroll", /*handleScrollCarousel*/ ctx[14]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if ((!current || dirty[0] & /*titleTag, title*/ 3) && raw_value !== (raw_value = `<${/*titleTag*/ ctx[1]} class="mc-carousel-header__container__title">${/*title*/ ctx[0]}</${/*titleTag*/ ctx[1]}>` + "")) html_tag.p(raw_value);
+			const link_changes = {};
+			if (dirty[0] & /*subtitle*/ 4) link_changes.label = /*subtitle*/ ctx[2];
+			link.$set(link_changes);
+			const button0_changes = {};
+			if (dirty[0] & /*isScrollBeginning*/ 128) button0_changes.disabled = /*isScrollBeginning*/ ctx[7];
+			button0.$set(button0_changes);
+			const button1_changes = {};
+			if (dirty[0] & /*isScrollEnd*/ 256) button1_changes.disabled = /*isScrollEnd*/ ctx[8];
+			button1.$set(button1_changes);
+
+			if (!current || dirty[0] & /*mobile*/ 8 && nav_class_value !== (nav_class_value = "mc-carousel-header__buttons " + (/*mobile*/ ctx[3]
+			? 'mc-carousel-header__buttons-mobile'
+			: 'mc-carousel-header__buttons-desktop'))) {
+				attr(nav, "class", nav_class_value);
+			}
+
+			if (dirty[0] & /*handleClickCard, carouselItems, handleTouchStart, handleTouchMove, handleTouchEnd*/ 950304) {
+				each_value = /*carouselItems*/ ctx[5];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div3, null);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+
+			if (!current || dirty[0] & /*carouselContainerWidthSpace*/ 1024) {
+				set_style(div3, "--carousel__container-width-space", /*carouselContainerWidthSpace*/ ctx[10] + "px");
+			}
+
+			if (!current || dirty[0] & /*carouselCurrentItemsSize*/ 16) {
+				set_style(div3, "--carousel__items-count", /*carouselCurrentItemsSize*/ ctx[4]);
+			}
+
+			if (!current || dirty[0] & /*carouselItemWidthSpace*/ 2048) {
+				set_style(div3, "--carousel__item-width-space", /*carouselItemWidthSpace*/ ctx[11] + "px");
+			}
+
+			if (!current || dirty[0] & /*carouselCurrentItemsVisibleAndHalf*/ 512) {
+				set_style(div3, "--carousel__items-visible", /*carouselCurrentItemsVisibleAndHalf*/ ctx[9]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(link.$$.fragment, local);
+			transition_in(button0.$$.fragment, local);
+			transition_in(button1.$$.fragment, local);
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			transition_out(link.$$.fragment, local);
+			transition_out(button0.$$.fragment, local);
+			transition_out(button1.$$.fragment, local);
+			each_blocks = each_blocks.filter(Boolean);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div5);
+			destroy_component(link);
+			destroy_component(button0);
+			destroy_component(button1);
+			destroy_each(each_blocks, detaching);
+			/*div4_binding*/ ctx[29](null);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+let separateItemPixelSize = 16;
+let accessibilityFocusPadding = 4;
+let carouselScrollbarLeft = 0;
+
+function getCarouselContainerWidthSpace(totalItems) {
+	return (totalItems - 1) * separateItemPixelSize;
+}
+
+function getCarouselItemWidthSpace(itemsVisible, itemsAndHalfVisible) {
+	if (itemsAndHalfVisible) {
+		return itemsVisible * separateItemPixelSize;
+	}
+
+	return (itemsVisible - 1) * separateItemPixelSize;
+}
+
+function initCurrentDevice(mediaQueryM, mediaQueryXL) {
+	if (mediaQueryXL.matches) {
+		return 'xl';
+	}
+
+	if (mediaQueryM.matches) {
+		return 'm';
+	}
+
+	return 's';
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let carouselItems;
+	let carouselOptions;
+	let carouselItemsSize;
+	let carouselCurrentItemsVisible;
+	let carouselCurrentHasHalfItemVisible;
+	let carouselCurrentItemsSize;
+	let carouselCurrentItemsVisibleAndHalf;
+	let carouselItemWidthSpace;
+	let carouselContainerWidthSpace;
+	let { title } = $$props;
+	let { titleTag = 'h1' } = $$props;
+	let { subtitle } = $$props;
+	let { mobile = false } = $$props;
+	let { options } = $$props;
+	let { data } = $$props;
+	const mediaQueryS = window.matchMedia('(max-width: 679px)');
+	const mediaQueryM = window.matchMedia('(min-width: 680px) and (max-width: 1279px)');
+	const mediaQueryXL = window.matchMedia('(min-width: 1280px)');
+
+	const defaultCarousel = {
+		s: {
+			itemsVisible: 1,
+			hasHalfItemVisible: true
+		},
+		m: {
+			itemsVisible: 3,
+			hasHalfItemVisible: false
+		},
+		xl: {
+			itemsVisible: 5,
+			hasHalfItemVisible: false
+		}
+	};
+
+	let eventHandler = new EventHandler();
+	let currentDevice = initCurrentDevice(mediaQueryM, mediaQueryXL);
+	let carouselTouchStartX = 0;
+	let carouselTouchCurrentX = 0;
+	let carouselContainer;
+	let isScrollBeginning = true;
+	let isScrollEnd = false;
+	initMediaQueriesChanges();
+
+	function moveScroll(signe) {
+		function getCarouselItemWidth() {
+			if (carouselCurrentHasHalfItemVisible) {
+				return (carouselContainer.clientWidth - carouselCurrentItemsVisible * 16) / carouselCurrentItemsVisibleAndHalf;
+			} else {
+				return (carouselContainer.clientWidth - (carouselCurrentItemsVisible - 1) * 16) / carouselCurrentItemsVisible;
+			}
+		}
+
+		function getLeft() {
+			if (!carouselCurrentHasHalfItemVisible) {
+				return carouselContainer.scrollLeft + signe * (carouselContainer.clientWidth + separateItemPixelSize - accessibilityFocusPadding * 2);
+			}
+
+			const itemWidth = getCarouselItemWidth();
+
+			if (isScrollBeginning) {
+				return carouselContainer.scrollLeft + (signe * (carouselContainer.clientWidth - 3 / 4 * itemWidth - separateItemPixelSize) + accessibilityFocusPadding);
+			}
+
+			if (isScrollEnd) {
+				return carouselContainer.scrollLeft + signe * (carouselContainer.clientWidth - 3 / 4 * itemWidth - separateItemPixelSize);
+			}
+
+			return carouselContainer.scrollLeft + signe * (carouselContainer.clientWidth - itemWidth / 2 - separateItemPixelSize + accessibilityFocusPadding * 2);
+		}
+
+		carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });
+	}
+
+	function nextCards() {
+		moveScroll(1);
+	}
+
+	function previousCards() {
+		moveScroll(-1);
+	}
+
+	function handleScrollCarousel() {
+		$$invalidate(7, isScrollBeginning = (carouselContainer === null || carouselContainer === void 0
+		? void 0
+		: carouselContainer.scrollLeft) <= 0);
+
+		$$invalidate(8, isScrollEnd = (carouselContainer === null || carouselContainer === void 0
+		? void 0
+		: carouselContainer.scrollWidth) - (carouselContainer === null || carouselContainer === void 0
+		? void 0
+		: carouselContainer.scrollLeft) <= carouselContainer.offsetWidth);
+	}
+
+	function handleClickCard(item) {
+		eventHandler.dispatch('carousel-item-clicked', item);
+	}
+
+	function handleClickLink() {
+		eventHandler.dispatch('carousel-link-clicked', {});
+	}
+
+	function initMediaQueriesChanges() {
+		mediaQueryS.onchange = e => {
+			handleMediaQueryChange(e, 's');
+		};
+
+		mediaQueryM.onchange = e => {
+			handleMediaQueryChange(e, 'm');
+		};
+
+		mediaQueryXL.onchange = e => {
+			handleMediaQueryChange(e, 'xl');
+		};
+	}
+
+	function handleMediaQueryChange(event, matchingDevice) {
+		if (event.matches) {
+			$$invalidate(22, currentDevice = matchingDevice);
+		}
+	}
+
+	function handleTouchStart(event) {
+		carouselTouchStartX = event.touches[0].clientX;
+	}
+
+	function handleTouchMove(event) {
+		carouselTouchCurrentX = event.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (carouselTouchStartX > carouselTouchCurrentX + 50) {
+			nextCards();
+		}
+
+		if (carouselTouchStartX < carouselTouchCurrentX - 50) {
+			previousCards();
+		}
+	}
+
+	const click_handler = () => handleClickLink();
+	const click_handler_1 = item => handleClickCard(item);
+
+	function div4_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			carouselContainer = $$value;
+			$$invalidate(6, carouselContainer);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('title' in $$props) $$invalidate(0, title = $$props.title);
+		if ('titleTag' in $$props) $$invalidate(1, titleTag = $$props.titleTag);
+		if ('subtitle' in $$props) $$invalidate(2, subtitle = $$props.subtitle);
+		if ('mobile' in $$props) $$invalidate(3, mobile = $$props.mobile);
+		if ('options' in $$props) $$invalidate(20, options = $$props.options);
+		if ('data' in $$props) $$invalidate(21, data = $$props.data);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*data*/ 2097152) {
+			$$invalidate(5, carouselItems = data ? JSON.parse(data) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*options*/ 1048576) {
+			$$invalidate(26, carouselOptions = options
+			? Object.assign({}, defaultCarousel, JSON.parse(options))
+			: defaultCarousel);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselItems*/ 32) {
+			$$invalidate(25, carouselItemsSize = carouselItems === null || carouselItems === void 0
+			? void 0
+			: carouselItems.length);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselOptions, currentDevice*/ 71303168) {
+			$$invalidate(24, carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselOptions, currentDevice*/ 71303168) {
+			$$invalidate(23, carouselCurrentHasHalfItemVisible = carouselOptions[currentDevice].hasHalfItemVisible || false);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselItemsSize, carouselCurrentItemsVisible*/ 50331648) {
+			$$invalidate(4, carouselCurrentItemsSize = carouselItemsSize < carouselCurrentItemsVisible
+			? carouselCurrentItemsVisible
+			: carouselItemsSize);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselCurrentHasHalfItemVisible, carouselCurrentItemsVisible*/ 25165824) {
+			$$invalidate(9, carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible
+			? carouselCurrentItemsVisible + 0.5
+			: carouselCurrentItemsVisible);
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselCurrentItemsVisible, carouselCurrentHasHalfItemVisible*/ 25165824) {
+			$$invalidate(11, carouselItemWidthSpace = getCarouselItemWidthSpace(carouselCurrentItemsVisible, carouselCurrentHasHalfItemVisible));
+		}
+
+		if ($$self.$$.dirty[0] & /*carouselCurrentItemsSize*/ 16) {
+			$$invalidate(10, carouselContainerWidthSpace = getCarouselContainerWidthSpace(carouselCurrentItemsSize));
+		}
+	};
+
+	return [
+		title,
+		titleTag,
+		subtitle,
+		mobile,
+		carouselCurrentItemsSize,
+		carouselItems,
+		carouselContainer,
+		isScrollBeginning,
+		isScrollEnd,
+		carouselCurrentItemsVisibleAndHalf,
+		carouselContainerWidthSpace,
+		carouselItemWidthSpace,
+		nextCards,
+		previousCards,
+		handleScrollCarousel,
+		handleClickCard,
+		handleClickLink,
+		handleTouchStart,
+		handleTouchMove,
+		handleTouchEnd,
+		options,
+		data,
+		currentDevice,
+		carouselCurrentHasHalfItemVisible,
+		carouselCurrentItemsVisible,
+		carouselItemsSize,
+		carouselOptions,
+		click_handler,
+		click_handler_1,
+		div4_binding
+	];
+}
+
+class Carousel extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}@media screen and (min-width: 680px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1024px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1280px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 1920px){@supports (width: -webkit-fill-available) or (width: -moz-available) or (width: stretch){}}@media screen and (min-width: 680px){}@media screen and (min-width: 1024px){}@media screen and (min-width: 1280px){}@media screen and (min-width: 1920px){}@media screen and (min-width: 1024px){}.mc-carousel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1rem}.mc-carousel-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mc-carousel-header__titles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-carousel-header__buttons{gap:0.5rem}.mc-carousel-header__buttons-mobile{display:none}.mc-carousel-header__buttons-desktop{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-carousel-body{position:relative;overflow-x:auto;overflow-y:hidden;padding:var(--carousel__accessibility-focus-padding)}.mc-carousel-body__content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-column-gap:var(--carousel__container-separate-item-size);-moz-column-gap:var(--carousel__container-separate-item-size);column-gap:var(--carousel__container-separate-item-size);width:calc((100% - var(--carousel__item-width-space)) / var(--carousel__items-visible) * var(--carousel__items-count) + var(--carousel__container-width-space));margin-bottom:1.25rem}.mc-carousel-body__item{display:-webkit-box;display:-ms-flexbox;display:flex;background:none;border:none;margin:0;padding:0;width:calc(100% - var(--carousel__item-width-space))/var(--carousel__items-visible);position:relative}.mc-carousel-body__item::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-carousel-body__item:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}::-webkit-scrollbar{border-radius:0.25rem;height:6px;background:#e6e6e6;border-top:1px solid white;border-bottom:1px solid white}::-webkit-scrollbar-thumb{background:#333333;border-radius:6px}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				title: 0,
+				titleTag: 1,
+				subtitle: 2,
+				mobile: 3,
+				options: 20,
+				data: 21
+			},
+			null,
+			[-1, -1]
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["title", "titleTag", "subtitle", "mobile", "options", "data"];
+	}
+
+	get title() {
+		return this.$$.ctx[0];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get titleTag() {
+		return this.$$.ctx[1];
+	}
+
+	set titleTag(titleTag) {
+		this.$$set({ titleTag });
+		flush();
+	}
+
+	get subtitle() {
+		return this.$$.ctx[2];
+	}
+
+	set subtitle(subtitle) {
+		this.$$set({ subtitle });
+		flush();
+	}
+
+	get mobile() {
+		return this.$$.ctx[3];
+	}
+
+	set mobile(mobile) {
+		this.$$set({ mobile });
+		flush();
+	}
+
+	get options() {
+		return this.$$.ctx[20];
+	}
+
+	set options(options) {
+		this.$$set({ options });
+		flush();
+	}
+
+	get data() {
+		return this.$$.ctx[21];
+	}
+
+	set data(data) {
+		this.$$set({ data });
+		flush();
+	}
+}
+
+export { Carousel as default };
+//# sourceMappingURL=Carousel.js.map