@everymatrix/casino-game-thumb-view 1.13.5 → 1.15.0

package/dist/components/casino-game-thumbnail-overlay2.js

@@ -10,13 +10,14 @@ const CasinoGameThumbnailOverlay = /*@__PURE__*/ proxyCustomElement(class extend
     this.__registerHost();
     this.playClicked = createEvent(this, "playCasinoGame", 7);
     /**
-     * integratedGameFrameMobile
+     * Widget Setting, show game in a frame when user clicked 'start', default: false
      */
-    this.integratedGameFrameMobile = false;
+    this.integratedGameframeMobile = false;
     /**
-     * Open game a a frame,  gamepagemodalurl value should be set
+     * Widget Setting, show game in a frame when user clicked 'start', default: false
+     * Open game in a frame,  gamepageModalurl value should be set
      */
-    this.integratedGameFrameDesktop = false;
+    this.integratedGameframeDesktop = false;
     /**
      * Language
      */
@@ -29,7 +30,7 @@ const CasinoGameThumbnailOverlay = /*@__PURE__*/ proxyCustomElement(class extend
       gameId: this.gameId,
       isMobile: isMobile(this.userAgent),
     };
-    let isFrameMode = this.integratedGameFrameMobile || this.integratedGameFrameDesktop;
+    let isFrameMode = this.integratedGameframeMobile || this.integratedGameframeDesktop;
     window.postMessage({
       type: isFrameMode ? 'OpenGameFrame' : 'ShowGameModal',
       eventData: isFrameMode
@@ -41,9 +42,9 @@ const CasinoGameThumbnailOverlay = /*@__PURE__*/ proxyCustomElement(class extend
   }
   static get style() { return casinoGameThumbnailOverlayCss; }
 }, [4, "casino-game-thumbnail-overlay", {
-    "integratedGameFrameMobile": [4, "integrated-game-frame-mobile"],
-    "gamepageModalUrl": [1, "gamepage-modal-url"],
-    "integratedGameFrameDesktop": [4, "integrated-game-frame-desktop"],
+    "gamepageModalurl": [1, "gamepage-modalurl"],
+    "integratedGameframeMobile": [4, "integrated-gameframe-mobile"],
+    "integratedGameframeDesktop": [4, "integrated-gameframe-desktop"],
     "language": [1],
     "gameName": [1, "game-name"],
     "gameVendor": [1, "game-vendor"],

package/dist/components/casino-normal-game-thumbnail.js

@@ -1,4 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './casino-game-thumbnail-betlimit2.js';
+import { d as defineCustomElement$2 } from './casino-game-thumbnail-extrainfo2.js';
 
 const casinoNormalGameThumbnailCss = ":host{display:block}";
 
@@ -7,22 +9,39 @@ const CasinoNormalGameThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class exten
     super();
     this.__registerHost();
   }
+  async onGameLoaded(gameInfo) {
+    var _a;
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(gameInfo);
+  }
   render() {
-    return h(Host, null);
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language })));
   }
   static get style() { return casinoNormalGameThumbnailCss; }
