@everymatrix/bonus-elevate-powerups 0.0.1

package/dist/esm/bonus-elevate-powerups-550b383c.js

@@ -0,0 +1,397 @@
+import { r as registerInstance, h } from './index-c7067e6d.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];
+    }
+  });
+}
+
+var MultiplierMode;
+(function (MultiplierMode) {
+    MultiplierMode[MultiplierMode["COINS"] = 1] = "COINS";
+    MultiplierMode[MultiplierMode["XP"] = 2] = "XP";
+})(MultiplierMode || (MultiplierMode = {}));
+var BoostingPeriodMode;
+(function (BoostingPeriodMode) {
+    BoostingPeriodMode[BoostingPeriodMode["TIME_PERIOD"] = 1] = "TIME_PERIOD";
+    BoostingPeriodMode[BoostingPeriodMode["NUMBER_OF_ROUNDS"] = 2] = "NUMBER_OF_ROUNDS";
+})(BoostingPeriodMode || (BoostingPeriodMode = {}));
+var PowerUpStatus;
+(function (PowerUpStatus) {
+    PowerUpStatus[PowerUpStatus["ACTIVE"] = 0] = "ACTIVE";
+    PowerUpStatus[PowerUpStatus["ACTIVATED"] = 1] = "ACTIVATED";
+    PowerUpStatus[PowerUpStatus["EXPIRED"] = 2] = "EXPIRED";
+    PowerUpStatus[PowerUpStatus["CONSUMED"] = 3] = "CONSUMED";
+    PowerUpStatus[PowerUpStatus["DISABLED"] = 4] = "DISABLED";
+    PowerUpStatus[PowerUpStatus["ENABLED"] = 6] = "ENABLED";
+})(PowerUpStatus || (PowerUpStatus = {}));
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        min: 'MIN',
+        rounds: 'Rounds',
+        coins: 'Coins',
+        xp: 'XP',
+        nothingHere: 'Nothing here -- yet!',
+        noPowerUps: 'No power-ups have been used at the moment.',
+        gotoShop: 'Go to shop to check power-ups availability.',
+        termsCon: 'Read full Terms & Conditions',
+        games: 'Games',
+        selectGameToActive: 'Select the game to activate power-up',
+    }
+};
+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 ClearSearch = `<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="52" height="52" fill="url(#pattern0_1132_30534)"/>
+<defs>
+<pattern id="pattern0_1132_30534" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1132_30534" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_1132_30534" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHlElEQVR4nO2daYwURRTH/4tnvPCI9xE1ahQTNZmp6gXRzar4wTtGvPWLUeIVPxgVNWbizqvZRdTAGoioEQwaFDWK0YBCvMUbJWJIBD8QOUIEowhEQFjzepu4WaZ6qnp6tqub+iX9hexUV/W/Xh3vvSoAj8fj8Xg8Ho/H4/F4ikapB8PLNYiyws2S8LBU6JEKU4TCNKkwWSjUhML9ZYWrRRfOPGUy9sm6zoWio4IDpMI1/NElYalU6LN5hMI2SVgoFUgqdI6djT2yblP+6ENbuYqLJGGmJGy0FSFWIMIqQZgoFUZk3Uz3qWBYmXC5VPg2TRFinvmS0J51s51EKnQKws9DJMRgq5kjqzgp62/gBOcoHC4VXs5CiEGibBaERzsq2BO7K6KK84XCykQfUOGvaGibJxVms6hC4Q0ehiJL25Kw3M9kD47D7oYkPBCugEw/FmGFJEwVCteafDDu6SWF06XCOKnwqiBssBDmd1nFBdgtqGAY7xcMe+u2aDjr5N8189pSBfsJhRsF4VNDUbaw+Ci8GISZBuP5v5LwXKsmWqlwnlD4yECU7WxhKCqSMNVgaPom6EZpKOrDFiMJaxqJUq7iOhQNSag0aji7PYZ6lROu8ghzDYavC1EURA2XScKOGKvYyH+T8VBabTjRF2H1Va7ieElYFzNxr3dlt1wm3BXNG9olce73KZKwIKaBf7PnFg4RiRJnKY8gr4STZsySNlAYAweJPMM6QTYF3TgReUNWcFCDFcyDcHuvNC9mWT4HeUMojI8RYx672OEwIys4Iq5DlQgSeaGjgn11jRGEzeVunIwcEEYl9UPu28gLcROjIDxmWx6HYjlimDTaF/Z2hek8jFr9sA9tkvCxZqm+I+jCGcgDugCTUFg/agIOtCkrchCujsqYbbvsjIaen6LO8N3obhxi8/uyQkfM0NsD1+HQaIx1PG5rGUJh7aAyZplaSmQZSwb17IW2lhK65Ot3sJXOx+j5o2sE2d5OOLYZMWxEqStGQlFEFTfpOhlbEFxGKnyhqfx80zJ4WBKEZXEbtDhRYsX4/5luWp+zJmJ/3sRqyumC0yk7hK2aio+zKUvUMDKKClqJYijGEv47q/oQXtdY2+dwFfaIaj9eDadZl2cpSqvEiNp2p0aQrSMq2BsuIhXu1lR6TdIyTUUZNQHHtEqMRosVZ5e/ktCrEWRBM+WaiGKQUJdYjJ3zWkzixFVwEUF4T1PhKU2XbSJKi8TYiS6VlXOJ4SI8wbXSZS2SiZKKGEyY6VjfOqtwEUFYrOlB96b1Do63C8IfRmIQlpYIR6f1bkF4SzOHTYKLSIXlmo9zW5rvCWq4wkCMjTzRp/leXcaMILwAF9Hl5rKzESkx0Ddl8Fj7vpLsRYTCM3ARqfC1pgc9lIEYqYsiCO9r2qfgItp0GsKTzZZtuOmr+9g4JBu0b5HGQsbDRdh0NR/lnQwsI11L6UOb1p9VxQ1wEV5NaXrosqRlmrpDJOHKJL4vU0o9OEFX7lBlWlpTUjhXM2TtEE/gKNvybH1TSR2SJrAV6NpmG3QbMtjJxmky9SpetsyPNRqm6uwzDPcp1sOXVHhe1yHgMoLwgebjvWIZD1lsahkJd/TG7hy2KD4sqmlXL1wmINyh+QCbbEw7ULg+PJZgKYaJKByJ5IikRV3GxAjrpmNxJ6KGw3ReUaFwu01ZGlGMfVP1RLEVIyyHMEszH23gg0BwnejMX93V1ljLCXWQKPaRvgGiJBEj6MKpMZZqHAbOlKCGQGviNdxiXV6/KIuTem1DUQjLbMVgJGFGzHDVibwgFT7RWMmqJMvEZt0fSX7PQuqOJwiF711Ph921MfpDOpPhOKVp2Esq/KCzDr7cBnlDN5dIFopwKRxGKjylE0MQfmz2VHAmcGKcJPypEWWdq9dZcO/XWjfn9FYxGnmFl7oxk+LyQOFIuLYgiUmYEIQXkWvYS6oJfcr+HrcorZh3GmLEul0IK9orOBR55+wKDo4J7/KK5Zesh6+ghktiU4kIW3mhgiLAFiAaXb1EWJfJ0egKhvGZlZjNX/gECvehCFhF+ihcffVaH6xJSLQL/9CgXk1HPJ2gibDrakm4tVVnwqMhlCThn0Z1EQov5WoD2IoYuBy4CmPvcUoWw1E/TkjQLsV3tYzeXO43kogh+ucU7URf57a3WXzu3TbxLUySJtwTnRXU3tIw6NnOV9CiCNiEXUs9GC4JbyaxHM4jFoSnOcWI877Yknji5Wv6BOFZnht0J7AaDFFrZQ0XowgkOp/RhzbObDQeRlr5EOamne2YGc0elmlnNwv7vuJuDWrRIwi/8WXNKAppnlyShHad674Fz2o+SsBnCFEU2BfVipNLQb9P6bWkt4vGWoTCl3zmkW+cQJFolRgDYd8ROyjDvNrk145v4csvwx15grOOuWAoxKgXNCpXMSq6uoP/J4R3BeGrKHPxVw4ohR++/98nRQc1O3ORiNAMSZPYPC3Ai+EQXgyH8GI4hBfDIbwYDuHFcAgvhkN4MRzCi+EQXgyH8GI4hBcjLzfBDfDaupaDW3g4WcBbhuuieDEcEsWL4Q5hnpOfMzwej8fj8Xg8Ho/H4/GgyPwHN+MBWXHaP7AAAAAASUVORK5CYII="/>
+</defs>
+</svg>
+`;
+
+const powerUpSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,currentTime,expireTime,games(id,gameId,name,thumbnail,launchUrl)",
+    status: `${PowerUpStatus.ACTIVE},${PowerUpStatus.ACTIVATED}`
+};
+const powerUpGameSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,games(id,gameId,name,thumbnail,launchUrl)"
+};
+
+const bonusElevatePowerupsCss = ":host{display:block;font-family:inherit;--game-amount-line:4}@media screen and (max-width: 768px){.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game{width:32%}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardLeft,.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardRight{padding:8px}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardRight{margin:8px}}@media screen and (max-width: 470px){.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game{width:45%}.PowerUpsContainer .PowerUps .PowerUpItem.Card{max-height:600px;height:fit-content;flex-direction:column}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardLeft{gap:10px}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardRight{height:51%;overflow:auto}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardLeft,.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardRight{width:auto;margin:auto}.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardLeft .Game,.PowerUpsContainer .PowerUps .PowerUpItem.Card .CardRight .Game{width:45%}}.PowerUpsContainer{font-size:0.95rem;display:flex;flex-direction:column;min-height:300px}.PowerUpsContainer .EmptyPowerups{align-items:center;justify-content:center;font-weight:400;font-size:1.2em;line-height:24px;text-align:center;vertical-align:middle;width:max-content;margin:auto;display:flex;flex-direction:column;padding:50px}.PowerUpsContainer .EmptyPowerups .Icon,.PowerUpsContainer .EmptyPowerups .NoPowerTitle{text-align:center}.PowerUpsContainer .EmptyPowerups .Icon svg,.PowerUpsContainer .EmptyPowerups .NoPowerTitle svg{width:40px}.PowerUpsContainer .EmptyPowerups .NoPowerTitle{font-size:1.2em;font-weight:bold;margin:10px}.PowerUpsContainer .PowerUps{width:100%;gap:12px;display:flex;flex-direction:column}.PowerUpsContainer .PowerUps .Card{width:100%;height:307px;gap:12px;border-radius:12px;border:2px solid var(--emw--button-border-color-secondary, rgba(188, 252, 177, 0.0509803922));display:flex;flex-direction:row}.PowerUpsContainer .PowerUps .Card .CardLeft,.PowerUpsContainer .PowerUps .Card .CardRight{display:flex;flex-direction:column}.PowerUpsContainer .PowerUps .Card .CardLeft{padding:20px;width:35%;display:flex;flex-direction:column;justify-content:space-between}.PowerUpsContainer .PowerUps .Card .CardLeft .MainInfo{display:flex;flex-direction:column;gap:12px}.PowerUpsContainer .PowerUps .Card .CardRight{padding:10px}.PowerUpsContainer .PowerUps .Card .Description{color:#C8D6CE;overflow-y:auto;height:calc(100% - 60px)}.PowerUpsContainer .PowerUps .Card .CardLeft .DisplayName{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:22px;gap:12px}.PowerUpsContainer .PowerUps .Card .CardLeft .PowerUpMultiplier{text-transform:uppercase;font-size:0.85em;color:var(--emw--color-gray-dark, #727672)}.PowerUpsContainer .PowerUps .Card .CardLeft .PowerUpMultiplier .ExpireCount{background-image:linear-gradient(180deg, var(--emw--color-powup-orange1, #EA9018) 0%, var(--emw--color-powup-orange2, #E0A84E) 100%)}.PowerUpsContainer .PowerUps .Card .CardLeft .ExpireCount,.PowerUpsContainer .PowerUps .Card .CardLeft .TermsC{display:inline-block;-webkit-background-clip:text;background-clip:text;color:transparent}.PowerUpsContainer .PowerUps .Card .CardLeft .TermsC{text-transform:uppercase;background-image:linear-gradient(180deg, var(--emw--color-powup-green, #24B24E) 0%, var(--emw--color-powup-light-green, #18CE51) 100%);font-size:0.8em;font-weight:bold}.PowerUpsContainer .PowerUps .Card .GamesContent{margin:20px;flex:1;gap:12px;display:flex;border-radius:8px;border:2px solid var(--emw--color-powup-light-green-0D, rgba(188, 252, 177, 0.0509803922))}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesTitle{display:flex;flex-direction:row}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesTitle .Title2{text-transform:capitalize}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesTitle .GamesAmount{opacity:0.8}.PowerUpsContainer .PowerUps .Card .GamesContent .GameTitleTip{color:var(--emw--color-powup-gray-green, #C8D6CE);font-size:0.8rem}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList{display:flex;justify-content:center;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--emw--background-gray-color, gray) transparent}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList::-webkit-scrollbar-track{background-color:transparent;border-radius:5px}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games{padding:0;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:calc(30px / (var(--game-amount-line) - 1))}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game{width:calc((100% - 30px) / var(--game-amount-line));cursor:pointer;position:relative}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game .GameMask{transition:opacity;transition-duration:0.2s;opacity:0;position:absolute;width:70%;height:100%}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game:hover .mask-filter{opacity:1}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game:hover img{opacity:0.4;filter:blur(1.5px)}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game:hover .GameMask{opacity:1;mix-blend-mode:screen;background-color:var(--emw--color-powup-green, #24B24E);display:flex;justify-content:center;align-items:center;position:absolute;width:100%;left:0;height:100%;top:0;border-radius:8px}.PowerUpsContainer .PowerUps .Card .GamesContent .GamesList .Games .Game:hover .GameMask .PlayBtn{border:2px solid var(--emw--color-powup-gray, #f0f0f0);padding:5px 3px;border-radius:3px}.PowerUpsContainer .Pagination{display:flex;justify-content:center}";
+const BonusElevatePowerupsStyle0 = bonusElevatePowerupsCss;
+
+const BonusElevatePowerups = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tableId = 'powerups';
+        this.gameObservers = new Map();
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.pageSize = 20;
+        this.isLoading = true;
+        this.powerups = [];
+        this.offset = 0;
+        this.limit = this.pageSize;
+        this.total = undefined;
+    }
+    onReloadPageByType(e) {
+        const { limit, offset, tableId } = e.detail;
+        if (tableId !== this.tableId) {
+            return;
+        }
+        this.offset = offset;
+        this.limit = limit;
+    }
+    async loadData() {
+        if (!this.endpoint || !this.session) {
+            return;
+        }
+        this.isLoading = true;
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=offset=${this.offset},limit=${this.limit},games(limit=20,offset=0)`);
+            let options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'GET',
+                signal: this.abortController.signal
+            };
+            Object.entries(powerUpSearchConditions).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 { data, total } = await response.json();
+            this.powerups = data;
+            this.total = total;
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error("Failed to load powerups history:", error);
+                window.postMessage({ type: 'peHistoryLoaderError', error });
+            }
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isLoading = false;
+            }
+        }
+    }
+    onGamesHover(game) {
+        window.postMessage({ type: 'PowerUpHover', game }, '*');
+    }
+    async loadMoreGames(powerup) {
+        var _a;
+        if (powerup.games.items.length >= powerup.games.total) {
+            return; // All games already loaded
+        }
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=games(limit=20,offset=${powerup.games.items.length})`);
+            const options = {
+                headers: { 'x-SessionId': this.session },
+            };
+            url.searchParams.append('filter', `powerUpID=${powerup.powerUpID}`);
+            Object.entries(powerUpGameSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            const response = await fetch(url.toString(), options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const { data } = await response.json();
+            // Find the powerup in the state and append the new games
+            const powerupIndex = this.powerups.findIndex(p => p.id === powerup.id);
+            if (powerupIndex !== -1) {
+                const updatedPowerup = Object.assign({}, this.powerups[powerupIndex]);
+                const fetchedPowerUp = data === null || data === void 0 ? void 0 : data[0];
+                if (fetchedPowerUp && ((_a = fetchedPowerUp.games) === null || _a === void 0 ? void 0 : _a.items)) {
+                    updatedPowerup.games.items = [...updatedPowerup.games.items, ...fetchedPowerUp.games.items];
+                    const newPowerups = [...this.powerups];
+                    newPowerups[powerupIndex] = updatedPowerup;
+                    this.powerups = newPowerups;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to load more games:', error);
+        }
+    }
+    initializeGamesObserver(powerup) {
+        let observer = this.gameObservers.get(powerup.id);
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames(powerup);
+                    observer.unobserve(entry.target);
+                    this.gameObservers.delete(powerup.id);
+                }
+            });
+        });
+        this.gameObservers.set(powerup.id, observer);
+        setTimeout(() => {
+            const lastGameElement = this.stylingContainer.querySelector(`.PowerUpItem[data-powerup-id="${powerup.id}"] .Game:last-child`);
+            if (lastGameElement) {
+                observer.observe(lastGameElement);
+            }
+        }, 200);
+    }
+    componentDidUpdate() {
+        this.powerups.forEach(powerup => {
+            var _a, _b;
+            if (((_a = powerup.games) === null || _a === void 0 ? void 0 : _a.items.length) < ((_b = powerup.games) === null || _b === void 0 ? void 0 : _b.total)) {
+                this.initializeGamesObserver(powerup);
+            }
+        });
+    }
+    render() {
+        return h("div", { key: 'b40ca849d3de46834e9c7b6dee8d275756921d07', class: `PowerUpsContainer`, ref: (el) => (this.stylingContainer = el) }, this.isLoading
+            ? h("p", null, "Loading...")
+            : !this.total ?
+                h("div", { class: 'EmptyPowerups' }, h("div", { class: 'Icon', innerHTML: ClearSearch }), h("span", { class: 'NoPowerTitle' }, translate('nothingHere', this.language)), h("span", null, translate('noPowerUps')), h("span", null, translate('gotoShop')), h("div", null))
+                : [h("div", { class: 'PowerUps' }, this.powerups.map(powerup => {
+                        var _a, _b;
+                        return h("div", { class: 'PowerUpItem Card', "data-powerup-id": powerup.id }, h("div", { class: 'CardLeft' }, h("div", { class: 'MainInfo' }, h("div", { class: 'DisplayName' }, " ", powerup.displayName || 'Title', " "), h("div", { class: 'Title2 PowerUpMultiplier' }, h("span", { class: 'BoostingPeriod' }, h("span", { class: 'Period' }, powerup.boostingPeriod.minutes || powerup.boostingPeriod.numberOfRounds, " "), powerup.boostingPeriod.mode === BoostingPeriodMode.TIME_PERIOD ? translate('min') : translate('rounds'), " "), h("span", { class: 'Multiplier' }, "| X", powerup.multiplier.coefficient, " "), h("span", { class: 'MultiplierMode' }, "| ", powerup.multiplier.mode === MultiplierMode.XP ? translate('xp') : translate('coins'), " "), "| ", h("span", { class: 'ExpireCount' }, " ", h("time-count", { "expire-time": powerup.expireTime }))), h("div", { class: 'Description' }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam autem corporis est harum minus, nam neque nisi quibusdam quod reiciendis rerum saepe temporibus veritatis voluptas! Aperiam cupiditate optio rem?")), h("div", { class: 'TermsC' }, translate('termsCon', this.language))), h("div", { class: 'GamesContent CardRight' }, h("div", { class: 'GamesTitle' }, h("span", { class: 'Title2' }, " ", translate('games', this.language)), h("span", { class: 'GamesAmount' }, "( ", (_a = powerup.games) === null || _a === void 0 ? void 0 :
+                            _a.total, " )")), h("div", { class: 'GameTitleTip' }, translate('selectGameToActive', this.language)), h("div", { class: 'GamesList' }, h("div", { class: 'Games' }, (_b = powerup.games) === null || _b === void 0 ? void 0 : _b.items.map(g => {
+                            return h("div", { class: 'Game' }, h("ui-image", { src: g.thumbnail }), h("div", { class: 'GameMask', onClick: this.onGamesHover.bind(this, g) }, h("span", { class: 'PlayBtn' }, "Start Now!")));
+                        })))));
+                    })), h("div", { class: 'Pagination' }, this.total && this.total > this.limit &&
+                        h("bonus-pagination-nav", { offset: this.offset, limit: this.limit, "secondary-arrows-active": true, "table-id": this.tableId, total: this.total }))]);
+    }
+    handleDataConfigChange() {
+        this.loadData().catch(console.error);
+    }
+    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.loadData().catch(console.error);
+    }
+    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() {
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.gameObservers.forEach(obs => obs.disconnect());
+        this.gameObservers.clear();
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "offset": ["loadData"],
+        "limit": ["loadData"],
+        "language": ["loadData"],
+        "session": ["loadData", "handleDataConfigChange"],
+        "endpoint": ["loadData", "handleDataConfigChange"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+BonusElevatePowerups.style = BonusElevatePowerupsStyle0;
+
+export { BonusElevatePowerups as B };

package/dist/esm/bonus-elevate-powerups.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-c7067e6d.js';
+export { s as setNonce } from './index-c7067e6d.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-elevate-powerups_5",[[1,"bonus-elevate-powerups",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"endpoint":[513],"session":[513],"pageSize":[514,"page-size"],"isLoading":[32],"powerups":[32],"offset":[32],"limit":[32],"total":[32]},[[8,"reloadPageByType","onReloadPageByType"]],{"offset":["loadData"],"limit":["loadData"],"language":["loadData"],"session":["loadData","handleDataConfigChange"],"endpoint":["loadData","handleDataConfigChange"],"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,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]],[0,"time-count",{"expireTime":[1,"expire-time"],"displayTime":[32]},null,{"expireTime":["startTimeChanged"]}],[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);
+});