@everymatrix/lottery-banner 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-4511b749.js +1177 -0
  3. package/dist/cjs/index.cjs.js +10 -0
  4. package/dist/cjs/loader.cjs.js +15 -0
  5. package/dist/cjs/lottery-banner-38fe4a6f.js +193 -0
  6. package/dist/cjs/lottery-banner.cjs.entry.js +10 -0
  7. package/dist/cjs/lottery-banner.cjs.js +25 -0
  8. package/dist/collection/collection-manifest.json +12 -0
  9. package/dist/collection/components/lottery-banner/index.js +1 -0
  10. package/dist/collection/components/lottery-banner/lottery-banner.css +87 -0
  11. package/dist/collection/components/lottery-banner/lottery-banner.js +272 -0
  12. package/dist/collection/index.js +1 -0
  13. package/dist/collection/utils/locale.utils.js +50 -0
  14. package/dist/collection/utils/utils.js +26 -0
  15. package/dist/esm/app-globals-0f993ce5.js +3 -0
  16. package/dist/esm/index-0b45dd81.js +1151 -0
  17. package/dist/esm/index.js +2 -0
  18. package/dist/esm/loader.js +11 -0
  19. package/dist/esm/lottery-banner-66323365.js +191 -0
  20. package/dist/esm/lottery-banner.entry.js +2 -0
  21. package/dist/esm/lottery-banner.js +20 -0
  22. package/dist/index.cjs.js +1 -0
  23. package/dist/index.js +1 -0
  24. package/dist/lottery-banner/app-globals-0f993ce5.js +1 -0
  25. package/dist/lottery-banner/index-0b45dd81.js +2 -0
  26. package/dist/lottery-banner/index.esm.js +1 -0
  27. package/dist/lottery-banner/lottery-banner-66323365.js +1 -0
  28. package/dist/lottery-banner/lottery-banner.entry.js +1 -0
  29. package/dist/lottery-banner/lottery-banner.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-banner/.stencil/libs/common/src/storybook/storybook-utils.d.ts +39 -0
  35. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/packages/stencil/lottery-banner/stencil.config.d.ts +2 -0
  36. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/packages/stencil/lottery-banner/stencil.config.dev.d.ts +2 -0
  37. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/packages/stencil/lottery-banner/storybook/main.d.ts +3 -0
  38. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/packages/stencil/lottery-banner/storybook/preview.d.ts +70 -0
  39. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/tools/plugins/index.d.ts +4 -0
  40. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
  41. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +5 -0
  42. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/tools/plugins/vite-chunk-plugin.d.ts +6 -0
  43. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-banner/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +4 -0
  44. package/dist/types/components/lottery-banner/index.d.ts +1 -0
  45. package/dist/types/components/lottery-banner/lottery-banner.d.ts +60 -0
  46. package/dist/types/components.d.ts +117 -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 +6 -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,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const lotteryBanner = require('./lottery-banner-38fe4a6f.js');
