@everymatrix/casino-game-thumb-view 1.44.0 → 1.45.0

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

@@ -1,1064 +1,1060 @@
-import { Component, h, Prop, State, Event, Watch, Listen, } from '@stencil/core';
-import { isMobile, convertGicBaccaratUpdateItem } from '../../utils/utils';
-import { WIDGETTYPE_GAMECATEGORY, GAME_CATEGORY, GAME_TYPE, } from '../../constants/game-thumbnail';
-import { EventSourcePolyfill } from 'event-source-polyfill';
-import Fav from '../../static/fav.svg';
-import UnFavSvg from '../../static/unfav.svg';
+import { h, } from "@stencil/core";
+import { isMobile, convertGicBaccaratUpdateItem } from "../../utils/utils";
+import { WIDGETTYPE_GAMECATEGORY, GAME_CATEGORY, GAME_TYPE, } from "../../constants/game-thumbnail";
+import { EventSourcePolyfill } from "event-source-polyfill";
+import Fav from "../../static/fav.svg";
+import UnFavSvg from "../../static/unfav.svg";
 export class CasinoGameThumbView {
-  constructor() {
-    /**
-     * Widget Setting, Game language
-     */
-    this.language = 'en';
-    /**
-     * Widget Setting, Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Widget Setting, Client custom styling via url content
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Widget Setting, show game in a frame when user clicked 'start'
-     */
-    this.integratedGameframeMobile = false;
-    /**
-     * Widget Setting, show game in a frame when user clicked 'start', Open game aframe,
-     * gamepageModalurl value should be set
-     */
-    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',
-     * Load gameDetails by endpoint/vendor/gameId if livelobbyEndpoint is null
-     */
-    this.loadDetails = false;
-    /**
-     * Widget Setting, showRoundBoard, default value: false
-     */
-    this.showRoundBoard = false;
+    constructor() {
+        this.thumbnailLoaded = false;
+        this.containerClassWhenDetailChange = '';
+        this.isUserLoggedIn = false;
+        this.limitStylingAppends = false;
+        //customize style setting
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        //customize style setting
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => {
+                    this.stylingContainer.prepend(cssFile);
+                }, 1);
+            })
+                .catch((err) => {
+                console.error('error ', err);
+            });
+        };
+        this.getGameCategoryType = () => {
+            if (this.isLiveCasino &&
+                this.gameCategory &&
+                this.getWidgetTypeByGameCategory(this.gameCategory)) {
+                return `casino-extrainfo-${this.getWidgetTypeByGameCategory(this.gameCategory).toLowerCase()}`;
+            }
+            return `casino-normal-game-thumbnail`;
+        };
+        this.getGameContainerClass = () => {
+            let gameContainerClass = `GameContainer `;
+            if (this.gameInfo) {
+                if (this.gameInfo && this.gameInfo.details) {
+                    gameContainerClass += ' ListGame ';
+                    if (this.gameInfo.details.isOpen &&
+                        this.gameInfo.details.currentRouletteNumbers) {
+                        gameContainerClass += ' GameBackdrop ';
+                    }
+                }
+            }
+            return gameContainerClass;
+        };
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.userId = undefined;
+        this.showGameName = undefined;
+        this.session = undefined;
+        this.showFavoredCategory = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.integratedGameframeMobile = false;
+        this.gamepageModalurl = undefined;
+        this.integratedGameframeDesktop = false;
+        this.loadDetails = false;
+        this.showRoundBoard = false;
+        this.visibilityConnect = undefined;
+        this.connectLive = undefined;
+        this.gameCategory = '';
+        this.livelobbyEndpoint = undefined;
+        this.gameId = undefined;
+        this.gameName = undefined;
+        this.subVendor = undefined;
+        this.gameVendor = undefined;
+        this.hasFunMode = undefined;
+        this.hasAnonymousFunMode = undefined;
+        this.platform = 'PC';
+        this.thumbnail = undefined;
+        this.isFavorite = undefined;
+        this.isNew = undefined;
+        this.cellSize = undefined;
+        this.gameTag = undefined;
+        this.type = undefined;
+        this.gameInfo = undefined;
+        this.isTableFull = undefined;
+        this.hover = undefined;
+    }
+    onSessionChanged() {
+        this.isUserLoggedIn = !!(this.session && this.userId);
+    }
+    onTableFullChanged(newVal, oldVal) {
+        if (oldVal == undefined) {
+            return;
+        }
+        this.containerClassWhenDetailChange =
+            newVal && !oldVal ? 'PulsatingRedShadow' : 'PulsatingGreenShadow';
+    }
+    handleMouseOver(event) {
+        this.hover = event.type === 'mouseenter';
+    }
+    gameFavoritedHandler(event) {
+        let eventDetail = event.detail;
+        this.gameInfo.isFavorite = eventDetail[this.gameId];
+        this.gameInfo = Object.assign({}, this.gameInfo);
+    }
+    connectLiveHandler() {
+        this.toggleConnect();
+    }
+    visibilityConnectHandler() {
+        this.toggleVisibilityConnect();
+    }
+    gameDetailChangeHandler(e) {
+        var _a, _b;
+        let message = JSON.parse(e.data);
+        if (message.needReconnect && this.liveLobbyConnection) {
+            this.liveLobbyConnection.close();
+            this.liveLobbyConnection = null;
+            this.connectGameToLiveLobby();
+            return;
+        }
+        if (!(message && message.InternalTableId == this.gameId)) {
+            return;
+        }
+        let MessageType = message.MessageType;
+        switch (MessageType) {
+            case 'TableOpened':
+            case 'TableClosed':
+                this.gameInfo.details.isOpen = message.Open;
+                break;
+            case 'PlayersUpdated':
+                this.gameInfo.details.numberOfPlayers = message.Players;
+                break;
+            case 'RouletteResultsUpdated':
+                this.gameInfo.details.currentRouletteNumbers = message.Results;
+                break;
+            case 'DoubleBallRouletteResultsUpdated':
+                this.gameInfo.details.currentDoubleBallRouletteNumbers =
+                    message.Results;
+                break;
+            case 'SeatsUpdated':
+                this.gameInfo.details.currentOccupiedSeats = message.Seats;
+                break;
+            case 'DealerChanged':
+                this.gameInfo.details.dealer = message.Dealer;
+                break;
+            case 'BaccaratResultsUpdated':
+                if (this.showRoundBoard) {
+                    const Results = message.Results;
+                    this.gameInfo.details.results = [];
+                    Results.forEach((item) => {
+                        this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
+                    });
+                    (_a = this.extraInfoRef) === null || _a === void 0 ? void 0 : _a.onBaccaratResultChanged(this.gameInfo.details.results);
+                }
+                break;
+        }
+        this.resetLiveProperties();
+        (_b = this.extraInfoRef) === null || _b === void 0 ? void 0 : _b.onGameDetailUpdated(this.gameInfo.details);
+        window.postMessage({ messageType: MessageType, value: e.data });
+    }
+    messageHandler(e) {
+        if (e.data.type === `AddFavoriteThumbnail_${this.gameId}` &&
+            !this.showFavoredCategory) {
+            this.gameInfo.isFavorite = true;
+        }
+        if (e.data.type === `RemoveFavoriteThumbnail_${this.gameId}` &&
+            !this.showFavoredCategory) {
+            this.gameInfo.isFavorite = false;
+        }
+        if (e.data.type === 'UserSessionID') {
+            this.isUserLoggedIn = true;
+            this.session = e.data.session;
+            this.userId = e.data.userID;
+        }
+    }
+    resetLiveProperties() {
+        var _a, _b;
+        const details = this.gameInfo.details;
+        if (this.isBlackJack(this.gameCategory.toLowerCase())) {
+            this.isTableFull =
+                details.totalSeats == ((_a = details.currentOccupiedSeats) === null || _a === void 0 ? void 0 : _a.length);
+        }
+        else if (this.isBaccarat(this.gameCategory.toLowerCase()) &&
+            ((_b = details.baccaratResults) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            this.gameInfo.details.results = [];
+            details.baccaratResults.forEach((item) => {
+                this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
+            });
+            delete details.baccaratResults;
+        }
+    }
+    isBlackJack(gameCategory) {
+        return gameCategory.toLowerCase() === GAME_CATEGORY.BLACKJACK;
+    }
+    isBaccarat(gameCategory) {
+        return gameCategory.toLowerCase() === GAME_CATEGORY.BACCARAT;
+    }
     /**
-     * Game Property, default ''
+     * Calculate component properties by game info,
+     * eg: isLiveCasino, gameInfo, isTableFull
      */
-    this.gameCategory = '';
+    initCtrlProperties() {
+        var _a;
+        if (this.isLiveCasino && ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.details)) {
+            this.resetLiveProperties();
+        }
+        this.gameInfo = Object.assign({}, this.gameInfo);
+        this.triggerExtraInfoLoad();
+        if (this.isLiveCasino && this.connectLive === 'connect') {
+            this.connectGameToLiveLobby();
+        }
+    }
     /**
-     * Game Property, Game lunch platform
+     * Parse game info by game info api response
+     * @param data
      */
