@everymatrix/casino-tournament-duration 1.20.0 → 1.20.5

package/dist/casino-tournament-duration/casino-tournament-duration.esm.js

@@ -1 +1 @@
-import{p as t,b as n}from"./p-efeaf265.js";(()=>{const n=import.meta.url,a={};return""!==n&&(a.resourcesUrl=new URL(".",n).href),t(a)})().then((t=>n([["p-05f4af89",[[1,"casino-tournament-duration",{startDate:[1,"start-date"],endDate:[1,"end-date"],status:[1],language:[1],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],tournamentUntilStartDays:[32],tournamentLeftDays:[32],showRemain:[32],limitStylingAppends:[32],stylingContainer:[32]}]]]],t)));
+import{p as t,b as n}from"./p-efeaf265.js";(()=>{const n=import.meta.url,e={};return""!==n&&(e.resourcesUrl=new URL(".",n).href),t(e)})().then((t=>n([["p-29bd34e3",[[1,"casino-tournament-duration",{startTime:[1,"start-time"],endTime:[1,"end-time"],status:[1],language:[1],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],tournamentUntilStartDays:[32],tournamentLeftDays:[32],showRemain:[32],limitStylingAppends:[32],stylingContainer:[32],durationInterval:[32]}]]]],t)));

package/dist/casino-tournament-duration/p-29bd34e3.entry.js

