@everymatrix/player-account-gaming-limits-wrapper-2 1.37.2 → 1.37.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-gaming-limits-wrapper-2",
-  "version": "1.37.2",
+  "version": "1.37.4",
   "main": "dist/player-account-gaming-limits-wrapper-2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a314fe46510038a31ea77b611f22f5429a56d49"
+  "gitHead": "863252ebf7c846696d9b388f0d288993dbd5065c"
 }

package/src/PlayerAccountGamingLimitsWrapper_2.svelte

@@ -87,11 +87,11 @@
     if (mainContainer.children.length > 0) {
       for (let i:number = 0; i < mainContainer.children.length; i++) {
         if (index === i) {
-          mainContainer.children[i].classList.remove('Hidden');
-          tabsContainer?.children[i].classList.add('Selected');
+          mainContainer.children[i].classList.remove('hidden');
+          tabsContainer?.children[i].classList.add('selected');
         } else {
-          mainContainer.children[i].classList.add('Hidden');
-          tabsContainer?.children[i].classList.remove('Selected');
+          mainContainer.children[i].classList.add('hidden');
+          tabsContainer?.children[i].classList.remove('selected');
         }
       }
     }
@@ -142,15 +142,15 @@
     <div class="TitleSection">
       {#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-pam-color-primary, var(--emw--color-primary, #22B04E));}</style></defs><g transform="translate(-20 -158)">
+          <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="GamingLimitsTitleMobile">{$_('title')}</h2>
+          <h2 class="GamingLimitsTitleMobile">{$_('titleLimitsWrapper2')}</h2>
         </div>
       {/if}
-      <h2 class="GamingLimitsTitle {isMobile ? 'Hidden' : ''}">{$_('title')}</h2>
+      <h2 class="GamingLimitsTitle {isMobile ? 'Hidden' : ''}">{$_('titleLimitsWrapper2')}</h2>
     </div>
     {#if isLoading}
     <!-- Just show nothing, this is loading exposed attributes, not making a fetch. It takes an instant, but prevents nested widgets from rendering with empty attributes -->
@@ -162,157 +162,138 @@
           {/each}
         </div>
       {/if}
-      <div class="GamingLimitsContent">
-        <div class="PlayerAccountGamingLmitsWrapper2" bind:this={mainContainer}>
-          {#each limitTabs as _, i}
-              <player-account-gaming-limits-page-2-gm16 class="Hidden Selected"
-                {lang}
-                {currency}
-                amountsconfig = {amountsArray[i]}
-                periodsconfig = {periodsArray[i]}
-                limittabindex = {i + 1}
-                {userid}
-                {deletelimit}
-                {enablecompliancetext}
-                {session}
-                {endpoint}
-                {apiversion}
-                {clientstyling}
-                {clientstylingurl}
-                {translationurl}
-                {customcurrencysymbols}
-              ></player-account-gaming-limits-page-2-gm16>
-          {/each}
-        </div>
-        {#if historyenabled === 'true'}
-          <player-account-gaming-limits-history-2
-            {lang}
-            {userid}
-            {session}
-            {endpoint}
-            {apiversion}
-            {numberofentries}
-            {clientstyling}
-            {clientstylingurl}
-            {translationurl}
-            {customcurrencysymbols}
-          ></player-account-gaming-limits-history-2>
-        {/if}
-
+      <div class="PlayerAccountGamingLmitsWrapper2" bind:this={mainContainer}>
+        {#each limitTabs as _, i}
+            <player-account-gaming-limits-page-2-gm16 class="hidden selected"
+              {lang}
+              {currency}
+              amountsconfig = {amountsArray[i]}
+              periodsconfig = {periodsArray[i]}
+              limittabindex = {i + 1}
+              {userid}
+              {deletelimit}
+              {enablecompliancetext}
+              {session}
+              {endpoint}
+              {apiversion}
+              {clientstyling}
+              {clientstylingurl}
+              {translationurl}
+              {customcurrencysymbols}
+            ></player-account-gaming-limits-page-2-gm16>
+        {/each}
       </div>
+      {#if historyenabled === 'true'}
+        <player-account-gaming-limits-history-2
+          {lang}
+          {userid}
+          {session}
+          {endpoint}
+          {apiversion}
+          {numberofentries}
+          {clientstyling}
+          {clientstylingurl}
+          {translationurl}
+          {customcurrencysymbols}
+        ></player-account-gaming-limits-history-2>
+      {/if}
     {/if}
   </div>
 </div>
 <style lang="scss">
   :host {
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  color: #666;
-}
-
-*, *::before, *::after {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-decoration: none;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.GamingLimitsWrapper {
-  padding: 50px;
-  color: var(--emfe-w-pam-color-primary, #22B04E);
-  background-color: var(--emfe-w-pam-color-bg, #F1F1F1);
-  border-radius: var(--emw--border-radius-large, 20px);
-  min-height: 1000px;
-  display: flex;
-  flex-direction: column;
-
-  &.GamingLimitsWrapperMobile {
-    padding: 20px 15px;
-    .GamingLimitsContent, .PlayerAccountGamingLmitsWrapper2, .LimitsTab {
-      flex-direction: column;
-      width: 100%;
-      height: fit-content;
-      padding: 5px 0;
-      font-size: 10px;
-      margin-right: 5px;
-    }
-    // .LimitsList {
-    //   font-size: 12px;
-    //   background-color: red;
-    // }
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    color: #666;
   }
 
-  .GamingLimitsContent {
-    display: flex;
-    flex-direction: row;
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
   }
 
-  .LimitsWrapper, .TabsContainer, .LimitsTab {
+  .GamingLimitsWrapper{
+    padding: 50px 50px 30px 50px;
+  }
+
+  .GamingLimitsWrapper.GamingLimitsWrapperMobile{
+    padding: 20px 15px;
+  }
+
+  .LimitsWrapper {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    flex-direction: row;
   }
 
   .TabsContainer {
     height: 50px;
+    display: flex;
     margin-bottom: 12px;
     cursor: pointer;
-    justify-content: left;
-    color: var(--emw--color-typography-contrast, #444444);
+    border-bottom: 1px solid var(--emfe-w-color-gray-300, #58586B);
+    justify-content: center;
+    background: var(--emfe-w-color-white, #FFFFFF);
+    box-shadow: 0 0.15rem 0.2rem 0 rgba(0, 0, 0, 0.12);
   }
 
   .LimitsTab {
-    font-size: 16px;
+    font-size: 1.3rem;
     line-height: 1.4rem;
-    text-transform: uppercase;
-    padding: 10px 40px;
-    background-color: var(--emw--color-grey-150, #C0CBC3);
-    border-radius: var(--emw--border-radius-large, 50px);
-    margin-right: 20px;
+    margin-bottom: 3px;
 
-  }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 1rem;
 
-  .Selected {
-    color: var(--emw--color-typpgraphy, #FFFFFF);
-    background: linear-gradient(to right, var(--emw--color-primary-variant, #184026), var(--emw--color-secondary-variant, #013E5C));
+    box-sizing: content-box;
   }
-  
-  .PlayerAccountGamingLmitsWrapper2 {
-    margin-bottom: 20px;
-    width: 65%;
+
+  .hidden {
+    display: none;
   }
-}
 
-.Hidden {
-  display: none;
-}
+  h2{
+    margin: 20px 0px;
+  }
 
-h2 {
-  margin: 20px 0;
-}
+  .PlayerAccountGamingLmitsWrapper2{
+    margin-bottom: 20px;
+  }
 
-.MenuReturnButton {
-  color: var(--emfe-w-pam-color-primary, #22B04E);
-  display: inline-flex;
-  align-items: center;
-  column-gap: 10px;
-  margin-bottom: 10px;
+  .MenuReturnButton{
+    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-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    }
+  }
 
-  & svg {
-    fill: var(--emfe-w-pam-color-primary, #22B04E);
+  .GamingLimitsTitle{
+    font-size: 26px;
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    font-weight: 400;
   }
-}
-
-.GamingLimitsTitle {
-  font-size: 26px;
-  color: var(--emfe-w-pam-color-primary, #22B04E);
-  font-weight: 400;
-  
-  &Mobile {
+
+  .GamingLimitsTitleMobile {
     font-size: 16px;
   }
-}
 
+  .GamingLimitsTitleNone {
+    display: none;
+  }
+
+  .selected {
+    border-bottom: 0.2rem solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    margin: 0;
+  }
 </style>

package/src/translations.js

@@ -1,32 +1,32 @@
 export const TRANSLATIONS = {
   "en": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "zh-hk": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "fr": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "ro": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "es": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "pt": {
-    "title": "Limits"
+    "titleLimitsWrapper2": "Limits"
   },
   "hr": {
-    "title": "Ograničenja"
+    "titleLimitsWrapper2": "Ograničenja"
   },
   "pt-br": {
-    "title": "Limites"
+    "titleLimitsWrapper2": "Limites"
   },
   "es-mx": {
-    "title": "Límites"
+    "titleLimitsWrapper2": "Límites"
   },
   "tr": {
-    "title": "Sınırlar"
+    "titleLimitsWrapper2": "Sınırlar"
   }
 }