-    this.platform = 'PC';
-    this.thumbnailLoaded = false;
-    this.containerClassWhenDetailChange = '';
-    this.isUserLoggedIn = false;
-    this.limitStylingAppends = false;
-    //customize style setting
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    //customize style setting
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => {
-          this.stylingContainer.prepend(cssFile);
-        }, 1);
-      })
-        .catch((err) => {
-        console.error('error ', err);
-      });
-    };
-    this.getGameCategoryType = () => {
-      if (this.isLiveCasino &&
-        this.gameCategory &&
-        this.getWidgetTypeByGameCategory(this.gameCategory)) {
-        return `casino-extrainfo-${this.getWidgetTypeByGameCategory(this.gameCategory).toLowerCase()}`;
-      }
-      return `casino-normal-game-thumbnail`;
-    };
-    this.getGameContainerClass = () => {
-      let gameContainerClass = `GameContainer `;
-      if (this.gameInfo) {
-        if (this.gameInfo && this.gameInfo.details) {
-          gameContainerClass += ' ListGame ';
-          if (this.gameInfo.details.isOpen &&
-            this.gameInfo.details.currentRouletteNumbers) {
-            gameContainerClass += ' GameBackdrop ';
-          }
+    parseGameResponse(data) {
+        if (data.length == 1) {
+            this.gameInfo = data[0];
+            if (this.isLiveCasino) {
+                if (!this.gameInfo.details) {
+                    this.loadGameDetailInfo();
+                }
+                else {
+                    this.parseGameDetailsResponse();
+                }
+            }
+            else {
+                this.initCtrlProperties();
+            }
         }
-      }
-      return gameContainerClass;
-    };
-  }
-  onSessionChanged() {
-    this.isUserLoggedIn = !!(this.session && this.userId);
-  }
-  onTableFullChanged(newVal, oldVal) {
-    if (oldVal == undefined) {
-      return;
     }
-    this.containerClassWhenDetailChange =
-      newVal && !oldVal ? 'PulsatingRedShadow' : 'PulsatingGreenShadow';
-  }
-  handleMouseOver(event) {
-    this.hover = event.type === 'mouseenter';
-  }
-  gameFavoritedHandler(event) {
-    let eventDetail = event.detail;
-    this.gameInfo.isFavorite = eventDetail[this.gameId];
-    this.gameInfo = Object.assign({}, this.gameInfo);
-  }
-  connectLiveHandler() {
-    this.toggleConnect();
-  }
-  visibilityConnectHandler() {
-    this.toggleVisibilityConnect();
-  }
-  gameDetailChangeHandler(e) {
-    var _a, _b;
-    let message = JSON.parse(e.data);
-    if (message.needReconnect && this.liveLobbyConnection) {
-      this.liveLobbyConnection.close();
-      this.liveLobbyConnection = null;
-      this.connectGameToLiveLobby();
-      return;
-    }
-    if (!(message && message.InternalTableId == this.gameId)) {
-      return;
+    /**
+     * Parse game detail info, set it to game info
+     */
+    parseGameDetailsResponse() {
+        this.initCtrlProperties();
     }
-    let MessageType = message.MessageType;
-    switch (MessageType) {
-      case 'TableOpened':
-      case 'TableClosed':
-        this.gameInfo.details.isOpen = message.Open;
-        break;
-      case 'PlayersUpdated':
-        this.gameInfo.details.numberOfPlayers = message.Players;
-        break;
-      case 'RouletteResultsUpdated':
-        this.gameInfo.details.currentRouletteNumbers = message.Results;
-        break;
-      case 'DoubleBallRouletteResultsUpdated':
-        this.gameInfo.details.currentDoubleBallRouletteNumbers =
-          message.Results;
-        break;
-      case 'SeatsUpdated':
-        this.gameInfo.details.currentOccupiedSeats = message.Seats;
-        break;
-      case 'DealerChanged':
-        this.gameInfo.details.dealer = message.Dealer;
-        break;
-      case 'BaccaratResultsUpdated':
-        if (this.showRoundBoard) {
-          const Results = message.Results;
-          this.gameInfo.details.results = [];
-          Results.forEach((item) => {
-            this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
-          });
-          (_a = this.extraInfoRef) === null || _a === void 0 ? void 0 : _a.onBaccaratResultChanged(this.gameInfo.details.results);
+    connectGameToLiveLobby() {
+        if (EventSource && !this.liveLobbyConnection) {
+            const updateUrl = `${this.endpoint}/v1/encoder/lobby/updates/${this.gameInfo.vendor.name}/${this.gameInfo.id}`;
+            this.liveLobbyConnection = new EventSourcePolyfill(updateUrl);
+            this.liveLobbyConnection.addEventListener('message', (evt) => {
+                this.gameDetailChangeHandler(evt);
+            });
         }
-        break;
     }
-    this.resetLiveProperties();
-    (_b = this.extraInfoRef) === null || _b === void 0 ? void 0 : _b.onGameDetailUpdated(this.gameInfo.details);
-    window.postMessage({ messageType: MessageType, value: e.data });
-  }
-  messageHandler(e) {
-    if (e.data.type === `AddFavoriteThumbnail_${this.gameId}` &&
-      !this.showFavoredCategory) {
-      this.gameInfo.isFavorite = true;
-    }
-    if (e.data.type === `RemoveFavoriteThumbnail_${this.gameId}` &&
-      !this.showFavoredCategory) {
-      this.gameInfo.isFavorite = false;
+    disconnectGameFromLiveLobby() {
+        if (this.liveLobbyConnection) {
+            this.liveLobbyConnection.removeEventListener('message');
+            this.liveLobbyConnection.close();
+            this.liveLobbyConnection = undefined;
+        }
     }
-    if (e.data.type === 'UserSessionID') {
-      this.isUserLoggedIn = true;
-      this.session = e.data.session;
-      this.userId = e.data.userID;
+    toggleConnect() {
+        if (!this.isLiveCasino) {
+            return;
+        }
+        if (this.connectLive === 'disconnect') {
+            this.disconnectGameFromLiveLobby();
+        }
+        else if (this.connectLive === 'connect') {
+            this.connectGameToLiveLobby();
+        }
     }
-  }
-  resetLiveProperties() {
-    var _a, _b;
-    const details = this.gameInfo.details;
-    if (this.isBlackJack(this.gameCategory.toLowerCase())) {
-      this.isTableFull =
-        details.totalSeats == ((_a = details.currentOccupiedSeats) === null || _a === void 0 ? void 0 : _a.length);
+    toggleVisibilityConnect() {
+        if (!this.isLiveCasino) {
+            return;
+        }
+        if (this.visibilityConnect === 'disconnect') {
+            this.disconnectGameFromLiveLobby();
+        }
+        else if (this.visibilityConnect === 'connect' &&
+            this.connectLive === 'connect') {
+            this.connectGameToLiveLobby();
+        }
     }
-    else if (this.isBaccarat(this.gameCategory.toLowerCase()) &&
-      ((_b = details.baccaratResults) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-      this.gameInfo.details.results = [];
-      details.baccaratResults.forEach((item) => {
-        this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
-      });
-      delete details.baccaratResults;
+    /**
+     * Get game base info from game api(casino/games/{id})
+     * @private
+     */
+    loadGameById() {
+        let url = `${this.endpoint}/v1/casino/games/${this.gameId}?expand=vendor&platform=${this.platform}&language=${this.language}`;
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => this.parseGameResponse(data))
+            .catch((err) => {
+            console.error(err);
+        });
     }
-  }
-  isBlackJack(gameCategory) {
-    return gameCategory.toLowerCase() === GAME_CATEGORY.BLACKJACK;
-  }
-  isBaccarat(gameCategory) {
-    return gameCategory.toLowerCase() === GAME_CATEGORY.BACCARAT;
-  }
-  /**
-   * Calculate component properties by game info,
-   * eg: isLiveCasino, gameInfo, isTableFull
-   */
-  initCtrlProperties() {
-    var _a;
-    if (this.isLiveCasino && ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.details)) {
-      this.resetLiveProperties();
+    /*
+     * Load game info when widget property 'livelobbyEndpoint' set
+     * @private
+     */
+    loadGameInfoByLobbyEndpoint() {
+        let url = new URL(`${this.livelobbyEndpoint.split('?')[0]}`);
+        url.searchParams.append('expand', 'vendor');
+        url.searchParams.append('platform', this.platform);
+        url.searchParams.append('language', this.language);
+        fetch(url.toString())
+            .then((res) => res.json())
+            .then((data) => this.parseGameResponse(data))
+            .catch((error) => console.error(error));
     }
-    this.gameInfo = Object.assign({}, this.gameInfo);
-    this.triggerExtraInfoLoad();
-    if (this.isLiveCasino && this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
+    /*
+     * load game info when widget property 'livelobbyEndpoint' setted
+     * @private
+     */
+    loadGameDetailInfo() {
+        let url = new URL(`${this.endpoint}/v1/lobby/tables/${this.gameId}`);
+        url.searchParams.append('platform', this.platform);
+        url.searchParams.append('language', this.language);
+        fetch(url.toString())
+            .then((res) => res.json())
+            .then((data) => {
+            if (!(data === null || data === void 0 ? void 0 : data.category)) {
+                return;
+            }
+            this.gameInfo.details = data;
+            this.parseGameDetailsResponse();
+        })
+            .catch((err) => {
+            console.error(err);
+            setTimeout(() => this.loadGameDetailInfo(), 1000);
+        });
     }
-  }
-  /**
-   * Parse game info by game info api response
-   * @param data
-   */
-  parseGameResponse(data) {
-    if (data.length == 1) {
-      this.gameInfo = data[0];
-      if (this.isLiveCasino) {
-        if (!this.gameInfo.details) {
-          this.loadGameDetailInfo();
+    /**
+     * Toggle game favorite property
+     * @param gameId
+     * @private
+     */
+    toggleFavoriteGame(gameId) {
+        let triggerFactor = 'thumbnail';
+        if (this.gameInfo.isFavorite) {
+            window.postMessage({ type: 'SetUnfavoredGame', gameId, triggerFactor }, window.location.href);
         }
         else {
-          this.parseGameDetailsResponse();
+            window.postMessage({ type: 'SetFavoredGame', gameId, triggerFactor }, window.location.href);
         }
-      }
-      else {
-        this.initCtrlProperties();
-      }
-    }
-  }
-  /**
-   * Parse game detail info, set it to game info
-   */
-  parseGameDetailsResponse() {
-    this.initCtrlProperties();
-  }
-  connectGameToLiveLobby() {
-    if (EventSource && !this.liveLobbyConnection) {
-      const updateUrl = `${this.endpoint}/v1/encoder/lobby/updates/${this.gameInfo.vendor.name}/${this.gameInfo.id}`;
-      this.liveLobbyConnection = new EventSourcePolyfill(updateUrl);
-      this.liveLobbyConnection.addEventListener('message', (evt) => {
-        this.gameDetailChangeHandler(evt);
-      });
+        this.toggleFavoriteCasinoGameEvent.emit(gameId);
     }
-  }
-  disconnectGameFromLiveLobby() {
-    if (this.liveLobbyConnection) {
-      this.liveLobbyConnection.removeEventListener('message');
-      this.liveLobbyConnection.close();
-      this.liveLobbyConnection = undefined;
-    }
-  }
-  toggleConnect() {
-    if (!this.isLiveCasino) {
-      return;
+    /**
+     * Generate gameInfo obj by props
+     * @private
+     */
+    generateGameInfoByProps() {
+        return {
+            id: this.gameId,
+            name: this.gameName,
+            subVendor: this.subVendor,
+            hasFunMode: this.hasFunMode,
+            hasAnonymousFunMode: this.hasAnonymousFunMode,
+            thumbnail: this.thumbnail,
+            cellSize: this.cellSize,
+            gameTag: this.gameTag,
+            vendor: { href: '', name: this.gameVendor },
+            isFavorite: this.isFavorite,
+            isNew: this.isNew,
+            type: this.type,
+            liveCasinoCategory: this.gameCategory || '',
+        };
     }
-    if (this.connectLive === 'disconnect') {
-      this.disconnectGameFromLiveLobby();
+    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,
+        });
     }
-    else if (this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area 500)
+        if (this.gameInfo) {
+            this.triggerExtraInfoLoad();
+        }
     }
-  }
-  toggleVisibilityConnect() {
-    if (!this.isLiveCasino) {
-      return;
+    componentDidLoad() {
+        window.addEventListener('message', this.messageHandler);
     }
-    if (this.visibilityConnect === 'disconnect') {
-      this.disconnectGameFromLiveLobby();
+    componentWillLoad() {
+        this.isLiveCasino = this.type == GAME_TYPE.LIVE_CASINO;
+        this.extraInfoWidget = this.getGameCategoryType();
+        this.isUserLoggedIn = !!(this.session && this.userId);
+        if (this.isLiveCasino && this.livelobbyEndpoint) {
+            this.loadGameInfoByLobbyEndpoint();
+            return;
+        }
+        //generate gameInfo obj by props
+        if (this.thumbnail) {
+            this.gameInfo = this.generateGameInfoByProps();
+            // loadLiveDetails if game is live casino
+            if (this.isLiveCasino &&
+                this.endpoint &&
+                this.loadDetails &&
+                this.gameId) {
+                this.loadGameDetailInfo();
+            }
+            return;
+        }
+        //fetch data from api if no game properties set except gameId
+        if (this.gameId && this.endpoint) {
+            this.loadGameById();
+        }
     }
-    else if (this.visibilityConnect === 'connect' &&
-      this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
+    disconnectedCallback() {
+        if (this.liveLobbyConnection) {
+            this.liveLobbyConnection.removeEventListener('message', this.gameDetailChangeHandler);
+        }
+        window.removeEventListener('message', this.messageHandler);
     }
-  }
-  /**
-   * Get game base info from game api(casino/games/{id})
-   * @private
-   */
-  loadGameById() {
-    let url = `${this.endpoint}/v1/casino/games/${this.gameId}?expand=vendor&platform=${this.platform}&language=${this.language}`;
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => this.parseGameResponse(data))
-      .catch((err) => {
-      console.error(err);
-    });
-  }
-  /*
-   * Load game info when widget property 'livelobbyEndpoint' set
-   * @private
-   */
-  loadGameInfoByLobbyEndpoint() {
-    let url = new URL(`${this.livelobbyEndpoint.split('?')[0]}`);
-    url.searchParams.append('expand', 'vendor');
-    url.searchParams.append('platform', this.platform);
-    url.searchParams.append('language', this.language);
-    fetch(url.toString())
-      .then((res) => res.json())
-      .then((data) => this.parseGameResponse(data))
-      .catch((error) => console.error(error));
-  }
-  /*
-   * load game info when widget property 'livelobbyEndpoint' setted
-   * @private
-   */
-  loadGameDetailInfo() {
-    let url = new URL(`${this.endpoint}/v1/lobby/tables/${this.gameId}`);
-    url.searchParams.append('platform', this.platform);
-    url.searchParams.append('language', this.language);
-    fetch(url.toString())
-      .then((res) => res.json())
-      .then((data) => {
-      if (!(data === null || data === void 0 ? void 0 : data.category)) {
-        return;
-      }
-      this.gameInfo.details = data;
-      this.parseGameDetailsResponse();
-    })
-      .catch((err) => {
-      console.error(err);
-      setTimeout(() => this.loadGameDetailInfo(), 1000);
-    });
-  }
-  /**
-   * Toggle game favorite property
-   * @param gameId
-   * @private
-   */
-  toggleFavoriteGame(gameId) {
-    let triggerFactor = 'thumbnail';
-    if (this.gameInfo.isFavorite) {
-      window.postMessage({ type: 'SetUnfavoredGame', gameId, triggerFactor }, window.location.href);
+    // end custom styling area
+    getWidgetTypeByGameCategory(gameCategory) {
+        return WIDGETTYPE_GAMECATEGORY[gameCategory.toLowerCase()];
     }
-    else {
-      window.postMessage({ type: 'SetFavoredGame', gameId, triggerFactor }, window.location.href);
+    getGameOverlayProps() {
+        var _a, _b;
+        return {
+            gameName: this.gameInfo.name,
+            gameId: this.gameInfo.gameId,
+            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,
+        };
     }
-    this.toggleFavoriteCasinoGameEvent.emit(gameId);
-  }
-  /**
-   * Generate gameInfo obj by props
-   * @private
-   */
-  generateGameInfoByProps() {
-    return {
-      id: this.gameId,
-      name: this.gameName,
-      subVendor: this.subVendor,
-      hasFunMode: this.hasFunMode,
-      hasAnonymousFunMode: this.hasAnonymousFunMode,
-      thumbnail: this.thumbnail,
-      cellSize: this.cellSize,
-      gameTag: this.gameTag,
-      vendor: { href: '', name: this.gameVendor },
-      isFavorite: this.isFavorite,
-      isNew: this.isNew,
-      type: this.type,
-      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) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    render() {
+        var _a, _b;
+        if (!this.gameInfo) {
+            return (h("div", { class: "GameInnerContainer", part: "GameInnerContainer", slot: "Game-Inner" }, h("img", { src: this.thumbnail, alt: "", loading: "lazy", part: "GameContainer", class: "GameContainer", onLoad: () => (this.thumbnailLoaded = true) })));
+        }
+        const gameOverlayProps = this.getGameOverlayProps();
+        const gameThumbnail = ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.thumbnail) || ((_b = this.gameInfo) === null || _b === void 0 ? void 0 : _b.defaultThumbnail);
+        const gameContainerClass = this.getGameContainerClass();
+        const gameThumbnailClass = `GameBg ${this.cellSize ? 'GameBg-' + this.cellSize : ''}
+    ${this.hover ? ' GameContainerHovered' : ''} ${this.thumbnailLoaded ? ' Loaded' : ''}`;
+        return (h("div", { class: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, part: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, ref: (el) => (this.stylingContainer = el), "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrl }, h("div", { class: `GameInnerContainer ${this.hover ? 'Hovered' : ''}`, part: `GameInnerContainer ${this.hover ? 'Hovered' : ''}` }, h("img", { src: gameThumbnail, alt: "Game Thumbnail ", loading: "lazy", part: gameThumbnailClass, class: gameThumbnailClass, onLoad: () => (this.thumbnailLoaded = true) }), this.isUserLoggedIn && (h("div", { class: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, part: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, onClick: () => this.toggleFavoriteGame(this.gameId) }, this.gameInfo.isFavorite ? (h("slot", { name: "fav-icon" }, h("span", { class: "FavoredIcon", part: "FavoredIcon", innerHTML: Fav }))) : (h("slot", { name: "UnFavIcon" }, !isMobile(window.navigator.userAgent) && (h("span", { class: "UnfavoredIcon", part: "UnfavoredIcon", innerHTML: UnFavSvg })))))), h("slot", { name: "game-overlay" }, h("casino-game-thumbnail-overlay", Object.assign({ language: this.language }, gameOverlayProps))), h("slot", { name: "extra-info", ref: (el) => (this.extraInfoSlotRef = el) }, h(this.extraInfoWidget, { language: this.language, "show-round-board": this.showRoundBoard })), h("slot", { name: "game-property-slot" })), this.showGameName && (h("slot", { name: "game-name" }, h("p", { class: "GameNameBelow", part: "GameNameBelow", title: gameOverlayProps.gameName }, gameOverlayProps.gameName)))));
     }
-    // end custom styling area 500)
-    if (this.gameInfo) {
-      this.triggerExtraInfoLoad();
+    static get is() { return "casino-game-thumb-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-game-thumb-view.scss"]
+        };
     }
-  }
-  componentDidLoad() {
-    window.addEventListener('message', this.messageHandler);
-  }
-  componentWillLoad() {
-    this.isLiveCasino = this.type == GAME_TYPE.LIVE_CASINO;
-    this.extraInfoWidget = this.getGameCategoryType();
-    this.isUserLoggedIn = !!(this.session && this.userId);
-    if (this.isLiveCasino && this.livelobbyEndpoint) {
-      this.loadGameInfoByLobbyEndpoint();
-      return;
+    static get styleUrls() {
+        return {
+            "$": ["casino-game-thumb-view.css"]
+        };
     }
-    //generate gameInfo obj by props
-    if (this.thumbnail) {
-      this.gameInfo = this.generateGameInfoByProps();
-      // loadLiveDetails if game is live casino
-      if (this.isLiveCasino &&
-        this.endpoint &&
-        this.loadDetails &&
-        this.gameId) {
-        this.loadGameDetailInfo();
-      }
-      return;
+    static get assetsDirs() { return ["static"]; }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Game language"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Api endpoint for loading game details"
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "userId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, User id"
+                },
+                "attribute": "user-id",
+                "reflect": false
+            },
+            "showGameName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Show game name if set it as true"
+                },
+                "attribute": "show-game-name",
+                "reflect": false
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, User session"
+                },
+                "attribute": "session",
+                "reflect": false
+            },
+            "showFavoredCategory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, game showed in favorited category"
+                },
+                "attribute": "show-favored-category",
+                "reflect": false
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Client custom styling via url content"
+                },
+                "attribute": "client-styling-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "integratedGameframeMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, show game in a frame when user clicked 'start'"
+                },
+                "attribute": "integrated-gameframe-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "gamepageModalurl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, show game in a frame when user clicked 'start'\nthe frame url when integratedGameframeDesktop is true"
+                },
+                "attribute": "gamepage-modalurl",
+                "reflect": false
+            },
+            "integratedGameframeDesktop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, show game in a frame when user clicked 'start', Open game aframe,\ngamepageModalurl value should be set"
+                },
+                "attribute": "integrated-gameframe-desktop",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loadDetails": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Load game details when set it as true, default value: false\nWhen loadDetails is true and type=='live-casino-tables',\nLoad gameDetails by endpoint/vendor/gameId if livelobbyEndpoint is null"
+                },
+                "attribute": "load-details",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showRoundBoard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, showRoundBoard, default value: false"
+                },
+                "attribute": "show-round-board",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "visibilityConnect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen visibilityConnect='connect' && connectLive = 'connect'"
+                },
+                "attribute": "visibility-connect",
+                "reflect": false
+            },
+            "connectLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, flag to start a updater when a live game show in visible area\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen 'connectLive'= 'connect'"
+                },
+                "attribute": "connect-live",
+                "reflect": false
+            },
+            "gameCategory": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, default ''"
+                },
+                "attribute": "game-category",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "livelobbyEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Setting, Live lobby endpoint, use to start a game\nLoad game info by this url if type=='live-casino-tables'"
+                },
+                "attribute": "livelobby-endpoint",
+                "reflect": false
+            },
+            "gameId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, GameId"
+                },
+                "attribute": "game-id",
+                "reflect": false
+            },
+            "gameName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game Name"
+                },
+                "attribute": "game-name",
+                "reflect": false
+            },
+            "subVendor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game SubVendor"
+                },
+                "attribute": "sub-vendor",
+                "reflect": false
+            },
+            "gameVendor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game vendor"
+                },
+                "attribute": "game-vendor",
+                "reflect": false
+            },
+            "hasFunMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game funMode"
+                },
+                "attribute": "has-fun-mode",
+                "reflect": false
+            },
+            "hasAnonymousFunMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, hasAnonymousFunMode"
+                },
+                "attribute": "has-anonymous-fun-mode",
+                "reflect": false
+            },
+            "platform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game lunch platform"
+                },
+                "attribute": "platform",
+                "reflect": false,
+                "defaultValue": "'PC'"
+            },
+            "thumbnail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Game thumbnail"
+                },
+                "attribute": "thumbnail",
+                "reflect": false
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, is Game Favorited"
+                },
+                "attribute": "is-favorite",
+                "reflect": false
+            },
+            "isNew": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, is Game new"
+                },
+                "attribute": "is-new",
+                "reflect": false
+            },
+            "cellSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, Customize game cell size"
+                },
+                "attribute": "cell-size",
+                "reflect": false
+            },
+            "gameTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, gameTag"
+                },
+                "attribute": "game-tag",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game Property, type, isLiveCasino when type == 'live-casino-tables'"
+                },
+                "attribute": "type",
+                "reflect": false
+            }
+        };
     }
