@everymatrix/casino-tournament-banner 1.20.0 → 1.20.5

package/dist/esm/casino-tournament-banner_2.entry.js

@@ -39,7 +39,11 @@ const TRANSLATIONS$1 = {
     details: 'Details',
     joinerror: 'An error occurred while registering in the tournament, please try again.',
     tournament: 'Tournament',
-    terms: 'Terms and conditions'
+    terms: 'Terms and conditions',
+    left: 'left',
+    minutes: 'minutes',
+    hours: 'hours',
+    days: 'days',
   },
   'zh-hk': {
     enrolled: '已註冊',
@@ -72,7 +76,11 @@ const TRANSLATIONS$1 = {
     register: '登記',
     details: '細節',
     join: '加入',
-    joinerror: '加入錦標賽時出錯，請重試'
+    joinerror: '加入錦標賽時出錯，請重試',
+    left: '剩下',
+    minutes: '分鐘',
+    hours: '小時',
+    days: '天',
   },
   fr: {
     enrolled: 'Inscrits',
@@ -105,7 +113,11 @@ const TRANSLATIONS$1 = {
     register: 'Enregistre',
     details: 'Détails',
     join: 'Rejoignez',
-    joinerror: 'Une erreur s\'est produite lors de l\'inscription au tournoi - '
+    joinerror: 'Une erreur s\'est produite lors de l\'inscription au tournoi - ',
+    left: 'restant',
+    minutes: 'minutes',
+    hours: 'heures',
+    days: 'jours',
   },
   ro: {
     enrolled: 'Înscris',
@@ -140,7 +152,11 @@ const TRANSLATIONS$1 = {
     register: 'Înregistrare',
     details: 'Detalii',
     join: 'Participă',
-    joinerror: 'A apărut o eroare la înregistrarea în turneu, te rugăm să încerci din nou.'
+    joinerror: 'A apărut o eroare la înregistrarea în turneu, te rugăm să încerci din nou.',
+    left: 'rămase',
+    minutes: 'minute',
+    hours: 'ore',
+    days: 'zile',
   },
   tr: {
     enrolled: 'Katıldın',
@@ -173,7 +189,11 @@ const TRANSLATIONS$1 = {
     register: 'Kayıt Ol',
     details: 'Detaylar',
     join: 'Katıl',
-    joinerror: 'Turnuvaya katılım ile ilgili bir hata oluştu - '
+    joinerror: 'Turnuvaya katılım ile ilgili bir hata oluştu - ',
+    left: 'kaldı',
+    minutes: 'dakika',
+    hours: 'saat',
+    days: 'gün',
   },
   el: {
     enrolled: 'Εγγεγραμμένος',
@@ -209,7 +229,11 @@ const TRANSLATIONS$1 = {
     register: 'Εγγραφή',
     details: 'Λεπτομέρειες',
     join: 'Συμμετοχή',
-    joinerror: 'Παρουσιάστηκε σφάλμα κατά τη διαδικασία εγγραφής στο τουρνουά, παρακαλούμε δοκιμάστε ξανά.'
+    joinerror: 'Παρουσιάστηκε σφάλμα κατά τη διαδικασία εγγραφής στο τουρνουά, παρακαλούμε δοκιμάστε ξανά.',
+    left: 'απομένουν',
+    minutes: 'λεπτά',
+    hours: 'ώρες',
+    days: 'ημέρες',
   },
   es: {
     enrolled: 'Inscrito',
@@ -243,6 +267,10 @@ const TRANSLATIONS$1 = {
     details: 'Detalles',
     join: 'Unirse',
     joinerror: 'Ha ocurrido un error mientras se registra en el Torneo',
+    left: 'izquierda',
+    minutes: 'minutos',
+    hours: 'horas',
+    days: 'días',
   },
   pt: {
     enrolled: 'Inscrito',
@@ -275,7 +303,11 @@ const TRANSLATIONS$1 = {
     register: 'Registro',
     details: 'Detalhes',
     join: 'Junte-se',
-    joinerror: 'Ocorreu um erro ao entrar no torneio -'
+    joinerror: 'Ocorreu um erro ao entrar no torneio -',
+    left: 'Abandonou',
+    minutes: 'Minutos',
+    hours: 'Horas',
+    days: 'Dias',
   },
   hu: {
     enrolled: 'Feliratkozott',
@@ -309,6 +341,10 @@ const TRANSLATIONS$1 = {
     details: 'Adatok',
     join: 'Csatlakozás',
     joinerror: 'Hiba történt a versenyre való regisztráció során, kérjük próbálja újra.',
+    left: 'bal',
+    minutes: 'perc',
+    hours: 'óra',
+    days: 'nap',
   }
 };
 const translate$1 = (key, customLang) => {
@@ -5992,56 +6028,71 @@ hooks.HTML5_FMT = {
     MONTH: 'YYYY-MM', // <input type="month" />
 };
 
-const casinoTournamentBannerCss = ":host{display:block}.TournamentBannerWrap{height:100%}.TournamentBanner{position:relative;width:100%;height:100%;overflow:hidden}.TournamentBannerBg{width:100%;height:100%;object-fit:cover;transition:all 150ms ease-in-out}.TournamentBannerBg.Closed{filter:grayscale(1)}.TournamentBannerInfo{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;display:flex;justify-content:space-between}.BannerInfo{margin:10px}.Tag{box-shadow:0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);border-radius:8px;padding:6px;font-size:10px;display:flex}.Tag.Closed{filter:grayscale(1)}.Date{gap:4px;background:#FF7500;color:#1A2C38}.State{background:#D0046C}.Enroll{color:#fff;background:#24834B}.EnrollCheck{margin-right:4px}.Join{background:#6C757D}.Running{background:#1A2C38}.CalendarIcon path{fill:#1A2C38}.TournamentBannerThumb{position:absolute;top:0;left:0;width:100%;height:100%;padding:12px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;box-sizing:border-box}.ThumbTitle{font-size:14px}.ThumbState{display:flex;gap:4px}.ThumbName{font-size:22px}.ThumbTC{font-size:8px;color:#fff;cursor:pointer}.ThumbButtons{display:flex;gap:4px}";
+const casinoTournamentBannerCss = ":host{display:block}.TournamentBannerWrap{height:100%}.TournamentBanner{position:relative;width:100%;height:100%;overflow:hidden}.TournamentBannerBg{width:100%;height:100%;object-fit:cover;transition:all 150ms ease-in-out}.TournamentBannerBg.Closed{filter:grayscale(1)}.TournamentBannerInfo{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;display:flex;justify-content:space-between}.BannerInfo{margin:10px}.Tag{box-shadow:0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);border-radius:8px;padding:6px;font-size:10px;display:flex;align-items:center;height:13px}.Tag.Closed{filter:grayscale(1)}.TagRemain{text-indent:5px}.Date{gap:4px;background:#FF7500;color:#1A2C38}.State{background:#D0046C}.Enroll{color:#fff;background:#24834B}.EnrollCheck{margin-right:4px}.Join{background:#6C757D}.Running{background:#1A2C38}.CalendarIcon path{fill:#1A2C38}.TournamentBannerThumb{position:absolute;top:0;left:0;width:100%;height:100%;padding:12px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;box-sizing:border-box}.ThumbTitle{font-size:14px}.ThumbState{display:flex;gap:4px}.ThumbName{font-size:22px}.ThumbTC{font-size:8px;color:#fff;cursor:pointer}.ThumbButtons{display:flex;gap:4px}";
 
 const CasinoTournamentBanner = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * Short start time format
+     */
     this.shortstartformat = 'DD MMM YYYY';
+    /**
+     * Show date on widget
+     */
     this.showDate = true;
+    /**
+     * Show date on running state tournament tag
+     */
+    this.showRunningDate = false;
+    /**
+     * Show check icon on enrolled tag
+     */
     this.showCheck = false;
+    /**
+     * Widget display as a card
+     */
     this.cardMode = false;
+    /**
+     * Show read more button
+     */
     this.showReadMore = false;
+    /**
+     * Client custom styling via inline styles
+     */
     this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
     this.clientStylingUrl = '';
     this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrl;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-    this.formatDate = () => {
-      const dateOptions = { month: 'long' };
-      let currentDate = new Date(this.startTime);
-      const setTranslation = () => {
-        return (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
-          translate$1('startedAt', this.language) :
-          translate$1('startingAt', this.language);
-      };
-      if (this.shortStart) {
-        let startTimeAsString = hooks(currentDate).format(this.shortstartformat);
-        this.startdate = (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
-          translate$1('startedAtWithTime', this.language) + startTimeAsString :
-          translate$1('startingAtWithTime', this.language) + startTimeAsString;
+  }
+  getDateTimeDiff(dateString1, dateString2) {
+    return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
+  }
+  getTextByDiff(diff) {
+    const renderText = (amount, type) => ' - ' + amount + ' ' + translate$1(type);
+    const renderTimeColumn = (column) => {
+      const columnInt = Math.floor(column);
+      if (columnInt < 10) {
+        return `0${columnInt}`;
       }
       else {
-        let currentMonthKey = new Intl.DateTimeFormat('en', dateOptions).format(currentDate);
-        let currentDay = currentDate.getDate();
-        let currentHour = currentDate.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', hour12: false });
-        this.startdate =
-          `${currentDay}` + ' ' +
-            translate$1(`${currentMonthKey}`, this.language) + ', ' +
-            setTranslation() +
-            ` ${currentHour}`;
+        return `${columnInt}`;
       }
     };
+    if (diff < 1440) {
+      const hours = diff / 60;
+      const minutes = diff % 60;
+      const seconds = (minutes - Math.floor(minutes)) * 60;
+      return [hours, minutes, seconds].map(c => renderTimeColumn(c)).join(':');
+    }
+    return renderText(Math.ceil(diff / (60 * 24)), 'days');
+  }
+  getDuration() {
+    const dateNow = new Date();
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   infoCompletedHandler(event) {
     if (event.detail && this.useEvent) {
@@ -6083,6 +6134,43 @@ const CasinoTournamentBanner = class {
       this.limitStylingAppends = true;
     }
   }
+  setClientStyling() {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = this.clientStyling;
+    this.stylingContainer.prepend(sheet);
+  }
+  setClientStylingURL() {
+    let cssFile = document.createElement('style');
+    setTimeout(() => {
+      cssFile.innerHTML = this.clientStylingUrl;
+      this.stylingContainer.prepend(cssFile);
+    }, 1);
+  }
+  formatDate() {
+    const dateOptions = { month: 'long' };
+    let currentDate = new Date(this.startTime);
+    const setTranslation = () => {
+      return (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
+        translate$1('startedAt', this.language) :
+        translate$1('startingAt', this.language);
+    };
+    if (this.shortStart) {
+      let startTimeAsString = hooks(currentDate).format(this.shortstartformat);
+      this.startdate = (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
+        translate$1('startedAtWithTime', this.language) + startTimeAsString :
+        translate$1('startingAtWithTime', this.language) + startTimeAsString;
+    }
+    else {
+      let currentMonthKey = new Intl.DateTimeFormat('en', dateOptions).format(currentDate);
+      let currentDay = currentDate.getDate();
+      let currentHour = currentDate.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', hour12: false });
+      this.startdate =
+        `${currentDay}` + ' ' +
+          translate$1(`${currentMonthKey}`, this.language) + ', ' +
+          setTranslation() +
+          ` ${currentHour}`;
+    }
+  }
   componentWillLoad() {
     if (!this.useEvent && this.startTime) {
       this.formatDate();
@@ -6090,9 +6178,23 @@ const CasinoTournamentBanner = class {
     if (this.state) {
       this.stateText = this.getStateText(this.state);
     }
+    if (this.startTime && this.endTime) {
+      this.getDuration();
+      this.getTextByDiff(this.tournamentLeftDays);
+    }
+    if (this.tournamentLeftDays < 1440 && this.tournamentLeftDays > 0) {
+      this.durationInterval = window.setInterval(() => {
+        if (this.startTime && this.endTime) {
+          this.getDuration();
+        }
+      }, 1000);
+    }
+    else {
+      clearInterval(this.durationInterval);
+    }
   }
   termsClick(tournamentId) {
-    window.postMessage({ type: 'termsAndConditionsClicked', tournamentId: tournamentId }, window.location.href);
+    window.postMessage({ type: 'TournamentTermsConditions', tournamentId: tournamentId }, window.location.href);
   }
   render() {
     return h("div", { ref: el => this.stylingContainer = el, class: "TournamentBannerWrap" }, this.thumbnail && h("div", { class: "TournamentBanner", part: "TournamentBanner" }, h("img", { src: this.thumbnail, alt: "", class: `TournamentBannerBg ${this.cardMode && this.state ? this.state : ''}` }), !this.cardMode &&
@@ -6100,11 +6202,12 @@ const CasinoTournamentBanner = class {
         h("span", { class: "Tag Date" }, this.showCalendar &&
           h("svg", { class: "CalendarIcon", width: "9", height: "11", viewBox: "0 0 9 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.1 1.4H7.65V0.5H6.75V1.4H2.25V0.5H1.35V1.4H0.9C0.405 1.4 0 1.805 0 2.3V9.5C0 9.995 0.405 10.4 0.9 10.4H8.1C8.595 10.4 9 9.995 9 9.5V2.3C9 1.805 8.595 1.4 8.1 1.4ZM8.10003 9.5H0.900027V4.55H8.10003V9.5ZM0.900027 3.65005H8.10003V2.30005H0.900027V3.65005Z", fill: "#1E1616" })), this.startdate)), h("div", { class: "BannerInfo", part: "BannerInfo" }, this.enrolled &&
         h("span", { class: "Tag Enroll" }, this.showCheck &&
-          h("svg", { class: "EnrollCheck", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { d: "M4.50008 8.08492L2.41508 5.99992L1.70508 6.70492L4.50008 9.49992L10.5001 3.49992L9.79508 2.79492L4.50008 8.08492Z", fill: "white" })), translate$1('enrolled', this.language)))), this.cardMode && h("div", { class: "TournamentBannerThumb", part: "TournamentBannerThumb" }, h("div", { class: "ThumbTitle", part: "ThumbTitle" }, translate$1('tournament', this.language)), h("div", { class: "ThumbName", part: "ThumbName" }, this.nameOrTitle), h("div", { class: "ThumbState" }, this.enrolled ?
+          h("svg", { class: "EnrollCheck", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { d: "M4.50008 8.08492L2.41508 5.99992L1.70508 6.70492L4.50008 9.49992L10.5001 3.49992L9.79508 2.79492L4.50008 8.08492Z", fill: "white" })), translate$1('enrolled', this.language)))), this.cardMode && h("div", { class: "TournamentBannerThumb", part: "TournamentBannerThumb" }, h("div", { class: "ThumbTitle", part: "ThumbTitle" }, translate$1('tournament', this.language)), h("div", { class: "ThumbName", part: "ThumbName" }, this.nameOrTitle), h("div", { class: "ThumbState" }, this.session && this.enrolled ?
       h("span", { class: "Tag Join" }, h("svg", { class: "EnrollCheck", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { d: "M4.50008 8.08492L2.41508 5.99992L1.70508 6.70492L4.50008 9.49992L10.5001 3.49992L9.79508 2.79492L4.50008 8.08492Z", fill: "white" })), translate$1('joined', this.language))
       :
-        this.state != 'Closed' &&
-          h("span", { class: "Tag Join" }, h("svg", { class: "JoinPlus", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "13", viewBox: "0 0 12 13", fill: "none" }, h("path", { d: "M9.5 6.8335H6.5V9.8335H5.5V6.8335H2.5V5.8335H5.5V2.8335H6.5V5.8335H9.5V6.8335Z", fill: "white" })), translate$1('join', this.language)), this.state == 'Running' && h("span", { class: `Tag State ${this.state}` }, this.stateText), (this.state == 'Unstarted' || this.state == 'Upcoming' || this.state == 'Closed') &&
+        this.session && this.state != 'Closed' &&
+          h("span", { class: "Tag Join" }, h("svg", { class: "JoinPlus", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "13", viewBox: "0 0 12 13", fill: "none" }, h("path", { d: "M9.5 6.8335H6.5V9.8335H5.5V6.8335H2.5V5.8335H5.5V2.8335H6.5V5.8335H9.5V6.8335Z", fill: "white" })), translate$1('join', this.language)), this.state == 'Running' && h("span", { class: `Tag State ${this.state}` }, this.stateText, this.showRunningDate &&
+      h("span", { class: "TagRemain" }, this.showRemain, " ", translate$1('left', this.language))), (this.state == 'Unstarted' || this.state == 'Upcoming' || this.state == 'Closed') &&
       h("span", { class: `Tag Date ${this.state}` }, this.showCalendar &&
         h("svg", { class: "CalendarIcon", width: "9", height: "11", viewBox: "0 0 9 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.1 1.4H7.65V0.5H6.75V1.4H2.25V0.5H1.35V1.4H0.9C0.405 1.4 0 1.805 0 2.3V9.5C0 9.995 0.405 10.4 0.9 10.4H8.1C8.595 10.4 9 9.995 9 9.5V2.3C9 1.805 8.595 1.4 8.1 1.4ZM8.10003 9.5H0.900027V4.55H8.10003V9.5ZM0.900027 3.65005H8.10003V2.30005H0.900027V3.65005Z", fill: "#1E1616" })), this.startdate)), h("div", { class: "ThumbButtons" }, h("casino-tournament-buttons", { enrolled: this.enrolled, session: this.session, endpoint: this.endpoint, language: this.language, "tournament-id": this.tournamentId, "login-event": this.loginEvent, "login-url": this.loginUrl, "register-event": this.registerEvent, "register-url": this.registerUrl, currency: this.currency, "bonus-code": this.bonusCode, "show-read-more": this.showReadMore })), h("div", { class: "ThumbTC" }, h("span", { onClick: this.termsClick.bind(this, this.tournamentId) }, translate$1('terms', this.language))))));
   }

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["casino-tournament-banner_2",[[1,"casino-tournament-banner",{"useEvent":[1,"use-event"],"state":[1],"enrolled":[4],"startTime":[1,"start-time"],"thumbnail":[1],"language":[1],"showCalendar":[4,"show-calendar"],"shortStart":[4,"short-start"],"shortstartformat":[1],"showDate":[4,"show-date"],"showCheck":[4,"show-check"],"cardMode":[4,"card-mode"],"nameOrTitle":[1,"name-or-title"],"tournamentId":[1,"tournament-id"],"session":[1],"loginEvent":[1,"login-event"],"loginUrl":[1,"login-url"],"registerEvent":[1,"register-event"],"registerUrl":[1,"register-url"],"endpoint":[1],"currency":[1],"bonusCode":[1,"bonus-code"],"showReadMore":[4,"show-read-more"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"stateText":[32],"limitStylingAppends":[32],"stylingContainer":[32],"startdate":[32]},[[8,"getTournamentInfoCompleted","infoCompletedHandler"]]],[1,"casino-tournament-buttons",{"language":[1],"tournamentId":[1,"tournament-id"],"session":[1],"loginEvent":[1,"login-event"],"loginUrl":[1,"login-url"],"registerEvent":[1,"register-event"],"registerUrl":[1,"register-url"],"endpoint":[1],"currency":[1],"bonusCode":[1,"bonus-code"],"enrolled":[4],"showReadMore":[4,"show-read-more"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"limitStylingAppends":[32],"stylingContainer":[32],"joinButtonLoading":[32],"errorJoin":[32],"errorJoinConcurrently":[32]}]]]], options);
+  return bootstrapLazy([["casino-tournament-banner_2",[[1,"casino-tournament-banner",{"useEvent":[1,"use-event"],"endpoint":[1],"state":[1],"enrolled":[4],"startTime":[1,"start-time"],"endTime":[1,"end-time"],"thumbnail":[1],"language":[1],"showCalendar":[4,"show-calendar"],"shortStart":[4,"short-start"],"shortstartformat":[1],"showDate":[4,"show-date"],"showRunningDate":[4,"show-running-date"],"showCheck":[4,"show-check"],"cardMode":[4,"card-mode"],"nameOrTitle":[1,"name-or-title"],"tournamentId":[1,"tournament-id"],"session":[1],"loginEvent":[1,"login-event"],"loginUrl":[1,"login-url"],"registerEvent":[1,"register-event"],"registerUrl":[1,"register-url"],"currency":[1],"bonusCode":[1,"bonus-code"],"showReadMore":[4,"show-read-more"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"stateText":[32],"limitStylingAppends":[32],"stylingContainer":[32],"startdate":[32],"tournamentLeftDays":[32],"showRemain":[32],"durationInterval":[32]},[[8,"getTournamentInfoCompleted","infoCompletedHandler"]]],[1,"casino-tournament-buttons",{"language":[1],"tournamentId":[1,"tournament-id"],"session":[1],"loginEvent":[1,"login-event"],"loginUrl":[1,"login-url"],"registerEvent":[1,"register-event"],"registerUrl":[1,"register-url"],"endpoint":[1],"currency":[1],"bonusCode":[1,"bonus-code"],"enrolled":[4],"showReadMore":[4,"show-read-more"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"limitStylingAppends":[32],"stylingContainer":[32],"joinButtonLoading":[32],"errorJoin":[32],"errorJoinConcurrently":[32]}]]]], options);
   });
 };
 

package/dist/types/components/casino-tournament-banner/casino-tournament-banner.d.ts

@@ -1,41 +1,130 @@
 import '@everymatrix/casino-tournament-buttons';
 export declare class CasinoTournamentBanner {
-  useEvent: string;
-  state: string;
-  enrolled: boolean;
-  startTime: string;
-  thumbnail: string;
+  /**
+   * Use event to load data
+   */
+  useEvent?: string;
+  /**
+   * The NWA endpoint
+   */
+  endpoint?: string;
+  /**
+   * The tournament state
+   */
+  state?: string;
+  /**
+   * Player enrolled
+   */
+  enrolled?: boolean;
+  /**
+   * Tournament start time
+   */
+  startTime?: string;
+  /**
+   * Tournament end time
+   */
+  endTime?: string;
+  /**
+   * Tournament thumbnail
+   */
+  thumbnail?: string;
+  /**
+   * Widget Language to show
+   */
   language: string;
-  showCalendar: boolean;
-  shortStart: boolean;
-  shortstartformat: string;
-  showDate: boolean;
-  showCheck: boolean;
-  cardMode: boolean;
-  nameOrTitle: string;
-  tournamentId: string;
-  session: string;
-  loginEvent: string;
-  loginUrl: string;
-  registerEvent: string;
-  registerUrl: string;
-  endpoint: string;
-  currency: string;
-  bonusCode: string;
-  showReadMore: boolean;
-  clientStyling: string;
-  clientStylingUrl: string;
+  /**
+   * Show calendar icon
+   */
+  showCalendar?: boolean;
+  /**
+   * Show short start time on tag
+   */
+  shortStart?: boolean;
+  /**
+   * Short start time format
+   */
+  shortstartformat?: string;
+  /**
+   * Show date on widget
+   */
+  showDate?: boolean;
+  /**
+   * Show date on running state tournament tag
+   */
+  showRunningDate?: boolean;
+  /**
+   * Show check icon on enrolled tag
+   */
+  showCheck?: boolean;
+  /**
+   * Widget display as a card
+   */
+  cardMode?: boolean;
+  /**
+   * Widget name or title
+   */
+  nameOrTitle?: string;
+  /**
+   * Tournament ID
+   */
+  tournamentId?: string;
+  /**
+   * The NWA Session
+   */
+  session?: string;
+  /**
+   * Login event
+   */
+  loginEvent?: string;
+  /**
+   * Login url
+   */
+  loginUrl?: string;
+  /**
+   * Register Event
+   */
+  registerEvent?: string;
+  /**
+   * Register url
+   */
+  registerUrl?: string;
+  /**
+   * Player currency
+   */
+  currency?: string;
+  /**
+   * Bonus Code
+   */
+  bonusCode?: string;
+  /**
+   * Show read more button
+   */
+  showReadMore?: boolean;
+  /**
+   * Client custom styling via inline styles
+   */
+  clientStyling?: string;
+  /**
+   * Client custom styling via url
+   */
+  clientStylingUrl?: string;
   stateText: string;
   limitStylingAppends: boolean;
   stylingContainer: HTMLElement;
   startdate: string;
+  tournamentLeftDays: number;
+  showRemain: string;
+  durationInterval: number;
+  getDateTimeDiff(dateString1: Date, dateString2: string): number;
+  getTextByDiff(diff: number): any;
+  getDuration(): void;
   infoCompletedHandler(event: CustomEvent<any>): void;
-  getStateText(state: any): string;
+  getStateText(state: string): string;
   componentDidRender(): void;
-  setClientStyling: () => void;
-  setClientStylingURL: () => void;
-  formatDate: () => void;
+  setClientStyling(): void;
+  setClientStylingURL(): void;
+  formatDate(): void;
   componentWillLoad(): void;
-  termsClick(tournamentId: any): void;
+  termsClick(tournamentId: string): void;
   render(): any;
 }