@everymatrix/casino-engagement-suite-challenges-details 1.35.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ec28d374.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["casino-engagement-suite-challenges-details.cjs",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/casino-engagement-suite-challenges-details/casino-engagement-suite-challenges-details.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-engagement-suite-challenges-details/casino-engagement-suite-challenges-details.css

@@ -0,0 +1,270 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap");
+:host {
+  display: block;
+  font-family: inherit;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+button:focus {
+  outline: none;
+}
+
+.ChallengeDetailsPopup {
+  display: flex;
+  height: 100%;
+  background-color: var(--emw--color-background, #1E1638);
+  border-radius: 8px;
+  overflow: hidden;
+  flex-direction: column;
+  position: relative;
+}
+
+.ChallengeActions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 8px 8px;
+}
+.ChallengeActions .ChallengeIconButton {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.ChallengeActions .ChallengePopupName {
+  color: var(--emw--color-gray-100, #BBB9C3);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.ChallengeDetails {
+  padding: 0px 19px 10px;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.ChallengeDetails::-webkit-scrollbar {
+  display: none;
+}
+
+.ChallengeDetailsHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.ChallengeDetailsHeader .ChallengeName {
+  font-family: "Montserrat", sans-serif;
+  font-size: var(--emw--font-size-medium, 18px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: 22px;
+  color: var(--emfe-w-color-white, #FFF);
+  word-break: break-all;
+}
+
+.ChallengeJoinButton.Joined::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--emw--button-border-radius, 4px);
+  padding: 1px;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.ChallengeJoinButton {
+  transition: all 0.5s ease-out;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  color: var(--emw--color-typography, #1E1638);
+  border-radius: 99px;
+  min-width: 88px;
+  height: 32px;
+  font-size: 14px;
+  font-weight: 700;
+  position: relative;
+  font-family: "Montserrat", sans-serif;
+}
+.ChallengeJoinButton.Joined {
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.ChallengeJoinButton.Joined::before {
+  border-radius: 99px;
+}
+
+.Disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: auto;
+}
+
+.ChallengeCountdown {
+  font-weight: var(--emw--font-weight-normal, 400);
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 12px;
+  margin: 12px 0 24px;
+  color: var(--emw--color-gray-150, #BBB9C3);
+}
+
+.ChallengeCountdown.Expired {
+  font-weight: var(--emw--font-weight-normal, 700);
+  color: var(--emfe-w-color-white, #FFF);
+}
+
+.ChallengeCollapseButton {
+  margin-bottom: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--emw--color-primary-variant, #666178);
+  cursor: pointer;
+}
+.ChallengeCollapseButton .Toggle {
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 4px;
+}
+.ChallengeCollapseButton .Closed {
+  background: url("https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg") no-repeat center/contain;
+}
+.ChallengeCollapseButton .Open {
+  background: url("https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg") no-repeat center/contain;
+}
+
+.CollapseDetails {
+  display: none;
+  font-size: var(--emw--font-size-small, 14px);
+  line-height: 17px;
+  font-weight: var(--emw--font-weight-normal, 400);
+}
+.CollapseDetails .ChallengeDescription {
+  color: var(--emfe-w-color-white, #FFF);
+  margin-bottom: 12px;
+}
+.CollapseDetails .TC {
+  margin: 12px 0 16px;
+}
+.CollapseDetails .TC a {
+  color: var(--emw--color-secondary, #59D1FF);
+}
+.CollapseDetails .ChallengeGames {
+  width: 100%;
+  overflow-y: auto;
+  display: flex;
+  gap: 4px;
+}
+.CollapseDetails .ChallengeGames::-webkit-scrollbar {
+  height: 2px;
+  background: none;
+}
+.CollapseDetails .ChallengeGames::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: var(--emw--color-background, #666178);
+}
+.CollapseDetails .ChallengeGames .Game img {
+  width: 96px;
+  height: 50px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.ShowDetails {
+  display: block;
+}
+
+.ChallengeLevels {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
+  color: var(--emw--color-primary, #8F8B9C);
+  font-size: var(--emw--font-size-small, 12px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: 12px;
+}
+.ChallengeLevels .ChallengeLevelCard {
+  border: 1px solid var(--emw--button-border-color, #403956);
+  padding: 16px;
+  border-radius: 8px;
+}
+.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage {
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: 15px;
+  word-break: break-all;
+}
+.ChallengeLevels .InProgress {
+  position: relative;
+  border: none;
+}
+.ChallengeLevels .InProgress .ChallengeLevelTarget,
+.ChallengeLevels .InProgress .CustomRewardMessage {
+  color: var(--emfe-w-color-white, #FFF);
+}
+.ChallengeLevels .InProgress::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+  padding: 1px;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.ChallengeDetailsPopup.Tablet .ChallengeIconButton,
+.ChallengeDetailsPopup.Desktop .ChallengeIconButton {
+  width: 24px;
+  height: 24px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeDetails,
+.ChallengeDetailsPopup.Desktop .ChallengeDetails {
+  padding: 20px 24px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeName,
+.ChallengeDetailsPopup.Desktop .ChallengeName {
+  line-height: 27px;
+  font-size: 22px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeJoinButton,
+.ChallengeDetailsPopup.Desktop .ChallengeJoinButton {
+  min-width: 100px;
+  height: 36px;
+  font-size: 16px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeCountdown,
+.ChallengeDetailsPopup.Tablet .ChallengeLevels,
+.ChallengeDetailsPopup.Desktop .ChallengeCountdown,
+.ChallengeDetailsPopup.Desktop .ChallengeLevels {
+  font-size: var(--emw--font-size-small, 14px);
+  line-height: 14px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeCollapseButton,
+.ChallengeDetailsPopup.Desktop .ChallengeCollapseButton {
+  margin-bottom: 12px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeLevels .CustomRewardMessage,
+.ChallengeDetailsPopup.Desktop .ChallengeLevels .CustomRewardMessage {
+  line-height: 17px;
+}

package/dist/collection/components/casino-engagement-suite-challenges-details/casino-engagement-suite-challenges-details.js

@@ -0,0 +1,319 @@
+import { Component, h, Prop, State, Element, Event, Watch } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import { ChallengeProgressStatus } from '../../models/casino-challenges-details';
+export class CasinoEngagementSuiteChallengesDetails {
+  constructor() {
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+    * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Current game slug
+     */
+    this.gameSlug = '';
+    /**
+    * User's device type
+     */
+    this.device = 'Mobile';
+    this.limitStylingAppends = false;
+    this.timer = '';
+    this.showDetails = false;
+    this.isExpiredChallenge = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+    this.handleCloseClick = () => {
+      this.close.emit();
+      clearInterval(this.interval);
+      this.isExpiredChallenge = false;
+      this.showDetails = false;
+    };
+  }
+  challengePropHandler() {
+    this.updateTimer();
+    this.startCountdown();
+  }
+  componentWillLoad() {
+    this.challengePropHandler();
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  getActionsTemplate() {
+    return (h("header", { class: "ChallengeActions" },
+      h("button", { class: "ChallengeIconButton" },
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })),
+      this.device !== 'Mobile' && h("div", { class: "ChallengePopupName" }, translate('challenges', this.language)),
+      h("button", { class: "ChallengeIconButton", onClick: this.handleCloseClick },
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "close" }))));
+  }
+  getChallengeHeader() {
+    const presentationName = this.challenge.ChallengePresentation.PresentationName;
+    const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
+    return (h("div", { class: "ChallengeDetailsHeader" },
+      h("span", { class: "ChallengeName" }, presentationName),
+      h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+        ? translate('unjoin', this.language)
+        : translate('join', this.language))));
+  }
+  getChallengeCountdown() {
+    const timerMessage = this.isExpiredChallenge ? 'Expired' : this.timer;
+    return (h("div", { class: `ChallengeCountdown ${this.isExpiredChallenge ? 'Expired' : ''}` }, timerMessage));
+  }
+  getChallengeDetails() {
+    const description = this.challenge.ChallengePresentation.Description;
+    const url = this.challenge.ChallengePresentation.Url;
+    const games = this.challenge.Games;
+    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` },
+      description && h("span", { class: "ChallengeDescription" }, description),
+      url && (h("div", { class: "TC" },
+        h("a", { href: url, target: "_blank" }, translate('tc', this.language)))),
+      (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game" },
+        h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
+  }
+  onGameClick(gameSlug) {
+    window.postMessage({ type: 'GameClick', slug: gameSlug });
+  }
+  startCountdown() {
+    this.interval = setInterval(() => {
+      this.updateTimer();
+    }, 1000);
+  }
+  updateTimer() {
+    const expirationTime = new Date(this.challenge.ExpirationTime).getTime();
+    const now = new Date().getTime();
+    const distance = expirationTime - now;
+    if (distance < 1) {
+      clearInterval(this.interval);
+      this.timer = '';
+      this.isExpiredChallenge = true;
+      return;
+    }
+    const { days, hours, minutes, seconds } = {
+      days: String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+      hours: String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+      minutes: String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+      seconds: String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0')
+    };
+    this.timer = days === '00'
+      ? `${hours}h:${minutes}m:${seconds}s`
+      : `${days}d:${hours}h:${minutes}m`;
+  }
+  getLevelTarget(level) {
+    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    if (level.LevelTargetType === 1) {
+      levelTarget += ` ${translate('bet', this.language)}`;
+    }
+    else if (level.LevelTargetType === 2) {
+      levelTarget += ` ${translate('bets', this.language)} X ${level.TargetBetCount}`;
+    }
+    return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
+  }
+  getChallengeLevels() {
+    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${level.ProgressStatus === 1 ? 'InProgress' : ''}` },
+      h("div", { class: "ChallengeLevelHeader" },
+        h("span", null,
+          "Level ",
+          index + 1,
+          ": "),
+        this.getLevelTarget(level)),
+      h("div", { class: "ChallengeRewardMessage" },
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg", alt: "win" }),
+        h("span", null,
+          translate('win', this.language),
+          ": "),
+        h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
+  }
+  getToggleButton() {
+    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails },
+      h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }),
+      h("span", null, translate('details', this.language))));
+  }
+  render() {
+    return h("div", { class: `ChallengeDetailsPopup ${this.device}` },
+      this.getActionsTemplate(),
+      h("div", { class: "ChallengeDetails" },
+        this.getChallengeHeader(),
+        this.getChallengeCountdown(),
+        this.getToggleButton(),
+        this.getChallengeDetails(),
+        this.getChallengeLevels()));
+  }
+  static get is() { return "casino-engagement-suite-challenges-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-engagement-suite-challenges-details.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-engagement-suite-challenges-details.css"]
+  }; }
+  static get properties() { return {
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "challenge": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Challenge",
+        "resolved": "Challenge",
+        "references": {
+          "Challenge": {
+            "location": "import",
+            "path": "../../models/casino-challenges-details"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected challenge"
+      }
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language of the widget"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "gameSlug": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current game slug"
+      },
+      "attribute": "game-slug",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "device": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+        "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User's device type"
+      },
+      "attribute": "device",
+      "reflect": false,
+      "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+    }
+  }; }
+  static get states() { return {
+    "limitStylingAppends": {},
+    "timer": {},
+    "showDetails": {},
+    "isExpiredChallenge": {}
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "challenge",
+      "methodName": "challengePropHandler"
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/casino-challenges-details.js

@@ -0,0 +1,15 @@
+export var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+export var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+  ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+  ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+  ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+  ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));

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

@@ -0,0 +1,20 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+  en: {
+    challenges: 'Challenges',
+    join: 'Join',
+    unjoin: 'Unjoin',
+    details: 'Challenge Details',
+    tc: 'Terms & Conditions',
+    level: 'Level',
+    place: 'Place',
+    bet: 'bet',
+    bets: 'bets',
+    win: 'Win'
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/components/casino-engagement-suite-challenges-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CasinoEngagementSuiteChallengesDetails extends Components.CasinoEngagementSuiteChallengesDetails, HTMLElement {}
+export const CasinoEngagementSuiteChallengesDetails: {
+  prototype: CasinoEngagementSuiteChallengesDetails;
+  new (): CasinoEngagementSuiteChallengesDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;