@everymatrix/casino-header-controller 1.15.7 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.15.7",
+  "version": "1.16.0",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4e4929f58bd412710f1e9fa1091a3121877a5f18"
+  "gitHead": "4de660840367ca3f6d6645e39b13ba86ca19bb5e"
 }

package/src/CasinoHeaderController.svelte

@@ -330,6 +330,7 @@
 
   function selectLanguage(operatorLanguage:string) {
     selectedLanguage = operatorLanguage;
+    isOptionsListVisible = false;
     menuAction('language');
   }
 
@@ -462,7 +463,7 @@
             </div>
             {#if (languagesArray.length > 1) }
               {#if countryflagheader !== 'true'}
-                <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+                <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
                   {#each languagesArray as operatorLanguage}
                     <option value={operatorLanguage} selected>{operatorLanguage}</option>
                   {/each}
@@ -474,13 +475,18 @@
                       <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
                     </span>
                     <span class="LanguageName">{selectedLanguage}</span>
+                    <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
+                      <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>
                   {#if isOptionsListVisible}
                     <div class="OptionList">
                       {#each languagesArray as operatorLanguage}
                         <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
                           <span class="FlagIcon">
-                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${operatorLanguage.toUpperCase() == 'EN' ? 'US' : operatorLanguage.toUpperCase()}.svg`}/>
                           </span>
                           <span class="LanguageName">{operatorLanguage}</span>
                         </div>
@@ -575,7 +581,7 @@
             <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>   
             {#if (languagesArray.length > 1) }      
               {#if countryflagheader !== 'true'}
-                <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+                <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
                   {#each languagesArray as operatorLanguage}
                     <option value={operatorLanguage}>{operatorLanguage}</option>
                   {/each}
@@ -587,6 +593,11 @@
                       <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${selectedLanguage.toUpperCase() == 'EN' ? 'US' : selectedLanguage.toUpperCase()}.svg`}/>
                     </span>
                     <span class="LanguageName">{selectedLanguage}</span>
+                    <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
+                      <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>
                   {#if isOptionsListVisible}
                     <div class="OptionList">
@@ -644,50 +655,71 @@
   }
 
   .LanguageDropdown {
-    margin-right: 16px;
-    position: relative;
-    display: inline-block;
-  }
+  margin-right: 16px;
+  position: relative;
+  display: inline-block;
+}
 
-  .SelectedOption,
-  .OptionList {
-    border: 1px solid var(--emfe-w-header-color-primary);
-    padding: 8px;
-    cursor: pointer;
-    width: 200px;
-    border-radius: 2px;
-  }
+.SelectedOption,
+.OptionList {
+  border: 1px solid var(--emfe-w-header-color-primary);
+  padding: 8px;
+  cursor: pointer;
+  width: 76px;
+  border-radius: 4px;
+}
 
-  .SelectedOption {
-    display: flex;
-    align-items: center;
-  }
+.SelectedOption {
+  display: flex;
+  align-items: center;
+}
 
-  .FlagIcon img {
-    width: 20px;
-    height: 14px;
-    margin-right: 8px;
-    border-radius: 2px;
-  }
+.FlagIcon img {
+  width: 20px;
+  height: 14px;
+  margin-right: 8px;
+  border-radius: 2px;
+}
 
-  .OptionList {
-    position: absolute;
-    z-index: 1;
-    color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
-    background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
-    max-height: 150px;
-    overflow-y: auto;
-  }
+.OptionList {
+  position: absolute;
+  z-index: 1;
+  color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
+  background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
+  max-height: 150px;
+  overflow-y: auto;
+}
 
-  .LanguageOption {
-    display: flex;
-    align-items: center;
-    padding: 4px;
+.LanguageOption {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+
+.TriangleInactive {
+  display: block;
+  color: currentColor;
+  margin: 0 0 0 10px;
+  transition: all .5s;
+
+  svg{
+    margin: 2px 0px;
   }
-  .LanguageOption:hover {
-    background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
-    border-radius: 2px;
+}
+
+.TriangleActive {
+  transform: rotate(180deg);
+  position: relative;
+
+  svg{
+    margin: 2px 0px;
   }
+}
+
+.LanguageOption:hover {
+  background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+  border-radius: 2px;
+}
   .HeaderWrapper {
     background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
   }
@@ -717,7 +749,7 @@
       margin-right: 0;
     }
   }
-
+  
   .HeaderMainNav {
     text-align: left;
   }
@@ -735,7 +767,7 @@
   }
 
   .HeaderItemsMenu {
-    gap: 10px;
+    gap: 8px;
     display: flex;
     align-content: flex-start;
     list-style: none;
@@ -814,14 +846,19 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    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));
-    background-position: calc(100% - 0.75rem) center;
 
     option {
       color: var(--emfe-w-header-typography, var(--emfe-w-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(--emfe-w-header-color-menu-bg, var(--emfe-w-color-darkest-blue, #050518));
+    background-position: calc(100% - 0.75rem) center;
+    width: 90px;
+    margin-right: 6px;
+  }
+
   .ItemBalance {
     background: transparent;
     color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));