@everymatrix/player-bonus-history 1.13.15 → 1.13.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-bonus-history",
-  "version": "1.13.15",
+  "version": "1.13.16",
   "main": "dist/player-bonus-history",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64d94eb05d1cff11bf0cfd2bb8079bec43797d28"
+  "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
 }

package/src/PlayerBonusHistory.svelte

@@ -154,35 +154,35 @@
 
 <div bind:this={customStylingContainer}>
   {#if isLoading}
-    <div class="ModalLoader" part="ModalLoader"></div>
+    <div class="ModalLoader"></div>
   {:else}
-    <div class="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}" part="BonusesWrapper {isMobile ? 'BonusesWrapperMobile' : ''}">
+    <div class="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)">
+        <div class="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-pam-color-primary, var(--emfe-w-color-pink-500, #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">{$_('title')}</h2>
+          <h2 class="BonusesTitleMobile">{$_('title')}</h2>
         </div>
       {/if}
       <h2 class="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}" part="BonusesTitle {isMobile ? 'BonusesTitleNone' : ''}">{$_('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' : ''}">
+      <div class="BonusCalendarWrapper {isMobile ? 'BonusCalendarWrapperMobile' : ''}">
+        <div class="BonusesCalendarContainer {isMobile ? 'BonusesCalendarContainerMobile' : ''}">
+          <div class="BonusesCalendarStartDate {isMobile ? 'BonusesCalendarMobile' : ''}">
             <label for="BonusCalendarStartDate">{$_('dateFrom')}</label>
-            <vaadin-date-picker bind:this={startCalendar} max={maxDate} value={lastMonth} placeholder="From" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+            <vaadin-date-picker bind:this={startCalendar} max={maxDate} value={lastMonth} placeholder="From" class="VaadinDatePicker"></vaadin-date-picker>
           </div>
-          <div class="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}" part="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}">
+          <div class="BonusesCalendarEndDate {isMobile ? 'BonusesCalendarMobile' : ''}">
             <label for="BonusesCalendarEndDate">{$_('dateTo')}</label>
-            <vaadin-date-picker bind:this={endCalendar} max={maxDate} value={maxDate} placeholder="To" class="VaadinDatePicker" part="VaadinDatePicker"></vaadin-date-picker>
+            <vaadin-date-picker bind:this={endCalendar} max={maxDate} value={maxDate} placeholder="To" class="VaadinDatePicker"></vaadin-date-picker>
           </div>
         </div>
-        <button class="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" part="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" on:click={() => getBonuses(0)}>{$_('dateFilter')}</button>
+        <button class="BonusesCalendarFilter {isMobile ? 'BonusesCalendarFilterMobile' : ''}" on:click={() => getBonuses(0)}>{$_('dateFilter')}</button>
       </div>
-      <div class="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}" part="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}">
+      <div class="BonusesGrid {isMobile ? 'BonusesGridMobile' : ''}">
         {#if bonusesList.length === 0}
           <p>{$_('noBonusHistory')}</p>
         {:else}
@@ -207,7 +207,7 @@
                 bonusname={bonus.name}
                 bonustype={bonus.type}
                 bonusamount={bonus.grantedAmount}
-                bonuswageringamount={bonus.totalWR}
+                bonuswageringamount={`${bonus.fulfilledWR} / ${bonus.originalWageringRequirement}`}
                 bonusremainingamount={bonus.currentAmount}
                 bonuscurrency={bonus.currency}
                 {lang}
@@ -219,14 +219,14 @@
         {/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>
+        <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
+          <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getBonuses(0)}>&vert;&lt;</span>
+          <span class="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>
+            <span class="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>
+          <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesNextPage)}>&gt;</span>
+          <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getBonuses(bonusesLastPage)}>&gt;&vert;</span>
         </div>
       {/if}
     </div>
@@ -238,7 +238,7 @@
 
 
   .BonusesWrapper {
-    color: var(--emfe-w-color-contrast, #07072A);
+    color: var(--emfe-w-pam-typography, var(--emfe-w-color-dunkel, #07072A));
     padding: 50px;
     max-width: 850px;
 
@@ -249,19 +249,19 @@
   }
 
   .MenuReturnButton{
-    color: var(--emfe-w-color-primary, #D0046C);
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     display: inline-flex;
     align-items: center;
     column-gap: 10px;
     margin-bottom: 10px;
     & svg {
-      fill: var(--emfe-w-color-primary, #D0046C);
+      fill: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     }
   }
 
   .BonusesTitle {
     font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     font-weight: 400;
   }
 
@@ -328,14 +328,14 @@
       padding: 5px 15px;
       font-size: 16px;
       line-height: 18px;
-      outline-color: var(--emfe-w-color-primary, #D0046C);
+      outline-color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     }
   }
 
   .BonusesCalendarFilter {
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    color: var(--emfe-w-color-white, #FFFFFF);
+    background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
     cursor: pointer;
     border-radius: 5px;
     width: 120px;
@@ -352,7 +352,7 @@
     }
 
     &:active {
-      background: var(--emfe-w-color-primary-600, #99034F);
+      background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
     }
   }
 
@@ -375,7 +375,7 @@
       text-align: center;
     }
     .BonusesFirst, .BonusesPrev, .BonusesNext, .BonusesLast {
-      color: var(--emfe-w-color-primary, #D0046C);
+      color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
       font-size: 16px;
       cursor: pointer;
       padding: 5px 10px;
@@ -387,7 +387,7 @@
     }
     .BonusesPage {
       margin: 0 5px;
-      color: var(--emfe-w-color-gray-300, #58586B);
+      color: var(--emfe-w-pam-typography, var(--emfe-w-color-dunkel, #07072A));
       font-size: 16px;
       cursor: pointer;
       padding: 5px 10px;