@everymatrix/casino-header-controller-nd 1.44.0 → 1.45.2

package/src/CasinoHeaderControllerNd.svelte

@@ -1,1550 +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-hamburger-menu-nd';
-  import '@everymatrix/player-account-balance-modal-nd';
-  import '@everymatrix/player-deposit';
-
-  import * as countryFlags from 'country-flag-icons/string/3x2';
-
-  // @ts-ignore
-  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 = '';
-  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 = '';
-
-  export let gamification: string = 'false';
-  export let totalcalculationmode = '';
-
-
-  let activeIndex: number;
-  let customStylingContainer: HTMLElement;
-  let balanceContainer: HTMLElement;
-  let depositContainer: HTMLElement;
-  let backgroundContainer: HTMLElement;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = (): void => {
-    fetch(translationurl)
-      .then((res: any): void => res.json())
-      .then((res: any): void => {
-        Object.keys(res).forEach((item:any): void => {
-          addNewMessages(item, res[item]);
-        });
-      }).catch((err: any): void => {
-        console.log(err);
-      });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item: string): void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  let mainMenuArray: Array<string> = [];
-  let secondaryMenuArray: Array<string> = [];
-  let selectedLanguage: string = '';
-  let hamburgerURL: URL;
-  let headerURL: URL;
-  let logoURL: URL;
-  let isLoading: boolean = true;
-  let logoFromCms: boolean = false;
-  let primaryMenuLoading: boolean = true;
-
-  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 languagesArray: Array<string> = [];
-  let hamburgerMenuActive: boolean = false;
-  let logoPath: string = '';
-  let shortCashierActivated: boolean = false;
-  let isBalanceOpened: boolean = false;
-  let languageValue: string;
-
-  const gtagCall = (eventName: string): void => {
-    // @ts-ignore
-    if (typeof gtag == 'function'){
-      // @ts-ignore
-      gtag('event', eventName, {
-        'context': 'HeaderController'
-      });
-    }
-  }
-
-  const menuAction = (type: string, data?: any): void => {
-    switch (type) {
-      case 'login':
-        window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
-
-        gtagCall('OpenLoginModal');
-        break;
-
-      case 'register':
-        window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
-
-        gtagCall('OpenRegisterModal');
-        break;
-
-      case 'lobby':
-        window.postMessage({ type: 'GoToHomepage' }, window.location.href);
-
-        gtagCall('GoToHomepage');
-        break;
-
-      case 'myaccount':
-        window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent) }, window.location.href);
-
-        gtagCall('GoToMyAccount');
-        break;
-
-      case 'deposit':
-        if (isShortCashierEnabled) {
-          shortCashierActivated = true;
-          window.postMessage({ type: 'DisableScroll' }, window.location.href);
-        } else {
-          window.postMessage({ type: 'GoToDeposit' }, window.location.href);
-        }
-
-        gtagCall('GoToDeposit');
-        break;
-
-      case 'language':
-        languageValue = determineFlag();
-        window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
-        break;
-
-      case 'page':
-        window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
-        break;
-
-      case 'closeLanguageSelector':
-        isOptionsListVisible = false;
-        break;
-    }
-  }
-
-  const toggleMenu = (): void => {
-    hamburgerMenuActive = !hamburgerMenuActive;
-    window.postMessage({ type: 'OpenHamburgerMenuModal' }, window.location.href);
-  }
-
-  const messageHandler = (e: any): void => {
-    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':
-          if (e.data.selectedLanguage.toLowerCase() != lang) {
-            primaryMenuLoading = true;
-          }
-          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;
-
-        case 'BalanceModalStatus':
-          isBalanceOpened = e.data.status == 'open';
-          adaptDepositBackground(isBalanceOpened);
-          break;
-
-        case 'UpdateBalanceBackground':
-          adaptDepositBackground(isBalanceOpened);
-          break;
-      }
-    }
-  }
-
-  const setInitialStateForDepositBackground = (): void => {
-    let width = depositContainer.getBoundingClientRect().width;
-    backgroundContainer.style.width = `${width}px`;
-    backgroundContainer.style.left = `${balanceContainer.getBoundingClientRect().width}px`;
-  }
-
-  const adaptDepositBackground = (isBalanceOpened): void => {
-    if (isBalanceOpened) {
-      let width = balanceContainer.getBoundingClientRect().width;
-      backgroundContainer.style.width = `${width}px`;
-      backgroundContainer.style.left = `0px`;
-    } else {
-      setInitialStateForDepositBackground();
-    }
-  }
-
-  const setSession = (): void => {
-    isLoggedIn = true;
-    sessionID = session;
-  }
-
-  const closeShortCashier = (event?: any): void => {
-    shortCashierActivated = false;
-    window.postMessage({ type: 'EnableScroll' }, window.location.href);
-    event?.stopPropagation();
-  }
-
-  const createCMSUrls = (): void => {
-    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('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('userRoles', userroles);
-
-    getHeaderMenusData(headerURL);
-  }
-
-  const setActiveLanguage = (): void => {
-    setLocale(lang);
-  }
-
-  const initialLoad = (): void => {
-    languageValue = determineFlag();
-    languagesArray = languageslist.replace(/ /g,'').split(',');
-    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
-
-    selectedLanguage = lang.toUpperCase();
-
-    createCMSUrls();
-    getLogo(logoURL);
-  }
-
-  const initializeMenu = (): void => {
-    const primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
-    const secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
-    activeIndex = primaryActiveIndex > secondaryActiveIndex ? primaryActiveIndex : secondaryActiveIndex;
-  }
-
-  const setActiveIndex = (activecategory: any, menuList: any): any => {
-    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: any): boolean => {
-        return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
-      });
-    }
-
-    if (result) {
-      return result.id;
-    } else {
-      return -1;
-    }
-  }
-
-  const getHeaderMenusData = (url: any): Promise<any> => {
-    isLoading = true;
-
-    return new Promise((resolve, reject): void => {
-      fetch(url)
-        .then((res: any): void => res.json())
-        .then((data: any): void => {
-          mainMenuArray = data.desktop.primary;
-          secondaryMenuArray = data.desktop.secondary;
-          isLoading = false;
-          primaryMenuLoading = false;
-
-          resolve(data);
-        }, (err: any): void => {
-          isLoading = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const getLogo = (url: URL): Promise<any> => {
-    logoFromCms = false;
-
-    return new Promise((resolve, reject): void => {
-      fetch(url)
-        .then((res: any): void => res.json())
-        .then((data: any): void => {
-          if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
-            logoPath = data.logoUrl;
-            logoFromCms = true;
-          } else {
-            logoFromCms = false;
-          }
-          resolve(data);
-        }, (err: any): void => {
-          logoFromCms = false;
-          console.error(err);
-          reject(err);
-        });
-    });
-  }
-
-  const navigationTrigger = (itemData: any): void => {
-    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 = (operatorLanguage?: string): string => {
-    let flag = operatorLanguage ? operatorLanguage.slice(-2) : selectedLanguage.slice(-2);
-
-    if (customlocaleidentifier) {
-      flag =
-        customlocaleidentifier.includes(flag.toLowerCase()) ?
-        customlocaleidentifier.slice(-2) :
-        flag;
-    }
-
-    if (flag.toUpperCase() == 'EN' || flag == undefined) {
-      flag = 'US';
-    }
-
-    return flag.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): void => res.text())
-      .then((data: any): void => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(async () => {
-    window.addEventListener('message', messageHandler, false);
-
-    mobileView = isMobile(userAgent);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: activecategory && !isLoading && initializeMenu();
-  $: session && setSession();
-  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() == 'true';
-  $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && languageslist && userroles && cmsenv && initialLoad();
-  $: translationurl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-</script>
-
-<svelte:head>
-  <script type="module" src="https://unpkg.com/@everymatrix/gamification-dropdown"></script>
-</svelte:head>
-
-<div class="HeaderContainer" bind:this={customStylingContainer}>
-  <div class="MainNav">
-      {#if mobileView}
-        <div class="HeaderMobileMainNav">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div on:click={toggleMenu} class="NavIcon {hamburgerMenuActive ? 'Open' : ''}">
-              <span></span>
-              <span></span>
-              <span></span>
-            </div>
-        </div>
-      {/if}
-    <div class="Logo">
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
-        {#if logoFromCms}
-          <img src={logoPath} alt="Logo">
-        {:else}
-          <img src={everymatrixLogo} alt="Logo">
-        {/if}
-      </div>
-    </div>
-    <nav class="PrimaryMenu">
-      {#if !mobileView}
-        {#if primaryMenuLoading}
-          {#each new Array(6) as item}
-            <div class="Skeleton SkeletonText"></div>
-          {/each}
-        {:else}
-          {#each mainMenuArray as menuItem}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}" on:click={() => menuAction('page', menuItem)}>
-              <p>{menuItem.label}</p>
-              <div class="MenuHover"></div>
-            </div>
-          {/each}
-        {/if}
-      {/if}
-    </nav>
-    {#if isLoggedIn}
-      {#if gamification === 'true' && !mobileView}
-        <div class="GamificationWrapper">
-          <gamification-dropdown {session} {endpoint} language={lang} client-styling={clientstyling} client-styling-url={clientstylingurl} translation-url={translationurl}></gamification-dropdown>
-        </div>
-      {/if}
-      <div class="BalanceDepositWrapper">
-        <div class="Balance  {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
-          <player-account-balance-modal-nd {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {totalcalculationmode} {currencyseparator} {currencydecimal} {currencyprecision} />
-        </div>
-        <div class="Deposit {isBalanceOpened ? 'Open' : ''}" bind:this={depositContainer}>
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <div class="DepositButton" on:click={() => menuAction('deposit')}>
-            <p>{$_('deposit')}</p>
-          </div>
-          {#if shortCashierActivated}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
-            <div class="ShortCashierContainerWrapperMobile">
-              <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <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-width="2"/>
-                    <line x1="18" y1="2" x2="2" y2="18" 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}
-                  ></user-deposit-withdrawal>
-                {/if}
-              </div>
-            </div>
-          {/if}
-        </div>
-        <div class="Background {isBalanceOpened ? 'Open' : ''}" bind:this={backgroundContainer}></div>
-      </div>
-      <div class="Profile">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="ProfileWrapper" on:click={() => menuAction('myaccount')}>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16.429">
-            <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>
-    {:else}
-      <div class="AuthButtons">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemLogin" on:click={() => menuAction('login')}>
-          <p>{$_('login')}</p>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
-        </div>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemRegister" on:click={() => menuAction('register')}>
-          <p>{$_('register')}</p>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
-        </div>
-      </div>
-    {/if}
-    <div class="Slot1">
-      <slot name="slot1"></slot>
-    </div>
-    <div class="Slot2">
-      <slot name="slot2"></slot>
-    </div>
-    <div class="Slot3">
-      <slot name="slot3"></slot>
-    </div>
-    {#if !mobileView}
-      <div class="LanguageSelector">
-        {#if (languagesArray.length > 1) }
-          <div class="LanguageDropdown">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
-              {#if countryflagheader == 'true'}
-                <span class="LanguageName">{@html countryFlags[determineFlag(lang)]}</span>
-              {:else}
-                <span class="LanguageName">{languageValue}</span>
-              {/if}
-              <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
-                  <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>
-          </div>
-          <div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
-            {#each languagesArray as operatorLanguage}
-              <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
-                {#if countryflagheader == 'true' }
-                  <span class="FlagIcon">
-                    {@html countryFlags[determineFlag(operatorLanguage)]}
-                  </span>
-                {/if}
-                <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
-              </div>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <div class="Separator">
-
-  </div>
-  {#if !mobileView}
-    <div class="SecondaryNav">
-      <div class="LeftSpace">
-        <span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
-      </div>
-      <div class="SecondaryMenuContent">
-        {#if primaryMenuLoading}
-          {#each new Array(2) as item}
-            <div class="Skeleton SkeletonText"></div>
-          {/each}
-        {:else}
-          {#each secondaryMenuArray as secondaryItem}
-            <span class="ItemSecondary {secondaryItem.id == activeIndex ? 'Active' : ''}">
-              <p on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</p>
-            </span>
-          {/each}
-        {/if}
-      </div>
-    </div>
-  {/if}
-  {#if isOptionsListVisible}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="OptionListOverlay" on:click={() => menuAction('closeLanguageSelector')} />
-  {/if}
-</div>
-
-<casino-hamburger-menu-nd {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu-nd>
-
-<style lang="scss">
-  *,
-  *::before,
-  *::after {
-    font-family: inherit
-  }
-
-  :host {
-    font-family: inherit;
-  }
-
-  // ------> new stuff
-  .NavIcon {
-    width: 30px;
-    height: 28px;
-    position: relative;
-    margin: 50px auto;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    -webkit-transition: .5s ease-in-out;
-    -moz-transition: .5s ease-in-out;
-    -o-transition: .5s ease-in-out;
-    transition: .5s ease-in-out;
-    cursor: pointer;
-
-    span {
-      display: block;
-      position: absolute;
-      height: 3px;
-      width: 100%;
-      background: #ffffff;
-      border-radius: 9px;
-      opacity: 1;
-      left: 0;
-      -webkit-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-      -webkit-transition: .25s ease-in-out;
-      -moz-transition: .25s ease-in-out;
-      -o-transition: .25s ease-in-out;
-      transition: .25s ease-in-out;
-    }
-
-    span:nth-child(1) {
-      top: 0px;
-      width: 80%;
-    }
-
-    span:nth-child(2) {
-      top: 9px;
-    }
-
-    span:nth-child(3) {
-      top: 18px;
-    }
-
-    &.Open span:nth-child(1) {
-      top: 9px;
-      width: 100%;
-      -webkit-transform: rotate(135deg);
-      -moz-transform: rotate(135deg);
-      -o-transform: rotate(135deg);
-      transform: rotate(135deg);
-    }
-
-    &.Open span:nth-child(2) {
-      opacity: 0;
-      left: -60px;
-    }
-
-    &.Open span:nth-child(3) {
-      top: 9px;
-      -webkit-transform: rotate(-135deg);
-      -moz-transform: rotate(-135deg);
-      -o-transform: rotate(-135deg);
-      transform: rotate(-135deg);
-    }
-  }
-
-  .Skeleton {
-    animation: skeleton-loading .6s linear infinite alternate;
-  }
-
-  @keyframes skeleton-loading {
-    0% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .2) 0%, rgba(0, 61, 93, .2) 100%);
-    }
-    12% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .225) 0%, rgba(0, 61, 93, .225) 100%);
-    }
-    25% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .25) 0%, rgba(0, 61, 93, .25) 100%);
-    }
-    33% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .275) 0%, rgba(0, 61, 93, .275) 100%);
-    }
-    50% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .3) 0%, rgba(0, 61, 93, .3) 100%);
-    }
-    63% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .325) 0%, rgba(0, 61, 93, .325) 100%);
-    }
-    75% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .35) 0%, rgba(0, 61, 93, .35) 100%);
-    }
-    88% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .375) 0%, rgba(0, 61, 93, .375) 100%);
-    }
-    100% {
-      background: linear-gradient(90deg, rgba(35, 178, 78, .4) 0%, rgba(0, 61, 93, .4) 100%);
-    }
-  }
-
-  .SkeletonText {
-    opacity: 0.5;
-    margin: 0 15px;
-    width: 125px;
-    height: 15px;
-    border-radius: 15px;
-  }
-
-  .HeaderContainer {
-    position: fixed;
-    width: 100%;
-    z-index: 100;
-    background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    user-select: none;
-
-    .MainNav {
-      width: 99%;
-      height: 84px;
-      display: flex;
-      gap: 5px;
-      flex-direction: row;
-      align-items: center;
-      margin: 0 15px;
-
-      .HeaderMobileMainNav {
-        display: flex;
-        margin-left: 5px;
-      }
-
-      .Logo {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 10%;
-        min-width: 75px;
-        transition: all .2s;
-
-        .HeaderBranding {
-          width: 140px;
-          cursor: pointer;
-          img {
-            width: 100%;
-          }
-          @media only screen and (max-width: 360px) {
-            margin-right: 0;
-          }
-        }
-
-        &:active {
-          opacity: .9;
-          transform: scale(1.02);
-        }
-      }
-
-      .GamificationWrapper{
-        margin-right: 16px;
-      }
-
-      .BalanceDepositWrapper {
-        height: 34px;
-        background-color: white;
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-        border-radius: 30px;
-
-        .Background {
-          height: 34px;
-          position: absolute;
-          background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                      linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
-          border-radius: 30px;
-          z-index: 3;
-          transition: all 0.3s ease;
-        }
-
-        .Deposit {
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          justify-content: center;
-          z-index: 4;
-
-          .DepositButton {
-            font-size: 14px;
-            text-align: center;
-            cursor: pointer;
-            padding: 0 10px;
-            transition: all .5s linear;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            p {
-              text-transform: uppercase;
-              color: white;
-              transition: all .3s ease;
-
-              &:hover {
-                text-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
-              }
-
-              &:active {
-                color: black;
-              }
-            }
-          }
-
-          &.Open {
-            .DepositButton {
-              p {
-                transition: all .5s linear;
-                color: black;
-                opacity: .5;
-              }
-            }
-
-          }
-        }
-
-        .Balance {
-          display: flex;
-          z-index: 4;
-          height: 100%;
-          padding-left: 10px;
-          align-items: center;
-
-          &.Open {
-            color: white;
-          }
-        }
-      }
-
-      .Profile {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        cursor: pointer;
-
-        .ProfileWrapper {
-          width: 30px;
-          height: 30px;
-          background-color: orange;
-          border-radius: 50px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          transition: all .3s ease;
-
-          svg {
-            width: 15px;
-            height: 16px;
-            fill: var(--emw-color-white, #FFFFFF)
-
-          }
-          &:hover {
-            box-shadow: 0px 0px 4px white;
-          }
-
-          &:active {
-            svg {
-              fill: var(--emw-color-black, #000000)
-            }
-          }
-        }
-      }
-
-      .PrimaryMenu {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-
-        .ItemMenu {
-          color: white;
-          margin: 0 20px;
-          text-transform: uppercase;
-          height: 84px;
-          transition: all .5s;
-          cursor: pointer;
-
-          &:after {
-            content: "";
-            display: block;
-            height: 5px;
-            width: 100%;
-            cursor: pointer;
-            background-color: pink;
-            position: relative;
-          }
-
-          .MenuHover {
-            width: 0px;
-            transition: transform 0.3s ease-in-out;
-            transform-origin: center;
-            transform: scaleX(0);
-          }
-
-          p {
-            height: 33px;
-            margin-top: 35px;
-          }
-
-          &:hover, &.Active {
-            color: #22B04F;
-
-            .MenuHover {
-              transform: scaleX(1);
-              opacity: 1;
-              background-color: rgba(255, 255, 255, 0.5);
-              width: 100%;
-              position: relative;
-              height: 5px;
-              z-index: 4;
-            }
-          }
-
-          &:active {
-            color: rgba(255,255,255,1);
-          }
-        }
-      }
-
-      .AuthButtons {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-
-        .Item {
-          gap: 5px;
-          padding: 0 25px;
-          display: flex;
-          align-items: center;
-          color: white;
-
-          &.ItemLogin {
-            font-size: 14px;
-            height: 36px;
-            text-align: center;
-            margin-right: 10px;
-            position: relative;
-            cursor: pointer;
-            background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
-                        linear-gradient(180deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
-            border-radius: 30px;
-            border: 2px solid transparent;
-            transition: all .3s linear;
-
-            &:hover {
-              color: white;
-              background: linear-gradient(180deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
-                          linear-gradient(0deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
-              border: 2px solid white;
-            }
-
-            &:active {
-              background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
-                          linear-gradient(180deg, rgba(231,145,28,.4) 0%, rgba(224,169,76,.4) 100%) border-box;
-            }
-          }
-
-          &.ItemRegister {
-            background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                        linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
-            border-radius: 30px;
-            border: 2px solid transparent;
-            font-size: 14px;
-            height: 36px;
-            text-align: center;
-            line-height: 44px;
-            cursor: pointer;
-            transition: all .3s linear;
-
-            &:hover {
-              background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                          linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
-              border: 2px solid white;
-            }
-
-            &:active {
-              background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
-                          linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
-            }
-          }
-
-          svg {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            padding-bottom: 2px;
-          }
-        }
-      }
-
-      .Slot1 {}
-      .Slot2 {}
-      .Slot3 {}
-      .LanguageSelector {
-        align-content: center;
-        cursor: pointer;
-        transform: all .3s linear;
-        color: white;
-
-        .SelectedOption {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .TriangleActive, .TriangleInactive {
-            display: block;
-            margin: 0 0 0 10px;
-            transition: all .2s;
-            &:hover {
-              transform: scale(1.2);
-            }
-
-            svg{
-              margin: 2px 0px;
-            }
-          }
-
-          .TriangleActive {
-            transform: scale(1.1) rotateX(180deg);
-            margin-bottom: 5px;
-
-            &:hover {
-              transform: scale(1.1) rotateX(180deg);
-            }
-          }
-        }
-        .LanguageName {
-          .ItemLanguage {
-            display: flex;
-            justify-content: space-around;
-          }
-
-          svg {
-            width: 30px;
-            border-radius: 20px;
-          }
-        }
-
-        .OptionList {
-          border: 1px solid var(--emw-header-color-primary);
-          padding: 10px;
-          position: absolute;
-          cursor: pointer;
-          display: flex;
-          gap: 4px;
-          flex-direction: column;
-          border-radius: 10px;
-          transition: all 0.4s ease;
-          opacity: 0;
-          visibility: hidden;
-          z-index: 6;
-          right: 5px;
-          color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-          background: linear-gradient(90deg, rgba(42,79,55,1) 0%, rgba(0,61,92,1) 100%);
-
-          &.Active {
-            opacity: 1;
-            visibility: visible;
-          }
-
-          .FlagIcon {
-            width: 16px;
-
-            svg {
-              border-radius: 5px;
-            }
-          }
-
-          .LanguageOption {
-            display: flex;
-            align-items: center;
-            transform: scale(1.1);
-            gap: 3px;
-            padding: 7px;
-
-            &:hover {
-              transition: all 0.2s;
-              color: var(--emw-color-primary);
-              background: var(--emw-color-primary) transparent;
-              box-shadow: inset 0px 0px 0px 2px var(--emw-color-primary);
-              border-radius: 20px;
-              box-sizing: border-box;
-            }
-          }
-        }
-      }
-    }
-
-    .Separator {
-      width: 100%;
-      height: 5px;
-      background: rgb(0,0,0);
-      background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(35,172,77,1) 50%, rgba(0,0,0,1) 100%);
-      z-index: 3;
-    }
-
-    .SecondaryNav {
-      width: 100%;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      background: linear-gradient(90deg, rgba(35,172,77,1) 0%, rgba(18,62,33,1) 100%);
-      z-index: 3;
-
-      .LeftSpace {
-        width: 10%;
-      }
-
-      .SecondaryMenuContent {
-        text-transform: uppercase;
-        margin: 0 20px;
-        color: white;
-        transition: all .5s;
-        display: flex;
-        cursor: pointer;
-        user-select: none;
-        gap: 20px;
-
-        .ItemSecondary {
-          transition: all .5s;
-          .Active {
-            color: black;
-
-            &:hover {
-              opacity: .5;
-              color: white;
-            }
-          }
-
-          &:hover {
-            color: black;
-          }
-
-          &:active {
-            color: white;
-          }
-        }
-      }
-    }
-
-    .OptionListOverlay {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 5;
-    }
-  }
-
-  // ------> old stuff
-
-  @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;
-  }
-
-
-.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(--emw-color-white, #FFFFFF);
-  position: absolute;
-  width: 360px;
-  top: 16px;
-  transform: translateX(-60%);
-  box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-  border-radius: 5px;
-  z-index: 17;
-  box-shadow: 0px 5px 20px 0px #191919;
-  &:before {
-      content: "";
-    background: var(--emw-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(--emw-color-white, #FFFFFF);
-  position: absolute;
-  width: 80vw;
-  top: 14px;
-  left: 50%;
-  transform: translateX(-60%);
-  box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-  border-radius: 5px;
-  z-index: 17;
-  box-shadow: 0px 5px 20px 0px #191919;
-  &:before {
-    content: "";
-    background: var(--emw-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;
-  }
-}
-
-
-.FlagIcon img {
-  width: 20px;
-  height: 14px;
-  margin-right: 8px;
-  border-radius: 2px;
-}
-
-
-
-  .HeaderWrapper {
-    background: var(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
-  }
-
-
-
-  .HeaderMainNav {
-    text-align: left;
-  }
-
-  .HeaderTopActions {
-    text-align: right;
-    margin-left: auto;
-  }
-
-  .HeaderSecondaryNav {
-    flex-direction: row;
-    width: 100%;
-    background: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
-    border-top: 1px solid var(--emw-color-gray-300, #58586B);
-  }
-
-  .HeaderItemsMenu {
-    gap: 8px;
-    display: flex;
-    align-content: flex-start;
-    list-style: none;
-    text-transform: uppercase;
-    color: var(--emw-header-typography, var(--emw-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(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-    text-decoration: none;
-    border-top: 1px solid transparent;
-  }
-
-  .Item a:hover {
-    color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-    border-top: 1px solid var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-    padding-top: 5px;
-  }*/
-
-  .ItemDeposit {
-    background: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-  }
-
-  .ItemLanguage {
-    height: 44px;
-    width: 74px;
-    text-align: center;
-    line-height: 44px;
-    background: transparent;
-    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-    border: none;
-    cursor: pointer;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    option {
-      color: var(--emw-header-typography, var(--emw-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(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
-    background-position: calc(100% - 0.75rem) center;
-    width: 90px;
-    margin-right: 6px;
-  }
-
-  .ItemBalance {
-    background: transparent;
-    color: var(--emw-header-typography, var(--emw-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(--emw-header-typography, var(--emw-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(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-      text-decoration: none;
-      border: none;
-      background: none;
-      font-size: 14px;
-      font-weight: 600;
-      text-transform: uppercase;
-      cursor: pointer;
-      &:hover {
-        color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-      }
-
-      &:focus {
-        color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
-      }
-
-      &:visited {
-        color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-      }
-
-      &:focus-visible {
-        color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
-        outline: none;
-      }
-    }
-    &.active {
-      background: var(--emw-header-color-primary, var(--emw-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;
-      }
-    }
-
-    .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>