@everymatrix/casino-header-controller 0.0.158 → 0.0.162

package/dist/casino-header-controller.js

@@ -4814,24 +4814,46 @@
       );
     };
 
+    /**
+     * @name getDevice
+     * @description A method that returns the type of the device
+     * @param {String} userAgent window.navigator.userAgent
+     * @returns {String} Android/iPhone/iPad/PC
+     */
+    const getDevice = (userAgent) => {
+      if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+      }
+
+      if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+      }
+
+      if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+      }
+
+      return 'PC';
+    };
+
     /* ../casino-slider/src/CasinoSlider.svelte generated by Svelte v3.37.0 */
     const file$3 = "../casino-slider/src/CasinoSlider.svelte";
 
     function get_each_context$2(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[21] = list[i];
-    	child_ctx[23] = i;
+    	child_ctx[24] = list[i];
+    	child_ctx[26] = i;
     	return child_ctx;
     }
 
-    // (75:6) {#if sliderdata.length > 0}
+    // (79:6) {#if sliderdata.length > 0}
     function create_if_block$3(ctx) {
     	let each_blocks = [];
     	let each_1_lookup = new Map();
     	let each_1_anchor;
     	let each_value = /*sliderdata*/ ctx[0];
     	validate_each_argument(each_value);
-    	const get_key = ctx => /*item*/ ctx[21].id;
+    	const get_key = ctx => /*item*/ ctx[24].id;
     	validate_each_keys(ctx, each_value, get_each_context$2, get_key);
 
     	for (let i = 0; i < each_value.length; i += 1) {
@@ -4856,7 +4878,7 @@
     			insert_dev(target, each_1_anchor, anchor);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*active, sliderdata, handleClick, location, favoritesnumber*/ 87) {
+    			if (dirty & /*active, sliderdata, handleClick, location, favoritesnumber*/ 295) {
     				each_value = /*sliderdata*/ ctx[0];
     				validate_each_argument(each_value);
     				validate_each_keys(ctx, each_value, get_each_context$2, get_key);
@@ -4876,20 +4898,20 @@
     		block,
     		id: create_if_block$3.name,
     		type: "if",
-    		source: "(75:6) {#if sliderdata.length > 0}",
+    		source: "(79:6) {#if sliderdata.length > 0}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (80:12) {:else}
+    // (84:12) {:else}
     function create_else_block$1(ctx) {
-    	let t0_value = /*item*/ ctx[21].name + "";
+    	let t0_value = /*item*/ ctx[24].name + "";
     	let t0;
     	let t1;
 
-    	let t2_value = (/*item*/ ctx[21].id === "FAVORITES"
+    	let t2_value = (/*item*/ ctx[24].id === "FAVORITES"
     	? "(" + /*favoritesnumber*/ ctx[1] + ")"
     	: "") + "";
 
@@ -4907,9 +4929,9 @@
     			insert_dev(target, t2, anchor);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*sliderdata*/ 1 && t0_value !== (t0_value = /*item*/ ctx[21].name + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*sliderdata*/ 1 && t0_value !== (t0_value = /*item*/ ctx[24].name + "")) set_data_dev(t0, t0_value);
 
-    			if (dirty & /*sliderdata, favoritesnumber*/ 3 && t2_value !== (t2_value = (/*item*/ ctx[21].id === "FAVORITES"
+    			if (dirty & /*sliderdata, favoritesnumber*/ 3 && t2_value !== (t2_value = (/*item*/ ctx[24].id === "FAVORITES"
     			? "(" + /*favoritesnumber*/ ctx[1] + ")"
     			: "") + "")) set_data_dev(t2, t2_value);
     		},
@@ -4924,17 +4946,17 @@
     		block,
     		id: create_else_block$1.name,
     		type: "else",
-    		source: "(80:12) {:else}",
+    		source: "(84:12) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (78:12) {#if location === 'headerMain'}
+    // (82:12) {#if location === 'headerMain'}
     function create_if_block_1$2(ctx) {
     	let a;
-    	let t_value = /*item*/ ctx[21].label + "";
+    	let t_value = /*item*/ ctx[24].label + "";
     	let t;
     	let a_href_value;
 
@@ -4942,17 +4964,17 @@
     		c: function create() {
     			a = element("a");
     			t = text(t_value);
-    			attr_dev(a, "href", a_href_value = /*item*/ ctx[21].path);
-    			add_location(a, file$3, 78, 14, 2741);
+    			attr_dev(a, "href", a_href_value = /*item*/ ctx[24].path);
+    			add_location(a, file$3, 82, 14, 3154);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, a, anchor);
     			append_dev(a, t);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*sliderdata*/ 1 && t_value !== (t_value = /*item*/ ctx[21].label + "")) set_data_dev(t, t_value);
+    			if (dirty & /*sliderdata*/ 1 && t_value !== (t_value = /*item*/ ctx[24].label + "")) set_data_dev(t, t_value);
 
-    			if (dirty & /*sliderdata*/ 1 && a_href_value !== (a_href_value = /*item*/ ctx[21].path)) {
+    			if (dirty & /*sliderdata*/ 1 && a_href_value !== (a_href_value = /*item*/ ctx[24].path)) {
     				attr_dev(a, "href", a_href_value);
     			}
     		},
@@ -4965,14 +4987,14 @@
     		block,
     		id: create_if_block_1$2.name,
     		type: "if",
-    		source: "(78:12) {#if location === 'headerMain'}",
+    		source: "(82:12) {#if location === 'headerMain'}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (76:8) {#each sliderdata as item, index (item.id)}
+    // (80:8) {#each sliderdata as item, index (item.id)}
     function create_each_block$2(key_1, ctx) {
     	let li;
     	let t;
@@ -4988,7 +5010,7 @@
     	let if_block = current_block_type(ctx);
 
     	function click_handler_1(...args) {
-    		return /*click_handler_1*/ ctx[14](/*item*/ ctx[21], /*index*/ ctx[23], ...args);
+    		return /*click_handler_1*/ ctx[16](/*item*/ ctx[24], /*index*/ ctx[26], ...args);
     	}
 
     	const block = {
@@ -4999,8 +5021,8 @@
     			if_block.c();
     			t = space();
     			attr_dev(li, "class", "CarouselItem");
-    			toggle_class(li, "active", /*active*/ ctx[4] == /*index*/ ctx[23]);
-    			add_location(li, file$3, 76, 10, 2582);
+    			toggle_class(li, "active", /*active*/ ctx[5] == /*index*/ ctx[26]);
+    			add_location(li, file$3, 80, 10, 2995);
     			this.first = li;
     		},
     		m: function mount(target, anchor) {
@@ -5028,8 +5050,8 @@
     				}
     			}
 
-    			if (dirty & /*active, sliderdata*/ 17) {
-    				toggle_class(li, "active", /*active*/ ctx[4] == /*index*/ ctx[23]);
+    			if (dirty & /*active, sliderdata*/ 33) {
+    				toggle_class(li, "active", /*active*/ ctx[5] == /*index*/ ctx[26]);
     			}
     		},
     		d: function destroy(detaching) {
@@ -5044,7 +5066,7 @@
     		block,
     		id: create_each_block$2.name,
     		type: "each",
-    		source: "(76:8) {#each sliderdata as item, index (item.id)}",
+    		source: "(80:8) {#each sliderdata as item, index (item.id)}",
     		ctx
     	});
 
@@ -5064,6 +5086,8 @@
     	let svg1;
     	let path1;
     	let div2_class_value;
+    	let div2_style_value;
+    	let div3_class_value;
     	let mounted;
     	let dispose;
     	let if_block = /*sliderdata*/ ctx[0].length > 0 && create_if_block$3(ctx);
@@ -5087,35 +5111,44 @@
     			attr_dev(path0, "stroke-linejoin", "round");
     			attr_dev(path0, "stroke-width", "2");
     			attr_dev(path0, "d", "M15 19l-7-7 7-7");
-    			add_location(path0, file$3, 69, 8, 2311);
+    			add_location(path0, file$3, 73, 8, 2724);
     			attr_dev(svg0, "fill", "none");
     			attr_dev(svg0, "stroke", "currentColor");
     			attr_dev(svg0, "viewBox", "0 0 24 24");
     			attr_dev(svg0, "xmlns", "http://www.w3.org/2000/svg");
-    			add_location(svg0, file$3, 68, 6, 2208);
+    			add_location(svg0, file$3, 72, 6, 2621);
     			attr_dev(div0, "class", "CarouselLeftArrow");
-    			add_location(div0, file$3, 67, 4, 2138);
+    			add_location(div0, file$3, 71, 4, 2551);
     			attr_dev(ul, "class", "CarouselItems");
-    			add_location(ul, file$3, 73, 4, 2438);
+    			add_location(ul, file$3, 77, 4, 2851);
     			attr_dev(path1, "stroke-linecap", "round");
     			attr_dev(path1, "stroke-linejoin", "round");
     			attr_dev(path1, "stroke-width", "2");
     			attr_dev(path1, "d", "M9 5l7 7-7 7");
-    			add_location(path1, file$3, 89, 8, 3137);
+    			add_location(path1, file$3, 93, 8, 3550);
     			attr_dev(svg1, "fill", "none");
     			attr_dev(svg1, "stroke", "currentColor");
     			attr_dev(svg1, "viewBox", "0 0 24 24");
     			attr_dev(svg1, "xmlns", "http://www.w3.org/2000/svg");
-    			add_location(svg1, file$3, 88, 6, 3034);
+    			add_location(svg1, file$3, 92, 6, 3447);
     			attr_dev(div1, "class", "CarouselRightArrow");
-    			add_location(div1, file$3, 87, 4, 2962);
+    			add_location(div1, file$3, 91, 4, 3375);
 
-    			attr_dev(div2, "class", div2_class_value = "CarouselContainer " + (/*location*/ ctx[2] === "headerMain"
+    			attr_dev(div2, "class", div2_class_value = "CarouselContainer " + (/*isMobile*/ ctx[7] ? "CarouselContainerMobile" : "") + " " + (/*location*/ ctx[2] === "headerMain"
     			? "CarouselContainerHeaderMain"
     			: ""));
 
-    			add_location(div2, file$3, 66, 2, 2033);
-    			add_location(div3, file$3, 65, 0, 1990);
+    			attr_dev(div2, "style", div2_style_value = /*location*/ ctx[2] === "headerMain"
+    			? "max-width: auto"
+    			: `max-width: ${/*containermaxwidth*/ ctx[3]}px`);
+
+    			add_location(div2, file$3, 70, 2, 2304);
+
+    			attr_dev(div3, "class", div3_class_value = "CarouselWrapper " + (/*location*/ ctx[2] === "headerMain"
+    			? "CarouselWrapperHeaderMain"
+    			: ""));
+
+    			add_location(div3, file$3, 69, 0, 2170);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -5129,17 +5162,17 @@
     			append_dev(div2, t0);
     			append_dev(div2, ul);
     			if (if_block) if_block.m(ul, null);
-    			/*ul_binding*/ ctx[15](ul);
+    			/*ul_binding*/ ctx[17](ul);
     			append_dev(div2, t1);
     			append_dev(div2, div1);
     			append_dev(div1, svg1);
     			append_dev(svg1, path1);
-    			/*div3_binding*/ ctx[17](div3);
+    			/*div3_binding*/ ctx[19](div3);
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(div0, "click", /*click_handler*/ ctx[13], false, false, false),
-    					listen_dev(div1, "click", /*click_handler_2*/ ctx[16], false, false, false)
+    					listen_dev(div0, "click", /*click_handler*/ ctx[15], false, false, false),
+    					listen_dev(div1, "click", /*click_handler_2*/ ctx[18], false, false, false)
     				];
 
     				mounted = true;
@@ -5159,19 +5192,31 @@
     				if_block = null;
     			}
 
-    			if (dirty & /*location*/ 4 && div2_class_value !== (div2_class_value = "CarouselContainer " + (/*location*/ ctx[2] === "headerMain"
+    			if (dirty & /*location*/ 4 && div2_class_value !== (div2_class_value = "CarouselContainer " + (/*isMobile*/ ctx[7] ? "CarouselContainerMobile" : "") + " " + (/*location*/ ctx[2] === "headerMain"
     			? "CarouselContainerHeaderMain"
     			: ""))) {
     				attr_dev(div2, "class", div2_class_value);
     			}
+
+    			if (dirty & /*location, containermaxwidth*/ 12 && div2_style_value !== (div2_style_value = /*location*/ ctx[2] === "headerMain"
+    			? "max-width: auto"
+    			: `max-width: ${/*containermaxwidth*/ ctx[3]}px`)) {
+    				attr_dev(div2, "style", div2_style_value);
+    			}
+
+    			if (dirty & /*location*/ 4 && div3_class_value !== (div3_class_value = "CarouselWrapper " + (/*location*/ ctx[2] === "headerMain"
+    			? "CarouselWrapperHeaderMain"
+    			: ""))) {
+    				attr_dev(div3, "class", div3_class_value);
+    			}
     		},
     		i: noop$1,
     		o: noop$1,
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div3);
     			if (if_block) if_block.d();
-    			/*ul_binding*/ ctx[15](null);
-    			/*div3_binding*/ ctx[17](null);
+    			/*ul_binding*/ ctx[17](null);
+    			/*div3_binding*/ ctx[19](null);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -5198,6 +5243,9 @@
     	let { clientstyling = "" } = $$props;
     	let { clientstylingurl = "" } = $$props;
     	let { identity = "" } = $$props;
+    	let { containermaxwidth = "" } = $$props;
+    	let userAgent = window.navigator.userAgent;
+    	let isMobile = getDevice(userAgent) === "PC" ? false : true;
     	let carousel;
     	let active;
     	let customStylingContainer;
@@ -5205,13 +5253,13 @@
     	// Clicking on the slider item will trigger this method and send a postmessage on window
     	// @TODO itemId type fix
     	let handleClick = (itemId, index) => {
-    		$$invalidate(4, active = index);
+    		$$invalidate(5, active = index);
     		window.postMessage({ type: onclickeventname, itemId, index }, window.location.href);
     	};
 
     	const messageHandler = e => {
     		if (e.data && e.data.type == "SetSliderIndex") {
-    			$$invalidate(4, active = e.data.categoryData
+    			$$invalidate(5, active = e.data.categoryData
     			? sliderdata.map(e => {
     					return e.id;
     				}).indexOf(e.data.categoryData.id)
@@ -5219,7 +5267,7 @@
     		}
 
     		if (e.data && e.data.type == `SetSliderIndex_${identity}`) {
-    			$$invalidate(4, active = e.data.index);
+    			$$invalidate(5, active = e.data.index);
     		}
     	};
 
@@ -5272,7 +5320,8 @@
     		"location",
     		"clientstyling",
     		"clientstylingurl",
-    		"identity"
+    		"identity",
+    		"containermaxwidth"
     	];
 
     	Object.keys($$props).forEach(key => {
@@ -5285,7 +5334,7 @@
     	function ul_binding($$value) {
     		binding_callbacks[$$value ? "unshift" : "push"](() => {
     			carousel = $$value;
-    			$$invalidate(3, carousel);
+    			$$invalidate(4, carousel);
     		});
     	}
 
@@ -5294,22 +5343,24 @@
     	function div3_binding($$value) {
     		binding_callbacks[$$value ? "unshift" : "push"](() => {
     			customStylingContainer = $$value;
-    			$$invalidate(5, customStylingContainer);
+    			$$invalidate(6, customStylingContainer);
     		});
     	}
 
     	$$self.$$set = $$props => {
     		if ("sliderdata" in $$props) $$invalidate(0, sliderdata = $$props.sliderdata);
-    		if ("onclickeventname" in $$props) $$invalidate(9, onclickeventname = $$props.onclickeventname);
+    		if ("onclickeventname" in $$props) $$invalidate(11, onclickeventname = $$props.onclickeventname);
     		if ("favoritesnumber" in $$props) $$invalidate(1, favoritesnumber = $$props.favoritesnumber);
     		if ("location" in $$props) $$invalidate(2, location = $$props.location);
-    		if ("clientstyling" in $$props) $$invalidate(10, clientstyling = $$props.clientstyling);
-    		if ("clientstylingurl" in $$props) $$invalidate(11, clientstylingurl = $$props.clientstylingurl);
-    		if ("identity" in $$props) $$invalidate(12, identity = $$props.identity);
+    		if ("clientstyling" in $$props) $$invalidate(12, clientstyling = $$props.clientstyling);
+    		if ("clientstylingurl" in $$props) $$invalidate(13, clientstylingurl = $$props.clientstylingurl);
+    		if ("identity" in $$props) $$invalidate(14, identity = $$props.identity);
+    		if ("containermaxwidth" in $$props) $$invalidate(3, containermaxwidth = $$props.containermaxwidth);
     	};
 
     	$$self.$capture_state = () => ({
     		onMount,
+    		getDevice,
     		sliderdata,
     		onclickeventname,
     		favoritesnumber,
@@ -5317,6 +5368,9 @@
     		clientstyling,
     		clientstylingurl,
     		identity,
+    		containermaxwidth,
+    		userAgent,
+    		isMobile,
     		carousel,
     		active,
     		customStylingContainer,
@@ -5330,18 +5384,21 @@
 
     	$$self.$inject_state = $$props => {
     		if ("sliderdata" in $$props) $$invalidate(0, sliderdata = $$props.sliderdata);
-    		if ("onclickeventname" in $$props) $$invalidate(9, onclickeventname = $$props.onclickeventname);
+    		if ("onclickeventname" in $$props) $$invalidate(11, onclickeventname = $$props.onclickeventname);
     		if ("favoritesnumber" in $$props) $$invalidate(1, favoritesnumber = $$props.favoritesnumber);
     		if ("location" in $$props) $$invalidate(2, location = $$props.location);
-    		if ("clientstyling" in $$props) $$invalidate(10, clientstyling = $$props.clientstyling);
-    		if ("clientstylingurl" in $$props) $$invalidate(11, clientstylingurl = $$props.clientstylingurl);
-    		if ("identity" in $$props) $$invalidate(12, identity = $$props.identity);
-    		if ("carousel" in $$props) $$invalidate(3, carousel = $$props.carousel);
-    		if ("active" in $$props) $$invalidate(4, active = $$props.active);
-    		if ("customStylingContainer" in $$props) $$invalidate(5, customStylingContainer = $$props.customStylingContainer);
-    		if ("handleClick" in $$props) $$invalidate(6, handleClick = $$props.handleClick);
-    		if ("scrollLeft" in $$props) $$invalidate(7, scrollLeft = $$props.scrollLeft);
-    		if ("scrollRight" in $$props) $$invalidate(8, scrollRight = $$props.scrollRight);
+    		if ("clientstyling" in $$props) $$invalidate(12, clientstyling = $$props.clientstyling);
+    		if ("clientstylingurl" in $$props) $$invalidate(13, clientstylingurl = $$props.clientstylingurl);
+    		if ("identity" in $$props) $$invalidate(14, identity = $$props.identity);
+    		if ("containermaxwidth" in $$props) $$invalidate(3, containermaxwidth = $$props.containermaxwidth);
+    		if ("userAgent" in $$props) userAgent = $$props.userAgent;
+    		if ("isMobile" in $$props) $$invalidate(7, isMobile = $$props.isMobile);
+    		if ("carousel" in $$props) $$invalidate(4, carousel = $$props.carousel);
+    		if ("active" in $$props) $$invalidate(5, active = $$props.active);
+    		if ("customStylingContainer" in $$props) $$invalidate(6, customStylingContainer = $$props.customStylingContainer);
+    		if ("handleClick" in $$props) $$invalidate(8, handleClick = $$props.handleClick);
+    		if ("scrollLeft" in $$props) $$invalidate(9, scrollLeft = $$props.scrollLeft);
+    		if ("scrollRight" in $$props) $$invalidate(10, scrollRight = $$props.scrollRight);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -5349,11 +5406,11 @@
     	}
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*clientstyling*/ 1024) {
+    		if ($$self.$$.dirty & /*clientstyling*/ 4096) {
     			clientstyling && setClientStyling();
     		}
 
-    		if ($$self.$$.dirty & /*clientstylingurl*/ 2048) {
+    		if ($$self.$$.dirty & /*clientstylingurl*/ 8192) {
     			clientstylingurl && setClientStylingURL();
     		}
     	};
@@ -5362,9 +5419,11 @@
     		sliderdata,
     		favoritesnumber,
     		location,
+    		containermaxwidth,
     		carousel,
     		active,
     		customStylingContainer,
+    		isMobile,
     		handleClick,
     		scrollLeft,
     		scrollRight,
@@ -5383,7 +5442,7 @@
     class CasinoSlider 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}.CarouselContainer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;width:100%;background:#D0046C;background:-webkit-linear-gradient(to left, #FD2839, #D0046C);background:linear-gradient(to left, #FD2839, #D0046C);color:#ffffff}.CarouselContainer .CarouselItems{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:scroll;list-style-type:none;-ms-overflow-style:none;scrollbar-width:none}.CarouselContainer .CarouselItems::-webkit-scrollbar{display:none}.CarouselContainer .CarouselItems .CarouselItem{display:flex;height:100%;align-items:center;padding:12.8px 19.2px;font-size:16px;text-align:center;line-height:25.6px;transition:all 150ms ease-in-out}.CarouselContainer .CarouselItems .CarouselItem:hover,.CarouselContainer .CarouselItems .CarouselItem.active{background:#07072a;cursor:pointer}.CarouselContainer .CarouselLeftArrow,.CarouselContainer .CarouselRightArrow{display:flex;align-items:center;justify-content:center;width:50%;max-width:64px;background:rgba(255, 255, 255, 0.3)}.CarouselContainer .CarouselLeftArrow svg,.CarouselContainer .CarouselRightArrow svg{width:100%;max-width:38.4px}.CarouselContainer .CarouselLeftArrow:hover,.CarouselContainer .CarouselRightArrow:hover{cursor:pointer}.CarouselContainerHeaderMain .CarouselItems .CarouselItem:hover,.CarouselContainerHeaderMain .CarouselItems .CarouselItem.active{background:transparent}.CarouselContainerHeaderMain .CarouselItems .CarouselItem:hover a,.CarouselContainerHeaderMain .CarouselItems .CarouselItem.active a{border-top:1px solid #D0046C;color:#D0046C}.CarouselContainerHeaderMain{background:transparent}.CarouselContainerHeaderMain .CarouselLeftArrow,.CarouselContainerHeaderMain .CarouselRightArrow{background:transparent;width:unset;display:none}.CarouselContainerHeaderMain .CarouselItem a{color:#fff;text-decoration:none}@media only screen and (max-width: 1024px){.CarouselContainerHeaderMain .CarouselLeftArrow,.CarouselContainerHeaderMain .CarouselRightArrow{display:flex}}</style>`;
+    		this.shadowRoot.innerHTML = `<style>*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Helvetica Neue', 'Helvetica', sans-serif}.CarouselWrapper{background:#D0046C;background:-webkit-linear-gradient(to left, #FD2839, #D0046C);background:linear-gradient(to left, #FD2839, #D0046C)}.CarouselWrapper.CarouselWrapperHeaderMain{background:transparent}.CarouselContainer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;width:100%;color:#ffffff;margin:0 auto;padding:0 10px}.CarouselContainer.CarouselContainerMobile{padding:0}.CarouselContainer .CarouselItems{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:scroll;list-style-type:none;-ms-overflow-style:none;scrollbar-width:none}.CarouselContainer .CarouselItems::-webkit-scrollbar{display:none}.CarouselContainer .CarouselItems .CarouselItem{display:flex;height:100%;align-items:center;padding:12.8px 19.2px;font-size:16px;text-align:center;line-height:25.6px;transition:all 150ms ease-in-out;white-space:nowrap}.CarouselContainer .CarouselItems .CarouselItem:hover,.CarouselContainer .CarouselItems .CarouselItem.active{background:#07072a;cursor:pointer}.CarouselContainer .CarouselLeftArrow,.CarouselContainer .CarouselRightArrow{display:flex;align-items:center;justify-content:center;width:50%;max-width:64px;background:rgba(255, 255, 255, 0.3)}.CarouselContainer .CarouselLeftArrow svg,.CarouselContainer .CarouselRightArrow svg{width:100%;max-width:38.4px}.CarouselContainer .CarouselLeftArrow:hover,.CarouselContainer .CarouselRightArrow:hover{cursor:pointer}.CarouselContainerHeaderMain .CarouselItems .CarouselItem:hover,.CarouselContainerHeaderMain .CarouselItems .CarouselItem.active{background:transparent}.CarouselContainerHeaderMain .CarouselItems .CarouselItem:hover a,.CarouselContainerHeaderMain .CarouselItems .CarouselItem.active a{border-top:1px solid #D0046C;color:#D0046C}.CarouselContainerHeaderMain{background:transparent;margin:0;padding:0}.CarouselContainerHeaderMain .CarouselLeftArrow,.CarouselContainerHeaderMain .CarouselRightArrow{background:transparent;width:unset;display:none}.CarouselContainerHeaderMain .CarouselItem a{color:#fff;text-decoration:none}@media only screen and (max-width: 1024px){.CarouselContainerHeaderMain .CarouselLeftArrow,.CarouselContainerHeaderMain .CarouselRightArrow{display:flex}}</style>`;
 
     		init(
     			this,
@@ -5397,12 +5456,13 @@
     			safe_not_equal,
     			{
     				sliderdata: 0,
-    				onclickeventname: 9,
+    				onclickeventname: 11,
     				favoritesnumber: 1,
     				location: 2,
-    				clientstyling: 10,
-    				clientstylingurl: 11,
-    				identity: 12
+    				clientstyling: 12,
+    				clientstylingurl: 13,
+    				identity: 14,
+    				containermaxwidth: 3
     			}
     		);
 
@@ -5426,7 +5486,8 @@
     			"location",
     			"clientstyling",
     			"clientstylingurl",
-    			"identity"
+    			"identity",
+    			"containermaxwidth"
     		];
     	}
 
@@ -5440,7 +5501,7 @@
     	}
 
     	get onclickeventname() {
-    		return this.$$.ctx[9];
+    		return this.$$.ctx[11];
     	}
 
     	set onclickeventname(onclickeventname) {
@@ -5467,7 +5528,7 @@
     	}
 
     	get clientstyling() {
-    		return this.$$.ctx[10];
+    		return this.$$.ctx[12];
     	}
 
     	set clientstyling(clientstyling) {
@@ -5476,7 +5537,7 @@
     	}
 
     	get clientstylingurl() {
-    		return this.$$.ctx[11];
+    		return this.$$.ctx[13];
     	}
 
     	set clientstylingurl(clientstylingurl) {
@@ -5485,13 +5546,22 @@
     	}
 
     	get identity() {
-    		return this.$$.ctx[12];
+    		return this.$$.ctx[14];
     	}
 
     	set identity(identity) {
     		this.$set({ identity });
     		flush();
     	}
+
+    	get containermaxwidth() {
+    		return this.$$.ctx[3];
+    	}
+
+    	set containermaxwidth(containermaxwidth) {
+    		this.$set({ containermaxwidth });
+    		flush();
+    	}
     }
 
     !customElements.get('casino-slider') && customElements.define('casino-slider', CasinoSlider);