@everymatrix/bonus-powerups-ingame-detail 0.0.1

package/dist/cjs/bonus-powerups-ingame-detail.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-956ad213.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('bonus-powerups-ingame-detail.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["bonus-powerups-ingame-detail_5.cjs",[[1,"bonus-powerups-ingame-detail",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"session":[513],"pid":[513],"powerupId":[514,"powerup-id"],"isPowering":[516,"is-powering"],"powerUp":[32],"powerUpGames":[32],"isLoading":[32],"isLoadingGames":[32],"limit":[32]},[[0,"showPowerupDetails","showPowerupDetailsHandler"]],{"session":["loadPowerUpById"],"endpoint":["loadPowerUpById"],"language":["loadPowerUpById"],"pid":["loadPowerUpById"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"translationUrl":["handleNewTranslations"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"smart-loader"],[0,"time-count-detail",{"expireTime":[1,"expire-time"],"language":[1],"pid":[520],"displayTime":[32],"isExpireInDay1":[32],"timeLeft":[32]},null,{"expireTime":["startTimeChanged"],"timeLeft":["timeLeftChanged"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/bonus-powerups-ingame-detail_5.cjs.entry.js

@@ -0,0 +1,334 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const bonusPowerupsIngameDetail = require('./bonus-powerups-ingame-detail-33f5b380.js');
+const index = require('./index-956ad213.js');
+
+const smartLoaderCss = "@keyframes smart-animate1{0%{opacity:0.15;transform:translateX(0px)}35%{opacity:1;transform:translateX(36px)}75%{opacity:1;transform:translateX(0px)}100%{opacity:0.15;transform:translateX(0px)}}@keyframes smart-animate2{0%{opacity:1}35%{opacity:0.15}75%{opacity:0.5}100%{opacity:1}}@keyframes smart-animate3{0%{opacity:0.5;transform:translateX(0px)}35%{opacity:0.15;transform:translateX(-36px)}75%{opacity:0.15;transform:translateX(0px)}100%{opacity:0.5;transform:translateX(0px)}}.smart-loader{margin:50px auto;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100px;gap:10px}.smart-loader .smart-item{width:3px;height:20px;opacity:0.15;animation-delay:200ms;animation-duration:1000ms;animation-timing-function:ease-out;animation-fill-mode:forwards;padding:1px;margin:5px 0;background:#00FA5A;border-radius:4px;animation-iteration-count:infinite;animation-direction:normal}.smart-loader .smart-item:nth-child(1){animation-name:smart-animate1}.smart-loader .smart-item:nth-child(2){animation-name:smart-animate2;height:36px}.smart-loader .smart-item:nth-child(3){animation-name:smart-animate3}";
+const SmartLoaderStyle0 = smartLoaderCss;
+
+const SmartLoader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h("div", { key: 'b7d81127872a349887c76133eb8a7bcd3ab8d29e', class: 'smart-loader' }, index.h("div", { key: '21dfb7d7fe1fd3e0660603bc2d2464e057328228', class: "smart-item" }), index.h("div", { key: 'fa22f3e3e5283b27fe3256669a0d67a2f85e135a', class: "smart-item" }), index.h("div", { key: '9fc3be4eb58ccebfa1803b12bf526e4cd2c9e013', class: "smart-item" }));
+    }
+};
+SmartLoader.style = SmartLoaderStyle0;
+
+const TimeCount = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.timeCountDownEvent = index.createEvent(this, "powerupTimeCountDown", 7);
+        this.expireTime = undefined;
+        this.language = 'en';
+        this.pid = undefined;
+        this.displayTime = undefined;
+        this.isExpireInDay1 = false;
+        this.timeLeft = undefined;
+    }
+    componentWillLoad() {
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    startTimeChanged() {
+        // Reset the timer and update the display when the input time changes
+        clearInterval(this.timer);
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    timeLeftChanged() {
+        this.timeCountDownEvent.emit({ type: 'powerupTimeCountDown', timeLeft: this.timeLeft, pid: this.pid });
+    }
+    updateDisplayTime() {
+        const now = bonusPowerupsIngameDetail.hooks();
+        const start = bonusPowerupsIngameDetail.hooks(this.expireTime);
+        if (!start.isValid()) {
+            this.displayTime = 'Invalid date';
+            clearInterval(this.timer);
+            return;
+        }
+        const duration = bonusPowerupsIngameDetail.hooks.duration(start.diff(now));
+        this.isExpireInDay1 = true; //duration.asDays() > 1
+        this.timeLeft = duration.asMinutes();
+        // If the time has already passed
+        if (duration.asMilliseconds() <= 0) {
+            this.displayTime = '00:00:00';
+            clearInterval(this.timer);
+            this.timeCountDownEvent.emit({ type: 'powerupTimeCountDown', timeLeft: 0, pid: this.pid });
+            return;
+        }
+        const hours = Math.floor(duration.asHours());
+        if (hours >= 48) {
+            this.displayTime = `${Math.floor(duration.asDays())} ${bonusPowerupsIngameDetail.translate('days', this.language)}`;
+        }
+        else if (hours >= 24) {
+            this.displayTime = '1 day';
+        }
+        else {
+            const h = hours;
+            const m = duration.minutes();
+            const s = duration.seconds();
+            this.displayTime = [h, m, s].map(val => String(val).padStart(2, '0')).join(':');
+        }
+    }
+    render() {
+        return [
+            this.isExpireInDay1 &&
+                index.h("span", { key: '832c9d6dce83414d8d0fac874c2dfd7c0d0742bd', class: 'Label' }, bonusPowerupsIngameDetail.translate('expiresIn', this.language), " "),
+            index.h("span", { key: '3f68f1ddc0f710cded68ba52305f44fc95603e1d', class: 'TimeCountDown' }, this.displayTime)
+        ];
+    }
+    static get watchers() { return {
+        "expireTime": ["startTimeChanged"],
+        "timeLeft": ["timeLeftChanged"]
+    }; }
+};
+
+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) {
+        index.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 (index.h(index.Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (index.h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.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 index.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) {
+        index.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 (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return index.h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.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 (index.h(index.Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, index.h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.bonus_powerups_ingame_detail = bonusPowerupsIngameDetail.BonusPowerupsIngameDetail;
+exports.smart_loader = SmartLoader;
+exports.time_count_detail = TimeCount;
+exports.ui_image = UiImage;
+exports.ui_skeleton = UiSkeleton;