@everymatrix/casino-engagement-suite-container 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-e8d404e4.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-bar_2.cjs",[[1,"casino-engagement-suite-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"orientation":[32],"device":[32],"showChallengesList":[32],"challengePercent":[32],"limitStylingAppends":[32],"activeWidget":[32],"challenges":[32],"init":[64]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-bar",{"activeWidget":[1537,"active-widget"],"challengePercent":[1,"challenge-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"orientation":[1],"limitStylingAppends":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "./components/casino-engagement-suite-container/casino-engagement-suite-container.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/casino-engagement-suite-bar",
+      "tags": [
+        "casino-engagement-suite-bar"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/casino-engagement-suite-container/casino-engagement-suite-container.css

@@ -0,0 +1,36 @@
+:host {
+  display: inline-block;
+  font-family: inherit;
+}
+
+.Backdrop {
+  padding: 20px 20px 20px 172px;
+  display: none;
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100vw;
+}
+.Backdrop.Opened {
+  display: block;
+}
+.Backdrop .CasinoEngagementSuiteDialog {
+  height: calc(100dvh - 40px);
+  max-width: 600px;
+}
+
+.CasinoEngagementSuiteContainer.Portrait {
+  width: 100vw;
+}
+.CasinoEngagementSuiteContainer.Portrait .Backdrop {
+  padding: 104px 0 20px;
+}
+.CasinoEngagementSuiteContainer.Portrait .Backdrop .CasinoEngagementSuiteDialog {
+  max-width: initial;
+  padding: 0 4px;
+  margin: 0 auto;
+  height: calc(100dvh - 124px);
+}
+.CasinoEngagementSuiteContainer.Landscape.Mobile .CasinoEngagementSuiteDialog {
+  max-width: 366px;
+}

package/dist/collection/components/casino-engagement-suite-container/casino-engagement-suite-container.js

@@ -0,0 +1,218 @@
+import { Component, Element, h, Listen, Method, State, Prop } from '@stencil/core';
+import '@everymatrix/casino-engagement-suite-bar';
+import '@everymatrix/casino-engagement-suite-challenges-list';
+import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from '../../models/casino-engagement-suite-config';
+import { getDeviceType, getScreenOrientation } from '../../utils/utils';
+export class CasinoEngagementSuiteContainer {
+  constructor() {
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.orientation = 'Landscape';
+    this.device = 'Mobile';
+    this.showChallengesList = false;
+    this.limitStylingAppends = false;
+    this.handleChallengeListClose = () => {
+      this.showChallengesList = false;
+      this.activeWidget = '';
+    };
+    this.orientationChangeHandler = () => {
+      this.orientation = getScreenOrientation();
+    };
+    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);
+      });
+    };
+  }
+  handleEvent(e) {
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeHasExpired': {
+        this.setChallengePercent();
+        break;
+      }
+      case 'BarChallengesClick': {
+        this.showChallengesList = true;
+        this.activeWidget = 'Challenges';
+        break;
+      }
+      case 'UpdateChallengeProgress': {
+        this.updateChallengeProgress(e.data.data);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.orientation = getScreenOrientation();
+    this.device = getDeviceType();
+    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  disconnectedCallback() {
+    window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+  }
+  /**
+   * Called to initialize widget
+   * @param config
+   */
+  async init(config) {
+    this.challenges = config.challenges;
+    this.setChallengePercent();
+  }
+  setChallengePercent() {
+    if (!this.challenges)
+      return;
+    const activeChallenge = this.challenges
+      .find(challenge => challenge.Status === ChallengeProgressStatus.InProgress);
+    if (activeChallenge) {
+      const activeLevel = activeChallenge.LevelProgresses
+        .find(progress => progress.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+      if (activeLevel) {
+        this.challengePercent = `${activeLevel.ProgressPercentage}%`;
+      }
+    }
+    else {
+      this.challengePercent = '—';
+    }
+  }
+  updateChallengeProgress(data) {
+    var _a;
+    const challenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(challenge => challenge.Id === data.ChallengeId);
+    if (challenge) {
+      challenge.LevelProgresses = data.LevelProgresses;
+      this.challenges = [...this.challenges];
+    }
+    this.setChallengePercent();
+  }
+  getChallengesWidgets() {
+    return h("div", { class: this.showChallengesList ? 'Backdrop Opened' : 'Backdrop' },
+      h("casino-engagement-suite-challenges-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onClose: this.handleChallengeListClose, challenges: this.challenges }));
+  }
+  render() {
+    return h("div", { class: `CasinoEngagementSuiteContainer ${this.device} ${this.orientation}` },
+      h("casino-engagement-suite-bar", { orientation: this.orientation, "active-widget": this.activeWidget, "challenge-percent": this.challengePercent }),
+      this.challenges && this.getChallengesWidgets());
+  }
+  static get is() { return "casino-engagement-suite-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-engagement-suite-container.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-engagement-suite-container.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": "''"
+    }
+  }; }
+  static get states() { return {
+    "orientation": {},
+    "device": {},
+    "showChallengesList": {},
+    "challengePercent": {},
+    "limitStylingAppends": {},
+    "activeWidget": {},
+    "challenges": {}
+  }; }
+  static get methods() { return {
+    "init": {
+      "complexType": {
+        "signature": "(config: CasinoEngagementSuiteConfig) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "config"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoEngagementSuiteConfig": {
+            "location": "import",
+            "path": "../../models/casino-engagement-suite-config"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Called to initialize widget",
+        "tags": [{
+            "name": "param",
+            "text": "config"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "message",
+      "method": "handleEvent",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

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

package/dist/collection/models/casino-engagement-suite-config.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/utils.js

@@ -0,0 +1,24 @@
+export function getDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'Mobile';
+  }
+  if (userAgent.includes('ipad')) {
+    return 'Tablet';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'Mobile';
+    }
+    if (width > height && height < 800) {
+      return 'Tablet';
+    }
+  }
+  return 'Desktop';
+}
+export function getScreenOrientation() {
+  const orientation = window.screen.orientation.type;
+  return orientation.includes('portrait') ? 'Portrait' : 'Landscape';
+}

package/dist/components/casino-engagement-suite-bar.js

@@ -0,0 +1,6 @@
+import { C as CasinoEngagementSuiteBar$1, d as defineCustomElement$1 } from './casino-engagement-suite-bar2.js';
+
+const CasinoEngagementSuiteBar = CasinoEngagementSuiteBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteBar, defineCustomElement };

package/dist/components/casino-engagement-suite-bar2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const casinoEngagementSuiteBarCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap\"); :host{display:block}*{box-sizing:border-box}.CasinoEngagementSuiteBar{height:100vh;background-color:var(--emw--color-background, #1E1638);color:var(--emw--color-typography, #FFF)}.CasinoEngagementSuiteBar .EngagementSuiteContainer{display:flex;align-items:center;gap:4px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{background-color:var(--emw--color-primary, #251D3E);border-radius:var(--emw--border-radius-medium, 4px);display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;font-weight:var(--emw--font-weight-semibold, 600);font-size:var(--emw--font-size-x-small, 12px);font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFF)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--border-radius-medium, 4px);padding:1px;background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots,.CasinoEngagementSuiteBar .EngagementSuiteContainer .Rewards{display:flex;flex-direction:column;gap:4px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpot{padding:14px 8px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots .Mega{background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:var(--emw--font-weight-bold, 800)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward{justify-content:space-between;padding:8px;cursor:pointer;border:none}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward.Active::before{background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #2D2545 82.77%)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .RewardIcon{width:24px;height:24px;background-size:100%;background-position:center}.Tile.Leaderboard .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\")}.Tile.Leaderboard.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard-pressed.svg\")}.Tile.Challenges .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/challenge.svg\")}.Tile.Challenges.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/challenge-pressed.svg\")}.Tile.Luckywheel .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel.svg\")}.Tile.Luckywheel.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel-pressed.svg\")}.Tile.Freespins .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/freespins.svg\")}.Tile.Freespins.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/freespins-pressed.svg\")}.Landscape.CasinoEngagementSuiteBar{width:152px;padding-top:16px;box-shadow:0 4px 4px 0 #00000040, 8px 0 10px 0 #0000004D}.Landscape.CasinoEngagementSuiteBar .EngagementSuiteContainer{flex-direction:column}.Landscape.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{width:120px;height:40px}.Portrait.CasinoEngagementSuiteBar{border-radius:0 0 var(--emw--border-radius-medium, 4px) var(--emw--border-radius-medium, 4px);height:auto;padding:10px;box-shadow:0 4px 4px 0 #00000040, 8px 0 10px 0 #0000004D}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer{gap:8px;flex-wrap:wrap}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots,.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Rewards{width:100%;flex-direction:row;gap:8px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{flex:1 1 0px;height:32px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpot{padding:10px 8px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward{padding:4px 8px}";
+
+const CasinoEngagementSuiteBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Orientation of the widget
+     */
+    this.orientation = 'Landscape';
+    this.limitStylingAppends = false;
+    this.handleTileClick = (ev) => {
+      const application = ev.target.getAttribute('data-app');
+      window.postMessage({ type: `Bar${application}Click` });
+      this.activeWidget = application;
+    };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.engagementSuiteBar.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.engagementSuiteBar.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.engagementSuiteBar) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  getChallengeTile() {
+    return this.challengePercent
+      ? (h("button", { class: `Tile Reward Challenges ${this.activeWidget === 'Challenges' ? 'Active' : ''}`, "data-app": "Challenges", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, this.challengePercent)))
+      : '';
+  }
+  render() {
+    /**
+     * These constants are used only to verify the correct rendering of our widget.
+     * In future development, all of this data will be fetched from the backend.
+     */
+    const megaItem = '$ 988,900,000';
+    const majorItem = '$ 77,900,000';
+    const minorItem = '$ 3,900,000';
+    const leaderboardItem = '4 / 120';
+    const luckywheelItem = '5';
+    const freespinsItem = '17';
+    return h("div", { class: `CasinoEngagementSuiteBar ${this.orientation}`, ref: (el) => (this.engagementSuiteBar = el) }, h("div", { class: "EngagementSuiteContainer" }, h("div", { class: "Jackpots" }, h("div", { class: "Tile Jackpot" }, h("span", { class: "Mega" }, megaItem)), h("div", { class: "Tile Jackpot" }, h("span", { class: "Major" }, majorItem)), h("div", { class: "Tile Jackpot" }, h("span", { class: "Minor" }, minorItem))), h("div", { class: "Rewards" }, h("button", { class: `Tile Reward Leaderboard ${this.activeWidget === 'Leaderboard' ? 'Active' : ''}`, "data-app": "Leaderboard", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, leaderboardItem)), h("button", { class: `Tile Reward Luckywheel ${this.activeWidget === 'Luckywheel' ? 'Active' : ''}`, "data-app": "Luckywheel", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, luckywheelItem)), this.getChallengeTile(), h("button", { class: `Tile Reward Freespins ${this.activeWidget === 'Freespins' ? 'Active' : ''}`, "data-app": "Freespins", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, freespinsItem)))));
+  }
+  static get style() { return casinoEngagementSuiteBarCss; }
+}, [1, "casino-engagement-suite-bar", {
+    "activeWidget": [1537, "active-widget"],
+    "challengePercent": [1, "challenge-percent"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "orientation": [1],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteBar);
+      }
+      break;
+  } });
+}
+
+export { CasinoEngagementSuiteBar as C, defineCustomElement as d };