@@ -0,0 +1 @@
+import{r as t,h as s}from"./p-efeaf265.js";const i=["ro","en","zh-hk","fr","hu","tr","el","es","pt"],e={en:{finished:"Finished",starting:"Starting in ",left:"left",minutes:"minutes",hours:"hours",days:"days"},"zh-hk":{finished:"完成的",starting:"開始於",left:"剩下",minutes:"分鐘",hours:"小時",days:"天"},fr:{finished:"Fini",starting:"Début dans ",left:"restant",minutes:"minutes",hours:"heures",days:"jours"},ro:{finished:"Finalizat",starting:"Începe în",left:"rămase",minutes:"minute",hours:"ore",days:"zile"},tr:{finished:"Sona ermiş",starting:"Başlamasına ",left:"kaldı",minutes:"dakika",hours:"saat",days:"gün"},el:{finished:"Ολοκληρωμένα",starting:"Αρχίζει σε ",left:"απομένουν",minutes:"λεπτά",hours:"ώρες",days:"ημέρες"},es:{finished:"Finalizado",starting:"Iniciando en ",left:"izquierda",minutes:"minutos",hours:"horas",days:"días"},hu:{finished:"Befejezve",starting:"Kezdésig",left:"bal",minutes:"perc",hours:"óra",days:"nap"},pt:{finished:"Finalizado",starting:"Começando em",left:"Abandonou",minutes:"Minutos",hours:"Horas",days:"Dias"}},r=(t,s)=>{const r=s;return e[void 0!==r&&i.includes(r)?r:"en"][t]},n=class{constructor(s){t(this,s),this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1}getDateTimeDiff(t,s){return(new Date(s).getTime()-new Date(t).getTime())/6e4}getDuration(){const t=new Date;this.tournamentLeftDays=this.getDateTimeDiff(t,this.endTime),this.tournamentUntilStartDays=this.getDateTimeDiff(t,this.startTime),this.showRemain=this.getTextByDiff(this.tournamentLeftDays)}formatDate(t){let s=new Date(t),i=new Intl.DateTimeFormat(this.language,{month:"long"}).format(s);return`${s.getDate()} ${i}, ${s.toLocaleString("en-GB",{hour:"numeric",minute:"numeric"})}, ${s.getUTCFullYear()}`}getTextByDiff(t){if(t<1440){const s=t%60;return[t/60,s,60*(s-Math.floor(s))].map((t=>(t=>{const s=Math.floor(t);return s<10?`0${s}`:`${s}`})(t))).join(":")}return Math.ceil(t/1440)+" "+r("days")}getProgress(){if(this.tournamentLeftDays<=0)return 100;const t=this.getDateTimeDiff(this.startTime,this.endTime);return Math.floor(100/t*(t-this.tournamentLeftDays))}componentWillLoad(){this.startTime&&this.endTime&&(this.getDuration(),this.getTextByDiff(this.tournamentLeftDays)),this.tournamentLeftDays<1440&&this.tournamentLeftDays>0?this.durationInterval=window.setInterval((()=>{this.startTime&&this.endTime&&this.getDuration()}),1e3):clearInterval(this.durationInterval)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}setClientStyling(){let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}setClientStylingURL(){let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrl,this.stylingContainer.prepend(t)}),1)}render(){if(this.startTime&&this.endTime)return s("div",{ref:t=>this.stylingContainer=t},s("div",{class:"TournamentDuration"},s("div",{class:"TournamentDates"},s("div",{class:"StartDate",part:"StartDate"},this.formatDate(this.startTime)),s("div",{class:"EndDate",part:"EndDate"},this.formatDate(this.endTime))),s("div",{class:"ProgressBarWrapper"},s("div",{class:"ProgressBar",part:"ProgressBar"},"Finished"==this.status||"Closing"==this.status||"Closed"==this.status?s("div",null,s("div",{class:"ProgressBarFillEnd",part:"ProgressBarFillEnd"}),s("div",{class:"Finished",part:"Finished"},r("finished",this.language))):this.tournamentUntilStartDays>0?s("div",null,s("div",{class:"ProgressBarFillStarting",part:"ProgressBarFillStarting"}),s("div",{class:"Remaining",part:"Remaining"},r("starting",this.language)," ",this.getTextByDiff(this.tournamentUntilStartDays))):s("div",null,s("div",{class:"ProgressBarFill",part:"ProgressBarFill",style:{width:`${this.getProgress()}%`}}),this.tournamentLeftDays>0&&s("div",{class:"Remaining",part:"Remaining"},this.showRemain," ",r("left",this.language)))))))}};n.style=":host{display:block}.TournamentDates{display:flex;justify-content:space-between}.StartDate{font-size:10px;font-weight:700;color:var(--emfe-w-color-gray-300, #58586B)}.EndDate{font-size:10px;font-weight:700;align-content:flex-end;color:var(--emfe-w-color-gray-300, #58586B)}.ProgressBar{margin:5px 0;height:8px;background:var(--emfe-w-color-white, #FFFFFF)}.ProgressBarInactive{margin:5px 20px 10px 20px;height:8px;background:var(--emfe-w-color-gray-100, #E6E6E6)}.ProgressBarFill{background-color:var(--emfe-w-color-green, #48952a);height:8px}.ProgressBarFillEnd{background-color:var(--emfe-w-color-green, #48952a);height:8px}.ProgressBarFillStarting{background-color:var(--emfe-w-color-gray-300, #58586B);height:8px}.Remaining,.Finished{font-size:10px;font-weight:700;padding-top:6px;text-align:right;text-transform:uppercase}.Finished{color:var(--emfe-w-color-green, #48952a)}";export{n as casino_tournament_duration}

package/dist/cjs/casino-tournament-duration.cjs.entry.js

@@ -90,29 +90,23 @@ const casinoTournamentDurationCss = ":host{display:block}.TournamentDates{displa
 const CasinoTournamentDuration = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * 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);
