@everymatrix/casino-lobby 0.0.170 → 0.0.174

package/dist/casino-lobby.js

@@ -295,6 +295,10 @@
             resolved_promise.then(flush);
         }
     }
+    function tick() {
+        schedule_update();
+        return resolved_promise;
+    }
     function add_render_callback(fn) {
         render_callbacks.push(fn);
     }
@@ -5685,7 +5689,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 +5704,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, 7254);
     			attr_dev(div, "class", "CasinoCategoriesContainer");
-    			add_location(div, file$8, 187, 6, 6006);
+    			add_location(div, file$8, 224, 6, 7206);
     		},
     		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 +5742,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 +5758,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, 7124);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -5769,14 +5773,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 || isLoadingMostPlayed}
     function create_if_block$8(ctx) {
     	let p;
 
@@ -5784,7 +5788,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, 7065);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -5799,7 +5803,7 @@
     		block,
     		id: create_if_block$8.name,
     		type: "if",
-    		source: "(182:2) {#if isLoading}",
+    		source: "(219:2) {#if isLoading || isLoadingMostPlayed}",
     		ctx
     	});
 
@@ -5810,7 +5814,7 @@
     	let div;
 
     	function select_block_type(ctx, dirty) {
-    		if (/*isLoading*/ ctx[3]) return create_if_block$8;
+    		if (/*isLoading*/ ctx[3] || /*isLoadingMostPlayed*/ ctx[8]) return create_if_block$8;
     		if (/*hasErrors*/ ctx[5]) return create_if_block_1$5;
     		return create_else_block$5;
     	}
@@ -5823,7 +5827,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, 6979);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -5831,9 +5835,9 @@
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
     			if_block.m(div, null);
-    			/*div_binding*/ ctx[14](div);
+    			/*div_binding*/ ctx[16](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 +5855,7 @@
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div);
     			if_block.d();
-    			/*div_binding*/ ctx[14](null);
+    			/*div_binding*/ ctx[16](null);
     		}
     	};
 
@@ -5873,6 +5877,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 +5900,9 @@
     	let numberOfFavoredGames;
     	let favoritesAdded = false;
     	let mostPlayedAdded = false;
+    	let favoritesLoaded = false;
+    	let mostPlayedLoaded = false;
+    	let categoriesLoaded = false;
 
     	const messageHandler = e => {
     		if (e.data) {
@@ -5920,11 +5928,40 @@
     						isLoggedIn = true;
     					}
     					break;
-    			} // sessionID = session;
-    			// playerID = userID;
+    			}
     		}
     	};
 
+    	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 +5973,30 @@
     		}
 
     		favoritesAdded = true;
-    		$$invalidate(3, isLoading = false);
+    		favoritesLoaded = true;
     	};
 
+    	let isLoadingMostPlayed = false;
+
     	const addMostPlayedCategory = () => {
-    		if (mostPlayedAdded == false && mostplayed == "true") {
-    			categories.splice(1, 0, {
-    				id: "MOSTPLAYED",
-    				name: "Most Played",
-    				href: "",
-    				games: [],
-    				triggerFetch: false
-    			});
-    		}
+    		$$invalidate(8, isLoadingMostPlayed = true);
+
+    		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);
+    			$$invalidate(8, isLoadingMostPlayed = false);
+    			tick();
+    			mostPlayedAdded = true;
+    			mostPlayedLoaded = true;
+    		});
     	};
 
     	const checkAttrs = () => {
@@ -5979,14 +6024,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 +6052,8 @@
     						games: []
     					});
 
-    					window.postMessage({ type: "CategoriesLoadedForSlider" }, window.location.href);
     					$$invalidate(3, isLoading = false);
