@everymatrix/casino-challenges-container 0.0.1 → 0.0.2

package/dist/esm/casino-challenge-card_4.entry.js

@@ -0,0 +1,564 @@
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-c7b24115.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-container-b776a245.js';
+export { C as casino_challenges_container } from './casino-challenges-container-b776a245.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        totalLevels: 'Total levels:',
+        level1: 'Level 1:',
+        get: 'Get:',
+        endsIn: 'Ends In',
+        expired: 'Expired',
+        viewDetails: 'View details',
+        placeBetsOf: 'Place bets of',
+        place: 'Place',
+        bet: 'bet',
+        bets: 'bets',
+        minBet: 'min bet'
+    },
+    ro: {
+        totalLevels: 'Niveluri totale:',
+        level1: 'Nivel 1:',
+        get: 'Obține:',
+        endsIn: 'Se termină în',
+        expired: 'Expirat',
+        viewDetails: 'Vezi detalii',
+        placeBetsOf: 'Plasează pariuri de',
+        place: 'Plasare',
+        bet: 'pariu',
+        bets: 'pariuri',
+        minBet: 'pariu minim'
+    },
+    fr: {
+        totalLevels: 'Niveaux totaux :',
+        level1: 'Niveau 1 :',
+        get: 'Obtenir :',
+        endsIn: 'Se termine dans',
+        expired: 'Expiré',
+        viewDetails: 'Voir les détails',
+        placeBetsOf: 'Placez des paris de',
+        place: 'Placer',
+        bet: 'pari',
+        bets: 'paris',
+        minBet: 'mise minimale'
+    },
+    ar: {
+        totalLevels: 'إجمالي المستويات:',
+        level1: 'المستوى 1:',
+        get: 'احصل على:',
+        endsIn: 'ينتهي في',
+        expired: 'منتهي الصلاحية',
+        viewDetails: 'عرض التفاصيل',
+        placeBetsOf: 'قم بوضع رهانات بقيمة',
+        place: 'ضع',
+        bet: 'رهان',
+        bets: 'رهانات',
+        minBet: 'الحد الأدنى للرهان'
+    },
+    hr: {
+        totalLevels: 'Ukupno razina:',
+        level1: 'Razina 1:',
+        get: 'Dobiti:',
+        endsIn: 'Završava za',
+        expired: 'Isteklo',
+        viewDetails: 'Pogledaj detalje',
+        placeBetsOf: 'Postavite oklade od',
+        place: 'Postavi',
+        bet: 'kladnja',
+        bets: 'kladnje',
+        minBet: 'minimalna oklada'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+var EChallengeRecurrenceType;
+(function (EChallengeRecurrenceType) {
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Single"] = 0] = "Single";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Daily"] = 1] = "Daily";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Weekly"] = 2] = "Weekly";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Monthly"] = 3] = "Monthly";
+})(EChallengeRecurrenceType || (EChallengeRecurrenceType = {}));
+var EChallengeRewardType;
+(function (EChallengeRewardType) {
+    EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
+    EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
+})(EChallengeRewardType || (EChallengeRewardType = {}));
+var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Setup"] = 0] = "Setup";
+    EChallengeStatus[EChallengeStatus["Active"] = 1] = "Active";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
+})(EChallengeStatus || (EChallengeStatus = {}));
+var EChallengeTriggerType;
+(function (EChallengeTriggerType) {
+    EChallengeTriggerType[EChallengeTriggerType["GameLaunch"] = 0] = "GameLaunch";
+    EChallengeTriggerType[EChallengeTriggerType["Reward"] = 1] = "Reward";
+    EChallengeTriggerType[EChallengeTriggerType["Manual"] = 2] = "Manual";
+})(EChallengeTriggerType || (EChallengeTriggerType = {}));
+var EChallengeValidityType;
+(function (EChallengeValidityType) {
+    EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
+    EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
+})(EChallengeValidityType || (EChallengeValidityType = {}));
+
+function getTimeLeft(endTime) {
+    const now = new Date();
+    const end = new Date(endTime);
+    let diff = end.getTime() - now.getTime();
+    if (diff <= 0) {
+        return;
+    }
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    diff -= days * (1000 * 60 * 60 * 24);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= hours * (1000 * 60 * 60);
+    const minutes = Math.floor(diff / (1000 * 60));
+    diff -= minutes * (1000 * 60);
+    const seconds = Math.floor(diff / 1000);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${pad(days)} : ${pad(hours)} : ${pad(minutes)} : ${pad(seconds)}`;
+}
+
+const casinoChallengeCardCss = ".card {\n  width: 308px;\n  border-radius: 16px;\n  border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n  background-color: var(--emw--color-background, #141515);\n  box-sizing: border-box;\n  position: relative;\n}\n@container challenge-list (max-width: 576px) {\n  .card {\n    width: 100%;\n  }\n}\n.card:hover {\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n  cursor: pointer;\n}\n.card__image {\n  width: 100%;\n  height: 200px;\n  border-radius: 16px 16px 0 0;\n}\n@container challenge-list (max-width: 576px) {\n  .card__image {\n    height: 224px;\n  }\n}\n.card__title {\n  color: var(--emw--color-white, #FFFFFF);\n  font-size: var(--emw--font-size-medium, 16px);\n  margin: 0 0 10px;\n}\n.card__content {\n  padding: 20px;\n}\n.card__button {\n  margin-top: 20px;\n  width: 100%;\n  height: 34px;\n  background: transparent;\n  text-transform: uppercase;\n  border-radius: var(--emw--button-border-radius, 99px);\n  border: 2px solid var(--emw--button-border-color, #727672);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-secondary, #e9931e);\n}\n.card__button:hover {\n  border-color: var(--emw--color-secondary, #e9931e);\n  cursor: pointer;\n}\n.card__badge {\n  position: absolute;\n  background: white;\n  top: 6px;\n  right: 6px;\n  border-radius: 30px;\n  padding: 2px 12px;\n  line-height: 22px;\n  font-weight: var(--emw--font-weight-medium, 500);\n  font-size: var(--emw--font-size-x-small, 12px);\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n  backdrop-filter: blur(20px);\n}\n.card__badge span {\n  font-weight: var(--emw--font-weight-bold, 700);\n}\n\n.info-item {\n  line-height: 24px;\n  font-size: var(--emw--font-size-small, 14px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-primary, #1dbf51);\n}\n@container challenge-list (min-width: 576px) {\n  .info-item {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n  }\n}\n.info-item__label {\n  font-weight: var(--emw--font-weight-medium, 500);\n  margin-right: 3px;\n  color: var(--emw--color-gray-150, #C8D6CE);\n}\n.info-item__tooltip {\n  position: absolute;\n  line-height: 22px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  opacity: 1;\n  z-index: 200;\n  white-space: nowrap;\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-medium, 500);\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: var(--emw--color-background-secondary, #1B1C2B);\n}\n.info-item__tooltip::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid var(--emw--color-background-secondary, #1B1C2B);\n  width: 0;\n  height: 0;\n  z-index: 201;\n}";
+const CasinoChallengeCardStyle0 = casinoChallengeCardCss;
+
+const CasinoChallengeCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.timerExpired = createEvent(this, "timerExpired", 7);
+        this.calculateTargetValue = (level, currencySymbol) => {
+            var _a;
+            if (!level)
+                return '';
+            const minbet = ((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet)
+                ? `, ${translate('minBet', this.language)} ${currencySymbol + level.BetRange.MinBet}`
+                : '';
+            switch (level.LevelTargetType) {
+                case EChallengeLevelTargetType.Accumulative:
+                    return `${translate('placeBetsOf', this.language)} ${currencySymbol + level.DisplayCurrencyTargetTurnover + minbet}`;
+                case EChallengeLevelTargetType.SingleBet:
+                    return `${translate('place', this.language)} ${currencySymbol + level.TargetTurnover} ${translate('bet', this.language)}`;
+                case EChallengeLevelTargetType.MultipleOneBetSize:
+                    return `${translate('place', this.language)} ${level.TargetBetCount} ${translate('bets', this.language) + minbet}`;
+            }
+        };
+        this.onMouseEnterHandler = (index, el) => {
+            if (el.scrollWidth > el.clientWidth) {
+                this.tooltipIndex = index;
+            }
+        };
+        this.onMouseLeaveHandler = () => {
+            this.tooltipIndex = null;
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.challenge = undefined;
+        this.tooltipIndex = null;
+        this.timeLeft = undefined;
+    }
+    get infoItems() {
+        var _a, _b, _c, _d;
+        const level1 = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.OrderNumber === 0);
+        if (level1) {
+            const rewardValue = (_b = level1.Rewards) === null || _b === void 0 ? void 0 : _b.slice(0, 2).map((r) => r.RewardDescription).join(' + ');
+            return [
+                {
+                    lable: translate('totalLevels', this.language),
+                    value: (_c = this.challenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.length
+                },
+                {
+                    lable: translate('level1', this.language),
+                    value: this.calculateTargetValue(level1, (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.CurrencySymbol)
+                },
+                {
+                    lable: translate('get', this.language),
+                    value: rewardValue
+                }
+            ];
+        }
+        return [];
+    }
+    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`);
+        }
+    }
+    connectedCallback() {
+        this.timerId = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+        this.updateTime();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        if (this.stylingSubscription) {
+            this.stylingSubscription.unsubscribe();
+        }
+        clearInterval(this.timerId);
+    }
+    updateTime() {
+        var _a;
+        this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
+        if (!this.timeLeft && this.timerExpired) {
+            clearInterval(this.timerId);
+            this.timerExpired.emit(this.challenge.Id);
+        }
+    }
+    renderInfoItem(item, index) {
+        return (h("div", { class: "info-item", onMouseEnter: (e) => this.onMouseEnterHandler(index, e.currentTarget), onMouseLeave: this.onMouseLeaveHandler }, h("span", { class: "info-item__label" }, item.lable), item.value, this.tooltipIndex === index && h("div", { class: "info-item__tooltip" }, item.value)));
+    }
+    renderCardBadge() {
+        return (h("div", { class: "card__badge" }, this.timeLeft
+            ? [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft)]
+            : translate('expired', this.language)));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { key: '5df3a2d368e6057d1b47cf5d4766126406c4afc8', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'de708f82c0fbe5324419fafcb395f115c020d021', class: "card" }, h("img", { key: '209c1f05bb70c3182b4ff6211e7c9398999b30fc', class: "card__image", src: (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Url }), this.renderCardBadge(), h("div", { key: 'aa3a5f3eee8bdb7c2606bc8a232c441ff4a22006', class: "card__content" }, h("h1", { key: '524933e67d8eac476d678aee9f2643b6ac1449ff', class: "card__title" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.PresentationName), this.infoItems.map((x, index) => this.renderInfoItem(x, index)), h("button", { key: '52fec7d22602a2757c1a36238fb0b797f6bb4306', class: "card__button" }, translate('viewDetails', this.language))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+CasinoChallengeCard.style = CasinoChallengeCardStyle0;
+
+const casinoChallengesListCss = ".challenges-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 30px;\n  width: 100%;\n}\n\n.loader {\n  width: 308px;\n  border-radius: 16px;\n  border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n  background-color: var(--emw--color-background, #141515);\n  box-sizing: border-box;\n  position: relative;\n}\n@container challenge-list (max-width: 576px) {\n  .loader {\n    width: 100%;\n  }\n}\n.loader:hover {\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n  cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n  padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n  margin: 0;\n  height: 28px;\n  margin: 0 20px 20px 20px;\n  border-radius: var(--emw--button-border-radius, 99px);\n  width: auto;\n}\n.loader .Skeleton.Image {\n  border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n  margin: 20px 0;\n}";
+const CasinoChallengesListStyle0 = casinoChallengesListCss;
+
+const skeletons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const CasinoChallengeList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.loadMore = createEvent(this, "loadMore", 7);
+        this.timerExpired = createEvent(this, "timerExpired", 7);
+        this.setLastItemRef = (el) => {
+            if (this.lastItemRef && this.observer) {
+                this.observer.unobserve(this.lastItemRef);
+            }
+            this.lastItemRef = el;
+            if (el && this.observer && !this.loading) {
+                this.observer.observe(el);
+            }
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = undefined;
+        this.challenges = [];
+        this.loading = false;
+        this.hasMore = false;
+    }
+    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`);
+        }
+    }
+    setupObserver() {
+        if (!this.lastItemRef || this.loading || !this.hasMore)
+            return;
+        if (!this.observer) {
+            this.observer = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting && !this.loading && this.hasMore) {
+                    this.observer.unobserve(entry.target);
+                    this.loadMore.emit();
+                }
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
+            });
+        }
+        this.observer.disconnect();
+        this.observer.observe(this.lastItemRef);
+    }
+    componentDidRender() {
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    renderSkeletons() {
+        return skeletons.map((skeleton) => (h("div", { class: "loader", key: skeleton }, h("ui-skeleton", { structure: "image", height: "200px", "border-radius": "16px 16px 0 0" }), h("ui-skeleton", { class: "SkeletonRows", structure: "text", width: "220px", height: "16px", rows: "3" }), h("ui-skeleton", { class: "SkeletonButton", structure: "text", width: "100%" }))));
+    }
+    onTimerExpired(e) {
+        if (this.timerExpired) {
+            this.timerExpired.emit(e.detail);
+        }
+    }
+    render() {
+        return (h("div", { key: 'c2dc103d0aa9777b8b79bd8e787985a69f2e2457', ref: (el) => (this.stylingContainer = el), class: "challenges-list" }, this.challenges.map((challenge, index) => (h("div", { key: challenge.Id, ref: index === this.challenges.length - 1 ? this.setLastItemRef : null }, h("casino-challenge-card", { challenge: challenge, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, onTimerExpired: this.onTimerExpired })))), this.loading && this.renderSkeletons()));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+CasinoChallengeList.style = CasinoChallengesListStyle0;
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{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)}.Circle{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%}.Text{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)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{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)}.Image{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)}.Logo{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: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (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: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (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: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { CasinoChallengeCard as casino_challenge_card, CasinoChallengeList as casino_challenges_list, UiSkeleton as ui_skeleton };