@everymatrix/lottery-hakuna-ticket-history-item 0.0.1

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.
Files changed (57) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/index-99904d3f.js +1310 -0
  3. package/dist/cjs/index.cjs.js +10 -0
  4. package/dist/cjs/loader.cjs.js +15 -0
  5. package/dist/cjs/lottery-button_5.cjs.entry.js +900 -0
  6. package/dist/cjs/lottery-hakuna-ticket-history-item-6b877fa8.js +195 -0
  7. package/dist/cjs/lottery-hakuna-ticket-history-item.cjs.js +25 -0
  8. package/dist/collection/collection-manifest.json +37 -0
  9. package/dist/collection/components/lottery-hakuna-ticket-history-item/index.js +1 -0
  10. package/dist/collection/components/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item.css +91 -0
  11. package/dist/collection/components/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item.js +315 -0
  12. package/dist/collection/index.js +1 -0
  13. package/dist/collection/utils/locale.utils.js +39 -0
  14. package/dist/collection/utils/utils.js +3 -0
  15. package/dist/esm/app-globals-0f993ce5.js +3 -0
  16. package/dist/esm/index-09b72148.js +1282 -0
  17. package/dist/esm/index.js +2 -0
  18. package/dist/esm/loader.js +11 -0
  19. package/dist/esm/lottery-button_5.entry.js +893 -0
  20. package/dist/esm/lottery-hakuna-ticket-history-item-785a2e3d.js +190 -0
  21. package/dist/esm/lottery-hakuna-ticket-history-item.js +20 -0
  22. package/dist/index.cjs.js +1 -0
  23. package/dist/index.js +1 -0
  24. package/dist/lottery-hakuna-ticket-history-item/app-globals-0f993ce5.js +1 -0
  25. package/dist/lottery-hakuna-ticket-history-item/index-09b72148.js +2 -0
  26. package/dist/lottery-hakuna-ticket-history-item/index.esm.js +1 -0
  27. package/dist/lottery-hakuna-ticket-history-item/lottery-button_5.entry.js +1 -0
  28. package/dist/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item-785a2e3d.js +1 -0
  29. package/dist/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item.esm.js +1 -0
  30. package/dist/stencil.config.dev.js +19 -0
  31. package/dist/stencil.config.js +19 -0
  32. package/dist/storybook/main.js +43 -0
  33. package/dist/storybook/preview.js +9 -0
  34. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/libs/common/src/storybook/storybook-utils.d.ts +39 -0
  35. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/packages/stencil/lottery-hakuna-ticket-history-item/stencil.config.d.ts +2 -0
  36. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/packages/stencil/lottery-hakuna-ticket-history-item/stencil.config.dev.d.ts +2 -0
  37. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/packages/stencil/lottery-hakuna-ticket-history-item/storybook/main.d.ts +3 -0
  38. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/packages/stencil/lottery-hakuna-ticket-history-item/storybook/preview.d.ts +70 -0
  39. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/tools/plugins/index.d.ts +4 -0
  40. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
  41. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +5 -0
  42. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/tools/plugins/vite-chunk-plugin.d.ts +6 -0
  43. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-hakuna-ticket-history-item/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +4 -0
  44. package/dist/types/components/lottery-hakuna-ticket-history-item/index.d.ts +1 -0
  45. package/dist/types/components/lottery-hakuna-ticket-history-item/lottery-hakuna-ticket-history-item.d.ts +61 -0
  46. package/dist/types/components.d.ts +133 -0
  47. package/dist/types/index.d.ts +1 -0
  48. package/dist/types/stencil-public-runtime.d.ts +1674 -0
  49. package/dist/types/utils/locale.utils.d.ts +3 -0
  50. package/dist/types/utils/utils.d.ts +1 -0
  51. package/loader/cdn.js +1 -0
  52. package/loader/index.cjs.js +1 -0
  53. package/loader/index.d.ts +24 -0
  54. package/loader/index.es2017.js +1 -0
  55. package/loader/index.js +2 -0
  56. package/loader/package.json +11 -0
  57. package/package.json +27 -0