6
+ require('./index-4511b749.js');
7
+
8
+
9
+
10
+ exports.LotteryBanner = lotteryBanner.LotteryBanner;
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-4511b749.js');
6
+ const appGlobals = require('./app-globals-3a1e7e63.js');
7
+
8
+ const defineCustomElements = async (win, options) => {
9
+ if (typeof window === 'undefined') return undefined;
10
+ await appGlobals.globalScripts();
11
+ return index.bootstrapLazy([["lottery-banner.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
12
+ };
13
+
14
+ exports.setNonce = index.setNonce;
15
+ exports.defineCustomElements = defineCustomElements;
@@ -0,0 +1,193 @@
1
+ 'use strict';
2
+
3
+ const index = require('./index-4511b749.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
+ }
63
+
64
+ const DEFAULT_LANGUAGE = 'en';
65
+ const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
66
+ const TRANSLATIONS = {
67
+ en: {
68
+ stopAt: 'Stop at',
69
+ turnover: 'Turnover: '
70
+ },
71
+ ro: {
72
+ stop: 'Oprește',
73
+ at: 'la'
74
+ },
75
+ fr: {
76
+ stop: 'Arrêtez',
77
+ at: 'à'
78
+ },
79
+ ar: {
80
+ stop: 'توقف',
81
+ at: 'في'
82
+ },
83
+ hr: {
84
+ stop: 'Stop',
85
+ at: 'u'
86
+ }
87
+ };
88
+ const translate = (key, customLang) => {
89
+ const lang = customLang;
90
+ return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
91
+ };
92
+ const getTranslations = (data) => {
93
+ Object.keys(data).forEach((item) => {
94
+ for (let key in data[item]) {
95
+ TRANSLATIONS[item][key] = data[item][key];
96
+ }
97
+ });
98
+ };
99
+ const resolveTranslationUrl = async (translationUrl) => {
100
+ if (translationUrl) {
101
+ try {
102
+ const response = await fetch(translationUrl);
103
+ if (!response.ok) {
104
+ throw new Error(`HTTP error! status: ${response.status}`);
105
+ }
106
+ const translations = await response.json();
107
+ getTranslations(translations);
108
+ }
109
+ catch (error) {
110
+ console.error('Failed to fetch or parse translations from URL:', error);
111
+ }
112
+ }
113
+ };
114
+
115
+ const lotteryBannerCss = ":host {\n display: block;\n}\n\n.lottery-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--lottery-banner-gap, 0.5rem);\n padding: var(--lottery-banner-padding, 0px 20px);\n background: var(--lottery-banner-background, var(--emw--color-primary, #fed275));\n border-top: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-bottom: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-left: var(--lottery-banner-border-left, none);\n border-right: var(--lottery-banner-border-right, none);\n border-radius: var(--lottery-banner-border-radius, 0);\n white-space: nowrap;\n height: var(--lottery-banner-height, 50px);\n container-type: inline-size;\n position: relative;\n box-sizing: border-box;\n}\n\n.lottery-banner__logo-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.lottery-banner__logo-wrapper img {\n height: 100%;\n object-fit: var(--lottery-banner-logo-object-fit, contain);\n}\n\n.lottery-banner__item--center {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.lottery-banner__title {\n text-align: center;\n font-size: var(--lottery-banner-title-font-size, 1.5rem);\n font-weight: 800;\n font-style: italic;\n color: var(--emw--color-typography, #000);\n}\n\n.lottery-banner__info {\n display: flex;\n align-items: center;\n gap: var(--lottery-banner-info-gap, 0.75rem);\n}\n\n.lottery-banner__info-item {\n font-size: var(--lottery-banner-info-font-size, 0.9rem);\n color: var(--lottery-banner-info-color, var(--emw--color-typography, #000));\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n}\n\n.lottery-banner__info-item-label {\n font-weight: var(--lottery-banner-info-label-font-weight, 700);\n color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));\n}\n\n.lottery-banner__info-item-value {\n font-weight: var(--lottery-banner-info-value-font-weight, inherit);\n color: var(--lottery-banner-info-value-color, var(--emw--color-typography, #000));\n}\n\n@container (max-width: 700px) {\n .lottery-banner {\n height: auto;\n padding: var(--lottery-banner-mobile-padding, 0.5rem 1rem);\n }\n .lottery-banner__title {\n flex-basis: 100%;\n text-align: var(--lottery-banner-mobile-title-text-align, left);\n }\n .lottery-banner__info {\n flex-wrap: wrap;\n gap: var(--lottery-banner-mobile-info-gap, 0.1rem);\n }\n}";
116
+ const LotteryBannerStyle0 = lotteryBannerCss;
117
+
118
+ const LotteryBanner = class {
119
+ constructor(hostRef) {
120
+ index.registerInstance(this, hostRef);
121
+ this.mbSource = undefined;
122
+ this.clientStyling = undefined;
123
+ this.clientStylingUrl = undefined;
124
+ this.translationUrl = '';
125
+ this.language = 'en';
126
+ this.logoUrl = undefined;
127
+ this.stopTime = '';
128
+ this.bannerTitle = undefined;
129
+ this.turnover = undefined;
130
+ this.layout = 'logo,title,info';
131
+ }
132
+ handleClientStylingChange(newValue, oldValue) {
133
+ if (newValue !== oldValue) {
134
+ setClientStyling(this.stylingContainer, this.clientStyling);
135
+ }
136
+ }
137
+ handleClientStylingUrlChange(newValue, oldValue) {
138
+ if (newValue !== oldValue) {
139
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
140
+ }
141
+ }
142
+ handleMbSourceChange(newValue, oldValue) {
143
+ if (newValue !== oldValue) {
144
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
145
+ }
146
+ }
147
+ async componentWillLoad() {
148
+ if (this.translationUrl) {
149
+ resolveTranslationUrl(this.translationUrl);
150
+ }
151
+ }
152
+ componentDidLoad() {
153
+ if (this.stylingContainer) {
154
+ if (this.mbSource)
155
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
156
+ if (this.clientStyling)
157
+ setClientStyling(this.stylingContainer, this.clientStyling);
158
+ if (this.clientStylingUrl)
159
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
160
+ }
161
+ }
162
+ disconnectedCallback() {
163
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
164
+ }
165
+ renderElement(item, className = '') {
166
+ switch (item) {
167
+ case 'logo':
168
+ return (index.h("div", { class: `lottery-banner__logo-wrapper ${className}` }, this.logoUrl && index.h("img", { alt: "logo", src: this.logoUrl, class: "lottery-banner__logo" })));
169
+ case 'title':
170
+ return this.bannerTitle && index.h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
171
+ case 'info':
172
+ return (index.h("div", { class: `lottery-banner__info ${className}` }, this.stopTime && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate('stopAt', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.stopTime))), (this.turnover !== null && this.turnover !== undefined) && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
173
+ default:
174
+ return null;
175
+ }
176
+ }
177
+ render() {
178
+ const layoutItems = this.layout.split(',').map((item) => item.trim());
179
+ return (index.h("section", { key: 'd26c3cb4854c8fea2367df25b6e8cf11b23731e4', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
180
+ const isMiddle = layoutItems.length === 3 && index === 1;
181
+ const className = isMiddle ? 'lottery-banner__item--center' : '';
182
+ return this.renderElement(item, className);
183
+ })));
184
+ }
185
+ static get watchers() { return {
186
+ "clientStyling": ["handleClientStylingChange"],
187
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
188
+ "mbSource": ["handleMbSourceChange"]
189
+ }; }
190
+ };
191
+ LotteryBanner.style = LotteryBannerStyle0;
192
+
193
+ exports.LotteryBanner = LotteryBanner;
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const lotteryBanner = require('./lottery-banner-38fe4a6f.js');
6
+ require('./index-4511b749.js');
7
+
8
+
9
+
10
+ exports.lottery_banner = lotteryBanner.LotteryBanner;
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-4511b749.js');
6
+ const appGlobals = require('./app-globals-3a1e7e63.js');
7
+
8
+ /*
9
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
10
+ */
11
+ var patchBrowser = () => {
12
+ const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-banner.cjs.js', document.baseURI).href));
13
+ const opts = {};
14
+ if (importMeta !== "") {
15
+ opts.resourcesUrl = new URL(".", importMeta).href;
16
+ }
17
+ return index.promiseResolve(opts);
18
+ };
19
+
20
+ patchBrowser().then(async (options) => {
21
+ await appGlobals.globalScripts();
22
+ return index.bootstrapLazy([["lottery-banner.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
23
+ });
24
+
25
+ exports.setNonce = index.setNonce;
@@ -0,0 +1,12 @@
1
+ {
2
+ "entries": [
3
+ "components/lottery-banner/lottery-banner.js"
4
+ ],
5
+ "compiler": {
6
+ "name": "@stencil/core",
7
+ "version": "4.19.2",
8
+ "typescriptVersion": "5.4.5"
9
+ },
10
+ "collections": [],
11
+ "bundles": []
12
+ }
@@ -0,0 +1 @@
1
+ export { LotteryBanner } from './lottery-banner';
@@ -0,0 +1,87 @@
1
+ :host {
2
+ display: block;
3
+ }
4
+
5
+ .lottery-banner {
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: space-between;
9
+ gap: var(--lottery-banner-gap, 0.5rem);
10
+ padding: var(--lottery-banner-padding, 0px 20px);
11
+ background: var(--lottery-banner-background, var(--emw--color-primary, #fed275));
12
+ border-top: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));
13
+ border-bottom: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));
14
+ border-left: var(--lottery-banner-border-left, none);
15
+ border-right: var(--lottery-banner-border-right, none);
16
+ border-radius: var(--lottery-banner-border-radius, 0);
17
+ white-space: nowrap;
18
+ height: var(--lottery-banner-height, 50px);
19
+ container-type: inline-size;
20
+ position: relative;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .lottery-banner__logo-wrapper {
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ height: 100%;
29
+ }
30
+ .lottery-banner__logo-wrapper img {
31
+ height: 100%;
32
+ object-fit: var(--lottery-banner-logo-object-fit, contain);
33
+ }
34
+
35
+ .lottery-banner__item--center {
36
+ position: absolute;
37
+ left: 50%;
38
+ top: 50%;
39
+ transform: translate(-50%, -50%);
40
+ }
41
+
42
+ .lottery-banner__title {
43
+ text-align: center;
44
+ font-size: var(--lottery-banner-title-font-size, 1.5rem);
45
+ font-weight: 800;
46
+ font-style: italic;
47
+ color: var(--emw--color-typography, #000);
48
+ }
49
+
50
+ .lottery-banner__info {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: var(--lottery-banner-info-gap, 0.75rem);
54
+ }
55
+
56
+ .lottery-banner__info-item {
57
+ font-size: var(--lottery-banner-info-font-size, 0.9rem);
58
+ color: var(--lottery-banner-info-color, var(--emw--color-typography, #000));
59
+ display: inline-flex;
60
+ align-items: center;
61
+ gap: 0.3rem;
62
+ }
63
+
64
+ .lottery-banner__info-item-label {
65
+ font-weight: var(--lottery-banner-info-label-font-weight, 700);
66
+ color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));
67
+ }
68
+
69
+ .lottery-banner__info-item-value {
70
+ font-weight: var(--lottery-banner-info-value-font-weight, inherit);
71
+ color: var(--lottery-banner-info-value-color, var(--emw--color-typography, #000));
72
+ }
73
+
74
+ @container (max-width: 700px) {
75
+ .lottery-banner {
76
+ height: auto;
77
+ padding: var(--lottery-banner-mobile-padding, 0.5rem 1rem);
78
+ }
79
+ .lottery-banner__title {
80
+ flex-basis: 100%;
81
+ text-align: var(--lottery-banner-mobile-title-text-align, left);
82
+ }
83
+ .lottery-banner__info {
84
+ flex-wrap: wrap;
85
+ gap: var(--lottery-banner-mobile-info-gap, 0.1rem);
86
+ }
87
+ }
@@ -0,0 +1,272 @@
1
+ import { h } from "@stencil/core";
2
+ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
3
+ import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
4
+ export class LotteryBanner {
5
+ constructor() {
6
+ this.mbSource = undefined;
7
+ this.clientStyling = undefined;
8
+ this.clientStylingUrl = undefined;
9
+ this.translationUrl = '';
10
+ this.language = 'en';
11
+ this.logoUrl = undefined;
12
+ this.stopTime = '';
13
+ this.bannerTitle = undefined;
14
+ this.turnover = undefined;
15
+ this.layout = 'logo,title,info';
16
+ }
17
+ handleClientStylingChange(newValue, oldValue) {
18
+ if (newValue !== oldValue) {
19
+ setClientStyling(this.stylingContainer, this.clientStyling);
20
+ }
21
+ }
22
+ handleClientStylingUrlChange(newValue, oldValue) {
23
+ if (newValue !== oldValue) {
24
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
25
+ }
26
+ }
27
+ handleMbSourceChange(newValue, oldValue) {
28
+ if (newValue !== oldValue) {
29
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
30
+ }
31
+ }
32
+ async componentWillLoad() {
33
+ if (this.translationUrl) {
34
+ resolveTranslationUrl(this.translationUrl);
35
+ }
36
+ }
37
+ componentDidLoad() {
38
+ if (this.stylingContainer) {
39
+ if (this.mbSource)
40
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
41
+ if (this.clientStyling)
42
+ setClientStyling(this.stylingContainer, this.clientStyling);
43
+ if (this.clientStylingUrl)
44
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
45
+ }
46
+ }
47
+ disconnectedCallback() {
48
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
49
+ }
50
+ renderElement(item, className = '') {
51
+ switch (item) {
52
+ case 'logo':
53
+ return (h("div", { class: `lottery-banner__logo-wrapper ${className}` }, this.logoUrl && h("img", { alt: "logo", src: this.logoUrl, class: "lottery-banner__logo" })));
54
+ case 'title':
55
+ return this.bannerTitle && h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
56
+ case 'info':
57
+ return (h("div", { class: `lottery-banner__info ${className}` }, this.stopTime && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('stopAt', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.stopTime))), (this.turnover !== null && this.turnover !== undefined) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('turnover', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
58
+ default:
59
+ return null;
60
+ }
61
+ }
62
+ render() {
63
+ const layoutItems = this.layout.split(',').map((item) => item.trim());
64
+ return (h("section", { key: 'd26c3cb4854c8fea2367df25b6e8cf11b23731e4', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
65
+ const isMiddle = layoutItems.length === 3 && index === 1;
66
+ const className = isMiddle ? 'lottery-banner__item--center' : '';
67
+ return this.renderElement(item, className);
68
+ })));
69
+ }
70
+ static get is() { return "lottery-banner"; }
71
+ static get encapsulation() { return "shadow"; }
72
+ static get originalStyleUrls() {
73
+ return {
74
+ "$": ["lottery-banner.scss"]
75
+ };
76
+ }
77
+ static get styleUrls() {
78
+ return {
79
+ "$": ["lottery-banner.css"]
80
+ };
81
+ }
82
+ static get properties() {
83
+ return {
84
+ "mbSource": {
85
+ "type": "string",
86
+ "mutable": false,
87
+ "complexType": {
88
+ "original": "string",
89
+ "resolved": "string",
90
+ "references": {}
91
+ },
92
+ "required": false,
93
+ "optional": false,
94
+ "docs": {
95
+ "tags": [],
96
+ "text": "Client custom styling via message bus"
97
+ },
98
+ "attribute": "mb-source",
99
+ "reflect": true
100
+ },
101
+ "clientStyling": {
102
+ "type": "string",
103
+ "mutable": false,
104
+ "complexType": {
105
+ "original": "string",
106
+ "resolved": "string",
107
+ "references": {}
108
+ },
109
+ "required": false,
110
+ "optional": false,
111
+ "docs": {
112
+ "tags": [],
113
+ "text": "Client custom styling via string"
114
+ },
115
+ "attribute": "client-styling",
116
+ "reflect": true
117
+ },
118
+ "clientStylingUrl": {
119
+ "type": "string",
120
+ "mutable": false,
121
+ "complexType": {
122
+ "original": "string",
123
+ "resolved": "string",
124
+ "references": {}
125
+ },
126
+ "required": false,
127
+ "optional": false,
128
+ "docs": {
129
+ "tags": [],
130
+ "text": "Client custom styling via css file url"
131
+ },
132
+ "attribute": "client-styling-url",
133
+ "reflect": true
134
+ },
135
+ "translationUrl": {
136
+ "type": "string",
137
+ "mutable": false,
138
+ "complexType": {
139
+ "original": "string",
140
+ "resolved": "string",
141
+ "references": {}
142
+ },
143
+ "required": false,
144
+ "optional": false,
145
+ "docs": {
146
+ "tags": [],
147
+ "text": "Client custom translation via json file url"
148
+ },
149
+ "attribute": "translation-url",
150
+ "reflect": true,
151
+ "defaultValue": "''"
152
+ },
153
+ "language": {
154
+ "type": "string",
155
+ "mutable": false,
156
+ "complexType": {
157
+ "original": "string",
158
+ "resolved": "string",
159
+ "references": {}
160
+ },
161
+ "required": false,
162
+ "optional": false,
163
+ "docs": {
164
+ "tags": [],
165
+ "text": "Client custom language for translation"
166
+ },
167
+ "attribute": "language",
168
+ "reflect": true,
169
+ "defaultValue": "'en'"
170
+ },
171
+ "logoUrl": {
172
+ "type": "string",
173
+ "mutable": false,
174
+ "complexType": {
175
+ "original": "string",
176
+ "resolved": "string",
177
+ "references": {}
178
+ },
179
+ "required": false,
180
+ "optional": false,
181
+ "docs": {
182
+ "tags": [],
183
+ "text": "Logo image URL for the header section"
184
+ },
185
+ "attribute": "logo-url",
186
+ "reflect": true
187
+ },
188
+ "stopTime": {
189
+ "type": "string",
190
+ "mutable": false,
191
+ "complexType": {
192
+ "original": "string",
193
+ "resolved": "string",
194
+ "references": {}
195
+ },
196
+ "required": false,
197
+ "optional": false,
198
+ "docs": {
199
+ "tags": [],
200
+ "text": "Draw stop time"
201
+ },
202
+ "attribute": "stop-time",
203
+ "reflect": false,
204
+ "defaultValue": "''"
205
+ },
206
+ "bannerTitle": {
207
+ "type": "string",
208
+ "mutable": false,
209
+ "complexType": {
210
+ "original": "string",
211
+ "resolved": "string",
212
+ "references": {}
213
+ },
214
+ "required": false,
215
+ "optional": false,
216
+ "docs": {
217
+ "tags": [],
218
+ "text": "Draw title"
219
+ },
220
+ "attribute": "banner-title",
221
+ "reflect": false
222
+ },
223
+ "turnover": {
224
+ "type": "string",
225
+ "mutable": false,
226
+ "complexType": {
227
+ "original": "string",
228
+ "resolved": "string",
229
+ "references": {}
230
+ },
231
+ "required": false,
232
+ "optional": false,
233
+ "docs": {
234
+ "tags": [],
235
+ "text": "Total turnover amount"
236
+ },
237
+ "attribute": "turnover",
238
+ "reflect": false
239
+ },
240
+ "layout": {
241
+ "type": "string",
242
+ "mutable": false,
243
+ "complexType": {
244
+ "original": "string",
245
+ "resolved": "string",
246
+ "references": {}
247
+ },
248
+ "required": false,
249
+ "optional": false,
250
+ "docs": {
251
+ "tags": [],
252
+ "text": "Layout order of the component elements.\nComma-separated list of 'logo', 'title', 'info'.\nExample: 'logo,title,info' or 'title,logo,info'."
253
+ },
254
+ "attribute": "layout",
255
+ "reflect": false,
256
+ "defaultValue": "'logo,title,info'"
257
+ }
258
+ };
259
+ }
260
+ static get watchers() {
261
+ return [{
262
+ "propName": "clientStyling",
263
+ "methodName": "handleClientStylingChange"
264
+ }, {
265
+ "propName": "clientStylingUrl",
266
+ "methodName": "handleClientStylingUrlChange"
267
+ }, {
268
+ "propName": "mbSource",
269
+ "methodName": "handleMbSourceChange"
270
+ }];
271
+ }
272
+ }
@@ -0,0 +1 @@
1
+ export * from './components/lottery-banner';