-    };
   }
   getDateTimeDiff(dateString1, dateString2) {
     return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
   }
   getDuration() {
     const dateNow = new Date();
-    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endDate);
-    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startDate);
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startTime);
     this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   formatDate(date) {
@@ -144,16 +138,26 @@ const CasinoTournamentDuration = class {
   getProgress() {
     if (this.tournamentLeftDays <= 0)
       return 100;
-    const tournamentDuration = this.getDateTimeDiff(this.startDate, this.endDate);
+    const tournamentDuration = this.getDateTimeDiff(this.startTime, this.endTime);
     const step = 100 / tournamentDuration;
     const width = Math.floor((tournamentDuration - this.tournamentLeftDays) * step);
     return width;
   }
   componentWillLoad() {
-    if (this.startDate && this.endDate) {
+    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);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -164,12 +168,24 @@ const CasinoTournamentDuration = 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);
+  }
   render() {
-    if (this.startDate && this.endDate) {
-      return index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "TournamentDuration" }, index.h("div", { class: "TournamentDates" }, index.h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startDate)), index.h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endDate))), index.h("div", { class: "ProgressBarWrapper" }, index.h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
-        index.h("div", null, index.h("div", { class: "ProgressBarFillEnd" }), index.h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
+    if (this.startTime && this.endTime) {
+      return index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "TournamentDuration" }, index.h("div", { class: "TournamentDates" }, index.h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startTime)), index.h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endTime))), index.h("div", { class: "ProgressBarWrapper" }, index.h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
+        index.h("div", null, index.h("div", { class: "ProgressBarFillEnd", part: "ProgressBarFillEnd" }), index.h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
         this.tournamentUntilStartDays > 0 ?
-          index.h("div", null, index.h("div", { class: "ProgressBarFillStarting" }), index.h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
+          index.h("div", null, index.h("div", { class: "ProgressBarFillStarting", part: "ProgressBarFillStarting" }), index.h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
           index.h("div", null, index.h("div", { class: "ProgressBarFill", part: "ProgressBarFill", style: { width: `${this.getProgress()}%` } }), this.tournamentLeftDays > 0 &&
             index.h("div", { class: "Remaining", part: "Remaining" }, this.showRemain, " ", translate('left', this.language)))))));
     }

package/dist/cjs/casino-tournament-duration.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["casino-tournament-duration.cjs",[[1,"casino-tournament-duration",{"startDate":[1,"start-date"],"endDate":[1,"end-date"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-tournament-duration.cjs",[[1,"casino-tournament-duration",{"startTime":[1,"start-time"],"endTime":[1,"end-time"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32],"durationInterval":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["casino-tournament-duration.cjs",[[1,"casino-tournament-duration",{"startDate":[1,"start-date"],"endDate":[1,"end-date"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-tournament-duration.cjs",[[1,"casino-tournament-duration",{"startTime":[1,"start-time"],"endTime":[1,"end-time"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32],"durationInterval":[32]}]]]], options);
   });
 };
 

package/dist/collection/components/casino-tournament-duration/casino-tournament-duration.js

