@everymatrix/casino-header-controller 1.13.15 → 1.13.17

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 +63 -61
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.17",
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": "8b0b2bd7cdef9f325e39e95baf9a25dd09ad69b3"
41
41
  }
package/src/CasinoHeaderController.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  export let languageslist:string = 'en, ro';
21
21
  export let activecategory:string = '';
22
22
  export let translationurl:string = '';
23
- export let customlocaleidentifier:string = '';
23
+ export let customlocaleidentifier:string = '';
24
24
  export let gmversion:string = '';
25
25
  export let displaybalanceoption:string = 'both';
26
26
 
@@ -105,7 +105,7 @@
105
105
  gtag('event', 'OpenLoginModal', {
106
106
  'context': 'HeaderController'
107
107
  });
108
- }
108
+ }
109
109
  break;
110
110
 
111
111
  case 'register':
@@ -117,7 +117,7 @@
117
117
  gtag('event', 'OpenRegisterModal', {
118
118
  'context': 'HeaderController'
119
119
  });
120
- }
120
+ }
121
121
  break;
122
122
 
123
123
  case 'lobby':
@@ -136,7 +136,7 @@
136
136
  gtag('event', 'GoToDeposit', {
137
137
  'context': 'HeaderController'
138
138
  });
139
- }
139
+ }
140
140
  break;
141
141
 
142
142
  case 'language':
@@ -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,16 +452,18 @@
452
452
  </g>
453
453
  </svg>
454
454
  </div>
