@everymatrix/player-profile-info 0.0.244 → 0.0.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.244",
+  "version": "0.0.248",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23ca6a1db8e19fea0b5f18176f0d846ed03c43f4"
+  "gitHead": "77f6efa473daab4dd62004b893c587558bf4511c"
 }

package/src/PlayerProfileInfo.svelte

@@ -359,34 +359,34 @@
 </script>
 
 {#if isLoading}
-  <div class="ModalLoader"></div>
+  <div class="ModalLoader" part="ModalLoader"></div>
 {:else}
-<form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
+<form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}" part="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
 
   {#if isMobile}
-    <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+    <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="MyAccountCategoryTitleMobile">{$_('playerProfile.title')}</h2>
+      <h2 class="MyAccountCategoryTitleMobile" part="MyAccountCategoryTitleMobile">{$_('playerProfile.title')}</h2>
     </div>
   {/if}
 
-  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('playerProfile.title')}</h2>
+  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}" part="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('playerProfile.title')}</h2>
 
-  <div class="PlayerNotificationsHeader">
+  <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
     <h3>{$_('playerProfile.personalDetails')}</h3>
   </div>
-  <section class="PlayerDetailsContent">
-    <div class="PlayerInfoBox">
+  <section class="PlayerDetailsContent" part="PlayerDetailsContent">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.userName')}</label>
-      <input type="text" class="FieldDisabled" value={username} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={username} readonly />
     </div>
-    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPhone')}</label>
-      <div class="PlayerPhoneNumber">
+      <div class="PlayerPhoneNumber" part="PlayerPhoneNumber">
         <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
           {#each prefixesArray as pref}
             {#if pref.Prefix === initialValuesArray.mobiePrefix}
@@ -399,119 +399,119 @@
       <input bind:value={playerMobileNumber} on:keyup={validateMobile} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
       </div>
       {#if invalidMobile}
-        <p class="InvalidInput">{$_('playerProfile.userPhoneError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPhoneError')}</p>
       {/if}
     </div>
-    <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}" part="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.securityQuestion')}</label>
       <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
       {#if invalidSecurityQuestion}
-        <p class="InvalidInput">{$_('playerProfile.securityQuestionError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityQuestionError')}</p>
       {/if}
     </div>
-    <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.securityAnswer')}</label>
       <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
       {#if invalidSecurityAnswer}
-        <p class="InvalidInput">{$_('playerProfile.securityAnswerError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityAnswerError')}</p>
       {/if}
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.userEmail')}</label>
-      <input type="email" class="FieldDisabled" value={email} readonly />
+      <input type="email" class="FieldDisabled" part="FieldDisabled" value={email} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.dateOfBirth')}</label>
-      <input type="text" class="FieldDisabled" value={birth} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={birth} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.firstName')}</label>
-      <input type="text" class="FieldDisabled" value={firstname} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={firstname} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.lastName')}</label>
-      <input type="text" class="FieldDisabled" value={lastname} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={lastname} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.userTitle')}</label>
-      <input type="text" class="FieldDisabled" value={userTitles} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={userTitles} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.currency')}</label>
-      <input type="text" class="FieldDisabled" value={currency} readonly />
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={currency} readonly />
     </div>
   </section>
 
-  <div class="PlayerLocationHeader">
+  <div class="PlayerLocationHeader" part="PlayerLocationHeader">
     <h3>{$_('playerProfile.locationDetails')}</h3>
   </div>
-  <section class="PlayerLocationContent">
-    <div class="PlayerInfoBox">
+  <section class="PlayerLocationContent" part="PlayerLocationContent">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
       <label>{$_('playerProfile.userCountry')}</label>
-      <input type="text" class="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
+      <input type="text" class="PlayerCountry FieldDisabled" part="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
     </div>
-    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userCity')}</label>
       <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
       {#if invalidCity}
-        <p class="InvalidInput">{$_('playerProfile.userCityError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userCityError')}</p>
       {/if}
     </div>
-    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userAddress')}</label>
     <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
       {#if invalidAddress}
-        <p class="InvalidInput">{$_('playerProfile.userAddressError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userAddressError')}</p>
       {/if}
     </div>
-    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
+    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPostalCode')}</label>
       <input bind:this={playerPostalCode} type="number" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
       {#if invalidPostalCode}
-        <p class="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
       {/if}
     </div>
   </section>
 
-  <div class="PlayerNotificationsHeader">
+  <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
     <h3>{$_('playerProfile.userNotifications')}</h3>
   </div>
-  <section class="PlayerNotificationsCheckboxArea">
-    <div class="PlayerNotificationBox">
+  <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
+    <div class="PlayerNotificationBox" part="PlayerNotificationBox">
       <label for="SMSNotification">
         <input bind:checked={giveConsentSMS}  on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
-        <span class="Checkmark"></span>
+        <span class="Checkmark" part="Checkmark"></span>
         <span>{$_('playerProfile.userSMSNotification')}</span>
       </label>
     </div>
-    <div class="PlayerNotificationBox">
+    <div class="PlayerNotificationBox" part="PlayerNotificationBox">
       <label for="EmailNotification">
         <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
-        <span class="Checkmark"></span>
+        <span class="Checkmark" part="Checkmark"></span>
         <span>{$_('playerProfile.userEmailNotification')}</span>
       </label>
     </div>
   </section>
   {#if isOnNative}
-    <div class="PlayerNotificationsHeader">
+    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
       <h3>{$_('playerProfile.userAppSettings')}</h3>
     </div>
-    <section class="PlayerNotificationsCheckboxArea">
-      <div class="PlayerNotificationBox">
+    <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
+      <div class="PlayerNotificationBox" part="PlayerNotificationBox">
         <label for="Biometrics">
           <input bind:checked={biometricsSelection} on:change={checkForChanges} type="checkbox" id="BiometricsEnabled" name="Biometric Enabled" />
-          <span class="Checkmark"></span>
+          <span class="Checkmark" part="Checkmark"></span>
           <span>{$_('playerProfile.userBiometrics')}</span>
         </label>
       </div>
     </section>
   {/if}
-  <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
-    <div class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={() => updatePlayerInfo()}>{$_('playerProfile.userProfileSaveChanges')}</div>
+  <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" part="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
+    <div class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" part="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={() => updatePlayerInfo()}>{$_('playerProfile.userProfileSaveChanges')}</div>
   </section>
   {#if showConfirmSave}
-    <section class="PlayerDetailsConfirmSave">
-      <p class="PlayerDetailsConfirmSaveText">{$_('playerProfile.userProfileConfirmationMessage')}</p>
+    <section class="PlayerDetailsConfirmSave" part="PlayerDetailsConfirmSave">
+      <p class="PlayerDetailsConfirmSaveText" part="PlayerDetailsConfirmSaveText">{$_('playerProfile.userProfileConfirmationMessage')}</p>
     </section>
   {/if}
 </form>