@everymatrix/casino-slider 0.0.362 → 0.0.363

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "0.0.362",
+  "version": "0.0.363",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "154d1b620474e61bee3507cc52d40bfd33236024"
+  "gitHead": "c387eff5f038dffc7fde68f7e15e1ca719f4f209"
 }

package/src/CasinoSlider.svelte

@@ -118,16 +118,24 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
       </svg>
     </div>
-   
+
     <ul class="CarouselItems" part="CarouselItems" bind:this={carousel}>
       {#if sliderdata.length > 0}
-        {#each sliderdata as item, index (item.id)}
-          <li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''}" part="CarouselItem" on:click={e => handleClick(item, index)}
+        {#each sliderdata as category, index (category.id)}
+          <li class="CarouselItem {activeIndex == index || prevIndex == index ? 'active': ''}" part="CarouselItem" on:click={e => handleClick(category, index)}
           >
             {#if location === 'headerMain'}
-              <a>{item.label}</a>
+              <a>{category.label}</a>
             {:else}
-              {item.name} {item.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}
+              {category.name} {category.id === "FAVORITES" ? "(" + favoritesnumber + ")" : ''}
+            {/if}
+
+            {#if category?.subGroups}
+              <div class="dropdown-content">
+                {#each category?.subGroups?.items as subCategory}
+                  <a>{subCategory?.name}</a>
+                {/each}
+              </div>
             {/if}
           </li>
         {/each}
@@ -176,11 +184,12 @@
     }
 
     .CarouselItems {
+      position: relative;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       align-items: center;
-      overflow-x: scroll;
+      //overflow-y: scroll;
       list-style-type: none;
       -ms-overflow-style: none;
       scrollbar-width: none;
@@ -190,6 +199,7 @@
       }
 
       .CarouselItem {
+        position: relative;
         display: flex;
         height: 100%;
         align-items: center;
@@ -209,6 +219,34 @@
       }
     }
 
+    .dropdown-content {
+      transition: all 1s ease-in;
+      display: none;
+      position: absolute;
+      min-width: 100px;
+      height: auto;
+      top: 52px;
+      left: 0;
+      padding: 10px 11px;
+      background: var(--emfe-w-color-contrast, #07072A);  /* fallback for old browsers */
+      background: -webkit-linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(var(--emfe-w-color-contrast, #07072A), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+      & a {
+        display: block;
+        font-weight: 400;
+        line-height: 30px;
+      }
+    }
+
+
+    .dropdown:hover .dropdown-content {
+      transition: all 1s ease-in;
+      display: block;
+      opacity: 1;
+      z-index: 999;
+    }
+
     .CarouselLeftArrow,
     .CarouselRightArrow {
       display: flex;
@@ -228,6 +266,7 @@
       }
     }
   }
+
   .CarouselContainerHeaderMain {
     .CarouselItems .CarouselItem {
       &:hover, &.active {
@@ -260,6 +299,7 @@
       text-decoration: none;
     }
   }
+
   @media only screen and (max-width: 1024px) {
     .CarouselContainerHeaderMain {
       .CarouselLeftArrow, .CarouselRightArrow {