@everymatrix/casino-header-controller 1.13.15 → 1.13.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/casino-header-controller.js +3 -3
  2. package/dist/casino-header-controller.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/CasinoHeaderController.svelte +52 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-header-controller",
3
- "version": "1.13.15",
3
+ "version": "1.13.16",
4
4
  "main": "dist/casino-header-controller.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -37,5 +37,5 @@
37
37
  "publishConfig": {
38
38
  "access": "public"
39
39
  },
40
- "gitHead": "64d94eb05d1cff11bf0cfd2bb8079bec43797d28"
40
+ "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
41
41
  }
package/src/CasinoHeaderController.svelte CHANGED
@@ -352,9 +352,9 @@
352
352
 
353
353
  {#if isLoggedIn}
354
354
  {#if mobileView}
355
- <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
356
- <div class="HeaderContainer" part="HeaderContainer">
357
- <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
355
+ <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
356
+ <div class="HeaderContainer">
357
+ <div class="HeaderMobileMainNav">
358
358
  {#if !hamburgerMenuActive}
359
359
  <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
360
360
  viewBox="0 0 22 16">
@@ -372,7 +372,7 @@
372
372
  </svg>
373
373
  {/if}
374
374
  </div>
375
- <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
375
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
376
376
  {#if logoFromCms}
377
377
  <img src={logoPath} alt="Logo">
378
378
  {:else}
@@ -404,9 +404,9 @@
404
404
  </div>
405
405
  </header>
406
406
  {:else}
407
- <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
408
- <div class="HeaderContainer" part="HeaderContainer">
409
- <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
407
+ <header class="HeaderWrapper" bind:this={customStylingContainer}>
408
+ <div class="HeaderContainer">
409
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
410
410
  {#if logoFromCms}
411
411
  <img src={logoPath} alt="Logo">
412
412
  {:else}
@@ -414,7 +414,7 @@
414
414
  {/if}
415
415
  </div>
416
416
 
417
- <nav class="HeaderMainNav" part="HeaderMainNav">
417
+ <nav class="HeaderMainNav">
418
418
  {#if !isLoading}
419
419
  <casino-slider
420
420
  class="HeaderItemsMenu"
@@ -433,8 +433,8 @@
433
433
  />
434
434
  {/if}
435
435
  </nav>
436
- <div class="HeaderTopActions" part="HeaderItemsMenu">
437
- <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
436
+ <div class="HeaderTopActions">
437
+ <div class="HeaderItemsMenu PrimaryMenu">
438
438
  <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision}/>
439
439
  <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
440
440
  <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
@@ -452,7 +452,7 @@
452
452
  </g>
453
453
  </svg>
454
454
  </div>
455
- <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
455
+ <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
456
456
  {#each languagesArray as operatorLanguage}
457
457
  <option value={operatorLanguage} selected>{operatorLanguage}</option>
458
458
  {/each}
@@ -460,8 +460,8 @@
460
460
  </div>
461
461
  </div>
462
462
  </div>
463
- <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
464
- <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
463
+ <nav class="HeaderSecondaryNav">
464
+ <ul class="HeaderItemsMenuSecondary">
465
465
  {#each secondaryMenuArray as secondaryItem}
466
466
  <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
467
467
  <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
@@ -473,9 +473,9 @@
473
473
  {/if}
474
474
  {:else}
475
475
  {#if mobileView}
476
- <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
477
- <div class="HeaderContainer" part="HeaderContainer">
478
- <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
476
+ <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
477
+ <div class="HeaderContainer">
478
+ <div class="HeaderMobileMainNav">
479
479
  <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
480
480
  viewBox="0 0 22 16">
481
481
  <defs>
@@ -491,7 +491,7 @@
491
491
  </g>
492
492
  </svg>
493
493
  </div>
494
- <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
494
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
495
495
  {#if logoFromCms}
496
496
  <img src={logoPath} alt="Logo">
497
497
  {:else}
@@ -499,18 +499,18 @@
499
499
  {/if}
500
500
  </div>
501
501
 
502
- <div class="HeaderTopActions" part="HeaderTopActions">
503
- <div class="HeaderItemsMenu" part="HeaderItemsMenu">
504
- <div class="Item ItemLogin" part="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
505
- <div class="Item ItemRegister" part="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
502
+ <div class="HeaderTopActions">
503
+ <div class="HeaderItemsMenu">
504
+ <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
505
+ <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
506
506
  </div>
507
507
  </div>
508
508
  </div>
509
509
  </header>
510
510
  {:else}
511
- <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
512
- <div class="HeaderContainer" part="HeaderContainer">
513
- <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
511
+ <header class="HeaderWrapper" bind:this={customStylingContainer}>
512
+ <div class="HeaderContainer">
513
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
514
514
  {#if logoFromCms}
515
515
  <img src={logoPath} alt="Logo">
516
516
  {:else}
@@ -518,7 +518,7 @@
518
518
  {/if}
519
519
  </div>
520
520
 
521
- <nav class="HeaderMainNav" part="HeaderMainNav">
521
+ <nav class="HeaderMainNav">
522
522
  {#if !isLoading}
523
523
  <casino-slider
524
524
  class="HeaderItemsMenu"
@@ -536,11 +536,11 @@
536
536
  />
537
537
  {/if}
538
538
  </nav>
539
- <div class="HeaderTopActions" part="HeaderTopActions">
540
- <div class="HeaderItemsMenu" part="HeaderItemsMenu">
541
- <div class="Item ItemLogin" part="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
542
- <div class="Item ItemRegister" part="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
543
- <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
539
+ <div class="HeaderTopActions">
540
+ <div class="HeaderItemsMenu">
541
+ <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
542
+ <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
543
+ <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
544
544
  {#each languagesArray as operatorLanguage}
545
545
  <option value={operatorLanguage}>{operatorLanguage}</option>
546
546
  {/each}
@@ -548,8 +548,8 @@
548
548
  </div>
549
549
  </div>
550
550
  </div>
551
- <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
552
- <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
551
+ <nav class="HeaderSecondaryNav">
552
+ <ul class="HeaderItemsMenuSecondary">
553
553
  {#each secondaryMenuArray as secondaryItem}
554
554
  <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
555
555
  <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
@@ -586,7 +586,7 @@
586
586
  }
587
587
 
588
588
  .HeaderWrapper {
589
- background: var(--emfe-w-color-header-bg, #050518);
589
+ background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
590
590
  }
591
591
 
592
592
  .HeaderContainer {
@@ -627,7 +627,7 @@
627
627
  .HeaderSecondaryNav {
628
628
  flex-direction: row;
629
629
  width: 100%;
630
- background: var(--emfe-w-color-header-bg, #050518);
630
+ background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
631
631
  border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
632
632
  }
633
633
 
@@ -636,7 +636,7 @@
636
636
  align-content: flex-start;
637
637
  list-style: none;
638
638
  text-transform: uppercase;
639
- color: var(--emfe-w-color-white, #FFFFFF);
639
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
640
640
  font-size: 16px;
641
641
  align-items: center;
642
642
 
@@ -658,14 +658,14 @@
658
658
  }
659
659
 
660
660
  .Item a {
661
- color: var(--emfe-w-color-white, #FFFFFF);
661
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
662
662
  text-decoration: none;
663
663
  border-top: 1px solid transparent;
664
664
  }
665
665
 
666
666
  .Item a:hover {
667
- color: var(--emfe-w-color-primary, #D0046C);
668
- border-top: 1px solid var(--emfe-w-color-primary, #D0046C);
667
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
668
+ border-top: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
669
669
  padding-top: 5px;
670
670
  }
671
671
 
@@ -674,7 +674,7 @@
674
674
  background: transparent;
675
675
  font-size: 14px;
676
676
  font-weight: 600;
677
- border: solid 1px var(--emfe-w-color-white, #FFFFFF);
677
+ border: solid 1px var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
678
678
  height: 44px;
679
679
  text-align: center;
680
680
  line-height: 44px;
@@ -684,7 +684,7 @@
684
684
 
685
685
  .ItemRegister, .ItemDeposit {
686
686
  border-radius: 5px;
687
- background: var(--emfe-w-color-primary, #D0046C);
687
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
688
688
  font-size: 14px;
689
689
  height: 44px;
690
690
  text-align: center;
@@ -693,7 +693,7 @@
693
693
  }
694
694
 
695
695
  .ItemDeposit {
696
- background: var(--emfe-w-color-primary, #D0046C);
696
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
697
697
  }
698
698
 
699
699
  .ItemLanguage {
@@ -702,24 +702,24 @@
702
702
  text-align: center;
703
703
  line-height: 44px;
704
704
  background: transparent;
705
- color: var(--emfe-w-color-white, #FFFFFF);
705
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
706
706
  border: none;
707
707
  cursor: pointer;
708
708
  outline: none;
709
709
  -webkit-appearance: none;
710
710
  -moz-appearance: none;
711
711
  appearance: none;
712
- 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);
712
+ 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-darkest-blue, #050518));
713
713
  background-position: calc(100% - 0.75rem) center;
714
714
 
715
715
  option {
716
- color: var(--emfe-w-color-white, #FFFFFF);
716
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
717
717
  }
718
718
  }
719
719
 
720
720
  .ItemBalance {
721
721
  background: transparent;
722
- color: var(--emfe-w-color-white, #FFFFFF);
722
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
723
723
  border: 0;
724
724
  }
725
725
 
@@ -740,7 +740,7 @@
740
740
  height: 60px;
741
741
  list-style: none;
742
742
  text-transform: uppercase;
743
- color: var(--emfe-w-color-white, #FFFFFF);
743
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
744
744
  font-size: 14px;
745
745
  max-width: 1280px;
746
746
  margin: 0 auto;
@@ -759,7 +759,7 @@
759
759
  transition-duration: 0.15s;
760
760
 
761
761
  button {
762
- color: var(--emfe-w-color-white, #FFFFFF);
762
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
763
763
  text-decoration: none;
764
764
  border: none;
765
765
  background: none;
@@ -768,24 +768,24 @@
768
768
  text-transform: uppercase;
769
769
  cursor: pointer;
770
770
  &:hover {
771
- color: var(--emfe-w-color-primary, #D0046C);
771
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
772
772
  }
773
773
 
774
774
  &:focus {
775
- color: var(--emfe-w-color-primary, #D0046C);
775
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
776
776
  }
777
777
 
778
778
  &:visited {
779
- color: var(--emfe-w-color-white, #FFFFFF);
779
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
780
780
  }
781
781
 
782
782
  &:focus-visible {
783
- color: var(--emfe-w-color-white, #FFFFFF);
783
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
784
784
  outline: none;
785
785
  }
786
786
  }
787
787
  &.active {
788
- background: var(--emfe-w-color-primary, #D0046C);
788
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
789
789
  }
790
790
  }
791
791