@@ -2,29 +2,23 @@ import { Component, Prop, h, State } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 export class CasinoTournamentDuration {
   constructor() {
+    /**
+     * 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);
-    };
   }
   getDateTimeDiff(dateString1, dateString2) {
     return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
   }
   getDuration() {
     const dateNow = new Date();
-    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endDate);
-    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startDate);
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startTime);
     this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   formatDate(date) {
@@ -56,16 +50,26 @@ export class CasinoTournamentDuration {
   getProgress() {
     if (this.tournamentLeftDays <= 0)
       return 100;
-    const tournamentDuration = this.getDateTimeDiff(this.startDate, this.endDate);
+    const tournamentDuration = this.getDateTimeDiff(this.startTime, this.endTime);
     const step = 100 / tournamentDuration;
     const width = Math.floor((tournamentDuration - this.tournamentLeftDays) * step);
     return width;
   }
   componentWillLoad() {
-    if (this.startDate && this.endDate) {
+    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);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -76,21 +80,33 @@ export class CasinoTournamentDuration {
       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);
+  }
   render() {
-    if (this.startDate && this.endDate) {
+    if (this.startTime && this.endTime) {
       return h("div", { ref: el => this.stylingContainer = el },
         h("div", { class: "TournamentDuration" },
           h("div", { class: "TournamentDates" },
-            h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startDate)),
-            h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endDate))),
+            h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startTime)),
+            h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endTime))),
           h("div", { class: "ProgressBarWrapper" },
             h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
               h("div", null,
-                h("div", { class: "ProgressBarFillEnd" }),
+                h("div", { class: "ProgressBarFillEnd", part: "ProgressBarFillEnd" }),
                 h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
               this.tournamentUntilStartDays > 0 ?
                 h("div", null,
-                  h("div", { class: "ProgressBarFillStarting" }),
+                  h("div", { class: "ProgressBarFillStarting", part: "ProgressBarFillStarting" }),
                   h("div", { class: "Remaining", part: "Remaining" },
                     translate('starting', this.language),
                     " ",
@@ -113,7 +129,7 @@ export class CasinoTournamentDuration {
     "$": ["casino-tournament-duration.css"]
   }; }
   static get properties() { return {
-    "startDate": {
+    "startTime": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -122,15 +138,15 @@ export class CasinoTournamentDuration {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament start time"
       },
-      "attribute": "start-date",
+      "attribute": "start-time",
       "reflect": false
     },
-    "endDate": {
+    "endTime": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -139,12 +155,12 @@ export class CasinoTournamentDuration {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament end time"
       },
-      "attribute": "end-date",
+      "attribute": "end-time",
       "reflect": false
     },
     "status": {
@@ -156,10 +172,10 @@ export class CasinoTournamentDuration {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament status"
       },
       "attribute": "status",
       "reflect": false
@@ -172,11 +188,11 @@ export class CasinoTournamentDuration {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Widget language to show"
       },
       "attribute": "language",
       "reflect": false
@@ -190,10 +206,10 @@ export class CasinoTournamentDuration {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Client custom styling via inline styles"
       },
       "attribute": "client-styling",
       "reflect": false,
@@ -208,10 +224,10 @@ export class CasinoTournamentDuration {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Client custom styling via url"
       },
       "attribute": "client-styling-url",
       "reflect": false,
@@ -223,6 +239,7 @@ export class CasinoTournamentDuration {
     "tournamentLeftDays": {},
     "showRemain": {},
     "limitStylingAppends": {},
-    "stylingContainer": {}
+    "stylingContainer": {},
+    "durationInterval": {}
   }; }
 }

package/dist/components/casino-tournament-duration.js

@@ -88,29 +88,23 @@ const CasinoTournamentDuration$1 = /*@__PURE__*/ proxyCustomElement(class extend
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * 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);
-    };
   }
   getDateTimeDiff(dateString1, dateString2) {
     return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
   }
   getDuration() {
     const dateNow = new Date();
-    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endDate);
-    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startDate);
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startTime);
     this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   formatDate(date) {
@@ -142,16 +136,26 @@ const CasinoTournamentDuration$1 = /*@__PURE__*/ proxyCustomElement(class extend
   getProgress() {
     if (this.tournamentLeftDays <= 0)
       return 100;
-    const tournamentDuration = this.getDateTimeDiff(this.startDate, this.endDate);
+    const tournamentDuration = this.getDateTimeDiff(this.startTime, this.endTime);
     const step = 100 / tournamentDuration;
     const width = Math.floor((tournamentDuration - this.tournamentLeftDays) * step);
     return width;
   }
   componentWillLoad() {
-    if (this.startDate && this.endDate) {
+    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);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -162,20 +166,32 @@ const CasinoTournamentDuration$1 = /*@__PURE__*/ proxyCustomElement(class extend
       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);
+  }
   render() {
-    if (this.startDate && this.endDate) {
-      return h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TournamentDuration" }, h("div", { class: "TournamentDates" }, h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startDate)), h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endDate))), h("div", { class: "ProgressBarWrapper" }, h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
-        h("div", null, h("div", { class: "ProgressBarFillEnd" }), h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
+    if (this.startTime && this.endTime) {
+      return h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TournamentDuration" }, h("div", { class: "TournamentDates" }, h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startTime)), h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endTime))), h("div", { class: "ProgressBarWrapper" }, h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
+        h("div", null, h("div", { class: "ProgressBarFillEnd", part: "ProgressBarFillEnd" }), h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
         this.tournamentUntilStartDays > 0 ?
-          h("div", null, h("div", { class: "ProgressBarFillStarting" }), h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
+          h("div", null, h("div", { class: "ProgressBarFillStarting", part: "ProgressBarFillStarting" }), h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
           h("div", null, h("div", { class: "ProgressBarFill", part: "ProgressBarFill", style: { width: `${this.getProgress()}%` } }), this.tournamentLeftDays > 0 &&
             h("div", { class: "Remaining", part: "Remaining" }, this.showRemain, " ", translate('left', this.language)))))));
     }
   }
   static get style() { return casinoTournamentDurationCss; }
 }, [1, "casino-tournament-duration", {
-    "startDate": [1, "start-date"],
-    "endDate": [1, "end-date"],
+    "startTime": [1, "start-time"],
+    "endTime": [1, "end-time"],
     "status": [1],
     "language": [1],
     "clientStyling": [1, "client-styling"],
@@ -184,7 +200,8 @@ const CasinoTournamentDuration$1 = /*@__PURE__*/ proxyCustomElement(class extend
     "tournamentLeftDays": [32],
     "showRemain": [32],
     "limitStylingAppends": [32],
-    "stylingContainer": [32]
+    "stylingContainer": [32],
+    "durationInterval": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -86,29 +86,23 @@ const casinoTournamentDurationCss = ":host{display:block}.TournamentDates{displa
 const CasinoTournamentDuration = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * 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);
-    };
   }
   getDateTimeDiff(dateString1, dateString2) {
     return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
   }
   getDuration() {
     const dateNow = new Date();
-    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endDate);
-    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startDate);
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.tournamentUntilStartDays = this.getDateTimeDiff(dateNow, this.startTime);
     this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   formatDate(date) {
@@ -140,16 +134,26 @@ const CasinoTournamentDuration = class {
   getProgress() {
     if (this.tournamentLeftDays <= 0)
       return 100;
-    const tournamentDuration = this.getDateTimeDiff(this.startDate, this.endDate);
+    const tournamentDuration = this.getDateTimeDiff(this.startTime, this.endTime);
     const step = 100 / tournamentDuration;
     const width = Math.floor((tournamentDuration - this.tournamentLeftDays) * step);
     return width;
   }
   componentWillLoad() {
-    if (this.startDate && this.endDate) {
+    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);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -160,12 +164,24 @@ const CasinoTournamentDuration = 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);
+  }
   render() {
-    if (this.startDate && this.endDate) {
-      return h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TournamentDuration" }, h("div", { class: "TournamentDates" }, h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startDate)), h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endDate))), h("div", { class: "ProgressBarWrapper" }, h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
-        h("div", null, h("div", { class: "ProgressBarFillEnd" }), h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
+    if (this.startTime && this.endTime) {
+      return h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TournamentDuration" }, h("div", { class: "TournamentDates" }, h("div", { class: "StartDate", part: "StartDate" }, this.formatDate(this.startTime)), h("div", { class: "EndDate", part: "EndDate" }, this.formatDate(this.endTime))), h("div", { class: "ProgressBarWrapper" }, h("div", { class: "ProgressBar", part: "ProgressBar" }, this.status == 'Finished' || this.status == 'Closing' || this.status == 'Closed' ?
+        h("div", null, h("div", { class: "ProgressBarFillEnd", part: "ProgressBarFillEnd" }), h("div", { class: "Finished", part: "Finished" }, translate('finished', this.language))) :
         this.tournamentUntilStartDays > 0 ?
-          h("div", null, h("div", { class: "ProgressBarFillStarting" }), h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
+          h("div", null, h("div", { class: "ProgressBarFillStarting", part: "ProgressBarFillStarting" }), h("div", { class: "Remaining", part: "Remaining" }, translate('starting', this.language), " ", this.getTextByDiff(this.tournamentUntilStartDays))) :
           h("div", null, h("div", { class: "ProgressBarFill", part: "ProgressBarFill", style: { width: `${this.getProgress()}%` } }), this.tournamentLeftDays > 0 &&
             h("div", { class: "Remaining", part: "Remaining" }, this.showRemain, " ", translate('left', this.language)))))));
     }

package/dist/esm/casino-tournament-duration.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-tournament-duration",[[1,"casino-tournament-duration",{"startDate":[1,"start-date"],"endDate":[1,"end-date"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32]}]]]], options);
+  return bootstrapLazy([["casino-tournament-duration",[[1,"casino-tournament-duration",{"startTime":[1,"start-time"],"endTime":[1,"end-time"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32],"durationInterval":[32]}]]]], options);
 });

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-duration",[[1,"casino-tournament-duration",{"startDate":[1,"start-date"],"endDate":[1,"end-date"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32]}]]]], options);
+  return bootstrapLazy([["casino-tournament-duration",[[1,"casino-tournament-duration",{"startTime":[1,"start-time"],"endTime":[1,"end-time"],"status":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"tournamentUntilStartDays":[32],"tournamentLeftDays":[32],"showRemain":[32],"limitStylingAppends":[32],"stylingContainer":[32],"durationInterval":[32]}]]]], options);
   });
 };
 

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

