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

package/dist/collection/components/casino-game-thumb-view/casino-game-thumb-view.js

@@ -21,12 +21,12 @@ export class CasinoGameThumbView {
     /**
      * 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',
@@ -45,7 +45,6 @@ export class CasinoGameThumbView {
      * Game Property, Game lunch platform
      */
     this.platform = 'PC';
-    this.gameInfo = {};
     this.thumbnailLoaded = false;
     this.containerClassWhenDetailChange = '';
     this.isUserLoggedIn = false;
@@ -73,7 +72,9 @@ export class CasinoGameThumbView {
       });
     };
     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`;
@@ -121,6 +122,7 @@ export class CasinoGameThumbView {
     let message = JSON.parse(e.data);
     if (message.needReconnect && this.liveLobbyConnection) {
       this.liveLobbyConnection.close();
+      this.liveLobbyConnection = null;
       this.connectGameToLiveLobby();
       return;
     }
@@ -165,10 +167,12 @@ export class CasinoGameThumbView {
     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') {
@@ -209,14 +213,10 @@ export class CasinoGameThumbView {
       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
@@ -278,7 +278,8 @@ export class CasinoGameThumbView {
     if (this.visibilityConnect === 'disconnect') {
       this.disconnectGameFromLiveLobby();
     }
-    else if (this.visibilityConnect === 'connect' && this.connectLive === 'connect') {
+    else if (this.visibilityConnect === 'connect' &&
+      this.connectLive === 'connect') {
       this.connectGameToLiveLobby();
     }
   }
@@ -367,6 +368,18 @@ export class CasinoGameThumbView {
       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) {
@@ -376,13 +389,13 @@ export class CasinoGameThumbView {
         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;
@@ -401,7 +414,6 @@ export class CasinoGameThumbView {
         this.loadDetails &&
         this.gameId) {
         this.loadGameDetailInfo();
-        return;
       }
       return;
     }
@@ -414,22 +426,23 @@ export class CasinoGameThumbView {
     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() {
@@ -605,7 +618,7 @@ export class CasinoGameThumbView {
       "reflect": false,
       "defaultValue": "''"
     },
-    "integratedGameFrameMobile": {
+    "integratedGameframeMobile": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -619,11 +632,11 @@ export class CasinoGameThumbView {
         "tags": [],
         "text": "Widget Setting, show game in a frame when user clicked 'start'"
       },
-      "attribute": "integrated-game-frame-mobile",
+      "attribute": "integrated-gameframe-mobile",
       "reflect": false,
       "defaultValue": "false"
     },
-    "gamepageModalUrl": {
+    "gamepageModalurl": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -635,12 +648,12 @@ export class CasinoGameThumbView {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Widget Setting, show game in a frame when user clicked 'start'\nthe frame url when integratedGameFrameDesktop is true"
+        "text": "Widget Setting, show game in a frame when user clicked 'start'\nthe frame url when integratedGameframeDesktop is true"
       },
-      "attribute": "gamepage-modal-url",
+      "attribute": "gamepage-modalurl",
       "reflect": false
     },
-    "integratedGameFrameDesktop": {
+    "integratedGameframeDesktop": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -652,9 +665,9 @@ export class CasinoGameThumbView {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Widget Setting, show game in a frame when user clicked 'start', Open game aframe,\ngamepageModalUrl value should be set"
+        "text": "Widget Setting, show game in a frame when user clicked 'start', Open game aframe,\ngamepageModalurl value should be set"
       },
-      "attribute": "integrated-game-frame-desktop",
+      "attribute": "integrated-gameframe-desktop",
       "reflect": false,
       "defaultValue": "false"
     },

package/dist/collection/components/casino-game-thumbnail-extrainfo/casino-game-thumbnail-extrainfo.js

@@ -11,17 +11,21 @@ export class CasinoGameThumbnailExtrainfo {
   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/collection/components/casino-game-thumbnail-overlay/casino-game-thumbnail-overlay.js

@@ -4,13 +4,14 @@ import { translate } from '../../utils/locale.utils';
 export class CasinoGameThumbnailOverlay {
   constructor() {
     /**
-     * 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
      */
@@ -23,7 +24,7 @@ export class CasinoGameThumbnailOverlay {
       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
@@ -49,42 +50,42 @@ export class CasinoGameThumbnailOverlay {
     "$": ["casino-game-thumbnail-overlay.css"]
   }; }
   static get properties() { return {
-    "integratedGameFrameMobile": {
-      "type": "boolean",
+    "gamepageModalurl": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "integratedGameFrameMobile"
+        "text": "Widget Setting, the frame url when integratedGameframeDesktop is true"
       },
-      "attribute": "integrated-game-frame-mobile",
-      "reflect": false,
-      "defaultValue": "false"
+      "attribute": "gamepage-modalurl",
+      "reflect": false
     },
-    "gamepageModalUrl": {
-      "type": "string",
+    "integratedGameframeMobile": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "the frame url when integratedGameFrameDesktop is true"
+        "text": "Widget Setting, show game in a frame when user clicked 'start', default: false"
       },
-      "attribute": "gamepage-modal-url",
-      "reflect": false
+      "attribute": "integrated-gameframe-mobile",
+      "reflect": false,
+      "defaultValue": "false"
     },
-    "integratedGameFrameDesktop": {
+    "integratedGameframeDesktop": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -96,9 +97,9 @@ export class CasinoGameThumbnailOverlay {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Open game a a frame,  gamepagemodalurl value should be set"
+        "text": "Widget Setting, show game in a frame when user clicked 'start', default: false\nOpen game in a frame,  gamepageModalurl value should be set"
       },
-      "attribute": "integrated-game-frame-desktop",
+      "attribute": "integrated-gameframe-desktop",
       "reflect": false,
       "defaultValue": "false"
     },

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

@@ -1,7 +1,12 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, Method, Prop } from '@stencil/core';
 export class CasinoNormalGameThumbnail {
+  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 is() { return "casino-normal-game-thumbnail"; }
   static get originalStyleUrls() { return {
@@ -10,4 +15,48 @@ export class CasinoNormalGameThumbnail {
   static get styleUrls() { return {
     "$": ["casino-normal-game-thumbnail.css"]
   }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false
+    }
+  }; }
+  static get methods() { return {
+    "onGameLoaded": {
+      "complexType": {
+        "signature": "(gameInfo: CasinoGameThumbnailInfo) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailInfo": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }

package/dist/components/casino-extrainfo-roulette.js

@@ -17,7 +17,7 @@ const CasinoExtrainfoRoulette$1 = /*@__PURE__*/ proxyCustomElement(class extends
   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) {
@@ -29,13 +29,14 @@ const CasinoExtrainfoRoulette$1 = /*@__PURE__*/ proxyCustomElement(class extends
     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)))))));
   }
   static get style() { return casinoExtrainfoRouletteCss; }
 }, [0, "casino-extrainfo-roulette", {

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

@@ -1119,12 +1119,12 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     /**
      * 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',
@@ -1143,7 +1143,6 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
      * Game Property, Game lunch platform
      */
     this.platform = 'PC';
-    this.gameInfo = {};
     this.thumbnailLoaded = false;
     this.containerClassWhenDetailChange = '';
     this.isUserLoggedIn = false;
@@ -1171,7 +1170,9 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       });
     };
     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`;