@@ -0,0 +1,893 @@
1
+ import { r as registerInstance, h, g as getElement, c as createEvent } from './index-09b72148.js';
2
+ import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-hakuna-ticket-history-item-785a2e3d.js';
3
+ export { L as lottery_hakuna_ticket_history_item } from './lottery-hakuna-ticket-history-item-785a2e3d.js';
4
+
5
+ const DEFAULT_LANGUAGE$2 = 'en';
6
+ const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
7
+ const TRANSLATIONS$2 = {
8
+ en: {
9
+ loading: 'Loading'
10
+ },
11
+ ro: {},
12
+ fr: {},
13
+ ar: {},
14
+ hr: {}
15
+ };
16
+ const translate$2 = (key, customLang, replacements) => {
17
+ const lang = customLang;
18
+ let translation = TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
19
+ if (replacements) {
20
+ Object.keys(replacements).forEach((placeholder) => {
21
+ translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
22
+ });
23
+ }
24
+ return translation;
25
+ };
26
+ const getTranslations$2 = (data) => {
27
+ Object.keys(data).forEach((item) => {
28
+ for (let key in data[item]) {
29
+ TRANSLATIONS$2[item][key] = data[item][key];
30
+ }
31
+ });
32
+ };
33
+ const resolveTranslationUrl$1 = async (translationUrl) => {
34
+ if (translationUrl) {
35
+ try {
36
+ const response = await fetch(translationUrl);
37
+ if (!response.ok) {
38
+ throw new Error(`HTTP error! status: ${response.status}`);
39
+ }
40
+ const translations = await response.json();
41
+ getTranslations$2(translations);
42
+ }
43
+ catch (error) {
44
+ console.error('Failed to fetch or parse translations from URL:', error);
45
+ }
46
+ }
47
+ };
48
+
49
+ const lotteryButtonCss = ":host{display:inline-block}.btn{font:inherit;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--lottery-button-border-radius, 6px);font-weight:var(--lottery-button-font-weight, 500);cursor:pointer;outline:none;overflow:hidden;transition:var(--lottery-button-transition, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s);user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--lottery-button-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.5))}.btn .content{position:relative;display:inline-flex;align-items:center;gap:var(--lottery-button-content-gap, 0.5em)}.btn .content ::slotted(span){display:inline-flex;align-items:center}.btn:hover:not(:disabled){box-shadow:var(--lottery-button-hover-box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.5))}.btn:disabled{cursor:not-allowed;opacity:var(--lottery-button-disabled-opacity, 0.5)}.btn .loading-container{display:flex;align-items:center}.btn--loading{position:relative}.btn .spinner{display:inline-block;width:1em;height:1em;border:var(--lottery-button-spinner-border, 2px solid rgba(255, 255, 255, 0.3));border-radius:50%;border-top-color:var(--lottery-button-spinner-color, white);animation:spin 1s ease-in-out infinite;margin-left:0.5em;vertical-align:middle}.btn--small .spinner{width:0.8em;height:0.8em}.btn--large .spinner{width:1.2em;height:1.2em}@keyframes spin{to{transform:rotate(360deg)}}.btn--primary{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff)}.btn--primary:hover:not(:disabled){background-color:var(--emw--color-primary-variant, #1367e7)}.btn--primary:active:not(:disabled){background-color:var(--lottery-button-primary-active-bg, #08104a)}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:var(--lottery-button-spinner-inverse-border-color, rgba(0, 0, 0, 0.2))}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:var(--lottery-button-outline-border-color, #dcdcdc);color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:var(--lottery-button-outline-hover-border-color, #a6a6a6)}.btn--outline:active:not(:disabled){background-color:var(--lottery-button-outline-active-bg, #e6e6e6)}.btn--dashed{background-color:transparent;border-style:dashed;border-color:var(--lottery-button-dashed-border-color, #dcdcdc);color:var(--lottery-button-dashed-color, #333)}.btn--dashed:hover:not(:disabled){border-color:var(--lottery-button-dashed-hover-border-color, #a6a6a6);color:var(--lottery-button-dashed-hover-color, #0052d9)}.btn--text{background-color:transparent;color:var(--lottery-button-text-color, #0052d9);border-color:transparent}.btn--text:hover:not(:disabled){background-color:var(--lottery-button-text-hover-bg, #f2f2f2)}.btn--text:active:not(:disabled){background-color:var(--lottery-button-text-active-bg, #e6e6e6)}.btn--custom-color:hover:not(:disabled){opacity:var(--lottery-button-custom-hover-opacity, 0.9)}.btn--custom-color:active:not(:disabled){opacity:var(--lottery-button-custom-active-opacity, 0.8)}.btn--small{height:var(--lottery-button-small-height, 28px);font-size:var(--lottery-button-small-font-size, 12px);padding:var(--lottery-button-small-padding, 0 12px)}.btn--medium{height:var(--lottery-button-medium-height, 34px);font-size:var(--lottery-button-medium-font-size, 14px);padding:var(--lottery-button-medium-padding, 0 18px)}.btn--large{height:var(--lottery-button-large-height, 40px);font-size:var(--lottery-button-large-font-size, 16px);padding:var(--lottery-button-large-padding, 0 24px)}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit}.ripple{position:absolute;border-radius:50%;background-color:var(--lottery-button-ripple-light, rgba(255, 255, 255, 0.3));transform:scale(0);animation:ripple-animation 600ms linear}.btn--outline .ripple,.btn--dashed .ripple,.btn--text .ripple{background-color:var(--lottery-button-ripple-dark, rgba(0, 0, 0, 0.03))}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
50
+ const LotteryButtonStyle0 = lotteryButtonCss;
51
+
52
+ const LotteryButton = class {
53
+ constructor(hostRef) {
54
+ registerInstance(this, hostRef);
55
+ this.handleClick = (event) => {
56
+ if (this.disabled) {
57
+ return;
58
+ }
59
+ // Get the button element from the shadow root
60
+ const button = this.host.shadowRoot.querySelector('.btn');
61
+ if (!button)
62
+ return;
63
+ const rect = button.getBoundingClientRect();
64
+ const size = Math.max(rect.width, rect.height);
65
+ const top = event.clientY - rect.top - size / 2;
66
+ const left = event.clientX - rect.left - size / 2;
67
+ // Add the new ripple to the state, triggering a re-render
68
+ const newRipple = { top, left, size };
69
+ this.ripples = [...this.ripples, newRipple];
70
+ // Set a timeout to clean up the ripple from the state after the animation ends
71
+ // This prevents the DOM from filling up with old ripple elements
72
+ setTimeout(() => {
73
+ this.ripples = this.ripples.filter((r) => r !== newRipple);
74
+ }, 600); // This duration should match the CSS animation duration
75
+ };
76
+ this.variant = 'primary';
77
+ this.size = 'medium';
78
+ this.color = undefined;
79
+ this.disabled = false;
80
+ this.loading = false;
81
+ this.text = undefined;
82
+ this.mbSource = undefined;
83
+ this.language = 'en';
84
+ this.clientStyling = undefined;
85
+ this.clientStylingUrl = undefined;
86
+ this.translationUrl = '';
87
+ this.ripples = [];
88
+ }
89
+ handleClientStylingChange(newValue, oldValue) {
90
+ if (newValue != oldValue) {
91
+ setClientStyling(this.stylingContainer, this.clientStyling);
92
+ }
93
+ }
94
+ handleClientStylingUrlChange(newValue, oldValue) {
95
+ if (newValue != oldValue) {
96
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
97
+ }
98
+ }
99
+ handleMbSourceChange(newValue, oldValue) {
100
+ if (newValue != oldValue) {
101
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
102
+ }
103
+ }
104
+ disconnectedCallback() {
105
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
106
+ }
107
+ componentDidLoad() {
108
+ if (this.stylingContainer) {
109
+ if (this.mbSource)
110
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
111
+ if (this.clientStyling)
112
+ setClientStyling(this.stylingContainer, this.clientStyling);
113
+ if (this.clientStylingUrl)
114
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
115
+ }
116
+ }
117
+ componentWillLoad() {
118
+ if (this.translationUrl) {
119
+ resolveTranslationUrl$1(this.translationUrl);
120
+ }
121
+ }
122
+ render() {
123
+ const { variant, disabled, size, color } = this;
124
+ const isDisabled = disabled || this.loading;
125
+ // Calculate styles based on variant and color
126
+ const buttonStyles = {};
127
+ if (color) {
128
+ switch (variant) {
129
+ case 'primary':
130
+ Object.assign(buttonStyles, {
131
+ backgroundColor: color,
132
+ borderColor: color
133
+ });
134
+ break;
135
+ case 'outline':
136
+ case 'dashed':
137
+ Object.assign(buttonStyles, {
138
+ color: color,
139
+ borderColor: color
140
+ });
141
+ break;
142
+ case 'text':
143
+ Object.assign(buttonStyles, {
144
+ color: color
145
+ });
146
+ break;
147
+ default:
148
+ Object.assign(buttonStyles, {
149
+ backgroundColor: color,
150
+ borderColor: color
151
+ });
152
+ }
153
+ }
154
+ return (h("button", { key: 'aa74ad98c90e7548228557bf8a8d26b125d4a83a', class: {
155
+ btn: true,
156
+ [`btn--${variant}`]: true,
157
+ [`btn--${size}`]: true,
158
+ 'btn--loading': this.loading
159
+ }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate$2('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, h("slot", { name: "icon-left" }), this.text || h("slot", null), h("slot", { name: "icon-right" }))), h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
160
+ top: `${ripple.top}px`,
161
+ left: `${ripple.left}px`,
162
+ width: `${ripple.size}px`,
163
+ height: `${ripple.size}px`
164
+ } }))))));
165
+ }
166
+ get host() { return getElement(this); }
167
+ static get watchers() { return {
168
+ "clientStyling": ["handleClientStylingChange"],
169
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
170
+ "mbSource": ["handleMbSourceChange"]
171
+ }; }
172
+ };
173
+ LotteryButton.style = LotteryButtonStyle0;
174
+
175
+ // This icon file is generated automatically.
176
+ var DeleteFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" } }] }, "name": "delete", "theme": "filled" };
177
+ const DeleteFilled$1 = DeleteFilled;
178
+
179
+ var __assign = (undefined && undefined.__assign) || function () {
180
+ __assign = Object.assign || function(t) {
181
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
182
+ s = arguments[i];
183
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
184
+ t[p] = s[p];
185
+ }
186
+ return t;
187
+ };
188
+ return __assign.apply(this, arguments);
189
+ };
190
+ var defaultColors = {
191
+ primaryColor: '#333',
192
+ secondaryColor: '#E6E6E6'
193
+ };
194
+ function renderIconDefinitionToSVGElement(icond, options) {
195
+ if (options === void 0) { options = {}; }
196
+ if (typeof icond.icon === 'function') {
197
+ // two-tone
198
+ var placeholders = options.placeholders || defaultColors;
199
+ return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
200
+ }
201
+ // fill, outline
202
+ return renderAbstractNodeToSVGElement(icond.icon, options);
203
+ }
204
+ function renderAbstractNodeToSVGElement(node, options) {
205
+ var targetAttrs = node.tag === 'svg'
206
+ ? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
207
+ var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
208
+ var key = nextKey;
209
+ var value = targetAttrs[key];
210
+ var token = "".concat(key, "=\"").concat(value, "\"");
211
+ acc.push(token);
212
+ return acc;
213
+ }, []);
214
+ var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
215
+ var children = (node.children || [])
216
+ .map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
217
+ .join('');
218
+ if (children && children.length) {
219
+ return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
220
+ }
221
+ return "<".concat(node.tag).concat(attrsToken, " />");
222
+ }
223
+
224
+ // Basic sanitization method for SVG content
225
+ // This is NOT a complete XSS prevention for SVG, but prevents common attacks.
226
+ function sanitizeSvg(svgString) {
227
+ let sanitized = svgString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ''); // Remove <script> tags
228
+ sanitized = sanitized.replace(/on[a-z]+=[\"'][^\"']*[\"']/gi, ''); // Remove on* attributes
229
+ sanitized = sanitized.replace(/javascript:/gi, ''); // Remove javascript: URLs
230
+ return sanitized;
231
+ }
232
+
233
+ const lotterySelectionCss = ":host{display:inline-block}.lottery-selection__button{display:flex;align-items:center;justify-content:center;width:var(--lottery-selection-width, 32px);height:var(--lottery-selection-height, 32px);padding:var(--lottery-selection-padding, 0);box-sizing:border-box;background:var(--lottery-selection-background, var(--emw--color-background, #fff));border:var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));border-radius:var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));color:var(--lottery-selection-color, var(--emw--color-typography, #000));font-weight:var(--lottery-selection-font-weight, bold);font-size:var(--lottery-selection-font-size, 1em);cursor:pointer;user-select:none;}.lottery-selection__button:hover{background:var(--lottery-selection-hover-background, var(--emw--color-background, #fff));border-color:var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-hover-color, var(--emw--color-typography, #000))}.lottery-selection__button .lottery-selection__delete-icon{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon{display:flex;align-items:center;justify-content:center;fill:var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));vertical-align:middle}.lottery-selection__button.lottery-selection__button--selected{background-color:var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));border-color:var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff))}.lottery-selection__button.lottery-selection__button--disabled{background-color:var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));border-color:var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));color:var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));cursor:not-allowed;pointer-events:none;}.lottery-selection__button.lottery-selection__button--no-border{border:none}.lottery-selection__button.lottery-selection__button--no-background{background:transparent}";
234
+ const LotterySelectionStyle0 = lotterySelectionCss;
235
+
236
+ const LotterySelection = class {
237
+ constructor(hostRef) {
238
+ registerInstance(this, hostRef);
239
+ this.lotteryBulletClickHandler = createEvent(this, "lotteryBulletClick", 7);
240
+ this.value = 0;
241
+ this.text = undefined;
242
+ this.idx = undefined;
243
+ this.type = 'toggle';
244
+ this.mbSource = undefined;
245
+ this.clientStyling = undefined;
246
+ this.clientStylingUrl = undefined;
247
+ this.hasBorder = true;
248
+ this.hasBackground = true;
249
+ this.deleteIconSvg = '';
250
+ this.deleteIconWidth = '16px';
251
+ this.deleteIconHeight = '16px';
252
+ }
253
+ handleClientStylingChange(newValue, oldValue) {
254
+ if (newValue !== oldValue) {
255
+ setClientStyling(this.stylingContainer, this.clientStyling);
256
+ }
257
+ }
258
+ handleClientStylingUrlChange(newValue, oldValue) {
259
+ if (newValue !== oldValue) {
260
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
261
+ }
262
+ }
263
+ handleMbSourceChange(newValue, oldValue) {
264
+ if (newValue !== oldValue) {
265
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
266
+ }
267
+ }
268
+ componentDidLoad() {
269
+ if (this.stylingContainer) {
270
+ if (this.mbSource)
271
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
272
+ if (this.clientStyling)
273
+ setClientStyling(this.stylingContainer, this.clientStyling);
274
+ if (this.clientStylingUrl)
275
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
276
+ }
277
+ }
278
+ disconnectedCallback() {
279
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
280
+ }
281
+ handleClick() {
282
+ if (this.type === 'disabled' || this.type === 'readonly') {
283
+ return;
284
+ }
285
+ console.log('bullet clicked', this.type, this.idx, this.text, this.value);
286
+ this.lotteryBulletClickHandler.emit({
287
+ type: this.type,
288
+ idx: this.idx,
289
+ text: this.text,
290
+ value: this.value
291
+ });
292
+ }
293
+ render() {
294
+ let iconToRender;
295
+ if (this.deleteIconSvg) {
296
+ iconToRender = sanitizeSvg(this.deleteIconSvg);
297
+ }
298
+ else {
299
+ iconToRender = renderIconDefinitionToSVGElement(DeleteFilled$1, {
300
+ extraSVGAttrs: {
301
+ width: this.deleteIconWidth,
302
+ height: this.deleteIconHeight,
303
+ fill: 'currentColor'
304
+ }
305
+ });
306
+ }
307
+ return (h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, h("button", { key: '11a2402abbc290dc877ad95f3433092c3a0d8419', class: {
308
+ 'lottery-selection__button': true,
309
+ 'lottery-selection__button--selected': this.value == 1,
310
+ 'lottery-selection__button--disabled': this.type === 'disabled',
311
+ 'lottery-selection__button--no-border': !this.hasBorder,
312
+ 'lottery-selection__button--no-background': !this.hasBackground,
313
+ isDeleteByIcon: this.type === 'delete',
314
+ isCallDialogBtn: this.type === 'input' || this.type === 'readonly'
315
+ }, onClick: this.handleClick.bind(this), disabled: this.type === 'disabled' }, this.type === 'delete' && h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), h("span", { key: '55775e2492a1fe45cc8a457ac0a0d206744461ab', class: "lottery-selection__text" }, this.text))));
316
+ }
317
+ static get watchers() { return {
318
+ "clientStyling": ["handleClientStylingChange"],
319
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
320
+ "mbSource": ["handleMbSourceChange"]
321
+ }; }
322
+ };
323
+ LotterySelection.style = LotterySelectionStyle0;
324
+
325
+ const DEFAULT_LANGUAGE$1 = 'en';
326
+ const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
327
+ const TRANSLATIONS$1 = {
328
+ en: {
329
+ noTicketBoard: 'No ticket board available.',
330
+ selectionCleared: 'Your selection has been cleared.',
331
+ clearAll: 'Clear All',
332
+ stopAt: 'Stop at',
333
+ turnover: 'Turnover: ',
334
+ pleaseFillIn: 'Please fill in all the selection input!',
335
+ fillIn: 'Fill in',
336
+ noBets: 'Sorry. No bets have been placed so far. Check back later!',
337
+ search: 'Search',
338
+ clear: 'Clear',
339
+ oddsChart: 'Odds Chart',
340
+ ticketSuccess: 'Ticket purchased successfully.',
341
+ stakePerLine: 'Stake per Line:',
342
+ lowestOdds: 'Lowest Odds:',
343
+ highestOdds: 'Highest Odds:',
344
+ orderSummary: 'ORDER SUMMARY',
345
+ ticket: 'Ticket',
346
+ lines: 'Lines',
347
+ total: 'Total',
348
+ submit: 'Submit',
349
+ loading: 'Loading',
350
+ enterValidNumber: 'Please enter a valid number.',
351
+ enterNumberBetween: 'Please enter a number between {min} and {max}.',
352
+ numberAlreadySelected: 'This number has already been selected.',
353
+ enterScoreUpTo: 'Please enter the score (Up to {maxScore})',
354
+ enterValue: 'Please enter a value',
355
+ myChoices: 'My Choices',
356
+ teams: 'Teams',
357
+ scores: 'Scores',
358
+ euro: 'Euro',
359
+ cancel: 'Cancel',
360
+ confirm: 'Confirm'
361
+ },
362
+ ro: {},
363
+ fr: {},
364
+ ar: {},
365
+ hr: {}
366
+ };
367
+ const translate$1 = (key, customLang, replacements) => {
368
+ const lang = customLang;
369
+ let translation = TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
370
+ if (replacements) {
371
+ Object.keys(replacements).forEach((placeholder) => {
372
+ translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
373
+ });
374
+ }
375
+ return translation;
376
+ };
377
+ const getTranslations$1 = (data) => {
378
+ Object.keys(data).forEach((item) => {
379
+ for (let key in data[item]) {
380
+ TRANSLATIONS$1[item][key] = data[item][key];
381
+ }
382
+ });
383
+ };
384
+
385
+ function getBulletTextsSet(bulletTexts, splitToken) {
386
+ return new Set(bulletTexts ? bulletTexts.split(splitToken) : []);
387
+ }
388
+ function validateInput({ value, selectedSet, maxValue, minValue, language, type = 'integer' }) {
389
+ const trimmedValue = value.trim();
390
+ if (type === 'integer') {
391
+ // Strict integer check
392
+ if (!/^-?\d+$/.test(trimmedValue)) {
393
+ return {
394
+ valid: false,
395
+ errorMessage: translate$1('enterValidNumber', language),
396
+ value
397
+ };
398
+ }
399
+ const numValue = Number(trimmedValue);
400
+ if (isNaN(numValue)) {
401
+ return {
402
+ valid: false,
403
+ errorMessage: translate$1('enterValidNumber', language),
404
+ value
405
+ };
406
+ }
407
+ if ((minValue !== undefined && numValue < minValue) || (maxValue !== undefined && numValue > maxValue)) {
408
+ return {
409
+ valid: false,
410
+ errorMessage: translate$1('enterNumberBetween', language, {
411
+ min: minValue,
412
+ max: maxValue
413
+ }),
414
+ value
415
+ };
416
+ }
417
+ // Normalize value (e.g. "05" -> "5") for set check
418
+ const normalizedValue = String(numValue);
419
+ if (selectedSet.has(normalizedValue)) {
420
+ return {
421
+ valid: false,
422
+ errorMessage: translate$1('numberAlreadySelected', language),
423
+ value
424
+ };
425
+ }
426
+ }
427
+ else {
428
+ // Text mode validation
429
+ if (selectedSet.has(trimmedValue)) {
430
+ return {
431
+ valid: false,
432
+ errorMessage: translate$1('numberAlreadySelected', language), // Or generic 'alreadySelected' if available, but reusing key for now
433
+ value
434
+ };
435
+ }
436
+ }
437
+ return {
438
+ valid: true,
439
+ errorMessage: '',
440
+ value
441
+ };
442
+ }
443
+ function removeBulletTexts(text, selectedArr) {
444
+ return selectedArr.filter((s) => s !== text);
445
+ }
446
+ function addSelectedBulletTexts(text, selectedArr) {
447
+ return selectedArr.concat([text]);
448
+ }
449
+ function removeAndAddSelectedBulletTexts(text, selectedArr, maxSelectedCount) {
450
+ return selectedArr.slice(selectedArr.length - (maxSelectedCount - 1)).concat([text]);
451
+ }
452
+ function buildSelectedBulletTextsArr(item, selectedArr, maxSelectedCount) {
453
+ if (item.type === 'delete') {
454
+ return removeBulletTexts(item.text, selectedArr);
455
+ }
456
+ if (item.type === 'toggle') {
457
+ if (selectedArr.includes(item.text)) {
458
+ return removeBulletTexts(item.text, selectedArr);
459
+ }
460
+ if (selectedArr.length >= maxSelectedCount) {
461
+ return removeAndAddSelectedBulletTexts(item.text, selectedArr, maxSelectedCount);
462
+ }
463
+ return addSelectedBulletTexts(item.text, selectedArr);
464
+ }
465
+ return [];
466
+ }
467
+
468
+ const lotterySelectionGroupCss = ":host {\n width: 100%;\n}\n\n.lottery-selection-group {\n container-type: inline-size;\n padding: var(--lottery-selection-group-padding, 0);\n background: var(--lottery-selection-group-background, transparent);\n border: var(--lottery-selection-group-border, none);\n border-radius: var(--lottery-selection-group-border-radius, 0);\n}\n.lottery-selection-group__item {\n display: flex;\n flex-direction: var(--lottery-selection-group-flex-direction, row);\n align-items: var(--lottery-selection-group-item-align, center);\n justify-content: var(--lottery-selection-group-item-justify, flex-start);\n gap: var(--lottery-selection-group-item-gap, 16px);\n width: 100%;\n}\n.lottery-selection-group__item--left {\n width: var(--lottery-selection-group-label-width, 130px);\n min-width: var(--lottery-selection-group-label-min-width, auto);\n max-width: var(--lottery-selection-group-label-max-width, none);\n color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));\n font-size: var(--lottery-selection-group-label-font-size, 1em);\n font-weight: var(--lottery-selection-group-label-font-weight, bold);\n text-align: var(--lottery-selection-group-label-align, left);\n white-space: var(--lottery-selection-group-label-white-space, normal);\n}\n.lottery-selection-group__item--right {\n flex: 1;\n display: flex;\n flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */\n gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */\n align-items: var(--lottery-selection-group-bullets-align, center);\n justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */\n}\n@container (max-width: 320px) {\n .lottery-selection-group__item--left {\n width: 100px;\n max-width: 100px;\n }\n}\n\n.dialog-input {\n width: 100%;\n padding: var(--lottery-selection-group-input-padding, 8px);\n border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));\n border-radius: var(--lottery-selection-group-input-radius, 4px);\n background-color: var(--lottery-selection-group-input-bg, #fff);\n color: var(--lottery-selection-group-input-color, #000);\n box-sizing: border-box;\n margin-top: var(--lottery-selection-group-input-margin-top, 10px);\n font-size: var(--lottery-selection-group-input-font-size, 1em);\n}\n.dialog-input::placeholder {\n color: var(--lottery-selection-group-input-placeholder-color, #999);\n}\n\n.dialog-input.invalid,\n.dialog-input.invalid:focus {\n border-color: var(--emw--color-error, #ff3d00);\n outline-color: var(--emw--color-error, #ff3d00);\n}\n\n.error-message {\n color: var(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));\n font-size: var(--lottery-selection-group-error-font-size, 12px);\n font-weight: var(--lottery-selection-group-error-font-weight, normal);\n margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));\n font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);\n font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);\n margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);\n}\n.addSelectionDialog-footer {\n display: flex;\n justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);\n gap: var(--lottery-selection-group-dialog-footer-gap, 18px);\n margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);\n}";
469
+ const LotterySelectionGroupStyle0 = lotterySelectionGroupCss;
470
+
471
+ const LotterySelectionGroup = class {
472
+ constructor(hostRef) {
473
+ registerInstance(this, hostRef);
474
+ this.bulletGroupUpdateSelectedBulletTexts = createEvent(this, "bulletGroupUpdateSelection", 7);
475
+ this.mbSource = undefined;
476
+ this.clientStyling = undefined;
477
+ this.clientStylingUrl = undefined;
478
+ this.language = 'en';
479
+ this.translationUrl = '';
480
+ this.splitToken = ',';
481
+ this.selectionGroupId = undefined;
482
+ this.selectionGroupLabel = undefined;
483
+ this.type = 'bet';
484
+ this.selectedBulletTexts = null;
485
+ this.maxSelectedCount = null;
486
+ this.maxDisplayBulletsCount = 11;
487
+ this.bulletTexts = null;
488
+ this.maxIntegerBulletText = null;
489
+ this.minIntegerBulletText = 0;
490
+ this.bulletTextType = 'integer';
491
+ this.hasBorder = true;
492
+ this.hasBackground = true;
493
+ this.dialogTitle = undefined;
494
+ this.dialogInputPlaceholder = undefined;
495
+ this.dialogConfig = {
496
+ width: '400px',
497
+ visible: false,
498
+ onConfirm: () => this.handleFillInAddMore(),
499
+ onCancel: () => this.handleCloseAddMoreDialog()
500
+ };
501
+ this.inputInfo = { valid: true, errorMessage: '', value: '' };
502
+ }
503
+ handleClientStylingChange(newValue, oldValue) {
504
+ if (newValue != oldValue) {
505
+ setClientStyling(this.stylingContainer, this.clientStyling);
506
+ }
507
+ }
508
+ handleClientStylingUrlChange(newValue, oldValue) {
509
+ if (newValue != oldValue) {
510
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
511
+ }
512
+ }
513
+ handleMbSourceChange(newValue, oldValue) {
514
+ if (newValue != oldValue) {
515
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
516
+ }
517
+ }
518
+ componentWillLoad() {
519
+ if (this.translationUrl) {
520
+ getTranslations$1(JSON.parse(this.translationUrl));
521
+ }
522
+ }
523
+ componentDidLoad() {
524
+ if (this.stylingContainer) {
525
+ if (this.mbSource)
526
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
527
+ if (this.clientStyling)
528
+ setClientStyling(this.stylingContainer, this.clientStyling);
529
+ if (this.clientStylingUrl)
530
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
531
+ }
532
+ }
533
+ disconnectedCallback() {
534
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
535
+ }
536
+ lotteryBulletClickHandler(event) {
537
+ event.stopPropagation();
538
+ // if it's input type, open the dialog
539
+ if (event.detail.type === 'input') {
540
+ this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
541
+ return;
542
+ }
543
+ if (['delete', 'toggle'].includes(event.detail.type)) {
544
+ this.bulletGroupUpdateSelectedBulletTexts.emit({
545
+ newSelectedBulletTexts: buildSelectedBulletTextsArr(event.detail, Array.from(this.selectedSet), this.maxSelectedCount).join(this.splitToken),
546
+ selectionGroupId: this.selectionGroupId
547
+ });
548
+ return;
549
+ }
550
+ }
551
+ get selectedSet() {
552
+ return getBulletTextsSet(this.selectedBulletTexts, this.splitToken);
553
+ }
554
+ get bulletTextsSet() {
555
+ if (this.bulletTexts)
556
+ return getBulletTextsSet(this.bulletTexts, this.splitToken);
557
+ if (this.bulletTextType === 'integer' &&
558
+ this.maxIntegerBulletText !== null &&
559
+ this.maxIntegerBulletText !== undefined) {
560
+ return getBulletTextsSet(Array.from({ length: Number(this.lastDisplayBulletText) - this.minIntegerBulletText + 1 }, (_, index) => this.minIntegerBulletText + index).join(this.splitToken), this.splitToken);
561
+ }
562
+ // If neither bulletTexts nor maxIntegerBulletText are provided,
563
+ return new Set();
564
+ }
565
+ // the last bullet text
566
+ get lastDisplayBulletText() {
567
+ if (this.bulletTextType === 'integer') {
568
+ if (this.maxIntegerBulletText !== null && this.maxIntegerBulletText !== undefined) {
569
+ return Math.min(this.maxIntegerBulletText, this.minIntegerBulletText + this.maxDisplayBulletsCount - 1);
570
+ }
571
+ return this.minIntegerBulletText + this.maxDisplayBulletsCount - 1;
572
+ }
573
+ // Text mode: return the text at the max display index if available
574
+ if (this.bulletTextsSet.size > 0) {
575
+ const texts = Array.from(this.bulletTextsSet);
576
+ if (texts.length >= this.maxDisplayBulletsCount) {
577
+ return texts[this.maxDisplayBulletsCount - 1];
578
+ }
579
+ return texts[texts.length - 1]; // If fewer than maxDisplayBulletsCount, return the last one
580
+ }
581
+ return null;
582
+ }
583
+ get isSingleSelectionMode() {
584
+ return this.maxSelectedCount === 1;
585
+ }
586
+ getBulletToRender() {
587
+ const allBulletTexts = Array.from(this.bulletTextsSet);
588
+ // Determine which bullets to display based on type and limit
589
+ let bulletsToRender = allBulletTexts;
590
+ let showInputButton = false;
591
+ if (this.bulletTextType === 'text') {
592
+ // For text, if we have more items than the limit, we need an input button.
593
+ // The input button takes one slot, so we show (limit - 1) items.
594
+ if (allBulletTexts.length > this.maxDisplayBulletsCount) {
595
+ showInputButton = true;
596
+ bulletsToRender = allBulletTexts.slice(0, this.maxDisplayBulletsCount - 1);
597
+ }
598
+ else {
599
+ bulletsToRender = allBulletTexts;
600
+ }
601
+ }
602
+ else {
603
+ // For integer, logic is based on maxIntegerBulletText vs displayed range
604
+ showInputButton =
605
+ this.maxIntegerBulletText !== null &&
606
+ this.maxIntegerBulletText !== undefined &&
607
+ this.maxIntegerBulletText > Number(this.lastDisplayBulletText);
608
+ // Integer bullets generation already respects the count, no slicing needed on the raw set
609
+ bulletsToRender = allBulletTexts;
610
+ }
611
+ return {
612
+ bulletsToRender,
613
+ showInputButton
614
+ };
615
+ }
616
+ renderBulletGroup() {
617
+ let items = [];
618
+ if (this.type === 'bet') {
619
+ const isMaxSelected = this.maxSelectedCount !== null && this.selectedSet.size >= this.maxSelectedCount;
620
+ const { bulletsToRender, showInputButton } = this.getBulletToRender();
621
+ bulletsToRender.forEach((text, idx) => {
622
+ let bulletType = 'toggle';
623
+ if (!this.selectedSet.has(String(text)) && isMaxSelected && !this.isSingleSelectionMode) {
624
+ bulletType = 'disabled';
625
+ }
626
+ items.push({
627
+ value: this.selectedSet.has(String(text)) ? 1 : 0,
628
+ text: String(text),
629
+ idx,
630
+ type: bulletType
631
+ });
632
+ });
633
+ if (showInputButton) {
634
+ let inputBulletType = 'input';
635
+ if (isMaxSelected && !this.isSingleSelectionMode) {
636
+ inputBulletType = 'disabled';
637
+ }
638
+ const inputButtonText = this.bulletTextType === 'text' ? '...' : `${this.lastDisplayBulletText}+`;
639
+ const inputButtonIdx = this.bulletTextType === 'text' ? -1 : Number(this.lastDisplayBulletText) + 1;
640
+ // Special handling for integer mode:
641
+ // If the generated set is "full" (size == maxDisplayBulletsCount),
642
+ // we need to remove the last item to make room for the "N+" button
643
+ // so the total visual count remains consistent.
644
+ if (this.bulletTextType === 'integer' && items.length >= this.maxDisplayBulletsCount) {
645
+ items.pop();
646
+ }
647
+ items.push({
648
+ value: 0,
649
+ text: inputButtonText,
650
+ idx: inputButtonIdx,
651
+ type: inputBulletType
652
+ });
653
+ }
654
+ }
655
+ else if (['choice', 'preview'].includes(this.type)) {
656
+ // For choice/preview, also respect the visual limit for text mode
657
+ const { bulletsToRender } = this.getBulletToRender();
658
+ bulletsToRender.forEach((text, idx) => {
659
+ let bulletType = 'toggle';
660
+ if (this.type === 'preview') {
661
+ bulletType = 'readonly';
662
+ }
663
+ else if (this.selectedSet.has(String(text))) {
664
+ bulletType = 'delete';
665
+ }
666
+ items.push({
667
+ value: this.selectedSet.has(String(text)) ? 1 : 0,
668
+ text,
669
+ idx,
670
+ type: bulletType
671
+ });
672
+ });
673
+ }
674
+ return (h("div", { class: "lottery-selection-group__item--right" }, items.map((item) => {
675
+ return (h("lottery-selection", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, text: item.text, idx: item.idx, value: item.value, type: item.type, hasBorder: this.hasBorder, hasBackground: this.hasBackground }));
676
+ })));
677
+ }
678
+ handleCloseAddMoreDialog() {
679
+ this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
680
+ this.inputInfo = { value: '', errorMessage: '', valid: true };
681
+ }
682
+ handleInputChange(e) {
683
+ const inputElement = e.target;
684
+ const value = inputElement.value;
685
+ this.inputInfo = Object.assign(Object.assign({}, this.inputInfo), { value: value });
686
+ this.inputInfo = validateInput({
687
+ value,
688
+ selectedSet: this.selectedSet,
689
+ maxValue: this.maxIntegerBulletText,
690
+ minValue: this.bulletTextType === 'integer' ? Number(this.lastDisplayBulletText) + 1 : undefined,
691
+ language: this.language,
692
+ type: this.bulletTextType
693
+ });
694
+ }
695
+ handleFillInAddMore() {
696
+ if (this.inputInfo.valid) {
697
+ const { value } = this.inputInfo;
698
+ // Normalize the value (e.g., "05" -> "5") to match validation logic
699
+ let normalizedValue = value;
700
+ if (this.bulletTextType === 'integer') {
701
+ normalizedValue = String(Number(value));
702
+ }
703
+ else {
704
+ normalizedValue = value.trim();
705
+ }
706
+ let newSelectedBulletTexts;
707
+ if (this.isSingleSelectionMode) {
708
+ newSelectedBulletTexts = normalizedValue;
709
+ }
710
+ else {
711
+ newSelectedBulletTexts = addSelectedBulletTexts(normalizedValue, Array.from(this.selectedSet)).join(this.splitToken);
712
+ }
713
+ this.bulletGroupUpdateSelectedBulletTexts.emit({
714
+ newSelectedBulletTexts,
715
+ selectionGroupId: this.selectionGroupId
716
+ });
717
+ this.handleCloseAddMoreDialog();
718
+ }
719
+ }
720
+ render() {
721
+ return (h("div", { key: '66b8e9c63d948eb2f7eb37adb80892dbedd7df9a', class: "lottery-selection-group", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6562fdcad0f352b5e2d03edcc980a9aeab32277e', class: "lottery-selection-group__item" }, this.selectionGroupLabel && (h("div", { key: '43c2132e4904a2b69b970d9b2074f120ed4d0986', class: "lottery-selection-group__item--left" }, this.selectionGroupLabel)), this.renderBulletGroup()), h("lottery-tipping-dialog", { key: 'cb693d10e6b499628909571021d8508cdebbe29a', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.dialogConfig.onCancel }, h("div", { key: 'dd312634574bbe1b4d3de7e82a9c58f58f846c1a', class: "addSelectionDialog" }, h("div", { key: 'b371b1090598f0219a7c652bab51e9d349703c34', class: "addSelectionDialog-title" }, this.dialogTitle || (this.bulletTextType === 'text'
722
+ ? translate$1('enterValue', this.language)
723
+ : translate$1('enterScoreUpTo', this.language, {
724
+ maxScore: this.maxIntegerBulletText
725
+ }))), h("input", { key: 'b5f1bb74999246dac8dc20f04e3af893deae6654', type: "text", class: {
726
+ 'dialog-input': true,
727
+ invalid: !this.inputInfo.valid
728
+ }, value: this.inputInfo.value, onInput: this.handleInputChange.bind(this), placeholder: this.dialogInputPlaceholder }), h("div", { key: 'f33970a6dffdc881ffa9cf2c0bb54b26b27cccd6', class: "error-message" }, this.inputInfo.errorMessage)), h("div", { key: '4c580dae14b38aff03e17067b2c0b72d01aa4f42', slot: "footer", class: "addSelectionDialog-footer" }, h("lottery-button", { key: '874aa0ffde8fe2d0b08efea0cf951f101ab8dad0', onClick: this.dialogConfig.onCancel, text: translate$1('cancel', this.language), variant: "outline" }), h("lottery-button", { key: '63a556eb5f9ad1cdd357c017756be274d40ef235', onClick: this.dialogConfig.onConfirm, text: translate$1('confirm', this.language), variant: "primary", disabled: !this.inputInfo.valid || !this.inputInfo.value })))));
729
+ }
730
+ static get watchers() { return {
731
+ "clientStyling": ["handleClientStylingChange"],
732
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
733
+ "mbSource": ["handleMbSourceChange"]
734
+ }; }
735
+ };
736
+ LotterySelectionGroup.style = LotterySelectionGroupStyle0;
737
+
738
+ const DEFAULT_LANGUAGE = 'en';
739
+ const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
740
+ const TRANSLATIONS = {
741
+ en: {
742
+ cancel: 'Cancel',
743
+ confirm: 'Confirm'
744
+ },
745
+ ro: {
746
+ cancel: 'Anulează',
747
+ confirm: 'Confirmă'
748
+ },
749
+ fr: {
750
+ cancel: 'Annuler',
751
+ confirm: 'Confirmer'
752
+ },
753
+ ar: {
754
+ cancel: 'إلغاء',
755
+ confirm: 'تأكيد'
756
+ },
757
+ hr: {
758
+ cancel: 'Odustani',
759
+ confirm: 'Potvrdi'
760
+ }
761
+ };
762
+ const translate = (key, customLang) => {
763
+ const lang = customLang;
764
+ return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
765
+ };
766
+ const getTranslations = (data) => {
767
+ Object.keys(data).forEach((item) => {
768
+ for (let key in data[item]) {
769
+ TRANSLATIONS[item][key] = data[item][key];
770
+ }
771
+ });
772
+ };
773
+ const resolveTranslationUrl = async (translationUrl) => {
774
+ if (translationUrl) {
775
+ try {
776
+ const response = await fetch(translationUrl);
777
+ if (!response.ok) {
778
+ throw new Error(`HTTP error! status: ${response.status}`);
779
+ }
780
+ const translations = await response.json();
781
+ getTranslations(translations);
782
+ }
783
+ catch (error) {
784
+ console.error('Failed to fetch or parse translations from URL:', error);
785
+ }
786
+ }
787
+ };
788
+
789
+ const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));background-color:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000)}.dialog-footer .cancel-btn:hover{background-color:var(--emw--color-background-tertiary, #ccc)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-typography-normalized, #ffffff);background:var(--emw--color-primary, #009993)}.dialog-footer .confirm-btn:hover{background:var(--emw--color-primary-variant, #004d4a)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}.Loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.Loading svg{animation:spin 1s linear infinite;transform-origin:center}@keyframes spin{100%{transform:rotate(360deg)}}";
790
+ const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
791
+
792
+ const LotteryTippingDialog = class {
793
+ constructor(hostRef) {
794
+ registerInstance(this, hostRef);
795
+ this.open = createEvent(this, "open", 7);
796
+ this.close = createEvent(this, "close", 7);
797
+ this.confirm = createEvent(this, "confirm", 7);
798
+ this.cancel = createEvent(this, "cancel", 7);
799
+ this.wasVisible = false;
800
+ this.mbSource = undefined;
801
+ this.clientStyling = '';
802
+ this.clientStylingUrl = '';
803
+ this.visible = undefined;
804
+ this.dialogTitle = '';
805
+ this.width = '520px';
806
+ this.closable = true;
807
+ this.mask = true;
808
+ this.maskClosable = true;
809
+ this.animationDuration = 300;
810
+ this.fullscreen = false;
811
+ this.showFooter = true;
812
+ this.showCancelBtn = true;
813
+ this.language = 'en';
814
+ this.translationUrl = undefined;
815
+ }
816
+ handleClientStylingChange(newValue, oldValue) {
817
+ if (newValue != oldValue) {
818
+ setClientStyling(this.stylingContainer, this.clientStyling);
819
+ }
820
+ }
821
+ handleClientStylingUrlChange(newValue, oldValue) {
822
+ if (newValue != oldValue) {
823
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
824
+ }
825
+ }
826
+ handleMbSourceChange(newValue, oldValue) {
827
+ if (newValue != oldValue) {
828
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
829
+ }
830
+ }
831
+ componentWillLoad() {
832
+ if (this.translationUrl) {
833
+ resolveTranslationUrl(this.translationUrl);
834
+ }
835
+ }
836
+ componentWillUpdate() {
837
+ if (this.visible && !this.wasVisible) {
838
+ this.disableBodyScroll();
839
+ }
840
+ else if (!this.visible && this.wasVisible) {
841
+ this.enableBodyScroll();
842
+ }
843
+ this.wasVisible = this.visible;
844
+ }
845
+ disconnectedCallback() {
846
+ this.enableBodyScroll();
847
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
848
+ }
849
+ disableBodyScroll() {
850
+ document.body.style.overflow = 'hidden';
851
+ }
852
+ enableBodyScroll() {
853
+ document.body.style.overflow = '';
854
+ }
855
+ handleClose() {
856
+ this.cancel.emit();
857
+ }
858
+ handleMaskClick(e) {
859
+ if (this.maskClosable && e.target === this.el.querySelector('.mask')) {
860
+ this.cancel.emit();
861
+ }
862
+ }
863
+ handleConfirm() {
864
+ this.confirm.emit();
865
+ }
866
+ render() {
867
+ const dialogStyle = {
868
+ width: typeof this.width === 'number' ? `${this.width}px` : this.width,
869
+ '--duration': `${this.animationDuration}ms`
870
+ };
871
+ const dialogWrapperClass = ['dialog-wrapper', this.visible ? 'dialog-wrapper-visible' : ''];
872
+ const maskClass = ['mask', this.visible ? 'mask-enter' : 'mask-leave'];
873
+ const dialogClass = [
874
+ 'dialog',
875
+ this.visible ? 'dialog-enter' : 'dialog-leave',
876
+ this.fullscreen ? 'fullscreen' : ''
877
+ ].join(' ');
878
+ const contentStyle = {
879
+ maxHeight: 'calc(100vh - 62px)',
880
+ overflowY: 'auto'
881
+ };
882
+ return (h("div", { key: '716c6488b86fc5a74bcd8c8c8a4eee1b85f75cb7', class: dialogWrapperClass.join(' '), ref: (el) => (this.stylingContainer = el) }, h("div", { key: '161d976b5a15f62c63b56555e161b5b29c0a7771', class: maskClass.join(' '), onClick: this.handleMaskClick.bind(this) }), h("div", { key: 'ebd2c356c169765b06c85997dc9906b74358b450', class: dialogClass, style: dialogStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" }, h("div", { key: '2a8616c336447b33d3c4b3f22deee3871abd93c9', class: "dialog-header" }, h("h2", { key: 'fc4f4f87826620754f8cce73874726cdebcc280e', id: "dialog-title", class: "dialog-title" }, this.dialogTitle), this.closable && (h("button", { key: '1626434c0700df7dc094cbf0c96840476ab65da5', class: "close-btn", onClick: this.handleClose.bind(this) }, "x"))), h("div", { key: '44d28c0e477e3e16069749f7700ee70b6a486d07', class: "dialog-content", style: contentStyle }, h("slot", { key: '745e1329fc3647247245f7aa96d10a06b6b18329' })), this.showFooter && (h("div", { key: 'cc3b19ba0ab16fd485f2c4e81a5793a25cecb98f', class: "dialog-footer" }, h("slot", { key: '906adc00a3735e096159002b972804cfe147f42e', name: "footer" }, this.showCancelBtn && (h("button", { key: '1fc68b04c7c39ca9b7dfb228836eb38c4368c355', class: "cancel-btn", onClick: this.handleClose.bind(this) }, translate('cancel', this.language))), h("button", { key: '1d054ca93148286249d4989c783a67e1afe33667', class: "confirm-btn", onClick: this.handleConfirm.bind(this) }, translate('confirm', this.language))))))));
883
+ }
884
+ get el() { return getElement(this); }
885
+ static get watchers() { return {
886
+ "clientStyling": ["handleClientStylingChange"],
887
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
888
+ "mbSource": ["handleMbSourceChange"]
889
+ }; }
890
+ };
891
+ LotteryTippingDialog.style = LotteryTippingDialogStyle0;
892
+
893
+ export { LotteryButton as lottery_button, LotterySelection as lottery_selection, LotterySelectionGroup as lottery_selection_group, LotteryTippingDialog as lottery_tipping_dialog };