@everymatrix/casino-filter-page 0.0.245 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-filter-page",
-  "version": "0.0.245",
+  "version": "0.0.249",
   "main": "dist/casino-filter-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d96554d716d8c3b41f947c85c9b8cae8f03aa5bf"
+  "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
 }

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}