@everymatrix/casino-header-controller 0.0.367 → 0.0.368

package/src/CasinoHeaderController.svelte

@@ -1,656 +1,656 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { CasinoHeaderController } from './translations';
-
-  import '@everymatrix/casino-slider';
-  import '@everymatrix/casino-hamburger-menu';
-  import '@everymatrix/player-account-balance-modal';
-  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 operatorid:string = '';
-  export let pagetag:string = '';
-  export let positiontag:string = '';
-
-  export let actionevent:string = '';
-
-  export let userroles:string = '';
-
-  let activeIndex:string;
-  let identity:string = "HeaderMenu";
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(CasinoHeaderController).forEach((item:any) => {
-    addNewMessages(item, CasinoHeaderController[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 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 = '';
-
-  const menuAction = (data: any) => {
-    switch (data) {
-      case 'login':
-        loginActive = true;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
-        break;
-
-      case 'register':
-        loginActive = false;
-        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
-        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':
-        window.postMessage({type: 'GoToDeposit'}, window.location.href);
-        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':
-          if (e.data.showhamburger) {
-            hamburgerMenuActive = false;
-          }
-          break;
-
-        case 'LogoutSuccessfull':
-          isLoggedIn = false;
-          break;
-
-        case 'LanguageChanged':
-          createCMSUrls();
-          getHeaderMenusData(headerURL);
-          break;
-      }
-    }
-  }
-
-  const setSession = () => {
-    isLoggedIn = true;
-    sessionID = session;
-  }
-
-  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`);
-
-    headerURL.searchParams.append('device', 'dk');
-    headerURL.searchParams.append('env', cmsenv);
-    headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
-    headerURL.searchParams.append('platform', 'dk');
-    headerURL.searchParams.append('userRoles', userroles);
-
-    hamburgerURL.searchParams.append('device', 'dk');
-    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 setActiveIndex = ():void => {
-    activeIndex = mainMenuArray.findIndex(item => item.path.indexOf(activecategory) > -1).toString();
-  }
-
-  const sendSliderData = (sliderData:any):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);
-        });
-    });
-  }
-
-  onMount(async () => {
-    window.addEventListener('message', messageHandler, false);
-
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: activecategory && !isLoading && setActiveIndex();
-  $: session && setSession();
-  $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
-</script>
-
-{#if isLoggedIn}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderMobileMainNav" part="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" part="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}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={()=>menuAction('deposit')}>{$_('headerItem.deposit')}</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" part="HeaderWrapper">
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav" part="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" part="HeaderItemsMenu" {identity} use:sendSliderData isprimarymenu=true {actionevent} activeindex={activeIndex} location="headerMain"/>
-          {/if}
-        </nav>
-        <div class="HeaderTopActions" part="HeaderItemsMenu">
-          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} {lang}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.deposit')}</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>
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage} selected>{operatorLanguage}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{:else}
-  {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderMobileMainNav" part="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" part="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" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
-          </div>
-        </div>
-      </div>
-    </header>
-  {:else}
-    <header class="HeaderWrapper" part="HeaderWrapper">
-      <div class="HeaderContainer" part="HeaderContainer">
-        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          {#if logoFromCms}
-            <img src={logoPath} alt="Logo">
-          {:else}
-            <img src={everymatrixLogo} alt="Logo">
-          {/if}
-        </div>
-
-        <nav class="HeaderMainNav" part="HeaderMainNav">
-          {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" part="HeaderItemsMenu" {identity} use:sendSliderData isprimarymenu=true {actionevent} activeindex={activeIndex} location="headerMain"/>
-          {/if}
-        </nav>
-        <div class="HeaderTopActions" part="HeaderTopActions">
-          <div class="HeaderItemsMenu" part="HeaderItemsMenu">
-            <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
-            <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as operatorLanguage}
-                <option value={operatorLanguage}>{operatorLanguage}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
-        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
-          {#each secondaryMenuArray as secondaryItem}
-            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
-          {/each}
-        </ul>
-      </nav>
-    </header>
-  {/if}
-{/if}
-
-<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist}></casino-hamburger-menu>
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .HeaderSlider {
-    width: 100%;
-    height: 400px;
-  }
-
-  .HeaderWrapper {
-    background: var(--emfe-w-color-header-bg, #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%;
-    }
-  }
-
-  .HeaderMainNav {
-    text-align: left;
-  }
-
-  .HeaderTopActions {
-    text-align: right;
-    margin-left: auto;
-  }
-
-  .HeaderSecondaryNav {
-    flex-direction: row;
-    width: 100%;
-    background: var(--emfe-w-color-header-bg, #050518);
-    border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
-  }
-
-  .HeaderItemsMenu {
-    display: flex;
-    align-content: flex-start;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 16px;
-    align-items: center;
-
-    .Item:hover {
-      .HeaderSecondaryNav {
-        display: block;
-      }
-    }
-
-    .Item {
-      padding: 0 12px;
-      display: flex;
-      align-items: center;
-    }
-
-    &.PrimaryMenu {
-      gap: 10px;
-    }
-  }
-
-  .Item a {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    text-decoration: none;
-    border-top: 1px solid transparent;
-  }
-
-  .Item a:hover {
-    color: var(--emfe-w-color-primary, #D0046C);
-    border-top: 1px solid 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-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-color-primary, #D0046C);
-    font-size: 14px;
-    height: 44px;
-    text-align: center;
-    line-height: 44px;
-    cursor: pointer;
-  }
-
-  .ItemDeposit {
-    background: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .ItemLanguage {
-    height: 44px;
-    width: 90px;
-    text-align: center;
-    line-height: 44px;
-    background: transparent;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    border: none;
-    cursor: pointer;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    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-color-header-bg, #050518);
-    background-position: calc(100% - 0.75rem) center;
-
-    option {
-      color: var(--emfe-w-color-white, #FFFFFF);
-    }
-  }
-
-  .ItemBalance {
-    background: transparent;
-    color: 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-color-white, #FFFFFF);
-    font-size: 14px;
-    max-width: 1280px;
-    margin: 0 auto;
-    overflow-y: hidden;
-    overflow-x: auto;
-    padding: 0;
-  }
-
-  .HeaderItemsMenuSecondary .ItemSecondary {
-    padding: 0 15px;
-    cursor: pointer;
-    font-weight: 600;
-    transition-duration: 0.15s;
-
-    a {
-      color: var(--emfe-w-color-white, #FFFFFF);
-      text-decoration: none;
-    }
-
-    &:hover {
-      a {
-        color: var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-  }
-
-  .HeaderSliderMobile {
-    background-position: bottom;
-  }
-
-  .HeaderMobileWrapper {
-    .HeaderContainer {
-      height: 55px;
-      padding: 0 15px;
-      gap: 10px;
-    }
-
-    .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>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { isMobile } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { CasinoHeaderController } from './translations';
+
+  import '@everymatrix/casino-slider';
+  import '@everymatrix/casino-hamburger-menu';
+  import '@everymatrix/player-account-balance-modal';
+  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 operatorid:string = '';
+  export let pagetag:string = '';
+  export let positiontag:string = '';
+
+  export let actionevent:string = '';
+
+  export let userroles:string = '';
+
+  let activeIndex:string;
+  let identity:string = "HeaderMenu";
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(CasinoHeaderController).forEach((item:any) => {
+    addNewMessages(item, CasinoHeaderController[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 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 = '';
+
+  const menuAction = (data: any) => {
+    switch (data) {
+      case 'login':
+        loginActive = true;
+        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
+        break;
+
+      case 'register':
+        loginActive = false;
+        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
+        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':
+        window.postMessage({type: 'GoToDeposit'}, window.location.href);
+        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':
+          if (e.data.showhamburger) {
+            hamburgerMenuActive = false;
+          }
+          break;
+
+        case 'LogoutSuccessfull':
+          isLoggedIn = false;
+          break;
+
+        case 'LanguageChanged':
+          createCMSUrls();
+          getHeaderMenusData(headerURL);
+          break;
+      }
+    }
+  }
+
+  const setSession = () => {
+    isLoggedIn = true;
+    sessionID = session;
+  }
+
+  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`);
+
+    headerURL.searchParams.append('device', 'dk');
+    headerURL.searchParams.append('env', cmsenv);
+    headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
+    headerURL.searchParams.append('platform', 'dk');
+    headerURL.searchParams.append('userRoles', userroles);
+
+    hamburgerURL.searchParams.append('device', 'dk');
+    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 setActiveIndex = ():void => {
+    activeIndex = mainMenuArray.findIndex(item => item.path.indexOf(activecategory) > -1).toString();
+  }
+
+  const sendSliderData = (sliderData:any):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);
+        });
+    });
+  }
+
+  onMount(async () => {
+    window.addEventListener('message', messageHandler, false);
+
+    if (isMobile(userAgent)) {
+      mobileView = true;
+    }
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: activecategory && !isLoading && setActiveIndex();
+  $: session && setSession();
+  $: lang && setActiveLanguage();
+  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
+</script>
+
+{#if isLoggedIn}
+  {#if mobileView}
+    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
+      <div class="HeaderContainer" part="HeaderContainer">
+        <div class="HeaderMobileMainNav" part="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" part="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}/>
+            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={()=>menuAction('deposit')}>{$_('headerItem.deposit')}</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" part="HeaderWrapper">
+      <div class="HeaderContainer" part="HeaderContainer">
+        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
+        </div>
+
+        <nav class="HeaderMainNav" part="HeaderMainNav">
+          {#if !isLoading}
+            <casino-slider class="HeaderItemsMenu" part="HeaderItemsMenu" {identity} use:sendSliderData isprimarymenu=true {actionevent} activeindex={activeIndex} location="headerMain"/>
+          {/if}
+        </nav>
+        <div class="HeaderTopActions" part="HeaderItemsMenu">
+          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
+            <player-account-balance-modal {session} {userid} {endpoint} {lang}/>
+            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.deposit')}</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>
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
+              {#each languagesArray as operatorLanguage}
+                <option value={operatorLanguage} selected>{operatorLanguage}</option>
+              {/each}
+            </select>
+          </div>
+        </div>
+      </div>
+      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
+        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
+          {#each secondaryMenuArray as secondaryItem}
+            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
+          {/each}
+        </ul>
+      </nav>
+    </header>
+  {/if}
+{:else}
+  {#if mobileView}
+    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
+      <div class="HeaderContainer" part="HeaderContainer">
+        <div class="HeaderMobileMainNav" part="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" part="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" part="HeaderItemsMenu">
+            <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
+            <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
+          </div>
+        </div>
+      </div>
+    </header>
+  {:else}
+    <header class="HeaderWrapper" part="HeaderWrapper">
+      <div class="HeaderContainer" part="HeaderContainer">
+        <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
+        </div>
+
+        <nav class="HeaderMainNav" part="HeaderMainNav">
+          {#if !isLoading}
+            <casino-slider class="HeaderItemsMenu" part="HeaderItemsMenu" {identity} use:sendSliderData isprimarymenu=true {actionevent} activeindex={activeIndex} location="headerMain"/>
+          {/if}
+        </nav>
+        <div class="HeaderTopActions" part="HeaderTopActions">
+          <div class="HeaderItemsMenu" part="HeaderItemsMenu">
+            <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
+            <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
+              {#each languagesArray as operatorLanguage}
+                <option value={operatorLanguage}>{operatorLanguage}</option>
+              {/each}
+            </select>
+          </div>
+        </div>
+      </div>
+      <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
+        <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
+          {#each secondaryMenuArray as secondaryItem}
+            <li class="ItemSecondary" part="ItemSecondary"><a href={secondaryItem.path}>{secondaryItem.label}</a></li>
+          {/each}
+        </ul>
+      </nav>
+    </header>
+  {/if}
+{/if}
+
+<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist}></casino-hamburger-menu>
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .HeaderSlider {
+    width: 100%;
+    height: 400px;
+  }
+
+  .HeaderWrapper {
+    background: var(--emfe-w-color-header-bg, #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%;
+    }
+  }
+
+  .HeaderMainNav {
+    text-align: left;
+  }
+
+  .HeaderTopActions {
+    text-align: right;
+    margin-left: auto;
+  }
+
+  .HeaderSecondaryNav {
+    flex-direction: row;
+    width: 100%;
+    background: var(--emfe-w-color-header-bg, #050518);
+    border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
+  }
+
+  .HeaderItemsMenu {
+    display: flex;
+    align-content: flex-start;
+    list-style: none;
+    text-transform: uppercase;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 16px;
+    align-items: center;
+
+    .Item:hover {
+      .HeaderSecondaryNav {
+        display: block;
+      }
+    }
+
+    .Item {
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+    }
+
+    &.PrimaryMenu {
+      gap: 10px;
+    }
+  }
+
+  .Item a {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    text-decoration: none;
+    border-top: 1px solid transparent;
+  }
+
+  .Item a:hover {
+    color: var(--emfe-w-color-primary, #D0046C);
+    border-top: 1px solid 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-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-color-primary, #D0046C);
+    font-size: 14px;
+    height: 44px;
+    text-align: center;
+    line-height: 44px;
+    cursor: pointer;
+  }
+
+  .ItemDeposit {
+    background: var(--emfe-w-color-primary, #D0046C);
+  }
+
+  .ItemLanguage {
+    height: 44px;
+    width: 90px;
+    text-align: center;
+    line-height: 44px;
+    background: transparent;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    border: none;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    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-color-header-bg, #050518);
+    background-position: calc(100% - 0.75rem) center;
+
+    option {
+      color: var(--emfe-w-color-white, #FFFFFF);
+    }
+  }
+
+  .ItemBalance {
+    background: transparent;
+    color: 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-color-white, #FFFFFF);
+    font-size: 14px;
+    max-width: 1280px;
+    margin: 0 auto;
+    overflow-y: hidden;
+    overflow-x: auto;
+    padding: 0;
+  }
+
+  .HeaderItemsMenuSecondary .ItemSecondary {
+    padding: 0 15px;
+    cursor: pointer;
+    font-weight: 600;
+    transition-duration: 0.15s;
+
+    a {
+      color: var(--emfe-w-color-white, #FFFFFF);
+      text-decoration: none;
+    }
+
+    &:hover {
+      a {
+        color: var(--emfe-w-color-primary, #D0046C);
+      }
+    }
+  }
+
+  .HeaderSliderMobile {
+    background-position: bottom;
+  }
+
+  .HeaderMobileWrapper {
+    .HeaderContainer {
+      height: 55px;
+      padding: 0 15px;
+      gap: 10px;
+    }
+
+    .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>