@everymatrix/casino-tournaments-table 0.0.410 → 0.0.412

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-table",
-  "version": "0.0.410",
+  "version": "0.0.412",
   "main": "dist/casino-tournaments-table.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1382b42c7640e087088ead5f06ab6ae8d99f0668"
+  "gitHead": "915e53c91820558c3cedd66aa2fa8a4343a6d67b"
 }

package/src/CasinoTournamentsTable.svelte

@@ -14,6 +14,12 @@
   export let lang:String = 'en';
   export let fractiondigit: string = '2'
 
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+
+  let customStylingContainer: HTMLElement;
+  let displayNone:boolean = false;
+
   let columns:any = [];
   let data:any = [];
   let sortColumn:any = null;
@@ -180,6 +186,30 @@
     showTable = !showTable;
   }
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNone = true;
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+          setTimeout(() => { displayNone = false; }, 500);
+        }
+      });
+}
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
     return () => {
@@ -187,6 +217,8 @@
     }
   });
 
+  $: customStylingContainer && clientstyling && setClientStyling();
+  $: customStylingContainer && clientstylingurl && setClientStylingURL();
   $: display = sortColumn && sortDirection ? sortData() : [...data];
   $: sort = column === sortColumn ? sortDirection : null;
 
@@ -195,7 +227,7 @@
 
 {#if data.length > 0 || firstRowData}
   {#if isMobile(userAgent) == true}
-    <div class="TableContent" part="TableContent">
+    <div bind:this={customStylingContainer} class="TableContent" part="TableContent">
       <div class="TableUser TableHeadRow" part="TableUser TableHeadRow">
         {#each columns as column}
           <div class="TableCell Table{column}" part="TableCell Table{column}">
@@ -255,7 +287,7 @@
       {/if}
     </div>
   {:else}
-    <div class="TournamentsTable" part="TournamentsTable">
+    <div bind:this={customStylingContainer} class="TournamentsTable" part="TournamentsTable">
       <table class="LeftTable" part="LeftTable">
         <thead part="LeftTableThead">
           <tr part="LeftTableTr">
@@ -358,7 +390,7 @@
 {:else}
   {#if isMobile(userAgent) == true}
     {#if showTable}
-      <div class="TableContent" part="TableContent">
+      <div bind:this={customStylingContainer} class="TableContent" part="TableContent">
         <div class="TableUser" part="TableUser"><p>{$_('tournamentsTable.nowinners')}</p></div>
       </div>
     {/if}