-    //fetch data from api if no game properties set except gameId
-    if (this.gameId && this.endpoint) {
-      this.loadGameById();
+    static get states() {
+        return {
+            "gameInfo": {},
+            "isTableFull": {},
+            "hover": {}
+        };
     }
-  }
-  disconnectedCallback() {
-    if (this.liveLobbyConnection) {
-      this.liveLobbyConnection.removeEventListener('message', this.gameDetailChangeHandler);
+    static get events() {
+        return [{
+                "method": "toggleFavoriteCasinoGameEvent",
+                "name": "toggleCasinoGameFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }];
     }
-    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 || ((_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,
-    };
-  }
-  render() {
-    var _a, _b;
-    if (!this.gameInfo) {
-      return (h("div", { class: "GameInnerContainer", part: "GameInnerContainer", slot: "Game-Inner" },
-        h("img", { src: this.thumbnail, alt: "", loading: "lazy", part: "GameContainer", class: "GameContainer", onLoad: () => (this.thumbnailLoaded = true) })));
+    static get watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "onSessionChanged"
+            }, {
+                "propName": "userId",
+                "methodName": "onSessionChanged"
+            }, {
+                "propName": "isTableFull",
+                "methodName": "onTableFullChanged"
+            }, {
+                "propName": "connectLive",
+                "methodName": "connectLiveHandler"
+            }, {
+                "propName": "visibilityConnect",
+                "methodName": "visibilityConnectHandler"
+            }];
     }
-    const gameOverlayProps = this.getGameOverlayProps();
-    const gameThumbnail = ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.thumbnail) || ((_b = this.gameInfo) === null || _b === void 0 ? void 0 : _b.defaultThumbnail);
-    const gameContainerClass = this.getGameContainerClass();
-    const gameThumbnailClass = `GameBg ${this.cellSize ? 'GameBg-' + this.cellSize : ''}
-    ${this.hover ? ' GameContainerHovered' : ''} ${this.thumbnailLoaded ? ' Loaded' : ''}`;
-    return (h("div", { class: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, part: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, ref: (el) => (this.stylingContainer = el), "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrl },
-      h("div", { class: `GameInnerContainer ${this.hover ? 'Hovered' : ''}`, part: `GameInnerContainer ${this.hover ? 'Hovered' : ''}` },
-        h("img", { src: gameThumbnail, alt: "Game Thumbnail ", loading: "lazy", part: gameThumbnailClass, class: gameThumbnailClass, onLoad: () => (this.thumbnailLoaded = true) }),
-        this.isUserLoggedIn && (h("div", { class: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, part: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, onClick: () => this.toggleFavoriteGame(this.gameId) }, this.gameInfo.isFavorite ? (h("slot", { name: "fav-icon" },
-          h("span", { class: "FavoredIcon", part: "FavoredIcon", innerHTML: Fav }))) : (h("slot", { name: "UnFavIcon" }, !isMobile(window.navigator.userAgent) && (h("span", { class: "UnfavoredIcon", part: "UnfavoredIcon", innerHTML: UnFavSvg })))))),
-        h("slot", { name: "game-overlay" },
-          h("casino-game-thumbnail-overlay", Object.assign({ language: this.language }, gameOverlayProps))),
-        h("slot", { name: "extra-info", ref: (el) => (this.extraInfoSlotRef = el) },
-          h(this.extraInfoWidget, { language: this.language, "show-round-board": this.showRoundBoard })),
-        h("slot", { name: "game-property-slot" })),
-      this.showGameName && (h("slot", { name: "game-name" },
-        h("p", { class: "GameNameBelow", part: "GameNameBelow", title: gameOverlayProps.gameName }, gameOverlayProps.gameName)))));
-  }
-  static get is() { return "casino-game-thumb-view"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["casino-game-thumb-view.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["casino-game-thumb-view.css"]
-  }; }
-  static get assetsDirs() { return ["static"]; }
-  static get properties() { return {
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Game language"
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    },
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Api endpoint for loading game details"
-      },
-      "attribute": "endpoint",
-      "reflect": false
-    },
-    "userId": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, User id"
-      },
-      "attribute": "user-id",
-      "reflect": false
-    },
-    "showGameName": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Show game name if set it as true"
-      },
-      "attribute": "show-game-name",
-      "reflect": false
-    },
-    "session": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, User session"
-      },
-      "attribute": "session",
-      "reflect": false
-    },
-    "showFavoredCategory": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, game showed in favorited category"
-      },
-      "attribute": "show-favored-category",
-      "reflect": false
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Client custom styling via string"
-      },
-      "attribute": "client-styling",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "clientStylingUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Client custom styling via url content"
-      },
-      "attribute": "client-styling-url",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "integratedGameframeMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, show game in a frame when user clicked 'start'"
-      },
-      "attribute": "integrated-gameframe-mobile",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "gamepageModalurl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, show game in a frame when user clicked 'start'\nthe frame url when integratedGameframeDesktop is true"
-      },
-      "attribute": "gamepage-modalurl",
-      "reflect": false
-    },
-    "integratedGameframeDesktop": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, show game in a frame when user clicked 'start', Open game aframe,\ngamepageModalurl value should be set"
-      },
-      "attribute": "integrated-gameframe-desktop",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loadDetails": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Load game details when set it as true, default value: false\nWhen loadDetails is true and type=='live-casino-tables',\nLoad gameDetails by endpoint/vendor/gameId if livelobbyEndpoint is null"
-      },
-      "attribute": "load-details",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showRoundBoard": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, showRoundBoard, default value: false"
-      },
-      "attribute": "show-round-board",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "visibilityConnect": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen visibilityConnect='connect' && connectLive = 'connect'"
-      },
-      "attribute": "visibility-connect",
-      "reflect": false
-    },
-    "connectLive": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, flag to start a updater when a live game show in visible area\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen 'connectLive'= 'connect'"
-      },
-      "attribute": "connect-live",
-      "reflect": false
-    },
-    "gameCategory": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, default ''"
-      },
-      "attribute": "game-category",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "livelobbyEndpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Widget Setting, Live lobby endpoint, use to start a game\nLoad game info by this url if type=='live-casino-tables'"
-      },
-      "attribute": "livelobby-endpoint",
-      "reflect": false
-    },
-    "gameId": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, GameId"
-      },
-      "attribute": "game-id",
-      "reflect": false
-    },
-    "gameName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game Name"
-      },
-      "attribute": "game-name",
-      "reflect": false
-    },
-    "subVendor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game SubVendor"
-      },
-      "attribute": "sub-vendor",
-      "reflect": false
-    },
-    "gameVendor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game vendor"
-      },
-      "attribute": "game-vendor",
-      "reflect": false
-    },
-    "hasFunMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game funMode"
-      },
-      "attribute": "has-fun-mode",
-      "reflect": false
-    },
-    "hasAnonymousFunMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, hasAnonymousFunMode"
-      },
-      "attribute": "has-anonymous-fun-mode",
-      "reflect": false
-    },
-    "platform": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game lunch platform"
-      },
-      "attribute": "platform",
-      "reflect": false,
-      "defaultValue": "'PC'"
-    },
-    "thumbnail": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Game thumbnail"
-      },
-      "attribute": "thumbnail",
-      "reflect": false
-    },
-    "isFavorite": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, is Game Favorited"
-      },
-      "attribute": "is-favorite",
-      "reflect": false
-    },
-    "isNew": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, is Game new"
-      },
-      "attribute": "is-new",
-      "reflect": false
-    },
-    "cellSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, Customize game cell size"
-      },
-      "attribute": "cell-size",
-      "reflect": false
-    },
-    "gameTag": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, gameTag"
-      },
-      "attribute": "game-tag",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game Property, type, isLiveCasino when type == 'live-casino-tables'"
-      },
-      "attribute": "type",
-      "reflect": false
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "handleMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "handleMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "gameFavorited",
+                "method": "gameFavoritedHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "gameDetailChange",
+                "method": "gameDetailChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
     }
-  }; }
-  static get states() { return {
-    "gameInfo": {},
-    "isTableFull": {},
-    "hover": {}
-  }; }
-  static get events() { return [{
-      "method": "toggleFavoriteCasinoGameEvent",
-      "name": "toggleCasinoGameFavorite",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "session",
-      "methodName": "onSessionChanged"
-    }, {
-      "propName": "userId",
-      "methodName": "onSessionChanged"
-    }, {
-      "propName": "isTableFull",
-      "methodName": "onTableFullChanged"
-    }, {
-      "propName": "connectLive",
-      "methodName": "connectLiveHandler"
-    }, {
-      "propName": "visibilityConnect",
-      "methodName": "visibilityConnectHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "mouseenter",
-      "method": "handleMouseOver",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "handleMouseOver",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "gameFavorited",
-      "method": "gameFavoritedHandler",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "gameDetailChange",
-      "method": "gameDetailChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }