@everymatrix/player-account-gaming-limits-wrapper-2 0.0.367 → 0.0.369

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 (13) hide show
  1. package/README.md +30 -30
  2. package/dist/player-account-gaming-limits-wrapper-2.js +89 -84
  3. package/dist/player-account-gaming-limits-wrapper-2.js.map +1 -1
  4. package/documentation.md +61 -61
  5. package/index.html +44 -52
  6. package/index.js +1 -1
  7. package/package.json +2 -2
  8. package/public/reset.css +47 -47
  9. package/rollup.config.js +59 -59
  10. package/src/PlayerAccountGamingLimitsWrapper_2.svelte +168 -160
  11. package/src/index.ts +4 -4
  12. package/stories/PlayerAccountGamingLimitsWrapper_2.stories.js +13 -13
  13. package/tsconfig.json +6 -6
package/src/PlayerAccountGamingLimitsWrapper_2.svelte CHANGED
@@ -1,160 +1,168 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
- import '@everymatrix/player-account-gaming-limits-page-2-gmcore';
4
- import '@everymatrix/player-account-gaming-limits-page-2-gm16';
5
- import '@everymatrix/player-account-gaming-limits-history-2';
6
-
7
- export let lang:string = '';
8
- export let userid:string = '';
9
- export let session:string = '';
10
- export let endpoint:string = '';
11
- export let currency:string = '';
12
- export let apiversion:string = '';
13
-
14
- export let includedlimits:string = '';
15
- export let tablabels:string = '';
16
- export let historyenabled:string = "true";
17
-
18
- export let clientstyling:string = '';
19
- export let clientstylingurl:string = '';
20
-
21
- let isLoading:boolean = true;
22
-
23
- let customStylingContainer:HTMLElement;
24
- let displayNone:boolean = false;
25
-
26
- let limitTabs:Array<string> = [];
27
- let tabLabelArray:Array<string>;
28
- let mainContainer:HTMLElement;
29
- let tabsContainer:HTMLElement;
30
-
31
- const determineTabs = ():void => {
32
- limitTabs = includedlimits.split(',').map(word => word.trim());
33
- tabLabelArray = tablabels.split(',').map(word => word.trim());
34
- isLoading = false;
35
- }
36
-
37
- const selectTab = (index):void => {
38
- if (mainContainer.children.length > 0){
39
- for (let i = 0; i < mainContainer.children.length; i++) {
40
- if (index === i) {
41
- mainContainer.children[i].classList.remove('hidden');
42
- tabsContainer?.children[i].classList.add('selected');
43
- } else {
44
- mainContainer.children[i].classList.add('hidden');
45
- tabsContainer?.children[i].classList.remove('selected');
46
- }
47
- }
48
- }
49
- }
50
-
51
- const setClientStyling = ():void => {
52
- let sheet = document.createElement('style');
53
- sheet.innerHTML = clientstyling;
54
- customStylingContainer.appendChild(sheet);
55
- }
56
-
57
- const setClientStylingURL = ():void => {
58
- displayNone = true;
59
-
60
- let url:URL = new URL(clientstylingurl);
61
- let cssFile:HTMLElement = document.createElement('style');
62
-
63
- fetch(url.href)
64
- .then((res:any) => res.text())
65
- .then((data:any) => {
66
- cssFile.innerHTML = data
67
-
68
- if (customStylingContainer) {
69
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
70
- setTimeout(() => { displayNone = false; }, 500);
71
- }
72
- });
73
- }
74
-
75
- $:mainContainer && selectTab(0);
76
- $:clientstylingurl && setClientStylingURL();
77
- $:clientstyling && setClientStyling();
78
- $:userid && session && endpoint && includedlimits && tablabels && determineTabs();
79
- </script>
80
- <div bind:this={customStylingContainer}>
81
- {#if isLoading}
82
- <!-- Just show nothing, this is loading exposed attributes, not making a fetch. It takes an instant, but prevents nested widgets from rendering with empty attributes -->
83
- {:else}
84
- {#if limitTabs.length > 1}
85
- <div class="TabsContainer" bind:this={tabsContainer}>
86
- {#each limitTabs as limit,i}
87
- <div class="LimitsTab" style="width: {100 / limitTabs.length}%" on:click={() => selectTab(i)}>{tabLabelArray[i] ?? limit}</div>
88
- {/each}
89
- </div>
90
- {/if}
91
-
92
- <div class="player-account-gaming-limits-wrapper-2" bind:this={mainContainer}>
93
- {#each limitTabs as limits}
94
- <player-account-gaming-limits-page-2-gm16 class="hidden selected"
95
- {lang}
96
- {currency}
97
- {limits}
98
- {userid}
99
- {session}
100
- {endpoint}
101
- {apiversion}
102
- ></player-account-gaming-limits-page-2-gm16>
103
- {/each}
104
- </div>
105
- {#if historyenabled === 'true'}
106
- <player-account-gaming-limits-history-2
107
- {lang}
108
- {userid}
109
- {session}
110
- {endpoint}
111
- ></player-account-gaming-limits-history-2>
112
- {/if}
113
- {/if}
114
- </div>
115
- <style lang="scss">
116
- :host {
117
- font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
118
- color: #666;
119
- }
120
-
121
- *,
122
- *::before,
123
- *::after {
124
- margin: 0;
125
- padding: 0;
126
- list-style: none;
127
- text-decoration: none;
128
- outline: none;
129
- box-sizing: border-box;
130
- }
131
-
132
- .TabsContainer {
133
- height: 42px;
134
- display: flex;
135
- margin-bottom: 12px;
136
- cursor: pointer;
137
- border-bottom: 1px solid #ccc;
138
- }
139
-
140
- .LimitsTab {
141
- font-size: 0.9rem;
142
- margin-bottom: 3px;
143
-
144
- display: flex;
145
- justify-content: center;
146
- align-items: center;
147
-
148
- box-sizing: content-box;
149
- }
150
-
151
- .hidden {
152
- display: none;
153
- }
154
-
155
- .selected {
156
- border-bottom: 3px solid #7ac317;
157
- color: #7ac317;
158
- margin: 0;
159
- }
160
- </style>
1
+ <svelte:options tag={null} />
2
+
3
+ <script lang="ts">
4
+ import '@everymatrix/player-account-gaming-limits-page-2-gmcore';
5
+ import '@everymatrix/player-account-gaming-limits-page-2-gm16';
6
+ import '@everymatrix/player-account-gaming-limits-history-2';
7
+
8
+ export let lang:string = '';
9
+ export let userid:string = '';
10
+ export let session:string = '';
11
+ export let endpoint:string = '';
12
+ export let currency:string = '';
13
+ export let apiversion:string = '';
14
+
15
+ export let includedlimits:string = '';
16
+ export let tablabels:string = '';
17
+ export let historyenabled:string = "true";
18
+
19
+ export let clientstyling:string = '';
20
+ export let clientstylingurl:string = '';
21
+
22
+ let isLoading:boolean = true;
23
+ let customStylingContainer:HTMLElement;
24
+ let limitTabs:Array<string> = [];
25
+ let tabLabelArray:Array<string>;
26
+ let mainContainer:HTMLElement;
27
+ let tabsContainer:HTMLElement;
28
+
29
+ const determineTabs = ():void => {
30
+ limitTabs = includedlimits.split(',').map(word => word.trim());
31
+ tabLabelArray = tablabels.split(',').map(word => word.trim());
32
+ isLoading = false;
33
+ }
34
+
35
+ const selectTab = (index:number):void => {
36
+ if (mainContainer.children.length > 0){
37
+ for (let i:number = 0; i < mainContainer.children.length; i++) {
38
+ if (index === i) {
39
+ mainContainer.children[i].classList.remove('hidden');
40
+ tabsContainer?.children[i].classList.add('selected');
41
+ } else {
42
+ mainContainer.children[i].classList.add('hidden');
43
+ tabsContainer?.children[i].classList.remove('selected');
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ const setClientStyling = ():void => {
50
+ let sheet:HTMLElement = document.createElement('style');
51
+ sheet.innerHTML = clientstyling;
52
+ customStylingContainer.appendChild(sheet);
53
+ }
54
+
55
+ const setClientStylingURL = ():void => {
56
+ let url:URL = new URL(clientstylingurl);
57
+ let cssFile:HTMLElement = document.createElement('style');
58
+
59
+ fetch(url.href)
60
+ .then((res:any) => res.text())
61
+ .then((data:any) => {
62
+ cssFile.innerHTML = data
63
+
64
+ if (customStylingContainer) {
65
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
66
+ }
67
+ });
68
+ }
69
+
70
+ $:mainContainer && selectTab(0);
71
+ $:clientstylingurl && setClientStylingURL();
72
+ $:clientstyling && setClientStyling();
73
+ $:userid && session && endpoint && includedlimits && tablabels && determineTabs();
74
+ </script>
75
+
76
+ <div bind:this={customStylingContainer}>
77
+ {#if isLoading}
78
+ <!-- Just show nothing, this is loading exposed attributes, not making a fetch. It takes an instant, but prevents nested widgets from rendering with empty attributes -->
79
+ {:else}
80
+ {#if limitTabs.length > 1}
81
+ <div class="TabsContainer" bind:this={tabsContainer}>
82
+ {#each limitTabs as limit,i}
83
+ <div class="LimitsTab" style="width: {100 / limitTabs.length}%" on:click={() => selectTab(i)}>{tabLabelArray[i] ?? limit}</div>
84
+ {/each}
85
+ </div>
86
+ {/if}
87
+
88
+ <div class="player-account-gaming-limits-wrapper-2" bind:this={mainContainer}>
89
+ {#each limitTabs as limits}
90
+ {#if apiversion == 'gmcore'}
91
+ <player-account-gaming-limits-page-2-gmcore class="hidden selected"
92
+ {lang}
93
+ {currency}
94
+ {limits}
95
+ {userid}
96
+ {session}
97
+ {endpoint}
98
+ {apiversion}
99
+ ></player-account-gaming-limits-page-2-gmcore>
100
+ {:else}
101
+ <player-account-gaming-limits-page-2-gm16 class="hidden selected"
102
+ {lang}
103
+ {currency}
104
+ {limits}
105
+ {userid}
106
+ {session}
107
+ {endpoint}
108
+ {apiversion}
109
+ ></player-account-gaming-limits-page-2-gm16>
110
+ {/if}
111
+ {/each}
112
+ </div>
113
+ {#if historyenabled === 'true'}
114
+ <player-account-gaming-limits-history-2
115
+ {lang}
116
+ {userid}
117
+ {session}
118
+ {endpoint}
119
+ ></player-account-gaming-limits-history-2>
120
+ {/if}
121
+ {/if}
122
+ </div>
123
+ <style lang="scss">
124
+ :host {
125
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
126
+ color: #666;
127
+ }
128
+
129
+ *,
130
+ *::before,
131
+ *::after {
132
+ margin: 0;
133
+ padding: 0;
134
+ list-style: none;
135
+ text-decoration: none;
136
+ outline: none;
137
+ box-sizing: border-box;
138
+ }
139
+
140
+ .TabsContainer {
141
+ height: 42px;
142
+ display: flex;
143
+ margin-bottom: 12px;
144
+ cursor: pointer;
145
+ border-bottom: 1px solid #ccc;
146
+ }
147
+
148
+ .LimitsTab {
149
+ font-size: 18px;
150
+ margin-bottom: 3px;
151
+
152
+ display: flex;
153
+ justify-content: center;
154
+ align-items: center;
155
+
156
+ box-sizing: content-box;
157
+ }
158
+
159
+ .hidden {
160
+ display: none;
161
+ }
162
+
163
+ .selected {
164
+ border-bottom: 3px solid #7ac317;
165
+ color: #7ac317;
166
+ margin: 0;
167
+ }
168
+ </style>
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- import PlayerAccountGamingLimitsWrapper_2 from './PlayerAccountGamingLimitsWrapper_2.svelte';
2
-
3
- !customElements.get('player-account-gaming-limits-wrapper-2') && customElements.define('player-account-gaming-limits-wrapper-2', PlayerAccountGamingLimitsWrapper_2);
4
- export default PlayerAccountGamingLimitsWrapper_2;
1
+ import PlayerAccountGamingLimitsWrapper_2 from './PlayerAccountGamingLimitsWrapper_2.svelte';
2
+
3
+ !customElements.get('player-account-gaming-limits-wrapper-2') && customElements.define('player-account-gaming-limits-wrapper-2', PlayerAccountGamingLimitsWrapper_2);
4
+ export default PlayerAccountGamingLimitsWrapper_2;
package/stories/PlayerAccountGamingLimitsWrapper_2.stories.js CHANGED
@@ -1,13 +1,13 @@
1
- import { html } from 'lit-element';
2
-
3
- import PlayerAccountGamingLimitsWrapper_2 from '../src/PlayerAccountGamingLimitsWrapper_2';
4
-
5
- // This default export determines where your story goes in the story list
6
- export default {
7
- title: 'PlayerAccountGamingLimitsWrapper_2',
8
- };
9
-
10
- // 👇 We create a “template” of how args map to rendering
11
- const PlayerAccountGamingLimitsWrapper_2 = ({ aProperty }) => html`<player-account-gaming-limits-wrapper-2></player-account-gaming-limits-wrapper-2>`;
12
-
13
- export const FirstStory = PlayerAccountGamingLimitsWrapper_2.bind({});
1
+ import { html } from 'lit-element';
2
+
3
+ import PlayerAccountGamingLimitsWrapper_2 from '../src/PlayerAccountGamingLimitsWrapper_2';
4
+
5
+ // This default export determines where your story goes in the story list
6
+ export default {
7
+ title: 'PlayerAccountGamingLimitsWrapper_2',
8
+ };
9
+
10
+ // 👇 We create a “template” of how args map to rendering
11
+ const PlayerAccountGamingLimitsWrapper_2 = ({ aProperty }) => html`<player-account-gaming-limits-wrapper-2></player-account-gaming-limits-wrapper-2>`;
12
+
13
+ export const FirstStory = PlayerAccountGamingLimitsWrapper_2.bind({});
package/tsconfig.json CHANGED
@@ -1,6 +1,6 @@
1
- {
2
- "extends": "@tsconfig/svelte/tsconfig.json",
3
-
4
- "include": ["src/**/*"],
5
- "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6
- }
1
+ {
2
+ "extends": "@tsconfig/svelte/tsconfig.json",
3
+
4
+ "include": ["src/**/*"],
5
+ "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6
+ }