@everymatrix/casino-lobby 0.0.167 → 0.0.171

package/dist/casino-lobby.js

@@ -5685,7 +5685,7 @@
     const { console: console_1$7 } = globals;
     const file$8 = "../casino-categories-slider/src/CasinoCategoriesSlider.svelte";
 
-    // (187:4) {:else}
+    // (224:4) {:else}
     function create_else_block$5(ctx) {
     	let div;
     	let casino_slider;
@@ -5700,32 +5700,32 @@
     			set_custom_element_data(casino_slider, "clientstylingurl", /*clientstylingurl*/ ctx[1]);
     			set_custom_element_data(casino_slider, "containermaxwidth", /*containermaxwidth*/ ctx[2]);
     			set_custom_element_data(casino_slider, "onclickeventname", "CategoryChange");
-    			add_location(casino_slider, file$8, 188, 8, 6054);
+    			add_location(casino_slider, file$8, 225, 8, 7246);
     			attr_dev(div, "class", "CasinoCategoriesContainer");
-    			add_location(div, file$8, 187, 6, 6006);
+    			add_location(div, file$8, 224, 6, 7198);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
     			append_dev(div, casino_slider);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*numberOfFavoredGames*/ 128) {
+    			if (dirty[0] & /*numberOfFavoredGames*/ 128) {
     				set_custom_element_data(casino_slider, "favoritesnumber", /*numberOfFavoredGames*/ ctx[7]);
     			}
 
-    			if (dirty & /*categories*/ 16) {
+    			if (dirty[0] & /*categories*/ 16) {
     				set_custom_element_data(casino_slider, "sliderdata", /*categories*/ ctx[4]);
     			}
 
-    			if (dirty & /*clientstyling*/ 1) {
+    			if (dirty[0] & /*clientstyling*/ 1) {
     				set_custom_element_data(casino_slider, "clientstyling", /*clientstyling*/ ctx[0]);
     			}
 
-    			if (dirty & /*clientstylingurl*/ 2) {
+    			if (dirty[0] & /*clientstylingurl*/ 2) {
     				set_custom_element_data(casino_slider, "clientstylingurl", /*clientstylingurl*/ ctx[1]);
     			}
 
-    			if (dirty & /*containermaxwidth*/ 4) {
+    			if (dirty[0] & /*containermaxwidth*/ 4) {
     				set_custom_element_data(casino_slider, "containermaxwidth", /*containermaxwidth*/ ctx[2]);
     			}
     		},
@@ -5738,14 +5738,14 @@
     		block,
     		id: create_else_block$5.name,
     		type: "else",
-    		source: "(187:4) {:else}",
+    		source: "(224:4) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (185:4) {#if hasErrors}
+    // (222:4) {#if hasErrors}
     function create_if_block_1$5(ctx) {
     	let p;
 
@@ -5754,7 +5754,7 @@
     			p = element("p");
     			p.textContent = "500 Error - Internal Server Error.";
     			attr_dev(p, "class", "SearchLoading");
-    			add_location(p, file$8, 185, 6, 5924);
+    			add_location(p, file$8, 222, 6, 7116);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -5769,14 +5769,14 @@
     		block,
     		id: create_if_block_1$5.name,
     		type: "if",
-    		source: "(185:4) {#if hasErrors}",
+    		source: "(222:4) {#if hasErrors}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (182:2) {#if isLoading}
+    // (219:2) {#if isLoading}
     function create_if_block$8(ctx) {
     	let p;
 
@@ -5784,7 +5784,7 @@
     		c: function create() {
     			p = element("p");
     			p.textContent = "Please wait ...";
-    			add_location(p, file$8, 182, 4, 5865);
+    			add_location(p, file$8, 219, 4, 7057);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -5799,7 +5799,7 @@
     		block,
     		id: create_if_block$8.name,
     		type: "if",
-    		source: "(182:2) {#if isLoading}",
+    		source: "(219:2) {#if isLoading}",
     		ctx
     	});
 
@@ -5823,7 +5823,7 @@
     			div = element("div");
     			if_block.c();
     			this.c = noop$1;
-    			add_location(div, file$8, 180, 0, 5802);
+    			add_location(div, file$8, 217, 0, 6994);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -5831,9 +5831,9 @@
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
     			if_block.m(div, null);
-    			/*div_binding*/ ctx[14](div);
+    			/*div_binding*/ ctx[18](div);
     		},
-    		p: function update(ctx, [dirty]) {
+    		p: function update(ctx, dirty) {
     			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
     				if_block.p(ctx, dirty);
     			} else {
@@ -5851,7 +5851,7 @@
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div);
     			if_block.d();
-    			/*div_binding*/ ctx[14](null);
+    			/*div_binding*/ ctx[18](null);
     		}
     	};
 
@@ -5873,6 +5873,7 @@
     	let { endpoint = "" } = $$props;
     	let { datasource = "" } = $$props;
     	let { lang = "" } = $$props; // Language
+    	let { userid = "" } = $$props;
     	let { session = "" } = $$props; // Value for sessionID
     	let { mostplayed = "" } = $$props; // True - add MostPlayed category in slider
     	let { favorites = "" } = $$props; // True - add Favorites category in slider
@@ -5895,6 +5896,9 @@
     	let numberOfFavoredGames;
     	let favoritesAdded = false;
     	let mostPlayedAdded = false;
+    	let favoritesLoaded = false;
+    	let mostPlayedLoaded = false;
+    	let categoriesLoaded = false;
 
     	const messageHandler = e => {
     		if (e.data) {
@@ -5925,6 +5929,36 @@
     		}
     	};
 
+    	const getMostPlayedGames = () => {
+    		let url = new URL(`${endpoint}/player/${userid}/games/most-played`);
+    		let device = getDevice(userAgent);
+
+    		if (device) {
+    			if (device === "PC") {
+    				url.searchParams.append("device", "Desktop");
+    			} else {
+    				url.searchParams.append("device", "Mobile");
+    			}
+    		} else {
+    			url.searchParams.append("device", "All");
+    		}
+
+    		url.searchParams.append("rounds", "50");
+
+    		return new Promise((resolve, reject) => {
+    				fetch(url.href).then(res => res.json()).then(data => {
+    					if (data.count == 0) {
+    						resolve(false);
+    					}
+
+    					resolve(true);
+    				}).catch(err => {
+    					console.error("err", err);
+    					reject(false);
+    				});
+    			});
+    	};
+
     	const addFavoritesCategory = () => {
     		if (favoritesAdded == false && favorites == "true") {
     			categories.splice(1, 0, {
@@ -5936,22 +5970,24 @@
     		}
 
     		favoritesAdded = true;
-    		$$invalidate(3, isLoading = false);
+    		$$invalidate(15, favoritesLoaded = true);
     	};
 
     	const addMostPlayedCategory = () => {
-    		if (mostPlayedAdded == false && mostplayed == "true") {
-    			categories.splice(1, 0, {
-    				id: "MOSTPLAYED",
-    				name: "Most Played",
-    				href: "",
-    				games: [],
-    				triggerFetch: false
-    			});
-    		}
+    		getMostPlayedGames().then(display => {
+    			if (mostPlayedAdded == false && mostplayed == "true" && display) {
+    				categories.splice(2, 0, {
+    					id: "MOSTPLAYED",
+    					name: "Most Played",
+    					href: "",
+    					games: [],
+    					triggerFetch: false
+    				});
+    			}
 
-    		mostPlayedAdded = true;
-    		$$invalidate(3, isLoading = false);
+    			mostPlayedAdded = true;
+    			$$invalidate(16, mostPlayedLoaded = true);
+    		});
     	};
 
     	const checkAttrs = () => {
@@ -5979,14 +6015,15 @@
     		return hasErrors;
     	};
 
+    	const checkIfLoaded = () => {
+    		$$invalidate(3, isLoading = !favoritesLoaded && !mostPlayedLoaded && !categoriesLoaded);
+    	};
+
     	const initialLoad = () => {
     		if (!checkAttrs()) {
-    			$$invalidate(3, isLoading = true);
     			let url = new URL(`${endpoint}/casino/groups/${datasource}`);
     			url.searchParams.append("datasource", datasource);
-
-    			// @TODO add back getDevice method
-    			// url.searchParams.append('platform', getDevice(userAgent));
+    			url.searchParams.append("platform", getDevice(userAgent));
     			url.searchParams.append("language", lang);
 
     			fetch(url).then(res => res.json()).then(
@@ -6006,8 +6043,8 @@
     						games: []
     					});
 
+    					$$invalidate(17, categoriesLoaded = true);
     					window.postMessage({ type: "CategoriesLoadedForSlider" }, window.location.href);
-    					$$invalidate(3, isLoading = false);
     				},
     				err => {
     					$$invalidate(5, hasErrors = true);
@@ -6067,6 +6104,7 @@
     		"endpoint",
     		"datasource",
     		"lang",
+    		"userid",
     		"session",
     		"mostplayed",
     		"favorites",
@@ -6090,9 +6128,10 @@
     		if ("endpoint" in $$props) $$invalidate(8, endpoint = $$props.endpoint);
     		if ("datasource" in $$props) $$invalidate(9, datasource = $$props.datasource);
     		if ("lang" in $$props) $$invalidate(10, lang = $$props.lang);
-    		if ("session" in $$props) $$invalidate(11, session = $$props.session);
-    		if ("mostplayed" in $$props) $$invalidate(12, mostplayed = $$props.mostplayed);
-    		if ("favorites" in $$props) $$invalidate(13, favorites = $$props.favorites);
+    		if ("userid" in $$props) $$invalidate(11, userid = $$props.userid);
+    		if ("session" in $$props) $$invalidate(12, session = $$props.session);
+    		if ("mostplayed" in $$props) $$invalidate(13, mostplayed = $$props.mostplayed);
+    		if ("favorites" in $$props) $$invalidate(14, favorites = $$props.favorites);
     		if ("clientstyling" in $$props) $$invalidate(0, clientstyling = $$props.clientstyling);
     		if ("clientstylingurl" in $$props) $$invalidate(1, clientstylingurl = $$props.clientstylingurl);
     		if ("containermaxwidth" in $$props) $$invalidate(2, containermaxwidth = $$props.containermaxwidth);
@@ -6105,6 +6144,7 @@
     		endpoint,
     		datasource,
     		lang,
+    		userid,
     		session,
     		mostplayed,
     		favorites,
@@ -6124,10 +6164,15 @@
     		numberOfFavoredGames,
     		favoritesAdded,
     		mostPlayedAdded,
+    		favoritesLoaded,
+    		mostPlayedLoaded,
+    		categoriesLoaded,
     		messageHandler,
+    		getMostPlayedGames,
     		addFavoritesCategory,
     		addMostPlayedCategory,
     		checkAttrs,
+    		checkIfLoaded,
     		initialLoad,
     		setSession,
     		setClientStyling,
@@ -6138,9 +6183,10 @@
     		if ("endpoint" in $$props) $$invalidate(8, endpoint = $$props.endpoint);
     		if ("datasource" in $$props) $$invalidate(9, datasource = $$props.datasource);
     		if ("lang" in $$props) $$invalidate(10, lang = $$props.lang);
-    		if ("session" in $$props) $$invalidate(11, session = $$props.session);
-    		if ("mostplayed" in $$props) $$invalidate(12, mostplayed = $$props.mostplayed);
-    		if ("favorites" in $$props) $$invalidate(13, favorites = $$props.favorites);
+    		if ("userid" in $$props) $$invalidate(11, userid = $$props.userid);
+    		if ("session" in $$props) $$invalidate(12, session = $$props.session);
+    		if ("mostplayed" in $$props) $$invalidate(13, mostplayed = $$props.mostplayed);
+    		if ("favorites" in $$props) $$invalidate(14, favorites = $$props.favorites);
     		if ("clientstyling" in $$props) $$invalidate(0, clientstyling = $$props.clientstyling);
     		if ("clientstylingurl" in $$props) $$invalidate(1, clientstylingurl = $$props.clientstylingurl);
     		if ("containermaxwidth" in $$props) $$invalidate(2, containermaxwidth = $$props.containermaxwidth);
@@ -6157,6 +6203,9 @@
     		if ("numberOfFavoredGames" in $$props) $$invalidate(7, numberOfFavoredGames = $$props.numberOfFavoredGames);
     		if ("favoritesAdded" in $$props) favoritesAdded = $$props.favoritesAdded;
     		if ("mostPlayedAdded" in $$props) mostPlayedAdded = $$props.mostPlayedAdded;
+    		if ("favoritesLoaded" in $$props) $$invalidate(15, favoritesLoaded = $$props.favoritesLoaded);
+    		if ("mostPlayedLoaded" in $$props) $$invalidate(16, mostPlayedLoaded = $$props.mostPlayedLoaded);
+    		if ("categoriesLoaded" in $$props) $$invalidate(17, categoriesLoaded = $$props.categoriesLoaded);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -6164,27 +6213,31 @@
     	}
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*endpoint, datasource, lang*/ 1792) {
+    		if ($$self.$$.dirty[0] & /*favoritesLoaded, mostPlayedLoaded, categoriesLoaded*/ 229376) {
+    			favoritesLoaded && mostPlayedLoaded && categoriesLoaded && checkIfLoaded();
+    		}
+
+    		if ($$self.$$.dirty[0] & /*endpoint, datasource, lang*/ 1792) {
     			endpoint && datasource && lang && initialLoad();
     		}
 
-    		if ($$self.$$.dirty & /*session, endpoint*/ 2304) {
+    		if ($$self.$$.dirty[0] & /*session, endpoint*/ 4352) {
     			session && endpoint && setSession();
     		}
 
-    		if ($$self.$$.dirty & /*session, favorites*/ 10240) {
+    		if ($$self.$$.dirty[0] & /*session, favorites*/ 20480) {
     			session && favorites && addFavoritesCategory();
     		}
 
-    		if ($$self.$$.dirty & /*session, mostplayed*/ 6144) {
-    			session && mostplayed && addMostPlayedCategory();
+    		if ($$self.$$.dirty[0] & /*session, userid, mostplayed*/ 14336) {
+    			session && userid && mostplayed && addMostPlayedCategory();
     		}
 
-    		if ($$self.$$.dirty & /*clientstyling*/ 1) {
+    		if ($$self.$$.dirty[0] & /*clientstyling*/ 1) {
     			clientstyling && setClientStyling();
     		}
 
-    		if ($$self.$$.dirty & /*clientstylingurl*/ 2) {
+    		if ($$self.$$.dirty[0] & /*clientstylingurl*/ 2) {
     			clientstylingurl && setClientStylingURL();
     		}
     	};
@@ -6203,9 +6256,13 @@
     		endpoint,
     		datasource,
     		lang,
+    		userid,
     		session,
     		mostplayed,
     		favorites,
+    		favoritesLoaded,
+    		mostPlayedLoaded,
+    		categoriesLoaded,
     		div_binding
     	];
     }
@@ -6229,13 +6286,15 @@
     				endpoint: 8,
     				datasource: 9,
     				lang: 10,
-    				session: 11,
-    				mostplayed: 12,
-    				favorites: 13,
+    				userid: 11,
+    				session: 12,
+    				mostplayed: 13,
+    				favorites: 14,
     				clientstyling: 0,
     				clientstylingurl: 1,
     				containermaxwidth: 2
-    			}
+    			},
+    			[-1, -1]
     		);
 
     		if (options) {
@@ -6255,6 +6314,7 @@
     			"endpoint",
     			"datasource",
     			"lang",
+    			"userid",
     			"session",
     			"mostplayed",
     			"favorites",
@@ -6291,17 +6351,26 @@
     		flush();
     	}
 
-    	get session() {
+    	get userid() {
     		return this.$$.ctx[11];
     	}
 
+    	set userid(userid) {
+    		this.$set({ userid });
+    		flush();
+    	}
+
+    	get session() {
+    		return this.$$.ctx[12];
+    	}
+
     	set session(session) {
     		this.$set({ session });
     		flush();
     	}
 
     	get mostplayed() {
-    		return this.$$.ctx[12];
+    		return this.$$.ctx[13];
     	}
 
     	set mostplayed(mostplayed) {
@@ -6310,7 +6379,7 @@
     	}
 
     	get favorites() {
-    		return this.$$.ctx[13];
+    		return this.$$.ctx[14];
     	}
 
     	set favorites(favorites) {
@@ -14300,7 +14369,7 @@
     class CasinoPage extends SvelteElement {
     	constructor(options) {
     		super();
-    		this.shadowRoot.innerHTML = `<style>*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Helvetica Neue', 'Helvetica', sans-serif}.CategoriesLobby{margin:0 auto;padding:0 10px}.PanicSectionMobile{flex-direction:column;margin-bottom:40px}.PanicSection{display:flex;justify-content:center;align-items:center;gap:10px}.PanicText{display:flex;justify-content:center;align-items:center;gap:10px}p{font-size:16px;color:#fff}.PanicButton{border-radius:2px;border:1px solid #D0046C;background-color:#D0046C;width:240px;height:48px;color:#fff;cursor:pointer}[type="search"]{appearance:none}.SrOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.CategoryContainer{display:block}.SearchLoading{color:#fff;font-size:14.4px;margin-top:16px;text-align:center}.SearchContainer{flex:3;width:100%;max-width:640px;margin:0 auto}.SearchContainer.SearchTruncated{margin:auto 5% auto 15%}.SearchContainer.SearchTruncated .SearchInput{tabindex:999;padding:20px 12px 20px 40px}.SearchContainer .SearchWrapper{position:relative;display:flex;color:#c7d2fe}.SearchContainer .SearchWrapper .SearchIcon{position:absolute;display:flex;align-items:center;top:0;bottom:0;left:0;padding-left:8px;pointer-events:none}.SearchContainer .SearchWrapper .SearchIcon svg{width:25.6px;height:25.6px;display:block;vertical-align:middle;fill:#c7d2fe}.SearchContainer .SearchWrapper .SearchInput{width:100%;display:block;padding:12px 12px 12px 40px;border-radius:6.4px;border-color:transparent;font-size:16px;background-color:rgba(156, 163, 175, 0.25);color:#e0e7ff}.SearchContainer .SearchWrapper .SearchInput::-webkit-search-decoration,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-cancel-button,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-results-button,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-results-decoration{-webkit-appearance:none}.SearchContainer .SearchWrapper .SearchInput::placeholder{color:white}.SearchContainer .SearchWrapper .SearchInput:focus{background-color:white;color:#111827;outline:2px solid transparent;outline-offset:2px}.SearchContainer .SearchWrapper .SearchInput:focus::placeholder{color:#9ca3af}.SearchContainer .SearchWrapper:focus-within{color:#9ca3af}.SearchContainer .SearchWrapper:focus-within .SearchIcon svg{fill:#9ca3af}.FiltersButtonsContainer{display:inline-flex;flex:1;grid-gap:20px;flex-direction:row-reverse}.FilterButtonWrapper,.ClearFilterButtonWrapper{display:inline-flex;padding:10px 22px;border:1px solid #58586B;border-radius:5px;text-transform:uppercase;color:#fff;cursor:pointer}.ClearFilterButtonWrapper{border:1px solid #FD2839;color:#FD2839}.FilterIconContainer,.ClearIcon{position:relative;padding-left:5px}.FilterIconContainer{top:2px}.ClearIcon{position:relative;top:1px}.ClearIcon svg{width:14px}.FilterButtonWrapper,.ClearFilterButtonWrapper{display:inline-flex;justify-content:center;align-items:center}.NumberOfFiltersContainer{display:block;line-height:0px;border-radius:50%;border:2px solid #D0046C;background:#D0046C;color:#fff;font-size:12px;position:absolute;top:-5px;left:22px}.NumberOfFiltersContainer .NumberOfFilters{display:inline-block;padding-top:50%;padding-bottom:50%;margin-left:3px;margin-right:3px}.CategoriesHeaderSection{width:100%;display:inline-flex;flex-direction:row;margin-top:30px}.CategoriesHeaderMobileSection{position:fixed;bottom:0;left:0;flex-direction:row-reverse;z-index:1}.CategoriesHeaderMobileSection .ClearFilterButtonWrapper{display:none}.CategoriesHeaderMobileSection .SearchContainer{flex:1;max-width:unset;margin:unset;background-color:#d0056c;z-index:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper{color:#fff}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchIcon{left:25px}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput{padding:12px;border-radius:0;background-color:#d0056c;color:#fff;text-align:center;opacity:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput::placeholder,.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:-ms-input-placeholder,.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput::-ms-input-placeholder{color:white;opacity:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper path{fill:#fff}.CategoriesHeaderMobileSection .FiltersButtonsContainer{flex:1}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterButtonWrapper{position:relative;width:100%;display:flex;flex-direction:row-reverse;border:1px solid #fff;border-radius:0;background:#fff;color:#D0046C}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer{position:absolute;left:40px;top:revert;padding-left:0}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer path{fill:#D0046C}.CategoriesHeaderMobileSection .NumberOfFiltersContainer{font-size:8px;left:15px}.CategoriesHeaderSectionAltDesign{display:block;position:relative}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection{flex-direction:row;position:relative;margin-top:30px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer{background-color:#07072A}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper{justify-content:center}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput{width:90%;border:1px solid #58586B;border-radius:6.4px;background-color:transparent;color:#fff;padding:12px 50px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:active,.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:focus{width:90%}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer{position:absolute;top:64px;right:5px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer{display:none}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterButtonWrapper{border-radius:6.4px;border:2px solid #fff;background:transparent;color:#fff}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .ClearFilterButtonWrapper{padding:10px 16px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection.CategoriesHeaderSearchActive{top:0}.CategoriesHeaderSectionAltDesign .FiltersActive.ClearFilterButtonWrapper{display:block}.CategoriesHeaderSectionAltDesign .ClearSearchButton,.CategoriesHeaderSectionAltDesign .ClearSearchButtonMobile{right:30px;top:9px}.ClearFilterMobileButtonWrapper{position:absolute;right:5px;padding:8px 18px;display:inline-flex;border:1px solid #58586B;border-radius:5px;border:1px solid #FD2839;text-transform:uppercase;color:#fff;cursor:pointer;color:#FD2839;font-size:14px}.ClearFilterMobileButtonWrapper .ClearIcon svg{width:12px}.CategoriesHeaderSearchActive{position:fixed;bottom:unset;top:70px;margin-top:0}.CategoriesHeaderSearchActive .SearchContainer{background-color:white}.CategoriesHeaderSearchActive .SearchContainer .SearchWrapper .SearchInput{background-color:white;color:#000}.SearchStickTop{margin-top:0}@media(max-width: 768px){.SearchContainer{margin:auto 3% auto 0%}}.SearchBarPlaceholder{display:block;width:100%;height:46px}.SearchBarPlaceholder{display:block;width:100%;height:46px}.ClearSearchButton,.ClearSearchButtonMobile{cursor:pointer;position:absolute;right:14px;top:11px}.ClearSearchButton .CloseIconContainer,.ClearSearchButtonMobile .CloseIconContainer{width:25px;height:25px}.ClearSearchButton .CloseIconWrapper,.ClearSearchButtonMobile .CloseIconWrapper{height:25px;width:3px;margin-left:12px;background-color:#FFF;transform:rotate(45deg);Z-index:1}.ClearSearchButton .CloseIcon,.ClearSearchButtonMobile .CloseIcon{height:25px;width:3px;background-color:#FFF;transform:rotate(90deg);Z-index:2}.SearchContainer .CloseIconWrapper,.SearchContainer .CloseIcon{background-color:#FD2839}.ClearSearchButtonMobile{display:none}.CategoriesHeaderSearchActive .ClearSearchButtonMobile{display:block}.CategoriesHeaderSearchActive .ClearSearchButtonMobile .CloseIconWrapper,.CategoriesHeaderSearchActive .ClearSearchButtonMobile .CloseIcon{background-color:#FD2839}</style>`;
+    		this.shadowRoot.innerHTML = `<style>*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Helvetica Neue', 'Helvetica', sans-serif}.CategoriesLobby{margin:0 auto;padding:0 10px}.PanicSectionMobile{flex-direction:column;margin-bottom:40px}.PanicSection{display:flex;justify-content:center;align-items:center;gap:10px}.PanicText{display:flex;justify-content:center;align-items:center;gap:10px}p{font-size:16px;color:#fff}.PanicButton{border-radius:2px;border:1px solid #D0046C;background-color:#D0046C;width:240px;height:48px;color:#fff;cursor:pointer}[type="search"]{appearance:none}.SrOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.CategoryContainer{display:block}.SearchLoading{color:#fff;font-size:14.4px;margin-top:16px;text-align:center}.SearchContainer{flex:3;width:100%;max-width:640px;margin:0 auto}.SearchContainer.SearchTruncated{margin:auto 5% auto 15%}.SearchContainer.SearchTruncated .SearchInput{tabindex:999;padding:20px 12px 20px 40px}.SearchContainer .SearchWrapper{position:relative;display:flex;color:#c7d2fe}.SearchContainer .SearchWrapper .SearchIcon{position:absolute;display:flex;align-items:center;top:0;bottom:0;left:0;padding-left:8px;pointer-events:none}.SearchContainer .SearchWrapper .SearchIcon svg{width:25.6px;height:25.6px;display:block;vertical-align:middle;fill:#c7d2fe}.SearchContainer .SearchWrapper .SearchInput{width:100%;display:block;padding:12px 12px 12px 40px;border-radius:6.4px;border-color:transparent;font-size:16px;background-color:rgba(156, 163, 175, 0.25);color:#e0e7ff}.SearchContainer .SearchWrapper .SearchInput::-webkit-search-decoration,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-cancel-button,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-results-button,.SearchContainer .SearchWrapper .SearchInput::-webkit-search-results-decoration{-webkit-appearance:none}.SearchContainer .SearchWrapper .SearchInput::placeholder{color:white}.SearchContainer .SearchWrapper .SearchInput:focus{background-color:white;color:#111827;outline:2px solid transparent;outline-offset:2px}.SearchContainer .SearchWrapper .SearchInput:focus::placeholder{color:#9ca3af}.SearchContainer .SearchWrapper:focus-within{color:#9ca3af}.SearchContainer .SearchWrapper:focus-within .SearchIcon svg{fill:#9ca3af}.FiltersButtonsContainer{display:inline-flex;flex:1;grid-gap:20px;flex-direction:row-reverse}.FilterButtonWrapper,.ClearFilterButtonWrapper{display:inline-flex;padding:10px 22px;border:1px solid #58586B;border-radius:5px;text-transform:uppercase;color:#fff;cursor:pointer}.ClearFilterButtonWrapper{border:1px solid #FD2839;color:#FD2839}.FilterIconContainer,.ClearIcon{position:relative;padding-left:5px}.FilterIconContainer{top:2px}.ClearIcon{position:relative;top:1px}.ClearIcon svg{width:14px}.FilterButtonWrapper,.ClearFilterButtonWrapper{display:inline-flex;justify-content:center;align-items:center}.NumberOfFiltersContainer{display:block;line-height:0px;border-radius:50%;border:2px solid #D0046C;background:#D0046C;color:#fff;font-size:12px;position:absolute;top:-5px;left:22px}.NumberOfFiltersContainer .NumberOfFilters{display:inline-block;padding-top:50%;padding-bottom:50%;margin-left:3px;margin-right:3px}.CategoriesHeaderSection{width:100%;display:inline-flex;flex-direction:row;margin-top:30px}.CategoriesHeaderMobileSection{position:fixed;bottom:0;left:0;flex-direction:row-reverse;z-index:1}.CategoriesHeaderMobileSection .ClearFilterButtonWrapper{display:none}.CategoriesHeaderMobileSection .SearchContainer{flex:1;max-width:unset;margin:unset;background-color:#d0056c;z-index:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper{color:#fff}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchIcon{left:25px}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput{padding:12px;border-radius:0;background-color:#d0056c;color:#fff;text-align:center;opacity:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput::placeholder,.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:-ms-input-placeholder,.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput::-ms-input-placeholder{color:white;opacity:1}.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper path{fill:#fff}.CategoriesHeaderMobileSection .FiltersButtonsContainer{flex:1}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterButtonWrapper{position:relative;width:100%;display:flex;flex-direction:row-reverse;border:1px solid #fff;border-radius:0;background:#fff;color:#D0046C}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer{position:absolute;left:40px;top:revert;padding-left:0}.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer path{fill:#D0046C}.CategoriesHeaderMobileSection .NumberOfFiltersContainer{font-size:8px;left:15px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection{flex-direction:row;position:relative;margin-top:30px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer{background-color:#07072A}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper{justify-content:center}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput{width:90%;border:1px solid #58586B;border-radius:6.4px;background-color:transparent;color:#fff;padding:12px 50px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:active,.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .SearchContainer .SearchWrapper .SearchInput:focus{width:90%}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer{position:absolute;top:64px;right:5px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterIconContainer{display:none}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .FilterButtonWrapper{border-radius:6.4px;border:2px solid #fff;background:transparent;color:#fff}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection .FiltersButtonsContainer .ClearFilterButtonWrapper{padding:10px 16px}.CategoriesHeaderSectionAltDesign.CategoriesHeaderMobileSection.CategoriesHeaderSearchActive{top:0}.CategoriesHeaderSectionAltDesign .FiltersActive.ClearFilterButtonWrapper{display:block}.CategoriesHeaderSectionAltDesign .ClearSearchButton,.CategoriesHeaderSectionAltDesign .ClearSearchButtonMobile{right:30px;top:9px}.ClearFilterMobileButtonWrapper{position:absolute;right:5px;padding:8px 18px;display:inline-flex;border:1px solid #58586B;border-radius:5px;border:1px solid #FD2839;text-transform:uppercase;color:#fff;cursor:pointer;color:#FD2839;font-size:14px}.ClearFilterMobileButtonWrapper .ClearIcon svg{width:12px}.CategoriesHeaderSearchActive{position:fixed;bottom:unset;top:70px;margin-top:0}.CategoriesHeaderSearchActive .SearchContainer{background-color:white}.CategoriesHeaderSearchActive .SearchContainer .SearchWrapper .SearchInput{background-color:white;color:#000}.SearchStickTop{margin-top:0}@media(max-width: 768px){.SearchContainer{margin:auto 3% auto 0%}}.SearchBarPlaceholder{display:block;width:100%;height:46px}.SearchBarPlaceholder{display:block;width:100%;height:46px}.ClearSearchButton,.ClearSearchButtonMobile{cursor:pointer;position:absolute;right:14px;top:11px}.ClearSearchButton .CloseIconContainer,.ClearSearchButtonMobile .CloseIconContainer{width:25px;height:25px}.ClearSearchButton .CloseIconWrapper,.ClearSearchButtonMobile .CloseIconWrapper{height:25px;width:3px;margin-left:12px;background-color:#FFF;transform:rotate(45deg);Z-index:1}.ClearSearchButton .CloseIcon,.ClearSearchButtonMobile .CloseIcon{height:25px;width:3px;background-color:#FFF;transform:rotate(90deg);Z-index:2}.SearchContainer .CloseIconWrapper,.SearchContainer .CloseIcon{background-color:#FD2839}.ClearSearchButtonMobile{display:none}.CategoriesHeaderSearchActive .ClearSearchButtonMobile{display:block}.CategoriesHeaderSearchActive .ClearSearchButtonMobile .CloseIconWrapper,.CategoriesHeaderSearchActive .ClearSearchButtonMobile .CloseIcon{background-color:#FD2839}</style>`;
 
     		init(
     			this,