@everymatrix/casino-challenges-overlay-slider 0.0.1

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

@@ -0,0 +1,107 @@
+.challenges__slide {
+  align-content: center;
+  flex-shrink: 0;
+  transform: scale(0.8);
+  opacity: 0.5;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+  filter: blur(1px);
+  position: relative;
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+}
+.challenges__slide.active {
+  transform: scale(1);
+  opacity: 1;
+  filter: blur(0);
+}
+.challenges__slide.active .challenges__slide__image-wrapper {
+  border: 3px solid var(--emw--img-bg-color, rgba(255, 255, 255, 0.3019607843));
+  box-shadow: var(--emw--img-box-shadow, rgba(102, 102, 102, 0.3019607843) 0 0 10px 10px);
+  box-sizing: border-box;
+}
+.challenges__slide.grayed .challenges__slide__image-wrapper img {
+  opacity: 0.5;
+}
+.challenges__slide__title {
+  color: white;
+  position: absolute;
+  bottom: 20px;
+  left: 12px;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: 500;
+  margin: 0;
+  max-width: 319px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.challenges__slide__badge {
+  box-sizing: border-box;
+  align-content: center;
+  color: var(--emw--badge-font-color, #f4eff4);
+  font-size: var(--emw--font-size-xs-small, 13px);
+  font-weight: 400;
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  padding: 2px 3px;
+  border: 1px solid var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(4.5px);
+  border-radius: 15px;
+}
+.challenges__slide__badge .status {
+  height: 19px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 15px;
+  border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  padding: 0 8px 0 6px;
+}
+.challenges__slide__badge .status::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+.challenges__slide__badge .timer {
+  font-weight: 700;
+  padding-right: 4px;
+}
+.challenges__slide__badge.unavailable .status::before, .challenges__slide__badge.expired .status::before {
+  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));
+}
+.challenges__slide__badge.completed .status::before {
+  background: var(--emw--background-green-color, #00b541);
+}
+.challenges__slide__badge.forfeited .status::before {
+  background: var(--emw--status-badge-red-bg, #d63d1e);
+}
+.challenges__slide__badge.paused .status::before {
+  background: var(--emw--status-badge-yellow-bg, #ffb801);
+}
+.challenges__slide__badge:has(.timer) {
+  padding-left: 6px;
+}
+.challenges__slide__image-wrapper {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.challenges__slide__image-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.challenges__slide * {
+  pointer-events: none;
+}
+
+@container challenges-drawer (width <= 500px) {
+  .challenges__slide__title {
+    bottom: 12px;
+  }
+}

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

@@ -0,0 +1,260 @@
+import { h, Host } from "@stencil/core";
+import { ChallengeStatusDictionary, EChallengeProgressStatus, EChallengeStatus } from "../../../utils/types";
+import { translate } from "../../../utils/locale.utils";
+import { getTimeLeft } from "../../../utils/utils";
+export class CasinoChallengesOverlaySlider {
+    constructor() {
+        this.getBadgeContent = () => {
+            var _a;
+            if (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused) {
+                return h("span", { class: "status" }, translate('unavailable', this.language));
+            }
+            switch (this.challenge.Status) {
+                case EChallengeProgressStatus.Expired:
+                    return h("span", { class: "status" }, translate('expired', this.language));
+                case EChallengeProgressStatus.Forfeited:
+                    return h("span", { class: "status" }, translate('forfeited', this.language));
+                case EChallengeProgressStatus.Completed:
+                    return h("span", { class: "status" }, translate('finished', this.language));
+                case EChallengeProgressStatus.Paused:
+                    return h("span", { class: "status" }, translate('suspended', this.language));
+                default:
+                    return this.timeLeft ? ([translate('endsIn', this.language), ' - ', h("span", { class: "timer" }, this.timeLeft)]) : (h("span", { class: "status" }, translate('expired', this.language)));
+            }
+        };
+        this.challenge = undefined;
+        this.index = undefined;
+        this.arrLength = undefined;
+        this.currentIndex = undefined;
+        this.language = undefined;
+        this.isOptedOut = false;
+        this.slideWidth = undefined;
+        this.slideHeight = undefined;
+        this.timeLeft = undefined;
+    }
+    connectedCallback() {
+        if (!this.timerId) {
+            this.timerId = setInterval(() => {
+                this.updateTime();
+            }, 1000);
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.timerId);
+    }
+    componentWillLoad() {
+        this.updateTime();
+    }
+    updateTime() {
+        var _a;
+        this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
+        if (!this.timeLeft) {
+            clearInterval(this.timerId);
+            this.challengeExpired.emit(this.challenge.Id);
+        }
+    }
+    isItemActive() {
+        return (this.index === this.currentIndex ||
+            (this.index === 1 && this.currentIndex === this.arrLength - 1) ||
+            (this.index === this.arrLength - 2 && this.currentIndex === 0));
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const isChallengePaused = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused;
+        return (h(Host, { key: '5491e59a4439d23a7cd68d0e28af1a7b5d650925' }, h("div", { class: {
+                challenges__slide: true,
+                active: this.isItemActive(),
+                grayed: [
+                    EChallengeProgressStatus.Expired,
+                    EChallengeProgressStatus.Forfeited,
+                    EChallengeProgressStatus.Completed
+                ].includes((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) ||
+                    isChallengePaused ||
+                    this.isOptedOut
+            }, key: `${(_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Id}-${this.index}` }, h("div", { key: '8c10ad8fc780c314af68443c5c81057d3e88668b', class: "challenges__slide__image-wrapper", style: {
+                width: `${this.slideWidth}px`,
+                height: `${this.slideHeight}px`
+            } }, h("img", { key: '3e4ea68d459c17c38f112d89af7a6fa4cb8f3bb2', src: (_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.BannerUrl, alt: "" })), h("h1", { key: 'e03556b748fda30202b3b80c2c84cf9dc3471168', class: "challenges__slide__title", style: { 'max-width': `${this.slideWidth - 28}px` } }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.PresentationName), h("div", { key: '9e72dc5d0acfe2bfe67f7ef5a1a978d686ed3cc9', class: `challenges__slide__badge ${((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengeStatus) !== EChallengeStatus.Paused
+                ? ChallengeStatusDictionary[this.challenge.Status]
+                : 'unavailable'}` }, this.getBadgeContent()))));
+    }
+    static get is() { return "casino-challenges-overlay-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "challenge": {
+                "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": ""
+                }
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "index",
+                "reflect": false
+            },
+            "arrLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arr-length",
+                "reflect": false
+            },
+            "currentIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current-index",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "isOptedOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-opted-out",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "slideWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "slide-width",
+                "reflect": false
+            },
+            "slideHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "slide-height",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "timeLeft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "challengeExpired",
+                "name": "challengeExpired",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export { CasinoChallengesOverlaySlider } from './casino-challenges-overlay-slider';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/casino-challenges-overlay-slider';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,48 @@
+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'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && lang in TRANSLATIONS ? lang : DEFAULT_LANGUAGE][key];
+};
+export 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];
+        }
+    });
+};
+export 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);
+        }
+    }
+};