@@ -1219,6 +1220,7 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     let message = JSON.parse(e.data);
     if (message.needReconnect && this.liveLobbyConnection) {
       this.liveLobbyConnection.close();
+      this.liveLobbyConnection = null;
       this.connectGameToLiveLobby();
       return;
     }
@@ -1263,10 +1265,12 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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') {
@@ -1307,14 +1311,10 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       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
@@ -1376,7 +1376,8 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.visibilityConnect === 'disconnect') {
       this.disconnectGameFromLiveLobby();
     }
-    else if (this.visibilityConnect === 'connect' && this.connectLive === 'connect') {
+    else if (this.visibilityConnect === 'connect' &&
+      this.connectLive === 'connect') {
       this.connectGameToLiveLobby();
     }
   }
@@ -1465,6 +1466,18 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       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) {
@@ -1474,13 +1487,13 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         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;
@@ -1499,7 +1512,6 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         this.loadDetails &&
         this.gameId) {
         this.loadGameDetailInfo();
-        return;
       }
       return;
     }
@@ -1512,22 +1524,23 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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() {
@@ -1560,9 +1573,9 @@ const CasinoGameThumbView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "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"],
+    "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"],

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

@@ -16,17 +16,21 @@ const CasinoGameThumbnailExtrainfo = /*@__PURE__*/ proxyCustomElement(class exte
   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;