@everymatrix/casino-header-controller 1.43.4 → 1.45.0

package/src/CasinoHeaderController.svelte

@@ -1,1233 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  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/player-deposit';
-
-  import everymatrixLogo from './images/everymatrix-logo-white.png';
-
-  export let session:string = '';
-  export let userid:string = '';
-  export let endpoint:string = '';
-  export let cmsendpoint:string = '';
-  export let cmsenv:string = 'stage';
-  export let lang:string = 'en';
-  export let languageslist:string = 'en, ro';
-  export let activecategory:string = '';
-  export let translationurl:string = '';
-  export let customlocaleidentifier:string = '';
-  export let gmversion:string = '';
-  export let countryflagheader:string = 'false';
-  export let displaybalanceoption:string = 'All';
-  export let countryflaghamburger:string = 'false';
-  export let hasdefaultamount:string = '';
-  export let playercurrency: string ='';
-
-  //short cashier
-  export let shortcashierenabled:string = '';
-  export let producttype:string = '';
-  export let successurl:string = '';
-  export let failurl:string = '';
-  export let cancelurl:string = '';
-  export let sportsurl:string = '';
-  export let casinourl:string = '';
-  export let contacturl:string = '';
-  export let homeurl:string = '';
-  export let depositurl:string = '';
-
-  export let actionevent:string = '';
-
-  export let userroles:string = '';
-  export let showsubgroups:string = 'false';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  export let currencyseparator:string = '';
-  export let currencydecimal:string = '';
-  export let currencyprecision:string = '';
-
-
-  let primaryActiveIndex:string;
-  let secondaryActiveIndex:string;
-  let identity:string = "HeaderMenu";
-  let customStylingContainer:HTMLElement;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const genericIcon:string = `<svg version="1.1" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 30px; color: #fff;" x="0px" y="0px"
-    viewBox="0 0 384.971 384.971" style="enable-background:new 0 0 384.971 384.971;" xml:space="preserve">
-     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
-       C5.39,0.001,0,5.39,0,12.031V372.94c0,6.641,5.39,12.03,12.03,12.03h168.424c6.641,0,12.03-5.39,12.03-12.03
-       C192.485,366.299,187.095,360.91,180.455,360.91z"/>
-     <path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
-       c-6.641,0-12.03,5.438-12.03,12.151c0,6.713,5.39,12.151,12.03,12.151h247.74l-62.558,63.46c-4.704,4.752-4.704,12.439,0,17.179
-       c4.704,4.752,12.319,4.752,17.011,0l82.997-84.2C386.113,196.588,386.161,188.756,381.481,184.088z"/>
-  </svg>`;
-
-  let mainMenuArray:Array<any> = [];
-  let secondaryMenuArray:Array<any> = [];
-  let selectedLanguage:string = '';
-  let hamburgerURL:URL;
-  let headerURL:URL;
-  let logoURL:URL;
-  let isLoading:boolean = true;
-  let logoFromCms:boolean = false;
-
-  let isOptionsListVisible:boolean = false;
-  let mobileView:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let isLoggedIn:boolean = false;
-  let playerID:string = '';
-  let sessionID:string = '';
-  let loginActive:boolean = true;
-  let language:string = '';
-  let languagesArray:Array<string> = [];
-  let hamburgerMenuActive:boolean = false;
-  let logoPath:string = '';
-  let shortCashierActivated:boolean = false;
-
-  const menuAction = (data: any) => {
-    switch (data) {
-      case 'login':
-        loginActive = true;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
-
-        //Analytics event
-        if (typeof gtag == 'function'){
-          gtag('event', 'OpenLoginModal', {
-            'context': 'HeaderController'
-          });
-        }
-        break;
-
-      case 'register':
-        loginActive = false;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
-
-        //Analytics event
-        if (typeof gtag == 'function'){
-          gtag('event', 'OpenRegisterModal', {
-            'context': 'HeaderController'
-          });
-        }
-        break;
-
-      case 'lobby':
-        window.postMessage({type: 'GoToHomepage'}, window.location.href);
-        break;
-
-      case 'myaccount':
-        window.postMessage({type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent)}, window.location.href);
-        break;
-
-      case 'deposit':
-        if (isShortCashierEnabled) {
-          shortCashierActivated = true;
-          window.postMessage({ type: 'DisableScroll' }, window.location.href);
-        } else {
-          window.postMessage({type: 'GoToDeposit'}, window.location.href);
-        }
-
-        //Analytics event
-        if (typeof gtag == 'function'){
-          gtag('event', 'GoToDeposit', {
-            'context': 'HeaderController'
-          });
-        }
-        break;
-
-      case 'language':
-        window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
-        break;
-    }
-  }
-
-  const toggleMenu = () => {
-    hamburgerMenuActive = true;
-    window.postMessage({type: 'OpenHamburgerMenuModal'}, window.location.href);
-  }
-
-  const messageHandler = (e: any) => {
-    if (e.data) {
-      switch (e.data.type) {
-        case 'UserSessionID':
-          playerID = e.data.userid;
-          sessionID = e.data.session;
-          isLoggedIn = true;
-          break;
-
-        case 'CloseHamburgerMenu':
-          window.postMessage({ type: 'EnableScroll'}, window.location.href);
-          if (e.data.showhamburger) {
-            hamburgerMenuActive = false;
-          }
-          break;
-
-        case 'LogoutSuccessfull':
-          isLoggedIn = false;
-          break;
-
-        case 'LanguageChanged':
-          createCMSUrls();
-          getHeaderMenusData(headerURL);
-          break;
-
-        case 'OpenShortCashier':
-          menuAction('deposit');
-          break;
-
-        case 'CloseShortCashier':
-          closeShortCashier();
-          break;
-
-        case 'RequestHeaderHeight':
-          window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
-          break;
-      }
-    }
-  }
-
-  const setSession = () => {
-    isLoggedIn = true;
-    sessionID = session;
-  }
-
-  const closeShortCashier = (event?) => {
-    shortCashierActivated = false;
-    window.postMessage({ type: 'EnableScroll' }, window.location.href);
-    event?.stopPropagation();
-  }
-
-  const createCMSUrls = () => {
-    headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
-    hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
-    logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
-
-    let device = getDevice(userAgent)
-
-    headerURL.searchParams.append('env', cmsenv);
-    headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
-    //headerURL.searchParams.append('platform', 'dk');
-    headerURL.searchParams.append('userRoles', userroles);
-
-    if (device) {
-      if (device === 'PC'){
-        hamburgerURL.searchParams.append('device', 'dk');
-        headerURL.searchParams.append('device', 'dk');
-      } else if (device === 'iPad' || device === 'iPhone') {
-        hamburgerURL.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
-        headerURL.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
-      } else {
-        hamburgerURL.searchParams.append('device', 'mtWeb');
-        headerURL.searchParams.append('device', 'mtWeb');
-      }
-    }
-    hamburgerURL.searchParams.append('env', cmsenv);
-    hamburgerURL.searchParams.append('language', selectedLanguage.toLowerCase());
-    //hamburgerURL.searchParams.append('platform', 'dk');
-    hamburgerURL.searchParams.append('userRoles', userroles);
-
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const initialLoad = ():void => {
-    languagesArray = languageslist.replace(/ /g,'').split(',');
-    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
-
-    selectedLanguage = lang.toUpperCase();
-    createCMSUrls();
-
-    getLogo(logoURL);
-    // getHeaderMenusData need to execute after the initialLoad receives the current lang value
-    setTimeout(() => {
-      getHeaderMenusData(headerURL);
-    })
-  }
-
-  const initializeMenu = ():void => {
-    primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
-    secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
-  }
-
-  const setActiveIndex = (activecategory, menuList) => {
-  let result = menuList.find(item => {
-    if (activecategory.indexOf('/sport') > -1) {
-      return item.path.indexOf(activecategory) > -1;
-    } else {
-      if (item.path.includes(activecategory)) {
-        return true;
-      }
-    }
-  });
-
-  if (!result) {
-    result = menuList.find(item => {
-      return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
-    });
-  }
-
-  if (result) {
-    return result.id;
-  } else {
-    return -1;
-  }
-}
-
-  const sendSliderData = ():void => {
-    window.postMessage({ type: 'SliderData', identity, data: mainMenuArray }, window.location.href);
-  }
-
-  const getHeaderMenusData = (url:any):Promise<any> => {
-    isLoading = true;
-
-    return new Promise((resolve, reject) => {
-      fetch(url)
-        .then((res: any) => res.json())
-        .then((data: any) => {
-          mainMenuArray = data.desktop.primary;
-          secondaryMenuArray = data.desktop.secondary;
-          isLoading = false;
-
-          resolve(data);
-        }, (err: any) => {
-          isLoading = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const getLogo = (url:any):Promise<any> => {
-    logoFromCms = false;
-
-    return new Promise((resolve, reject) => {
-      fetch(url)
-        .then((res: any) => res.json())
-        .then((data: any) => {
-          if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
-            logoPath = data.logoUrl;
-            logoFromCms = true;
-          } else {
-            logoFromCms = false;
-          }
-          resolve(data);
-        }, (err: any) => {
-          logoFromCms = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const navigationTrigger = (itemData:any) => {
-    window.postMessage({ type: 'NavigateTo', itemId: itemData.id, item: itemData, path: itemData.path, 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;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(async () => {
-    window.addEventListener('message', messageHandler, false);
-
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: activecategory && !isLoading && initializeMenu();
-  $: session && setSession();
-  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() === 'true';
-  $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
-  $: translationurl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-</script>
-
-<svelte:head>
-  <script type="module" src="https://unpkg.com/@everymatrix/user-deposit-withdrawal"></script>
-</svelte:head>
-
-{#if isLoggedIn}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer">
-        <div class="HeaderMobileMainNav">
-          {#if !hamburgerMenuActive}
-            <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
-                 viewBox="0 0 22 16">
-              <defs>
-                <style>.a {
-                  fill: var(--emfe-w-color-white, #FFFFFF);
-                }
-                </style>
-              </defs>
-              <g transform="translate(-14 -13)">
-                <rect class="a" width="18" height="2" transform="translate(14 13)"/>
-                <rect class="a" width="22" height="2" transform="translate(14 20)"/>
-                <rect class="a" width="22" height="2" transform="translate(14 27)"/>
-              </g>
-            </svg>
-          {/if}
-        </div>
-        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <div class="HeaderTopActions" part="HeaderTopActions">
-          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
-            <div>
-              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
-              {#if shortCashierActivated}
-                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
-                <div class="ShortCashierContainerWrapperMobile">
-                  <div class="ShortCashierContainerMobile">
-                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
-                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
-                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
-                      </svg>
-                    </div>
-                    {#if gmversion === 'gmcore'}
-                      <player-deposit
-                        {endpoint}
-                        {session}
-                        playerid={userid}
-                        {lang}
-                        {hasdefaultamount}
-                        {playercurrency}
-                        {shortcashierenabled}
-                        {clientstyling}
-                        {clientstylingurl}
-                      ></player-deposit>
-                    {:else}
-                      <user-deposit-withdrawal
-                        {endpoint}
-                        type="deposit"
-                        channel="Mobile"
-                        language={lang}
-                        is-short-cashier={shortcashierenabled}
-                        product-type={producttype}
-                        user-id={userid}
-                        {session}
-                        success-url={'https://' + window.location.hostname + '/' + lang + successurl}
-                        cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
-                        fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
-                        sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
-                        casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
-                        contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
-                        home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
-                        deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
-                        client-styling={clientstyling}
-                        client-styling-url={clientstylingurl}
-                      ></user-deposit-withdrawal>
-                    {/if}
-                  </div>
-                </div>
-              {/if}
-            </div>
-            <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
-                <defs>
-                  <style>.a {
-                    fill: var(--emfe-w-color-white, #FFFFFF);
-                  }
-                  </style>
-                </defs>
-                <g transform="translate(-8 -4)">
-                  <path class="a"
-                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
-                        transform="translate(0 0)"/>
-                </g>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  {:else}
-    <header class="HeaderWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer">
-        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider
-             class="HeaderItemsMenu"
-             part="HeaderItemsMenu"
-             {identity}
-             use:sendSliderData
-             isprimarymenu=true
-             {actionevent}
-             activeindex={primaryActiveIndex}
-             {endpoint}
-             {lang}
-             location="headerMain"
-             {showsubgroups}
-             {clientstyling}
-             {clientstylingurl}
-             />
-          {/if}
-        </nav>
-        <div class="HeaderTopActions">
-          <div class="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision}/>
-            <div>
-              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
-              {#if shortCashierActivated}
-                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
-                <div class="ShortCashierContainerWrapper">
-                  <div class="ShortCashierContainer">
-                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
-                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
-                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
-                      </svg>
-                    </div>
-                    {#if gmversion === 'gmcore'}
-                      <player-deposit
-                        {endpoint}
-                        {session}
-                        playerid={userid}
-                        {lang}
-                        {hasdefaultamount}
-                        {playercurrency}
-                        {shortcashierenabled}
-                        {clientstyling}
-                        {clientstylingurl}
-                      ></player-deposit>
-                    {:else}
-                      <user-deposit-withdrawal
-                        {endpoint}
-                        type="deposit"
-                        channel="Desktop"
-                        language={lang}
-                        is-short-cashier={shortcashierenabled}
-                        product-type={producttype}
-                        user-id={userid}
-                        {session}
-                        success-url={'https://' + window.location.hostname + '/' + lang + successurl}
-                        cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
-                        fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
-                        sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
-                        casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
-                        contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
-                        home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
-                        deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
-                        client-styling={clientstyling}
-                        client-styling-url={clientstylingurl}
-                      ></user-deposit-withdrawal>
-                    {/if}
-                  </div>
-                </div>
-              {/if}
-            </div>
-            <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
-                <defs>
-                  <style>.a {
-                    fill: var(--emfe-w-color-white, #FFFFFF);
-                  }
-                  </style>
-                </defs>
-                <g transform="translate(-8 -4)">
-                  <path class="a"
-                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
-                        transform="translate(0 0)"/>
-                </g>
-              </svg>
-            </div>
-            {#if (languagesArray.length > 1) }
-              {#if countryflagheader !== 'true'}
-                <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
-                  {#each languagesArray as operatorLanguage}
-                    <option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
-                  {/each}
-                </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/${determineFlag(selectedLanguage.slice(-2))}.svg`}/>
-                    </span>
-                    <span class="LanguageName">{selectedLanguage.slice(-2)}</span>
-                    <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
-                        <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
-                      </svg>
-                    </span>
-                  </div>
-                  {#if isOptionsListVisible}
-                    <div class="OptionList">
-                      {#each languagesArray as operatorLanguage}
-                        <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
-                          <span class="FlagIcon">
-                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage.slice(-2))}.svg`}/>
-                          </span>
-                          <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
-                        </div>
-                      {/each}
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
-              <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
-            </li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{:else}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer">
-        <div class="HeaderMobileMainNav">
-          <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
-               viewBox="0 0 22 16">
-            <defs>
-              <style>.a {
-                fill: var(--emfe-w-color-white, #FFFFFF);
-              }
-              </style>
-            </defs>
-            <g transform="translate(-14 -13)">
-              <rect class="a" width="18" height="2" transform="translate(14 13)"/>
-              <rect class="a" width="22" height="2" transform="translate(14 20)"/>
-              <rect class="a" width="22" height="2" transform="translate(14 27)"/>
-            </g>
-          </svg>
-        </div>
-        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <div class="HeaderTopActions">
-          <div class="HeaderItemsMenu">
-            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
-            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
-          </div>
-        </div>
-      </div>
-    </header>
-  {:else}
-    <header class="HeaderWrapper" bind:this={customStylingContainer}>
-      <div class="HeaderContainer">
-        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider
-             class="HeaderItemsMenu"
-             part="HeaderItemsMenu"
-             {identity}
-             use:sendSliderData
-             isprimarymenu=true
-             {actionevent}
-             activeindex={primaryActiveIndex}
-             location="headerMain"
-             {endpoint}
-             {lang}
-             {clientstyling}
-             {clientstylingurl}
-             />
-          {/if}
-        </nav>
-        <div class="HeaderTopActions">
-          <div class="HeaderItemsMenu">
-            <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
-            <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
-            {#if (languagesArray.length > 1) }
-              {#if countryflagheader !== 'true'}
-                <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
-                  {#each languagesArray as operatorLanguage}
-                    <option value={operatorLanguage}>{operatorLanguage.slice(-2)}</option>
-                  {/each}
-                </select>
-              {:else}
-                <div class="LanguageDropdown">
-                  <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
-                    <span class="FlagIcon">
-                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage.slice(-2))}.svg`}/>
-                    </span>
-                    <span class="LanguageName">{selectedLanguage.slice(-2)}</span>
-                    <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
-                        <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
-                      </svg>
-                    </span>
-                  </div>
-                  {#if isOptionsListVisible}
-                    <div class="OptionList">
-                      {#each languagesArray as operatorLanguage}
-                        <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
-                          <span class="FlagIcon">
-                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage.slice(-2))}.svg`}/>
-                          </span>
-                          <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
-                        </div>
-                      {/each}
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
-              <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
-            </li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{/if}
-
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
-
-<style lang="scss">
-
-*,
-  *::before,
-  *::after {
-    font-family: inherit
-  }
-
-  :host {
-    font-family: inherit;
-  }
-
-  @keyframes ModalBounce {
-    0% {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    50% {
-      transform: translateY(-6px);
-      opacity: 0.8;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-
-  input,
-  textarea,
-  button {font-family: inherit}
-
-
-  .HeaderSlider {
-    width: 100%;
-    height: 400px;
-  }
-
-  .LanguageDropdown {
-  margin-right: 16px;
-  position: relative;
-  display: inline-block;
-}
-
-.ClosePopUpButtonShortCashier{
-  margin-left: auto;
-  cursor: pointer;
-  svg {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-}
-
-.ShortCashierWindow{
-  background-color: rgba(0, 0, 0, 0.7);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 16;
-}
-
-.ShortCashierContainerWrapper{
-  position: relative;
-  animation: ModalBounce .5s forwards;
-  z-index: 17;
-  right: 60%;
-}
-.ShortCashierContainer{
-  background-color: var(--emfe-w-color-white, #FFFFFF);
-  position: absolute;
-  width: 360px;
-  top: 16px;
-  transform: translateX(-60%);
-  box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-  border-radius: 5px;
-  z-index: 17;
-  box-shadow: 0px 5px 20px 0px #191919;
-  &:before {
-      content: "";
-    background: var(--emfe-w-color-white, #FFFFFF);
-    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-    position: absolute;
-    top: -8px;
-    left: 84%;
-    width: 25px;
-    height: 10px;
-    transform: translateX(-50%);
-    z-index: 1;
-  }
-}
-
-.ShortCashierContainerWrapperMobile{
-  position: relative;
-  animation: ModalBounce .5s forwards;
-  right: 110%;
-  z-index: 17;
-}
-.ShortCashierContainerMobile {
-  background-color: var(--emfe-w-color-white, #FFFFFF);
-  position: absolute;
-  width: 80vw;
-  top: 14px;
-  left: 50%;
-  transform: translateX(-60%);
-  box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-  border-radius: 5px;
-  z-index: 17;
-  box-shadow: 0px 5px 20px 0px #191919;
-  &:before {
-    content: "";
-    background: var(--emfe-w-color-white, #FFFFFF);
-    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-    position: absolute;
-    top: -8px;
-    left: 84%;
-    width: 25px;
-    height: 10px;
-    transform: translateX(-50%);
-    z-index: 1;
-  }
-}
-
-.SelectedOption,
-.OptionList {
-  border: 1px solid var(--emfe-w-header-color-primary);
-  padding: 8px;
-  cursor: pointer;
-  width: 76px;
-  border-radius: 4px;
-}
-
-.SelectedOption {
-  display: flex;
-  align-items: center;
-}
-
-.FlagIcon img {
-  width: 20px;
-  height: 14px;
-  margin-right: 8px;
-  border-radius: 2px;
-}
-
-.OptionList {
-  position: absolute;
-  z-index: 1;
-  color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-  background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-background-secondary, #050518));
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.LanguageOption {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-
-.TriangleInactive {
-  display: block;
-  color: currentColor;
-  margin: 0 0 0 10px;
-  transition: all .5s;
-
-  svg{
-    margin: 2px 0px;
-  }
-}
-
-.TriangleActive {
-  transform: rotate(180deg);
-  position: relative;
-
-  svg{
-    margin: 2px 0px;
-  }
-}
-
-.LanguageOption:hover {
-  background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-  border-radius: 2px;
-}
-  .HeaderWrapper {
-    background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-background-secondary, #050518));
-  }
-
-  .HeaderContainer {
-    max-width: 1300px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 84px;
-    margin: 0 auto;
-  }
-
-  .HeaderMobileMainNav {
-    display: flex;
-    align-items: center;
-  }
-
-  .HeaderBranding {
-    width: 140px;
-    margin-right: 15px;
-    cursor: pointer;
-    img {
-      width: 100%;
-    }
-    @media only screen and (max-width: 360px) {
-      margin-right: 0;
-    }
-  }
-
-  .HeaderMainNav {
-    text-align: left;
-  }
-
-  .HeaderTopActions {
-    text-align: right;
-    margin-left: auto;
-  }
-
-  .HeaderSecondaryNav {
-    flex-direction: row;
-    width: 100%;
-    background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-background-secondary, #050518));
-    border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
-  }
-
-  .HeaderItemsMenu {
-    gap: 8px;
-    display: flex;
-    align-content: flex-start;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    font-size: 16px;
-    align-items: center;
-
-    .Item:hover {
-      .HeaderSecondaryNav {
-        display: block;
-      }
-    }
-
-    .Item {
-      gap: 2px;
-      padding: 0 12px;
-      display: flex;
-      align-items: center;
-    }
-
-    &.PrimaryMenu {
-      gap: 10px;
-    }
-  }
-
-  .Item a {
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    text-decoration: none;
-    border-top: 1px solid transparent;
-  }
-
-  .Item a:hover {
-    color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border-top: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-    padding-top: 5px;
-  }
-
-  .ItemLogin {
-    border-radius: 5px;
-    background: transparent;
-    font-size: 14px;
-    font-weight: 600;
-    border: solid 1px var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    height: 44px;
-    text-align: center;
-    line-height: 44px;
-    margin-right: 10px;
-    cursor: pointer;
-  }
-
-  .ItemRegister, .ItemDeposit {
-    border-radius: 5px;
-    background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-    font-size: 14px;
-    height: 44px;
-    text-align: center;
-    line-height: 44px;
-    cursor: pointer;
-  }
-
-  .ItemDeposit {
-    background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-  }
-
-  .ItemLanguage {
-    height: 44px;
-    width: 74px;
-    text-align: center;
-    line-height: 44px;
-    background: transparent;
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    border: none;
-    cursor: pointer;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    option {
-      color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    }
-  }
-
-  .ItemLanguage.NoFlag{
-    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-background-secondary, #050518));
-    background-position: calc(100% - 0.75rem) center;
-    width: 90px;
-    margin-right: 6px;
-  }
-
-  .ItemBalance {
-    background: transparent;
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    border: 0;
-  }
-
-  .ItemAccount {
-    cursor: pointer;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .HeaderItemsMenuSecondary {
-    display: flex;
-    flex-direction: row;
-    align-content: flex-start;
-    align-items: center;
-    height: 60px;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    font-size: 14px;
-    max-width: 1280px;
-    margin: 0 auto;
-    overflow-y: hidden;
-    overflow-x: auto;
-    padding: 0;
-  }
-
-  .HeaderItemsMenuSecondary .ItemSecondary {
-    width: auto;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    padding: 0 15px;
-    font-weight: 600;
-    transition-duration: 0.15s;
-
-    button {
-      color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-      text-decoration: none;
-      border: none;
-      background: none;
-      font-size: 14px;
-      font-weight: 600;
-      text-transform: uppercase;
-      cursor: pointer;
-      &:hover {
-        color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-
-      &:focus {
-        color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-
-      &:visited {
-        color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-      }
-
-      &:focus-visible {
-        color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-        outline: none;
-      }
-    }
-    &.active {
-      background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
-    }
-  }
-
-  .HeaderSliderMobile {
-    background-position: bottom;
-  }
-
-  .HeaderMobileWrapper {
-    .HeaderContainer {
-      height: 55px;
-      padding: 0 15px;
-      gap: 10px;
-      @media only screen and (max-width: 360px) {
-        padding: 0 5px;
-      }
-    }
-
-    .HeaderBranding {
-      width: 110px;
-      display: flex;
-      align-items: center;
-    }
-
-    .HeaderItemsMenu {
-      .Item {
-        padding: 0 10px;
-        display: block;
-        width: unset;
-      }
-
-      .ItemBalance {
-        font-size: 12px;
-      }
-
-      .ItemAccount {
-        padding: 0;
-      }
-    }
-
-    .ItemRegister, .ItemDeposit, .ItemLogin {
-      height: 30px;
-      line-height: 30px;
-      font-size: 12px;
-    }
-
-    .ItemLogin {
-      margin-right: 10px;
-    }
-  }
-</style>