@everymatrix/casino-engagement-suite-tournament 1.44.0 → 1.45.5

package/dist/esm/casino-engagement-suite-progress-bar_3.entry.js

@@ -1,830 +1,142 @@
-import { r as registerInstance, h, g as getElement, c as createEvent, H as Host, F as Fragment } from './index-4e611d33.js';
+import { r as registerInstance, h, g as getElement } from './index-3962add4.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-d8471680.js';
 
-const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:var(--emw--font-size-small, 14px);line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-gray-300, #666178);border-radius:var(--emw--border-radius-small, 4px);position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:var(--emw--border-radius-small, 4px);background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:var(--emw--font-weight-bold, 700);font-size:var(--emw--font-size-x-small, 12px);line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-gray-300, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const CasinoEngagementSuiteProgressBarStyle0 = casinoEngagementSuiteProgressBarCss;
 
 const CasinoEngagementSuiteProgressBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Value for the widget
-     */
-    this.value = 0;
-    /**
-     * Shows disabled styles
-     */
-    this.disabled = false;
-    /**
-     * Hide percent value
-     */
-    this.hidePercent = false;
-    /**
-     * Constantly animates
-     */
-    this.indeterminate = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.host.prepend(sheet);
-    };
-    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.host.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
-  }
-  componentDidRender() {
-    if (!this.limitStylingAppends && this.host) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-  }
-  getProgressBarClasses() {
-    return {
-      ProgressBar: true,
-      Completed: this.value === 100,
-      Disabled: this.disabled,
-      HidePercent: this.hidePercent || this.indeterminate
-    };
-  }
-  getProgressBarLineTemplate() {
-    if (this.indeterminate) {
-      return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
-    }
-    else {
-      return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
-    }
-  }
-  render() {
-    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
-  }
-  get host() { return getElement(this); }
-};
-CasinoEngagementSuiteProgressBar.style = casinoEngagementSuiteProgressBarCss;
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var Tab;
-(function (Tab) {
-  Tab["Info"] = "Info";
-  Tab["Leaderboard"] = "Leaderboard";
-  Tab["Games"] = "Games";
-})(Tab || (Tab = {}));
-var Time;
-(function (Time) {
-  Time["Starts"] = "Starts";
-  Time["Ends"] = "Ends";
-})(Time || (Time = {}));
-const localePostprocess = (translationText, props) => {
-  Object.keys(props).map(key => {
-    translationText = translationText.replace(`{${key}}`, props[key]);
-  });
-  return translationText;
-};
-const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', Unjoin: 'Unjoin' }, Tab), Time), { TC: 'Terms & Conditions', ScoreCriteria: 'Score Criteria', MinimumBetCriteria: 'Minimum bet criteria', Place: 'place', Prizes: 'Rewards', LeaderboardDetails: 'Leaderboard Details', UnjoinDialog: {
-    Title: 'Quit Leaderboard?',
-    Description: 'Any progress on the current Leaderboard won’t be kept and you can not rejoin the Leaderboard any more. <br /><br />Would you still like to quit?',
-    ButtonYes: 'Yes, I want to quit leaderboard',
-    ButtonNo: 'No, Stay on the leaderboard',
-  }, JoinDialog: {
-    Tile: 'Congratulations!',
-    Description: 'You have unlocked <span>{tournamentName}</span>! <br />Would you like to join?',
-    ButtonYes: 'Join',
-    ButtonNo: 'Not interested',
-  }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.' });
-
-const classnames = (...args) => {
-  let classnameArray = [];
-  args.map(arg => {
-    switch (typeof arg) {
-      case 'string':
-        classnameArray.push(arg);
-        break;
-      case 'object':
-        Object.keys(arg).map(k => {
-          if (arg[k]) {
-            classnameArray.push(k);
-          }
-        });
-        break;
-    }
-  });
-  return classnameArray.join(' ');
-};
-
-var LeaderboardPage;
-(function (LeaderboardPage) {
-  LeaderboardPage["Confirm"] = "Confirm";
-  LeaderboardPage["List"] = "List";
-  LeaderboardPage["Item"] = "Item";
-})(LeaderboardPage || (LeaderboardPage = {}));
-var TournamentState;
-(function (TournamentState) {
-  TournamentState["Running"] = "Running";
-  TournamentState["Unstarted"] = "Unstarted";
-  TournamentState["Closed"] = "Closed";
-  TournamentState["Closing"] = "Closing";
-})(TournamentState || (TournamentState = {}));
-var DialogType;
-(function (DialogType) {
-  DialogType["Unjoin"] = "Unjoin";
-  DialogType["Tip"] = "Tip";
-})(DialogType || (DialogType = {}));
-
-const GradientRoundedButton = (_a) => {
-  var { statedClasses, innerHTML } = _a, props = __rest(_a, ["statedClasses", "innerHTML"]);
-  const { isHollow, isPending } = statedClasses;
-  return (h("button", Object.assign({}, Object.assign({ class: classnames('GradientRoundedButton', 'GradientRounded', {
-      Hollow: isHollow || false,
-      Pending: isPending || false,
-    }) }, props)),
-    h("span", null, innerHTML)));
-};
-
-const iconClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg" });
-const iconQuestion = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg" });
-const iconEyeOpen = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg" });
-const iconEyeClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg" });
-const iconBack = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg" });
-const iconReward = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg" });
-const iconTrophy = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-congras.svg" });
-
-const CloseBar = (props) => {
-  const { left, middle, right } = props;
-  const slots = {
-    left,
-    middle,
-    right,
-  };
-  const getFirstLetterUppercase = (str) => str
-    .split('')
-    .map((letter, index) => index === 0 ? letter.toUpperCase() : letter)
-    .join('');
-  return (h("div", { class: "WrapperBar" }, Object.keys(slots).map(slotKey => (h("div", { class: "WrapperBar" + getFirstLetterUppercase(slotKey) }, slots[slotKey] || '')))));
-};
-
-function formatDate(date) {
-  const options = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false
-  };
-  return date.toLocaleDateString('en-US', options).replace(' at', ',');
-}
-function addSeconds(date, seconds) {
-  const result = new Date(date);
-  result.setSeconds(result.getSeconds() + seconds);
-  return result;
-}
-function getDifference(startDate, endDate) {
-  const diffMs = Math.abs(endDate.getTime() - startDate.getTime()); // Difference in milliseconds
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // Difference in days
-  const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Remaining hours
-  const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); // Remaining minutes
-  // Format the output
-  const formattedDiff = `${String(diffDays).padStart(2, '0')}d:${String(diffHours).padStart(2, '0')}h:${String(diffMinutes).padStart(2, '0')}m`;
-  return formattedDiff;
-}
-function getProgress(startDate, endDate) {
-  return (100 * (new Date().getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())).toFixed(0);
-}
-
-const tournamentAdapter = (tournamentApi) => {
-  const keysTime = [
-    'startTime',
-    'endTime',
-    'closeTime',
-    'exhibitionStartTime',
-    'exhibitionEndTime',
-  ];
-  const tournament = {};
-  Object.keys(tournamentApi).map((key) => {
-    const value = tournamentApi[key];
-    switch (key) {
-      case 'games':
-        tournament[key] = value.items;
-        break;
-      default:
-        tournament[key] = keysTime.includes(key) ? new Date(value) : value;
-    }
-  });
-  return tournament;
-};
-const leaderboardsAdapter = (leaderboardRes) => {
-  let { item, items: leaderboards } = leaderboardRes;
-  if (!item) {
-    return leaderboards;
-  }
-  return leaderboards.map(leaderboard => {
-    if (item && item.userID === leaderboard.userID) {
-      return Object.assign(Object.assign({}, leaderboard), { isMe: true });
-    }
-    else {
-      return leaderboard;
-    }
-  });
-};
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-createCommonjsModule(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){function t(){}function e(t){return t()}function n(){return Object.create(null)}function i(t){t.forEach(e);}function s(t){return "function"==typeof t}function o(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t,e,n){t.insertBefore(e,n||null);}function r(t){t.parentNode&&t.parentNode.removeChild(t);}function c(t){const e={};for(const n of t)e[n.name]=n.value;return e}let a;function d(t){a=t;}const u=[],f=[];let p=[];const h=[],$=Promise.resolve();let m=!1;function g(t){p.push(t);}
-// flush() calls callbacks in this order:
-// 1. All beforeUpdate callbacks, in order: parents before children
-// 2. All bind:this callbacks, in reverse order: children before parents.
-// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
-//    for afterUpdates called during the initial onMount, which are called in
-//    reverse order: children before parents.
-// Since callbacks might update component values, which could trigger another
-// call to flush(), the following steps guard against this:
-// 1. During beforeUpdate, any updated components will be added to the
-//    dirty_components array and will cause a reentrant call to flush(). Because
-//    the flush index is kept outside the function, the reentrant call will pick
-//    up where the earlier call left off and go through all dirty components. The
-//    current_component value is saved and restored so that the reentrant call will
-//    not interfere with the "parent" flush() call.
-// 2. bind:this callbacks cannot trigger new flush() calls.
-// 3. During afterUpdate, any updated components will NOT have their afterUpdate
-//    callback called a second time; the seen_callbacks set, outside the flush()
-//    function, guarantees this behavior.
-const y=new Set;let b=0;// Do *not* move this inside the flush() function
-function x(){
-// Do not reenter flush while dirty components are updated, as this can
-// result in an infinite loop. Instead, let the inner flush handle it.
-// Reentrancy is ok afterwards for bindings etc.
-if(0!==b)return;const t=a;do{
-// first, call beforeUpdate functions
-// and update components
-try{for(;b<u.length;){const t=u[b];b++,d(t),v(t.$$);}}catch(t){
-// reset dirty state to not end up in a deadlocked state and then rethrow
-throw u.length=0,b=0,t}for(d(null),u.length=0,b=0;f.length;)f.pop()();
-// then, once components are updated, call
-// afterUpdate functions. This may cause
-// subsequent updates...
-for(let t=0;t<p.length;t+=1){const e=p[t];y.has(e)||(
-// ...so guard against infinite loops
-y.add(e),e());}p.length=0;}while(u.length);for(;h.length;)h.pop()();m=!1,y.clear(),d(t);}function v(t){if(null!==t.fragment){t.update(),i(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(g);}}
-/**
-     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
-     */const _=new Set;function k(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];p.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),p=e;}(n.after_update),i(n.on_destroy),n.fragment&&n.fragment.d(e),
-// TODO null out other refs, including component.$$ (but need to
-// preserve final state?)
-n.on_destroy=n.fragment=null,n.ctx=[]);}function E(t,e){-1===t.$$.dirty[0]&&(u.push(t),m||(m=!0,$.then(x)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31;}function C(o,l,c,u,f,p,h,$=[-1]){const m=a;d(o);const y=o.$$={fragment:null,ctx:[],
-// state
-props:p,update:t,not_equal:f,bound:n(),
-// lifecycle
-on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(l.context||(m?m.$$.context:[])),
-// everything else
-callbacks:n(),dirty:$,skip_bound:!1,root:l.target||m.$$.root};h&&h(y.root);let b=!1;if(y.ctx=c?c(o,l.props||{},((t,e,...n)=>{const i=n.length?n[0]:e;return y.ctx&&f(y.ctx[t],y.ctx[t]=i)&&(!y.skip_bound&&y.bound[t]&&y.bound[t](i),b&&E(o,t)),e})):[],y.update(),b=!0,i(y.before_update),
-// `false` as a special case of no DOM component
-y.fragment=!!u&&u(y.ctx),l.target){if(l.hydrate){const t=function(t){return Array.from(t.childNodes)}(l.target);
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-y.fragment&&y.fragment.l(t),t.forEach(r);}else
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-y.fragment&&y.fragment.c();l.intro&&((v=o.$$.fragment)&&v.i&&(_.delete(v),v.i(k))),function(t,n,o,l){const{fragment:r,after_update:c}=t.$$;r&&r.m(n,o),l||
-// onMount happens before the initial afterUpdate
-g((()=>{const n=t.$$.on_mount.map(e).filter(s);
-// if the component was destroyed immediately
-// it will update the `$$.on_destroy` reference to `null`.
-// the destructured on_destroy may still reference to the old array
-t.$$.on_destroy?t.$$.on_destroy.push(...n):
-// Edge case - component was destroyed immediately,
-// most likely as a result of a binding initialising
-i(n),t.$$.on_mount=[];})),c.forEach(g);}(o,l.target,l.anchor,l.customElement),x();}var v,k;d(m);}let w;
-/* src/GeneralAnimationLoading.svelte generated by Svelte v3.59.2 */
-function L(e){let n;return {c(){var e;e="div",n=document.createElement(e),n.innerHTML='<section class="LoaderContainer" part="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>',this.c=t;},m(t,i){l(t,n,i),
-/*div5_binding*/e[3](n);},p:t,i:t,o:t,d(t){t&&r(n)
-/*div5_binding*/,e[3](null);}}}function T(t,e,n){let i,{clientstyling:s=""}=e,{clientstylingurl:o=""}=e;return t.$$set=t=>{"clientstyling"in t&&n(1,s=t.clientstyling),"clientstylingurl"in t&&n(2,o=t.clientstylingurl);},t.$$.update=()=>{/*clientstyling, customStylingContainer*/3&t.$$.dirty&&s&&i&&(()=>{let t=document.createElement("style");t.innerHTML=s,i.appendChild(t);})(),/*clientstylingurl, customStylingContainer*/5&t.$$.dirty&&o&&i&&(()=>{let t=new URL(o),e=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{e.innerHTML=t,setTimeout((()=>{i.appendChild(e);}),1),setTimeout((()=>{}),500);}));})();},[i,s,o,function(t){f[t?"unshift":"push"]((()=>{i=t,n(0,i);}));}]}"function"==typeof HTMLElement&&(w=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}connectedCallback(){const{on_mount:t}=this.$$;this.$$.on_disconnect=t.map(e).filter(s);
-// @ts-ignore todo: improve typings
-for(const t in this.$$.slotted)
-// @ts-ignore todo: improve typings
-this.appendChild(this.$$.slotted[t]);}attributeChangedCallback(t,e,n){this[t]=n;}disconnectedCallback(){i(this.$$.on_disconnect);}$destroy(){k(this,1),this.$destroy=t;}$on(e,n){
-// TODO should this delegate to addEventListener?
-if(!s(n))return t;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(n),()=>{const t=i.indexOf(n);-1!==t&&i.splice(t,1);}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1);}});class M extends w{constructor(t){super();const e=document.createElement("style");e.textContent=".LoaderContainer{display:flex;justify-content:center}.lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#d1d1d1;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}",this.shadowRoot.appendChild(e),C(this,{target:this.shadowRoot,props:c(this.attributes),customElement:!0},T,L,o,{clientstyling:1,clientstylingurl:2},null),t&&(t.target&&l(t.target,this,t.anchor),t.props&&(this.$set(t.props),x()));}static get observedAttributes(){return ["clientstyling","clientstylingurl"]}get clientstyling(){return this.$$.ctx[1]}set clientstyling(t){this.$$set({clientstyling:t}),x();}get clientstylingurl(){return this.$$.ctx[2]}set clientstylingurl(t){this.$$set({clientstylingurl:t}),x();}}return !customElements.get("general-animation-loading")&&customElements.define("general-animation-loading",M),M}));
-//# sourceMappingURL=general-animation-loading.js.map
-});
-
-const casinoEngagementSuiteTournamentCss = ".GradientRounded {\n  display: block;\n  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);\n  color: rgba(30, 22, 56, 1);\n  \n  position: relative;\n  border-radius: 16px;\n\n  &.Hollow {\n    background: rgba(30, 22, 56, 1);\n    color: #FFFFFF;\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: 15px;\n      border: 1px solid transparent;\n      background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;\n      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n      -webkit-mask-composite: destination-out;\n      mask-composite: exclude;\n    }\n\n  }\n}\n\n.GradientRoundedButton {\n  border: none;\n  padding: 7px;\n  \n  height: 32px;\n  width: 100%;\n  \n  font-size: 14px;\n  font-weight: 700;\n  line-height: 17.07px;\n  text-align: center;\n  \n  transition: .5s opacity;\n\n  cursor: pointer;\n  &.Pending {\n    cursor: not-allowed;\n    opacity: .3;\n  }\n\n  &.Hollow {\n    \n    span {\n      background: -webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n  }\n}\n.Wrapper {\n  height: 100%;\n  position: relative;\n  color: var(--emw--color-typography, #FFFFFF);\n  display: flex;\n  background-color: var(--emw--color-background, #1d1537);\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.WrapperContent {\n  padding-bottom: 20px;\n  transition: 0.5s filter;\n}\n.WrapperContent.faded {\n  filter: brightness(53.3333333333%);\n}\n\n.WrapperBar {\n  display: flex;\n  width: 100%;\n  padding: 12px 8px 8px;\n}\n\n.WrapperBarLeft, .WrapperBarRight {\n  cursor: pointer;\n}\n\n.WrapperBarMiddle {\n  flex-grow: 1;\n  text-align: center;\n  font-size: 16px;\n  line-height: 16px;\n  font-weight: 500;\n  color: var(--emw--color-secondary, #bbb9c3);\n}\n\n:host {\n  display: block;\n  font-size: 12px;\n  font-family: Inter;\n}\n\n.Row {\n  margin: 24px 0;\n  padding: 0 20px;\n}\n\n.LeaderboardsItem {\n  margin: 10px 0;\n  border: 1px solid #403956;\n  border-radius: 16px;\n}\n.LeaderboardsItem.Hollow {\n  border-color: transparent;\n}\n\n.LeaderboardsItemContainer {\n  padding-top: 16px;\n}\n\n.Info {\n  margin: 24px 0;\n  padding: 0 20px;\n}\n\n.TimeContainer {\n  margin: 24px 0;\n  padding: 0 20px;\n}\n.TimeContainer .Time {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  align-items: center;\n  color: var(--emw--color-secondary, #bbb9c3);\n}\n.TimeContainer .Time button {\n  font-size: 12px;\n  height: 20px;\n  padding: 0;\n}\n.TimeContainer .Time button::before {\n  inset: inherit;\n  border: 0;\n}\n\n.ShowInfo {\n  margin: 24px 0;\n  padding: 0 20px;\n  cursor: pointer;\n  color: #666178;\n}\n.ShowInfo p {\n  display: flex;\n  gap: 4px;\n}\n\n.TitleContainer {\n  display: flex;\n  justify-content: space-between;\n  margin: 24px 0;\n  padding: 0 20px;\n  margin-top: 0;\n  gap: 10px;\n  font-family: Montserrat;\n}\n.TitleContainer .GradientRoundedButton {\n  width: 120px;\n}\n\n.TabsContainer {\n  margin: 24px 0;\n  padding: 0 20px;\n  margin: 0 20px;\n  padding: 0;\n  border-bottom: 1px solid #575757;\n}\n\n.Tabs {\n  display: flex;\n  justify-content: space-between;\n  justify-content: start;\n  font-size: 12px;\n  margin-bottom: -1px;\n}\n.Tabs > div {\n  padding: 10px;\n  color: #666178;\n  cursor: pointer;\n}\n.Tabs > div.active {\n  color: var(--emw--color-typography, #FFF);\n  border-bottom: 2px solid var(--emw--color-typography, #FFF);\n}\n\n.Title {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 19.5px;\n  text-align: left;\n  word-break: break-word;\n}\n\n.TC {\n  margin-top: 12px;\n}\n.TC a {\n  color: #59d1ff;\n}\n\n.Criterias {\n  margin: 12px 0;\n}\n.Criterias span {\n  color: var(--emw--color-primary, #ffd62f);\n  font-weight: 400;\n}\n\n.ResultPrize {\n  margin: 24px 0;\n  padding: 0 20px;\n}\n.ResultPrize span {\n  color: var(--emw--color-primary, #ffd62f);\n  font-weight: 400;\n}\n\n.Prizes {\n  margin: 24px 0;\n  padding: 0 20px;\n}\n.Prizes .PrizesText {\n  margin-left: 3px;\n  font-weight: 600;\n}\n.Prizes .PrizesHeader {\n  align-items: center;\n  display: flex;\n}\n.Prizes .PrizesHeader img {\n  width: 12px;\n}\n.Prizes .Prize {\n  margin: 8px 0;\n}\n.Prizes .Prize .PrizeText {\n  color: var(--emw--color-primary, #ffd62f);\n  font-weight: 400;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.Leaderboards {\n  width: 100%;\n  text-align: center;\n  border-collapse: collapse;\n}\n.Leaderboards td {\n  opacity: 0.6;\n  padding: 20px 5px;\n}\n.Leaderboards td:first-child {\n  padding-left: 20px;\n}\n.Leaderboards td:last-child {\n  padding-right: 20px;\n}\n.Leaderboards .LeaderboardName {\n  color: var(--emw--color-typography, #FFF);\n  opacity: 1;\n}\n.Leaderboards tr.isMe {\n  background: rgba(0, 0, 0, 0.2);\n}\n.Leaderboards tr.isMe .LeaderboardRank span {\n  padding: 0px 3px;\n  opacity: 1;\n  border: 1px solid var(--emw--color-primary, #ffd62f);\n  border-radius: 11px;\n}\n.Leaderboards tr.isMe td {\n  color: var(--emw--color-primary, #ffd62f);\n}\n\n.Games {\n  margin: 24px 0;\n  padding: 0 20px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-evenly;\n  gap: 4px 7.25px;\n}\n.Games img {\n  width: 60px;\n}\n\ndialog {\n  position: absolute;\n  top: 30px;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: var(--emw--color-typography, #FFFFFF);\n}\ndialog > div {\n  margin: 32px;\n  border-radius: 8px;\n  background: var(--emw--color-background, #1d1537);\n  border: 1px solid #403956;\n  align-items: center;\n}\n\n.DialogContentUnjoin {\n  padding: 32px;\n  padding-top: 10px;\n  display: flex;\n  gap: 10px;\n  flex-direction: column;\n}\n\n.DialogContentUnjoinTitle {\n  font-family: Montserrat;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: 24.38px;\n  text-align: center;\n}\n\n.DialogContentUnjoinDescription {\n  color: var(--emw--color-secondary, #bbb9c3);\n  margin-bottom: 30px;\n}\n\n.Tip {\n  padding: 32px;\n  padding-top: 10px;\n  color: var(--emw--color-secondary, #bbb9c3);\n  font-size: 14px;\n}\n\n.PageConfirmContainer {\n  text-align: center;\n  width: 80%;\n  margin: 0 auto;\n}\n\n.PageConfirm {\n  padding: 40px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n.PageConfirm .Title {\n  font-size: 20px;\n  text-align: center;\n}\n.PageConfirm .Description {\n  color: var(--emw--color-secondary, #bbb9c3);\n  font-weight: 400;\n}\n.PageConfirm .Description span {\n  color: var(--emw--color-typography, #FFF);\n  font-weight: 600;\n}\n\n.PageConfirmButtonsGroup {\n  width: 150px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}";
-
-const CasinoEngagementSuiteTournament = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.tab = Tab.Info;
-    this.locale = TRANSLATIONS;
-    this.tournamentItem = undefined;
-    this.tournamentList = undefined;
-    this.leaderboards = [];
-    this.isActionJoinPending = false;
-    this.isDialogOpen = false;
-    this.isShowInfo = false;
-    this.page = LeaderboardPage.List;
-    this.tournamentInDialog = undefined;
-    this.dialog = {
-      isOpen: false,
-      type: undefined,
-      data: undefined,
-    };
-    this.time = 0;
-    this.onClickConfirmJoin = () => {
-      this.actionJoin(this.tournamentItem);
-      this.nextPage = LeaderboardPage.List;
-    };
-    this.onClickConfirmUnjoin = () => {
-      this.close.emit();
-    };
-    this.onClickDialogUnjoin = () => {
-      this.actionJoin(this.dialog.data);
-      this.closeDialog();
-    };
-    this.onClickDialogJoin = () => {
-      this.closeDialog();
-    };
-    this.onClickBarInLayout = () => {
-      this.close.emit();
-    };
-    this.onClickBarInLayoutDialog = () => {
-      this.closeDialog();
-    };
-    this.onClickShowInfo = () => {
-      this.isShowInfo = !this.isShowInfo;
-    };
-    this.onClickBarTip = () => {
-      this.openDialog(DialogType.Tip);
-    };
-    this.onClickBarBack = () => {
-      this.setPage(LeaderboardPage.List);
-    };
-  }
-  setTimeInterval() {
-    this.timeHolder = setInterval(() => {
-      if (this.tournamentList || this.tournamentItem) {
-        this.time += 1;
-      }
-      else {
-        this.time = 0;
-      }
-    }, 1000);
-  }
-  updateTournamentListByItem(tournament) {
-    this.tournamentList = this.tournamentList.map((_tournament) => {
-      if (_tournament.id === tournament.id) {
-        return tournamentAdapter(tournament);
-      }
-      else {
-        return _tournament;
-      }
-    });
-  }
-  handleEvent(e) {
-    const _a = e.data, { type } = _a, rest = __rest(_a, ["type"]);
-    switch (type) {
-      case 'ShowLeaderboardRewardModal': {
-        const { tournament } = rest;
-        this.setPage(LeaderboardPage.Confirm, { tournament: tournamentAdapter(tournament) });
-        postMessage({ type: 'BarLeaderboardsClick' });
-        break;
-      }
-      case 'UpdateTournamentsItemRes': {
-        const tournamentNew = tournamentAdapter(rest.data.item);
-        this.tournamentItem = tournamentNew;
-        this.updateTournamentListByItem(tournamentNew);
-        break;
-      }
-      case 'UpdateLeaderboardsRes': {
-        this.leaderboards = leaderboardsAdapter(rest.data);
-        break;
-      }
-      case 'JoinTournamentRes':
-      case 'UnjoinTournamentRes':
-        const { success } = rest;
-        if (success) {
-          this.tournamentItem = Object.assign(Object.assign({}, this.tournamentItem), { playerEnrolled: !!!this.tournamentItem.playerEnrolled });
-          switch (this.page) {
-            case LeaderboardPage.Item: {
-              break;
-            }
-            case LeaderboardPage.List: {
-              this.updateTournamentListByItem(this.tournamentItem);
-              break;
-            }
-          }
-        }
-        if (this.nextPage) {
-          this.setPage(this.nextPage);
-          this.nextPage = undefined;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.host.prepend(sheet);
+        };
+        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.host.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('Error ', err);
+            });
+        };
+        this.value = 0;
+        this.disabled = false;
+        this.hidePercent = false;
+        this.indeterminate = false;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.limitStylingAppends = false;
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
         }
