@everymatrix/player-account-gaming-limits 0.0.367 → 0.0.369

package/src/PlayerAccountGamingLimits.svelte

@@ -1,256 +1,256 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import { getDevice } from 'rvhelper';
-  import { onMount, tick } from "svelte";
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { PlayerGamingLimitsCardTranslations } from './translations';
-  import '@everymatrix/player-account-gaming-limits-info-card';
-
-  export let depositlimit:any;
-  export let wageringlimit:any;
-  export let losslimit:any;
-  export let timelimit:any;
-  export let showdeletenotification:boolean = false;
-  export let showsuccessnotification:boolean = false;
-  export let lang:string = 'en';
-  export let playercurrency:string = '';
-  export let separatelimits:string = 'true';
-
-  Object.keys(PlayerGamingLimitsCardTranslations).forEach((item) => {
-    addNewMessages(item, PlayerGamingLimitsCardTranslations[item]);
-  });
-
-  let isLoading:boolean = true;
-  let userAgent:String = window.navigator.userAgent;
-  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
-
-  let editLimitData:any;
-  let editLimitName:string = '';
-  let limitsGroupView:boolean = true;
-
-  let depositLimitName = 'Deposit Limit';
-  let wageringLimitName = 'Wagering Limit';
-  let lossLimitName = 'Loss Limit';
-  let timeLimitName = 'Time Limit';
-
-  const mediaQuery = window.matchMedia('(min-width: 768px)');
-
-  const toggleScreen = () => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
-
-  const setActiveLanguage = () => {
-    setLocale(lang);
-  }
-
-  const getLimitdata = (limitData) => {
-    window.postMessage({type: 'GetLimitData', limit: limitData}, window.location.href);
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'PlayerLimitsData':
-          lang = e.data.limits.lang;
-          depositlimit = e.data.limits.depositlimit;
-          wageringlimit = e.data.limits.wageringlimit;
-          losslimit = e.data.limits.losslimit;
-          timelimit = e.data.limits.timelimit;
-          isLoading = false;
-          break;
-
-        case 'EditPlayerAccountGamingLimits':
-          editLimitData = e.data.edit;
-          editLimitName = e.data.name;
-          limitsGroupView = false;
-          window.postMessage({ type: 'EditPlayerLimit', name: editLimitName }, window.location.href);
-          break;
-
-        case 'PlayerAccountBackToLimitsView':
-          limitsGroupView = true;
-          break;
-
-        case 'ProfileDetailsData':
-          let profileDetails:any = e.data.profileDetails;
-          playercurrency = profileDetails.currency;
-          break;
-      }
-    }
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: lang && setActiveLanguage();
-</script>
-
-
-{#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
-{:else}
-  {#if limitsGroupView}
-    <div class="PlayerAccountGamingLimitsWrapper {isMobile ? 'PlayerAccountMobileGamingLimitsWrapper' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletGamingLimitsWrapper' : ''}" part="PlayerAccountGamingLimitsWrapper {isMobile ? 'PlayerAccountMobileGamingLimitsWrapper' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletGamingLimitsWrapper' : ''}">
-      {#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="PlayerGamingLimitsTitleMobile" part="PlayerGamingLimitsTitleMobile">{$_('gamingLimits.gamingLimitsText')}</h2>
-        </div>
-      {/if}
-      <h2 class="PlayerGamingLimitsTitle {isMobile ? 'PlayerGamingLimitsTitleNone' : ''}" part="PlayerGamingLimitsTitle {isMobile ? 'PlayerGamingLimitsTitleNone' : ''}">{$_('gamingLimits.gamingLimitsText')}</h2>
-
-      <div class="PlayerAccountGamingLimitsContainer" part="PlayerAccountGamingLimitsContainer">
-        <player-account-gaming-limits-info-card
-          limitsdata={depositlimit}
-          limitname={depositLimitName}
-          {playercurrency} {lang}>
-        </player-account-gaming-limits-info-card>
-        <player-account-gaming-limits-info-card
-          limitsdata={wageringlimit}
-          limitname={wageringLimitName}
-          {playercurrency}
-          {lang}>
-        </player-account-gaming-limits-info-card>
-        <player-account-gaming-limits-info-card
-          limitsdata={losslimit}
-          limitname={lossLimitName}
-          {playercurrency}
-          {lang}>
-        </player-account-gaming-limits-info-card>
-        <player-account-gaming-limits-info-card
-          limitsdata={timelimit}
-          limitname={timeLimitName}
-          {playercurrency}
-          {lang}>
-        </player-account-gaming-limits-info-card>
-      </div>
-    </div>
-  {:else}
-    <player-account-gaming-limits-group-edit
-      limitsdata={editLimitData}
-      limitname={editLimitName}
-      {showsuccessnotification}
-      {showdeletenotification}
-      {playercurrency}
-      {lang}
-      {separatelimits}>
-    </player-account-gaming-limits-group-edit>
-  {/if}
-{/if}
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .PlayerAccountGamingLimitsWrapper {
-    color: var(--emfe-w-color-primary, #D0046C);
-    padding: 50px;
-    max-width: 760px;
-    .PlayerAccountGamingLimitsHeader {
-      h3 {
-        font-size: 24px;
-        font-weight: 400;
-        text-transform: capitalize;
-      }
-      .PlayerAccountGamingLimitsMobileTitle {
-        font-size: 16px;
-        font-weight: 400;
-      }
-    }
-  }
-
-  .PlayerGamingLimitsTitle {
-    font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-weight: 400;
-  }
-
-  .PlayerGamingLimitsTitleMobile {
-    font-size: 16px;
-    color: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .PlayerGamingLimitsTitleNone {
-    display: none;
-  }
-
-  .MenuReturnButton{
-    color: var(--emfe-w-color-primary, #D0046C);
-    display: inline-flex;
-    align-items: center;
-    column-gap: 10px;
-    margin-bottom: 10px;
-    & svg {
-      fill: var(--emfe-w-color-primary, #D0046C);
-    }
-  }
-  .PlayerAccountMobileGamingLimitsWrapper {
-    padding: 20px 15px;
-    background: var(--emfe-w-color-white, #FFFFFF);
-    max-width: unset;
-  }
-  .PlayerAccountTabletGamingLimitsWrapper {
-    padding: 40px 25% 40px 25%;
-  }
-  .PlayerAccountGamingLimitsContainer {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    row-gap: 30px;
-    column-gap: 30px;
-  }
-  .PlayerAccountSuccessfulRemoveContainer {
-    background: var(--emfe-w-color-primary-50, #FBECF4);
-    border: 1px solid var(--emfe-w-color-primary-100, #F1BED9);
-    font-size: 16px;
-    font-weight: 300;
-    color: var(--emfe-w-color-contrast, #07072A);
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 20px;
-    p {
-      margin: 0;
-    }
-  }
-
-  .ModalLoader {
-    position: absolute;
-    left: 0; 
-    right: 0;
-    top: 50%;
-    width: 300px;
-    height: 300px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .ModalLoader:after {
-    content: " ";
-    display: block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
-    border-radius: 50%;
-    border: 5px solid var(--emfe-w-color-primary, #D0046C);
-    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
-    animation: Loader 1.2s linear infinite;
-  }
-  @keyframes Loader {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>
+<svelte:options tag={null} />
+<script lang="ts">
+  import { getDevice } from 'rvhelper';
+  import { onMount, tick } from "svelte";
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerGamingLimitsCardTranslations } from './translations';
+  import '@everymatrix/player-account-gaming-limits-info-card';
+
+  export let depositlimit:any;
+  export let wageringlimit:any;
+  export let losslimit:any;
+  export let timelimit:any;
+  export let showdeletenotification:boolean = false;
+  export let showsuccessnotification:boolean = false;
+  export let lang:string = 'en';
+  export let playercurrency:string = '';
+  export let separatelimits:string = 'true';
+
+  Object.keys(PlayerGamingLimitsCardTranslations).forEach((item) => {
+    addNewMessages(item, PlayerGamingLimitsCardTranslations[item]);
+  });
+
+  let isLoading:boolean = true;
+  let userAgent:String = window.navigator.userAgent;
+  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+
+  let editLimitData:any;
+  let editLimitName:string = '';
+  let limitsGroupView:boolean = true;
+
+  let depositLimitName = 'Deposit Limit';
+  let wageringLimitName = 'Wagering Limit';
+  let lossLimitName = 'Loss Limit';
+  let timeLimitName = 'Time Limit';
+
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
+
+  const toggleScreen = () => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+
+  const setActiveLanguage = () => {
+    setLocale(lang);
+  }
+
+  const getLimitdata = (limitData) => {
+    window.postMessage({type: 'GetLimitData', limit: limitData}, window.location.href);
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'PlayerLimitsData':
+          lang = e.data.limits.lang;
+          depositlimit = e.data.limits.depositlimit;
+          wageringlimit = e.data.limits.wageringlimit;
+          losslimit = e.data.limits.losslimit;
+          timelimit = e.data.limits.timelimit;
+          isLoading = false;
+          break;
+
+        case 'EditPlayerAccountGamingLimits':
+          editLimitData = e.data.edit;
+          editLimitName = e.data.name;
+          limitsGroupView = false;
+          window.postMessage({ type: 'EditPlayerLimit', name: editLimitName }, window.location.href);
+          break;
+
+        case 'PlayerAccountBackToLimitsView':
+          limitsGroupView = true;
+          break;
+
+        case 'ProfileDetailsData':
+          let profileDetails:any = e.data.profileDetails;
+          playercurrency = profileDetails.currency;
+          break;
+      }
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+</script>
+
+
+{#if isLoading}
+  <div class="ModalLoader" part="ModalLoader"></div>
+{:else}
+  {#if limitsGroupView}
+    <div class="PlayerAccountGamingLimitsWrapper {isMobile ? 'PlayerAccountMobileGamingLimitsWrapper' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletGamingLimitsWrapper' : ''}" part="PlayerAccountGamingLimitsWrapper {isMobile ? 'PlayerAccountMobileGamingLimitsWrapper' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletGamingLimitsWrapper' : ''}">
+      {#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="PlayerGamingLimitsTitleMobile" part="PlayerGamingLimitsTitleMobile">{$_('gamingLimits.gamingLimitsText')}</h2>
+        </div>
+      {/if}
+      <h2 class="PlayerGamingLimitsTitle {isMobile ? 'PlayerGamingLimitsTitleNone' : ''}" part="PlayerGamingLimitsTitle {isMobile ? 'PlayerGamingLimitsTitleNone' : ''}">{$_('gamingLimits.gamingLimitsText')}</h2>
+
+      <div class="PlayerAccountGamingLimitsContainer" part="PlayerAccountGamingLimitsContainer">
+        <player-account-gaming-limits-info-card
+          limitsdata={depositlimit}
+          limitname={depositLimitName}
+          {playercurrency} {lang}>
+        </player-account-gaming-limits-info-card>
+        <player-account-gaming-limits-info-card
+          limitsdata={wageringlimit}
+          limitname={wageringLimitName}
+          {playercurrency}
+          {lang}>
+        </player-account-gaming-limits-info-card>
+        <player-account-gaming-limits-info-card
+          limitsdata={losslimit}
+          limitname={lossLimitName}
+          {playercurrency}
+          {lang}>
+        </player-account-gaming-limits-info-card>
+        <player-account-gaming-limits-info-card
+          limitsdata={timelimit}
+          limitname={timeLimitName}
+          {playercurrency}
+          {lang}>
+        </player-account-gaming-limits-info-card>
+      </div>
+    </div>
+  {:else}
+    <player-account-gaming-limits-group-edit
+      limitsdata={editLimitData}
+      limitname={editLimitName}
+      {showsuccessnotification}
+      {showdeletenotification}
+      {playercurrency}
+      {lang}
+      {separatelimits}>
+    </player-account-gaming-limits-group-edit>
+  {/if}
+{/if}
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .PlayerAccountGamingLimitsWrapper {
+    color: var(--emfe-w-color-primary, #D0046C);
+    padding: 50px;
+    max-width: 760px;
+    .PlayerAccountGamingLimitsHeader {
+      h3 {
+        font-size: 24px;
+        font-weight: 400;
+        text-transform: capitalize;
+      }
+      .PlayerAccountGamingLimitsMobileTitle {
+        font-size: 16px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .PlayerGamingLimitsTitle {
+    font-size: 26px;
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-weight: 400;
+  }
+
+  .PlayerGamingLimitsTitleMobile {
+    font-size: 16px;
+    color: var(--emfe-w-color-primary, #D0046C);
+  }
+
+  .PlayerGamingLimitsTitleNone {
+    display: none;
+  }
+
+  .MenuReturnButton{
+    color: var(--emfe-w-color-primary, #D0046C);
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+    & svg {
+      fill: var(--emfe-w-color-primary, #D0046C);
+    }
+  }
+  .PlayerAccountMobileGamingLimitsWrapper {
+    padding: 20px 15px;
+    background: var(--emfe-w-color-white, #FFFFFF);
+    max-width: unset;
+  }
+  .PlayerAccountTabletGamingLimitsWrapper {
+    padding: 40px 25% 40px 25%;
+  }
+  .PlayerAccountGamingLimitsContainer {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    row-gap: 30px;
+    column-gap: 30px;
+  }
+  .PlayerAccountSuccessfulRemoveContainer {
+    background: var(--emfe-w-color-primary-50, #FBECF4);
+    border: 1px solid var(--emfe-w-color-primary-100, #F1BED9);
+    font-size: 16px;
+    font-weight: 300;
+    color: var(--emfe-w-color-contrast, #07072A);
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 20px;
+    p {
+      margin: 0;
+    }
+  }
+
+  .ModalLoader {
+    position: absolute;
+    left: 0; 
+    right: 0;
+    top: 50%;
+    width: 300px;
+    height: 300px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ModalLoader:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 5px solid var(--emfe-w-color-primary, #D0046C);
+    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
+    animation: Loader 1.2s linear infinite;
+  }
+  @keyframes Loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/src/i18n.js

@@ -1,27 +1,27 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -1,4 +1,4 @@
-import PlayerAccountGamingLimits from './PlayerAccountGamingLimits.svelte';
-
-!customElements.get('player-account-gaming-limits') && customElements.define('player-account-gaming-limits', PlayerAccountGamingLimits);
-export default PlayerAccountGamingLimits;
+import PlayerAccountGamingLimits from './PlayerAccountGamingLimits.svelte';
+
+!customElements.get('player-account-gaming-limits') && customElements.define('player-account-gaming-limits', PlayerAccountGamingLimits);
+export default PlayerAccountGamingLimits;