@everymatrix/casino-filter-page 0.0.246 → 0.0.250

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-filter-page",
-  "version": "0.0.246",
+  "version": "0.0.250",
   "main": "dist/casino-filter-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a366db972245075088a5539434d1ea34d55c1b91"
+  "gitHead": "a6d1510ec4bbfb0c340f1528b6c6636b9552705c"
 }

package/src/CasinoFilterPage.svelte

@@ -288,38 +288,38 @@
   $: clientstylingurl && setClientStylingURL();
 </script>
 
-<div bind:this={customStylingContainer}>
+<div bind:this={customStylingContainer} part="CustomStylingContainer">
   {#if isLoading}
-    <div class="lds-dual-ring"></div>
+    <div class="lds-dual-ring" part="lds-dual-ring"></div>
   {:else}
-    <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" >
-      <section class="FilterHeaderSection">
-        <div class="FilterHeaderDetails">
-          <h4 class="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
-          <h5 class="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
+    <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" part="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}">
+      <section class="FilterHeaderSection" part="FilterHeaderSection">
+        <div class="FilterHeaderDetails" part="FilterHeaderDetails">
+          <h4 class="FilterHeaderTitle" part="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
+          <h5 class="FilterHeaderSubtitle" part="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
         </div>
       </section>
-      <section class="FilterContentSection">
+      <section class="FilterContentSection" part="FilterContentSection">
         {#if vendorsArray}
           {#each vendorsArray as vendor}
-            <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
-              <img class="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
+            <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" part="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
+              <img class="VendorImage" part="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
               {#if vendor.isFilterSelected}
-                <div class="FilterIconContainer">
-                  <div class="CheckMark"></div>
+                <div class="FilterIconContainer" part="FilterIconContainer">
+                  <div class="CheckMark" part="CheckMark"></div>
                 </div>
               {/if}
             </div>
           {/each}
         {/if}
       </section>
-      <section class="FilterFooterSection">
+      <section class="FilterFooterSection" part="FilterFooterSection">
         {#if provisionalVendorArray}
           {#if provisionalVendorArray.length}
-            <div class="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
+            <div class="ClearFiltersButton" part="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
           {/if}
         {/if}
-        <div class="ApplyFiltersButton {!applyFilters ? "ApplyFilterButtonDisabled" : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
+        <div class="ApplyFiltersButton {!applyFilters ? 'ApplyFilterButtonDisabled' : ''}" part="ApplyFiltersButton {!applyFilters ? 'ApplyFilterButtonDisabled' : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
       </section>
     </div>
   {/if}
@@ -329,6 +329,17 @@
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
+
+  .FilterModalContent {
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .FilterHeaderSection {
+    flex-grow: 0;
+  }
+
   .FilterHeaderDetails {
     .FilterHeaderTitle {
       font-size: 34px;
@@ -346,8 +357,25 @@
   .FilterContentSection {
     display: inline-flex;
     flex-wrap: wrap;
-    grid-gap: 30px;
+    grid-gap: 25px;
+    flex-grow: 1;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--emfe-w-color-gray-300, #58586B) var(--emfe-w-color-gray-100, #E6E6E6);
   }
+
+  .FilterContentSection::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .FilterContentSection::-webkit-scrollbar-thumb {
+    background: var(--emfe-w-color-gray-300, #58586B);
+  }
+
+  .FilterContentSection::-webkit-scrollbar-track {
+    background: var(--emfe-w-color-gray-100, #E6E6E6);
+  }
+
   .VendorBox {
     width: 230px;
     height: 125px;
@@ -391,6 +419,7 @@
     justify-content: center;
     grid-gap: 30px;
     margin-top: 60px;
+    flex-grow: 0;
     .ClearFiltersButton, .ApplyFiltersButton {
       width: 180px;
       height: 50px;