@everymatrix/casino-game-thumb-view 1.31.2 → 1.32.4

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

@@ -1,1064 +0,0 @@
-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';
-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;
-    /**
-     * Game Property, default ''
-     */
-    this.gameCategory = '';
-    /**
-     * Game Property, Game lunch platform
-     */
-    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 ';
-          }
-        }
-      }
-      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;
-    }
-    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;
-  }
-  /**
-   * 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();
-    }
-    this.gameInfo = Object.assign({}, this.gameInfo);
-    this.triggerExtraInfoLoad();
-    if (this.isLiveCasino && this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
-    }
-  }
-  /**
-   * 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();
-        }
-        else {
-          this.parseGameDetailsResponse();
-        }
-      }
-      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);
-      });
-    }
-  }
-  disconnectGameFromLiveLobby() {
-    if (this.liveLobbyConnection) {
-      this.liveLobbyConnection.removeEventListener('message');
-      this.liveLobbyConnection.close();
-      this.liveLobbyConnection = undefined;
-    }
-  }
-  toggleConnect() {
-    if (!this.isLiveCasino) {
-      return;
-    }
-    if (this.connectLive === 'disconnect') {
-      this.disconnectGameFromLiveLobby();
-    }
-    else if (this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
-    }
-  }
-  toggleVisibilityConnect() {
-    if (!this.isLiveCasino) {
-      return;
-    }
-    if (this.visibilityConnect === 'disconnect') {
-      this.disconnectGameFromLiveLobby();
-    }
-    else if (this.visibilityConnect === 'connect' &&
-      this.connectLive === 'connect') {
-      this.connectGameToLiveLobby();
-    }
-  }
-  /**
-   * 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);
-    }
-    else {
-      window.postMessage({ type: 'SetFavoredGame', gameId, triggerFactor }, window.location.href);
-    }
-    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;
-    }
-    // end custom styling area 500)
-    if (this.gameInfo) {
-      this.triggerExtraInfoLoad();
-    }
-  }
-  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;
-    }
-    //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();
-    }
-  }
-  disconnectedCallback() {
-    if (this.liveLobbyConnection) {
-      this.liveLobbyConnection.removeEventListener('message', this.gameDetailChangeHandler);
-    }
-    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) })));
-    }
-    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 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
-    }]; }
-}