@everymatrix/lottery-ticket-controller 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/helper-accordion_2.cjs.entry.js +156 -0
- package/dist/cjs/{index-95915aab.js → index-4814ed9d.js} +1 -40
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/lottery-ticket-controller.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +0 -18
- package/dist/components/lottery-ticket-controller.js +3 -20
- package/dist/esm/helper-accordion_2.entry.js +151 -0
- package/dist/esm/{index-e3877ca0.js → index-116c3025.js} +1 -40
- package/dist/esm/loader.js +2 -2
- package/dist/esm/lottery-ticket-controller.js +2 -2
- package/dist/lottery-ticket-controller/lottery-ticket-controller.esm.js +1 -1
- package/dist/lottery-ticket-controller/p-b4ec0994.js +1 -0
- package/dist/lottery-ticket-controller/p-efb11dcf.entry.js +1 -0
- package/package.json +1 -1
- package/dist/cjs/helper-accordion_5.cjs.entry.js +0 -514
- package/dist/components/lottery-bullet.js +0 -6
- package/dist/components/lottery-bullet2.js +0 -56
- package/dist/components/lottery-grid.js +0 -6
- package/dist/components/lottery-grid2.js +0 -196
- package/dist/components/lottery-ticket.js +0 -6
- package/dist/components/lottery-ticket2.js +0 -208
- package/dist/esm/helper-accordion_5.entry.js +0 -506
- package/dist/lottery-ticket-controller/p-3971b8e6.js +0 -1
- package/dist/lottery-ticket-controller/p-95406ad0.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-
|
|
1
|
+
import{p as e,b as t}from"./p-b4ec0994.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-efb11dcf",[[1,"lottery-ticket-controller",{endpoint:[1],ticketId:[2,"ticket-id"],ticketDescription:[1,"ticket-description"],gameId:[1,"game-id"],postMessage:[4,"post-message"],eventName:[1,"event-name"],collapsed:[4],numberOfGrids:[2,"number-of-grids"],last:[4],language:[1],autoPick:[4,"auto-pick"],resetButton:[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]],[1,"helper-accordion",{ticketHistoryFlag:[4,"ticket-history-flag"],headerTitle:[1,"header-title"],headerSubtitle:[1,"header-subtitle"],description:[1],footer:[4],deleteTab:[4,"delete-tab"],postMessage:[4,"post-message"],eventName:[1,"event-name"],collapsed:[4],language:[1],showContent:[32]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),r=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),i=(e,t,n)=>{n&&n.map((([n,l,s])=>{const c=e,r=u(t,s),i=a(n);o.ael(c,l,r,i),(t.o=t.o||[]).push((()=>o.rel(c,l,r,i)))}))},u=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){I(e)}},a=e=>0!=(2&e),f=new WeakMap,h=e=>"sc-"+e.h,$={},d=e=>"object"==(e=typeof e)||"function"===e,y=(e,t,...n)=>{let l=null,s=!1,o=!1,c=[];const r=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!d(l))&&(l+=""),s&&o?c[c.length-1].$+=l:c.push(s?m(null,l):l),o=s)};if(r(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=m(e,null);return i.m=t,c.length>0&&(i.p=c),i},m=(e,t)=>({t:0,S:e,$:t,g:null,p:null,m:null}),p={},b=(e,t,n,s,c,r)=>{if(n!==s){let i=G(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,l=S(n),o=S(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if(i||"o"!==t[0]||"n"!==t[1]){const l=d(s);if((i||l&&null!==s)&&!c)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?i=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||c)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):G(l,u)?u.slice(2):u[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},w=/\s/,S=e=>e?e.split(w):[],g=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.m||$,c=t.m||$;for(l in o)l in c||b(s,l,o[l],void 0,n,t.t);for(l in c)b(s,l,o[l],c[l],n,t.t)},j=(t,n,l)=>{let o,c,r=n.p[l],i=0;if(null!==r.$)o=r.g=s.createTextNode(r.$);else if(o=r.g=s.createElement(r.S),g(null,r,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),r.p)for(i=0;i<r.p.length;++i)c=j(t,r,i),c&&o.appendChild(c);return o},v=(e,n,l,s,o,c)=>{let r,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=c;++o)s[o]&&(r=j(null,l,o),r&&(s[o].g=r,i.insertBefore(r,n)))},k=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.g.remove()},M=(e,t)=>e.S===t.S,C=(e,t)=>{const n=t.g=e.g,l=e.p,s=t.p,o=t.$;null===o?("slot"===t.S||g(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,r=t.length-1,i=t[0],u=t[r],a=l.length-1,f=l[0],h=l[a];for(;o<=r&&c<=a;)null==i?i=t[++o]:null==u?u=t[--r]:null==f?f=l[++c]:null==h?h=l[--a]:M(i,f)?(C(i,f),i=t[++o],f=l[++c]):M(u,h)?(C(u,h),u=t[--r],h=l[--a]):M(i,h)?(C(i,h),e.insertBefore(i.g,u.g.nextSibling),i=t[++o],h=l[--a]):M(u,f)?(C(u,f),e.insertBefore(u.g,i.g),u=t[--r],f=l[++c]):(s=j(t&&t[c],n,c),f=l[++c],s&&i.g.parentNode.insertBefore(s,i.g));o>r?v(e,null==l[a+1]?null:l[a+1].g,n,l,c,a):c>a&&k(t,o,r)})(n,l,t,s):null!==s?(null!==e.$&&(n.textContent=""),v(n,null,t,s,0,s.length-1)):null!==l&&k(l,0,l.length-1)):e.$!==o&&(n.data=o)},O=(e,t,n)=>{const l=(e=>z(e).j)(e);return{emit:e=>P(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},P=(e,t,n)=>{const l=o.ce(t,n);return e.dispatchEvent(l),l},x=(e,t)=>{t&&!e.v&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.v=t)))},E=(e,t)=>{if(e.t|=16,!(4&e.t))return x(e,e.k),le((()=>N(e,t)));e.t|=512},N=(e,t)=>{const n=e.i;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>R(n,e,t))),e.u=null)),U(void 0,(()=>T(e,n,t)))},T=async(e,t,n)=>{const l=e.j,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.j,l=t.t,o=((e,t)=>{let n=h(t),l=Q.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=f.get(e=e.head||e);o||f.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);A(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>F(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},A=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.j,o=n.C||m(null,null),c=(e=>e&&e.S===p)(l)?l:y(null,null,l);t=s.tagName,c.S=null,c.t|=4,n.C=c,c.g=o.g=s.shadowRoot||s,e=s["s-sc"],C(o,c)})(n,l)}catch(e){I(e,n.j)}return null},F=e=>{const t=e.j,n=e.k;64&e.t||(e.t|=64,W(t),e.O(t),n||L()),e.v&&(e.v(),e.v=void 0),512&e.t&&ne((()=>E(e,!1))),e.t&=-517},L=()=>{W(s.documentElement),ne((()=>P(l,"appload",{detail:{namespace:"lottery-ticket-controller"}})))},R=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){I(e)}},U=(e,t)=>e&&e.then?e.then(t):t(),W=e=>e.classList.add("hydrated"),q=(e,t,n)=>{if(t.P){const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>z(this).N.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=z(e),o=s.N.get(t),c=s.t,r=s.i;n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.P[t][0]),8&c&&void 0!==o||n===o||Number.isNaN(o)&&Number.isNaN(n)||(s.N.set(t,n),r&&2==(18&c)&&E(s,!1))})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},H=e=>{R(e,"connectedCallback")},V=(e,t={})=>{const n=[],c=t.exclude||[],u=l.customElements,a=s.head,f=a.querySelector("meta[charset]"),$=s.createElement("style"),d=[];let y,m=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],h:t[1],P:t[2],T:t[3]};l.P=t[2],l.T=t[3];const s=l.h,a=class extends HTMLElement{constructor(e){super(e),D(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){y&&(clearTimeout(y),y=null),m?d.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=z(e),n=t.M,l=()=>{};if(1&t.t)i(e,t,n.T),H(t.i);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){x(t,t.k=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=K(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(q(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){I(e)}t.t&=-9,e(),H(t.i)}if(s.style){let e=s.style;const t=h(n);if(!Q.has(t)){const l=()=>{};((e,t,n)=>{let l=Q.get(e);r&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,Q.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.k,c=()=>E(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{if(0==(1&o.t)){const e=z(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return z(this).A}};l.F=e[0],c.includes(s)||u.get(s)||(n.push(s),u.define(s,q(a,l,1)))}))})),$.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",$.setAttribute("data-styles",""),a.insertBefore($,f?f.nextSibling:a.firstChild),m=!1,d.length?d.map((e=>e.connectedCallback())):o.jmp((()=>y=setTimeout(L,30)))},_=new WeakMap,z=e=>_.get(e),B=(e,t)=>_.set(t.i=e,t),D=(e,t)=>{const n={t:0,j:e,M:t,N:new Map};return n.A=new Promise((e=>n.O=e)),e["s-p"]=[],e["s-rc"]=[],i(e,n,t.T),_.set(e,n)},G=(e,t)=>t in e,I=(e,t)=>(0,console.error)(e,t),J=new Map,K=e=>{const t=e.h.replace(/-/g,"_"),n=e.F,l=J.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(J.set(n,e),e[t])),I)},Q=new Map,X=[],Y=[],Z=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?ne(te):o.raf(te))},ee=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){I(e)}e.length=0},te=()=>{ee(X),ee(Y),(n=X.length>0)&&o.raf(te)},ne=e=>c().then(e),le=Z(Y,!0);export{V as b,O as c,y as h,c as p,B as r}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as e,h as i}from"./p-b4ec0994.js";import"@everymatrix/lottery-ticket";const s=["ro","en"],o={en:{deleteTicket:"Delete ticket"},ro:{deleteTicket:"Sterge biletul"}},r=class{constructor(i){t(this,i),this.accordionEvent=e(this,"helperAccordionAction",7),this.ticketHistoryFlag=!1,this.headerTitle="",this.headerSubtitle="",this.description="",this.footer=!1,this.deleteTab=!1,this.postMessage=!1,this.eventName="helperAccordionAction",this.collapsed=!0,this.language="en"}connectedCallback(){this.showContent=!this.collapsed}toggleContent(){this.showContent=!this.showContent}deleteAction(){this.postMessage&&window.postMessage({type:this.eventName},window.location.href),this.accordionEvent.emit()}render(){return i("div",{class:"Wrapper"},i("div",{class:!0===this.ticketHistoryFlag?"HeaderTicketHistory":"Header"},i("p",{class:"Title"},this.headerTitle),i("p",{class:"Subtitle"},this.headerSubtitle),i("p",{class:"Subtitle"},this.description),i("span",{class:"Expand",onClick:()=>this.toggleContent()},this.showContent?"<":">")),this.showContent&&i("div",null,i("div",{class:"Content"},i("slot",{name:"accordionContent"}),this.footer&&this.showContent&&i("div",null,this.deleteTab&&i("span",{class:"ActionButton",onClick:()=>this.deleteAction()},(()=>{const t=this.language;return o[void 0!==t&&s.includes(t)?t:"en"].deleteTicket})())))))}};r.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}';const n=class{constructor(i){t(this,i),this.deleteTicketEvent=e(this,"deleteTicket",7),this.endpoint="",this.ticketId=1,this.postMessage=!1,this.eventName="deleteTicketAction",this.collapsed=!0,this.numberOfGrids=1,this.last=!1,this.language="en",this.autoPick=!1,this.resetButton=!1}helperAccordionActionHandler(){this.postMessage&&window.postMessage({type:this.eventName},window.location.href),this.deleteTicketEvent.emit({ticketId:this.ticketId})}render(){return i("div",null,i("helper-accordion",{"header-title":"Ticket "+this.ticketId,"header-subtitle":this.ticketDescription,footer:!0,"delete-tab":!0,collapsed:!this.last||this.collapsed,language:this.language},i("div",{slot:"accordionContent"},i("lottery-ticket",{endpoint:this.endpoint,"game-id":this.gameId,"ticket-id":this.ticketId,"number-of-grids":this.numberOfGrids,language:this.language,"reset-button":this.resetButton,"auto-pick":this.autoPick}))))}};n.style=":host{display:block}";export{r as helper_accordion,n as lottery_ticket_controller}
|
package/package.json
CHANGED
|
@@ -1,514 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-95915aab.js');
|
|
6
|
-
|
|
7
|
-
const DEFAULT_LANGUAGE$1 = 'en';
|
|
8
|
-
const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
|
|
9
|
-
const TRANSLATIONS$1 = {
|
|
10
|
-
en: {
|
|
11
|
-
deleteTicket: 'Delete ticket'
|
|
12
|
-
},
|
|
13
|
-
ro: {
|
|
14
|
-
deleteTicket: 'Sterge biletul'
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
const translate$1 = (key, customLang) => {
|
|
18
|
-
const lang = customLang;
|
|
19
|
-
return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
|
|
23
|
-
|
|
24
|
-
const Accordion = class {
|
|
25
|
-
constructor(hostRef) {
|
|
26
|
-
index.registerInstance(this, hostRef);
|
|
27
|
-
this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
|
|
28
|
-
/**
|
|
29
|
-
* Flag for ticket history
|
|
30
|
-
*/
|
|
31
|
-
this.ticketHistoryFlag = false;
|
|
32
|
-
/**
|
|
33
|
-
* Title (top header)
|
|
34
|
-
*/
|
|
35
|
-
this.headerTitle = '';
|
|
36
|
-
/**
|
|
37
|
-
* SubTitle (top header)
|
|
38
|
-
*/
|
|
39
|
-
this.headerSubtitle = '';
|
|
40
|
-
/**
|
|
41
|
-
* Description
|
|
42
|
-
*/
|
|
43
|
-
this.description = '';
|
|
44
|
-
/**
|
|
45
|
-
* Enables footer content
|
|
46
|
-
*/
|
|
47
|
-
this.footer = false;
|
|
48
|
-
/**
|
|
49
|
-
* Enables footer button for tab deletion
|
|
50
|
-
*/
|
|
51
|
-
this.deleteTab = false;
|
|
52
|
-
/**
|
|
53
|
-
* Activates postMessages as events for actions from the widget
|
|
54
|
-
*/
|
|
55
|
-
this.postMessage = false;
|
|
56
|
-
/**
|
|
57
|
-
* Name of the event emitter by the action button
|
|
58
|
-
*/
|
|
59
|
-
this.eventName = 'helperAccordionAction';
|
|
60
|
-
/**
|
|
61
|
-
* Collapsed
|
|
62
|
-
*/
|
|
63
|
-
this.collapsed = true;
|
|
64
|
-
/**
|
|
65
|
-
* Language
|
|
66
|
-
*/
|
|
67
|
-
this.language = 'en';
|
|
68
|
-
}
|
|
69
|
-
// @TODO fix the `any` type :)
|
|
70
|
-
connectedCallback() {
|
|
71
|
-
this.showContent = !this.collapsed;
|
|
72
|
-
}
|
|
73
|
-
toggleContent() {
|
|
74
|
-
this.showContent = !this.showContent;
|
|
75
|
-
}
|
|
76
|
-
deleteAction() {
|
|
77
|
-
if (this.postMessage) {
|
|
78
|
-
// @TODO maybe change the name type, this one sucks
|
|
79
|
-
window.postMessage({ type: this.eventName }, window.location.href);
|
|
80
|
-
}
|
|
81
|
-
this.accordionEvent.emit();
|
|
82
|
-
}
|
|
83
|
-
render() {
|
|
84
|
-
return (index.h("div", { class: "Wrapper" }, index.h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
|
|
85
|
-
index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
|
|
86
|
-
index.h("div", null, this.deleteTab &&
|
|
87
|
-
index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate$1('deleteTicket', this.language)))))));
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
Accordion.style = helperAccordionCss;
|
|
91
|
-
|
|
92
|
-
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
|
|
93
|
-
|
|
94
|
-
const LotteryBullet = class {
|
|
95
|
-
constructor(hostRef) {
|
|
96
|
-
index.registerInstance(this, hostRef);
|
|
97
|
-
this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
|
|
98
|
-
/**
|
|
99
|
-
* Value of the bullet
|
|
100
|
-
*/
|
|
101
|
-
this.value = '0';
|
|
102
|
-
/**
|
|
103
|
-
* Marks if the bullet should be selectable
|
|
104
|
-
*/
|
|
105
|
-
this.selectable = true;
|
|
106
|
-
/**
|
|
107
|
-
* Marks if the bullet should be selected
|
|
108
|
-
*/
|
|
109
|
-
this.isSelected = false;
|
|
110
|
-
this.select = () => {
|
|
111
|
-
if (this.selectable) {
|
|
112
|
-
this.isSelected = !this.isSelected;
|
|
113
|
-
this.bulletEvent.emit({
|
|
114
|
-
value: this.value,
|
|
115
|
-
selected: this.isSelected
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
LotteryBullet.style = lotteryBulletCss;
|
|
125
|
-
|
|
126
|
-
const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}";
|
|
127
|
-
|
|
128
|
-
const LotteryGrid = class {
|
|
129
|
-
constructor(hostRef) {
|
|
130
|
-
index.registerInstance(this, hostRef);
|
|
131
|
-
this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
|
|
132
|
-
this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
|
|
133
|
-
/**
|
|
134
|
-
* Number of bullets of grid
|
|
135
|
-
*/
|
|
136
|
-
this.totalNumbers = 0;
|
|
137
|
-
/**
|
|
138
|
-
* Number of maximum bullets that can be selected
|
|
139
|
-
*/
|
|
140
|
-
this.maximumAllowed = 0;
|
|
141
|
-
/**
|
|
142
|
-
* Minimum allowed of bullets
|
|
143
|
-
*/
|
|
144
|
-
this.minimumAllowed = 1;
|
|
145
|
-
/**
|
|
146
|
-
* Allows the user to select numbers on the grid
|
|
147
|
-
*/
|
|
148
|
-
this.selectable = true;
|
|
149
|
-
/**
|
|
150
|
-
* Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
|
|
151
|
-
*/
|
|
152
|
-
this.selectedNumbers = '';
|
|
153
|
-
/**
|
|
154
|
-
* Show only selected numbers
|
|
155
|
-
*/
|
|
156
|
-
this.displaySelected = false;
|
|
157
|
-
/**
|
|
158
|
-
* Language
|
|
159
|
-
*/
|
|
160
|
-
this.language = 'en';
|
|
161
|
-
this.numbers = [];
|
|
162
|
-
this.selectedCounter = 0;
|
|
163
|
-
}
|
|
164
|
-
connectedCallback() {
|
|
165
|
-
let selected = [];
|
|
166
|
-
if (this.selectedNumbers.length > 0) {
|
|
167
|
-
selected = this.selectedNumbers.split(',');
|
|
168
|
-
this.selectedCounter = selected.length;
|
|
169
|
-
}
|
|
170
|
-
if (this.displaySelected) {
|
|
171
|
-
selected.forEach((item) => {
|
|
172
|
-
this.numbers.push({
|
|
173
|
-
number: item,
|
|
174
|
-
selected: true,
|
|
175
|
-
selectable: this.selectable
|
|
176
|
-
});
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
[...Array(this.totalNumbers).keys()]
|
|
181
|
-
.map(number => (number + 1).toString())
|
|
182
|
-
.forEach((number) => {
|
|
183
|
-
this.numbers.push({
|
|
184
|
-
number,
|
|
185
|
-
selected: selected.indexOf(number) >= 0 ? true : false,
|
|
186
|
-
selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
|
|
187
|
-
});
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
lotteryBulletSelectionHandler(event) {
|
|
192
|
-
this.numbers = this.numbers.map((item) => {
|
|
193
|
-
if (item.number == event.detail.value) {
|
|
194
|
-
return {
|
|
195
|
-
number: item.number,
|
|
196
|
-
selected: event.detail.selected,
|
|
197
|
-
selectable: item.selectable
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
return {
|
|
201
|
-
number: item.number,
|
|
202
|
-
selected: item.selected,
|
|
203
|
-
selectable: item.selectable
|
|
204
|
-
};
|
|
205
|
-
});
|
|
206
|
-
if (event.detail.selected) {
|
|
207
|
-
this.selectedCounter += 1;
|
|
208
|
-
if (this.selectedCounter == this.maximumAllowed) {
|
|
209
|
-
this.numbers = this.numbers.map((item) => {
|
|
210
|
-
return {
|
|
211
|
-
number: item.number,
|
|
212
|
-
selected: item.selected,
|
|
213
|
-
selectable: item.selected ? true : false
|
|
214
|
-
};
|
|
215
|
-
});
|
|
216
|
-
this.gridFilledEvent.emit({
|
|
217
|
-
id: this.ticketId,
|
|
218
|
-
index: this.gridIndex,
|
|
219
|
-
selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
|
|
220
|
-
});
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
else {
|
|
224
|
-
if (this.selectedCounter == this.maximumAllowed) {
|
|
225
|
-
this.numbers = this.numbers.map((item) => {
|
|
226
|
-
return {
|
|
227
|
-
number: item.number,
|
|
228
|
-
selected: item.selected,
|
|
229
|
-
selectable: true
|
|
230
|
-
};
|
|
231
|
-
});
|
|
232
|
-
this.gridDirtyEvent.emit({
|
|
233
|
-
id: this.ticketId,
|
|
234
|
-
index: this.gridIndex,
|
|
235
|
-
selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
this.selectedCounter -= 1;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
async resetSelectionHandler(event) {
|
|
242
|
-
if (event.detail && event.detail == this.ticketId) {
|
|
243
|
-
this.selectedCounter = 0;
|
|
244
|
-
this.numbers = this.numbers.map((item) => {
|
|
245
|
-
return {
|
|
246
|
-
number: item.number,
|
|
247
|
-
selected: false,
|
|
248
|
-
selectable: this.selectable
|
|
249
|
-
};
|
|
250
|
-
});
|
|
251
|
-
this.gridDirtyEvent.emit({
|
|
252
|
-
id: this.ticketId,
|
|
253
|
-
index: this.gridIndex,
|
|
254
|
-
selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
|
|
255
|
-
});
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
async autoSelectionHandler(event) {
|
|
259
|
-
if (event.detail && event.detail == this.ticketId) {
|
|
260
|
-
this.resetSelectionHandler(event);
|
|
261
|
-
let array = [...Array(this.totalNumbers).keys()]
|
|
262
|
-
.map(number => number + 1)
|
|
263
|
-
.sort(() => 0.5 - Math.random());
|
|
264
|
-
array = array.slice(0, this.minimumAllowed);
|
|
265
|
-
this.numbers = this.numbers.map((item) => {
|
|
266
|
-
return {
|
|
267
|
-
number: item.number,
|
|
268
|
-
selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
|
|
269
|
-
selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
|
|
270
|
-
};
|
|
271
|
-
});
|
|
272
|
-
this.gridFilledEvent.emit({
|
|
273
|
-
id: this.ticketId,
|
|
274
|
-
index: this.gridIndex,
|
|
275
|
-
selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
|
|
276
|
-
});
|
|
277
|
-
this.selectedCounter = this.maximumAllowed;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
render() {
|
|
281
|
-
return (index.h("div", { class: "GridContainer" }, index.h("div", { class: "Grid" }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
|
|
282
|
-
}
|
|
283
|
-
};
|
|
284
|
-
LotteryGrid.style = lotteryGridCss;
|
|
285
|
-
|
|
286
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
287
|
-
const SUPPORTED_LANGUAGES = ['ro', 'en'];
|
|
288
|
-
const TRANSLATIONS = {
|
|
289
|
-
en: {
|
|
290
|
-
loading: 'Loading, please wait ...',
|
|
291
|
-
error: 'It was an error while trying to fetch the data',
|
|
292
|
-
grid: 'Grid',
|
|
293
|
-
multiplier: 'Multiplier',
|
|
294
|
-
numberOfDraws: 'Number of draws',
|
|
295
|
-
wagerPerDraw: 'Wager per draw',
|
|
296
|
-
resetButton: 'Reset',
|
|
297
|
-
autoButton: 'I feel lucky'
|
|
298
|
-
},
|
|
299
|
-
ro: {
|
|
300
|
-
loading: 'Se incarca, va rugam asteptati ...',
|
|
301
|
-
error: 'A fost o eroare in timp ce asteptam datele',
|
|
302
|
-
grid: 'Grid',
|
|
303
|
-
multiplier: 'Multiplicator',
|
|
304
|
-
numberOfDraws: 'Numarul de extrageri',
|
|
305
|
-
wagerPerDraw: 'Pariul per extragere',
|
|
306
|
-
resetButton: 'Reseteaza',
|
|
307
|
-
autoButton: 'Ma simt norocos'
|
|
308
|
-
},
|
|
309
|
-
};
|
|
310
|
-
const translate = (key, customLang) => {
|
|
311
|
-
const lang = customLang;
|
|
312
|
-
return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #F1F1F1 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
|
|
316
|
-
|
|
317
|
-
const LotteryTicket = class {
|
|
318
|
-
constructor(hostRef) {
|
|
319
|
-
index.registerInstance(this, hostRef);
|
|
320
|
-
this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
|
|
321
|
-
this.autoSelection = index.createEvent(this, "autoSelection", 7);
|
|
322
|
-
this.resetSelection = index.createEvent(this, "resetSelection", 7);
|
|
323
|
-
this.stakeChange = index.createEvent(this, "stakeChange", 7);
|
|
324
|
-
this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
|
|
325
|
-
/**
|
|
326
|
-
* Number of grids of a ticket
|
|
327
|
-
*/
|
|
328
|
-
this.numberOfGrids = 1;
|
|
329
|
-
/**
|
|
330
|
-
* Option to have the ticket registered for multiple draws
|
|
331
|
-
*/
|
|
332
|
-
this.multipleDraws = true;
|
|
333
|
-
/**
|
|
334
|
-
* Shows the reset button
|
|
335
|
-
*/
|
|
336
|
-
this.resetButton = false;
|
|
337
|
-
/**
|
|
338
|
-
* Shows the auto-pick button
|
|
339
|
-
*/
|
|
340
|
-
this.autoPick = false;
|
|
341
|
-
/**
|
|
342
|
-
* Language
|
|
343
|
-
*/
|
|
344
|
-
this.language = 'en';
|
|
345
|
-
this.multiplier = false;
|
|
346
|
-
this.numberOfDraws = 1;
|
|
347
|
-
this.isLoading = true;
|
|
348
|
-
this.hasErrors = false;
|
|
349
|
-
this.ticketDone = false;
|
|
350
|
-
this.isCustomSelect = false;
|
|
351
|
-
this.amountInfo = {};
|
|
352
|
-
}
|
|
353
|
-
/**
|
|
354
|
-
* @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
|
|
355
|
-
*/
|
|
356
|
-
checkForClickOutside(ev) {
|
|
357
|
-
if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
|
|
358
|
-
this.isCustomSelect = false;
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
connectedCallback() {
|
|
362
|
-
let url = new URL(`${this.endpoint}/games/${this.gameId}`);
|
|
363
|
-
fetch(url.href)
|
|
364
|
-
.then((response) => {
|
|
365
|
-
if (response.ok) {
|
|
366
|
-
return response.json();
|
|
367
|
-
}
|
|
368
|
-
else {
|
|
369
|
-
// Throw error
|
|
370
|
-
this.hasErrors = true;
|
|
371
|
-
}
|
|
372
|
-
})
|
|
373
|
-
.then((data) => {
|
|
374
|
-
this.isLoading = false;
|
|
375
|
-
this.gameData = data;
|
|
376
|
-
this.grids = [...Array(data.rules.boards.length).keys()];
|
|
377
|
-
this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
|
|
378
|
-
})
|
|
379
|
-
.catch((err) => {
|
|
380
|
-
this.isLoading = false;
|
|
381
|
-
this.hasErrors = true;
|
|
382
|
-
console.error('Error!', err);
|
|
383
|
-
});
|
|
384
|
-
}
|
|
385
|
-
multiplierChangeHandler(e) {
|
|
386
|
-
this.multiplier = e.target ? e.target.checked : false;
|
|
387
|
-
this.multiplierChange.emit(this.multiplier);
|
|
388
|
-
}
|
|
389
|
-
drawsChangeHandler(event) {
|
|
390
|
-
this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
|
|
391
|
-
this.ticketCompleted.emit(this.ticket);
|
|
392
|
-
}
|
|
393
|
-
gridFilledHandler(event) {
|
|
394
|
-
this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
|
|
395
|
-
this.ticketDone = true;
|
|
396
|
-
this.ticketCompleted.emit(this.ticket);
|
|
397
|
-
}
|
|
398
|
-
toggleAutoSelection() {
|
|
399
|
-
this.ticketDone = true;
|
|
400
|
-
this.autoSelection.emit(this.ticketId);
|
|
401
|
-
}
|
|
402
|
-
toggleResetSelection() {
|
|
403
|
-
this.ticketDone = false;
|
|
404
|
-
this.resetSelection.emit(this.ticketId);
|
|
405
|
-
}
|
|
406
|
-
changeStake(ticketid, amount) {
|
|
407
|
-
this.stakeChange.emit({
|
|
408
|
-
ticketId: ticketid,
|
|
409
|
-
stake: amount
|
|
410
|
-
});
|
|
411
|
-
}
|
|
412
|
-
toggleClass() {
|
|
413
|
-
this.isCustomSelect = !this.isCustomSelect;
|
|
414
|
-
}
|
|
415
|
-
setDropdownItem(item) {
|
|
416
|
-
this.amountInfo = {
|
|
417
|
-
amount: item.amount,
|
|
418
|
-
currency: item.currency
|
|
419
|
-
};
|
|
420
|
-
this.isCustomSelect = false;
|
|
421
|
-
this.changeStake(this.ticketId, item.amount);
|
|
422
|
-
}
|
|
423
|
-
render() {
|
|
424
|
-
if (this.isLoading) {
|
|
425
|
-
return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
|
|
426
|
-
}
|
|
427
|
-
else {
|
|
428
|
-
if (this.hasErrors) {
|
|
429
|
-
return (index.h("div", null, index.h("p", null, translate('error', this.language))));
|
|
430
|
-
}
|
|
431
|
-
else {
|
|
432
|
-
const { rules } = this.gameData;
|
|
433
|
-
return (index.h("div", { class: "TicketContainer" }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
|
|
434
|
-
index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
|
|
435
|
-
index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
|
|
436
|
-
index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
|
|
437
|
-
index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
|
|
438
|
-
(index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
|
|
439
|
-
}
|
|
440
|
-
}
|
|
441
|
-
}
|
|
442
|
-
static get watchers() { return {
|
|
443
|
-
"numberOfDraws": ["drawsChangeHandler"]
|
|
444
|
-
}; }
|
|
445
|
-
};
|
|
446
|
-
LotteryTicket.style = lotteryTicketCss;
|
|
447
|
-
|
|
448
|
-
const lotteryTicketControllerCss = ":host{display:block}";
|
|
449
|
-
|
|
450
|
-
const LotteryTicketController = class {
|
|
451
|
-
constructor(hostRef) {
|
|
452
|
-
index.registerInstance(this, hostRef);
|
|
453
|
-
this.deleteTicketEvent = index.createEvent(this, "deleteTicket", 7);
|
|
454
|
-
/**
|
|
455
|
-
* Endpoint URL for the source of data (NorWAy standard)
|
|
456
|
-
*/
|
|
457
|
-
this.endpoint = '';
|
|
458
|
-
/**
|
|
459
|
-
* Ticket number
|
|
460
|
-
*/
|
|
461
|
-
this.ticketId = 1;
|
|
462
|
-
/**
|
|
463
|
-
* Activates postMessages as events for actions from the widget
|
|
464
|
-
*/
|
|
465
|
-
this.postMessage = false;
|
|
466
|
-
/**
|
|
467
|
-
* Name of the event emitter by the action button
|
|
468
|
-
*/
|
|
469
|
-
this.eventName = 'deleteTicketAction';
|
|
470
|
-
/**
|
|
471
|
-
* Collapsed
|
|
472
|
-
*/
|
|
473
|
-
this.collapsed = true;
|
|
474
|
-
/**
|
|
475
|
-
* Number of grids?
|
|
476
|
-
*/
|
|
477
|
-
this.numberOfGrids = 1;
|
|
478
|
-
/**
|
|
479
|
-
* This toggles if the last ticket added should be expanded or not
|
|
480
|
-
*/
|
|
481
|
-
this.last = false;
|
|
482
|
-
/**
|
|
483
|
-
* Language
|
|
484
|
-
*/
|
|
485
|
-
this.language = 'en';
|
|
486
|
-
/**
|
|
487
|
-
* Shows the auto-pick button
|
|
488
|
-
*/
|
|
489
|
-
this.autoPick = false;
|
|
490
|
-
/**
|
|
491
|
-
* Shows the reset button
|
|
492
|
-
*/
|
|
493
|
-
this.resetButton = false;
|
|
494
|
-
}
|
|
495
|
-
// @TODO fix the `any` type
|
|
496
|
-
helperAccordionActionHandler() {
|
|
497
|
-
if (this.postMessage) {
|
|
498
|
-
window.postMessage({ type: this.eventName }, window.location.href);
|
|
499
|
-
}
|
|
500
|
-
this.deleteTicketEvent.emit({
|
|
501
|
-
ticketId: this.ticketId
|
|
502
|
-
});
|
|
503
|
-
}
|
|
504
|
-
render() {
|
|
505
|
-
return (index.h("div", null, index.h("helper-accordion", { "header-title": 'Ticket ' + this.ticketId, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language }, index.h("div", { slot: "accordionContent" }, index.h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick })))));
|
|
506
|
-
}
|
|
507
|
-
};
|
|
508
|
-
LotteryTicketController.style = lotteryTicketControllerCss;
|
|
509
|
-
|
|
510
|
-
exports.helper_accordion = Accordion;
|
|
511
|
-
exports.lottery_bullet = LotteryBullet;
|
|
512
|
-
exports.lottery_grid = LotteryGrid;
|
|
513
|
-
exports.lottery_ticket = LotteryTicket;
|
|
514
|
-
exports.lottery_ticket_controller = LotteryTicketController;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
|
|
4
|
-
|
|
5
|
-
const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
this.__registerHost();
|
|
9
|
-
this.__attachShadow();
|
|
10
|
-
this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
|
|
11
|
-
/**
|
|
12
|
-
* Value of the bullet
|
|
13
|
-
*/
|
|
14
|
-
this.value = '0';
|
|
15
|
-
/**
|
|
16
|
-
* Marks if the bullet should be selectable
|
|
17
|
-
*/
|
|
18
|
-
this.selectable = true;
|
|
19
|
-
/**
|
|
20
|
-
* Marks if the bullet should be selected
|
|
21
|
-
*/
|
|
22
|
-
this.isSelected = false;
|
|
23
|
-
this.select = () => {
|
|
24
|
-
if (this.selectable) {
|
|
25
|
-
this.isSelected = !this.isSelected;
|
|
26
|
-
this.bulletEvent.emit({
|
|
27
|
-
value: this.value,
|
|
28
|
-
selected: this.isSelected
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
render() {
|
|
34
|
-
return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
|
|
35
|
-
}
|
|
36
|
-
static get style() { return lotteryBulletCss; }
|
|
37
|
-
}, [1, "lottery-bullet", {
|
|
38
|
-
"value": [1],
|
|
39
|
-
"selectable": [4],
|
|
40
|
-
"isSelected": [4, "is-selected"]
|
|
41
|
-
}]);
|
|
42
|
-
function defineCustomElement() {
|
|
43
|
-
if (typeof customElements === "undefined") {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const components = ["lottery-bullet"];
|
|
47
|
-
components.forEach(tagName => { switch (tagName) {
|
|
48
|
-
case "lottery-bullet":
|
|
49
|
-
if (!customElements.get(tagName)) {
|
|
50
|
-
customElements.define(tagName, LotteryBullet);
|
|
51
|
-
}
|
|
52
|
-
break;
|
|
53
|
-
} });
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export { LotteryBullet as L, defineCustomElement as d };
|