455
- <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>menuAction('language')}>
456
- {#each languagesArray as operatorLanguage}
457
- <option value={operatorLanguage} selected>{operatorLanguage}</option>
458
- {/each}
459
- </select>
455
+ {#if (languagesArray.length > 1) }
456
+ <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
457
+ {#each languagesArray as operatorLanguage}
458
+ <option value={operatorLanguage} selected>{operatorLanguage}</option>
459
+ {/each}
460
+ </select>
461
+ {/if}
460
462
  </div>
461
463
  </div>
462
464
  </div>
463
- <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
464
- <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
465
+ <nav class="HeaderSecondaryNav">
466
+ <ul class="HeaderItemsMenuSecondary">
465
467
  {#each secondaryMenuArray as secondaryItem}
466
468
  <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
467
469
  <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
@@ -473,9 +475,9 @@
473
475
  {/if}
474
476
  {:else}
475
477
  {#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">
478
+ <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
479
+ <div class="HeaderContainer">
480
+ <div class="HeaderMobileMainNav">
479
481
  <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
480
482
  viewBox="0 0 22 16">
481
483
  <defs>
@@ -491,7 +493,7 @@
491
493
  </g>
492
494
  </svg>
493
495
  </div>
494
- <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
496
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
495
497
  {#if logoFromCms}
496
498
  <img src={logoPath} alt="Logo">
497
499
  {:else}
@@ -499,18 +501,18 @@
499
501
  {/if}
500
502
  </div>
501
503
 
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>
504
+ <div class="HeaderTopActions">
505
+ <div class="HeaderItemsMenu">
506
+ <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
507
+ <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
506
508
  </div>
507
509
  </div>
508
510
  </div>
509
511
  </header>
510
512
  {: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')}>
513
+ <header class="HeaderWrapper" bind:this={customStylingContainer}>
514
+ <div class="HeaderContainer">
515
+ <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
514
516
  {#if logoFromCms}
515
517
  <img src={logoPath} alt="Logo">
516
518
  {:else}
@@ -518,7 +520,7 @@
518
520
  {/if}
519
521
  </div>
520
522
 
521
- <nav class="HeaderMainNav" part="HeaderMainNav">
523
+ <nav class="HeaderMainNav">
522
524
  {#if !isLoading}
523
525
  <casino-slider
524
526
  class="HeaderItemsMenu"
@@ -536,11 +538,11 @@
536
538
  />
537
539
  {/if}
538
540
  </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')}>
541
+ <div class="HeaderTopActions">
542
+ <div class="HeaderItemsMenu">
543
+ <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
544
+ <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
545
+ <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
544
546
  {#each languagesArray as operatorLanguage}
545
547
  <option value={operatorLanguage}>{operatorLanguage}</option>
546
548
  {/each}
@@ -548,8 +550,8 @@
548
550
  </div>
549
551
  </div>
550
552
  </div>
551
- <nav class="HeaderSecondaryNav" part="HeaderSecondaryNav">
552
- <ul class="HeaderItemsMenuSecondary" part="HeaderItemsMenuSecondary">
553
+ <nav class="HeaderSecondaryNav">
554
+ <ul class="HeaderItemsMenuSecondary">
553
555
  {#each secondaryMenuArray as secondaryItem}
554
556
  <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
555
557
  <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
@@ -576,7 +578,7 @@
576
578
  }
577
579
 
578
580
  input,
579
- textarea,
581
+ textarea,
580
582
  button {font-family: inherit}
581
583
 
582
584
 
@@ -586,7 +588,7 @@
586
588
  }
587
589
 
588
590
  .HeaderWrapper {
589
- background: var(--emfe-w-color-header-bg, #050518);
591
+ background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
590
592
  }
591
593
 
592
594
  .HeaderContainer {
@@ -627,7 +629,7 @@
627
629
  .HeaderSecondaryNav {
628
630
  flex-direction: row;
629
631
  width: 100%;
630
- background: var(--emfe-w-color-header-bg, #050518);
632
+ background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
631
633
  border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
632
634
  }
633
635
 
@@ -636,7 +638,7 @@
636
638
  align-content: flex-start;
637
639
  list-style: none;
638
640
  text-transform: uppercase;
639
- color: var(--emfe-w-color-white, #FFFFFF);
641
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
640
642
  font-size: 16px;
641
643
  align-items: center;
642
644
 
@@ -658,14 +660,14 @@
658
660
  }
659
661
 
660
662
  .Item a {
661
- color: var(--emfe-w-color-white, #FFFFFF);
663
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
662
664
  text-decoration: none;
663
665
  border-top: 1px solid transparent;
664
666
  }
665
667
 
666
668
  .Item a:hover {
667
- color: var(--emfe-w-color-primary, #D0046C);
668
- border-top: 1px solid var(--emfe-w-color-primary, #D0046C);
669
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
670
+ border-top: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
669
671
  padding-top: 5px;
670
672
  }
671
673
 
@@ -674,7 +676,7 @@
674
676
  background: transparent;
675
677
  font-size: 14px;
676
678
  font-weight: 600;
677
- border: solid 1px var(--emfe-w-color-white, #FFFFFF);
679
+ border: solid 1px var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
678
680
  height: 44px;
679
681
  text-align: center;
680
682
  line-height: 44px;
@@ -684,7 +686,7 @@
684
686
 
685
687
  .ItemRegister, .ItemDeposit {
686
688
  border-radius: 5px;
687
- background: var(--emfe-w-color-primary, #D0046C);
689
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
688
690
  font-size: 14px;
689
691
  height: 44px;
690
692
  text-align: center;
@@ -693,7 +695,7 @@
693
695
  }
694
696
 
695
697
  .ItemDeposit {
696
- background: var(--emfe-w-color-primary, #D0046C);
698
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
697
699
  }
698
700
 
699
701
  .ItemLanguage {
@@ -702,24 +704,24 @@
702
704
  text-align: center;
703
705
  line-height: 44px;
704
706
  background: transparent;
705
- color: var(--emfe-w-color-white, #FFFFFF);
707
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
706
708
  border: none;
707
709
  cursor: pointer;
708
710
  outline: none;
709
711
  -webkit-appearance: none;
710
712
  -moz-appearance: none;
711
713
  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);
714
+ 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
715
  background-position: calc(100% - 0.75rem) center;
714
716
 
715
717
  option {
716
- color: var(--emfe-w-color-white, #FFFFFF);
718
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
717
719
  }
718
720
  }
719
721
 
720
722
  .ItemBalance {
721
723
  background: transparent;
722
- color: var(--emfe-w-color-white, #FFFFFF);
724
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
723
725
  border: 0;
724
726
  }
725
727
 
@@ -740,7 +742,7 @@
740
742
  height: 60px;
741
743
  list-style: none;
742
744
  text-transform: uppercase;
743
- color: var(--emfe-w-color-white, #FFFFFF);
745
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
744
746
  font-size: 14px;
745
747
  max-width: 1280px;
746
748
  margin: 0 auto;
@@ -759,7 +761,7 @@
759
761
  transition-duration: 0.15s;
760
762
 
761
763
  button {
762
- color: var(--emfe-w-color-white, #FFFFFF);
764
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
763
765
  text-decoration: none;
764
766
  border: none;
765
767
  background: none;
@@ -768,24 +770,24 @@
768
770
  text-transform: uppercase;
769
771
  cursor: pointer;
770
772
  &:hover {
771
- color: var(--emfe-w-color-primary, #D0046C);
773
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
772
774
  }
773
775
 
774
776
  &:focus {
775
- color: var(--emfe-w-color-primary, #D0046C);
777
+ color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
776
778
  }
777
779
 
778
780
  &:visited {
779
- color: var(--emfe-w-color-white, #FFFFFF);
781
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
780
782
  }
781
783
 
782
784
  &:focus-visible {
783
- color: var(--emfe-w-color-white, #FFFFFF);
785
+ color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
784
786
  outline: none;
785
787
  }
786
788
  }
787
789
  &.active {
788
- background: var(--emfe-w-color-primary, #D0046C);
790
+ background: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
789
791
  }
790
792
  }
791
793