@everymatrix/casino-header-controller 1.16.0 → 1.16.2

package/index.html

@@ -22,7 +22,10 @@
   </style>
 
   <div class="webcomponent">
-    <casino-header-controller _ngcontent-mup-c29="" session="01347826-ed6c-4305-80c7-1dab6b2fc151" userid="3920216" userroles="everyone,loggedIn,TestDemoCosmin" cmsendpoint="https://wt1-stage.everymatrix.com/apijson" env="stage" lang="en" languageslist="en,ro" endpoint="https://demo-api.stage.norway.everymatrix.com/v1" actionevent="HeaderMenuItemClicked" activecategory="/casino/RNG$new-sub-category$new-sub-category-1" clientstyling="
+    <casino-header-controller _ngcontent-mup-c29="" session="01347826-ed6c-4305-80c7-1dab6b2fc151" userid="3920216"
+      userroles="everyone,loggedIn,TestDemoCosmin" cmsendpoint="https://wt1-stage.everymatrix.com/apijson" env="stage"
+      lang="en" languageslist="es,en,ro" endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
+      actionevent="HeaderMenuItemClicked" activecategory="/casino/RNG$new-sub-category$new-sub-category-1" clientstyling="
     .HeaderWrapper{
       position: fixed;
       top: 0;
@@ -30,13 +33,14 @@
       right: 0;
       z-index: 99;
     }
-  
+
     .HeaderMobileWrapper {
       .HeaderContainer {
         height: 55px;
       }
     }
-  " currencyseparator="." currencydecimal="," currencyprecision="2" gmversion="gmcore"></casino-header-controller>
+  " currencyseparator="." currencydecimal="," currencyprecision="2" gmversion="gmcore"
+  countryflagheader="true" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
 
   </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4de660840367ca3f6d6645e39b13ba86ca19bb5e"
+  "gitHead": "d6dc249addf978ca75bc9b3d5f1a80c33649638a"
 }

package/src/CasinoHeaderController.svelte

@@ -309,6 +309,27 @@
     window.postMessage({ type: actionevent, itemId: itemData.id, item: itemData, externalLink: itemData.externalLink || false, target: itemData.attrs?.target || null }, window.location.href);
   }
 
+  const selectLanguage = (operatorLanguage:string): void => {
+    selectedLanguage = operatorLanguage;
+    isOptionsListVisible = false;
+    menuAction('language');
+  }
+
+  const toggleLanguageDropdown = (): void => {
+    isOptionsListVisible = !isOptionsListVisible;
+  }
+
+  const determineFlag = (selectedLanguage: string): string => {
+    if (customlocaleidentifier) {
+      selectedLanguage = 
+        customlocaleidentifier.includes(selectedLanguage.toLowerCase()) ? 
+        customlocaleidentifier.slice(-2) : 
+        selectedLanguage;     
+    }
+
+    return selectedLanguage == 'EN' ? 'US' : selectedLanguage.toUpperCase();
+  }
+
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -328,16 +349,6 @@
       });
   }
 
-  function selectLanguage(operatorLanguage:string) {
-    selectedLanguage = operatorLanguage;
-    isOptionsListVisible = false;
-    menuAction('language');
-  }
-
-  function toggleLanguageDropdown() {
-    isOptionsListVisible = !isOptionsListVisible;
-  }
-
   onMount(async () => {
     window.addEventListener('message', messageHandler, false);
 
@@ -353,7 +364,7 @@
   $: activecategory && !isLoading && initializeMenu();
   $: session && setSession();
   $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && countryflagheader && initialLoad();
+  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
   $: translationurl && setTranslationUrl();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -470,9 +481,10 @@
                 </select>
               {:else}
                 <div class="LanguageDropdown">
+                  <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
                     <span class="FlagIcon">
-                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
+                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage)}.svg`}/>
                     </span>
                     <span class="LanguageName">{selectedLanguage}</span>
                     <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
@@ -486,7 +498,7 @@
                       {#each languagesArray as operatorLanguage}
                         <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
                           <span class="FlagIcon">
-                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${operatorLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage)}.svg`}/>
                           </span>
                           <span class="LanguageName">{operatorLanguage}</span>
                         </div>
@@ -590,7 +602,7 @@
                 <div class="LanguageDropdown">
                   <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
                     <span class="FlagIcon">
-                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
+                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage)}.svg`}/>
                     </span>
                     <span class="LanguageName">{selectedLanguage}</span>
                     <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
@@ -604,7 +616,7 @@
                       {#each languagesArray as operatorLanguage}
                         <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
                           <span class="FlagIcon">
-                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${operatorLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage)}.svg`}/>
                           </span>
                           <span class="LanguageName">{operatorLanguage}</span>
                         </div>
@@ -630,7 +642,7 @@
   {/if}
 {/if}
 
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
+<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
 
 <style lang="scss">