@everymatrix/casino-search 1.8.1 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-search",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e558ed5234cd858fa71696743229caa273752a2e"
+  "gitHead": "15df0a4bc1195017b7df65675dfd40261b5dbe8b"
 }

package/src/CasinoSearch.svelte

@@ -31,6 +31,7 @@
   let searchElement:HTMLElement;
   let searchCancelled:boolean = true;
   let searchActive:boolean = false;
+  let searchInputMaxLength:number = 50;
   
   let isLoading:boolean = false; 
   let customStylingContainer:HTMLElement;
@@ -249,7 +250,7 @@
     if (searchedValues.indexOf(gameID) === -1) {
       let value;
 
-      searchedValues.push(gameID);
+      searchedValues.unshift(gameID);
       value = searchedValues.join(',');
       localStorage.setItem(`searchedGamesWds_casino`, value);
     }
@@ -339,14 +340,14 @@
       
 </script>
   <div class="{(getDevice(userAgent) !== 'PC') ? '' : 'Desktop'} CasinoSearch" bind:this={customStylingContainer}>
-    <div class="Search">
+    <div class="Search  {searchCancelled ? '' : 'SearchAnimation'}">
       <div class="SearchIcon">
         <svg width="14" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m10.48 10.985 2.21 2.373"/>
           <circle cx="6.5" cy="6.5" r="5.75" stroke="#212121" stroke-width="1.5"/>
         </svg>
       </div>
-        <input class="SearchInput {searchCancelled ? '' : 'SearchAnimation'}" type="search" placeholder="{$_('Translations.placeHolderSearchGames')}" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement}>
+        <input class="SearchInput" type="search" placeholder="{$_('Translations.placeHolderSearchGames')}" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement} maxlength={searchInputMaxLength}>
         <span on:click={() => clearSearch()} class="SearchClearButton { searchValue.length != 0 ? '' : 'NotVisible'}">
           <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="m1.45 1.5 8.1 8M1.45 9.5l8.1-8" stroke="#717171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -541,6 +542,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
+
 
       &Icon {
         position: relative;
@@ -552,7 +555,6 @@
 
       &Input {
         width: 50%;
-        transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
       }
 
       &ClearButton{
@@ -563,15 +565,16 @@
       }
 
       &CancelButton {
-        transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
         margin-left: 20px;
       }
 
       &Animation {
-        width: 60%;
-        outline: none;
-        box-shadow: 0 5px 7px rgba(0,0,0,0.25);
-        background-color: rgba(255, 255, 255, 0.2);
+        transform: scaleX(110%);
+        & Input {
+          outline: none;
+          box-shadow: 0 5px 7px rgba(0,0,0,0.25);
+          background-color: rgba(255, 255, 255, 0.2);
+        }
       }
      
       &Message {