@everymatrix/lottery-hakuna-ticket-history 0.0.23 → 0.0.24
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/index-62b3d460.js +64 -0
- package/dist/cjs/index-dc95b9af.js +6 -2
- package/dist/cjs/index.cjs.js +2 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{lottery-button_8.cjs.entry.js → lottery-button_7.cjs.entry.js} +98 -268
- package/dist/cjs/{lottery-hakuna-ticket-history-ec8bf5d5.js → lottery-hakuna-ticket-history-49bed503.js} +51 -124
- package/dist/cjs/lottery-hakuna-ticket-history.cjs.js +1 -1
- package/dist/cjs/lottery-infinite-scroll.cjs.entry.js +223 -0
- package/dist/collection/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.css +8 -0
- package/dist/collection/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.js +51 -8
- package/dist/collection/components/lottery-infinite-scroll/lottery-infinite-scroll.js +4 -4
- package/dist/esm/index-30f31c84.js +60 -0
- package/dist/esm/index-50addd47.js +6 -2
- package/dist/esm/index.js +2 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{lottery-button_8.entry.js → lottery-button_7.entry.js} +71 -241
- package/dist/esm/{lottery-hakuna-ticket-history-35d86d50.js → lottery-hakuna-ticket-history-844d94d7.js} +46 -115
- package/dist/esm/lottery-hakuna-ticket-history.js +1 -1
- package/dist/esm/lottery-infinite-scroll.entry.js +219 -0
- package/dist/lottery-hakuna-ticket-history/index-30f31c84.js +1 -0
- package/dist/lottery-hakuna-ticket-history/index.esm.js +1 -1
- package/dist/lottery-hakuna-ticket-history/lottery-button_7.entry.js +1 -0
- package/dist/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history-844d94d7.js +1 -0
- package/dist/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.esm.js +1 -1
- package/dist/lottery-hakuna-ticket-history/lottery-infinite-scroll.entry.js +1 -0
- package/dist/types/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.d.ts +5 -0
- package/package.json +1 -1
- package/dist/lottery-hakuna-ticket-history/lottery-button_8.entry.js +0 -1
- package/dist/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history-35d86d50.js +0 -1
|
@@ -1,65 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const index = require('./index-dc95b9af.js');
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* @name setClientStyling
|
|
7
|
-
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
8
|
-
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
9
|
-
* @param {string} clientStyling The style content
|
|
10
|
-
*/
|
|
11
|
-
function setClientStyling(stylingContainer, clientStyling) {
|
|
12
|
-
if (stylingContainer) {
|
|
13
|
-
const sheet = document.createElement('style');
|
|
14
|
-
sheet.innerHTML = clientStyling;
|
|
15
|
-
stylingContainer.appendChild(sheet);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* @name setClientStylingURL
|
|
21
|
-
* @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
|
|
22
|
-
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
23
|
-
* @param {string} clientStylingUrl The URL of the style content
|
|
24
|
-
*/
|
|
25
|
-
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
26
|
-
if (!stylingContainer || !clientStylingUrl) return;
|
|
27
|
-
|
|
28
|
-
const url = new URL(clientStylingUrl);
|
|
29
|
-
|
|
30
|
-
fetch(url.href)
|
|
31
|
-
.then((res) => res.text())
|
|
32
|
-
.then((data) => {
|
|
33
|
-
const cssFile = document.createElement('style');
|
|
34
|
-
cssFile.innerHTML = data;
|
|
35
|
-
if (stylingContainer) {
|
|
36
|
-
stylingContainer.appendChild(cssFile);
|
|
37
|
-
}
|
|
38
|
-
})
|
|
39
|
-
.catch((err) => {
|
|
40
|
-
console.error('There was an error while trying to load client styling from URL', err);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* @name setStreamLibrary
|
|
46
|
-
* @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
|
|
47
|
-
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
48
|
-
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
49
|
-
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
50
|
-
*/
|
|
51
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
52
|
-
if (window.emMessageBus) {
|
|
53
|
-
const sheet = document.createElement('style');
|
|
54
|
-
|
|
55
|
-
window.emMessageBus.subscribe(domain, (data) => {
|
|
56
|
-
sheet.innerHTML = data;
|
|
57
|
-
if (stylingContainer) {
|
|
58
|
-
stylingContainer.appendChild(sheet);
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}
|
|
4
|
+
const index$1 = require('./index-62b3d460.js');
|
|
63
5
|
|
|
64
6
|
var GameType;
|
|
65
7
|
(function (GameType) {
|
|
@@ -2471,61 +2413,9 @@ const resolveTranslationUrl = async (translationUrl) => {
|
|
|
2471
2413
|
}
|
|
2472
2414
|
};
|
|
2473
2415
|
|
|
2474
|
-
|
|
2475
|
-
var LoadingOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" } }] }, "name": "loading", "theme": "outlined" };
|
|
2476
|
-
const LoadingOutlined$1 = LoadingOutlined;
|
|
2477
|
-
|
|
2478
|
-
var __assign = (undefined && undefined.__assign) || function () {
|
|
2479
|
-
__assign = Object.assign || function(t) {
|
|
2480
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
2481
|
-
s = arguments[i];
|
|
2482
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
2483
|
-
t[p] = s[p];
|
|
2484
|
-
}
|
|
2485
|
-
return t;
|
|
2486
|
-
};
|
|
2487
|
-
return __assign.apply(this, arguments);
|
|
2488
|
-
};
|
|
2489
|
-
var defaultColors = {
|
|
2490
|
-
primaryColor: '#333',
|
|
2491
|
-
secondaryColor: '#E6E6E6'
|
|
2492
|
-
};
|
|
2493
|
-
function renderIconDefinitionToSVGElement(icond, options) {
|
|
2494
|
-
if (options === void 0) { options = {}; }
|
|
2495
|
-
if (typeof icond.icon === 'function') {
|
|
2496
|
-
// two-tone
|
|
2497
|
-
var placeholders = options.placeholders || defaultColors;
|
|
2498
|
-
return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
|
|
2499
|
-
}
|
|
2500
|
-
// fill, outline
|
|
2501
|
-
return renderAbstractNodeToSVGElement(icond.icon, options);
|
|
2502
|
-
}
|
|
2503
|
-
function renderAbstractNodeToSVGElement(node, options) {
|
|
2504
|
-
var targetAttrs = node.tag === 'svg'
|
|
2505
|
-
? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
|
|
2506
|
-
var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
|
|
2507
|
-
var key = nextKey;
|
|
2508
|
-
var value = targetAttrs[key];
|
|
2509
|
-
var token = "".concat(key, "=\"").concat(value, "\"");
|
|
2510
|
-
acc.push(token);
|
|
2511
|
-
return acc;
|
|
2512
|
-
}, []);
|
|
2513
|
-
var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
|
|
2514
|
-
var children = (node.children || [])
|
|
2515
|
-
.map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
|
|
2516
|
-
.join('');
|
|
2517
|
-
if (children && children.length) {
|
|
2518
|
-
return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
|
|
2519
|
-
}
|
|
2520
|
-
return "<".concat(node.tag).concat(attrsToken, " />");
|
|
2521
|
-
}
|
|
2522
|
-
|
|
2523
|
-
const lotteryHakunaTicketHistoryCss = ":host{display:block}.lottery-hakuna-ticket-history__container{padding:var(--lottery-hakuna-container-padding, 0);display:flex;flex-direction:var(--lottery-hakuna-container-flex-direction, column);align-items:var(--lottery-hakuna-container-align-items, center)}.lottery-hakuna-ticket-history__title{color:var(--lottery-hakuna-title-color, #000);font-size:var(--lottery-hakuna-title-font-size, 14px);font-style:var(--lottery-hakuna-title-font-style, normal);font-weight:var(--lottery-hakuna-title-font-weight, 700);line-height:var(--lottery-hakuna-title-line-height, normal);text-transform:var(--lottery-hakuna-title-text-transform, uppercase);margin-bottom:var(--lottery-hakuna-title-margin-bottom, 18px)}lottery-hakuna-ticket-history-item{width:var(--lottery-hakuna-ticket-history-item-width, 100%)}lottery-infinite-scroll{max-width:var(--lottery-hakuna-ticket-history-item-max-width, 100%);height:var(--lottery-hakuna-ticket-history-item-height, 500px)}.lottery-hakuna-ticket-history__end-message{width:var(--lottery-hakuna-end-message-width, 100%);text-align:var(--lottery-hakuna-end-message-text-align, center);font-size:var(--lottery-hakuna-end-message-font-size, 14px)}.lottery-hakuna-ticket-history__loading-more{width:var(--lottery-hakuna-loading-more-width, 100%);display:flex;align-items:center;justify-content:center;font-size:var(--lottery-hakuna-loading-more-font-size, 14px);gap:var(--lottery-hakuna-loading-spinner-text-gap, 8px);}.lottery-hakuna-ticket-history__loading-more .loading-spinner{animation:spin var(--lottery-hakuna-loading-spinner-animation-duration, 1s) linear infinite;color:var(--lottery-hakuna-loading-spinner-color, currentColor);}.lottery-hakuna-ticket-history__loading-more .loading-spinner svg{width:var(--lottery-hakuna-loading-spinner-size, 16px);height:var(--lottery-hakuna-loading-spinner-size, 16px)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.lottery-hakuna-ticket-history__error-message{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.lottery-hakuna-ticket-history__error-message svg{width:20px;height:20px}";
|
|
2416
|
+
const lotteryHakunaTicketHistoryCss = ":host{display:block}.lottery-hakuna-ticket-history__container{padding:var(--lottery-hakuna-container-padding, 0);display:flex;flex-direction:var(--lottery-hakuna-container-flex-direction, column);align-items:var(--lottery-hakuna-container-align-items, center)}.lottery-hakuna-ticket-history__title{color:var(--lottery-hakuna-title-color, #000);font-size:var(--lottery-hakuna-title-font-size, 14px);font-style:var(--lottery-hakuna-title-font-style, normal);font-weight:var(--lottery-hakuna-title-font-weight, 700);line-height:var(--lottery-hakuna-title-line-height, normal);text-transform:var(--lottery-hakuna-title-text-transform, uppercase);margin-bottom:var(--lottery-hakuna-title-margin-bottom, 18px)}lottery-hakuna-ticket-history-item{width:var(--lottery-hakuna-ticket-history-item-width, 100%)}lottery-infinite-scroll{max-width:var(--lottery-hakuna-ticket-history-item-max-width, 100%);height:var(--lottery-hakuna-ticket-history-item-height, 500px)}.lottery-hakuna-ticket-history__end-message{width:var(--lottery-hakuna-end-message-width, 100%);text-align:var(--lottery-hakuna-end-message-text-align, center);font-size:var(--lottery-hakuna-end-message-font-size, 14px)}.lottery-hakuna-ticket-history__loading-more{width:var(--lottery-hakuna-loading-more-width, 100%);display:flex;align-items:center;justify-content:center;font-size:var(--lottery-hakuna-loading-more-font-size, 14px);gap:var(--lottery-hakuna-loading-spinner-text-gap, 8px);}.lottery-hakuna-ticket-history__loading-more .loading-spinner{animation:spin var(--lottery-hakuna-loading-spinner-animation-duration, 1s) linear infinite;color:var(--lottery-hakuna-loading-spinner-color, currentColor);}.lottery-hakuna-ticket-history__loading-more .loading-spinner svg{width:var(--lottery-hakuna-loading-spinner-size, 16px);height:var(--lottery-hakuna-loading-spinner-size, 16px)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.lottery-hakuna-ticket-history__error-message{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.lottery-hakuna-ticket-history__error-message svg{width:20px;height:20px}.lottery-hakuna-ticket-history__list{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:10px;box-sizing:border-box;width:100%}";
|
|
2524
2417
|
const LotteryHakunaTicketHistoryStyle0 = lotteryHakunaTicketHistoryCss;
|
|
2525
2418
|
|
|
2526
|
-
const loadingOutLinedSvg = renderIconDefinitionToSVGElement(LoadingOutlined$1, {
|
|
2527
|
-
extraSVGAttrs: { width: '14px', height: '14px', fill: 'currentColor' }
|
|
2528
|
-
});
|
|
2529
2419
|
const LotteryHakunaTicketHistory = class {
|
|
2530
2420
|
constructor(hostRef) {
|
|
2531
2421
|
index.registerInstance(this, hostRef);
|
|
@@ -2566,6 +2456,11 @@ const LotteryHakunaTicketHistory = class {
|
|
|
2566
2456
|
this.renderItem = (ticket) => {
|
|
2567
2457
|
return (index.h("lottery-hakuna-ticket-history-item", { "client-styling": this.customStyle + (this.clientStyling || ''), "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, translationUrl: this.translationUrl, language: this.language, key: ticket.id, "history-item-name": ticket.name, "history-item-image-src": ticket.imageSrc, "ticket-id": ticket.id, "total-amount": ticket.totalAmount, date: ticket.date, time: ticket.time, "selected-numbers": ticket.selectedNumbers }));
|
|
2568
2458
|
};
|
|
2459
|
+
this.renderSkeletonList = (num) => {
|
|
2460
|
+
return (index.h("div", { class: "lottery-hakuna-ticket-history__list" }, Array(num)
|
|
2461
|
+
.fill(0)
|
|
2462
|
+
.map(() => this.renderSkeleton())));
|
|
2463
|
+
};
|
|
2569
2464
|
this.mbSource = undefined;
|
|
2570
2465
|
this.clientStyling = undefined;
|
|
2571
2466
|
this.clientStylingUrl = undefined;
|
|
@@ -2592,25 +2487,58 @@ const LotteryHakunaTicketHistory = class {
|
|
|
2592
2487
|
this.errorMessage = undefined;
|
|
2593
2488
|
this.minItemWidth = 300;
|
|
2594
2489
|
this.showSkeleton = true;
|
|
2490
|
+
this.ticketList = [];
|
|
2491
|
+
this.isLoadingList = false;
|
|
2595
2492
|
}
|
|
2596
2493
|
handleClientStylingChange(newValue, oldValue) {
|
|
2597
2494
|
if (newValue != oldValue) {
|
|
2598
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
2495
|
+
index$1.setClientStyling(this.stylingContainer, this.clientStyling);
|
|
2599
2496
|
}
|
|
2600
2497
|
}
|
|
2601
2498
|
handleClientStylingUrlChange(newValue, oldValue) {
|
|
2602
2499
|
if (newValue != oldValue) {
|
|
2603
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
2500
|
+
index$1.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
2604
2501
|
}
|
|
2605
2502
|
}
|
|
2606
2503
|
handleMbSourceChange(newValue, oldValue) {
|
|
2607
2504
|
if (newValue != oldValue) {
|
|
2608
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
2505
|
+
index$1.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
2609
2506
|
}
|
|
2610
2507
|
}
|
|
2611
2508
|
componentWillLoad() {
|
|
2612
2509
|
resolveTranslationUrl(this.translationUrl);
|
|
2613
|
-
this.
|
|
2510
|
+
this.getAllTickets();
|
|
2511
|
+
}
|
|
2512
|
+
async getAllTickets() {
|
|
2513
|
+
try {
|
|
2514
|
+
this.isLoadingList = true;
|
|
2515
|
+
const { items } = await fetchTicketList({
|
|
2516
|
+
endpoint: this.endpoint,
|
|
2517
|
+
filterData: {
|
|
2518
|
+
offset: 0,
|
|
2519
|
+
limit: 100,
|
|
2520
|
+
vendorGameType: this.vendorGameType
|
|
2521
|
+
},
|
|
2522
|
+
sessionId: this.sessionId,
|
|
2523
|
+
meta: {
|
|
2524
|
+
name: this.ticketHistoryItemName,
|
|
2525
|
+
imageSrc: this.ticketHistoryItemImageSrc,
|
|
2526
|
+
currency: this.ticketHistoryItemCurrency
|
|
2527
|
+
}
|
|
2528
|
+
});
|
|
2529
|
+
this.ticketList = items;
|
|
2530
|
+
}
|
|
2531
|
+
catch (err) {
|
|
2532
|
+
if (err.status === 401) {
|
|
2533
|
+
this.errorMessage = translate('unauthorized', this.language);
|
|
2534
|
+
window.postMessage({ type: 'SessionExpired' }, window.location.href);
|
|
2535
|
+
return;
|
|
2536
|
+
}
|
|
2537
|
+
this.errorMessage = translate('failToShowTicketList', this.language);
|
|
2538
|
+
}
|
|
2539
|
+
finally {
|
|
2540
|
+
this.isLoadingList = false;
|
|
2541
|
+
}
|
|
2614
2542
|
}
|
|
2615
2543
|
async getTicketList(page, isRefresh = false) {
|
|
2616
2544
|
try {
|
|
@@ -2665,21 +2593,24 @@ const LotteryHakunaTicketHistory = class {
|
|
|
2665
2593
|
componentDidLoad() {
|
|
2666
2594
|
if (this.stylingContainer) {
|
|
2667
2595
|
if (this.mbSource)
|
|
2668
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
2596
|
+
index$1.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
2669
2597
|
if (this.clientStyling)
|
|
2670
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
2598
|
+
index$1.setClientStyling(this.stylingContainer, this.clientStyling);
|
|
2671
2599
|
if (this.clientStylingUrl)
|
|
2672
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
2600
|
+
index$1.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
2673
2601
|
}
|
|
2674
2602
|
}
|
|
2675
2603
|
disconnectedCallback() {
|
|
2676
2604
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
2677
2605
|
}
|
|
2606
|
+
renderTicketList() {
|
|
2607
|
+
return (index.h("div", { class: "lottery-hakuna-ticket-history__list" }, this.ticketList.map((ticket) => this.renderItem(ticket))));
|
|
2608
|
+
}
|
|
2678
2609
|
renderInfoIcon() {
|
|
2679
2610
|
return (index.h("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", fill: "currentColor", d: "M22.5 5.625C13.1802 5.625 5.625 13.1802 5.625 22.5C5.625 31.8198 13.1802 39.375 22.5 39.375C31.8198 39.375 39.375 31.8198 39.375 22.5C39.375 13.1802 31.8198 5.625 22.5 5.625ZM1.875 22.5C1.875 11.1091 11.1091 1.875 22.5 1.875C33.8909 1.875 43.125 11.1091 43.125 22.5C43.125 33.8909 33.8909 43.125 22.5 43.125C11.1091 43.125 1.875 33.8909 1.875 22.5ZM22.5 13.125C23.5355 13.125 24.375 13.9645 24.375 15V22.5C24.375 23.5355 23.5355 24.375 22.5 24.375C21.4645 24.375 20.625 23.5355 20.625 22.5V15C20.625 13.9645 21.4645 13.125 22.5 13.125ZM20.625 30C20.625 28.9645 21.4645 28.125 22.5 28.125H22.5188C23.5543 28.125 24.3938 28.9645 24.3938 30C24.3938 31.0355 23.5543 31.875 22.5188 31.875H22.5C21.4645 31.875 20.625 31.0355 20.625 30Z" })));
|
|
2680
2611
|
}
|
|
2681
2612
|
render() {
|
|
2682
|
-
return (index.h("div", { key: '
|
|
2613
|
+
return (index.h("div", { key: '0433d863f5272aa244a014381b58b82b9c975bed', class: "lottery-hakuna-ticket-history__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'df8f56cc99e845b5a65858d649fa59b8945b49d2', class: "lottery-hakuna-ticket-history__title" }, this.ticketHistoryTitle), this.errorMessage && (index.h("div", { key: 'b880a26e24fb2b2ae1590b6c6d4b963de598c6f3', class: "lottery-hakuna-ticket-history__error-message" }, this.renderInfoIcon(), index.h("span", { key: '1248f83b4635123f760d49e9ca26013aa268dc26' }, this.errorMessage))), this.isLoadingList ? this.renderSkeletonList(8) : this.renderTicketList()));
|
|
2683
2614
|
}
|
|
2684
2615
|
static get watchers() { return {
|
|
2685
2616
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -2690,7 +2621,3 @@ const LotteryHakunaTicketHistory = class {
|
|
|
2690
2621
|
LotteryHakunaTicketHistory.style = LotteryHakunaTicketHistoryStyle0;
|
|
2691
2622
|
|
|
2692
2623
|
exports.LotteryHakunaTicketHistory = LotteryHakunaTicketHistory;
|
|
2693
|
-
exports.renderIconDefinitionToSVGElement = renderIconDefinitionToSVGElement;
|
|
2694
|
-
exports.setClientStyling = setClientStyling;
|
|
2695
|
-
exports.setClientStylingURL = setClientStylingURL;
|
|
2696
|
-
exports.setStreamStyling = setStreamStyling;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["lottery-
|
|
22
|
+
return index.bootstrapLazy([["lottery-infinite-scroll.cjs",[[1,"lottery-infinite-scroll",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"items":[16],"hasMore":[4,"has-more"],"isLoading":[4,"is-loading"],"isRefreshing":[4,"is-refreshing"],"threshold":[1],"containerHeight":[1,"container-height"],"renderItem":[16],"renderSkeleton":[16],"skeletonCount":[2,"skeleton-count"],"pullTriggerDistance":[2,"pull-trigger-distance"],"minItemWidth":[2,"min-item-width"],"gridGap":[2,"grid-gap"],"pullDistance":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"isRefreshing":["handleRefreshingChange"]}]]],["lottery-button_7.cjs",[[1,"lottery-hakuna-ticket-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"endpoint":[513],"gameId":[513,"game-id"],"playerId":[514,"player-id"],"sessionId":[513,"session-id"],"scrollThreshold":[1,"scroll-threshold"],"scrollContainerHeight":[2,"scroll-container-height"],"ticketHistoryTitle":[1,"ticket-history-title"],"ticketHistoryItemImageSrc":[1,"ticket-history-item-image-src"],"ticketHistoryItemName":[1,"ticket-history-item-name"],"ticketHistoryItemCurrency":[1,"ticket-history-item-currency"],"listLoadingText":[1,"list-loading-text"],"listRefreshingText":[1,"list-refreshing-text"],"listEndText":[1,"list-end-text"],"limit":[2],"minItemWidth":[2,"min-item-width"],"showSkeleton":[4,"show-skeleton"],"visibleTickets":[32],"hasMore":[32],"isLoading":[32],"isRefreshing":[32],"errorMessage":[32],"ticketList":[32],"isLoadingList":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-hakuna-ticket-history-item",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"historyItemName":[1,"history-item-name"],"historyItemImageSrc":[1,"history-item-image-src"],"ticketId":[8,"ticket-id"],"totalAmount":[1,"total-amount"],"date":[1],"time":[1],"selectedNumbers":[1,"selected-numbers"],"showSkeleton":[4,"show-skeleton"],"selectedNumbersCount":[2,"selected-numbers-count"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-selection-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"splitToken":[513,"split-token"],"selectionGroupId":[513,"selection-group-id"],"selectionGroupLabel":[513,"selection-group-label"],"type":[513],"selectedBulletTexts":[513,"selected-bullet-texts"],"maxSelectedCount":[514,"max-selected-count"],"maxDisplayBulletsCount":[514,"max-display-bullets-count"],"bulletTexts":[513,"bullet-texts"],"maxIntegerBulletText":[514,"max-integer-bullet-text"],"minIntegerBulletText":[514,"min-integer-bullet-text"],"bulletTextType":[513,"bullet-text-type"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"dialogTitle":[513,"dialog-title"],"dialogInputPlaceholder":[513,"dialog-input-placeholder"],"dialogConfig":[32],"inputInfo":[32]},[[0,"lotteryBulletClick","lotteryBulletClickHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[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"]}],[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-selection",{"value":[520],"text":[513],"idx":[514],"type":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"deleteIconSvg":[513,"delete-icon-svg"],"deleteIconWidth":[513,"delete-icon-width"],"deleteIconHeight":[513,"delete-icon-height"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-dialog",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"visible":[516],"dialogTitle":[1,"dialog-title"],"width":[1],"closable":[4],"mask":[4],"maskClosable":[4,"mask-closable"],"animationDuration":[2,"animation-duration"],"fullscreen":[4],"showFooter":[4,"show-footer"],"showCancelBtn":[4,"show-cancel-btn"],"language":[513],"translationUrl":[520,"translation-url"],"dialogClass":[1,"dialog-class"],"dialogStyle":[16]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-dc95b9af.js');
|
|
6
|
+
const index$1 = require('./index-62b3d460.js');
|
|
7
|
+
|
|
8
|
+
const DEFAULT_LANGUAGE = 'en';
|
|
9
|
+
const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
|
|
10
|
+
const TRANSLATIONS = {
|
|
11
|
+
en: {
|
|
12
|
+
noMoreData: 'No more data',
|
|
13
|
+
loading: 'Loading...',
|
|
14
|
+
release: 'Release',
|
|
15
|
+
refreshing: 'Refreshing...',
|
|
16
|
+
pull: 'Pull'
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const translate = (key, customLang, replacements) => {
|
|
20
|
+
const lang = customLang;
|
|
21
|
+
let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
22
|
+
if (replacements) {
|
|
23
|
+
Object.keys(replacements).forEach((placeholder) => {
|
|
24
|
+
translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return translation;
|
|
28
|
+
};
|
|
29
|
+
const getTranslations = (data) => {
|
|
30
|
+
Object.keys(data).forEach((item) => {
|
|
31
|
+
for (let key in data[item]) {
|
|
32
|
+
TRANSLATIONS[item][key] = data[item][key];
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
const resolveTranslationUrl = async (translationUrl) => {
|
|
37
|
+
if (translationUrl) {
|
|
38
|
+
try {
|
|
39
|
+
const response = await fetch(translationUrl);
|
|
40
|
+
if (!response.ok) {
|
|
41
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
42
|
+
}
|
|
43
|
+
const translations = await response.json();
|
|
44
|
+
getTranslations(translations);
|
|
45
|
+
}
|
|
46
|
+
catch (error) {
|
|
47
|
+
console.error('Failed to fetch or parse translations from URL:', error);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const lotteryInfiniteScrollCss = ":host{display:block;width:100%}.lottery-infinite-scroll__container{display:block;width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-right:10px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--emw-hakuna-bg-secondary, #120505) var(--lottery-infinite-scroll-scrollbar-track-background, transparent);}.lottery-infinite-scroll__container::-webkit-scrollbar{width:var(--lottery-infinite-scroll-scrollbar-width, 2px)}.lottery-infinite-scroll__container::-webkit-scrollbar-track{background:var(--lottery-infinite-scroll-scrollbar-track-background, transparent)}.lottery-infinite-scroll__container::-webkit-scrollbar-thumb{background:var(--emw-hakuna-bg-secondary, #120505);border-radius:var(--lottery-infinite-scroll-scrollbar-thumb-border-radius, 2px)}.lottery-infinite-scroll__sentinel{width:100%;display:block;text-align:center;}.lottery-infinite-scroll__sentinel.virtual-scroll-sentinel{height:1px;pointer-events:none;opacity:0;position:absolute;width:100%}.lottery-infinite-scroll__sentinel:not(.virtual-scroll-sentinel){height:1px;}.lottery-infinite-scroll__end-message{width:100%;display:block;text-align:center;}.lottery-infinite-scroll__end-message.virtual-scroll-end-message{position:absolute;width:100%}.ptr-indicator{height:var(--pull-trigger-distance, 60px);margin-top:calc(-1 * var(--pull-trigger-distance, 60px));display:flex;align-items:center;justify-content:center;position:absolute;top:0;width:100%;z-index:10;font-size:14px;color:#666;}";
|
|
53
|
+
const LotteryInfiniteScrollStyle0 = lotteryInfiniteScrollCss;
|
|
54
|
+
|
|
55
|
+
const LotteryInfiniteScroll = class {
|
|
56
|
+
constructor(hostRef) {
|
|
57
|
+
index.registerInstance(this, hostRef);
|
|
58
|
+
this.loadMore = index.createEvent(this, "loadMore", 7);
|
|
59
|
+
this.refresh = index.createEvent(this, "refresh", 7);
|
|
60
|
+
// Touch event vars
|
|
61
|
+
this.startY = 0;
|
|
62
|
+
this.isTouching = false;
|
|
63
|
+
// --- Pull to Refresh Logic (Touch handling) ---
|
|
64
|
+
this.handleTouchStart = (e) => {
|
|
65
|
+
// Only allow pull-down when scrollbar is at the top
|
|
66
|
+
if (this.scrollContainer.scrollTop <= 0) {
|
|
67
|
+
this.startY = e.touches[0].clientY;
|
|
68
|
+
this.isTouching = true;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
this.handleTouchMove = (e) => {
|
|
72
|
+
if (!this.isTouching || this.isRefreshing)
|
|
73
|
+
return;
|
|
74
|
+
const currentY = e.touches[0].clientY;
|
|
75
|
+
const distance = currentY - this.startY;
|
|
76
|
+
// Only process pull-down and when scrollbar is at the top
|
|
77
|
+
if (distance > 0 && this.scrollContainer.scrollTop <= 0) {
|
|
78
|
+
// Prevent default scroll behavior (prevents entire page from being dragged)
|
|
79
|
+
if (e.cancelable)
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
// Add damping effect (harder to pull further)
|
|
82
|
+
this.pullDistance = Math.pow(distance, 0.8);
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
// If user pushes up, or already scrolled, reset
|
|
86
|
+
this.isTouching = false;
|
|
87
|
+
this.pullDistance = 0;
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
this.handleTouchEnd = () => {
|
|
91
|
+
this.isTouching = false;
|
|
92
|
+
if (this.pullDistance >= this.pullTriggerDistance) {
|
|
93
|
+
// Trigger refresh
|
|
94
|
+
this.pullDistance = this.pullTriggerDistance; // Stay in loading area
|
|
95
|
+
this.refresh.emit();
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
// Not reached threshold, bounce back
|
|
99
|
+
this.pullDistance = 0;
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
this.mbSource = undefined;
|
|
103
|
+
this.clientStyling = undefined;
|
|
104
|
+
this.clientStylingUrl = undefined;
|
|
105
|
+
this.language = 'en';
|
|
106
|
+
this.translationUrl = '';
|
|
107
|
+
this.items = [];
|
|
108
|
+
this.hasMore = false;
|
|
109
|
+
this.isLoading = false;
|
|
110
|
+
this.isRefreshing = false;
|
|
111
|
+
this.threshold = '0px 0px 200px 0px';
|
|
112
|
+
this.containerHeight = '100%';
|
|
113
|
+
this.renderItem = undefined;
|
|
114
|
+
this.renderSkeleton = undefined;
|
|
115
|
+
this.skeletonCount = 6;
|
|
116
|
+
this.pullTriggerDistance = 60;
|
|
117
|
+
this.minItemWidth = 340;
|
|
118
|
+
this.gridGap = 10;
|
|
119
|
+
this.pullDistance = 0;
|
|
120
|
+
}
|
|
121
|
+
componentDidLoad() {
|
|
122
|
+
this.initObserver();
|
|
123
|
+
if (this.scrollContainer) {
|
|
124
|
+
if (this.mbSource)
|
|
125
|
+
index$1.setStreamStyling(this.scrollContainer, `${this.mbSource}.Style`);
|
|
126
|
+
if (this.clientStyling)
|
|
127
|
+
index$1.setClientStyling(this.scrollContainer, this.clientStyling);
|
|
128
|
+
if (this.clientStylingUrl)
|
|
129
|
+
index$1.setClientStylingURL(this.scrollContainer, this.clientStylingUrl);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
133
|
+
if (newValue != oldValue) {
|
|
134
|
+
index$1.setClientStyling(this.scrollContainer, this.clientStyling);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
handleClientStylingUrlChange(newValue, oldValue) {
|
|
138
|
+
if (newValue != oldValue) {
|
|
139
|
+
index$1.setClientStylingURL(this.scrollContainer, this.clientStylingUrl);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
handleMbSourceChange(newValue, oldValue) {
|
|
143
|
+
if (newValue != oldValue) {
|
|
144
|
+
index$1.setStreamStyling(this.scrollContainer, `${this.mbSource}.Style`);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
componentWillLoad() {
|
|
148
|
+
resolveTranslationUrl(this.translationUrl);
|
|
149
|
+
}
|
|
150
|
+
componentDidUpdate() {
|
|
151
|
+
if (this.hasMore && !this.isLoading) {
|
|
152
|
+
this.initObserver();
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
disconnectedCallback() {
|
|
156
|
+
this.disconnectObserver();
|
|
157
|
+
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
158
|
+
}
|
|
159
|
+
handleRefreshingChange(newValue) {
|
|
160
|
+
if (!newValue) {
|
|
161
|
+
this.pullDistance = 0;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
disconnectObserver() {
|
|
165
|
+
if (this.observer) {
|
|
166
|
+
this.observer.disconnect();
|
|
167
|
+
this.observer = null;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
initObserver() {
|
|
171
|
+
this.disconnectObserver();
|
|
172
|
+
if (!this.hasMore || this.isLoading || !this.sentinel)
|
|
173
|
+
return;
|
|
174
|
+
const options = {
|
|
175
|
+
root: this.scrollContainer,
|
|
176
|
+
rootMargin: this.threshold,
|
|
177
|
+
threshold: 0.1
|
|
178
|
+
};
|
|
179
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
180
|
+
if (entries[0].isIntersecting && this.hasMore && !this.isLoading) {
|
|
181
|
+
this.loadMore.emit();
|
|
182
|
+
}
|
|
183
|
+
}, options);
|
|
184
|
+
this.observer.observe(this.sentinel);
|
|
185
|
+
}
|
|
186
|
+
render() {
|
|
187
|
+
const { items, minItemWidth, gridGap } = this;
|
|
188
|
+
const showSkeleton = items.length === 0 && !!this.renderSkeleton && this.isLoading;
|
|
189
|
+
const listToRender = showSkeleton ? new Array(this.skeletonCount).fill(null) : items;
|
|
190
|
+
const contentTransform = {
|
|
191
|
+
transform: `translateY(${this.pullDistance}px)`,
|
|
192
|
+
transition: this.isTouching ? 'none' : 'transform 0.3s ease-out'
|
|
193
|
+
};
|
|
194
|
+
const listStyle = {
|
|
195
|
+
display: 'grid',
|
|
196
|
+
gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}px, 1fr))`,
|
|
197
|
+
gap: `${gridGap}px`,
|
|
198
|
+
boxSizing: 'border-box'
|
|
199
|
+
};
|
|
200
|
+
return (index.h("div", { key: 'e47cafd444a010ce552fabd3c00722e32b1b3cd8', class: "lottery-infinite-scroll__container", style: {
|
|
201
|
+
height: this.containerHeight,
|
|
202
|
+
overflowY: 'auto',
|
|
203
|
+
position: 'relative'
|
|
204
|
+
}, ref: (el) => (this.scrollContainer = el), onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, index.h("div", { key: 'ee21b030a6f83432edfce4b6cf2719c045fde57f', class: "ptr-indicator", style: Object.assign(Object.assign({}, contentTransform), { position: 'absolute', top: '0', left: '0', width: '100%', height: `${this.pullTriggerDistance}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: `-${this.pullTriggerDistance}px`, pointerEvents: 'none' }) }, this.isRefreshing ? (index.h("slot", { name: "refresh-loading" }, translate('refreshing', this.language))) : (index.h("slot", { name: "pull-hint" }, this.pullDistance > this.pullTriggerDistance
|
|
205
|
+
? translate('release', this.language)
|
|
206
|
+
: translate('pull', this.language)))), index.h("div", { key: '15dd187e7683d16112b6366f94a840153c2c32a4', class: "scroll-content-wrapper", style: contentTransform }, index.h("div", { key: '241ba9f947b2846d78a0beae5806e60f0ac86c8f', class: "list-content", style: listStyle }, listToRender.map((item, index$1) => (index.h("div", { key: index$1, class: "list-item-wrapper" }, showSkeleton ? this.renderSkeleton(index$1) : this.renderItem(item, index$1))))), index.h("div", { key: 'c014157ee2f47cc6020d8cffb06136c6e78e2323', class: "lottery-infinite-scroll__sentinel", ref: (el) => (this.sentinel = el), style: {
|
|
207
|
+
height: '20px',
|
|
208
|
+
display: 'flex',
|
|
209
|
+
justifyContent: 'center',
|
|
210
|
+
visibility: this.hasMore || (this.isLoading && !showSkeleton) ? 'visible' : 'hidden'
|
|
211
|
+
} }, this.isLoading ? index.h("slot", { name: "loading-more" }, translate('loading', this.language)) : null), !this.hasMore && !this.isLoading && items.length > 0 && (index.h("div", { key: 'd363303795035f2f1a1bd8ace34999084171a866', class: "end-message", style: { textAlign: 'center', padding: '10px' } }, index.h("slot", { key: '1be1f840fa161f07a2ecd14c11d0168f5d1156c6', name: "end-message" }, translate('noMoreData', this.language)))))));
|
|
212
|
+
}
|
|
213
|
+
get el() { return index.getElement(this); }
|
|
214
|
+
static get watchers() { return {
|
|
215
|
+
"clientStyling": ["handleClientStylingChange"],
|
|
216
|
+
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
217
|
+
"mbSource": ["handleMbSourceChange"],
|
|
218
|
+
"isRefreshing": ["handleRefreshingChange"]
|
|
219
|
+
}; }
|
|
220
|
+
};
|
|
221
|
+
LotteryInfiniteScroll.style = LotteryInfiniteScrollStyle0;
|
|
222
|
+
|
|
223
|
+
exports.lottery_infinite_scroll = LotteryInfiniteScroll;
|
package/dist/collection/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.css
CHANGED
|
@@ -71,4 +71,12 @@ lottery-infinite-scroll {
|
|
|
71
71
|
.lottery-hakuna-ticket-history__error-message svg {
|
|
72
72
|
width: 20px;
|
|
73
73
|
height: 20px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.lottery-hakuna-ticket-history__list {
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
79
|
+
gap: 10px;
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
width: 100%;
|
|
74
82
|
}
|
package/dist/collection/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.js
CHANGED
|
@@ -4,11 +4,11 @@ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../.
|
|
|
4
4
|
import { GameType } from "../../models";
|
|
5
5
|
import { fetchTicketList } from "../../utils/api";
|
|
6
6
|
import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
|
|
7
|
-
import { LoadingOutlined } from
|
|
8
|
-
import { renderIconDefinitionToSVGElement } from
|
|
9
|
-
const loadingOutLinedSvg = renderIconDefinitionToSVGElement(LoadingOutlined, {
|
|
10
|
-
|
|
11
|
-
});
|
|
7
|
+
// import { LoadingOutlined } from '@ant-design/icons-svg';
|
|
8
|
+
// import { renderIconDefinitionToSVGElement } from '@ant-design/icons-svg/es/helpers';
|
|
9
|
+
// const loadingOutLinedSvg = renderIconDefinitionToSVGElement(LoadingOutlined, {
|
|
10
|
+
// extraSVGAttrs: { width: '14px', height: '14px', fill: 'currentColor' }
|
|
11
|
+
// });
|
|
12
12
|
export class LotteryHakunaTicketHistory {
|
|
13
13
|
constructor() {
|
|
14
14
|
this.page = 0;
|
|
@@ -48,6 +48,11 @@ export class LotteryHakunaTicketHistory {
|
|
|
48
48
|
this.renderItem = (ticket) => {
|
|
49
49
|
return (h("lottery-hakuna-ticket-history-item", { "client-styling": this.customStyle + (this.clientStyling || ''), "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, translationUrl: this.translationUrl, language: this.language, key: ticket.id, "history-item-name": ticket.name, "history-item-image-src": ticket.imageSrc, "ticket-id": ticket.id, "total-amount": ticket.totalAmount, date: ticket.date, time: ticket.time, "selected-numbers": ticket.selectedNumbers }));
|
|
50
50
|
};
|
|
51
|
+
this.renderSkeletonList = (num) => {
|
|
52
|
+
return (h("div", { class: "lottery-hakuna-ticket-history__list" }, Array(num)
|
|
53
|
+
.fill(0)
|
|
54
|
+
.map(() => this.renderSkeleton())));
|
|
55
|
+
};
|
|
51
56
|
this.mbSource = undefined;
|
|
52
57
|
this.clientStyling = undefined;
|
|
53
58
|
this.clientStylingUrl = undefined;
|
|
@@ -74,6 +79,8 @@ export class LotteryHakunaTicketHistory {
|
|
|
74
79
|
this.errorMessage = undefined;
|
|
75
80
|
this.minItemWidth = 300;
|
|
76
81
|
this.showSkeleton = true;
|
|
82
|
+
this.ticketList = [];
|
|
83
|
+
this.isLoadingList = false;
|
|
77
84
|
}
|
|
78
85
|
handleClientStylingChange(newValue, oldValue) {
|
|
79
86
|
if (newValue != oldValue) {
|
|
@@ -92,7 +99,38 @@ export class LotteryHakunaTicketHistory {
|
|
|
92
99
|
}
|
|
93
100
|
componentWillLoad() {
|
|
94
101
|
resolveTranslationUrl(this.translationUrl);
|
|
95
|
-
this.
|
|
102
|
+
this.getAllTickets();
|
|
103
|
+
}
|
|
104
|
+
async getAllTickets() {
|
|
105
|
+
try {
|
|
106
|
+
this.isLoadingList = true;
|
|
107
|
+
const { items } = await fetchTicketList({
|
|
108
|
+
endpoint: this.endpoint,
|
|
109
|
+
filterData: {
|
|
110
|
+
offset: 0,
|
|
111
|
+
limit: 100,
|
|
112
|
+
vendorGameType: this.vendorGameType
|
|
113
|
+
},
|
|
114
|
+
sessionId: this.sessionId,
|
|
115
|
+
meta: {
|
|
116
|
+
name: this.ticketHistoryItemName,
|
|
117
|
+
imageSrc: this.ticketHistoryItemImageSrc,
|
|
118
|
+
currency: this.ticketHistoryItemCurrency
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
this.ticketList = items;
|
|
122
|
+
}
|
|
123
|
+
catch (err) {
|
|
124
|
+
if (err.status === 401) {
|
|
125
|
+
this.errorMessage = translate('unauthorized', this.language);
|
|
126
|
+
window.postMessage({ type: 'SessionExpired' }, window.location.href);
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
this.errorMessage = translate('failToShowTicketList', this.language);
|
|
130
|
+
}
|
|
131
|
+
finally {
|
|
132
|
+
this.isLoadingList = false;
|
|
133
|
+
}
|
|
96
134
|
}
|
|
97
135
|
async getTicketList(page, isRefresh = false) {
|
|
98
136
|
try {
|
|
@@ -157,11 +195,14 @@ export class LotteryHakunaTicketHistory {
|
|
|
157
195
|
disconnectedCallback() {
|
|
158
196
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
159
197
|
}
|
|
198
|
+
renderTicketList() {
|
|
199
|
+
return (h("div", { class: "lottery-hakuna-ticket-history__list" }, this.ticketList.map((ticket) => this.renderItem(ticket))));
|
|
200
|
+
}
|
|
160
201
|
renderInfoIcon() {
|
|
161
202
|
return (h("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", fill: "currentColor", d: "M22.5 5.625C13.1802 5.625 5.625 13.1802 5.625 22.5C5.625 31.8198 13.1802 39.375 22.5 39.375C31.8198 39.375 39.375 31.8198 39.375 22.5C39.375 13.1802 31.8198 5.625 22.5 5.625ZM1.875 22.5C1.875 11.1091 11.1091 1.875 22.5 1.875C33.8909 1.875 43.125 11.1091 43.125 22.5C43.125 33.8909 33.8909 43.125 22.5 43.125C11.1091 43.125 1.875 33.8909 1.875 22.5ZM22.5 13.125C23.5355 13.125 24.375 13.9645 24.375 15V22.5C24.375 23.5355 23.5355 24.375 22.5 24.375C21.4645 24.375 20.625 23.5355 20.625 22.5V15C20.625 13.9645 21.4645 13.125 22.5 13.125ZM20.625 30C20.625 28.9645 21.4645 28.125 22.5 28.125H22.5188C23.5543 28.125 24.3938 28.9645 24.3938 30C24.3938 31.0355 23.5543 31.875 22.5188 31.875H22.5C21.4645 31.875 20.625 31.0355 20.625 30Z" })));
|
|
162
203
|
}
|
|
163
204
|
render() {
|
|
164
|
-
return (h("div", { key: '
|
|
205
|
+
return (h("div", { key: '0433d863f5272aa244a014381b58b82b9c975bed', class: "lottery-hakuna-ticket-history__container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'df8f56cc99e845b5a65858d649fa59b8945b49d2', class: "lottery-hakuna-ticket-history__title" }, this.ticketHistoryTitle), this.errorMessage && (h("div", { key: 'b880a26e24fb2b2ae1590b6c6d4b963de598c6f3', class: "lottery-hakuna-ticket-history__error-message" }, this.renderInfoIcon(), h("span", { key: '1248f83b4635123f760d49e9ca26013aa268dc26' }, this.errorMessage))), this.isLoadingList ? this.renderSkeletonList(8) : this.renderTicketList()));
|
|
165
206
|
}
|
|
166
207
|
static get is() { return "lottery-hakuna-ticket-history"; }
|
|
167
208
|
static get encapsulation() { return "shadow"; }
|
|
@@ -552,7 +593,9 @@ export class LotteryHakunaTicketHistory {
|
|
|
552
593
|
"hasMore": {},
|
|
553
594
|
"isLoading": {},
|
|
554
595
|
"isRefreshing": {},
|
|
555
|
-
"errorMessage": {}
|
|
596
|
+
"errorMessage": {},
|
|
597
|
+
"ticketList": {},
|
|
598
|
+
"isLoadingList": {}
|
|
556
599
|
};
|
|
557
600
|
}
|
|
558
601
|
static get watchers() {
|