@everymatrix/casino-challenges-list 0.1.2 → 1.77.3

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

@@ -1,403 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-72daee0c.js';
-import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-list-f8cb576c.js';
-export { C as casino_challenges_list } from './casino-challenges-list-f8cb576c.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'
-    },
-    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'
-    },
-    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'
-    },
-    ar: {
-        totalLevels: 'إجمالي المستويات:',
-        level1: 'المستوى 1:',
-        get: 'احصل على:',
-        endsIn: 'ينتهي في',
-        expired: 'منتهي الصلاحية',
-        viewDetails: 'عرض التفاصيل',
-        placeBetsOf: 'قم بوضع رهانات بقيمة',
-        place: 'ضع',
-        bet: 'رهان',
-        bets: 'رهانات'
-    },
-    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'
-    }
-};
-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);
-        }
-    }
-};
-
-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.defaultLanguage = 'en';
-        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() {
-        const level1 = this.challenge.ChallengeLevels[0];
-        const target = level1.Target;
-        const targetValue = target.TargetType === 0
-            ? `${translate('placeBetsOf', this.language)} ${target.Turnover}`
-            : target.TargetType === 1
-                ? `${translate('place', this.language)} ${target.Turnover} ${translate('bet', this.language)}`
-                : `${translate('place', this.language)} ${target.BetCount} ${translate('bets', this.language)}`;
-        const rewardValue = level1.Rewards.map((r) => r.RewardDescription).join(' + ');
-        return [
-            {
-                lable: translate('totalLevels', this.language),
-                value: this.challenge.ChallengeLevels.length
-            },
-            {
-                lable: translate('level1', this.language),
-                value: targetValue
-            },
-            {
-                lable: translate('get', this.language),
-                value: rewardValue
-            }
-        ];
-    }
-    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.ChallengeEndTime);
-    }
-    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() {
-        return (h("div", { key: 'ddbd3e0d20b4d75ed70120798c45d7c03715b7df', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '3ca0c4b6ad25b4f60077b894bf73c9686f67a677', class: "card" }, h("img", { key: '1712546c27e75e04bde5832c521038bfd418e57f', class: "card__image", src: this.challenge.ChallengePresentations[this.language].Url ||
-                this.challenge.ChallengePresentations[this.defaultLanguage].Url }), this.renderCardBadge(), h("div", { key: '238041db616391c2594bef46778649b8b6282097', class: "card__content" }, h("h1", { key: 'd377b99c7758460df8b1a6e8e39059959347430f', class: "card__title" }, this.challenge.ChallengePresentations[this.language].PresentationName ||
-            this.challenge.ChallengePresentations[this.defaultLanguage].PresentationName), this.infoItems.map((x, index) => this.renderInfoItem(x, index)), h("button", { key: 'b53707ce7881cbf16321e3d3728a0e769af6589a', class: "card__button" }, translate('viewDetails', this.language))))));
-    }
-    static get watchers() { return {
-        "clientStyling": ["handleClientStylingChange"],
-        "clientStylingUrl": ["handleClientStylingUrlChange"],
-        "mbSource": ["handleMbSourceChange"]
-    }; }
-};
-CasinoChallengeCard.style = CasinoChallengeCardStyle0;
-
-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, UiSkeleton as ui_skeleton };