package/dist/components/casino-engagement-suite-container.d.ts

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

package/dist/components/casino-engagement-suite-container.js

@@ -0,0 +1,202 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import '@everymatrix/casino-engagement-suite-challenges-list';
+import { d as defineCustomElement$2 } from './casino-engagement-suite-bar2.js';
+
+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 = {}));
+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 = {}));
+
+function getDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'Mobile';
+  }
+  if (userAgent.includes('ipad')) {
+    return 'Tablet';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'Mobile';
+    }
+    if (width > height && height < 800) {
+      return 'Tablet';
+    }
+  }
+  return 'Desktop';
+}
+function getScreenOrientation() {
+  const orientation = window.screen.orientation.type;
+  return orientation.includes('portrait') ? 'Portrait' : 'Landscape';
+}
+
+const casinoEngagementSuiteContainerCss = ":host{display:inline-block;font-family:inherit}.Backdrop{padding:20px 20px 20px 172px;display:none;position:fixed;inset:0;height:100dvh;width:100vw}.Backdrop.Opened{display:block}.Backdrop .CasinoEngagementSuiteDialog{height:calc(100dvh - 40px);max-width:600px}.CasinoEngagementSuiteContainer.Portrait{width:100vw}.CasinoEngagementSuiteContainer.Portrait .Backdrop{padding:104px 0 20px}.CasinoEngagementSuiteContainer.Portrait .Backdrop .CasinoEngagementSuiteDialog{max-width:initial;padding:0 4px;margin:0 auto;height:calc(100dvh - 124px)}.CasinoEngagementSuiteContainer.Landscape.Mobile .CasinoEngagementSuiteDialog{max-width:366px}";
+
+const CasinoEngagementSuiteContainer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.orientation = 'Landscape';
+    this.device = 'Mobile';
+    this.showChallengesList = false;
+    this.limitStylingAppends = false;
+    this.handleChallengeListClose = () => {
+      this.showChallengesList = false;
+      this.activeWidget = '';
+    };
+    this.orientationChangeHandler = () => {
+      this.orientation = getScreenOrientation();
+    };
+    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);
+      });
+    };
+  }
+  handleEvent(e) {
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeHasExpired': {
+        this.setChallengePercent();
+        break;
+      }
+      case 'BarChallengesClick': {
+        this.showChallengesList = true;
+        this.activeWidget = 'Challenges';
+        break;
+      }
+      case 'UpdateChallengeProgress': {
+        this.updateChallengeProgress(e.data.data);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.orientation = getScreenOrientation();
+    this.device = getDeviceType();
+    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  disconnectedCallback() {
+    window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+  }
+  /**
+   * Called to initialize widget
+   * @param config
+   */
+  async init(config) {
+    this.challenges = config.challenges;
+    this.setChallengePercent();
+  }
+  setChallengePercent() {
+    if (!this.challenges)
+      return;
+    const activeChallenge = this.challenges
+      .find(challenge => challenge.Status === ChallengeProgressStatus.InProgress);
+    if (activeChallenge) {
+      const activeLevel = activeChallenge.LevelProgresses
+        .find(progress => progress.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+      if (activeLevel) {
+        this.challengePercent = `${activeLevel.ProgressPercentage}%`;
+      }
+    }
+    else {
+      this.challengePercent = '—';
+    }
+  }
+  updateChallengeProgress(data) {
+    var _a;
+    const challenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(challenge => challenge.Id === data.ChallengeId);
+    if (challenge) {
+      challenge.LevelProgresses = data.LevelProgresses;
+      this.challenges = [...this.challenges];
+    }
+    this.setChallengePercent();
+  }
+  getChallengesWidgets() {
+    return h("div", { class: this.showChallengesList ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-challenges-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onClose: this.handleChallengeListClose, challenges: this.challenges }));
+  }
+  render() {
+    return h("div", { class: `CasinoEngagementSuiteContainer ${this.device} ${this.orientation}` }, h("casino-engagement-suite-bar", { orientation: this.orientation, "active-widget": this.activeWidget, "challenge-percent": this.challengePercent }), this.challenges && this.getChallengesWidgets());
+  }
+  get host() { return this; }
+  static get style() { return casinoEngagementSuiteContainerCss; }
+}, [1, "casino-engagement-suite-container", {
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "orientation": [32],
+    "device": [32],
+    "showChallengesList": [32],
+    "challengePercent": [32],
+    "limitStylingAppends": [32],
+    "activeWidget": [32],
+    "challenges": [32],
+    "init": [64]
+  }, [[8, "message", "handleEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-container", "casino-engagement-suite-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteContainer$1);
+      }
+      break;
+    case "casino-engagement-suite-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CasinoEngagementSuiteContainer = CasinoEngagementSuiteContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteContainer, defineCustomElement };