-}, [0, "casino-normal-game-thumbnail"]);
+}, [0, "casino-normal-game-thumbnail", {
+    "language": [1],
+    "onGameLoaded": [64]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["casino-normal-game-thumbnail"];
+  const components = ["casino-normal-game-thumbnail", "casino-game-thumbnail-betlimit", "casino-game-thumbnail-extrainfo"];
   components.forEach(tagName => { switch (tagName) {
     case "casino-normal-game-thumbnail":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CasinoNormalGameThumbnail$1);
       }
       break;
+    case "casino-game-thumbnail-betlimit":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "casino-game-thumbnail-extrainfo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 defineCustomElement$1();

package/dist/esm/casino-extrainfo-roulette.entry.js

@@ -14,7 +14,7 @@ const CasinoExtrainfoRoulette = class {
   async onGameLoaded(gameInfo) {
     var _a;
     this.gameInfo = Object.assign({}, gameInfo);
-    this.gameDetails = Object.assign({}, this.gameInfo.details);
+    this.gameDetails = this.gameInfo.details ? Object.assign({}, this.gameInfo.details) : null;
     (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(gameInfo);
   }
   async onGameDetailUpdated(details) {
@@ -26,13 +26,14 @@ const CasinoExtrainfoRoulette = class {
     return ROULETTE_COLOR_MAP[value];
   }
   render() {
-    var _a, _b, _c, _d, _e;
-    const isDouble = ((_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.category.toLowerCase()) ===
-      WIDGETTYPE_GAMECATEGORY.doubleballroulette;
+    var _a, _b, _c, _d;
+    const isDouble = this.gameDetails ?
+      this.gameDetails.category.toLowerCase() ===
+        WIDGETTYPE_GAMECATEGORY.doubleballroulette : false;
     let rouletteNumbers = (isDouble
-      ? (_b = this.gameDetails) === null || _b === void 0 ? void 0 : _b.currentDoubleBallRouletteNumbers
-      : (_c = this.gameDetails) === null || _c === void 0 ? void 0 : _c.currentRouletteNumbers) || [];
-    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language }, h("div", { slot: "category-details", class: `LiveIcons ${((_d = this.gameDetails) === null || _d === void 0 ? void 0 : _d.isOpen) ? 'GameBackdrop' : ''}`, part: `LiveIcons ${((_e = this.gameDetails) === null || _e === void 0 ? void 0 : _e.isOpen) ? 'GameBackdrop' : ''}` }, rouletteNumbers.slice(0, 5).map((rNum, idx) => isDouble === true ? (h("div", { class: "Double", part: "Double" }, h("span", { id: `s${idx}0`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[0])}` }, ' ', rNum[0]), h("span", { id: `s${idx}1`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[1])}` }, ' ', rNum[1]))) : (h("span", { id: `s${idx}`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum)}` }, ' ', rNum)))))));
+      ? (_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.currentDoubleBallRouletteNumbers
+      : (_b = this.gameDetails) === null || _b === void 0 ? void 0 : _b.currentRouletteNumbers) || [];
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language }, h("div", { slot: "category-details", class: `LiveIcons ${((_c = this.gameDetails) === null || _c === void 0 ? void 0 : _c.isOpen) ? 'GameBackdrop' : ''}`, part: `LiveIcons ${((_d = this.gameDetails) === null || _d === void 0 ? void 0 : _d.isOpen) ? 'GameBackdrop' : ''}` }, rouletteNumbers.slice(0, 5).map((rNum, idx) => isDouble === true ? (h("div", { class: "Double", part: "Double" }, h("span", { id: `s${idx}0`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[0])}` }, ' ', rNum[0]), h("span", { id: `s${idx}1`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[1])}` }, ' ', rNum[1]))) : (h("span", { id: `s${idx}`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum)}` }, ' ', rNum)))))));
   }
 };
 CasinoExtrainfoRoulette.style = casinoExtrainfoRouletteCss;

