@everymatrix/bonus-elevate-shop-item 1.94.52 → 1.94.54

package/dist/esm/bonus-elevate-shop-assets-slider_5.entry.js

@@ -0,0 +1,910 @@
+import { r as registerInstance, h, g as getElement, c as createEvent, F as Fragment, H as Host } from './index-fca048d8.js';
+
+const BonusElevateShopAssetsSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xDown = null;
+        this.yDown = null;
+        this.orientationChangeHandler = () => {
+            setTimeout(() => {
+                this.recalculateItemsPerPage();
+            }, 10);
+        };
+        this.resizeHandler = () => {
+            this.recalculateItemsPerPage();
+        };
+        this.showSliderDots = false;
+        this.showSliderArrows = true;
+        this.itemsPerPage = 1;
+        this.sliderItems = [];
+        this.activeIndex = 0;
+    }
+    setActive(index) {
+        var _a;
+        const maxLength = (_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length;
+        if (index >= 0) {
+            if (index >= maxLength - 1) {
+                this.activeIndex = maxLength - 1;
+            }
+            else {
+                this.activeIndex = index;
+            }
+        }
+        else {
+            this.activeIndex = 0;
+        }
+    }
+    move(direction) {
+        this.setActive(this.activeIndex + direction);
+    }
+    goTo(index) {
+        let diff = this.activeIndex - index;
+        if (diff > 0) {
+            for (let i = 0; i < diff; i++) {
+                this.move(-1);
+            }
+        }
+        else {
+            for (let i = 0; i > diff; i--) {
+                this.move(1);
+            }
+        }
+    }
+    handleTouchStart(evt) {
+        const firstTouch = this.getTouches(evt)[0];
+        this.xDown = firstTouch.clientX;
+        this.yDown = firstTouch.clientY;
+    }
+    getTouches(evt) {
+        return evt.touches || evt.originalEvent.touches;
+    }
+    handleTouchMove(evt) {
+        if (!this.xDown || !this.yDown)
+            return;
+        let xUp = evt.touches[0].clientX;
+        let yUp = evt.touches[0].clientY;
+        let xDiff = this.xDown - xUp;
+        let yDiff = this.yDown - yUp;
+        if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            if (xDiff > 0) {
+                this.move(1);
+            }
+            else {
+                this.move(-1);
+            }
+        }
+        this.xDown = null;
+        this.yDown = null;
+    }
+    ;
+    recalculateItemsPerPage() {
+        if (!this.sliderItemsElement)
+            return;
+        this.itemElementWidth = this.sliderItemsElement.clientWidth;
+        this.sliderItemsElementWidth = (this.sliderItems.length - 1) * this.itemElementWidth;
+    }
+    ;
+    renderDots() {
+        var _a;
+        const dots = [];
+        for (let index = 0; index < ((_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length) / this.itemsPerPage; index++) {
+            dots.push(h("li", { class: index == this.activeIndex ? 'active' : 'default', onClick: () => { this.goTo(index); this.setActive(index); } }));
+        }
+        return dots;
+    }
+    componentDidRender() {
+        this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
+        this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
+        this.recalculateItemsPerPage();
+    }
+    componentDidUpdate() {
+        this.recalculateItemsPerPage();
+    }
+    connectedCallback() {
+        window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('touchstart', this.handleTouchStart);
+        this.el.removeEventListener('touchmove', this.handleTouchMove);
+        window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+        window.removeEventListener('resize', this.resizeHandler);
+    }
+    render() {
+        var _a;
+        const styles = {
+            transform: `translate(${(this.sliderItemsElementWidth / (((_a = this.sliderItems) === null || _a === void 0 ? void 0 : _a.length) - 1) * this.activeIndex) * -1}px, 0px)`
+        };
+        const itemStyle = {
+            width: `${this.itemElementWidth / this.itemsPerPage}px`
+        };
+        return h("div", { key: '740222cee57f5759854860f015dd900c1cb66f80', class: "SliderWrapper" }, h("div", { key: '6d8971425bc1fc42bc4e64331b0c5f21d4ed1c40', class: 'MainContent ' }, this.showSliderArrows &&
+            h("div", { key: '1db77bb5cd7dfb6d5e06a4f42a33ff435f9eb224', class: `SliderNavButton LeftArrow ${this.activeIndex === 0 ? 'DisabledArrow ' : ''} ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}`, onClick: () => this.move(-1) }, h("svg", { key: 'e406abe6d9d44ab3809322d2f0699ea3ee372b0f', fill: "none", stroke: "var(--emw--color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a8ee39ea455a06058466e03755582fbd07391514', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("div", { key: 'a2681048af708d96aa6886db7b6b94639a650a26', class: 'ItemsWrapper', ref: (el) => this.sliderItemsElement = el }, h("div", { key: 'be1c762012144756bda71a46302dfe0954bc6add', class: 'Items AssetsItems', style: styles }, this.sliderItems.map((assetUrl) => h("img", { class: `img${this.itemsPerPage}`, alt: 'Gift Thumbnails', style: itemStyle, src: assetUrl })))), this.showSliderArrows &&
+            h("div", { key: '927367a3bbc674cc953eccc3359639381423d0a4', class: `SliderNavButton RightArrow  ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}
+                      ${(this.activeIndex === (this.sliderItems.length - 1) || this.itemsPerPage == this.sliderItems.length) ? 'DisabledArrow' : ''}`, onClick: () => this.move(1) }, h("svg", { key: 'd84e6e3011f8609f1ded47098bb28333f352f430', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f05768932ee5e8fb74b6b1016612320d0e4ed737', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))), this.showSliderDots && this.sliderItems.length > 1 &&
+            h("div", { key: 'a08098a90c717ccceda93cd741cb65521a83df9b', class: "DotsWrapper" }, h("ul", { key: '8c873c229c603b4aca57e277f74cdf3d2192c01b', class: "Dots" }, this.renderDots())));
+    }
+    get el() { return getElement(this); }
+};
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        coins: 'Coins',
+        noGiftPresentation: 'No description',
+        redeemGift: 'Redeem Gift',
+        noDataFound: 'No data found',
+        error4003: 'Invalid Session',
+        redeemFailed: 'Failed to redeem',
+        back: 'Back',
+        games: 'Games'
+    },
+    tr: {
+        coins: 'Coin',
+        noGiftPresentation: 'Açıklama yok',
+        redeemGift: 'Hediye Al',
+        noDataFound: 'Veri bulunamadı',
+        error4003: 'Geçersiz Oturum',
+        redeemFailed: 'Kullanım başarısız',
+        back: 'Geri',
+    },
+    ro: {
+        coins: 'Coins',
+        noGiftPresentation: 'No description',
+        redeemGift: 'Redeem Gift',
+        noDataFound: 'No data found',
+        error4003: 'Invalid Session',
+        redeemFailed: 'Failed to redeem',
+        back: 'Back',
+    },
+    fr: {
+        coins: 'Coins',
+        noGiftPresentation: 'No description',
+        redeemGift: 'Redeem Gift',
+        noDataFound: 'No data found',
+        error4003: 'Invalid Session',
+        redeemFailed: 'Failed to redeem',
+        back: 'Back',
+    },
+    ar: {
+        coins: 'Coins',
+        noGiftPresentation: 'No description',
+        redeemGift: 'Redeem Gift',
+        noDataFound: 'No data found',
+        error4003: 'Invalid Session',
+        redeemFailed: 'Failed to redeem',
+        back: 'Back',
+    },
+    hu: {
+        coins: 'Coins',
+        noGiftPresentation: 'No description',
+        redeemGift: 'Redeem Gift',
+        noDataFound: 'No data found',
+        error4003: 'Invalid Session',
+        redeemFailed: 'Failed to redeem',
+        back: 'Back',
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang ? customLang : DEFAULT_LANGUAGE;
+    return TRANSLATIONS[lang][key] || TRANSLATIONS[DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (url) => {
+    // fetch url, get the data, replace the TRANSLATIONS content
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                TRANSLATIONS[item] = TRANSLATIONS[item] || {};
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        }).catch((err) => {
+            console.error("Failed to load translations:", err);
+            resolve(false);
+        });
+    });
+};
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const getDevice = () => {
+    let userAgent = window.navigator.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';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};
+
+const bonusElevateShopItemCss = ":host{display:block;--game-amount-per-line:6}.ElevateDetails{display:flex;flex-direction:row;padding:10px;width:calc(100% - 20px);}.ElevateDetails .RedeemError{display:none}.ElevateDetails .Error{color:var(--emw--color-error, #FD2839)}.ElevateDetails .Row{flex-direction:row;display:flex}.ElevateDetails .Col{flex-direction:column;display:flex}.ElevateDetails .Details{padding:20px}.ElevateDetails .ThumbnailRow{display:flex;flex-direction:column;justify-content:space-between;min-width:268px;max-width:398px}.ElevateDetails .ThumbnailRow .BackButton{width:100px;height:20px;padding:5px;background:white;box-shadow:0px 4px 40px 0px rgba(138, 149, 158, 0.2);margin:10px 0 10px;cursor:pointer;animation-timing-function:ease-out;animation-duration:300ms;transition-property:all;border:1px solid #e4e6e8;border-radius:5px;text-align:center}.ElevateDetails .ThumbnailRow .BackButton:hover{background:rgb(227, 222, 222)}.ElevateDetails .ThumbnailRow .Thumbnails{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .ShopItemDetail{flex-grow:1;min-width:300px;display:flex;flex-direction:column;justify-content:space-between}.ElevateDetails .GiftPoints .Points{font-size:21px}.ElevateDetails .GiftPoints .PointsLabel{font-size:12px;color:var(--emw--color-gray-300, rgb(78, 90, 55));font-weight:400;line-height:29px;letter-spacing:0.04em;text-align:left}.ElevateDetails .RedeemButton{width:150px;padding:5px 0px;border:2px solid var(--emw--button-border-color, rgba(8, 59, 23, 0.1098039216));text-align:center;color:var(--emw--button-typography, var(--emw--color-white, #FFFFFF));font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-bold, 700);line-height:var(--emw--font-size-medium, 14px);text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px)}.ElevateDetails .RedeemButton.active{background:var(--emw--color-primary, #18CE51)}.ElevateDetails .RedeemButton.active:hover{background:var(--mmw--color-main-button-hover, #24B24E)}.ElevateDetails .RedeemButton.deactive,.ElevateDetails .RedeemButton.disabled{background:var(--mmw--color-disabled, rgba(153, 153, 153, 0.5019607843))}.ElevateDetails .SliderWrapper{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .SliderWrapper .MainContent{display:flex;flex-direction:row;justify-content:space-around}.ElevateDetails .SliderWrapper .MainContent .LeftArrow,.ElevateDetails .SliderWrapper .MainContent .RightArrow{width:20px}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper{overflow:hidden;display:inline-flex;width:calc(100% - 40px);flex-direction:column}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper .Items{display:inline-flex;transition:transform 0.4s ease-in-out;transform:translateX(0px);margin:auto}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img2{width:50%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img3{width:30%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img,.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img1{max-width:100%;background:rgb(239, 239, 239);border:1px solid rgb(239, 239, 239);border-radius:18px;border:1px;margin:10px 0 10px}.ElevateDetails .SliderWrapper .DotsWrapper{width:100%;margin:0 auto;height:30px}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots{display:flex;justify-content:center;padding:0}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li{height:10px;width:10px;background:#ccc;border-radius:50%;margin-left:3px;margin-right:3px;list-style:none;cursor:pointer}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li:hover{background:#bbb}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.active{border:solid 1px var(--emw--color-secondary, #FD2839);background:var(--emw--color-secondary, #FD2839)}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.default{border:solid 1px var(--emw--color-secondary, #FD2839);background-color:#FFF}.ElevateDetails .SliderNavButton{border:0px;width:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.ElevateDetails .SliderNavButton.HiddenArrow{visibility:hidden}.ElevateDetails .SliderNavButton svg{width:20px;stroke:var(--emw--color-secondary, #FD2839)}.ElevateDetails .DisabledArrow svg{opacity:0.2;stroke:var(--emw--color-secondary, #FD2839);pointer-events:none}.GamesContent{margin:20px;padding:15px;min-height:500px;flex:1;gap:12px;display:flex;flex-direction:column;border-radius:8px;border:2px solid var(--emw--color-powup-light-green-0D, rgba(188, 252, 177, 0.0509803922))}.GamesContent .GamesTitle{display:flex;flex-direction:row}.GamesContent .GamesTitle .Title2{text-transform:capitalize}.GamesContent .GamesTitle .GamesAmount{opacity:0.8}.GamesContent .GameTitleTip{color:var(--emw--color-powup-gray-green, #C8D6CE);font-size:0.8rem}.GamesContent .GamesList{display:flex;justify-content:center;width:100%;max-height:300px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--emw--background-gray-color, gray) transparent}.GamesContent .GamesList::-webkit-scrollbar-track{background-color:transparent;border-radius:5px}.GamesContent .GamesList .Games{width:100%;padding:0;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:calc(30px / (var(--game-amount-per-line) - 1))}.GamesContent .GamesList .Games .Game{width:calc((100% - 30px) / var(--game-amount-per-line));cursor:pointer;position:relative}.GamesContent .GamesList .Games .Game .GameMask{transition:opacity;transition-duration:0.2s;opacity:0;position:absolute;width:70%;height:100%}.GamesContent .GamesList .Games .Game:hover .mask-filter{opacity:1}.GamesContent .GamesList .Games .Game:hover img{opacity:0.4;filter:blur(1.5px)}.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}.GamesContent .GamesList .Games .Game:hover .GameMask .PlayBtn{border:2px solid var(--emw--color-powup-gray, #f0f0f0);padding:5px 3px;border-radius:3px}";
+const BonusElevateShopItemStyle0 = bonusElevateShopItemCss;
+
+const BonusElevateShopItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.redeemGiftButton = createEvent(this, "redeemGiftButton", 7);
+        this.bindedHandler = this.handleMessage.bind(this);
+        this.deviceType = getDevicePlatform();
+        this.powerUpGameSearchConditions = {
+            expand: "games",
+            fields: "powerUpID,games(id,gameId,slug,name,thumbnail)"
+        };
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.itemId = undefined;
+        this.elevateGift = undefined;
+        this.session = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.showSliderDots = false;
+        this.showSliderArrows = true;
+        this.isGiftNotFound = false;
+        this.redeemErrorMsg = '';
+        this.isRedeeming = false;
+        this.powerUpGames = undefined;
+        this.isLoadingGames = false;
+    }
+    redeemGiftConfirm() {
+        if (this.isRedeeming || this.elevateGift.available != 'true') {
+            return;
+        }
+        window.postMessage({ type: 'BEERedeemConfirm', shopItem: this.elevateGift }, window.location.href);
+    }
+    handleMessage(message) {
+        if (message.data && message.data.type === "bee-redeem-confirmed" &&
+            message.data.id == this.elevateGift.id) {
+            this.redeemGift();
+        }
+    }
+    onBackClicked() {
+        window.postMessage({ type: 'OnGiftDetailsBackButtonClicked' }, window.location.href);
+    }
+    redeemGift() {
+        if (this.elevateGift.available.toLowerCase() === 'false' || this.isRedeeming) {
+            return;
+        }
+        let url = new URL(`${this.endpoint}/v1/elevate/redeem`);
+        let claimGiftOptions = {
+            method: 'PUT',
+            headers: {
+                'x-SessionId': this.session,
+                'Content-Type': 'application/json-patch+json',
+            },
+            body: JSON.stringify({ giftId: this.elevateGift.id }),
+        };
+        this.redeemErrorMsg = '';
+        this.isRedeeming = true;
+        fetch(url.toString(), claimGiftOptions)
+            .then((res) => res.json())
+            .then((res) => {
+            if (res.success) {
+                this.redeemGiftButton.emit();
+                window.postMessage({ type: 'BEEGiftRedeem', itemId: this.elevateGift.id }, window.location.href);
+            }
+            else {
+                let translatedError = translate(`error${res.errorCode}`, this.language);
+                this.redeemErrorMsg = translatedError ? translatedError : translate('redeemFailed', this.language);
+                window.postMessage({ type: 'BEEGiftRedeemFailed', itemId: this.elevateGift.id, res }, window.location.href);
+            }
+        })
+            .catch((err) => {
+            window.postMessage({ type: 'BEEGiftClaimFailed', itemId: this.elevateGift.id, err }, window.location.href);
+        }).finally(() => {
+            this.isRedeeming = false;
+        });
+    }
+    async loadElevateGift() {
+        let url = new URL(`${this.endpoint}/v1/elevate/shop?language=${this.language}&filter=id=${this.itemId}`);
+        let options = {
+            headers: {
+                'Content-Type': 'application/json',
+                'x-SessionId': this.session,
+            },
+            method: 'GET',
+        };
+        await new Promise((resolve) => {
+            fetch(url.href, options)
+                .then((res) => res.json())
+                .then((data) => {
+                let filteredGifts = data.data;
+                if (filteredGifts && filteredGifts.length == 1) {
+                    this.elevateGift = filteredGifts[0];
+                    if (this.elevateGift.type === 'powerUp' && this.elevateGift.powerUpID) {
+                        this.loadMoreGames();
+                    }
+                    this.isGiftNotFound = false;
+                }
+                else {
+                    this.isGiftNotFound = true;
+                }
+                resolve(true);
+            });
+        });
+    }
+    async loadMoreGames() {
+        var _a, _b, _c, _d, _e;
+        if (this.isLoadingGames || (((_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.total) > 0 && ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.items.length) >= ((_c = this.powerUpGames) === null || _c === void 0 ? void 0 : _c.total))) {
+            return;
+        }
+        this.isLoadingGames = true;
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups/available?pagination=games(limit=20,offset=${((_d = this.powerUpGames) === null || _d === void 0 ? void 0 : _d.items.length) || 0})`);
+            const options = {
+                headers: { 'x-SessionId': this.session },
+            };
+            url.searchParams.append('filter', `id=${this.elevateGift.powerUpID}`);
+            Object.entries(this.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();
+            const fetchedPowerUp = data === null || data === void 0 ? void 0 : data[0];
+            if ((_e = fetchedPowerUp === null || fetchedPowerUp === void 0 ? void 0 : fetchedPowerUp.games) === null || _e === void 0 ? void 0 : _e.items) {
+                if (!this.powerUpGames) {
+                    this.powerUpGames = fetchedPowerUp.games;
+                }
+                else {
+                    this.powerUpGames.items = [...this.powerUpGames.items, ...fetchedPowerUp.games.items];
+                }
+                this.powerUpGames = Object.assign({}, this.powerUpGames);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load more games:', error);
+        }
+        finally {
+            this.isLoadingGames = false;
+        }
+    }
+    initializeGamesObserver() {
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+        this.loadMoreGamesObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames();
+                }
+            });
+        });
+        if (this.lastGameElement) {
+            this.loadMoreGamesObserver.observe(this.lastGameElement);
+        }
+    }
+    onGameClick(game) {
+        window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } });
+    }
+    disconnectedCallback() {
+        window.removeEventListener('message', this.bindedHandler, false);
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+    }
+    componentDidLoad() {
+        window.addEventListener('message', this.bindedHandler, false);
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        if (this.elevateGift) {
+            this.isGiftNotFound = false;
+        }
+        else {
+            await this.loadElevateGift();
+        }
+    }
+    componentDidUpdate() {
+        var _a, _b;
+        if (((_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items.length) < ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.total)) {
+            this.initializeGamesObserver();
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: '02194284778bc18ed94c17ee0c4a682da0c9935e' }, h("general-styling-wrapper", { key: '3109c90669d039df0aa7caf8dac48ca7576b1db2', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, mbSource: this.mbSource }), h("div", { key: 'aa8fa9853ff3f0c50cf055f622640f187138531b', class: 'ElevateDetails' }, this.isGiftNotFound && (h(Fragment, { key: '1ff8d0e249663ea5f2ee0de06d406f962f973493' }, h("div", { key: '5575275bd24e74a530ffd2b8b17045f7b0daed7c', class: "Row ThumbnailRow" }, h("div", { key: '501b117a2c493750deb056ecf8f8614351c0fac2', class: "BackButton", onClick: () => {
+                this.onBackClicked();
+            } }, h("span", { key: '556a1ece3c4b8398277ad996ed58d0d84db0f7b4', class: "BackArrow", innerHTML: "<" }), h("span", { key: '43f9a46fe32710cc7d05e953475088f049999791', class: "BackTxt" }, " ", translate('back', this.language), " "))), h("div", { key: 'ba220234e040ed863b3bbc1960b54ced43fe4303', class: "Thumnails GiftNotFound" }, translate('noDataFound', this.language), "."))), this.elevateGift && h(Fragment, { key: 'e1f7f2dfd7d80da3fafdc5edd8d8686522509893' }, h("div", { key: '4a8f3ee47e7ef7bd87eafa5ebdd3346b523f13fd', class: "ThumbnailRow" }, h("div", { key: 'd8dcab9b4b3d4963cd4ef7904caca9e1df3a6e88', class: 'Row' }, h("div", { key: '6368dc35f95a2202cc38c5dc05bdf6f6d83fce55', class: "BackButton", onClick: () => { this.onBackClicked(); } }, h("span", { key: '64f67312085b9216b42cb61a9ee7ea780058856d', class: "BackArrow", innerHTML: "<" }), h("span", { key: '4e5d8bdec62fe9e32cb839e3904113449e4d4c0c', class: "BackTxt" }, " ", translate('back', this.language), " ")), h("bonus-elevate-shop-assets-slider", { key: '0b9e8164653ec6a7c8b9d1d260ed44ca641f0726', class: 'Thumbnails', itemsPerPage: 1, sliderItems: this.elevateGift.presentation.assets, showSliderDots: this.showSliderDots })), h("div", { key: 'd911392a0ce5afac58cdf26046d80cfdaf7c1793', class: 'Col Details' }, h("h3", { key: '273ff2eb682767a5429dc99642b1c166921cb1dc', class: "GiftName" }, this.elevateGift.presentation.displayName || this.elevateGift.displayName), h("div", { key: '459bcb83df4dc907bb7cc9757a86c88b39ca4905', class: "GiftPoints" }, h("span", { key: '3648c21ea2133c6a3050f2417449ab046e51c04b', class: "Points" }, this.elevateGift.points, " "), h("span", { key: '8b6665da119f9dd777644592cc2815fc77dffda1', class: " PointsLabel" }, translate('coins', this.language))))), h("div", { key: '6e9a28dd26368897ddfd76032ce1e3882a886a5b', class: 'ShopItemDetail Details' }, h("div", { key: 'd2844066fe51e4b3d43689406879e1306d494f0a', class: "GiftPresentation" }, h("p", { key: '12f8bce3abf0df34657392e95aa8ddfb42d4c088' }, this.elevateGift.presentation.description ? this.elevateGift.presentation.description : translate('noGiftPresentation', this.language))), h("div", { key: '2b0cc39b8e53336355f1f5d0576a59bfd9859abf', class: 'BottomDetail' }, h("div", { key: '0eabb8f4ecb8236d78665110c835a0cf2689e864', class: `RedeemButton ${this.elevateGift.available === 'false' || this.isRedeeming ? 'Disabled deactive' : ' active '}
+                  ${this.deviceType == 'dk' ? 'DkButton' : ''}`, onClick: this.redeemGiftConfirm.bind(this) }, translate('redeemGift', this.language)), h("span", { key: '9773077b08f77bc2940519070053aee362f34e2a', class: 'RedeemError Error' }, " ", this.redeemErrorMsg, " "))))), ((_a = this.elevateGift) === null || _a === void 0 ? void 0 : _a.type) === 'powerUp' && this.powerUpGames && h("div", { key: 'ec880bb1c11a7fb485f4d7e80dce6e250f2b4e19', class: 'GamesContent' }, h("div", { key: 'a6dc572f4f5b6732ed6d29fad4c76fbf0415ca68', class: 'GamesTitle' }, h("span", { key: '2904186a96290683dbbcd06cfca99f48c616f6f1', class: 'Title2' }, " ", translate('games', this.language)), h("span", { key: '9c7f5fa7f0441721bc32aab10b07c3f7f2de91c4', class: 'GamesAmount' }, " ( ", ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.total) || 0, " ) ")), h("div", { key: '4f465d62df13e07bf2d946416ed70cdd52591cbb', class: 'GamesList' }, h("div", { key: 'd23fc7b21125dd6467ad56cbd7d2ce03a579d689', class: 'Games' }, (_c = this.powerUpGames) === null || _c === void 0 ? void 0 : _c.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 }), h("div", { class: 'GameMask', onClick: this.onGameClick.bind(this, g) }, h("span", { class: 'PlayBtn' }, "Start Now!")));
+        })), this.isLoadingGames && h("p", { key: '89e860b88abc15beda61b9989e5a82a9f445aadd' }, "Loading more games...")))));
+    }
+};
+BonusElevateShopItem.style = BonusElevateShopItemStyle0;
+
+const mergeTranslations = (url, target) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                target[item] = target[item] || {};
+                Object.keys(data[item]).forEach((key) => {
+                    //if there is no key in target, do nothing
+                    if (!target['en'][key]) {
+                        return;
+                    }
+                    const defaultTranslation = target['en'][key];
+                    if (typeof data[item][key] === 'object') {
+                        // if the key is not in target, then take from en
+                        target[item][key] = target[item][key] || Object.assign({}, defaultTranslation);
+                        Object.keys(data[item][key]).forEach((subKey) => {
+                            target[item][key][subKey] = data[item][key][subKey];
+                        });
+                    }
+                    else {
+                        target[item][key] = data[item][key] || Object.assign({}, defaultTranslation);
+                    }
+                });
+            });
+            resolve(true);
+        })
+            .catch(err => {
+            console.error("Failed to load translations:", err);
+            resolve(false);
+        });
+    });
+};
+
+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 generalStylingWrapperCss = ":host{display:block}";
+const GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
+
+const GeneralStylingWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingAppends = false;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.translationUrl = '';
+        this.targetTranslations = undefined;
+    }
+    componentDidLoad() {
+        if (this.el) {
+            if (this.mbSource)
+                setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.el, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.el, this.clientStylingUrl);
+            this.stylingAppends = true;
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.el, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.el, this.clientStylingUrl);
+        }
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends) {
+            if (this.clientStyling)
+                setClientStyling(this.el, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.el, this.clientStylingUrl);
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    async componentWillLoad() {
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
+            promises.push(translationPromise);
+        }
+        return await Promise.all(promises);
+    }
+    render() {
+        return (h("div", { key: 'e660ceb69f5e848c788c3924fc814c0fa7a777a2', class: "StyleShell" }, h("slot", { key: '35014b6c0c32532af11e6a629ba9b13942504d21', name: "mainContent" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "mbSource": ["handleMbSourceChange"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"]
+    }; }
+};
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
+
+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 { BonusElevateShopAssetsSlider as bonus_elevate_shop_assets_slider, BonusElevateShopItem as bonus_elevate_shop_item, GeneralStylingWrapper as general_styling_wrapper, UiImage as ui_image, UiSkeleton as ui_skeleton };