@everymatrix/casino-categories-providers 0.0.365 → 0.0.367

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 (14) hide show
  1. package/README.md +30 -30
  2. package/dist/casino-categories-providers.js +400 -400
  3. package/dist/casino-categories-providers.js.map +1 -1
  4. package/index.html +99 -99
  5. package/index.js +1 -1
  6. package/package.json +2 -2
  7. package/public/reset.css +47 -47
  8. package/rollup.config.js +59 -59
  9. package/src/CasinoCategoriesProviders.svelte +140 -140
  10. package/src/i18n.js +27 -27
  11. package/src/index.ts +4 -4
  12. package/src/translations.js +92 -92
  13. package/stories/CasinoCategoriesProviders.stories.js +13 -13
  14. package/tsconfig.json +6 -6
package/src/CasinoCategoriesProviders.svelte CHANGED
@@ -1,140 +1,140 @@
1
- <svelte:options tag={null} />
2
- <script lang="ts">
3
-
4
- import { _, addNewMessages, setLocale } from './i18n';
5
- import { Translations } from './translations';
6
- import '@everymatrix/casino-categories';
7
- import '@everymatrix/casino-providers';
8
-
9
- export let endpointcategories:string = '';
10
- export let datasourcecategories:string = '';
11
- export let activecategory:string = '';
12
- export let endpointproviders:string = '';
13
- export let datasourceproviders:string = '';
14
- export let lang:string = 'en';
15
- export let clientstyling:string = '';
16
- export let clientstylingurl:string = '';
17
-
18
- let activeTab:string='categories';
19
- let customStylingContainer:HTMLElement;
20
- let displayNone:boolean = false;
21
-
22
- Object.keys(Translations).forEach((item:any):void => {
23
- addNewMessages(item, Translations[item]);
24
- });
25
-
26
- const toggleTab = (type:string):void => {
27
- if(activeTab === type) return;
28
- activeTab = type;
29
- }
30
-
31
- const setActiveLanguage = ():void => {
32
- setLocale(lang);
33
- }
34
-
35
- const setClientStyling = ():void => {
36
- let sheet = document.createElement('style');
37
- sheet.innerHTML = clientstyling;
38
- customStylingContainer.appendChild(sheet);
39
- }
40
-
41
- const setClientStylingURL = ():void => {
42
- displayNone = true;
43
-
44
- let url:URL = new URL(clientstylingurl);
45
- let cssFile:HTMLElement = document.createElement('style');
46
-
47
- fetch(url.href)
48
- .then((res:any) => res.text())
49
- .then((data:any) => {
50
- cssFile.innerHTML = data;
51
-
52
- if (customStylingContainer) {
53
- setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
54
- setTimeout(() => { displayNone = false; }, 500);
55
- }
56
- });
57
- }
58
-
59
- $: lang && setActiveLanguage();
60
- $: clientstyling && setClientStyling();
61
- $: clientstylingurl && setClientStylingURL();
62
- </script>
63
-
64
- <div bind:this={customStylingContainer}>
65
- <div class="CasinoCategoriesProviders">
66
- <div class="Header">
67
- <button on:click={() => toggleTab('categories')} class="HeaderButton {activeTab === 'categories' ? 'Active': ''}">
68
- {$_('Translations.categories')}
69
- </button>
70
- <button on:click={() => toggleTab('providers')} class="HeaderButton {activeTab === 'providers' ? 'Active': ''}">
71
- {$_('Translations.providers')}
72
- </button>
73
- </div>
74
-
75
- <div class="{activeTab === 'providers' ? 'NotVisible': ''}">
76
- <casino-categories
77
- endpoint={endpointcategories}
78
- datasource={datasourcecategories}
79
- activecategory={activecategory}
80
- lang={lang}
81
- {clientstyling}
82
- {clientstylingurl}
83
- ></casino-categories>
84
- </div>
85
- <div class="{activeTab === 'categories' ? 'NotVisible': ''}">
86
- <casino-providers
87
- endpoint={endpointproviders}
88
- datasource={datasourceproviders}
89
- lang={lang}
90
- {clientstyling}
91
- {clientstylingurl}
92
- ></casino-providers>
93
- </div>
94
- </div>
95
- </div>
96
-
97
- <style lang="scss">
98
- :host {
99
- font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
100
- }
101
-
102
- $color-grey: #828282;
103
- $color-red: #c8102e;
104
- $color-white: #ffffff;
105
-
106
- *,
107
- *::before,
108
- *::after {
109
- margin: 0;
110
- padding: 0;
111
- box-sizing: border-box;
112
- }
113
-
114
- .NotVisible {
115
- display: none;
116
- }
117
-
118
- .Header {
119
- display: flex;
120
- max-width: 100%;
121
- min-width: 320px;
122
- margin-bottom: 14px;
123
-
124
- &Button {
125
- flex: 1 2 0;
126
- min-height: 48px;
127
- margin: 0;
128
- border: none;
129
- background: $color-white;
130
- color: $color-grey;
131
- box-shadow: 1px 2px 2px rgba($color-grey, 0.1);
132
-
133
- &.Active{
134
- box-shadow: none;
135
- border-bottom: 2px solid $color-red;
136
- color: $color-red;
137
- }
138
- }
139
- }
140
- </style>
1
+ <svelte:options tag={null} />
2
+ <script lang="ts">
3
+
4
+ import { _, addNewMessages, setLocale } from './i18n';
5
+ import { Translations } from './translations';
6
+ import '@everymatrix/casino-categories';
7
+ import '@everymatrix/casino-providers';
8
+
9
+ export let endpointcategories:string = '';
10
+ export let datasourcecategories:string = '';
11
+ export let activecategory:string = '';
12
+ export let endpointproviders:string = '';
13
+ export let datasourceproviders:string = '';
14
+ export let lang:string = 'en';
15
+ export let clientstyling:string = '';
16
+ export let clientstylingurl:string = '';
17
+
18
+ let activeTab:string='categories';
19
+ let customStylingContainer:HTMLElement;
20
+ let displayNone:boolean = false;
21
+
22
+ Object.keys(Translations).forEach((item:any):void => {
23
+ addNewMessages(item, Translations[item]);
24
+ });
25
+
26
+ const toggleTab = (type:string):void => {
27
+ if(activeTab === type) return;
28
+ activeTab = type;
29
+ }
30
+
31
+ const setActiveLanguage = ():void => {
32
+ setLocale(lang);
33
+ }
34
+
35
+ const setClientStyling = ():void => {
36
+ let sheet = document.createElement('style');
37
+ sheet.innerHTML = clientstyling;
38
+ customStylingContainer.appendChild(sheet);
39
+ }
40
+
41
+ const setClientStylingURL = ():void => {
42
+ displayNone = true;
43
+
44
+ let url:URL = new URL(clientstylingurl);
45
+ let cssFile:HTMLElement = document.createElement('style');
46
+
47
+ fetch(url.href)
48
+ .then((res:any) => res.text())
49
+ .then((data:any) => {
50
+ cssFile.innerHTML = data;
51
+
52
+ if (customStylingContainer) {
53
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
54
+ setTimeout(() => { displayNone = false; }, 500);
55
+ }
56
+ });
57
+ }
58
+
59
+ $: lang && setActiveLanguage();
60
+ $: clientstyling && setClientStyling();
61
+ $: clientstylingurl && setClientStylingURL();
62
+ </script>
63
+
64
+ <div bind:this={customStylingContainer}>
65
+ <div class="CasinoCategoriesProviders">
66
+ <div class="Header">
67
+ <button on:click={() => toggleTab('categories')} class="HeaderButton {activeTab === 'categories' ? 'Active': ''}">
68
+ {$_('Translations.categories')}
69
+ </button>
70
+ <button on:click={() => toggleTab('providers')} class="HeaderButton {activeTab === 'providers' ? 'Active': ''}">
71
+ {$_('Translations.providers')}
72
+ </button>
73
+ </div>
74
+
75
+ <div class="{activeTab === 'providers' ? 'NotVisible': ''}">
76
+ <casino-categories
77
+ endpoint={endpointcategories}
78
+ datasource={datasourcecategories}
79
+ activecategory={activecategory}
80
+ lang={lang}
81
+ {clientstyling}
82
+ {clientstylingurl}
83
+ ></casino-categories>
84
+ </div>
85
+ <div class="{activeTab === 'categories' ? 'NotVisible': ''}">
86
+ <casino-providers
87
+ endpoint={endpointproviders}
88
+ datasource={datasourceproviders}
89
+ lang={lang}
90
+ {clientstyling}
91
+ {clientstylingurl}
92
+ ></casino-providers>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <style lang="scss">
98
+ :host {
99
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
100
+ }
101
+
102
+ $color-grey: #828282;
103
+ $color-red: #c8102e;
104
+ $color-white: #ffffff;
105
+
106
+ *,
107
+ *::before,
108
+ *::after {
109
+ margin: 0;
110
+ padding: 0;
111
+ box-sizing: border-box;
112
+ }
113
+
114
+ .NotVisible {
115
+ display: none;
116
+ }
117
+
118
+ .Header {
119
+ display: flex;
120
+ max-width: 100%;
121
+ min-width: 320px;
122
+ margin-bottom: 14px;
123
+
124
+ &Button {
125
+ flex: 1 2 0;
126
+ min-height: 48px;
127
+ margin: 0;
128
+ border: none;
129
+ background: $color-white;
130
+ color: $color-grey;
131
+ box-shadow: 1px 2px 2px rgba($color-grey, 0.1);
132
+
133
+ &.Active{
134
+ box-shadow: none;
135
+ border-bottom: 2px solid $color-red;
136
+ color: $color-red;
137
+ }
138
+ }
139
+ }
140
+ </style>
package/src/i18n.js CHANGED
@@ -1,27 +1,27 @@
1
- import {
2
- dictionary,
3
- locale,
4
- addMessages,
5
- _
6
- } from 'svelte-i18n';
7
-
8
- function setupI18n({ withLocale: _locale, translations }) {
9
- locale.subscribe((data) => {
10
- if (data == null) {
11
- dictionary.set(translations);
12
- locale.set(_locale);
13
- }
14
- }); // maybe we will need this to make sure that the i18n is set up only once
15
- /*dictionary.set(translations);
16
- locale.set(_locale);*/
17
- }
18
-
19
- function addNewMessages(lang, dict) {
20
- addMessages(lang, dict);
21
- }
22
-
23
- function setLocale(_locale) {
24
- locale.set(_locale);
25
- }
26
-
27
- export { _, setupI18n, addNewMessages, setLocale };
1
+ import {
2
+ dictionary,
3
+ locale,
4
+ addMessages,
5
+ _
6
+ } from 'svelte-i18n';
7
+
8
+ function setupI18n({ withLocale: _locale, translations }) {
9
+ locale.subscribe((data) => {
10
+ if (data == null) {
11
+ dictionary.set(translations);
12
+ locale.set(_locale);
13
+ }
14
+ }); // maybe we will need this to make sure that the i18n is set up only once
15
+ /*dictionary.set(translations);
16
+ locale.set(_locale);*/
17
+ }
18
+
19
+ function addNewMessages(lang, dict) {
20
+ addMessages(lang, dict);
21
+ }
22
+
23
+ function setLocale(_locale) {
24
+ locale.set(_locale);
25
+ }
26
+
27
+ export { _, setupI18n, addNewMessages, setLocale };
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- import CasinoCategoriesProviders from './CasinoCategoriesProviders.svelte';
2
-
3
- !customElements.get('casino-categories-providers') && customElements.define('casino-categories-providers', CasinoCategoriesProviders);
4
- export default CasinoCategoriesProviders;
1
+ import CasinoCategoriesProviders from './CasinoCategoriesProviders.svelte';
2
+
3
+ !customElements.get('casino-categories-providers') && customElements.define('casino-categories-providers', CasinoCategoriesProviders);
4
+ export default CasinoCategoriesProviders;
package/src/translations.js CHANGED
@@ -1,92 +1,92 @@
1
- export const Translations = {
2
- en: {
3
- Translations: {
4
- categories: "Categories",
5
- providers: "Suppliers",
6
- },
7
- },
8
- zh: {
9
- Translations: {
10
- categories: "类别",
11
- providers: "供应商",
12
- },
13
- },
14
- de: {
15
- Translations: {
16
- categories: "Kategorien",
17
- providers: "Anbieter",
18
- },
19
- },
20
- it: {
21
- Translations: {
22
- categories: "Categories",
23
- providers: "Suppliers",
24
- },
25
- },
26
- fr: {
27
- Translations: {
28
- categories: "Catégories",
29
- providers: "Fournisseurs",
30
- },
31
- },
32
- es: {
33
- Translations: {
34
- categories: "Categories",
35
- providers: "Suppliers",
36
- },
37
- },
38
- tr: {
39
- Translations: {
40
- categories: "Categories",
41
- providers: "Suppliers",
42
- },
43
- },
44
- ru: {
45
- Translations: {
46
- categories: "Categories",
47
- providers: "Suppliers",
48
- },
49
- },
50
- ro: {
51
- Translations: {
52
- categories: "Categorii",
53
- providers: "Furnizori",
54
- },
55
- },
56
- hr: {
57
- Translations: {
58
- categories: "Categories",
59
- providers: "Suppliers",
60
- },
61
- },
62
- hu: {
63
- Translations: {
64
- categories: "Categories",
65
- providers: "Suppliers",
66
- },
67
- },
68
- pl: {
69
- Translations: {
70
- categories: "Categories",
71
- providers: "Suppliers",
72
- },
73
- },
74
- pt: {
75
- Translations: {
76
- categories: "Categories",
77
- providers: "Suppliers",
78
- },
79
- },
80
- sl: {
81
- Translations: {
82
- categories: "Categories",
83
- providers: "Suppliers",
84
- },
85
- },
86
- sr: {
87
- Translations: {
88
- categories: "Categories",
89
- providers: "Suppliers",
90
- },
91
- },
92
- };
1
+ export const Translations = {
2
+ en: {
3
+ Translations: {
4
+ categories: "Categories",
5
+ providers: "Suppliers",
6
+ },
7
+ },
8
+ zh: {
9
+ Translations: {
10
+ categories: "类别",
11
+ providers: "供应商",
12
+ },
13
+ },
14
+ de: {
15
+ Translations: {
16
+ categories: "Kategorien",
17
+ providers: "Anbieter",
18
+ },
19
+ },
20
+ it: {
21
+ Translations: {
22
+ categories: "Categories",
23
+ providers: "Suppliers",
24
+ },
25
+ },
26
+ fr: {
27
+ Translations: {
28
+ categories: "Catégories",
29
+ providers: "Fournisseurs",
30
+ },
31
+ },
32
+ es: {
33
+ Translations: {
34
+ categories: "Categories",
35
+ providers: "Suppliers",
36
+ },
37
+ },
38
+ tr: {
39
+ Translations: {
40
+ categories: "Categories",
41
+ providers: "Suppliers",
42
+ },
43
+ },
44
+ ru: {
45
+ Translations: {
46
+ categories: "Categories",
47
+ providers: "Suppliers",
48
+ },
49
+ },
50
+ ro: {
51
+ Translations: {
52
+ categories: "Categorii",
53
+ providers: "Furnizori",
54
+ },
55
+ },
56
+ hr: {
57
+ Translations: {
58
+ categories: "Categories",
59
+ providers: "Suppliers",
60
+ },
61
+ },
62
+ hu: {
63
+ Translations: {
64
+ categories: "Categories",
65
+ providers: "Suppliers",
66
+ },
67
+ },
68
+ pl: {
69
+ Translations: {
70
+ categories: "Categories",
71
+ providers: "Suppliers",
72
+ },
73
+ },
74
+ pt: {
75
+ Translations: {
76
+ categories: "Categories",
77
+ providers: "Suppliers",
78
+ },
79
+ },
80
+ sl: {
81
+ Translations: {
82
+ categories: "Categories",
83
+ providers: "Suppliers",
84
+ },
85
+ },
86
+ sr: {
87
+ Translations: {
88
+ categories: "Categories",
89
+ providers: "Suppliers",
90
+ },
91
+ },
92
+ };
package/stories/CasinoCategoriesProviders.stories.js CHANGED
@@ -1,13 +1,13 @@
1
- import { html } from 'lit-element';
2
-
3
- import CasinoCategoriesProviders from '../src/CasinoCategoriesProviders';
4
-
5
- // This default export determines where your story goes in the story list
6
- export default {
7
- title: 'CasinoCategoriesProviders',
8
- };
9
-
10
- // 👇 We create a “template” of how args map to rendering
11
- const CasinoCategoriesProviders = ({ aProperty }) => html`<casino-categories-providers></casino-categories-providers>`;
12
-
13
- export const FirstStory = CasinoCategoriesProviders.bind({});
1
+ import { html } from 'lit-element';
2
+
3
+ import CasinoCategoriesProviders from '../src/CasinoCategoriesProviders';
4
+
5
+ // This default export determines where your story goes in the story list
6
+ export default {
7
+ title: 'CasinoCategoriesProviders',
8
+ };
9
+
10
+ // 👇 We create a “template” of how args map to rendering
11
+ const CasinoCategoriesProviders = ({ aProperty }) => html`<casino-categories-providers></casino-categories-providers>`;
12
+
13
+ export const FirstStory = CasinoCategoriesProviders.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
+ }