@everymatrix/casino-challenges-container 0.0.1 → 0.0.2

package/dist/cjs/{casino-challenges-container-54a20dee.js → casino-challenges-container-aa20cd29.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-cf89b5da.js');
+const index = require('./index-2631ee03.js');
 
 /**
  * @name setClientStyling
@@ -62,7 +62,8 @@ function setStreamStyling(stylingContainer, domain, subscription) {
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
     en: {
-        title: 'Challenges'
+        title: 'Challenges',
+        empty: 'No Challenges'
     },
     ro: {},
     fr: {},
@@ -100,24 +101,53 @@ const titleIconSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
 
 const notificationSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgzOF8zMTApIj4KPHBhdGggZD0iTTcuNTAwNDYgMTIuOTk5OUM4LjQwNTk1IDEyLjk5OTkgOS4xNjM0MSAxMi4zNTQ0IDkuMzM3MzUgMTEuNUg1LjY2MzU3QzUuODM3NiAxMi4zNTQ0IDYuNTk1MDYgMTIuOTk5OSA3LjUwMDQ2IDEyLjk5OTlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfODM4XzMxMCkiLz4KPHBhdGggZD0iTTExLjAwNTggNi45OTkxN0MxMS4wMDM3IDYuOTk5MTcgMTEuMDAxNyA2Ljk5OTYzIDEwLjk5OTcgNi45OTk2M0M5LjA3MDM2IDYuOTk5NjMgNy40OTk5NyA1LjQyOTcgNy40OTk5NyAzLjQ5OTlDNy40OTk5NyAyLjk2OTM5IDcuNjIyIDIuNDY3ODkgNy44MzQ0OCAyLjAxNjk0QzcuNzI0NDQgMi4wMDY1IDcuNjEyOTMgMiA3LjQ5OTk3IDJDNS41NjcxMyAyIDQuMDAwMjIgMy41NjY4MiA0LjAwMDIyIDUuNDk5NzNWNi44OTM2MkM0LjAwMDIyIDcuODgzMDUgMy41NjY3NCA4LjgxNzAxIDIuODA2MjYgOS40NTk5NEMyLjU1Mjc3IDkuNjc2NDUgMi40NDAyNiAxMC4wMjE0IDIuNTMxMjUgMTAuMzU3OUMyLjYzNzI3IDEwLjc0OTQgMy4wMjQyMyAxMC45OTk0IDMuNDMwMjUgMTAuOTk5NEgxMS41NjcyQzExLjk5MzIgMTAuOTk5NCAxMi4zOTQ3IDEwLjcyMzQgMTIuNDgxMSAxMC4zMDU5QzEyLjU0ODEgOS45ODI5NCAxMi40MzMyIDkuNjYwNDMgMTIuMTgyNyA5LjQ0OTk2QzExLjQ1NTcgOC44NDA1NCAxMS4wMzUyIDcuOTQ1MDMgMTEuMDA1OCA2Ljk5OTE3WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzgzOF8zMTApIi8+CjxwYXRoIGQ9Ik0xMy41MDA2IDMuNDk5ODZDMTMuNTAwNiA0Ljg4MDQ3IDEyLjM4MTUgNS45OTk2MyAxMS4wMDA4IDUuOTk5NjNDOS42MjAxNCA1Ljk5OTYzIDguNTAwOTggNC44ODA0NyA4LjUwMDk4IDMuNDk5ODZDOC41MDA5OCAyLjExOTI1IDkuNjIwMTQgMSAxMS4wMDA4IDFDMTIuMzgxNSAxIDEzLjUwMDYgMi4xMTkyNSAxMy41MDA2IDMuNDk5ODZaIiBmaWxsPSIjRDY0MjFFIi8+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MzhfMzEwIiB4MT0iNy41MDA0NiIgeTE9IjExLjUiIHgyPSI3LjUwMDQ2IiB5Mj0iMTIuOTk5OSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRUE5MDE4Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0UwQTg0RSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfODM4XzMxMCIgeDE9IjcuNDk5OTciIHkxPSIyIiB4Mj0iNy40OTk5NyIgeTI9IjEwLjk5OTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0VBOTAxOCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMEE4NEUiLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF84MzhfMzEwIj4KPHJlY3Qgd2lkdGg9IjEzIiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
 
-const casinoChallengesContainerCss = ".challenges {\n  container-type: inline-size;\n  container-name: challenges-container;\n}\n.challenges__header {\n  margin: 0 0 32px;\n  display: flex;\n  justify-content: space-between;\n}\n.challenges__title {\n  margin: 0;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: var(--emw--font-size-x-large, 24px);\n  font-weight: var(--emw--font-weight-bold, 700);\n}\n.challenges__tabs {\n  display: flex;\n  gap: 12px;\n  border-radius: 48px;\n  padding: 6px;\n  color: var(--emw--color-gray-150, #C8D6CE);\n  background-color: var(--emw--color-background-secondary, #272727);\n}\n.challenges__tab {\n  padding: 10px 16px;\n  border-radius: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  cursor: pointer;\n  text-align: center;\n  width: 95px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n.challenges__tab.active {\n  color: var(--emw--color-white, #FFFFFF);\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n}\n.challenges__tab:last-child {\n  width: inherit;\n  padding: 10px 16px;\n}\n@container challenges-container (max-width: 800px) {\n  .challenges__header {\n    margin: 0 0 16px;\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n  .challenges__title {\n    width: 100%;\n    font-size: var(--emw--font-size-large, 20px);\n  }\n  .challenges__title img {\n    height: 32px;\n  }\n  .challenges__tabs {\n    width: 100%;\n    gap: 8px;\n  }\n  .challenges__tab {\n    flex: 1;\n    padding: 5px 0;\n    font-size: var(--emw--font-size-x-small, 12px);\n  }\n  .challenges__tab:last-child {\n    width: inherit;\n    padding: 5px 0;\n  }\n}";
+const casinoChallengesContainerCss = ".challenges {\n  container-type: inline-size;\n  container-name: challenges-container;\n  background-color: var(--emw--color-background, #000);\n  padding: 16px 12px;\n}\n.challenges__header {\n  margin: 0 0 32px;\n  display: flex;\n  justify-content: space-between;\n}\n.challenges__title {\n  margin: 0;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: var(--emw--font-size-x-large, 24px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-white, #ffffff);\n}\n.challenges__tabs {\n  display: flex;\n  gap: 12px;\n  border-radius: 48px;\n  padding: 6px;\n  color: var(--emw--color-gray-150, #c8d6ce);\n  background-color: var(--emw--color-background-secondary, #272727);\n}\n.challenges__tab {\n  padding: 10px 16px;\n  border-radius: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  cursor: pointer;\n  text-align: center;\n  width: 95px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n.challenges__tab.active {\n  color: var(--emw--color-white, #ffffff);\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n}\n.challenges__tab:last-child {\n  width: inherit;\n  padding: 10px 16px;\n}\n.challenges__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 300px;\n  overflow-y: auto;\n}\n.challenges__empty {\n  color: var(--emw--color-white, #ffffff);\n}\n@container challenges-container (max-width: 800px) {\n  .challenges__header {\n    margin: 0 0 16px;\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n  .challenges__title {\n    width: 100%;\n    font-size: var(--emw--font-size-large, 20px);\n  }\n  .challenges__title img {\n    height: 32px;\n  }\n  .challenges__tabs {\n    width: 100%;\n    gap: 8px;\n  }\n  .challenges__tab {\n    flex: 1;\n    padding: 5px 0;\n    font-size: var(--emw--font-size-x-small, 12px);\n  }\n  .challenges__tab:last-child {\n    width: inherit;\n    padding: 5px 0;\n  }\n}";
 const CasinoChallengesContainerStyle0 = casinoChallengesContainerCss;
 
 const CasinoChallengesContainer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        // todo: connect with api
         this.tabs = ['Active', 'Pending', 'Finished', 'Code'];
         this.showNotification = 1;
+        this.checkAttrs = () => {
+            if (!this.endpoint) {
+                this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
+                this.hasError = true;
+                console.error(this.error);
+            }
+            return this.hasError;
+        };
+        this.onLoadMore = () => {
+            this.pageNumber += 1;
+            this.getChallenges().then((res) => {
+                this.challenges = [...this.challenges, ...res.Data];
+                this.total = res.TotalCount;
+            });
+        };
         this.handleTabClick = (index) => () => {
             this.activeTabIndex = index;
+            this.challenges = [];
+            this.pageNumber = 0;
+            this.total = 0;
+            this.loadData();
         };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
+        this.endpoint = '';
+        this.domain = '';
+        this.session = '';
+        this.userId = '';
         this.activeTabIndex = 0;
+        this.error = '';
+        this.hasError = false;
+        this.challenges = [];
+        this.loading = false;
+        this.pageNumber = 0;
+        this.total = 0;
+        this.pageSize = 20;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -134,6 +164,31 @@ const CasinoChallengesContainer = class {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
         }
     }
+    async getChallenges() {
+        if (!this.checkAttrs()) {
+            const path = this.activeTabIndex === 2 ? '/PlayerHistory' : '/GetChallengesInfo';
+            const url = `${this.endpoint}/challenge/${path}`;
+            const body = Object.assign(Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: this.pageNumber, PageSize: this.pageSize }, (this.session && { PlayerSessionId: this.session })), (this.userId && this.activeTabIndex === 2 && { UserId: this.userId }));
+            this.loading = true;
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .finally(() => (this.loading = false));
+        }
+    }
+    loadData() {
+        this.getChallenges().then((res) => {
+            if (res === null || res === void 0 ? void 0 : res.Success) {
+                this.pageNumber = res.PageNumber;
+                this.total = res.TotalCount;
+            }
+        });
+    }
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
@@ -143,6 +198,7 @@ const CasinoChallengesContainer = class {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
+        this.loadData();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
@@ -152,8 +208,14 @@ const CasinoChallengesContainer = class {
             resolveTranslationUrl(this.translationUrl);
         }
     }
+    onTimerExpired(e) {
+        setTimeout(() => {
+            this.challenges = this.challenges.filter((challenge) => challenge.Id !== e.detail);
+        }, 10000);
+    }
     render() {
-        return (index.h("div", { key: 'ef5356a1bc2a1635d75938d6b03e6dc48979b573', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'a1edaaab07df252238186c9e7f0159609b057af3', class: "challenges" }, index.h("div", { key: '096e945c0b7f27b4fbf05886fc3b5816b4e1fe1c', class: "challenges__header" }, index.h("h1", { key: '76e80c1468aba0ea370486c9cd3cc68f70fa0a19', class: "challenges__title" }, index.h("img", { key: '47603b0b6e7f771c91cd06d6338564450022cef7', src: titleIconSvg, alt: "icon" }), translate('title', this.language)), index.h("div", { key: '43495b2ed368dfb187610bc87d53edbe884c1edb', class: "challenges__tabs" }, this.tabs.map((label, index$1) => (index.h("div", { class: `challenges__tab ${index$1 === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index$1) }, label, this.showNotification === index$1 && index.h("img", { src: notificationSvg })))))))));
+        var _a;
+        return (index.h("div", { key: 'af2e5b13351a5b8694258c628f545d6a127e80dc', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '91cdbc6a152a8b8c884842370c5509e7f6752074', class: "challenges" }, index.h("div", { key: 'd480a88d50cea5789eabb8dcc30233aea7d18d0f', class: "challenges__header" }, index.h("h1", { key: '8cd8787debb4f6f9897291f11c131c4ea1ef1d15', class: "challenges__title" }, index.h("img", { key: '1551482df42aaf36ed5cac7b2834bc276cc5cf52', src: titleIconSvg, alt: "icon" }), translate('title', this.language)), this.session && (index.h("div", { key: 'b45e42e56d5abc570b72979490f6e7ff4bf4f1bd', class: "challenges__tabs" }, this.tabs.map((label, index$1) => (index.h("div", { class: `challenges__tab ${index$1 === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index$1) }, label, this.showNotification === index$1 && index.h("img", { src: notificationSvg }))))))), index.h("div", { key: 'd1a2a52ff5d26f17e401a7a3707f4153bbbc6290', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (index.h("div", { key: 'f0ab8469ac8a795b4d25d925bc1065217398e862', class: "empty" }, translate('empty', this.language))), this.activeTabIndex !== 3 && (index.h("casino-challenges-list", { key: '2f7aaf6e940668be6e15e1cfb81f5d2d063361ef', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language }))))));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -164,3 +226,6 @@ const CasinoChallengesContainer = class {
 CasinoChallengesContainer.style = CasinoChallengesContainerStyle0;
 
 exports.CasinoChallengesContainer = CasinoChallengesContainer;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/casino-challenges-container.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cf89b5da.js');
+const index = require('./index-2631ee03.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenges-container.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"activeTabIndex":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card_4.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenge":[16],"tooltipIndex":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-cf89b5da.js → index-2631ee03.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'casino-challenges-container';
-const BUILD = /* casino-challenges-container */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* casino-challenges-container */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-challenges-container.cjs':
+                case 'casino-challenge-card_4.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './casino-challenges-container.cjs.entry.js')); }).then(processMod, consoleError);
+                        './casino-challenge-card_4.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -295,6 +295,12 @@ var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -302,6 +308,22 @@ var parsePropertyValue = (propValue, propType) => {
   }
   return propValue;
 };
