@everymatrix/casino-challenges-overlay-slider 0.0.1

package/dist/esm/casino-challenges-overlay-slider-2eb80eb5.js

@@ -0,0 +1,409 @@
+import { r as registerInstance, c as createEvent, h } from './index-9e63661c.js';
+
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
+ */
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
+
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
+  }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain] && cacheStyleObject[domain].sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        endsIn: 'Ends In',
+        expired: 'Expired',
+        forfeited: 'Forfeited',
+        finished: 'Finished',
+        suspended: 'Suspended',
+        unavailable: 'Unavailable'
+    },
+    da: {
+        endsIn: 'Ends In',
+        expired: 'Expired',
+        forfeited: 'Forfeited',
+        finished: 'Finished',
+        suspended: 'Suspended',
+        unavailable: 'Unavailable'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && lang in TRANSLATIONS ? lang : DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        if (!TRANSLATIONS[item]) {
+            TRANSLATIONS[item] = {};
+        }
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const rightArrowSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDggMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjUwMTk1MyAxMy44MzUzTDcuMTY4NjIgNy4xNjg2MkwwLjUwMTk1MyAwLjUwMTk1MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjAwNDU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
+
+const leftArrowSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDggMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjE2ODk1IDEzLjgzNTNMMC41MDIyNzggNy4xNjg2Mkw3LjE2ODk1IDAuNTAxOTUzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMDA0NTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
+
+const casinoChallengesOverlaySliderCss = "@import url(\"https://fonts.googleapis.com/css2?family=Teachers:ital,wght@0,400..800;1,400..800&display=swap\"); .one-slide .challenges__slider{justify-content:center;cursor:pointer;transition:none}.slider-container{position:relative}.challenges__slider-wrapper{overflow:hidden;width:100%}.challenges__slider{display:flex;transition:transform 0.25s ease;will-change:transform;touch-action:pan-y;user-select:none;cursor:grab}.challenges__slider.active{cursor:grabbing}.challenges__slider-dots{display:flex;justify-content:center;margin-top:10px}.challenges__slider-dot{width:7px;height:7px;border-radius:50%;background:var(--emw--dot-button-bg, rgba(255, 255, 255, 0.1490196078));margin:4px;cursor:pointer;transition:0.2s}.challenges__slider-dot.active{width:29px;border-radius:8px;background:var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2))}.action-button{position:absolute;top:42%;transform:translateY(-50%);stroke:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));background:var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));backdrop-filter:blur(9.5px);cursor:pointer}.action-button--prev{left:30px}.action-button--next{right:30px}.mobile .challenges__slider-dot{width:5px;height:5px;margin:2px}.mobile .challenges__slider-dot.active{width:18px}.mobile .challenges__slide__image-wrapper{width:240px;height:122px}.mobile .challenges__slide__title{bottom:8px;left:8px;font-size:var(--emw--font-size-small, 14px);max-width:224px}.mobile .challenges__slide__badge{top:8px;left:8px;font-size:var(--emw--font-size-2x-small, 11px)}.mobile .challenges__slide__badge .status{height:17px}.mobile .action-button{display:none}";
+const CasinoChallengesOverlaySliderStyle0 = casinoChallengesOverlaySliderCss;
+
+const CasinoChallengesOverlaySlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.activeChallengeChange = createEvent(this, "activeChallengeChange", 7);
+        this.slideGap = 0;
+        this.isDragging = false;
+        this.startX = 0;
+        this.currentTranslate = 0;
+        this.baseTranslate = 0;
+        this.slideWidthToContainer = 0.57; // 57%
+        this.slideHeightToContainer = 0.3; // 30%
+        this.next = () => {
+            this.currentIndex++;
+            this.setPositionByIndex();
+            const len = this.challenges.length;
+            if (this.currentIndex === len + 1) {
+                setTimeout(() => this.scheduleReset(1), 250);
+            }
+        };
+        this.prev = () => {
+            this.currentIndex--;
+            this.setPositionByIndex();
+            const len = this.challenges.length;
+            if (this.currentIndex === 0) {
+                setTimeout(() => this.scheduleReset(len), 250);
+            }
+        };
+        this.onPointerDown = (e) => {
+            var _a;
+            if (this.isOneSlide) {
+                return;
+            }
+            this.isDragging = true;
+            this.startX = e.clientX;
+            this.baseTranslate = this.getBaseTranslate();
+            (_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.isDragging)
+                return;
+            this.currentTranslate = this.baseTranslate + (e.clientX - this.startX);
+            this.setSliderPosition(this.currentTranslate);
+        };
+        this.onPointerUp = (e) => {
+            var _a;
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            (_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+            const moved = this.currentTranslate - this.getBaseTranslate();
+            const threshold = 50;
+            if (moved < -threshold)
+                this.next();
+            else if (moved > threshold)
+                this.prev();
+            else
+                this.setPositionByIndex();
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.isMobile = false;
+        this.challenges = undefined;
+        this.initialProgressId = '';
+        this.activeTabIndex = '';
+        this.currentIndex = null;
+        this.slideWidth = 0;
+        this.slideHeight = 0;
+        this.isOneSlide = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    onCurrentIndexChange(newValue, oldValue) {
+        if (oldValue !== null && newValue !== oldValue && newValue > 0) {
+            const activeChallenge = this.challenges[newValue - 1];
+            this.activeChallengeChange.emit(activeChallenge === null || activeChallenge === void 0 ? void 0 : activeChallenge.Id);
+        }
+    }
+    onChallengesChange(newValue) {
+        this.isOneSlide = newValue.length === 1;
+    }
+    onInitialProgressIdChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            this.updateCurrentIndex();
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        var _a;
+        this.isOneSlide = ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) === 1;
+        this.resizeObserver = new ResizeObserver(([entry]) => {
+            this.slideWidth = Math.round(entry.contentRect.width * this.slideWidthToContainer);
+            this.slideHeight = Math.round(entry.contentRect.width * this.slideHeightToContainer);
+            if (!this.isOneSlide) {
+                this.setPositionByIndex();
+            }
+        });
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            this.resizeObserver.observe(this.stylingContainer);
+        }
+        this.updateCurrentIndex();
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.resizeObserver && this.resizeObserver.disconnect();
+    }
+    updateCurrentIndex() {
+        if (this.isOneSlide) {
+            this.currentIndex = 0;
+            this.setSliderPosition(0);
+        }
+        else {
+            requestAnimationFrame(() => {
+                var _a;
+                const index = ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.findIndex((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.Id) === this.initialProgressId)) || 0;
+                this.currentIndex = index + 1;
+                this.setPositionByIndex(false);
+            });
+        }
+    }
+    setSliderPosition(value) {
+        if (!this.sliderContainer)
+            return;
+        this.sliderContainer.style.transform = `translateX(${value}px)`;
+    }
+    getCarouselItems() {
+        const items = this.challenges;
+        if (items.length <= 1)
+            return items;
+        return [items[items.length - 1], ...items, items[0]];
+    }
+    scheduleReset(index) {
+        if (!this.sliderContainer)
+            return;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                const el = this.sliderContainer;
+                el.style.transition = 'none';
+                this.currentIndex = index;
+                this.setPositionByIndex(false);
+                requestAnimationFrame(() => {
+                    el.style.transition = '';
+                });
+            });
+        });
+    }
+    setPositionByIndex(withTransition = true) {
+        if (!this.sliderContainer)
+            return;
+        const gap = this.slideGap;
+        const offset = (this.sliderContainer.clientWidth - this.slideWidth) / 2;
+        this.currentTranslate = -(this.slideWidth + gap) * this.currentIndex + offset;
+        if (!withTransition) {
+            this.disableTransition();
+        }
+        this.setSliderPosition(this.currentTranslate);
+    }
+    getBaseTranslate() {
+        var _a, _b;
+        const slide = (_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.querySelector('.challenges__slide');
+        const wrapper = (_b = this.sliderContainer) === null || _b === void 0 ? void 0 : _b.parentElement;
+        if (!slide || !wrapper)
+            return 0;
+        const slideWidth = slide.clientWidth;
+        const gap = this.slideGap;
+        const offset = (wrapper.clientWidth - slideWidth) / 2;
+        return -(slideWidth + gap) * this.currentIndex + offset;
+    }
+    disableTransition() {
+        if (!this.sliderContainer)
+            return;
+        this.sliderContainer.style.transition = 'none';
+        requestAnimationFrame(() => {
+            this.sliderContainer.style.transition = '';
+        });
+    }
+    goToSlide(index) {
+        this.currentIndex = index + 1;
+        this.setPositionByIndex();
+    }
+    getRealIndex() {
+        const len = this.challenges.length;
+        if (this.currentIndex === 0)
+            return len - 1;
+        if (this.currentIndex === len + 1)
+            return 0;
+        return this.currentIndex - 1;
+    }
+    render() {
+        return (h("div", { key: '25e34524b9a1fb6fcd4b164f5f3d58a58173ed09', class: { 'slider-container': true, mobile: this.isMobile, 'one-slide': this.isOneSlide }, ref: (el) => (this.stylingContainer = el) }, h("div", { key: '1f77218efd7201eb0de40405d7128168d5bb2a64', class: "challenges__slider-wrapper", onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp }, h("div", { key: '623e0d69197edea0a4a01a670bc678e2c99af735', class: "challenges__slider", ref: (el) => (this.sliderContainer = el) }, this.getCarouselItems().map((item, index, arr) => (h("casino-challenges-overlay-card", { challenge: item, index: index, arrLength: arr.length, currentIndex: this.currentIndex, slideWidth: this.slideWidth, slideHeight: this.slideHeight }))))), this.challenges.length > 1 && (h("div", { key: 'ffc80e15f608761c6b830dd6f8ed19ebf7a2498e' }, h("button", { key: '0403fb4615605c33ef596c74ae2427b5e823b7d9', class: "action-button action-button--prev", onClick: this.prev }, h("img", { key: 'de3536ec00f15de6240d3c7da032b9584fffbc92', src: leftArrowSvg, alt: "" })), h("button", { key: '84cc6967ded946264bde8db938c8e5541ace145c', class: "action-button action-button--next", onClick: this.next }, h("img", { key: 'f6e8d44662f3ca55866001d90d41f66c4a5f6f04', src: rightArrowSvg, alt: "" })), h("div", { key: '25124a8bb6d0fc72086e69e20b6fc2f41986999e', class: "challenges__slider-dots" }, this.challenges.map((_, i) => (h("span", { class: {
+                'challenges__slider-dot': true,
+                active: i === this.getRealIndex()
+            }, onClick: () => {
+                this.goToSlide(i);
+            } }))))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "currentIndex": ["onCurrentIndexChange"],
+        "challenges": ["onChallengesChange"],
+        "initialProgressId": ["onInitialProgressIdChange"]
+    }; }
+};
+CasinoChallengesOverlaySlider.style = CasinoChallengesOverlaySliderStyle0;
+
+export { CasinoChallengesOverlaySlider as C, translate as t };

package/dist/esm/casino-challenges-overlay-slider.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-9e63661c.js';
+export { s as setNonce } from './index-9e63661c.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["casino-challenges-overlay-card_2",[[1,"casino-challenges-overlay-slider",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isMobile":[516,"is-mobile"],"challenges":[16],"initialProgressId":[1,"initial-progress-id"],"activeTabIndex":[1,"active-tab-index"],"currentIndex":[32],"slideWidth":[32],"slideHeight":[32],"isOneSlide":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"currentIndex":["onCurrentIndexChange"],"challenges":["onChallengesChange"],"initialProgressId":["onInitialProgressIdChange"]}],[0,"casino-challenges-overlay-card",{"challenge":[16],"index":[2],"arrLength":[2,"arr-length"],"currentIndex":[2,"current-index"],"language":[1],"isOptedOut":[4,"is-opted-out"],"slideWidth":[2,"slide-width"],"slideHeight":[2,"slide-height"],"timeLeft":[32]}]]]], options);
+});