@everymatrix/lottery-banner 0.0.16 → 0.0.18

package/dist/cjs/lottery-banner.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotteryBanner = require('./lottery-banner-73236552.js');
-require('./index-4511b749.js');
+const lotteryBanner = require('./lottery-banner-a5256c5a.js');
+require('./index-0a0cc64c.js');
 
 
 

package/dist/cjs/lottery-banner.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4511b749.js');
+const index = require('./index-0a0cc64c.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-banner.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["lottery-banner.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"startTime":[1,"start-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1],"formattedTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/lottery-banner/lottery-banner.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  container-type: inline-size;
 }
 
 .lottery-banner {
@@ -16,7 +17,6 @@
   border-radius: var(--lottery-banner-border-radius, 0);
   white-space: nowrap;
   height: var(--lottery-banner-height, 50px);
-  container-type: inline-size;
   position: relative;
   box-sizing: border-box;
 }
@@ -44,6 +44,7 @@
   font-size: var(--lottery-banner-title-font-size, 1.5rem);
   font-weight: 800;
   font-style: italic;
+  letter-spacing: var(--lottery-banner-title-font-letter-spacing, 0.04em);
   color: var(--emw--color-typography, #000);
 }
 
@@ -62,9 +63,11 @@
 }
 
 .lottery-banner__info-item-label {
-  font-weight: var(--lottery-banner-info-label-font-weight, 700);
   color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));
 }
+.lottery-banner__info-item-label__strong {
+  font-weight: var(--lottery-banner-info-label-font-weight, 700);
+}
 
 .lottery-banner__info-item-value {
   font-weight: var(--lottery-banner-info-value-font-weight, inherit);
@@ -81,7 +84,8 @@
     text-align: var(--lottery-banner-mobile-title-text-align, left);
   }
   .lottery-banner__info {
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-start;
     gap: var(--lottery-banner-mobile-info-gap, 0.1rem);
   }
 }

