@everymatrix/casino-slider 1.24.6 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "1.24.6",
+  "version": "1.25.0",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "83c764a2fd7fd527c06d72f0a539fde3c531bd49"
+  "gitHead": "668756b576877a7c33679408591fa2b7f93e0f37"
 }

package/src/CasinoSlider.svelte

@@ -23,6 +23,9 @@
   export let lang:string = '';
   export let activeindex:string = '0';
   export let showsubgroups:string = 'false';
+  export let categoriesicon:string = 'false';
+  export let lobbyiconimage:string = '';
+  export let mygamesiconimage:string = '';
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -207,6 +210,16 @@
       });
   }
 
+  const handleSrc = (category) => {
+    let icon = '';
+    if(category.id==='LOBBY') {
+      icon = lobbyiconimage;
+    } else if(category.id==='MYGAMES') {
+      icon = mygamesiconimage;
+    } 
+    return category.icon || icon;
+  }
+
   onMount(() => {
     if ("ontouchstart" in document.documentElement) {
       document.documentElement.className += " touch-device";
@@ -249,6 +262,9 @@
             {location == 'headerMain' ? '' : 'SecondaryMenu'}"
               part="CarouselItem"
               on:click={e => { handleClick(category, index, null, null, 'main'); e.preventDefault()}}>
+                <div class="CategoryIcon">
+                  <img class="CategoryIconImg {categoriesicon === 'true' ? '' : 'DisplayNone' }" src="{handleSrc(category)}">
+                </div>
               {#if location === 'headerMain'}
                 <a href="#">{category.label}</a>
               {:else}
@@ -360,7 +376,7 @@
       left: auto;
       top: auto;
       opacity: 1;
-      transition: opacity 0.5s linear, top 0.5s;
+      transition: opacity 0.5s linear;
     }
     .CarouselItems li:focus-within > ul {
       left: auto;
@@ -429,6 +445,7 @@
       li {
         display: inline-block;
         text-align: left;
+        padding: 7px 10px;
         & > a {
           position: relative;
         }
@@ -439,7 +456,6 @@
       }
       a {
         display: block;
-        padding: 7px 10px;
         color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
         text-decoration: none;
         white-space: nowrap;
@@ -574,4 +590,14 @@
     }
   }
 
+  .CategoryIconImg {
+    height: 20px;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .DisplayNone {
+    display: none;
+  }
+
 </style>