@everymatrix/player-bonus-history 1.0.15 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-bonus-history",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "main": "dist/player-bonus-history",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ee1d4bccc4964628711251119148f0a04ba10df"
+  "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
 }

package/src/PlayerBonusHistory.svelte

@@ -13,8 +13,11 @@
   export let session:string = '';
   export let playerid:string = '';
   export let lang:string = 'en';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
   export let translationUrl:string = '';
 
+  let customStylingContainer:HTMLElement;
   let isLoading:boolean = false;
   let userAgent:string = window.navigator.userAgent;
   let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
@@ -122,86 +125,113 @@
     setLocale(lang);
   }
 
+  const setClientStyling = ():void => {
+    let sheet:HTMLElement = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    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
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
   $: lang && initialLoad();
   $: startCalendar && endCalendar && setCalendarEventListener();
   $: session && playerid && endpoint && getBonuses(0);
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
   $: translationUrl && setTranslationUrl();
 </script>
 
-{#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
-{:else}
-  <div class="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}" part="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}">
-    {#if isMobile}
-      <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
-          <g transform="translate(20 158)">
-            <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
-          </g></g>
-        </svg>
-        <h2 class="BonusesTitleMobile" part="BonusesTitleMobile">{$_('bonusHistory.title')}</h2>
-      </div>
-    {/if}
-    <h2 class="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}" part="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}">{$_('bonusHistory.title')}</h2>
-
-    <div class="BonusCalendarWrapper {isMobile ? 'BonusCalendarWrapperMobile' : ''}" part="BonusCalendarWrapper {isMobile ? 'BonusCalendarWrapperMobile' : ''}">
-      <div class="BonusesCalendarContainer {isMobile ? 'BonusesCalendarContainerMobile' : ''}" part="BonusesCalendarContainer {isMobile ? 'BonusesCalendarContainerMobile' : ''}">
-        <div class="BonusesCalendarStartDate {isMobile ? 'BonusesCalendarMobile' : ''}" part="BonusesCalendarStartDate {isMobile ? 'BonusesCalendarMobile' : ''}">
-          <label for="BonusCalendarStartDate">{$_('bonusHistory.dateFrom')}</label>
-          <vaadin-date-picker bind:this={startCalendar} max={maxDate} value={lastMonth} placeholder="From" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+<div bind:this={customStylingContainer}>
+  {#if isLoading}
+    <div class="ModalLoader" part="ModalLoader"></div>
+  {:else}
+    <div class="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}" part="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}">
+      {#if isMobile}
+        <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
+            <g transform="translate(20 158)">
+              <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
+            </g></g>
+          </svg>
+          <h2 class="BonusesTitleMobile" part="BonusesTitleMobile">{$_('bonusHistory.title')}</h2>
         </div>
-        <div class="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}" part="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}">
-          <label for="BonusesCalendarEndDate">{$_('bonusHistory.dateTo')}</label>
-          <vaadin-date-picker bind:this={endCalendar} max={maxDate} value={maxDate} placeholder="To" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+      {/if}
+      <h2 class="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}" part="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}">{$_('bonusHistory.title')}</h2>
+
+      <div class="BonusCalendarWrapper {isMobile ? 'BonusCalendarWrapperMobile' : ''}" part="BonusCalendarWrapper {isMobile ? 'BonusCalendarWrapperMobile' : ''}">
+        <div class="BonusesCalendarContainer {isMobile ? 'BonusesCalendarContainerMobile' : ''}" part="BonusesCalendarContainer {isMobile ? 'BonusesCalendarContainerMobile' : ''}">
+          <div class="BonusesCalendarStartDate {isMobile ? 'BonusesCalendarMobile' : ''}" part="BonusesCalendarStartDate {isMobile ? 'BonusesCalendarMobile' : ''}">
+            <label for="BonusCalendarStartDate">{$_('bonusHistory.dateFrom')}</label>
+            <vaadin-date-picker bind:this={startCalendar} max={maxDate} value={lastMonth} placeholder="From" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+          </div>
+          <div class="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}" part="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}">
+            <label for="BonusesCalendarEndDate">{$_('bonusHistory.dateTo')}</label>
+            <vaadin-date-picker bind:this={endCalendar} max={maxDate} value={maxDate} placeholder="To" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+          </div>
         </div>
+        <button class="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" part="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" on:click={() => getBonuses(0)}>{$_('bonusHistory.dateFilter')}</button>
       </div>
-      <button class="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" part="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" on:click={() => getBonuses(0)}>{$_('bonusHistory.dateFilter')}</button>
-    </div>
-    <div class="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}" part="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}">
-      {#if bonusesList.length === 0}
-        <p>{$_('bonusHistory.noBonusHistory')}</p>
-      {:else}
-        {#each bonusesList as bonus}
-          {#if bonus.type === 'freeRound'}
-            <player-bonus-card
-              bonuswalletid={bonus.walletId}
-              bonusdate={bonus.granted}
-              bonusstatus={bonus.status}
-              bonusname={bonus.name}
-              bonustype={bonus.type}
-              bonuscurrency={bonus.currency}
-              {lang}
-            ></player-bonus-card>
-          {:else}
-            <player-bonus-card
-              bonuswalletid={bonus.walletId}
-              bonusdate={bonus.granted}
-              bonusstatus={bonus.status}
-              bonusname={bonus.name}
-              bonustype={bonus.type}
-              bonusamount={bonus.grantedAmount}
-              bonuswageringamount={bonus.totalWR}
-              bonusremainingamount={bonus.currentAmount}
-              bonuscurrency={bonus.currency}
-              {lang}
-            ></player-bonus-card>
-          {/if}
-        {/each}
+      <div class="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}" part="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}">
+        {#if bonusesList.length === 0}
+          <p>{$_('bonusHistory.noBonusHistory')}</p>
+        {:else}
+          {#each bonusesList as bonus}
+            {#if bonus.type === 'freeRound'}
+              <player-bonus-card
+                bonuswalletid={bonus.walletId}
+                bonusdate={bonus.granted}
+                bonusstatus={bonus.status}
+                bonusname={bonus.name}
+                bonustype={bonus.type}
+                bonuscurrency={bonus.currency}
+                {lang}
+                {clientstyling}
+                {clientstylingurl}
+              ></player-bonus-card>
+            {:else}
+              <player-bonus-card
+                bonuswalletid={bonus.walletId}
+                bonusdate={bonus.granted}
+                bonusstatus={bonus.status}
+                bonusname={bonus.name}
+                bonustype={bonus.type}
+                bonusamount={bonus.grantedAmount}
+                bonuswageringamount={bonus.totalWR}
+                bonusremainingamount={bonus.currentAmount}
+                bonuscurrency={bonus.currency}
+                {lang}
+                {clientstyling}
+                {clientstylingurl}
+              ></player-bonus-card>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+      {#if bonusesList.length !== 0}
+        <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
+          <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getBonuses(0)}>&vert;&lt;</span>
+          <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesPrevPage)}>&lt;</span>
+          {#each Array(numberOfPages) as _, i}
+            <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getBonuses(i*bonusesPerPage)}>{i+1}</span>
+          {/each}
+          <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesNextPage)}>&gt;</span>
+          <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesLastPage)}>&gt;&vert;</span>
+        </div>
       {/if}
     </div>
-    {#if bonusesList.length !== 0}
-      <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
-        <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getBonuses(0)}>&vert;&lt;</span>
-        <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesPrevPage)}>&lt;</span>
-        {#each Array(numberOfPages) as _, i}
-          <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getBonuses(i*bonusesPerPage)}>{i+1}</span>
-        {/each}
-        <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesNextPage)}>&gt;</span>
-        <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesLastPage)}>&gt;&vert;</span>
-      </div>
-    {/if}
-  </div>
-{/if}
+  {/if}
+</div>
 
 <style lang="scss">