@everymatrix/casino-challenges-overlay-slider 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const casinoChallengesOverlaySlider = require('./casino-challenges-overlay-slider-bf3e8c30.js');
+require('./index-180bdedd.js');
+
+
+
+exports.CasinoChallengesOverlaySlider = casinoChallengesOverlaySlider.CasinoChallengesOverlaySlider;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-180bdedd.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["casino-challenges-overlay-card_2.cjs",[[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/assets/left_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.16895 13.8353L0.502278 7.16862L7.16895 0.501953" stroke="white" stroke-width="1.00459" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/right_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.501953 13.8353L7.16862 7.16862L0.501953 0.501953" stroke="white" stroke-width="1.00459" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/casino-challenges-overlay-slider/casino-challenges-overlay-slider.js",
+    "components/casino-challenges-overlay-slider/components/casino-challenges-overlay-card.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-challenges-overlay-slider/casino-challenges-overlay-slider.css

@@ -0,0 +1,98 @@
+@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;
+}

package/dist/collection/components/casino-challenges-overlay-slider/casino-challenges-overlay-slider.js

@@ -0,0 +1,450 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { resolveTranslationUrl } from "../../utils/locale.utils";
+import rightArrow from "../../assets/right_arrow.svg";
+import leftArrow from "../../assets/left_arrow.svg";
+export class CasinoChallengesOverlaySlider {
+    constructor() {
+        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: leftArrow, alt: "" })), h("button", { key: '84cc6967ded946264bde8db938c8e5541ace145c', class: "action-button action-button--next", onClick: this.next }, h("img", { key: 'f6e8d44662f3ca55866001d90d41f66c4a5f6f04', src: rightArrow, 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 is() { return "casino-challenges-overlay-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "challenges": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IChallenge[]",
+                    "resolved": "IChallenge[]",
+                    "references": {
+                        "IChallenge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-slider/src/utils/types.ts::IChallenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "initialProgressId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "initial-progress-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "activeTabIndex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-tab-index",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {},
+            "slideWidth": {},
+            "slideHeight": {},
+            "isOneSlide": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "activeChallengeChange",
+                "name": "activeChallengeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "currentIndex",
+                "methodName": "onCurrentIndexChange"
+            }, {
+                "propName": "challenges",
+                "methodName": "onChallengesChange"
+            }, {
+                "propName": "initialProgressId",
+                "methodName": "onInitialProgressIdChange"
+            }];
+    }
+}