package/dist/esm/casino-game-thumb-view.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-game-thumbnail-betlimit_2",[[4,"casino-game-thumbnail-extrainfo",{"language":[1],"betLimit":[32],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}],[0,"casino-game-thumbnail-betlimit",{"betLimit":[16],"numberOfPlayers":[2,"number-of-players"]}]]],["casino-extrainfo-baccarat",[[0,"casino-extrainfo-baccarat",{"language":[1],"showRoundBoard":[4,"show-round-board"],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64],"onBaccaratResultChanged":[64]}]]],["casino-extrainfo-blackjack",[[0,"casino-extrainfo-blackjack",{"language":[1],"gameInfo":[32],"gameDetails":[32],"seatsStatus":[32],"isTableFull":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-extrainfo-roulette",[[0,"casino-extrainfo-roulette",{"language":[1],"gameInfo":[32],"gameDetails":[32],"showLiveClass":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-normal-game-thumbnail",[[0,"casino-normal-game-thumbnail"]]],["casino-game-thumb-view_2",[[1,"casino-game-thumb-view",{"language":[1],"endpoint":[1],"userId":[8,"user-id"],"showGameName":[4,"show-game-name"],"session":[1],"showFavoredCategory":[4,"show-favored-category"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"integratedGameFrameMobile":[4,"integrated-game-frame-mobile"],"gamepageModalUrl":[1,"gamepage-modal-url"],"integratedGameFrameDesktop":[4,"integrated-game-frame-desktop"],"loadDetails":[4,"load-details"],"showRoundBoard":[4,"show-round-board"],"visibilityConnect":[1,"visibility-connect"],"connectLive":[1,"connect-live"],"gameCategory":[1,"game-category"],"livelobbyEndpoint":[1,"livelobby-endpoint"],"gameId":[8,"game-id"],"gameName":[1,"game-name"],"subVendor":[1,"sub-vendor"],"gameVendor":[1,"game-vendor"],"hasFunMode":[4,"has-fun-mode"],"hasAnonymousFunMode":[4,"has-anonymous-fun-mode"],"platform":[1],"thumbnail":[1],"isFavorite":[4,"is-favorite"],"isNew":[4,"is-new"],"cellSize":[1,"cell-size"],"gameTag":[1,"game-tag"],"type":[1],"gameInfo":[32],"isTableFull":[32],"hover":[32]},[[1,"mouseenter","handleMouseOver"],[1,"mouseleave","handleMouseOver"],[4,"gameFavorited","gameFavoritedHandler"],[0,"gameDetailChange","gameDetailChangeHandler"]]],[4,"casino-game-thumbnail-overlay",{"integratedGameFrameMobile":[4,"integrated-game-frame-mobile"],"gamepageModalUrl":[1,"gamepage-modal-url"],"integratedGameFrameDesktop":[4,"integrated-game-frame-desktop"],"language":[1],"gameName":[1,"game-name"],"gameVendor":[1,"game-vendor"],"gameId":[8,"game-id"],"hasFunMode":[4,"has-fun-mode"]}]]]], options);
+  return bootstrapLazy([["casino-game-thumbnail-betlimit_2",[[4,"casino-game-thumbnail-extrainfo",{"language":[1],"betLimit":[32],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}],[0,"casino-game-thumbnail-betlimit",{"betLimit":[16],"numberOfPlayers":[2,"number-of-players"]}]]],["casino-extrainfo-baccarat",[[0,"casino-extrainfo-baccarat",{"language":[1],"showRoundBoard":[4,"show-round-board"],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64],"onBaccaratResultChanged":[64]}]]],["casino-extrainfo-blackjack",[[0,"casino-extrainfo-blackjack",{"language":[1],"gameInfo":[32],"gameDetails":[32],"seatsStatus":[32],"isTableFull":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-extrainfo-roulette",[[0,"casino-extrainfo-roulette",{"language":[1],"gameInfo":[32],"gameDetails":[32],"showLiveClass":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-normal-game-thumbnail",[[0,"casino-normal-game-thumbnail",{"language":[1],"onGameLoaded":[64]}]]],["casino-game-thumb-view_2",[[1,"casino-game-thumb-view",{"language":[1],"endpoint":[1],"userId":[8,"user-id"],"showGameName":[4,"show-game-name"],"session":[1],"showFavoredCategory":[4,"show-favored-category"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"loadDetails":[4,"load-details"],"showRoundBoard":[4,"show-round-board"],"visibilityConnect":[1,"visibility-connect"],"connectLive":[1,"connect-live"],"gameCategory":[1,"game-category"],"livelobbyEndpoint":[1,"livelobby-endpoint"],"gameId":[8,"game-id"],"gameName":[1,"game-name"],"subVendor":[1,"sub-vendor"],"gameVendor":[1,"game-vendor"],"hasFunMode":[4,"has-fun-mode"],"hasAnonymousFunMode":[4,"has-anonymous-fun-mode"],"platform":[1],"thumbnail":[1],"isFavorite":[4,"is-favorite"],"isNew":[4,"is-new"],"cellSize":[1,"cell-size"],"gameTag":[1,"game-tag"],"type":[1],"gameInfo":[32],"isTableFull":[32],"hover":[32]},[[1,"mouseenter","handleMouseOver"],[1,"mouseleave","handleMouseOver"],[4,"gameFavorited","gameFavoritedHandler"],[0,"gameDetailChange","gameDetailChangeHandler"]]],[4,"casino-game-thumbnail-overlay",{"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"language":[1],"gameName":[1,"game-name"],"gameVendor":[1,"game-vendor"],"gameId":[8,"game-id"],"hasFunMode":[4,"has-fun-mode"]}]]]], options);
 });

package/dist/esm/casino-game-thumb-view_2.entry.js

@@ -1117,12 +1117,12 @@ const CasinoGameThumbView = class {
     /**
      * Widget Setting, show game in a frame when user clicked 'start'
      */
-    this.integratedGameFrameMobile = false;
+    this.integratedGameframeMobile = false;
     /**
      * Widget Setting, show game in a frame when user clicked 'start', Open game aframe,
-     * gamepageModalUrl value should be set
+     * gamepageModalurl value should be set
      */
-    this.integratedGameFrameDesktop = false;
+    this.integratedGameframeDesktop = false;
     /**
      * Widget Setting, Load game details when set it as true, default value: false
      * When loadDetails is true and type=='live-casino-tables',
@@ -1141,7 +1141,6 @@ const CasinoGameThumbView = class {
      * Game Property, Game lunch platform
      */
     this.platform = 'PC';
-    this.gameInfo = {};
     this.thumbnailLoaded = false;
     this.containerClassWhenDetailChange = '';
     this.isUserLoggedIn = false;
@@ -1169,7 +1168,9 @@ const CasinoGameThumbView = class {
       });
     };
     this.getGameCategoryType = () => {
-      if (this.isLiveCasino && this.gameCategory) {
+      if (this.isLiveCasino &&
+        this.gameCategory &&
+        this.getWidgetTypeByGameCategory(this.gameCategory)) {
         return `casino-extrainfo-${this.getWidgetTypeByGameCategory(this.gameCategory).toLowerCase()}`;
       }
       return `casino-normal-game-thumbnail`;
@@ -1217,6 +1218,7 @@ const CasinoGameThumbView = class {
     let message = JSON.parse(e.data);
     if (message.needReconnect && this.liveLobbyConnection) {
       this.liveLobbyConnection.close();
+      this.liveLobbyConnection = null;
       this.connectGameToLiveLobby();
       return;
     }
@@ -1261,10 +1263,12 @@ const CasinoGameThumbView = class {
     window.postMessage({ messageType: MessageType, value: e.data });
   }
   messageHandler(e) {
-    if (e.data.type === `AddFavoriteThumbnail_${this.gameId}` && !this.showFavoredCategory) {
+    if (e.data.type === `AddFavoriteThumbnail_${this.gameId}` &&
+      !this.showFavoredCategory) {
       this.gameInfo.isFavorite = true;
     }
-    if (e.data.type === `RemoveFavoriteThumbnail_${this.gameId}` && !this.showFavoredCategory) {
+    if (e.data.type === `RemoveFavoriteThumbnail_${this.gameId}` &&
+      !this.showFavoredCategory) {
       this.gameInfo.isFavorite = false;
     }
     if (e.data.type === 'UserSessionID') {
@@ -1305,14 +1309,10 @@ const CasinoGameThumbView = class {
       this.resetLiveProperties();
     }
     this.gameInfo = Object.assign({}, this.gameInfo);
-    setTimeout(() => {
-      var _a;
-      (_a = this.extraInfoRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(this.gameInfo);
-      window.postMessage({
-        type: 'casinoGameLoaded',
-        gameInfo: this.gameInfo,
-      });
-    }, 200);
+    this.triggerExtraInfoLoad();
+    if (this.isLiveCasino && this.connectLive === 'connect') {
+      this.connectGameToLiveLobby();
+    }
   }
   /**
    * Parse game info by game info api response
@@ -1374,7 +1374,8 @@ const CasinoGameThumbView = class {
     if (this.visibilityConnect === 'disconnect') {
       this.disconnectGameFromLiveLobby();
     }
-    else if (this.visibilityConnect === 'connect' && this.connectLive === 'connect') {
+    else if (this.visibilityConnect === 'connect' &&
+      this.connectLive === 'connect') {
       this.connectGameToLiveLobby();
     }
   }
@@ -1463,6 +1464,18 @@ const CasinoGameThumbView = class {
       liveCasinoCategory: this.gameCategory || '',
     };
   }
+  triggerExtraInfoLoad() {
+    var _a, _b;
+    //Init this.extraInfoRef, prepare for data loader, this.gameInfo did not inited might
+    this.extraInfoRef =
+      this.extraInfoRef ||
+        ((_a = this.extraInfoSlotRef) === null || _a === void 0 ? void 0 : _a.querySelector(this.getGameCategoryType()));
+    (_b = this.extraInfoRef) === null || _b === void 0 ? void 0 : _b.onGameLoaded(this.gameInfo);
+    window.postMessage({
+      type: 'casinoGameLoaded',
+      gameInfo: this.gameInfo,
+    });
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -1472,13 +1485,13 @@ const CasinoGameThumbView = class {
         this.setClientStylingURL();
       this.limitStylingAppends = true;
     }
-    // end custom styling area
+    // end custom styling area 500)
+    if (this.gameInfo) {
+      this.triggerExtraInfoLoad();
+    }
   }
   componentDidLoad() {
-    var _a;
-    //Init this.extraInfoRef, prepare for data loader, this.gameInfo did not inited might
-    this.extraInfoRef = (_a = this.extraInfoSlotRef) === null || _a === void 0 ? void 0 : _a.querySelector(this.getGameCategoryType());
-    window.addEventListener("message", this.messageHandler);
+    window.addEventListener('message', this.messageHandler);
   }
   componentWillLoad() {
     this.isLiveCasino = this.type == GAME_TYPE.LIVE_CASINO;
@@ -1497,7 +1510,6 @@ const CasinoGameThumbView = class {
         this.loadDetails &&
         this.gameId) {
         this.loadGameDetailInfo();
-        return;
       }
       return;
     }
@@ -1510,22 +1522,23 @@ const CasinoGameThumbView = class {
     if (this.liveLobbyConnection) {
       this.liveLobbyConnection.removeEventListener('message', this.gameDetailChangeHandler);
     }
-    window.removeEventListener("message", this.messageHandler);
+    window.removeEventListener('message', this.messageHandler);
   }
   // end custom styling area
   getWidgetTypeByGameCategory(gameCategory) {
     return WIDGETTYPE_GAMECATEGORY[gameCategory.toLowerCase()];
   }
   getGameOverlayProps() {
+    var _a, _b;
     return {
       gameName: this.gameInfo.name,
       gameId: this.gameInfo.gameId,
-      gameVendor: this.gameVendor || this.gameInfo.vendor.name,
+      gameVendor: this.gameVendor || ((_b = (_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.vendor) === null || _b === void 0 ? void 0 : _b.name),
       hasFunMode: this.gameInfo.hasFunMode,
       language: this.language,
-      integratedGameFrameMobile: this.integratedGameFrameMobile,
-      integratedGameFrameDesktop: this.integratedGameFrameDesktop,
-      gamepageModalUrl: this.gamepageModalUrl,
+      integratedGameframeMobile: this.integratedGameframeMobile,
+      integratedGameframeDesktop: this.integratedGameframeDesktop,
+      gamepageModalurl: this.gamepageModalurl,
     };
   }
   render() {
@@ -1558,13 +1571,14 @@ const CasinoGameThumbnailOverlay = class {
     registerInstance(this, hostRef);
     this.playClicked = createEvent(this, "playCasinoGame", 7);
     /**
-     * integratedGameFrameMobile
+     * Widget Setting, show game in a frame when user clicked 'start', default: false
      */
-    this.integratedGameFrameMobile = false;
+    this.integratedGameframeMobile = false;
     /**
-     * Open game a a frame,  gamepagemodalurl value should be set
+     * Widget Setting, show game in a frame when user clicked 'start', default: false
+     * Open game in a frame,  gamepageModalurl value should be set
      */
-    this.integratedGameFrameDesktop = false;
+    this.integratedGameframeDesktop = false;
     /**
      * Language
      */
@@ -1577,7 +1591,7 @@ const CasinoGameThumbnailOverlay = class {
       gameId: this.gameId,
       isMobile: isMobile(this.userAgent),
     };
-    let isFrameMode = this.integratedGameFrameMobile || this.integratedGameFrameDesktop;
+    let isFrameMode = this.integratedGameframeMobile || this.integratedGameframeDesktop;
     window.postMessage({
       type: isFrameMode ? 'OpenGameFrame' : 'ShowGameModal',
       eventData: isFrameMode

package/dist/esm/casino-game-thumbnail-betlimit_2.entry.js

@@ -219,17 +219,21 @@ const CasinoGameThumbnailExtrainfo = class {
   async onGameLoaded(gameInfo) {
     var _a;
     this.gameInfo = gameInfo;
+    this.isNewGame = this.gameInfo.isNew;
+    if (this.gameInfo.gameTag === 'false') {
+      this.gameInfo.gameTag = null;
+    }
+    this.gameTag = this.gameInfo.gameTag;
     if (!this.gameInfo.details) {
       return;
     }
     this.gameDetails = this.gameInfo.details;
-    this.isNewGame = this.gameInfo.isNew;
     this.isDouble = !this.gameDetails
       ? false
       : this.gameInfo.details.category.toLowerCase() ===
         WIDGETTYPE_GAMECATEGORY.doubleballroulette;
     this.gameTag = !this.gameDetails
-      ? ''
+      ? this.gameInfo.gameTag
       : ((_a = this.gameInfo.advancedTags) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? addGameTag(this.gameInfo.advancedTags)
         : this.gameInfo.gameTag;

package/dist/esm/casino-normal-game-thumbnail.entry.js

@@ -6,8 +6,12 @@ const CasinoNormalGameThumbnail = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
+  async onGameLoaded(gameInfo) {
+    var _a;
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(gameInfo);
+  }
   render() {
-    return h(Host, null);
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language })));
   }
 };
 CasinoNormalGameThumbnail.style = casinoNormalGameThumbnailCss;

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["casino-game-thumbnail-betlimit_2",[[4,"casino-game-thumbnail-extrainfo",{"language":[1],"betLimit":[32],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}],[0,"casino-game-thumbnail-betlimit",{"betLimit":[16],"numberOfPlayers":[2,"number-of-players"]}]]],["casino-extrainfo-baccarat",[[0,"casino-extrainfo-baccarat",{"language":[1],"showRoundBoard":[4,"show-round-board"],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64],"onBaccaratResultChanged":[64]}]]],["casino-extrainfo-blackjack",[[0,"casino-extrainfo-blackjack",{"language":[1],"gameInfo":[32],"gameDetails":[32],"seatsStatus":[32],"isTableFull":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-extrainfo-roulette",[[0,"casino-extrainfo-roulette",{"language":[1],"gameInfo":[32],"gameDetails":[32],"showLiveClass":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-normal-game-thumbnail",[[0,"casino-normal-game-thumbnail"]]],["casino-game-thumb-view_2",[[1,"casino-game-thumb-view",{"language":[1],"endpoint":[1],"userId":[8,"user-id"],"showGameName":[4,"show-game-name"],"session":[1],"showFavoredCategory":[4,"show-favored-category"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"integratedGameFrameMobile":[4,"integrated-game-frame-mobile"],"gamepageModalUrl":[1,"gamepage-modal-url"],"integratedGameFrameDesktop":[4,"integrated-game-frame-desktop"],"loadDetails":[4,"load-details"],"showRoundBoard":[4,"show-round-board"],"visibilityConnect":[1,"visibility-connect"],"connectLive":[1,"connect-live"],"gameCategory":[1,"game-category"],"livelobbyEndpoint":[1,"livelobby-endpoint"],"gameId":[8,"game-id"],"gameName":[1,"game-name"],"subVendor":[1,"sub-vendor"],"gameVendor":[1,"game-vendor"],"hasFunMode":[4,"has-fun-mode"],"hasAnonymousFunMode":[4,"has-anonymous-fun-mode"],"platform":[1],"thumbnail":[1],"isFavorite":[4,"is-favorite"],"isNew":[4,"is-new"],"cellSize":[1,"cell-size"],"gameTag":[1,"game-tag"],"type":[1],"gameInfo":[32],"isTableFull":[32],"hover":[32]},[[1,"mouseenter","handleMouseOver"],[1,"mouseleave","handleMouseOver"],[4,"gameFavorited","gameFavoritedHandler"],[0,"gameDetailChange","gameDetailChangeHandler"]]],[4,"casino-game-thumbnail-overlay",{"integratedGameFrameMobile":[4,"integrated-game-frame-mobile"],"gamepageModalUrl":[1,"gamepage-modal-url"],"integratedGameFrameDesktop":[4,"integrated-game-frame-desktop"],"language":[1],"gameName":[1,"game-name"],"gameVendor":[1,"game-vendor"],"gameId":[8,"game-id"],"hasFunMode":[4,"has-fun-mode"]}]]]], options);
+  return bootstrapLazy([["casino-game-thumbnail-betlimit_2",[[4,"casino-game-thumbnail-extrainfo",{"language":[1],"betLimit":[32],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}],[0,"casino-game-thumbnail-betlimit",{"betLimit":[16],"numberOfPlayers":[2,"number-of-players"]}]]],["casino-extrainfo-baccarat",[[0,"casino-extrainfo-baccarat",{"language":[1],"showRoundBoard":[4,"show-round-board"],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64],"onBaccaratResultChanged":[64]}]]],["casino-extrainfo-blackjack",[[0,"casino-extrainfo-blackjack",{"language":[1],"gameInfo":[32],"gameDetails":[32],"seatsStatus":[32],"isTableFull":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-extrainfo-roulette",[[0,"casino-extrainfo-roulette",{"language":[1],"gameInfo":[32],"gameDetails":[32],"showLiveClass":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-normal-game-thumbnail",[[0,"casino-normal-game-thumbnail",{"language":[1],"onGameLoaded":[64]}]]],["casino-game-thumb-view_2",[[1,"casino-game-thumb-view",{"language":[1],"endpoint":[1],"userId":[8,"user-id"],"showGameName":[4,"show-game-name"],"session":[1],"showFavoredCategory":[4,"show-favored-category"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"loadDetails":[4,"load-details"],"showRoundBoard":[4,"show-round-board"],"visibilityConnect":[1,"visibility-connect"],"connectLive":[1,"connect-live"],"gameCategory":[1,"game-category"],"livelobbyEndpoint":[1,"livelobby-endpoint"],"gameId":[8,"game-id"],"gameName":[1,"game-name"],"subVendor":[1,"sub-vendor"],"gameVendor":[1,"game-vendor"],"hasFunMode":[4,"has-fun-mode"],"hasAnonymousFunMode":[4,"has-anonymous-fun-mode"],"platform":[1],"thumbnail":[1],"isFavorite":[4,"is-favorite"],"isNew":[4,"is-new"],"cellSize":[1,"cell-size"],"gameTag":[1,"game-tag"],"type":[1],"gameInfo":[32],"isTableFull":[32],"hover":[32]},[[1,"mouseenter","handleMouseOver"],[1,"mouseleave","handleMouseOver"],[4,"gameFavorited","gameFavoritedHandler"],[0,"gameDetailChange","gameDetailChangeHandler"]]],[4,"casino-game-thumbnail-overlay",{"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"language":[1],"gameName":[1,"game-name"],"gameVendor":[1,"game-vendor"],"gameId":[8,"game-id"],"hasFunMode":[4,"has-fun-mode"]}]]]], options);
   });
 };
 

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/casino-game-thumb-view/.stencil/packages/casino-game-thumb-view/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/casino-game-thumb-view/casino-game-thumb-view.d.ts

@@ -40,17 +40,17 @@ export declare class CasinoGameThumbView {
   /**
    * Widget Setting, show game in a frame when user clicked 'start'
    */
-  integratedGameFrameMobile: boolean;
+  integratedGameframeMobile: boolean;
   /**
    * Widget Setting, show game in a frame when user clicked 'start'
-   * the frame url when integratedGameFrameDesktop is true
+   * the frame url when integratedGameframeDesktop is true
    */
-  gamepageModalUrl: string;
+  gamepageModalurl: string;
   /**
    * Widget Setting, show game in a frame when user clicked 'start', Open game aframe,
-   * gamepageModalUrl value should be set
+   * gamepageModalurl value should be set
    */
-  integratedGameFrameDesktop: boolean;
+  integratedGameframeDesktop: boolean;
   /**
    * Widget Setting, Load game details when set it as true, default value: false
    * When loadDetails is true and type=='live-casino-tables',
@@ -197,6 +197,7 @@ export declare class CasinoGameThumbView {
    * @private
    */
   private generateGameInfoByProps;
+  triggerExtraInfoLoad(): void;
   componentDidRender(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
@@ -212,9 +213,9 @@ export declare class CasinoGameThumbView {
     gameVendor: string;
     hasFunMode: boolean;
     language: string;
-    integratedGameFrameMobile: boolean;
-    integratedGameFrameDesktop: boolean;
-    gamepageModalUrl: string;
+    integratedGameframeMobile: boolean;
+    integratedGameframeDesktop: boolean;
+    gamepageModalurl: string;
   };
   render(): any;
 }

package/dist/types/components/casino-game-thumbnail-overlay/casino-game-thumbnail-overlay.d.ts

@@ -5,17 +5,18 @@ export declare class CasinoGameThumbnailOverlay {
    */
   playClicked: EventEmitter<string | number>;
   /**
-   * integratedGameFrameMobile
+   * Widget Setting, the frame url when integratedGameframeDesktop is true
    */
-  integratedGameFrameMobile: boolean;
+  gamepageModalurl: string;
   /**
-   * the frame url when integratedGameFrameDesktop is true
+   * Widget Setting, show game in a frame when user clicked 'start', default: false
    */
-  gamepageModalUrl: string;
+  integratedGameframeMobile: boolean;
   /**
-   * Open game a a frame,  gamepagemodalurl value should be set
+   * Widget Setting, show game in a frame when user clicked 'start', default: false
+   * Open game in a frame,  gamepageModalurl value should be set
    */
-  integratedGameFrameDesktop: boolean;
+  integratedGameframeDesktop: boolean;
   /**
    * Language
    */

package/dist/types/components/casino-normal-game-thumbnail/casino-normal-game-thumbnail.d.ts

@@ -1,3 +1,7 @@
+import { CasinoGameThumbnailInfo } from '../../models/casino-game-thumb-view';
 export declare class CasinoNormalGameThumbnail {
+  infoWrapperRef: any;
+  language: string;
+  onGameLoaded(gameInfo: CasinoGameThumbnailInfo): Promise<void>;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -82,9 +82,9 @@ export namespace Components {
          */
         "gameVendor": string;
         /**
-          * Widget Setting, show game in a frame when user clicked 'start' the frame url when integratedGameFrameDesktop is true
+          * Widget Setting, show game in a frame when user clicked 'start' the frame url when integratedGameframeDesktop is true
          */
-        "gamepageModalUrl": string;
+        "gamepageModalurl": string;
         /**
           * Game Property, hasAnonymousFunMode
          */
@@ -94,13 +94,13 @@ export namespace Components {
          */
         "hasFunMode": boolean;
         /**
-          * Widget Setting, show game in a frame when user clicked 'start', Open game aframe, gamepageModalUrl value should be set
+          * Widget Setting, show game in a frame when user clicked 'start', Open game aframe, gamepageModalurl value should be set
          */
-        "integratedGameFrameDesktop": boolean;
+        "integratedGameframeDesktop": boolean;
         /**
           * Widget Setting, show game in a frame when user clicked 'start'
          */
-        "integratedGameFrameMobile": boolean;
+        "integratedGameframeMobile": boolean;
         /**
           * Game Property, is Game Favorited
          */
@@ -182,24 +182,26 @@ export namespace Components {
         "gameName": string;
         "gameVendor": string;
         /**
-          * the frame url when integratedGameFrameDesktop is true
+          * Widget Setting, the frame url when integratedGameframeDesktop is true
          */
-        "gamepageModalUrl": string;
+        "gamepageModalurl": string;
         "hasFunMode": boolean;
         /**
-          * Open game a a frame,  gamepagemodalurl value should be set
+          * Widget Setting, show game in a frame when user clicked 'start', default: false Open game in a frame,  gamepageModalurl value should be set
          */
-        "integratedGameFrameDesktop": boolean;
+        "integratedGameframeDesktop": boolean;
         /**
-          * integratedGameFrameMobile
+          * Widget Setting, show game in a frame when user clicked 'start', default: false
          */
-        "integratedGameFrameMobile": boolean;
+        "integratedGameframeMobile": boolean;
         /**
           * Language
          */
         "language": string;
     }
     interface CasinoNormalGameThumbnail {
+        "language": string;
+        "onGameLoaded": (gameInfo: CasinoGameThumbnailInfo) => Promise<void>;
     }
 }
 declare global {
@@ -327,9 +329,9 @@ declare namespace LocalJSX {
          */
         "gameVendor"?: string;
         /**
-          * Widget Setting, show game in a frame when user clicked 'start' the frame url when integratedGameFrameDesktop is true
+          * Widget Setting, show game in a frame when user clicked 'start' the frame url when integratedGameframeDesktop is true
          */
-        "gamepageModalUrl"?: string;
+        "gamepageModalurl"?: string;
         /**
           * Game Property, hasAnonymousFunMode
          */
@@ -339,13 +341,13 @@ declare namespace LocalJSX {
          */
         "hasFunMode"?: boolean;
         /**
-          * Widget Setting, show game in a frame when user clicked 'start', Open game aframe, gamepageModalUrl value should be set
+          * Widget Setting, show game in a frame when user clicked 'start', Open game aframe, gamepageModalurl value should be set
          */
-        "integratedGameFrameDesktop"?: boolean;
+        "integratedGameframeDesktop"?: boolean;
         /**
           * Widget Setting, show game in a frame when user clicked 'start'
          */
-        "integratedGameFrameMobile"?: boolean;
+        "integratedGameframeMobile"?: boolean;
         /**
           * Game Property, is Game Favorited
          */
@@ -426,18 +428,18 @@ declare namespace LocalJSX {
         "gameName"?: string;
         "gameVendor"?: string;
         /**
-          * the frame url when integratedGameFrameDesktop is true
+          * Widget Setting, the frame url when integratedGameframeDesktop is true
          */
-        "gamepageModalUrl"?: string;
+        "gamepageModalurl"?: string;
         "hasFunMode"?: boolean;
         /**
-          * Open game a a frame,  gamepagemodalurl value should be set
+          * Widget Setting, show game in a frame when user clicked 'start', default: false Open game in a frame,  gamepageModalurl value should be set
          */
-        "integratedGameFrameDesktop"?: boolean;
+        "integratedGameframeDesktop"?: boolean;
         /**
-          * integratedGameFrameMobile
+          * Widget Setting, show game in a frame when user clicked 'start', default: false
          */
-        "integratedGameFrameMobile"?: boolean;
+        "integratedGameframeMobile"?: boolean;
         /**
           * Language
          */
@@ -448,6 +450,7 @@ declare namespace LocalJSX {
         "onPlayCasinoGame"?: (event: CustomEvent<string | number>) => void;
     }
     interface CasinoNormalGameThumbnail {
+        "language"?: string;
     }
     interface IntrinsicElements {
         "casino-extrainfo-baccarat": CasinoExtrainfoBaccarat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-thumb-view",
-  "version": "1.13.5",
+  "version": "1.15.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",