@everymatrix/casino-header-controller 1.13.14 → 1.13.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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.14",
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": "a5cf232b09fe0b3050e2243fb25404a2e17f382f"
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