package/dist/collection/utils/types.js

@@ -0,0 +1,52 @@
+export var EChallengeRewardType;
+(function (EChallengeRewardType) {
+    EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
+    EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
+    EChallengeRewardType[EChallengeRewardType["BonusProgram"] = 5] = "BonusProgram";
+    EChallengeRewardType[EChallengeRewardType["LoyaltyEngine"] = 6] = "LoyaltyEngine";
+})(EChallengeRewardType || (EChallengeRewardType = {}));
+export var EChallengeProgressLevelStatus;
+(function (EChallengeProgressLevelStatus) {
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Closed"] = 0] = "Closed";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Fillup"] = 2] = "Fillup";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Completed"] = 3] = "Completed";
+})(EChallengeProgressLevelStatus || (EChallengeProgressLevelStatus = {}));
+export var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Draft"] = 0] = "Draft";
+    EChallengeStatus[EChallengeStatus["Enabled"] = 1] = "Enabled";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
+})(EChallengeStatus || (EChallengeStatus = {}));
+export var EChallengeProgressStatus;
+(function (EChallengeProgressStatus) {
+    EChallengeProgressStatus[EChallengeProgressStatus["Started"] = 0] = "Started";
+    EChallengeProgressStatus[EChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressStatus[EChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+    EChallengeProgressStatus[EChallengeProgressStatus["Completed"] = 3] = "Completed";
+    EChallengeProgressStatus[EChallengeProgressStatus["Expired"] = 4] = "Expired";
+    EChallengeProgressStatus[EChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
+    EChallengeProgressStatus[EChallengeProgressStatus["Awaiting"] = 6] = "Awaiting";
+    EChallengeProgressStatus[EChallengeProgressStatus["Paused"] = 7] = "Paused";
+})(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
+export var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+export const ChallengeStatusDictionary = [
+    'started',
+    'inProgress',
+    'pendingLevelReward',
+    'completed',
+    'expired',
+    'forfeited',
+    'awaiting',
+    'paused'
+];

package/dist/collection/utils/utils.js

@@ -0,0 +1,20 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export function getTimeLeft(endTime) {
+    const now = new Date();
+    const end = new Date(endTime);
+    let diff = end.getTime() - now.getTime();
+    if (diff <= 0) {
+        return;
+    }
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    diff -= days * (1000 * 60 * 60 * 24);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= hours * (1000 * 60 * 60);
+    const minutes = Math.floor(diff / (1000 * 60));
+    diff -= minutes * (1000 * 60);
+    const seconds = Math.floor(diff / 1000);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${pad(days)} : ${pad(hours)} : ${pad(minutes)} : ${pad(seconds)}`;
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/esm/casino-challenges-overlay-card_2.entry.js

@@ -0,0 +1,160 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-9e63661c.js';
+import { t as translate } from './casino-challenges-overlay-slider-2eb80eb5.js';
+export { C as casino_challenges_overlay_slider } from './casino-challenges-overlay-slider-2eb80eb5.js';
+
+var EChallengeRewardType;
+(function (EChallengeRewardType) {
+    EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
+    EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
+    EChallengeRewardType[EChallengeRewardType["BonusProgram"] = 5] = "BonusProgram";
+    EChallengeRewardType[EChallengeRewardType["LoyaltyEngine"] = 6] = "LoyaltyEngine";
+})(EChallengeRewardType || (EChallengeRewardType = {}));
+var EChallengeProgressLevelStatus;
+(function (EChallengeProgressLevelStatus) {
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Closed"] = 0] = "Closed";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Fillup"] = 2] = "Fillup";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Completed"] = 3] = "Completed";
+})(EChallengeProgressLevelStatus || (EChallengeProgressLevelStatus = {}));
+var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Draft"] = 0] = "Draft";
+    EChallengeStatus[EChallengeStatus["Enabled"] = 1] = "Enabled";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
+})(EChallengeStatus || (EChallengeStatus = {}));
+var EChallengeProgressStatus;
+(function (EChallengeProgressStatus) {
+    EChallengeProgressStatus[EChallengeProgressStatus["Started"] = 0] = "Started";
+    EChallengeProgressStatus[EChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressStatus[EChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+    EChallengeProgressStatus[EChallengeProgressStatus["Completed"] = 3] = "Completed";
+    EChallengeProgressStatus[EChallengeProgressStatus["Expired"] = 4] = "Expired";
+    EChallengeProgressStatus[EChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
+    EChallengeProgressStatus[EChallengeProgressStatus["Awaiting"] = 6] = "Awaiting";
+    EChallengeProgressStatus[EChallengeProgressStatus["Paused"] = 7] = "Paused";
+})(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
+var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+const ChallengeStatusDictionary = [
+    'started',
+    'inProgress',
+    'pendingLevelReward',
+    'completed',
+    'expired',
+    'forfeited',
+    'awaiting',
+    'paused'
+];
+
+function getTimeLeft(endTime) {
+    const now = new Date();
+    const end = new Date(endTime);
+    let diff = end.getTime() - now.getTime();
+    if (diff <= 0) {
+        return;
+    }
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    diff -= days * (1000 * 60 * 60 * 24);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= hours * (1000 * 60 * 60);
+    const minutes = Math.floor(diff / (1000 * 60));
+    diff -= minutes * (1000 * 60);
+    const seconds = Math.floor(diff / 1000);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${pad(days)} : ${pad(hours)} : ${pad(minutes)} : ${pad(seconds)}`;
+}
+
+const casinoChallengesOverlayCardCss = ".challenges__slide {\n  align-content: center;\n  flex-shrink: 0;\n  transform: scale(0.8);\n  opacity: 0.5;\n  transition: transform 0.25s ease, opacity 0.25s ease;\n  filter: blur(1px);\n  position: relative;\n  font-family: var(--emw--font-family-primary, \"Teachers\"), sans-serif;\n}\n.challenges__slide.active {\n  transform: scale(1);\n  opacity: 1;\n  filter: blur(0);\n}\n.challenges__slide.active .challenges__slide__image-wrapper {\n  border: 3px solid var(--emw--img-bg-color, rgba(255, 255, 255, 0.3019607843));\n  box-shadow: var(--emw--img-box-shadow, rgba(102, 102, 102, 0.3019607843) 0 0 10px 10px);\n  box-sizing: border-box;\n}\n.challenges__slide.grayed .challenges__slide__image-wrapper img {\n  opacity: 0.5;\n}\n.challenges__slide__title {\n  color: white;\n  position: absolute;\n  bottom: 20px;\n  left: 12px;\n  font-size: var(--emw--font-size-medium, 16px);\n  font-weight: 500;\n  margin: 0;\n  max-width: 319px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.challenges__slide__badge {\n  box-sizing: border-box;\n  align-content: center;\n  color: var(--emw--badge-font-color, #f4eff4);\n  font-size: var(--emw--font-size-xs-small, 13px);\n  font-weight: 400;\n  position: absolute;\n  top: 10px;\n  left: 12px;\n  padding: 2px 3px;\n  border: 1px solid var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));\n  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n  backdrop-filter: blur(4.5px);\n  border-radius: 15px;\n}\n.challenges__slide__badge .status {\n  height: 19px;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 15px;\n  border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));\n  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));\n  padding: 0 8px 0 6px;\n}\n.challenges__slide__badge .status::before {\n  content: \"\";\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n  margin-right: 5px;\n  flex-shrink: 0;\n}\n.challenges__slide__badge .timer {\n  font-weight: 700;\n  padding-right: 4px;\n}\n.challenges__slide__badge.unavailable .status::before, .challenges__slide__badge.expired .status::before {\n  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));\n}\n.challenges__slide__badge.completed .status::before {\n  background: var(--emw--background-green-color, #00b541);\n}\n.challenges__slide__badge.forfeited .status::before {\n  background: var(--emw--status-badge-red-bg, #d63d1e);\n}\n.challenges__slide__badge.paused .status::before {\n  background: var(--emw--status-badge-yellow-bg, #ffb801);\n}\n.challenges__slide__badge:has(.timer) {\n  padding-left: 6px;\n}\n.challenges__slide__image-wrapper {\n  position: relative;\n  border-radius: 16px;\n  overflow: hidden;\n}\n.challenges__slide__image-wrapper img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.challenges__slide * {\n  pointer-events: none;\n}\n\n@container challenges-drawer (width <= 500px) {\n  .challenges__slide__title {\n    bottom: 12px;\n  }\n}";
+const CasinoChallengesOverlayCardStyle0 = casinoChallengesOverlayCardCss;
+
+const CasinoChallengesOverlaySlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.challengeExpired = createEvent(this, "challengeExpired", 7);
+        this.getBadgeContent = () => {
+            var _a;
+            if (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused) {
+                return h("span", { class: "status" }, translate('unavailable', this.language));
+            }
+            switch (this.challenge.Status) {
+                case EChallengeProgressStatus.Expired:
+                    return h("span", { class: "status" }, translate('expired', this.language));
+                case EChallengeProgressStatus.Forfeited:
+                    return h("span", { class: "status" }, translate('forfeited', this.language));
+                case EChallengeProgressStatus.Completed:
+                    return h("span", { class: "status" }, translate('finished', this.language));
+                case EChallengeProgressStatus.Paused:
+                    return h("span", { class: "status" }, translate('suspended', this.language));
+                default:
+                    return this.timeLeft ? ([translate('endsIn', this.language), ' - ', h("span", { class: "timer" }, this.timeLeft)]) : (h("span", { class: "status" }, translate('expired', this.language)));
+            }
+        };
+        this.challenge = undefined;
+        this.index = undefined;
+        this.arrLength = undefined;
+        this.currentIndex = undefined;
+        this.language = undefined;
+        this.isOptedOut = false;
+        this.slideWidth = undefined;
+        this.slideHeight = undefined;
+        this.timeLeft = undefined;
+    }
+    connectedCallback() {
+        if (!this.timerId) {
+            this.timerId = setInterval(() => {
+                this.updateTime();
+            }, 1000);
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.timerId);
+    }
+    componentWillLoad() {
+        this.updateTime();
+    }
+    updateTime() {
+        var _a;
+        this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
+        if (!this.timeLeft) {
+            clearInterval(this.timerId);
+            this.challengeExpired.emit(this.challenge.Id);
+        }
+    }
+    isItemActive() {
+        return (this.index === this.currentIndex ||
+            (this.index === 1 && this.currentIndex === this.arrLength - 1) ||
+            (this.index === this.arrLength - 2 && this.currentIndex === 0));
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const isChallengePaused = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused;
+        return (h(Host, { key: '5491e59a4439d23a7cd68d0e28af1a7b5d650925' }, h("div", { class: {
+                challenges__slide: true,
+                active: this.isItemActive(),
+                grayed: [
+                    EChallengeProgressStatus.Expired,
+                    EChallengeProgressStatus.Forfeited,
+                    EChallengeProgressStatus.Completed
+                ].includes((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) ||
+                    isChallengePaused ||
+                    this.isOptedOut
+            }, key: `${(_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Id}-${this.index}` }, h("div", { key: '8c10ad8fc780c314af68443c5c81057d3e88668b', class: "challenges__slide__image-wrapper", style: {
+                width: `${this.slideWidth}px`,
+                height: `${this.slideHeight}px`
+            } }, h("img", { key: '3e4ea68d459c17c38f112d89af7a6fa4cb8f3bb2', src: (_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.BannerUrl, alt: "" })), h("h1", { key: 'e03556b748fda30202b3b80c2c84cf9dc3471168', class: "challenges__slide__title", style: { 'max-width': `${this.slideWidth - 28}px` } }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.PresentationName), h("div", { key: '9e72dc5d0acfe2bfe67f7ef5a1a978d686ed3cc9', class: `challenges__slide__badge ${((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengeStatus) !== EChallengeStatus.Paused
+                ? ChallengeStatusDictionary[this.challenge.Status]
+                : 'unavailable'}` }, this.getBadgeContent()))));
+    }
+};
+CasinoChallengesOverlaySlider.style = CasinoChallengesOverlayCardStyle0;
+
+export { CasinoChallengesOverlaySlider as casino_challenges_overlay_card };