@@ -1,23 +1,42 @@
 export declare class CasinoTournamentDuration {
-  startDate: string;
-  endDate: string;
-  status: string;
+  /**
+   * Tournament start time
+   */
+  startTime?: string;
+  /**
+   * Tournament end time
+   */
+  endTime?: string;
+  /**
+   * Tournament status
+   */
+  status?: string;
+  /**
+   * Widget language to show
+   */
   language: string;
-  clientStyling: string;
-  clientStylingUrl: string;
+  /**
+   * Client custom styling via inline styles
+   */
+  clientStyling?: string;
+  /**
+   * Client custom styling via url
+   */
+  clientStylingUrl?: string;
   tournamentUntilStartDays: number;
   tournamentLeftDays: number;
   showRemain: string;
   limitStylingAppends: boolean;
   stylingContainer: HTMLElement;
-  getDateTimeDiff(dateString1: any, dateString2: any): number;
+  durationInterval: number;
+  getDateTimeDiff(dateString1: any, dateString2: string): number;
   getDuration(): void;
-  formatDate(date: any): string;
-  getTextByDiff(diff: any): string;
+  formatDate(date: string): string;
+  getTextByDiff(diff: number): any;
   getProgress(): number;
   componentWillLoad(): void;
   componentDidRender(): void;
-  setClientStyling: () => void;
-  setClientStylingURL: () => void;
+  setClientStyling(): void;
+  setClientStylingURL(): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -7,12 +7,30 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface CasinoTournamentDuration {
-        "clientStyling": string;
-        "clientStylingUrl": string;
-        "endDate": string;
+        /**
+          * Client custom styling via inline styles
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url
+         */
+        "clientStylingUrl"?: string;
+        /**
+          * Tournament end time
+         */
+        "endTime"?: string;
+        /**
+          * Widget language to show
+         */
         "language": string;
-        "startDate": string;
-        "status": string;
+        /**
+          * Tournament start time
+         */
+        "startTime"?: string;
+        /**
+          * Tournament status
+         */
+        "status"?: string;
     }
 }
 declare global {
@@ -28,11 +46,29 @@ declare global {
 }
 declare namespace LocalJSX {
     interface CasinoTournamentDuration {
+        /**
+          * Client custom styling via inline styles
+         */
         "clientStyling"?: string;
+        /**
+          * Client custom styling via url
+         */
         "clientStylingUrl"?: string;
-        "endDate"?: string;
-        "language"?: string;
-        "startDate"?: string;
+        /**
+          * Tournament end time
+         */
+        "endTime"?: string;
+        /**
+          * Widget language to show
+         */
+        "language": string;
+        /**
+          * Tournament start time
+         */
+        "startTime"?: string;
+        /**
+          * Tournament status
+         */
         "status"?: string;
     }
     interface IntrinsicElements {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournament-duration",
-  "version": "1.20.0",
+  "version": "1.20.5",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-tournament-duration/p-05f4af89.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s}from"./p-efeaf265.js";const i=["ro","en","zh-hk","fr","hu","tr","el","es","pt"],e={en:{finished:"Finished",starting:"Starting in ",left:"left",minutes:"minutes",hours:"hours",days:"days"},"zh-hk":{finished:"完成的",starting:"開始於",left:"剩下",minutes:"分鐘",hours:"小時",days:"天"},fr:{finished:"Fini",starting:"Début dans ",left:"restant",minutes:"minutes",hours:"heures",days:"jours"},ro:{finished:"Finalizat",starting:"Începe în",left:"rămase",minutes:"minute",hours:"ore",days:"zile"},tr:{finished:"Sona ermiş",starting:"Başlamasına ",left:"kaldı",minutes:"dakika",hours:"saat",days:"gün"},el:{finished:"Ολοκληρωμένα",starting:"Αρχίζει σε ",left:"απομένουν",minutes:"λεπτά",hours:"ώρες",days:"ημέρες"},es:{finished:"Finalizado",starting:"Iniciando en ",left:"izquierda",minutes:"minutos",hours:"horas",days:"días"},hu:{finished:"Befejezve",starting:"Kezdésig",left:"bal",minutes:"perc",hours:"óra",days:"nap"},pt:{finished:"Finalizado",starting:"Começando em",left:"Abandonou",minutes:"Minutos",hours:"Horas",days:"Dias"}},r=(t,s)=>{const r=s;return e[void 0!==r&&i.includes(r)?r:"en"][t]},n=class{constructor(s){t(this,s),this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrl,this.stylingContainer.prepend(t)}),1)}}getDateTimeDiff(t,s){return(new Date(s).getTime()-new Date(t).getTime())/6e4}getDuration(){const t=new Date;this.tournamentLeftDays=this.getDateTimeDiff(t,this.endDate),this.tournamentUntilStartDays=this.getDateTimeDiff(t,this.startDate),this.showRemain=this.getTextByDiff(this.tournamentLeftDays)}formatDate(t){let s=new Date(t),i=new Intl.DateTimeFormat(this.language,{month:"long"}).format(s);return`${s.getDate()} ${i}, ${s.toLocaleString("en-GB",{hour:"numeric",minute:"numeric"})}, ${s.getUTCFullYear()}`}getTextByDiff(t){if(t<1440){const s=t%60;return[t/60,s,60*(s-Math.floor(s))].map((t=>(t=>{const s=Math.floor(t);return s<10?`0${s}`:`${s}`})(t))).join(":")}return Math.ceil(t/1440)+" "+r("days")}getProgress(){if(this.tournamentLeftDays<=0)return 100;const t=this.getDateTimeDiff(this.startDate,this.endDate);return Math.floor(100/t*(t-this.tournamentLeftDays))}componentWillLoad(){this.startDate&&this.endDate&&(this.getDuration(),this.getTextByDiff(this.tournamentLeftDays))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){if(this.startDate&&this.endDate)return s("div",{ref:t=>this.stylingContainer=t},s("div",{class:"TournamentDuration"},s("div",{class:"TournamentDates"},s("div",{class:"StartDate",part:"StartDate"},this.formatDate(this.startDate)),s("div",{class:"EndDate",part:"EndDate"},this.formatDate(this.endDate))),s("div",{class:"ProgressBarWrapper"},s("div",{class:"ProgressBar",part:"ProgressBar"},"Finished"==this.status||"Closing"==this.status||"Closed"==this.status?s("div",null,s("div",{class:"ProgressBarFillEnd"}),s("div",{class:"Finished",part:"Finished"},r("finished",this.language))):this.tournamentUntilStartDays>0?s("div",null,s("div",{class:"ProgressBarFillStarting"}),s("div",{class:"Remaining",part:"Remaining"},r("starting",this.language)," ",this.getTextByDiff(this.tournamentUntilStartDays))):s("div",null,s("div",{class:"ProgressBarFill",part:"ProgressBarFill",style:{width:`${this.getProgress()}%`}}),this.tournamentLeftDays>0&&s("div",{class:"Remaining",part:"Remaining"},this.showRemain," ",r("left",this.language)))))))}};n.style=":host{display:block}.TournamentDates{display:flex;justify-content:space-between}.StartDate{font-size:10px;font-weight:700;color:var(--emfe-w-color-gray-300, #58586B)}.EndDate{font-size:10px;font-weight:700;align-content:flex-end;color:var(--emfe-w-color-gray-300, #58586B)}.ProgressBar{margin:5px 0;height:8px;background:var(--emfe-w-color-white, #FFFFFF)}.ProgressBarInactive{margin:5px 20px 10px 20px;height:8px;background:var(--emfe-w-color-gray-100, #E6E6E6)}.ProgressBarFill{background-color:var(--emfe-w-color-green, #48952a);height:8px}.ProgressBarFillEnd{background-color:var(--emfe-w-color-green, #48952a);height:8px}.ProgressBarFillStarting{background-color:var(--emfe-w-color-gray-300, #58586B);height:8px}.Remaining,.Finished{font-size:10px;font-weight:700;padding-top:6px;text-align:right;text-transform:uppercase}.Finished{color:var(--emfe-w-color-green, #48952a)}";export{n as casino_tournament_duration}