package/dist/collection/components/lottery-banner/lottery-banner.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { getWagerTime } from "../../utils/utils";
 export class LotteryBanner {
     constructor() {
         this.mbSource = undefined;
@@ -10,9 +11,11 @@ export class LotteryBanner {
         this.language = 'en';
         this.logoUrl = undefined;
         this.stopTime = '';
+        this.startTime = '';
         this.bannerTitle = undefined;
         this.turnover = undefined;
         this.layout = 'logo,title,info';
+        this.formattedTime = undefined;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -29,10 +32,31 @@ export class LotteryBanner {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
+    handleTimeChange() {
+        this.startTimer();
+    }
     async componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl(this.translationUrl);
         }
+        this.startTimer();
+    }
+    startTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+        this.updateTime();
+        this.timer = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    updateTime() {
+        var _a;
+        this.formattedTime = getWagerTime(this.startTime, this.stopTime);
+        if ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.end) {
+            this.timer && clearInterval(this.timer);
+            this.lotteryBannerTimerStop.emit();
+        }
     }
     componentDidLoad() {
         if (this.stylingContainer) {
@@ -46,22 +70,24 @@ export class LotteryBanner {
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.timer && clearInterval(this.timer);
     }
     renderElement(item, className = '') {
+        var _a, _b;
         switch (item) {
             case 'logo':
                 return (h("div", { class: `lottery-banner__logo-wrapper ${className}` }, this.logoUrl && h("img", { alt: "logo", src: this.logoUrl, class: "lottery-banner__logo" })));
             case 'title':
                 return this.bannerTitle && h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
             case 'info':
-                return (h("div", { class: `lottery-banner__info ${className}` }, this.stopTime && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('stopAt', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.stopTime))), (this.turnover !== null && this.turnover !== undefined) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('turnover', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+                return (h("div", { class: `lottery-banner__info ${className}` }, ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.start) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, h("span", { class: "lottery-banner__info-item-label__strong" }, translate('start', this.language)), "\u00A0", translate('in', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.formattedTime.start))), ((_b = this.formattedTime) === null || _b === void 0 ? void 0 : _b.end) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, h("span", { class: "lottery-banner__info-item-label__strong" }, translate('stop', this.language)), "\u00A0", translate('at', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.formattedTime.end))), this.turnover !== null && this.turnover !== undefined && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('turnover', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
             default:
                 return null;
         }
     }
     render() {
         const layoutItems = this.layout.split(',').map((item) => item.trim());
-        return (h("section", { key: 'd26c3cb4854c8fea2367df25b6e8cf11b23731e4', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
+        return (h("section", { key: '058aa04a8104d393f6066fd2738fb33cb6d832a2', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
             const isMiddle = layoutItems.length === 3 && index === 1;
             const className = isMiddle ? 'lottery-banner__item--center' : '';
             return this.renderElement(item, className);
@@ -203,6 +229,24 @@ export class LotteryBanner {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "startTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sales start time"
+                },
+                "attribute": "start-time",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "bannerTitle": {
                 "type": "string",
                 "mutable": false,
@@ -215,7 +259,7 @@ export class LotteryBanner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Draw title"
+                    "text": "Banner title"
                 },
                 "attribute": "banner-title",
                 "reflect": false
@@ -257,6 +301,29 @@ export class LotteryBanner {
             }
         };
     }
+    static get states() {
+        return {
+            "formattedTime": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lotteryBannerTimerStop",
+                "name": "lotteryBannerTimerStop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the timer stops"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "clientStyling",
@@ -267,6 +334,12 @@ export class LotteryBanner {
             }, {
                 "propName": "mbSource",
                 "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "startTime",
+                "methodName": "handleTimeChange"
+            }, {
+                "propName": "stopTime",
+                "methodName": "handleTimeChange"
             }];
     }
 }

package/dist/collection/utils/locale.utils.js

@@ -2,8 +2,11 @@ const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
     en: {
-        stopAt: 'Stop at',
-        turnover: 'Turnover: '
+        stop: 'Stop',
+        at: 'at',
+        turnover: 'Turnover: ',
+        start: 'Sales Start',
+        in: 'in'
     },
     ro: {
         stop: 'Oprește',

package/dist/collection/utils/utils.js

@@ -1,4 +1,4 @@
-import { format as _format, parseISO } from "date-fns";
+import { format as _format, differenceInSeconds, isBefore, isToday, isWithinInterval, parseISO } from "date-fns";
 export function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
@@ -24,3 +24,44 @@ export const formatDate = ({ date, type = 'date', format }) => {
         return '';
     }
 };
+function formatTime(time) {
+    if (!time)
+        return;
+    if (isToday(new Date(time))) {
+        return formatDate({ date: time, format: 'HH:mm' });
+    }
+    return formatDate({ date: time, format: 'dd/MM/yyyy HH:mm' });
+}
+function formatCountdown(stopTime, _now) {
+    if (!stopTime)
+        return;
+    const endTime = typeof stopTime === 'string' ? parseISO(stopTime) : stopTime;
+    const now = _now && new Date();
+    let totalSeconds = differenceInSeconds(endTime, now);
+    if (totalSeconds < 0)
+        return '0D 00H 00M 00S';
+    const days = Math.floor(totalSeconds / 86400);
+    totalSeconds %= 86400;
+    const hours = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${days}D ${hours.toString().padStart(2, '0')}H ${minutes.toString().padStart(2, '0')}M ${seconds
+        .toString()
+        .padStart(2, '0')}S`;
+}
+export function getWagerTime(startTime, stopTime) {
+    const now = new Date();
+    if (startTime && isBefore(now, parseISO(startTime))) {
+        return { start: formatCountdown(startTime, now) };
+    }
+    if (startTime &&
+        stopTime &&
+        isWithinInterval(now, {
+            start: parseISO(startTime),
+            end: parseISO(stopTime)
+        })) {
+        return { end: formatTime(stopTime) };
+    }
+    return {};
+}

package/dist/esm/{index-0b45dd81.js → index-58dd14ef.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'lottery-banner';
-const BUILD = /* lottery-banner */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* lottery-banner */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -280,6 +280,22 @@ var parsePropertyValue = (propValue, propType) => {
   }
   return propValue;
 };
+var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -1148,4 +1164,4 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { L as LotteryBanner } from './lottery-banner-89c08855.js';
-import './index-0b45dd81.js';
+export { L as LotteryBanner } from './lottery-banner-925a2ddf.js';
+import './index-58dd14ef.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-0b45dd81.js';
-export { s as setNonce } from './index-0b45dd81.js';
+import { b as bootstrapLazy } from './index-58dd14ef.js';
+export { s as setNonce } from './index-58dd14ef.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["lottery-banner",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return bootstrapLazy([["lottery-banner",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"startTime":[1,"start-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1],"formattedTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}]]]], options);
 };
 
 export { defineCustomElements };