@everymatrix/lottery-banner 0.7.4 → 0.7.5

package/dist/esm/helper-count-down_2.entry.js

@@ -0,0 +1,168 @@
+import { r as registerInstance, c as createEvent, h } from './index-fd1b34f8.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, p as parseISO } from './lottery-banner-a9eb5657.js';
+export { L as lottery_banner } from './lottery-banner-a9eb5657.js';
+
+const helperCountDownCss = ":host{display:block}.helper-count-down-container{display:flex;align-items:center}.helper-count-down-prefix{margin-right:4px}.helper-count-down-suffix{margin-left:4px}.helper-count-down-values{display:flex;align-items:center}.helper-count-down-item{display:flex;align-items:center;justify-content:center}.helper-count-down-item-num{font-variant-numeric:tabular-nums}";
+const HelperCountDownStyle0 = helperCountDownCss;
+
+const HelperCountDown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.countDownChange = createEvent(this, "countDownChange", 7);
+        this.countDownFinish = createEvent(this, "countDownFinish", 7);
+        this.value = undefined;
+        this.format = 'HH:mm:ss';
+        this.prefix = undefined;
+        this.suffix = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.endTime = undefined;
+        this.timeObj = {
+            day: { str: '00', unit: '' },
+            hour: { str: '00', unit: '' },
+            minute: { str: '00', unit: '' },
+            second: { str: '00', unit: '' }
+        };
+    }
+    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`, this.stylingSubscription);
+        }
+    }
+    handleValueChange(newValue) {
+        this.setEndTime(newValue);
+        if (newValue) {
+            this.startCountDown();
+        }
+        else {
+            this.clearCountDown();
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.setEndTime(this.value);
+        if (this.value)
+            this.startCountDown();
+    }
+    setEndTime(value) {
+        if (typeof value === 'string') {
+            // If it's a string, parse it and get the milliseconds
+            const time = parseISO(value).getTime();
+            this.endTime = isNaN(time) ? null : time;
+        }
+        else {
+            // If it's a number, use it directly
+            this.endTime = value;
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.clearCountDown();
+    }
+    startCountDown() {
+        this.clearCountDown();
+        this.tick();
+        this.timer = setInterval(() => {
+            this.tick();
+        }, 1000);
+    }
+    clearCountDown() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    tick() {
+        if (!this.endTime)
+            return;
+        let leftTime = this.endTime - Date.now();
+        if (leftTime <= 0) {
+            leftTime = 0;
+            this.clearCountDown();
+            this.countDownFinish.emit();
+        }
+        const d = Math.floor(leftTime / (1000 * 60 * 60 * 24));
+        const h = Math.floor((leftTime / (1000 * 60 * 60)) % 24);
+        const m = Math.floor((leftTime / 1000 / 60) % 60);
+        const s = Math.floor((leftTime / 1000) % 60);
+        const pad = (n) => (n < 10 ? `0${n}` : `${n}`);
+        this.timeObj = {
+            day: { str: pad(d), unit: 'd' },
+            hour: { str: pad(h), unit: 'h' },
+            minute: { str: pad(m), unit: 'm' },
+            second: { str: pad(s), unit: 's' }
+        };
+        const formatTime = this.getFormatTime();
+        this.countDownChange.emit({ leftTime, formatTime, legalTime: formatTime });
+    }
+    getFormatTime() {
+        return this.format
+            .replace('DD', this.timeObj.day.str)
+            .replace('HH', this.timeObj.hour.str)
+            .replace('mm', this.timeObj.minute.str)
+            .replace('ss', this.timeObj.second.str);
+    }
+    renderItems() {
+        const regex = /(DD|HH|mm|ss)|([\s\S]+?)(?=(DD|HH|mm|ss)|$)/g;
+        const items = [];
+        let match;
+        while ((match = regex.exec(this.format)) !== null) {
+            if (match[1]) {
+                let val = '';
+                switch (match[1]) {
+                    case 'DD':
+                        val = this.timeObj.day.str;
+                        break;
+                    case 'HH':
+                        val = this.timeObj.hour.str;
+                        break;
+                    case 'mm':
+                        val = this.timeObj.minute.str;
+                        break;
+                    case 'ss':
+                        val = this.timeObj.second.str;
+                        break;
+                }
+                items.push({ val, unit: '' });
+            }
+            else if (match[2]) {
+                if (items.length > 0) {
+                    items[items.length - 1].unit = match[2];
+                }
+            }
+        }
+        return items.map((item, index) => {
+            return (h("div", { key: index + item.unit, class: "helper-count-down-item", part: "item" }, h("div", { class: "helper-count-down-item-num" }, item.val), h("div", { class: "helper-count-down-item-unit" }, item.unit)));
+        });
+    }
+    render() {
+        return (h("div", { key: 'b360412e045020b5ac0263c6ca56458f31eedb2c', class: "helper-count-down-container", ref: (el) => (this.stylingContainer = el) }, h("slot", { key: 'c72bed87fba869c842407b04e0cbfe038e5b7ea8' }), this.prefix && h("div", { key: '8d3ba9d60577421f81bae7bc76f52a774b17e1fe', class: "helper-count-down-prefix" }, this.prefix), h("div", { key: '187edf3b8eb6de85efe1a748fd8ef47a68e19611', class: "helper-count-down-values", part: "values" }, this.renderItems()), this.suffix && h("div", { key: '3a8e5d9561ecd3f52eff423bd43c8b60a261a17c', class: "helper-count-down-suffix" }, this.suffix)));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "value": ["handleValueChange"]
+    }; }
+};
+HelperCountDown.style = HelperCountDownStyle0;
+
+export { HelperCountDown as helper_count_down };

package/dist/esm/{index-472357af.js → index-fd1b34f8.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: 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 };
+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: true, 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: true, 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
@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'lottery-banner':
+                case 'helper-count-down_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './lottery-banner.entry.js').then(processMod, consoleError);
+                      './helper-count-down_2.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -376,7 +376,7 @@ var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
-    memberName.toLowerCase();
+    let ln = memberName.toLowerCase();
     if (memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
@@ -387,6 +387,24 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       if (newValue) {
         newValue(elm);
       }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+      if (memberName[2] === "-") {
+        memberName = memberName.slice(3);
+      } else if (isMemberInElement(win, ln)) {
+        memberName = ln.slice(2);
+      } else {
+        memberName = ln[2] + memberName.slice(3);
+      }
+      if (oldValue || newValue) {
+        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+        if (oldValue) {
+          plt.rel(elm, memberName, oldValue, capture);
+        }
+        if (newValue) {
+          plt.ael(elm, memberName, newValue, capture);
+        }
+      }
     } else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -421,6 +439,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2) => {
@@ -607,10 +627,11 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
     {
-      {
+      if (tag === "slot" && !useNativeShadowDom) ; else {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { L as LotteryBanner } from './lottery-banner-8d9a42d1.js';
-import './index-472357af.js';
+export { L as LotteryBanner } from './lottery-banner-a9eb5657.js';
+import './index-fd1b34f8.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-472357af.js';
-export { s as setNonce } from './index-472357af.js';
+import { b as bootstrapLazy } from './index-fd1b34f8.js';
+export { s as setNonce } from './index-fd1b34f8.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"],"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);
+  return bootstrapLazy([["helper-count-down_2",[[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],"isWagerStarted":[32],"formattedStopTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}],[1,"helper-count-down",{"value":[520],"format":[513],"prefix":[513],"suffix":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"endTime":[32],"timeObj":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"value":["handleValueChange"]}]]]], options);
 };
 
 export { defineCustomElements };