@everymatrix/casino-header-controller-nd 1.37.5 → 1.37.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller-nd",
-  "version": "1.37.5",
+  "version": "1.37.7",
   "main": "dist/casino-header-controller-nd.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8617c4720af5eb376480fe868deae89a86f14ebd"
+  "gitHead": "af78ab396ff52a67f38d5f27034fb755e7bbddfa"
 }

package/src/CasinoHeaderControllerNd.svelte

@@ -6,9 +6,8 @@
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { TRANSLATIONS } from './translations';
 
-  import '@everymatrix/casino-slider';
-  import '@everymatrix/casino-hamburger-menu';
-  import '@everymatrix/player-account-balance-modal';
+  import '@everymatrix/casino-hamburger-menu-nd';
+  import '@everymatrix/player-account-balance-modal-nd';
   import '@everymatrix/player-deposit';
 
   import * as countryFlags from 'country-flag-icons/string/3x2';
@@ -101,6 +100,7 @@
   let logoPath: string = '';
   let shortCashierActivated: boolean = false;
   let isBalanceOpened: boolean = false;
+  let languageValue: string;
 
   const gtagCall = (eventName: string): void => {
     // @ts-ignore
@@ -150,12 +150,17 @@
         break;
 
       case 'language':
+        languageValue = determineFlag();
         window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
         break;
 
       case 'page':
         window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
         break;
+
+      case 'closeLanguageSelector':
+        isOptionsListVisible = false;
+        break;
     }
   }
 
@@ -278,6 +283,7 @@
   }
 
   const initialLoad = (): void => {
+    languageValue = determineFlag();
     languagesArray = languageslist.replace(/ /g,'').split(',');
     languagesArray = languagesArray.map((language:string) => language.toUpperCase());
 
@@ -468,7 +474,7 @@
     {#if isLoggedIn}
       <div class="BalanceDepositWrapper">
         <div class="Balance  {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
-          <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
+          <player-account-balance-modal-nd {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
         </div>
         <div class="Deposit {isBalanceOpened ? 'Open' : ''}" bind:this={depositContainer}>
           <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -567,9 +573,9 @@
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
               {#if countryflagheader == 'true' }
-                <span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
+                <span class="LanguageName">{@html countryFlags[languageValue]}</span>
               {:else}
-                <span class="LanguageName">{determineFlag()}</span>
+                <span class="LanguageName">{languageValue}</span>
               {/if}
               <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
@@ -618,6 +624,10 @@
       </div>
     </div>
   {/if}
+  {#if isOptionsListVisible}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="OptionListOverlay" on:click={() => menuAction('closeLanguageSelector')} />
+  {/if}
 </div>
 <!--
 {#if isLoggedIn}
@@ -937,7 +947,7 @@
 {/if}
   -->
 
-<casino-hamburger-menu {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
+<casino-hamburger-menu-nd {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu-nd>
 
 <style lang="scss">
   *,
@@ -1354,7 +1364,6 @@
       .Slot3 {}
       .LanguageSelector {
         align-content: center;
-        height: 100%;
         cursor: pointer;
         transform: all .3s linear;
         color: white;
@@ -1407,8 +1416,9 @@
           gap: 4px;
           flex-direction: column;
           border-radius: 10px;
+          transition: all 0.4s ease;
           opacity: 0;
-          transition: all 0.4s;
+          visibility: hidden;
           z-index: 6;
           right: 5px;
           color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
@@ -1416,6 +1426,7 @@
 
           &.Active {
             opacity: 1;
+            visibility: visible;
           }
 
           .FlagIcon {
@@ -1494,6 +1505,15 @@
         }
       }
     }
+
+    .OptionListOverlay {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 5;
+    }
   }
 
   // ------> old stuff