@everymatrix/lottery-tipping-bullet-group 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 (61) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/index-42492779.js +1301 -0
  3. package/dist/cjs/index.cjs.js +10 -0
  4. package/dist/cjs/loader.cjs.js +15 -0
  5. package/dist/cjs/lottery-tipping-bullet-group-16fbbd7f.js +167 -0
  6. package/dist/cjs/lottery-tipping-bullet-group.cjs.js +25 -0
  7. package/dist/cjs/lottery-tipping-bullet_2.cjs.entry.js +76 -0
  8. package/dist/collection/collection-manifest.json +13 -0
  9. package/dist/collection/components/lottery-tipping-bullet/index.js +1 -0
  10. package/dist/collection/components/lottery-tipping-bullet/lottery-tipping-bullet.css +64 -0
  11. package/dist/collection/components/lottery-tipping-bullet/lottery-tipping-bullet.js +249 -0
  12. package/dist/collection/components/lottery-tipping-bullet-group/index.js +1 -0
  13. package/dist/collection/components/lottery-tipping-bullet-group/lottery-tipping-bullet-group.css +0 -0
  14. package/dist/collection/components/lottery-tipping-bullet-group/lottery-tipping-bullet-group.js +275 -0
  15. package/dist/collection/index.js +1 -0
  16. package/dist/collection/models/index.js +1 -0
  17. package/dist/collection/utils/utils.js +3 -0
  18. package/dist/esm/app-globals-0f993ce5.js +3 -0
  19. package/dist/esm/index-1483af1f.js +1274 -0
  20. package/dist/esm/index.js +2 -0
  21. package/dist/esm/loader.js +11 -0
  22. package/dist/esm/lottery-tipping-bullet-group-0e61f537.js +162 -0
  23. package/dist/esm/lottery-tipping-bullet-group.js +20 -0
  24. package/dist/esm/lottery-tipping-bullet_2.entry.js +72 -0
  25. package/dist/index.cjs.js +1 -0
  26. package/dist/index.js +1 -0
  27. package/dist/lottery-tipping-bullet-group/app-globals-0f993ce5.js +1 -0
  28. package/dist/lottery-tipping-bullet-group/index-1483af1f.js +2 -0
  29. package/dist/lottery-tipping-bullet-group/index.esm.js +1 -0
  30. package/dist/lottery-tipping-bullet-group/lottery-tipping-bullet-group-0e61f537.js +1 -0
  31. package/dist/lottery-tipping-bullet-group/lottery-tipping-bullet-group.esm.js +1 -0
  32. package/dist/lottery-tipping-bullet-group/lottery-tipping-bullet_2.entry.js +1 -0
  33. package/dist/stencil.config.dev.js +19 -0
  34. package/dist/stencil.config.js +19 -0
  35. package/dist/storybook/main.js +43 -0
  36. package/dist/storybook/preview.js +9 -0
  37. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/libs/common/src/storybook/storybook-utils.d.ts +39 -0
  38. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/packages/stencil/lottery-tipping-bullet-group/stencil.config.d.ts +2 -0
  39. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/packages/stencil/lottery-tipping-bullet-group/stencil.config.dev.d.ts +2 -0
  40. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/packages/stencil/lottery-tipping-bullet-group/storybook/main.d.ts +3 -0
  41. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/packages/stencil/lottery-tipping-bullet-group/storybook/preview.d.ts +70 -0
  42. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/tools/plugins/index.d.ts +3 -0
  43. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +5 -0
  44. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/tools/plugins/vite-chunk-plugin.d.ts +6 -0
  45. package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/lottery-tipping-bullet-group/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +4 -0
  46. package/dist/types/components/lottery-tipping-bullet/index.d.ts +1 -0
  47. package/dist/types/components/lottery-tipping-bullet/lottery-tipping-bullet.d.ts +44 -0
  48. package/dist/types/components/lottery-tipping-bullet-group/index.d.ts +1 -0
  49. package/dist/types/components/lottery-tipping-bullet-group/lottery-tipping-bullet-group.d.ts +26 -0
  50. package/dist/types/components.d.ts +159 -0
  51. package/dist/types/index.d.ts +1 -0
  52. package/dist/types/models/index.d.ts +8 -0
  53. package/dist/types/stencil-public-runtime.d.ts +1674 -0
  54. package/dist/types/utils/utils.d.ts +1 -0
  55. package/loader/cdn.js +1 -0
  56. package/loader/index.cjs.js +1 -0
  57. package/loader/index.d.ts +24 -0
  58. package/loader/index.es2017.js +1 -0
  59. package/loader/index.js +2 -0
  60. package/loader/package.json +11 -0
  61. package/package.json +27 -0
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const lotteryTippingBulletGroup = require('./lottery-tipping-bullet-group-16fbbd7f.js');
6
+ require('./index-42492779.js');
7
+
8
+
9
+
10
+ exports.LotteryTippingBulletGroup = lotteryTippingBulletGroup.LotteryTippingBulletGroup;
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-42492779.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-tipping-bullet_2.cjs",[[1,"lottery-tipping-bullet-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[513,"position-idx"],"theme":[513],"mode":[513],"bulletConfigContent":[513,"bullet-config-content"]},[[0,"lotteryTippingBulletToggle","lotteryTippingBulletSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bullet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[514,"position-idx"],"theme":[513],"value":[513],"disabled":[516],"isSelected":[516,"is-selected"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
12
+ };
13
+
14
+ exports.setNonce = index.setNonce;
15
+ exports.defineCustomElements = defineCustomElements;
@@ -0,0 +1,167 @@
1
+ 'use strict';
2
+
3
+ const index = require('./index-42492779.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
+ const url = new URL(clientStylingUrl);
27
+
28
+ fetch(url.href)
29
+ .then((res) => res.text())
30
+ .then((data) => {
31
+ const cssFile = document.createElement('style');
32
+ cssFile.innerHTML = data;
33
+ if (stylingContainer) {
34
+ stylingContainer.appendChild(cssFile);
35
+ }
36
+ })
37
+ .catch((err) => {
38
+ console.error('There was an error while trying to load client styling from URL', err);
39
+ });
40
+ }
41
+
42
+ /**
43
+ * @name setStreamLibrary
44
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
45
+ * @param {HTMLElement} stylingContainer The highest element of the widget
46
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
47
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
48
+ */
49
+ function setStreamStyling(stylingContainer, domain, subscription) {
50
+ if (window.emMessageBus) {
51
+ const sheet = document.createElement('style');
52
+
53
+ window.emMessageBus.subscribe(domain, (data) => {
54
+ sheet.innerHTML = data;
55
+ if (stylingContainer) {
56
+ stylingContainer.appendChild(sheet);
57
+ }
58
+ });
59
+ }
60
+ }
61
+
62
+ const lotteryTippingBulletGroupCss = "";
63
+ const LotteryTippingBulletGroupStyle0 = lotteryTippingBulletGroupCss;
64
+
65
+ const LotteryTippingBulletGroup = class {
66
+ constructor(hostRef) {
67
+ index.registerInstance(this, hostRef);
68
+ this.lotteryTippingBulletGroupToggleEvent = index.createEvent(this, "lotteryTippingBulletGroupToggle", 7);
69
+ this.mbSource = undefined;
70
+ this.clientStyling = undefined;
71
+ this.clientStylingUrl = undefined;
72
+ this.positionIdx = undefined;
73
+ this.theme = 'default';
74
+ this.mode = 'single';
75
+ this.bulletConfigContent = '';
76
+ }
77
+ get bulletConfigArr() {
78
+ const defaultConfig = [
79
+ {
80
+ value: '1'
81
+ },
82
+ {
83
+ value: 'X'
84
+ },
85
+ {
86
+ value: '2'
87
+ }
88
+ ];
89
+ if (typeof this.bulletConfigContent === 'string' && this.bulletConfigContent) {
90
+ try {
91
+ const _temp = JSON.parse(this.bulletConfigContent);
92
+ return _temp;
93
+ }
94
+ catch (e) {
95
+ console.error('Error parsing bulletConfigContent:', e);
96
+ return defaultConfig;
97
+ }
98
+ }
99
+ else {
100
+ return defaultConfig;
101
+ }
102
+ }
103
+ handleClientStylingChange(newValue, oldValue) {
104
+ if (newValue != oldValue) {
105
+ setClientStyling(this.stylingContainer, this.clientStyling);
106
+ }
107
+ }
108
+ handleClientStylingUrlChange(newValue, oldValue) {
109
+ if (newValue != oldValue) {
110
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
111
+ }
112
+ }
113
+ handleMbSourceChange(newValue, oldValue) {
114
+ if (newValue != oldValue) {
115
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
116
+ }
117
+ }
118
+ componentDidLoad() {
119
+ if (this.stylingContainer) {
120
+ if (this.mbSource)
121
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
122
+ if (this.clientStyling)
123
+ setClientStyling(this.stylingContainer, this.clientStyling);
124
+ if (this.clientStylingUrl)
125
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
126
+ }
127
+ }
128
+ disconnectedCallback() {
129
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
130
+ }
131
+ lotteryTippingBulletSelectionHandler(event) {
132
+ const { positionIdx } = event.detail;
133
+ this.handleToggle(positionIdx);
134
+ }
135
+ handleToggle(index) {
136
+ let newConfigArr = [...this.bulletConfigArr];
137
+ if (this.mode === 'single') {
138
+ // single mode: only one button can be selected
139
+ newConfigArr = newConfigArr.map((item) => (Object.assign(Object.assign({}, item), { isSelected: false })));
140
+ newConfigArr[index].isSelected = true;
141
+ }
142
+ else {
143
+ // multi mode: multiple buttons can be selected
144
+ newConfigArr = newConfigArr.map((item) => (Object.assign({}, item)));
145
+ newConfigArr[index].isSelected = !newConfigArr[index].isSelected;
146
+ }
147
+ this.lotteryTippingBulletGroupToggleEvent.emit({
148
+ bulletConfigArr: newConfigArr,
149
+ positionIdx: this.positionIdx + '-' + index
150
+ });
151
+ }
152
+ render() {
153
+ var _a;
154
+ return (index.h("div", { ref: (el) => (this.stylingContainer = el), key: this.positionIdx }, index.h("div", { key: '68223022eed831932c571378164be913206d98e9', style: { display: 'flex', flexDirection: 'row', gap: '10px' } }, (_a = this.bulletConfigArr) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h("div", { key: index$1 }, index.h("lottery-tipping-bullet", { value: item.value, isSelected: item.isSelected, "position-idx": index$1, disabled: item.disabled, theme: this.theme, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource })))))));
155
+ }
156
+ static get watchers() { return {
157
+ "clientStyling": ["handleClientStylingChange"],
158
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
159
+ "mbSource": ["handleMbSourceChange"]
160
+ }; }
161
+ };
162
+ LotteryTippingBulletGroup.style = LotteryTippingBulletGroupStyle0;
163
+
164
+ exports.LotteryTippingBulletGroup = LotteryTippingBulletGroup;
165
+ exports.setClientStyling = setClientStyling;
166
+ exports.setClientStylingURL = setClientStylingURL;
167
+ exports.setStreamStyling = setStreamStyling;
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-42492779.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-tipping-bullet-group.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-tipping-bullet_2.cjs",[[1,"lottery-tipping-bullet-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[513,"position-idx"],"theme":[513],"mode":[513],"bulletConfigContent":[513,"bullet-config-content"]},[[0,"lotteryTippingBulletToggle","lotteryTippingBulletSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bullet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[514,"position-idx"],"theme":[513],"value":[513],"disabled":[516],"isSelected":[516,"is-selected"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
23
+ });
24
+
25
+ exports.setNonce = index.setNonce;
@@ -0,0 +1,76 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-42492779.js');
6
+ const lotteryTippingBulletGroup = require('./lottery-tipping-bullet-group-16fbbd7f.js');
7
+
8
+ const lotteryTippingBulletCss = ".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-gray-300, #333);background-color:var(--emw--color-gray-50, #f5f5f5);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;background-color:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:default !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-gray-400, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--button-background-color, #d4d4d4);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";
9
+ const LotteryTippingBulletStyle0 = lotteryTippingBulletCss;
10
+
11
+ const LotteryTippingBullet = class {
12
+ constructor(hostRef) {
13
+ index.registerInstance(this, hostRef);
14
+ this.lotteryTippingBulletToggleEvent = index.createEvent(this, "lotteryTippingBulletToggle", 7);
15
+ this.mbSource = undefined;
16
+ this.clientStyling = undefined;
17
+ this.clientStylingUrl = undefined;
18
+ this.positionIdx = undefined;
19
+ this.theme = 'default';
20
+ this.value = '';
21
+ this.disabled = false;
22
+ this.isSelected = false;
23
+ }
24
+ handleClientStylingChange(newValue, oldValue) {
25
+ if (newValue != oldValue) {
26
+ lotteryTippingBulletGroup.setClientStyling(this.stylingContainer, this.clientStyling);
27
+ }
28
+ }
29
+ handleClientStylingUrlChange(newValue, oldValue) {
30
+ if (newValue != oldValue) {
31
+ lotteryTippingBulletGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
32
+ }
33
+ }
34
+ handleMbSourceChange(newValue, oldValue) {
35
+ if (newValue != oldValue) {
36
+ lotteryTippingBulletGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
37
+ }
38
+ }
39
+ componentDidLoad() {
40
+ if (this.stylingContainer) {
41
+ if (this.mbSource)
42
+ lotteryTippingBulletGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
43
+ if (this.clientStyling)
44
+ lotteryTippingBulletGroup.setClientStyling(this.stylingContainer, this.clientStyling);
45
+ if (this.clientStylingUrl)
46
+ lotteryTippingBulletGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
47
+ }
48
+ }
49
+ handleClick() {
50
+ if (!this.disabled) {
51
+ this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
52
+ }
53
+ }
54
+ disconnectedCallback() {
55
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
56
+ }
57
+ render() {
58
+ return (index.h("div", { key: 'ef0fee38ed62adb7809b5a60668af6a499ebe5a6', ref: (el) => (this.stylingContainer = el) }, this.theme === 'text' ? (index.h("div", { class: {
59
+ LotteryTippingBullet__segment: true,
60
+ 'LotteryTippingBullet__segment--text': true
61
+ } }, this.value)) : (index.h("button", { class: {
62
+ LotteryTippingBullet__segment: true,
63
+ 'LotteryTippingBullet__segment--disabled': this.disabled,
64
+ 'LotteryTippingBullet__segment--active': this.isSelected
65
+ }, onClick: () => this.handleClick() }, this.isSelected ? 'X' : this.value))));
66
+ }
67
+ static get watchers() { return {
68
+ "clientStyling": ["handleClientStylingChange"],
69
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
70
+ "mbSource": ["handleMbSourceChange"]
71
+ }; }
72
+ };
73
+ LotteryTippingBullet.style = LotteryTippingBulletStyle0;
74
+
75
+ exports.lottery_tipping_bullet_group = lotteryTippingBulletGroup.LotteryTippingBulletGroup;
76
+ exports.lottery_tipping_bullet = LotteryTippingBullet;
@@ -0,0 +1,13 @@
1
+ {
2
+ "entries": [
3
+ "components/lottery-tipping-bullet-group/lottery-tipping-bullet-group.js",
4
+ "components/lottery-tipping-bullet/lottery-tipping-bullet.js"
5
+ ],
6
+ "compiler": {
7
+ "name": "@stencil/core",
8
+ "version": "4.19.2",
9
+ "typescriptVersion": "5.4.5"
10
+ },
11
+ "collections": [],
12
+ "bundles": []
13
+ }
@@ -0,0 +1 @@
1
+ export { LotteryTippingBullet } from './lottery-tipping-bullet';
@@ -0,0 +1,64 @@
1
+ .LotteryTippingBullet__segment {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ width: 2rem;
6
+ height: 2rem;
7
+ font-size: 16px;
8
+ line-height: 1;
9
+ font-weight: 500;
10
+ color: var(--emw--color-gray-300, #333);
11
+ background-color: var(--emw--color-gray-50, #f5f5f5);
12
+ border: 1px solid var(--emw--color-gray-100, #e6e6e6);
13
+ border-radius: 6px;
14
+ cursor: pointer;
15
+ transition: all 0.2s ease;
16
+ user-select: none;
17
+ }
18
+ .LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover {
19
+ cursor: pointer;
20
+ animation: jelly 0.3s ease-in-out;
21
+ transform: scale(1.02);
22
+ }
23
+ .LotteryTippingBullet__segment--text {
24
+ border: none;
25
+ background-color: transparent;
26
+ font-weight: 400;
27
+ }
28
+ .LotteryTippingBullet__segment--text:hover {
29
+ cursor: default !important;
30
+ }
31
+ .LotteryTippingBullet__segment--active {
32
+ font-weight: 600;
33
+ background-color: var(--emw--color-gray-400, #000);
34
+ color: var(--emw--color-primary, #fed275);
35
+ }
36
+ .LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active) {
37
+ background-color: var(--emw--button-background-color, #d4d4d4);
38
+ color: var(--emw--color-gray-150, #6f6f6f);
39
+ border-color: var(--emw--color-gray-100, #e6e6e6);
40
+ }
41
+ .LotteryTippingBullet__segment--disabled:hover {
42
+ cursor: not-allowed;
43
+ }
44
+
45
+ @keyframes jelly {
46
+ 0% {
47
+ transform: translate(0, 0);
48
+ }
49
+ 20% {
50
+ transform: translate(-0.5px, -0.5px);
51
+ }
52
+ 40% {
53
+ transform: translate(0.5px, 0.5px);
54
+ }
55
+ 60% {
56
+ transform: translate(-0.25px, -0.25px);
57
+ }
58
+ 80% {
59
+ transform: translate(0.25px, 0.25px);
60
+ }
61
+ 100% {
62
+ transform: translate(0, 0);
63
+ }
64
+ }
@@ -0,0 +1,249 @@
1
+ import { h } from "@stencil/core";
2
+ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
3
+ export class LotteryTippingBullet {
4
+ constructor() {
5
+ this.mbSource = undefined;
6
+ this.clientStyling = undefined;
7
+ this.clientStylingUrl = undefined;
8
+ this.positionIdx = undefined;
9
+ this.theme = 'default';
10
+ this.value = '';
11
+ this.disabled = false;
12
+ this.isSelected = false;
13
+ }
14
+ handleClientStylingChange(newValue, oldValue) {
15
+ if (newValue != oldValue) {
16
+ setClientStyling(this.stylingContainer, this.clientStyling);
17
+ }
18
+ }
19
+ handleClientStylingUrlChange(newValue, oldValue) {
20
+ if (newValue != oldValue) {
21
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
22
+ }
23
+ }
24
+ handleMbSourceChange(newValue, oldValue) {
25
+ if (newValue != oldValue) {
26
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
27
+ }
28
+ }
29
+ componentDidLoad() {
30
+ if (this.stylingContainer) {
31
+ if (this.mbSource)
32
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
33
+ if (this.clientStyling)
34
+ setClientStyling(this.stylingContainer, this.clientStyling);
35
+ if (this.clientStylingUrl)
36
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
37
+ }
38
+ }
39
+ handleClick() {
40
+ if (!this.disabled) {
41
+ this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
42
+ }
43
+ }
44
+ disconnectedCallback() {
45
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
46
+ }
47
+ render() {
48
+ return (h("div", { key: 'ef0fee38ed62adb7809b5a60668af6a499ebe5a6', ref: (el) => (this.stylingContainer = el) }, this.theme === 'text' ? (h("div", { class: {
49
+ LotteryTippingBullet__segment: true,
50
+ 'LotteryTippingBullet__segment--text': true
51
+ } }, this.value)) : (h("button", { class: {
52
+ LotteryTippingBullet__segment: true,
53
+ 'LotteryTippingBullet__segment--disabled': this.disabled,
54
+ 'LotteryTippingBullet__segment--active': this.isSelected
55
+ }, onClick: () => this.handleClick() }, this.isSelected ? 'X' : this.value))));
56
+ }
57
+ static get is() { return "lottery-tipping-bullet"; }
58
+ static get encapsulation() { return "shadow"; }
59
+ static get originalStyleUrls() {
60
+ return {
61
+ "$": ["lottery-tipping-bullet.scss"]
62
+ };
63
+ }
64
+ static get styleUrls() {
65
+ return {
66
+ "$": ["lottery-tipping-bullet.css"]
67
+ };
68
+ }
69
+ static get properties() {
70
+ return {
71
+ "mbSource": {
72
+ "type": "string",
73
+ "mutable": false,
74
+ "complexType": {
75
+ "original": "string",
76
+ "resolved": "string",
77
+ "references": {}
78
+ },
79
+ "required": false,
80
+ "optional": false,
81
+ "docs": {
82
+ "tags": [],
83
+ "text": "Client custom styling via message bus"
84
+ },
85
+ "attribute": "mb-source",
86
+ "reflect": true
87
+ },
88
+ "clientStyling": {
89
+ "type": "string",
90
+ "mutable": false,
91
+ "complexType": {
92
+ "original": "string",
93
+ "resolved": "string",
94
+ "references": {}
95
+ },
96
+ "required": false,
97
+ "optional": false,
98
+ "docs": {
99
+ "tags": [],
100
+ "text": "Client custom styling via string"
101
+ },
102
+ "attribute": "client-styling",
103
+ "reflect": true
104
+ },
105
+ "clientStylingUrl": {
106
+ "type": "string",
107
+ "mutable": false,
108
+ "complexType": {
109
+ "original": "string",
110
+ "resolved": "string",
111
+ "references": {}
112
+ },
113
+ "required": false,
114
+ "optional": false,
115
+ "docs": {
116
+ "tags": [],
117
+ "text": "Client custom styling via css file url"
118
+ },
119
+ "attribute": "client-styling-url",
120
+ "reflect": true
121
+ },
122
+ "positionIdx": {
123
+ "type": "number",
124
+ "mutable": false,
125
+ "complexType": {
126
+ "original": "number",
127
+ "resolved": "number",
128
+ "references": {}
129
+ },
130
+ "required": false,
131
+ "optional": false,
132
+ "docs": {
133
+ "tags": [],
134
+ "text": ""
135
+ },
136
+ "attribute": "position-idx",
137
+ "reflect": true
138
+ },
139
+ "theme": {
140
+ "type": "string",
141
+ "mutable": false,
142
+ "complexType": {
143
+ "original": "'default' | 'text'",
144
+ "resolved": "\"default\" | \"text\"",
145
+ "references": {}
146
+ },
147
+ "required": false,
148
+ "optional": false,
149
+ "docs": {
150
+ "tags": [],
151
+ "text": ""
152
+ },
153
+ "attribute": "theme",
154
+ "reflect": true,
155
+ "defaultValue": "'default'"
156
+ },
157
+ "value": {
158
+ "type": "string",
159
+ "mutable": false,
160
+ "complexType": {
161
+ "original": "string",
162
+ "resolved": "string",
163
+ "references": {}
164
+ },
165
+ "required": false,
166
+ "optional": false,
167
+ "docs": {
168
+ "tags": [],
169
+ "text": "/**\n Value of the bullet"
170
+ },
171
+ "attribute": "value",
172
+ "reflect": true,
173
+ "defaultValue": "''"
174
+ },
175
+ "disabled": {
176
+ "type": "boolean",
177
+ "mutable": false,
178
+ "complexType": {
179
+ "original": "boolean",
180
+ "resolved": "boolean",
181
+ "references": {}
182
+ },
183
+ "required": false,
184
+ "optional": false,
185
+ "docs": {
186
+ "tags": [],
187
+ "text": "Marks if the bullet should be selectable"
188
+ },
189
+ "attribute": "disabled",
190
+ "reflect": true,
191
+ "defaultValue": "false"
192
+ },
193
+ "isSelected": {
194
+ "type": "boolean",
195
+ "mutable": false,
196
+ "complexType": {
197
+ "original": "boolean",
198
+ "resolved": "boolean",
199
+ "references": {}
200
+ },
201
+ "required": false,
202
+ "optional": false,
203
+ "docs": {
204
+ "tags": [],
205
+ "text": "Marks if the bullet should be selected"
206
+ },
207
+ "attribute": "is-selected",
208
+ "reflect": true,
209
+ "defaultValue": "false"
210
+ }
211
+ };
212
+ }
213
+ static get events() {
214
+ return [{
215
+ "method": "lotteryTippingBulletToggleEvent",
216
+ "name": "lotteryTippingBulletToggle",
217
+ "bubbles": true,
218
+ "cancelable": true,
219
+ "composed": true,
220
+ "docs": {
221
+ "tags": [],
222
+ "text": "When a bullet is selected/deselected this event is emmited"
223
+ },
224
+ "complexType": {
225
+ "original": "LotteryTippingBulletToggleEventType",
226
+ "resolved": "LotteryTippingBulletToggleEventType",
227
+ "references": {
228
+ "LotteryTippingBulletToggleEventType": {
229
+ "location": "import",
230
+ "path": "../../models",
231
+ "id": "../../../../packages/stencil/lottery-tipping-bullet-group/src/models/index.ts::LotteryTippingBulletToggleEventType"
232
+ }
233
+ }
234
+ }
235
+ }];
236
+ }
237
+ static get watchers() {
238
+ return [{
239
+ "propName": "clientStyling",
240
+ "methodName": "handleClientStylingChange"
241
+ }, {
242
+ "propName": "clientStylingUrl",
243
+ "methodName": "handleClientStylingUrlChange"
244
+ }, {
245
+ "propName": "mbSource",
246
+ "methodName": "handleMbSourceChange"
247
+ }];
248
+ }
249
+ }
@@ -0,0 +1 @@
1
+ export { LotteryTippingBulletGroup } from './lottery-tipping-bullet-group';