+var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -786,6 +808,9 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  {
+    safeCall(instance, "componentDidRender");
+  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
@@ -985,6 +1010,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1012,6 +1038,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1044,8 +1073,10 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+        fireConnectedCallback(hostRef.$lazyInstance$);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
       }
     }
     endConnected();
@@ -1190,7 +1221,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
+exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoChallengesContainer = require('./casino-challenges-container-54a20dee.js');
-require('./index-cf89b5da.js');
+const casinoChallengesContainer = require('./casino-challenges-container-aa20cd29.js');
+require('./index-2631ee03.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cf89b5da.js');
+const index = require('./index-2631ee03.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-container.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"activeTabIndex":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card_4.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenge":[16],"tooltipIndex":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,25 @@
     "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/casino-challenge-card",
+      "tags": [
+        "casino-challenge-card"
+      ]
+    },
+    {
+      "name": "@everymatrix/casino-challenges-list",
+      "tags": [
+        "casino-challenges-list"
+      ]
+    },
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
+    }
+  ],
   "bundles": []
 }

package/dist/collection/components/casino-challenges-container/casino-challenges-container.css

@@ -1,6 +1,8 @@
 .challenges {
   container-type: inline-size;
   container-name: challenges-container;
+  background-color: var(--emw--color-background, #000);
+  padding: 16px 12px;
 }
 .challenges__header {
   margin: 0 0 32px;
@@ -14,13 +16,14 @@
   align-items: center;
   font-size: var(--emw--font-size-x-large, 24px);
   font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-white, #ffffff);
 }
 .challenges__tabs {
   display: flex;
   gap: 12px;
   border-radius: 48px;
   padding: 6px;
-  color: var(--emw--color-gray-150, #C8D6CE);
+  color: var(--emw--color-gray-150, #c8d6ce);
   background-color: var(--emw--color-background-secondary, #272727);
 }
 .challenges__tab {
@@ -37,13 +40,23 @@
   gap: 4px;
 }
 .challenges__tab.active {
-  color: var(--emw--color-white, #FFFFFF);
+  color: var(--emw--color-white, #ffffff);
   background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);
 }
 .challenges__tab:last-child {
   width: inherit;
   padding: 10px 16px;
 }
+.challenges__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  overflow-y: auto;
+}
+.challenges__empty {
+  color: var(--emw--color-white, #ffffff);
+}
 @container challenges-container (max-width: 800px) {
   .challenges__header {
     margin: 0 0 16px;

package/dist/collection/components/casino-challenges-container/casino-challenges-container.js

@@ -3,20 +3,50 @@ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../.
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
 import titleIcon from "../../assets/title-icon.svg";
 import notificationIcon from "../../assets/notification.svg";
+import "../../../../../casino-challenges-list/dist/types/index";
 export class CasinoChallengesContainer {
     constructor() {
-        // todo: connect with api
         this.tabs = ['Active', 'Pending', 'Finished', 'Code'];
         this.showNotification = 1;
+        this.checkAttrs = () => {
+            if (!this.endpoint) {
+                this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
+                this.hasError = true;
+                console.error(this.error);
+            }
+            return this.hasError;
+        };
+        this.onLoadMore = () => {
+            this.pageNumber += 1;
+            this.getChallenges().then((res) => {
+                this.challenges = [...this.challenges, ...res.Data];
+                this.total = res.TotalCount;
+            });
+        };
         this.handleTabClick = (index) => () => {
             this.activeTabIndex = index;
+            this.challenges = [];
+            this.pageNumber = 0;
+            this.total = 0;
+            this.loadData();
         };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
+        this.endpoint = '';
+        this.domain = '';
+        this.session = '';
+        this.userId = '';
         this.activeTabIndex = 0;
+        this.error = '';
+        this.hasError = false;
+        this.challenges = [];
+        this.loading = false;
+        this.pageNumber = 0;
+        this.total = 0;
+        this.pageSize = 20;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -33,6 +63,31 @@ export class CasinoChallengesContainer {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
+    async getChallenges() {
+        if (!this.checkAttrs()) {
+            const path = this.activeTabIndex === 2 ? '/PlayerHistory' : '/GetChallengesInfo';
+            const url = `${this.endpoint}/challenge/${path}`;
+            const body = Object.assign(Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: this.pageNumber, PageSize: this.pageSize }, (this.session && { PlayerSessionId: this.session })), (this.userId && this.activeTabIndex === 2 && { UserId: this.userId }));
+            this.loading = true;
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .finally(() => (this.loading = false));
+        }
+    }
+    loadData() {
+        this.getChallenges().then((res) => {
+            if (res === null || res === void 0 ? void 0 : res.Success) {
+                this.pageNumber = res.PageNumber;
+                this.total = res.TotalCount;
+            }
+        });
+    }
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
@@ -42,6 +97,7 @@ export class CasinoChallengesContainer {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
+        this.loadData();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
@@ -51,8 +107,14 @@ export class CasinoChallengesContainer {
             resolveTranslationUrl(this.translationUrl);
         }
     }
+    onTimerExpired(e) {
+        setTimeout(() => {
+            this.challenges = this.challenges.filter((challenge) => challenge.Id !== e.detail);
+        }, 10000);
+    }
     render() {
-        return (h("div", { key: 'ef5356a1bc2a1635d75938d6b03e6dc48979b573', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'a1edaaab07df252238186c9e7f0159609b057af3', class: "challenges" }, h("div", { key: '096e945c0b7f27b4fbf05886fc3b5816b4e1fe1c', class: "challenges__header" }, h("h1", { key: '76e80c1468aba0ea370486c9cd3cc68f70fa0a19', class: "challenges__title" }, h("img", { key: '47603b0b6e7f771c91cd06d6338564450022cef7', src: titleIcon, alt: "icon" }), translate('title', this.language)), h("div", { key: '43495b2ed368dfb187610bc87d53edbe884c1edb', class: "challenges__tabs" }, this.tabs.map((label, index) => (h("div", { class: `challenges__tab ${index === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon })))))))));
+        var _a;
+        return (h("div", { key: 'af2e5b13351a5b8694258c628f545d6a127e80dc', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '91cdbc6a152a8b8c884842370c5509e7f6752074', class: "challenges" }, h("div", { key: 'd480a88d50cea5789eabb8dcc30233aea7d18d0f', class: "challenges__header" }, h("h1", { key: '8cd8787debb4f6f9897291f11c131c4ea1ef1d15', class: "challenges__title" }, h("img", { key: '1551482df42aaf36ed5cac7b2834bc276cc5cf52', src: titleIcon, alt: "icon" }), translate('title', this.language)), this.session && (h("div", { key: 'b45e42e56d5abc570b72979490f6e7ff4bf4f1bd', class: "challenges__tabs" }, this.tabs.map((label, index) => (h("div", { class: `challenges__tab ${index === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))), h("div", { key: 'd1a2a52ff5d26f17e401a7a3707f4153bbbc6290', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (h("div", { key: 'f0ab8469ac8a795b4d25d925bc1065217398e862', class: "empty" }, translate('empty', this.language))), this.activeTabIndex !== 3 && (h("casino-challenges-list", { key: '2f7aaf6e940668be6e15e1cfb81f5d2d063361ef', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language }))))));
     }
     static get is() { return "casino-challenges-container"; }
     static get encapsulation() { return "shadow"; }
@@ -154,12 +216,91 @@ export class CasinoChallengesContainer {
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client endpoint to fetch data"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "domain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client endpoint to fetch data"
+                },
+                "attribute": "domain",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "session"
+                },
+                "attribute": "session",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "userId"
+                },
+                "attribute": "user-id",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "activeTabIndex": {}
+            "activeTabIndex": {},
+            "error": {},
+            "hasError": {},
+            "challenges": {},
+            "loading": {},
+            "pageNumber": {},
+            "total": {},
+            "pageSize": {}
         };
     }
     static get watchers() {

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

@@ -1,7 +1,8 @@
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
     en: {
-        title: 'Challenges'
+        title: 'Challenges',
+        empty: 'No Challenges'
     },
     ro: {},
     fr: {},

package/dist/collection/utils/types.js

@@ -0,0 +1,40 @@
+export var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+export var EChallengeRecurrenceType;
+(function (EChallengeRecurrenceType) {
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Single"] = 0] = "Single";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Daily"] = 1] = "Daily";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Weekly"] = 2] = "Weekly";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Monthly"] = 3] = "Monthly";
+})(EChallengeRecurrenceType || (EChallengeRecurrenceType = {}));
+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 = {}));
+export var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Setup"] = 0] = "Setup";
+    EChallengeStatus[EChallengeStatus["Active"] = 1] = "Active";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
+})(EChallengeStatus || (EChallengeStatus = {}));
+export var EChallengeTriggerType;
+(function (EChallengeTriggerType) {
+    EChallengeTriggerType[EChallengeTriggerType["GameLaunch"] = 0] = "GameLaunch";
+    EChallengeTriggerType[EChallengeTriggerType["Reward"] = 1] = "Reward";
+    EChallengeTriggerType[EChallengeTriggerType["Manual"] = 2] = "Manual";
+})(EChallengeTriggerType || (EChallengeTriggerType = {}));
+export var EChallengeValidityType;
+(function (EChallengeValidityType) {
+    EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
+    EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
+})(EChallengeValidityType || (EChallengeValidityType = {}));