@everymatrix/casino-header-controller 1.13.15 → 1.13.17

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 +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