+    					window.postMessage({ type: "CategoriesLoadedForSlider" }, window.location.href);
     				},
     				err => {
     					$$invalidate(5, hasErrors = true);
@@ -6042,8 +6088,9 @@
 
     	const setClientStylingURL = () => {
     		let cssFile = document.createElement("style");
+    		let url = new URL(clientstylingurl);
 
-    		fetch(new URL(clientstylingurl)).then(res => res.text()).then(data => {
+    		fetch(url.href).then(res => res.text()).then(data => {
     			cssFile.innerHTML = data;
 
     			setTimeout(
@@ -6067,6 +6114,7 @@
     		"endpoint",
     		"datasource",
     		"lang",
+    		"userid",
     		"session",
     		"mostplayed",
     		"favorites",
@@ -6087,12 +6135,13 @@
     	}
 
     	$$self.$$set = $$props => {
-    		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 ("endpoint" in $$props) $$invalidate(9, endpoint = $$props.endpoint);
+    		if ("datasource" in $$props) $$invalidate(10, datasource = $$props.datasource);
+    		if ("lang" in $$props) $$invalidate(11, lang = $$props.lang);
+    		if ("userid" in $$props) $$invalidate(12, userid = $$props.userid);
+    		if ("session" in $$props) $$invalidate(13, session = $$props.session);
+    		if ("mostplayed" in $$props) $$invalidate(14, mostplayed = $$props.mostplayed);
+    		if ("favorites" in $$props) $$invalidate(15, 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);
@@ -6100,11 +6149,13 @@
 
     	$$self.$capture_state = () => ({
     		onMount,
+    		tick,
     		getDevice,
     		checkSession,
     		endpoint,
     		datasource,
     		lang,
+    		userid,
     		session,
     		mostplayed,
     		favorites,
@@ -6124,10 +6175,16 @@
     		numberOfFavoredGames,
     		favoritesAdded,
     		mostPlayedAdded,
+    		favoritesLoaded,
+    		mostPlayedLoaded,
+    		categoriesLoaded,
     		messageHandler,
+    		getMostPlayedGames,
     		addFavoritesCategory,
+    		isLoadingMostPlayed,
     		addMostPlayedCategory,
     		checkAttrs,
+    		checkIfLoaded,
     		initialLoad,
     		setSession,
     		setClientStyling,
@@ -6135,12 +6192,13 @@
     	});
 
     	$$self.$inject_state = $$props => {
-    		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 ("endpoint" in $$props) $$invalidate(9, endpoint = $$props.endpoint);
+    		if ("datasource" in $$props) $$invalidate(10, datasource = $$props.datasource);
+    		if ("lang" in $$props) $$invalidate(11, lang = $$props.lang);
+    		if ("userid" in $$props) $$invalidate(12, userid = $$props.userid);
+    		if ("session" in $$props) $$invalidate(13, session = $$props.session);
+    		if ("mostplayed" in $$props) $$invalidate(14, mostplayed = $$props.mostplayed);
+    		if ("favorites" in $$props) $$invalidate(15, 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 +6215,10 @@
     		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) favoritesLoaded = $$props.favoritesLoaded;
+    		if ("mostPlayedLoaded" in $$props) mostPlayedLoaded = $$props.mostPlayedLoaded;
+    		if ("categoriesLoaded" in $$props) categoriesLoaded = $$props.categoriesLoaded;
+    		if ("isLoadingMostPlayed" in $$props) $$invalidate(8, isLoadingMostPlayed = $$props.isLoadingMostPlayed);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -6164,27 +6226,28 @@
     	}
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*endpoint, datasource, lang*/ 1792) {
+    		if ($$self.$$.dirty[0] & /*endpoint, datasource, lang*/ 3584) {
+    			// $: favoritesLoaded && mostPlayedLoaded && categoriesLoaded && checkIfLoaded();
     			endpoint && datasource && lang && initialLoad();
     		}
 
-    		if ($$self.$$.dirty & /*session, endpoint*/ 2304) {
+    		if ($$self.$$.dirty[0] & /*session, endpoint*/ 8704) {
     			session && endpoint && setSession();
     		}
 
-    		if ($$self.$$.dirty & /*session, favorites*/ 10240) {
+    		if ($$self.$$.dirty[0] & /*session, favorites*/ 40960) {
     			session && favorites && addFavoritesCategory();
     		}
 
-    		if ($$self.$$.dirty & /*session, mostplayed*/ 6144) {
-    			session && mostplayed && addMostPlayedCategory();
+    		if ($$self.$$.dirty[0] & /*session, userid, mostplayed*/ 28672) {
+    			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();
     		}
     	};
@@ -6200,9 +6263,11 @@
     		hasErrors,
     		customStylingContainer,
     		numberOfFavoredGames,
+    		isLoadingMostPlayed,
     		endpoint,
     		datasource,
     		lang,
+    		userid,
     		session,
     		mostplayed,
     		favorites,
@@ -6226,16 +6291,18 @@
     			create_fragment$8,
     			safe_not_equal,
     			{
-    				endpoint: 8,
-    				datasource: 9,
-    				lang: 10,
-    				session: 11,
-    				mostplayed: 12,
-    				favorites: 13,
+    				endpoint: 9,
+    				datasource: 10,
+    				lang: 11,
+    				userid: 12,
+    				session: 13,
+    				mostplayed: 14,
+    				favorites: 15,
     				clientstyling: 0,
     				clientstylingurl: 1,
     				containermaxwidth: 2
-    			}
+    			},
+    			[-1, -1]
     		);
 
     		if (options) {
@@ -6255,6 +6322,7 @@
     			"endpoint",
     			"datasource",
     			"lang",
+    			"userid",
     			"session",
     			"mostplayed",
     			"favorites",
@@ -6265,7 +6333,7 @@
     	}
 
     	get endpoint() {
-    		return this.$$.ctx[8];
+    		return this.$$.ctx[9];
     	}
 
     	set endpoint(endpoint) {
@@ -6274,7 +6342,7 @@
     	}
 
     	get datasource() {
-    		return this.$$.ctx[9];
+    		return this.$$.ctx[10];
     	}
 
     	set datasource(datasource) {
@@ -6283,7 +6351,7 @@
     	}
 
     	get lang() {
-    		return this.$$.ctx[10];
+    		return this.$$.ctx[11];
     	}
 
     	set lang(lang) {
@@ -6291,8 +6359,17 @@
     		flush();
     	}
 
+    	get userid() {
+    		return this.$$.ctx[12];
+    	}
+
+    	set userid(userid) {
+    		this.$set({ userid });
+    		flush();
+    	}
+
     	get session() {
-    		return this.$$.ctx[11];
+    		return this.$$.ctx[13];
     	}
 
     	set session(session) {
@@ -6301,7 +6378,7 @@
     	}
 
     	get mostplayed() {
-    		return this.$$.ctx[12];
+    		return this.$$.ctx[14];
     	}
 
     	set mostplayed(mostplayed) {
@@ -6310,7 +6387,7 @@
     	}
 
     	get favorites() {
-    		return this.$$.ctx[13];
+    		return this.$$.ctx[15];
     	}
 
     	set favorites(favorites) {
@@ -14300,7 +14377,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,