-        this.isActionJoinPending = false;
-        break;
     }
-  }
-  get messageSender() {
-    return {
-      JoinTournamentReq: (tournament) => { var _a; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_a = tournament.wallets[0]) === null || _a === void 0 ? void 0 : _a.code }); },
-      UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
-      UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
-      UpdateLeaderboardsReq: (tournament) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id }),
-    };
-  }
-  connectedCallback() {
-    this.setTimeInterval();
-  }
-  disconnectedCallback() {
-    clearInterval(this.timeHolder);
-  }
-  actionJoin(tournament) {
-    if (this.isActionJoinPending)
-      return;
-    this.isActionJoinPending = true;
-    try {
-      if (tournament.playerEnrolled) {
-        this.messageSender.UnjoinTournamentReq(tournament);
-      }
-      else {
-        this.messageSender.JoinTournamentReq(tournament);
-      }
-    }
-    catch (e) {
-      console.log('error', e);
-      return;
+    getProgressBarClasses() {
+        return {
+            ProgressBar: true,
+            Completed: this.value === 100,
+            Disabled: this.disabled,
+            HidePercent: this.hidePercent || this.indeterminate
+        };
     }
-  }
-  isTournamentClosed(tournament) {
-    return [
-      TournamentState.Closed,
-      TournamentState.Closing
-    ].includes(tournament.state);
-  }
-  setPage(page, metaData) {
-    switch (page) {
-      case LeaderboardPage.Confirm:
-      case LeaderboardPage.Item:
-        this.tournamentItem = metaData.tournament;
-        if (!this.tournamentItem) {
-          this.messageSender.UpdateTournamentsItemReq(metaData.tournament);
+    getProgressBarLineTemplate() {
+        if (this.indeterminate) {
+            return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
         }
-        if (this.isTournamentClosed(this.tournamentItem)) {
-          this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
+        else {
+            return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
         }
-        break;
-    }
-    this.tab = Tab.Info;
-    this.page = page;
-  }
-  renderPage() {
-    switch (this.page) {
-      case LeaderboardPage.Confirm: return this.renderPageConfirm();
-      case LeaderboardPage.Item: return this.renderPageLeaderboardItem();
-      case LeaderboardPage.List: return this.renderPageLeaderboardList();
-    }
-  }
-  render() {
-    return (h(Host, null, h("general-styling-wrapper", { clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
-      // @ts-ignore
-      targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renderPage()));
-  }
-  onClickListItemChangePage(tournament) {
-    this.setPage(LeaderboardPage.Item, { tournament });
-  }
-  onClickItemJoin(tournament, e) {
-    e.stopPropagation();
-    if (tournament.playerEnrolled) {
-      this.openDialog(DialogType.Unjoin, tournament);
-    }
-    else {
-      this.actionJoin(tournament);
-      this.tournamentItem = tournament;
-    }
-  }
-  onClickTab(tab) {
-    this.tab = tab;
-    switch (tab) {
-      case Tab.Leaderboard:
-        this.leaderboards = undefined;
-        this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
-        break;
-      case Tab.Games:
-        this.messageSender.UpdateTournamentsItemReq(this.tournamentItem);
-        break;
-    }
-  }
-  renderPageLeaderboardList() {
-    var _a;
-    if (!this.tournamentList) {
-      this.tournamentList = (_a = this.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map(item => tournamentAdapter(item));
-      return h("general-animation-loading", null);
-    }
-    const { locale } = this;
-    if (this.tournamentList.length) {
-      return this.renderLeaderboardContainer(h(Fragment, null, h("div", { class: "Leaderboards Row" }, this.tournamentList.map(_tournament => (h("div", { class: classnames("LeaderboardsItem", _tournament.playerEnrolled ? ' GradientRounded Hollow' : ''), onClick: this.onClickListItemChangePage.bind(this, _tournament) }, h("div", { class: "LeaderboardsItemContainer" }, this.renderTitleContainer(_tournament), this.renderTimeBar(_tournament))))))));
     }
-    else {
-      return (h("div", { class: "NoLeaderboards Row" }, h("div", null, locale.NoLeaderboards), h("div", null, locale.NoLeaderboardsTip)));
+    render() {
+        return h("div", { key: 'ecce3a26a92d2e090c1db84bdc1bdbeb505080ed', class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { key: '649fe1103d222200f2a1ad3b5967e37da1f1ab3d', class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { key: '49dc180eedd823f0027f75099813fb9d91bcd938', name: "Title" }, h("div", { key: 'e6e59da3fe7bbcb37e118e7fd23a8ff35587aca5' })), h("slot", { key: '3dc8e5fd1dbc8c268b9c76e393b751cb53605e7e', name: "Percent" }, h("div", { key: '6a9e880f3ee3c4f26e8577c69be5db5f8e2d10ad', class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { key: '141106e77caad7b04bb199f911e87c0c6f0adc2d', class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
     }
-  }
-  renderPageConfirm() {
-    if (!this.tournamentItem)
-      return h("general-animation-loading", null);
-    const tournamentName = this.tournamentItem.nameOrTitle;
-    const { locale } = this;
-    return (h("div", { class: "PageConfirmContainer" }, h("div", { class: "GradientRounded Hollow PageConfirm" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.JoinDialog.Tile), h("div", { class: "Description", innerHTML: localePostprocess(locale.JoinDialog.Description, { tournamentName }) }), h("div", { class: "PageConfirmButtonsGroup" }, h(GradientRoundedButton, Object.assign({}, {
-      statedClasses: {
-        isPending: this.isActionJoinPending,
-      },
-      onClick: this.onClickConfirmJoin,
-      innerHTML: locale.JoinDialog.ButtonYes,
-    })), h(GradientRoundedButton, Object.assign({}, {
-      statedClasses: {
-        isPending: this.isActionJoinPending,
-        isHollow: true,
-      },
-      onClick: this.onClickConfirmUnjoin,
-      innerHTML: locale.JoinDialog.ButtonNo,
-    }))))));
-  }
-  renderPageLeaderboardItem() {
-    if (!this.tournamentItem)
-      return h("general-animation-loading", null);
-    return this.renderLeaderboardContainer(h(Fragment, null, this.renderTitleContainer(this.tournamentItem), this.renderTabs(), this.renderTabbedContent()));
-  }
-  renderDialogContent() {
-    switch (this.dialog.type) {
-      case DialogType.Unjoin:
-        return this.renderDialogContentUnjoin();
-      case DialogType.Tip:
-        return (h("div", { class: "Tip" }, this.locale.Tip));
-    }
-  }
-  renderDialogContentUnjoin() {
-    const { locale } = this;
-    return (h("div", { class: "DialogContentUnjoin" }, h("div", { class: "DialogContentUnjoinTitle" }, locale.UnjoinDialog.Title), h("div", { class: "DialogContentUnjoinDescription", innerHTML: locale.UnjoinDialog.Description }), h(GradientRoundedButton, Object.assign({}, {
-      statedClasses: {
-        isPending: this.isActionJoinPending,
-      },
-      onClick: this.onClickDialogUnjoin,
-      innerHTML: locale.UnjoinDialog.ButtonYes,
-    })), h(GradientRoundedButton, Object.assign({}, {
-      statedClasses: {
-        isHollow: true,
-        isPending: this.isActionJoinPending,
-      },
-      onClick: this.onClickDialogJoin,
-      innerHTML: locale.UnjoinDialog.ButtonNo,
-    }))));
-  }
-  renderTitleContainer(tournament) {
-    const { locale } = this;
-    return (h("div", { class: "TitleContainer" }, h("div", { class: "Title" }, tournament.nameOrTitle), tournament.state !== TournamentState.Closed && (h("div", null, h(GradientRoundedButton, Object.assign({}, {
-      statedClasses: {
-        isHollow: tournament.playerEnrolled,
-        isPending: this.isActionJoinPending,
-      },
-      onClick: this.onClickItemJoin.bind(this, tournament),
-      innerHTML: tournament.playerEnrolled ? locale.Unjoin : locale.Join,
-    }))))));
-  }
-  renderTabbedContent() {
-    switch (this.tab) {
-      case Tab.Info: return this.renderInfo();
-      case Tab.Leaderboard: return this.renderLeaderboard();
-      case Tab.Games: return this.renderGames();
-    }
-  }
-  renderGames() {
-    var _a;
-    return (h("div", { class: "Games" }, (_a = this.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map(game => (h("div", null, h("img", { src: game.defaultThumbnail, alt: "" }))))));
-  }
-  renderLeaderboard() {
-    if (!this.leaderboards)
-      return h("general-animation-loading", null);
-    if (!this.leaderboards.length)
-      return '';
-    return (h("table", { class: "Leaderboards" }, this.leaderboards.map(leaderboard => (h("tr", { class: classnames({ isMe: leaderboard.isMe }) }, h("td", { class: "LeaderboardRank" }, h("span", null, leaderboard.rank)), h("td", { class: "LeaderboardName" }, leaderboard.shortName), h("td", { class: "LeaderboardScore" }, leaderboard.score), h("td", { class: "LeaderboardPrize" }, leaderboard.prizeName))))));
-  }
-  renderTabs() {
-    const { locale, tab } = this;
-    return (h("div", { class: "TabsContainer" }, h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", Object.assign({}, {
-      class: classnames({ active: tab === _tab }),
-      onClick: this.onClickTab.bind(this, _tab)
-    }), locale[_tab]))))));
-  }
-  renderTimeBar(tournament) {
-    return (h("section", { class: "TimeContainer" }, h("div", { class: 'Time' }, tournament.playerEnrolled ? (h(Fragment, null, h("div", null, getDifference(addSeconds(tournament.startTime, this.time), tournament.endTime)), h("div", null, h(GradientRoundedButton, { statedClasses: {
-        isHollow: true,
-        isPendding: false,
-      }, innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%` })))) : (h(Fragment, null, h("div", null, formatDate(tournament.startTime)), h("div", null, formatDate(tournament.endTime))))), h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
-  }
-  renderInfo() {
-    var _a, _b;
-    const { locale, tournamentItem: tournament, isShowInfo } = this;
-    return (h("div", { class: "InfoContainer" }, this.renderTimeBar(tournament), (h("section", { class: "ShowInfo", onClick: this.onClickShowInfo }, h("p", null, h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen), h("span", null, locale.LeaderboardDetails)))), isShowInfo && (h("section", { class: "Info" }, h("div", null, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: '_blank' }, locale.TC)))), this.isTournamentClosed(this.tournamentItem) && ((_a = this.leaderboards) === null || _a === void 0 ? void 0 : _a.find(l => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, this.getResultPrize((_b = this.leaderboards) === null || _b === void 0 ? void 0 : _b.find(l => l.isMe))) })), h("section", { class: "Prizes" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))));
-  }
-  getResultPrize(leaderboard) {
-    return {
-      prize: leaderboard.prizeName,
-      place: leaderboard.rank,
-    };
-  }
-  renderCloseBarInLayout() {
-    const { left, middle } = this.getWrapperBarData();
-    return (h(CloseBar, Object.assign({}, { left, middle,
-      right: (h("span", Object.assign({}, { onClick: this.onClickBarInLayout }), iconClose))
-    })));
-  }
-  renderCloseBarInLayoutDialog() {
-    return (h(CloseBar, Object.assign({}, {
-      right: (h("span", Object.assign({}, { onClick: this.onClickBarInLayoutDialog }), iconClose))
-    })));
-  }
-  renderLeaderboardContainer(render) {
-    const { dialog: { isOpen } } = this;
-    return (h("div", { class: "Wrapper" }, h("div", { class: classnames("WrapperContent", { faded: isOpen }) }, this.renderCloseBarInLayout(), h("div", { class: "Root" }, h("div", { class: "Main" }, render))), h("div", { class: "WrapperUtil" }, h("dialog", { open: isOpen }, h("div", null, this.renderCloseBarInLayoutDialog(), isOpen && this.renderDialogContent())))));
-  }
-  getWrapperBarData() {
-    const { page, locale } = this;
-    switch (page) {
-      case LeaderboardPage.List:
-        return {
-          left: h("span", { onClick: this.onClickBarTip }, iconQuestion),
-          middle: locale.Leaderboards
-        };
-      case LeaderboardPage.Item:
-        return {
-          left: (h("span", { onClick: this.onClickBarBack }, iconBack)),
-          middle: '',
-        };
-    }
-  }
-  openDialog(type, data = undefined) {
-    this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, type, data });
-  }
-  closeDialog() {
-    this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false });
-  }
+    get host() { return getElement(this); }
 };
-CasinoEngagementSuiteTournament.style = casinoEngagementSuiteTournamentCss;
+CasinoEngagementSuiteProgressBar.style = CasinoEngagementSuiteProgressBarStyle0;
 
 const mergeTranslations = (url, target) => {
-  return new Promise((resolve) => {
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-      Object.keys(data).forEach((item) => {
-        target[item] = target[item] ? target[item] : {};
-        for (let key in data[item]) {
-          target[item][key] = data[item][key];
-        }
-      });
-      resolve(true);
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                target[item] = target[item] ? target[item] : {};
+                for (let key in data[item]) {
+                    target[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
     });
-  });
 };
 
 const generalStylingWrapperCss = ":host{display:block}";
+const GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
 
 const GeneralStylingWrapper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Client custom styling via inline styles
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.stylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.el.prepend(sheet);
-    };
-    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.el.prepend(cssFile);
-        }, 1);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.stylingAppends) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingAppends = false;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.el.prepend(sheet);
+        };
+        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.el.prepend(cssFile);
+                }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.targetTranslations = undefined;
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    async componentWillLoad() {
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
+            promises.push(translationPromise);
+        }
+        return await Promise.all(promises);
     }
-    // end custom styling area
-  }
-  async componentWillLoad() {
-    const promises = [];
-    if (this.translationUrl) {
-      const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
-      promises.push(translationPromise);
+    render() {
+        return (h("div", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
     }
-    return await Promise.all(promises);
-  }
-  render() {
-    return (h("div", { class: "StyleShell" }, h("slot", { name: "mainContent" })));
-  }
-  get el() { return getElement(this); }
+    get el() { return getElement(this); }
 };
-GeneralStylingWrapper.style = generalStylingWrapperCss;
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
 
-export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar, CasinoEngagementSuiteTournament as casino_engagement_suite_tournament, GeneralStylingWrapper as general_styling_wrapper };
+export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar, GeneralStylingWrapper as general_styling_wrapper };