@everymatrix/bonus-powerups-ingame-games 0.0.1

package/dist/esm/bonus-powerups-ingame-games-b2c0935f.js

@@ -0,0 +1,315 @@
+import { r as registerInstance, c as createEvent, h } from './index-fd928daa.js';
+
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
+ */
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
+
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
+  }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain] && cacheStyleObject[domain].sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
+}
+
+const powerUpGameSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,powerUpName,displayName,games(id,gameId,slug,name,thumbnail)"
+};
+
+const ReturnSvg = `<svg width="14" height="14" viewBox="0 0 14 14"
+     fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_4119_5439)">
+    <path d="M11.1533 12.8332C11.8242 11.9932 12.25 10.9315 12.25 9.759C12.25 6.959 9.7475 4.6665 6.69667 4.6665H1.75"
+          stroke="currentColor" stroke-width="0.952264" stroke-miterlimit="10" stroke-linecap="round"
+          stroke-linejoin="round" />
+    <path d="M5.25 1.16699L1.75 4.66699L5.25 8.16699" stroke="currentColor" stroke-width="0.952264" stroke-miterlimit="10"
+          stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+  <defs>
+    <clipPath id="clip0_4119_5439">
+      <rect width="14" height="14" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
+`;
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        playNow: 'Play Now',
+        games: 'Games',
+        noDataFound: 'No data found',
+        loading: 'Loading',
+        loadingMore: 'Loading More'
+    }
+};
+const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};
+
+const bonusPowerupsIngameGamesCss = ":host{display:block;height:100%;--game-amount-line:3}.IngamePowerUpGamesContainer{height:100%;display:flex;padding:var(--emw--ingame-power-container-padding, 8px);justify-content:flex-start;flex-direction:column}.IngamePowerUpGamesContainer .CircleLinearBorder{background:rgba(9, 9, 9, 0.5019607843);position:relative;width:26px;height:26px;border-radius:20px;background:none;overflow:hidden;border:1.5px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.IngamePowerUpGamesContainer .CircleLinearBorder svg{border-radius:20px;padding:4.5px;background:var(--emw--ingame-color-powerup-bg, rgba(9, 9, 9, 0.8980392157));z-index:1}.IngamePowerUpGamesContainer .CircleLinearBorder::before{content:\"\";position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;z-index:-1;border-radius:21.5px;background:linear-gradient(0deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667)), var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667))), linear-gradient(35.22deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0)), var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.5490196078)) 89.19%)}.IngamePowerUpGamesContainer .TopBar,.IngamePowerUpGamesContainer .Loading{padding:15px}.IngamePowerUpGamesContainer .TopBar{display:flex;align-items:center;gap:5px}.IngamePowerUpGamesContainer .TopBar .ReturnIcon{width:26px;height:26px;display:flex;border-radius:20px;padding:0;backdrop-filter:blur(13.7647px);justify-content:center;align-items:center}.IngamePowerUpGamesContainer .TopBar .ReturnIcon svg{color:var(--emw--ingame-color-white60, #f0f0f0)}.IngamePowerUpGamesContainer .TopBar .Title{font-weight:600;font-size:0.9rem;line-height:100%;text-align:center;vertical-align:middle;color:var(--emw--ingame-color-neutural-95, #EDEFF2);display:flex;flex-direction:row}.IngamePowerUpGamesContainer .TopBar .Title .Name{font-size:1.1rem}.IngamePowerUpGamesContainer .TopBar .Title .Label{font-size:1.1rem;font-weight:bold;color:var(--emw--ingame-color-neutural-95, #EDEFF2)}.IngamePowerUpGamesContainer .TopBar .TextContent{font-weight:400;font-size:0.9rem;line-height:1.1rem;vertical-align:middle;color:var(--emw--ingame-color-white70, rgba(255, 255, 255, 0.6980392157))}.IngamePowerUpGamesContainer .GamesWrapper{height:calc(100% - 90px);overflow:hidden;width:100%;margin-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent}.IngamePowerUpGamesContainer .Games{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent}.IngamePowerUpGamesContainer .GamesList{display:flex;height:100%;justify-content:center;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--emw--background-gray-color, gray) transparent}.IngamePowerUpGamesContainer .GamesList::-webkit-scrollbar-track{background-color:transparent;border-radius:5px}.IngamePowerUpGamesContainer .GamesList .Games{padding:15px;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:calc(30px / (var(--game-amount-line, 3) - 1))}.IngamePowerUpGamesContainer .GamesList .Games .Game{width:calc((100% - 30px) / var(--game-amount-line, 3));cursor:pointer;position:relative}.IngamePowerUpGamesContainer .GamesList .Games .Game:hover .mask-filter{opacity:1}.IngamePowerUpGamesContainer .GamesList .Games .Game:hover img{opacity:0.4;filter:blur(1.5px)}.IngamePowerUpGamesContainer .GamesList .Games .Game:hover .GameMask{mix-blend-mode:screen;background-color:var(--emw--color-powup-green, #24B24E);display:flex;justify-content:center;align-items:center;position:absolute;width:100%;opacity:1;left:0;height:100%;top:0;border-radius:8px}.IngamePowerUpGamesContainer .GamesList .Games .Game:hover .GameMask .GameStartBtn{opacity:1}.IngamePowerUpGamesContainer .GameMask{display:none;transition:display;transition-duration:0.2s;opacity:0;position:absolute;width:70%;height:100%}.IngamePowerUpGamesContainer .GameMask .GameStartBtn{width:80px;height:22px;border-radius:8px;opacity:1;padding:4px 5px;background:linear-gradient(180deg, var(--emw--color-powup-green, #24B24E) 0%, var(--emw--color-powup-light-green, #18CE51) 100%);border:1px solid var(--emw--ingame-color-white, #FFFFFF);display:flex;align-items:center;justify-content:space-between;cursor:pointer}.IngamePowerUpGamesContainer .GameMask .GameStartBtn .PlayIcon{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1ZM0 5.5C0 2.46243 2.46243 0 5.5 0C8.53757 0 11 2.46243 11 5.5C11 8.53757 8.53757 11 5.5 11C2.46243 11 0 8.53757 0 5.5ZM5.12255 3.21652C5.12728 3.21956 5.13199 3.22259 5.13668 3.22561L7.49698 4.74294C7.50129 4.74571 7.50562 4.74849 7.50998 4.75129C7.58551 4.79982 7.66805 4.85285 7.73381 4.90413C7.80355 4.95852 7.91363 5.05446 7.97854 5.20809C8.0574 5.39471 8.0574 5.60529 7.97854 5.79191C7.91363 5.94554 7.80355 6.04148 7.73381 6.09587C7.66805 6.14715 7.58551 6.20018 7.50998 6.24871C7.50562 6.25151 7.50129 6.25429 7.49698 6.25706L5.13668 7.77439C5.13199 7.77741 5.12727 7.78045 5.12255 7.78348C5.03469 7.84 4.9423 7.89941 4.86094 7.94176C4.77909 7.98436 4.63056 8.05332 4.44657 8.04018C4.22957 8.02468 4.02999 7.91572 3.89961 7.74157C3.78907 7.59391 3.76675 7.43167 3.75832 7.33979C3.74995 7.24844 3.74997 7.1386 3.75 7.03414C3.75 7.02852 3.75 7.02292 3.75 7.01733V3.98267C3.75 3.97708 3.75 3.97148 3.75 3.96586C3.74997 3.8614 3.74995 3.75156 3.75832 3.66021C3.76675 3.56833 3.78907 3.40609 3.89961 3.25843C4.02999 3.08428 4.22957 2.97532 4.44657 2.95982C4.63056 2.94668 4.77909 3.01564 4.86094 3.05824C4.94231 3.10059 5.03469 3.16001 5.12255 3.21652ZM4.75 4.16583V6.83417L6.82537 5.5L4.75 4.16583Z\" fill=\"white\"/> <path d=\"M4.75 6.83417V4.16583L6.82537 5.5L4.75 6.83417Z\" fill=\"white\"/></svg>');height:16px;width:16px;background-repeat:no-repeat;background-size:contain}.Games .Container{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;height:calc(100% - 120px);overflow:auto}.Games .Container .Game{width:105px}@keyframes smart-animate1{0%{opacity:0.15;transform:translateX(0px)}35%{opacity:1;transform:translateX(36px)}75%{opacity:1;transform:translateX(0px)}100%{opacity:0.15;transform:translateX(0px)}}@keyframes smart-animate2{0%{opacity:1}35%{opacity:0.15}75%{opacity:0.5}100%{opacity:1}}@keyframes smart-animate3{0%{opacity:0.5;transform:translateX(0px)}35%{opacity:0.15;transform:translateX(-36px)}75%{opacity:0.15;transform:translateX(0px)}100%{opacity:0.5;transform:translateX(0px)}}.smart-loader{margin:50px auto;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100px;gap:10px}.smart-loader .smart-item{width:3px;height:20px;opacity:0.15;animation-delay:200ms;animation-duration:1000ms;animation-timing-function:ease-out;animation-fill-mode:forwards;padding:1px;margin:5px 0;background:var(--emw--ingame-color-powerup-brightgreen, #00FA5A);border-radius:4px;animation-iteration-count:infinite;animation-direction:normal}.smart-loader .smart-item:nth-child(1){animation-name:smart-animate1}.smart-loader .smart-item:nth-child(2){animation-name:smart-animate2;height:36px}.smart-loader .smart-item:nth-child(3){animation-name:smart-animate3}";
+const BonusPowerupsIngameGamesStyle0 = bonusPowerupsIngameGamesCss;
+
+const BonusPowerupsIngameGames = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.backFromPowerupGamesEvent = createEvent(this, "backFromPowerupGames", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.powerupId = undefined;
+        this.isLoadingGames = false;
+        this.powerUpGames = { items: [], total: 0 };
+        this.powerUp = undefined;
+        this.limit = 30;
+    }
+    initializeGamesObserver() {
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+        this.loadMoreGamesObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames().catch(console.error);
+                }
+            });
+        });
+        if (this.lastGameElement) {
+            this.loadMoreGamesObserver.observe(this.lastGameElement);
+        }
+    }
+    async loadMoreGames() {
+        var _a, _b, _c, _d;
+        if (this.isLoadingGames || (this.powerUpGames.total > 0 && this.powerUpGames.items.length >= this.powerUpGames.total)) {
+            return;
+        }
+        this.isLoadingGames = true;
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups/available?pagination=games(limit=${this.limit},offset=${((_b = (_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) || 0})`);
+            const options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'GET',
+                signal: this.abortController.signal
+            };
+            url.searchParams.append('filter', `id=${this.powerupId}`);
+            Object.entries(powerUpGameSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            url.searchParams.append('language', this.language);
+            const response = await fetch(url, options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const res = await response.json();
+            this.powerUp = res.data[0];
+            const newGames = ((_c = this.powerUp.games) === null || _c === void 0 ? void 0 : _c.items) || [];
+            this.powerUpGames = {
+                items: [...this.powerUpGames.items, ...newGames],
+                total: ((_d = this.powerUp.games) === null || _d === void 0 ? void 0 : _d.total) || this.powerUpGames.total
+            };
+        }
+        catch (e) {
+            if (e.name !== 'AbortError') {
+                console.error('Failed to load more games:', e);
+            }
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isLoadingGames = false;
+            }
+        }
+    }
+    onGameClick(game) {
+        window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } });
+    }
+    componentDidUpdate() {
+        if (this.powerUpGames.items.length < this.powerUpGames.total) {
+            this.initializeGamesObserver();
+        }
+    }
+    render() {
+        var _a, _b;
+        return h("div", { key: '0d034307e070a8ba1d88303c3e3093ba567444b2', class: 'IngamePowerUpGamesContainer', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '7b01f05d91d274da4ae0de3fc63e55927946b095', class: 'TopBar' }, h("div", { key: 'f8664bf99bb12513f281fe67ee24cd0794d9ba66', class: 'ReturnIcon CircleLinearBorder', onClick: this.backFromPowerupGamesEvent.emit, innerHTML: ReturnSvg }), this.powerUp &&
+            h("div", { key: '56083e9dfbc469875b0448f471c455ef8e1fb613', class: 'Title TextContent' }, h("span", { key: '6cde7a32b98c4f8d240cfda6f715e2d3fd4b0a25', class: 'Name' }, this.powerUp.displayName), " /", h("div", { key: 'a2045a41ad40665fa553b7f1e2a25628344188fc', class: 'Label' }, translate('games', this.language)), h("div", { key: 'a2cc2c8a5ebb29b097da802984099860410e0c25', class: 'GamesTotal' }, "( ", this.powerUpGames.total || '', " )"))), h("div", { key: 'b335d598aeea740b4e4a2e58a4061bf092abb773', class: 'GamesWrapper Card ' }, this.isLoadingGames && this.powerUpGames.items.length === 0 &&
+            h("div", { key: 'fced976e5554f7864fcf8755494c0cfd74f19a0f', class: 'Loading' }, h("div", { key: '8653c05c761078e11d6c060e5f1d519a133f2d8a', class: 'smart-loader' }, h("div", { key: '4404881893636a48de508d95ab8d6bd09d05acae', class: "smart-item" }), h("div", { key: '8aeafd883609d5840f7603b58300ee9c9350746c', class: "smart-item" }), h("div", { key: 'ded309b5a38d7775c27b3b38dd78746caf5aa557', class: "smart-item" }))), !this.isLoadingGames && !this.powerUp ?
+            h("div", { class: 'NoData' }, translate('noDataFound', this.language), " ")
+            :
+                h("div", { class: 'CircleInner GamesList' }, h("div", { class: 'Games FlexRow' }, this.powerUpGames.total > 0 &&
+                    this.powerUpGames.items.map((g, index) => {
+                        const isLastItem = index === this.powerUpGames.items.length - 1;
+                        return h("div", { class: 'Game', ref: isLastItem ? (el) => (this.lastGameElement = el) : null }, h("ui-image", { src: g.thumbnail, alt: g.name }), h("div", { class: 'GameMask', onClick: this.onGameClick.bind(this, g) }, h("div", { class: 'GameStartBtn' }, h("div", { class: 'PlayIcon' }), h("span", null, translate('playNow', this.language)))));
+                    }), this.isLoadingGames && ((_b = (_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) > this.limit &&
+                    h("p", { class: 'LoadingMore' }, translate('loadingMore', this.language))))));
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        this.loadMoreGames();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+BonusPowerupsIngameGames.style = BonusPowerupsIngameGamesStyle0;
+
+export { BonusPowerupsIngameGames as B };

package/dist/esm/bonus-powerups-ingame-games.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-fd928daa.js';
+export { s as setNonce } from './index-fd928daa.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["bonus-powerups-ingame-games_3",[[1,"bonus-powerups-ingame-games",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"session":[513],"powerupId":[513,"powerup-id"],"isLoadingGames":[32],"powerUpGames":[32],"powerUp":[32],"limit":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+});

package/dist/esm/bonus-powerups-ingame-games_3.entry.js

@@ -0,0 +1,241 @@
+export { B as bonus_powerups_ingame_games } from './bonus-powerups-ingame-games-b2c0935f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-fd928daa.js';
+
+const uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.imgLoaded = false;
+        this.shouldLoad = false;
+    }
+    handleSrc() {
+        if (!this.shouldLoad) {
+            return;
+        }
+        const preloadedImage = new Image();
+        preloadedImage.onload = () => {
+            if (this.image) {
+                this.image.src = this.src;
+                this.imgLoaded = true;
+                preloadedImage.onload = null;
+            }
+        };
+        preloadedImage.src = this.src;
+    }
+    componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.el.__uxComponent = this;
+            if (!window.EMUxObserver) {
+                window.EMUxObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const comp = entry.target.__uxComponent;
+                            if (comp) {
+                                comp.shouldLoad = true;
+                                comp.handleSrc();
+                            }
+                            window.EMUxObserver.unobserve(entry.target);
+                        }
+                    });
+                }, { rootMargin: this.detectDistance });
+            }
+            window.EMUxObserver.observe(this.el);
+        }
+        else {
+            this.shouldLoad = true;
+            this.handleSrc();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '2188ca4494c10587f064acc5459ffc468948f497', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "src": ["handleSrc"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingValue = {
+            width: this.handleStylingProps(this.width),
+            height: this.handleStylingProps(this.height),
+            borderRadius: this.handleStylingProps(this.borderRadius),
+            marginBottom: this.handleStylingProps(this.marginBottom),
+            marginTop: this.handleStylingProps(this.marginTop),
+            marginLeft: this.handleStylingProps(this.marginLeft),
+            marginRight: this.handleStylingProps(this.marginRight),
+            size: this.handleStylingProps(this.size),
+        };
+        this.structure = undefined;
+        this.width = 'unset';
+        this.height = 'unset';
+        this.borderRadius = 'unset';
+        this.marginBottom = 'unset';
+        this.marginTop = 'unset';
+        this.marginLeft = 'unset';
+        this.marginRight = 'unset';
+        this.animation = true;
+        this.rows = 0;
+        this.size = '100%';
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStylingProps(value) {
+        switch (typeof value) {
+            case 'number':
+                return value === 0 ? 0 : `${value}px`;
+            case 'undefined':
+                return 'unset';
+            case 'string':
+                if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
+                    value.endsWith('px') ||
+                    value.endsWith('%')) {
+                    return value;
+                }
+                else {
+                    return 'unset';
+                }
+            default:
+                return 'unset';
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (h(Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { UiImage as ui_image, UiSkeleton as ui_skeleton };