@everymatrix/user-action-controller 1.44.0 → 1.45.2
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.
- package/dist/cjs/app-globals-3a1e7e63.js +5 -0
- package/dist/cjs/index-c5061e5a.js +1315 -0
- package/dist/cjs/loader.cjs.js +7 -13
- package/dist/cjs/player-user-consents_2.cjs.entry.js +457 -495
- package/dist/cjs/user-action-controller.cjs.js +17 -11
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/user-action-controller/index.js +1 -0
- package/dist/collection/components/user-action-controller/user-action-controller.js +408 -414
- package/dist/collection/utils/locale.utils.js +70 -70
- package/dist/collection/utils/utils.js +1 -1
- package/dist/esm/app-globals-0f993ce5.js +3 -0
- package/dist/esm/index-02b86e76.js +1288 -0
- package/dist/esm/loader.js +7 -13
- package/dist/esm/player-user-consents_2.entry.js +457 -495
- package/dist/esm/user-action-controller.js +14 -11
- package/dist/stencil.config.dev.js +17 -0
- package/dist/stencil.config.js +14 -19
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/user-action-controller/.stencil/packages/stencil/user-action-controller/stencil.config.d.ts +2 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/user-action-controller/.stencil/packages/stencil/user-action-controller/stencil.config.dev.d.ts +2 -0
- package/dist/types/components/user-action-controller/index.d.ts +1 -0
- package/dist/types/components/user-action-controller/user-action-controller.d.ts +68 -68
- package/dist/types/stencil-public-runtime.d.ts +142 -33
- package/dist/user-action-controller/p-b996e8b8.js +2 -0
- package/dist/user-action-controller/p-d7fbd383.entry.js +1 -0
- package/dist/user-action-controller/p-e1255160.js +1 -0
- package/dist/user-action-controller/user-action-controller.esm.js +1 -1
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.d.ts +13 -1
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/loader/package.json +1 -0
- package/package.json +9 -2
- package/dist/cjs/index-87049e21.js +0 -1300
- package/dist/components/index.d.ts +0 -26
- package/dist/components/index.js +0 -1
- package/dist/components/player-user-consents.js +0 -6
- package/dist/components/player-user-consents2.js +0 -257
- package/dist/components/user-action-controller.d.ts +0 -11
- package/dist/components/user-action-controller.js +0 -365
- package/dist/esm/index-71f14530.js +0 -1274
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/user-action-controller/.stencil/packages/user-action-controller/stencil.config.d.ts +0 -2
- package/dist/user-action-controller/p-2dc9103a.entry.js +0 -1
- package/dist/user-action-controller/p-ba444709.js +0 -1
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/* UserActionController custom elements */
|
|
2
|
-
|
|
3
|
-
import type { Components, JSX } from "../types/components";
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Used to manually set the base path where assets can be found.
|
|
7
|
-
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
8
|
-
* such as "setAssetPath(import.meta.url)". Other options include
|
|
9
|
-
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
10
|
-
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
11
|
-
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
12
|
-
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
13
|
-
* will have to ensure the static assets are copied to its build directory.
|
|
14
|
-
*/
|
|
15
|
-
export declare const setAssetPath: (path: string) => void;
|
|
16
|
-
|
|
17
|
-
export interface SetPlatformOptions {
|
|
18
|
-
raf?: (c: FrameRequestCallback) => number;
|
|
19
|
-
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
20
|
-
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
21
|
-
}
|
|
22
|
-
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
23
|
-
|
|
24
|
-
export type { Components, JSX };
|
|
25
|
-
|
|
26
|
-
export * from '../types';
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
4
|
-
const TRANSLATIONS = {
|
|
5
|
-
en: {
|
|
6
|
-
termsAndConditions: {
|
|
7
|
-
acceptPart1: "I accept the ",
|
|
8
|
-
acceptPart2: ", I have read and understood the ",
|
|
9
|
-
acceptPart3: " as published on this site and confirm that I am over 18 years old.",
|
|
10
|
-
tc: "Terms and Conditions"
|
|
11
|
-
},
|
|
12
|
-
privacyPolicy: {
|
|
13
|
-
readUnderstandPart1: "I have read and understood the ",
|
|
14
|
-
readUnderstandPart2: ", as published on this site and confirm that I am over 18 years old.",
|
|
15
|
-
privacy: "Privacy Policy"
|
|
16
|
-
},
|
|
17
|
-
sms: "I consent to receive marketing communication via SMS.",
|
|
18
|
-
emailmarketing: "I consent to receive marketing communication via Email."
|
|
19
|
-
},
|
|
20
|
-
ro: {
|
|
21
|
-
termsAndConditions: {
|
|
22
|
-
acceptPart1: "Accept ",
|
|
23
|
-
acceptPart2: " platformei. Am citit şi înţeles ",
|
|
24
|
-
acceptPart3: " publicată pe acest site şi confirm că am vârstă peste 18 ani.",
|
|
25
|
-
tc: "Termenii şi condiţiile"
|
|
26
|
-
},
|
|
27
|
-
privacyPolicy: {
|
|
28
|
-
readUnderstandPart1: "Am citit şi înţeles ",
|
|
29
|
-
readUnderstandPart2: " publicată pe acest site şi confirm că am vârstă peste 18 ani.",
|
|
30
|
-
privacy: "Politica de confidenţialitate"
|
|
31
|
-
},
|
|
32
|
-
sms: "Sunt de acord să primesc promoţii de marketing prin SMS.",
|
|
33
|
-
emailmarketing: "Sunt de acord să primesc promoţii de marketing pe e-mail."
|
|
34
|
-
},
|
|
35
|
-
hr: {
|
|
36
|
-
termsAndConditions: {
|
|
37
|
-
acceptPart1: "Prihvaćam Opće uvjete i odredbe ",
|
|
38
|
-
acceptPart2: "",
|
|
39
|
-
acceptPart3: "",
|
|
40
|
-
tcLink: "Opći uvjeti i odredbe"
|
|
41
|
-
},
|
|
42
|
-
privacyPolicy: {
|
|
43
|
-
readUnderstandPart1: "Pročitao sam i razumijem Politiku Privatnosti ",
|
|
44
|
-
readUnderstandPart2: ", i potvrđujem da imam više od 18 godina",
|
|
45
|
-
privacyLink: "Politika Privatnosti"
|
|
46
|
-
},
|
|
47
|
-
sms: "Želim dobivati marketinški sadržaj putem sms",
|
|
48
|
-
emailmarketing: "Želim dobivati marketinški sadržaj putem e-maila"
|
|
49
|
-
},
|
|
50
|
-
fr: {
|
|
51
|
-
termsAndConditions: {
|
|
52
|
-
acceptPart1: "I accept the ",
|
|
53
|
-
acceptPart2: ", I have read and understood the ",
|
|
54
|
-
acceptPart3: " as published on this site and confirm that I am over 18 years old.",
|
|
55
|
-
tc: "Terms and Conditions"
|
|
56
|
-
},
|
|
57
|
-
privacyPolicy: {
|
|
58
|
-
readUnderstandPart1: "I have read and understood the ",
|
|
59
|
-
readUnderstandPart2: ", as published on this site and confirm that I am over 18 years old.",
|
|
60
|
-
privacy: "Privacy Policy"
|
|
61
|
-
},
|
|
62
|
-
sms: "I consent to receive marketing communication via SMS.",
|
|
63
|
-
emailmarketing: "I consent to receive marketing communication via Email."
|
|
64
|
-
},
|
|
65
|
-
cs: {
|
|
66
|
-
termsAndConditions: {
|
|
67
|
-
acceptPart1: "I accept the ",
|
|
68
|
-
acceptPart2: ", I have read and understood the ",
|
|
69
|
-
acceptPart3: " as published on this site and confirm that I am over 18 years old.",
|
|
70
|
-
tc: "Terms and Conditions"
|
|
71
|
-
},
|
|
72
|
-
privacyPolicy: {
|
|
73
|
-
readUnderstandPart1: "I have read and understood the ",
|
|
74
|
-
readUnderstandPart2: ", as published on this site and confirm that I am over 18 years old.",
|
|
75
|
-
privacy: "Privacy Policy"
|
|
76
|
-
},
|
|
77
|
-
sms: "I consent to receive marketing communication via SMS.",
|
|
78
|
-
emailmarketing: "I consent to receive marketing communication via Email."
|
|
79
|
-
},
|
|
80
|
-
de: {
|
|
81
|
-
termsAndConditions: {
|
|
82
|
-
acceptPart1: "I accept the ",
|
|
83
|
-
acceptPart2: ", I have read and understood the ",
|
|
84
|
-
acceptPart3: " as published on this site and confirm that I am over 18 years old.",
|
|
85
|
-
tc: "Terms and Conditions"
|
|
86
|
-
},
|
|
87
|
-
privacyPolicy: {
|
|
88
|
-
readUnderstandPart1: "I have read and understood the ",
|
|
89
|
-
readUnderstandPart2: ", as published on this site and confirm that I am over 18 years old.",
|
|
90
|
-
privacy: "Privacy Policy"
|
|
91
|
-
},
|
|
92
|
-
sms: "I consent to receive marketing communication via SMS.",
|
|
93
|
-
emailmarketing: "I consent to receive marketing communication via Email."
|
|
94
|
-
},
|
|
95
|
-
};
|
|
96
|
-
const getTranslations = (url) => {
|
|
97
|
-
// fetch url, get the data, replace the TRANSLATIONS content
|
|
98
|
-
return new Promise((resolve) => {
|
|
99
|
-
fetch(url)
|
|
100
|
-
.then((res) => res.json())
|
|
101
|
-
.then((data) => {
|
|
102
|
-
Object.keys(data).forEach((item) => {
|
|
103
|
-
for (let key in data[item]) {
|
|
104
|
-
TRANSLATIONS[item][key] = data[item][key];
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
resolve(true);
|
|
108
|
-
});
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
const translate = (key, customLang, values) => {
|
|
112
|
-
const lang = customLang || DEFAULT_LANGUAGE;
|
|
113
|
-
const getNestedTranslation = (obj, path) => {
|
|
114
|
-
return path.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), obj);
|
|
115
|
-
};
|
|
116
|
-
let translation = getNestedTranslation(TRANSLATIONS[lang], key);
|
|
117
|
-
if (translation === null) {
|
|
118
|
-
return key;
|
|
119
|
-
}
|
|
120
|
-
if (values !== undefined) {
|
|
121
|
-
for (const [k, v] of Object.entries(values)) {
|
|
122
|
-
const regex = new RegExp(`{${k}}`, 'g');
|
|
123
|
-
translation = translation.replace(regex, v);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
return translation;
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
const playerUserConsentsCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.UserConsent:hover{cursor:pointer}.UserConsent{display:flex;align-items:baseline}.MandatoryItem{color:#f00;font-size:1.2rem}.ConsentLink{text-decoration:underline;color:var(--emfe-w-color-primary);font-weight:bold}";
|
|
130
|
-
|
|
131
|
-
const PlayerUserConsents = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
132
|
-
constructor() {
|
|
133
|
-
super();
|
|
134
|
-
this.__registerHost();
|
|
135
|
-
this.__attachShadow();
|
|
136
|
-
this.userLegislationConsent = createEvent(this, "userLegislationConsent", 7);
|
|
137
|
-
/**
|
|
138
|
-
* Language
|
|
139
|
-
*/
|
|
140
|
-
this.lang = 'en';
|
|
141
|
-
/**
|
|
142
|
-
* 'true' when parent expects component to emit it's current value
|
|
143
|
-
*/
|
|
144
|
-
this.queried = false;
|
|
145
|
-
/**
|
|
146
|
-
* the type of the consent, used to determine render details
|
|
147
|
-
*/
|
|
148
|
-
this.consentType = '';
|
|
149
|
-
/**
|
|
150
|
-
* wether or not this consent is mandatory. Used for render details
|
|
151
|
-
*/
|
|
152
|
-
this.mandatory = false;
|
|
153
|
-
/**
|
|
154
|
-
* Select GM version
|
|
155
|
-
*/
|
|
156
|
-
this.gmVersion = '';
|
|
157
|
-
/**
|
|
158
|
-
* the title of the consent to be displayed
|
|
159
|
-
*/
|
|
160
|
-
this.consentTitle = '';
|
|
161
|
-
/**
|
|
162
|
-
* Client custom styling via inline style
|
|
163
|
-
*/
|
|
164
|
-
this.clientStyling = '';
|
|
165
|
-
/**
|
|
166
|
-
* Translation url
|
|
167
|
-
*/
|
|
168
|
-
this.translationUrl = '';
|
|
169
|
-
/**
|
|
170
|
-
* the text content to be rendered by the component. Determined at runtime
|
|
171
|
-
*/
|
|
172
|
-
this.textContent = '';
|
|
173
|
-
this.limitStylingAppends = false;
|
|
174
|
-
this.goToTermsAndConditions = () => window.postMessage({ type: 'GoToTermsAndConditions' });
|
|
175
|
-
this.goToPrivacyPolicy = () => window.postMessage({ type: 'GoToPrivacyPolicy' });
|
|
176
|
-
this.setClientStyling = () => {
|
|
177
|
-
let sheet = document.createElement('style');
|
|
178
|
-
sheet.innerHTML = this.clientStyling;
|
|
179
|
-
this.stylingContainer.prepend(sheet);
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
handleNewTranslations() {
|
|
183
|
-
getTranslations(this.translationUrl);
|
|
184
|
-
}
|
|
185
|
-
async componentWillLoad() {
|
|
186
|
-
if (this.translationUrl.length > 2) {
|
|
187
|
-
await getTranslations(this.translationUrl);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
userLegislationConsentHandler() {
|
|
191
|
-
this.userLegislationConsent.emit({
|
|
192
|
-
type: this.consentType,
|
|
193
|
-
value: this.checkboxInput.checked
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
componentDidRender() {
|
|
197
|
-
// start custom styling area
|
|
198
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
199
|
-
if (this.clientStyling)
|
|
200
|
-
this.setClientStyling();
|
|
201
|
-
this.limitStylingAppends = true;
|
|
202
|
-
}
|
|
203
|
-
// end custom styling area
|
|
204
|
-
}
|
|
205
|
-
determineTextContent() {
|
|
206
|
-
if (this.gmVersion === 'gmcore') {
|
|
207
|
-
if (this.consentType === 'termsandconditions') {
|
|
208
|
-
return h("p", null, translate('termsAndConditions.acceptPart1', this.lang), h("span", { class: "ConsentLink", onClick: this.goToTermsAndConditions }, translate('termsAndConditions.tcLink', this.lang)), translate('termsAndConditions.acceptPart2', this.lang), h("span", { class: "ConsentLink", onClick: this.goToPrivacyPolicy }, translate('privacyPolicy.privacyLink', this.lang)), translate('termsAndConditions.acceptPart3', this.lang));
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
if (this.gmVersion === 'gm16') {
|
|
212
|
-
if (this.consentType === 'termsandconditions') {
|
|
213
|
-
return h("p", null, translate('termsAndConditions.acceptPart1', this.lang), h("span", { class: "ConsentLink", onClick: this.goToTermsAndConditions }, translate('termsAndConditions.tcLink', this.lang)));
|
|
214
|
-
}
|
|
215
|
-
if (this.consentType === 'privacypolicy') {
|
|
216
|
-
return h("p", null, translate('privacyPolicy.readUnderstandPart1', this.lang), h("span", { class: "ConsentLink", onClick: this.goToPrivacyPolicy }, translate('privacyPolicy.privacyLink', this.lang)), translate('privacyPolicy.readUnderstandPart2', this.lang));
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
return h("p", null, translate(this.consentType, this.lang));
|
|
220
|
-
}
|
|
221
|
-
render() {
|
|
222
|
-
if (this.queried) {
|
|
223
|
-
this.userLegislationConsentHandler();
|
|
224
|
-
}
|
|
225
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("p", { class: "ConsentTitle" }, this.consentTitle), h("label", { class: "UserConsent", htmlFor: "userConsent" }, h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.determineTextContent(), this.mandatory && h("span", { class: "MandatoryItem" }, "*"))));
|
|
226
|
-
}
|
|
227
|
-
static get watchers() { return {
|
|
228
|
-
"translationUrl": ["handleNewTranslations"]
|
|
229
|
-
}; }
|
|
230
|
-
static get style() { return playerUserConsentsCss; }
|
|
231
|
-
}, [1, "player-user-consents", {
|
|
232
|
-
"lang": [1537],
|
|
233
|
-
"queried": [516],
|
|
234
|
-
"consentType": [513, "consent-type"],
|
|
235
|
-
"mandatory": [516],
|
|
236
|
-
"gmVersion": [1, "gm-version"],
|
|
237
|
-
"consentTitle": [513, "consent-title"],
|
|
238
|
-
"clientStyling": [1, "client-styling"],
|
|
239
|
-
"translationUrl": [513, "translation-url"],
|
|
240
|
-
"textContent": [32],
|
|
241
|
-
"limitStylingAppends": [32]
|
|
242
|
-
}]);
|
|
243
|
-
function defineCustomElement() {
|
|
244
|
-
if (typeof customElements === "undefined") {
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
const components = ["player-user-consents"];
|
|
248
|
-
components.forEach(tagName => { switch (tagName) {
|
|
249
|
-
case "player-user-consents":
|
|
250
|
-
if (!customElements.get(tagName)) {
|
|
251
|
-
customElements.define(tagName, PlayerUserConsents);
|
|
252
|
-
}
|
|
253
|
-
break;
|
|
254
|
-
} });
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
export { PlayerUserConsents as P, defineCustomElement as d };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface UserActionController extends Components.UserActionController, HTMLElement {}
|
|
4
|
-
export const UserActionController: {
|
|
5
|
-
prototype: UserActionController;
|
|
6
|
-
new (): UserActionController;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,365 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$2 } from './player-user-consents2.js';
|
|
3
|
-
|
|
4
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
5
|
-
const TRANSLATIONS = {
|
|
6
|
-
en: {
|
|
7
|
-
termsAndConditionsTitle: 'Terms and Conditions',
|
|
8
|
-
smsTitle: 'SMS marketing',
|
|
9
|
-
emailMarketingTitle: 'Email marketing',
|
|
10
|
-
privacyPolicyTitle: 'Privacy Policy',
|
|
11
|
-
userNoticeText: 'Before you can proceed you must consent to the following',
|
|
12
|
-
submitButtonText: 'Submit'
|
|
13
|
-
},
|
|
14
|
-
ro: {
|
|
15
|
-
termsAndConditionsTitle: 'Termeni şi condiţii',
|
|
16
|
-
smsTitle: 'SMS marketing',
|
|
17
|
-
emailMarketingTitle: 'Email marketing',
|
|
18
|
-
privacyPolicyTitle: 'Privacy Policy',
|
|
19
|
-
userNoticeText: 'Before you can proceed you must consent to the following',
|
|
20
|
-
submitButtonText: 'Submit'
|
|
21
|
-
},
|
|
22
|
-
hr: {
|
|
23
|
-
termsAndConditionsTitle: 'Opći uvjeti i odredbe',
|
|
24
|
-
smsTitle: 'SMS makretinški sadržaj',
|
|
25
|
-
emailMarketingTitle: 'E-mail makretinški sadržaj',
|
|
26
|
-
privacyPolicyTitle: 'Politika Privatnosti',
|
|
27
|
-
userNoticeText: 'Prije nego što možete nastaviti, morate pristati na sljedeće',
|
|
28
|
-
submitButtonText: 'Pošalji'
|
|
29
|
-
},
|
|
30
|
-
fr: {
|
|
31
|
-
termsAndConditionsTitle: 'Terms and Conditions',
|
|
32
|
-
smsTitle: 'SMS marketing',
|
|
33
|
-
emailMarketingTitle: 'Email marketing',
|
|
34
|
-
privacyPolicyTitle: 'Privacy Policy',
|
|
35
|
-
userNoticeText: 'Before you can proceed you must consent to the following',
|
|
36
|
-
submitButtonText: 'Submit'
|
|
37
|
-
},
|
|
38
|
-
cs: {
|
|
39
|
-
termsAndConditionsTitle: 'Terms and Conditions',
|
|
40
|
-
smsTitle: 'SMS marketing',
|
|
41
|
-
emailMarketingTitle: 'Email marketing',
|
|
42
|
-
privacyPolicyTitle: 'Privacy Policy',
|
|
43
|
-
userNoticeText: 'Before you can proceed you must consent to the following',
|
|
44
|
-
submitButtonText: 'Submit'
|
|
45
|
-
},
|
|
46
|
-
de: {
|
|
47
|
-
termsAndConditionsTitle: 'Terms and Conditions',
|
|
48
|
-
smsTitle: 'SMS marketing',
|
|
49
|
-
emailMarketingTitle: 'Email marketing',
|
|
50
|
-
privacyPolicyTitle: 'Privacy Policy',
|
|
51
|
-
userNoticeText: 'Before you can proceed you must consent to the following',
|
|
52
|
-
submitButtonText: 'Submit'
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
const getTranslations = (url) => {
|
|
56
|
-
return new Promise((resolve) => {
|
|
57
|
-
fetch(url)
|
|
58
|
-
.then((res) => res.json())
|
|
59
|
-
.then((data) => {
|
|
60
|
-
Object.keys(data).forEach((lang) => {
|
|
61
|
-
if (!TRANSLATIONS[lang]) {
|
|
62
|
-
TRANSLATIONS[lang] = {};
|
|
63
|
-
}
|
|
64
|
-
for (let key in data[lang]) {
|
|
65
|
-
TRANSLATIONS[lang][key] = data[lang][key];
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
resolve(true);
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
|
-
const translate = (key, customLang, values) => {
|
|
73
|
-
const lang = customLang;
|
|
74
|
-
let translation = TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
75
|
-
if (values !== undefined) {
|
|
76
|
-
for (const [key, value] of Object.entries(values.values)) {
|
|
77
|
-
const regex = new RegExp(`{${key}}`, 'g');
|
|
78
|
-
translation = translation.replace(regex, value);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
return translation;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end;cursor:pointer}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc;cursor:unset}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}.spinner{animation:rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner .path{stroke:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}";
|
|
85
|
-
|
|
86
|
-
const UserActionController$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
87
|
-
constructor() {
|
|
88
|
-
super();
|
|
89
|
-
this.__registerHost();
|
|
90
|
-
this.__attachShadow();
|
|
91
|
-
/**
|
|
92
|
-
* Language
|
|
93
|
-
*/
|
|
94
|
-
this.lang = 'en';
|
|
95
|
-
/**
|
|
96
|
-
* Select GM version
|
|
97
|
-
*/
|
|
98
|
-
this.gmVersion = '';
|
|
99
|
-
/**
|
|
100
|
-
* Translation url
|
|
101
|
-
*/
|
|
102
|
-
this.translationUrl = '';
|
|
103
|
-
/**
|
|
104
|
-
* Client custom styling via inline style
|
|
105
|
-
*/
|
|
106
|
-
this.clientStyling = '';
|
|
107
|
-
/**
|
|
108
|
-
* Client custom styling via url
|
|
109
|
-
*/
|
|
110
|
-
this.clientStylingUrl = '';
|
|
111
|
-
/**
|
|
112
|
-
* Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
|
|
113
|
-
*/
|
|
114
|
-
this.queryFired = false;
|
|
115
|
-
this.readyActionsCount = 0;
|
|
116
|
-
this.activeUserActions = [];
|
|
117
|
-
this.userActionsValidated = true;
|
|
118
|
-
this.receivedQueryResponses = 0;
|
|
119
|
-
this.limitStylingAppends = false;
|
|
120
|
-
this.isLoading = true;
|
|
121
|
-
this.mandatoryActionsChecked = 0;
|
|
122
|
-
//for now this variable is hardcoded bcs we have terms and conditions and privacy policy mandatory and we dont receive with these new functionality the mandatory actions
|
|
123
|
-
this.mandatoryActions = ['termsandconditions', 'privacypolicy'];
|
|
124
|
-
this.userActions = [];
|
|
125
|
-
this.consentTitles = {
|
|
126
|
-
termsandconditions: translate('termsAndConditionsTitle', this.lang),
|
|
127
|
-
sms: translate('smsTitle', this.lang),
|
|
128
|
-
emailmarketing: translate('emailMarketingTitle', this.lang),
|
|
129
|
-
privacypolicy: translate('privacyPolicyTitle', this.lang)
|
|
130
|
-
};
|
|
131
|
-
this.setClientStyling = () => {
|
|
132
|
-
let sheet = document.createElement('style');
|
|
133
|
-
sheet.innerHTML = this.clientStyling;
|
|
134
|
-
this.stylingContainer.prepend(sheet);
|
|
135
|
-
};
|
|
136
|
-
this.setClientStylingURL = () => {
|
|
137
|
-
let url = new URL(this.clientStylingUrl);
|
|
138
|
-
let cssFile = document.createElement('style');
|
|
139
|
-
fetch(url.href)
|
|
140
|
-
.then((res) => res.text())
|
|
141
|
-
.then((data) => {
|
|
142
|
-
this.clientStyling = data;
|
|
143
|
-
cssFile.innerHTML = data;
|
|
144
|
-
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
|
|
145
|
-
})
|
|
146
|
-
.catch((err) => {
|
|
147
|
-
console.log('error ', err);
|
|
148
|
-
});
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
|
-
handleNewTranslations() {
|
|
152
|
-
getTranslations(this.translationUrl);
|
|
153
|
-
}
|
|
154
|
-
handleQueryResponse() {
|
|
155
|
-
if (this.receivedQueryResponses === this.activeUserActions.length) {
|
|
156
|
-
this.updateUserConsents();
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
userLegislationConsentHandler(event) {
|
|
160
|
-
const actionType = event.detail.type;
|
|
161
|
-
const actionTypeChecked = event.detail.value;
|
|
162
|
-
if (this.mandatoryActions.includes(actionType) && this.queryFired === false) {
|
|
163
|
-
actionTypeChecked === true ? this.mandatoryActionsChecked++ : this.mandatoryActionsChecked--;
|
|
164
|
-
}
|
|
165
|
-
// Register final user choices only if we're ready to update
|
|
166
|
-
if (this.queryFired) {
|
|
167
|
-
const determineStatus = (checked, version) => {
|
|
168
|
-
if (version === 'gm16') {
|
|
169
|
-
return checked ? 1 : 0;
|
|
170
|
-
}
|
|
171
|
-
return checked ? 'Accepted' : 'Denied';
|
|
172
|
-
};
|
|
173
|
-
this.userActions.push(Object.assign({ tagCode: actionType, status: determineStatus(actionTypeChecked, this.gmVersion) }, (this.gmVersion === 'gm16' && { note: '' })));
|
|
174
|
-
this.receivedQueryResponses++;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
determineUserActionsCore() {
|
|
178
|
-
const url = new URL(`${this.endpoint}/v1/player/${this.userId}/consent`);
|
|
179
|
-
const headers = new Headers();
|
|
180
|
-
headers.append('X-SessionId', this.userSession);
|
|
181
|
-
let requestOptions = {
|
|
182
|
-
method: 'GET',
|
|
183
|
-
headers
|
|
184
|
-
};
|
|
185
|
-
return fetch(url.href, requestOptions)
|
|
186
|
-
.then(res => res.json())
|
|
187
|
-
.then(data => {
|
|
188
|
-
const actionItems = data.items;
|
|
189
|
-
actionItems.forEach(element => {
|
|
190
|
-
if (element.status === 'Expired') {
|
|
191
|
-
this.activeUserActions.push(element.tagCode);
|
|
192
|
-
}
|
|
193
|
-
});
|
|
194
|
-
this.isLoading = false;
|
|
195
|
-
})
|
|
196
|
-
.catch(error => {
|
|
197
|
-
console.error('Error fetching data:', error);
|
|
198
|
-
this.isLoading = false;
|
|
199
|
-
}).finally(() => {
|
|
200
|
-
this.calcMandatoryActions();
|
|
201
|
-
window.postMessage({ type: 'UserActionsExists', displayUserActions: this.mandatoryItems > 0 ? true : false }, window.location.href);
|
|
202
|
-
});
|
|
203
|
-
}
|
|
204
|
-
determineUserActions16() {
|
|
205
|
-
const url = new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
|
|
206
|
-
const headers = new Headers();
|
|
207
|
-
headers.append('X-SessionId', this.userSession);
|
|
208
|
-
let requestOptions = {
|
|
209
|
-
method: 'GET',
|
|
210
|
-
headers
|
|
211
|
-
};
|
|
212
|
-
return fetch(url.href, requestOptions)
|
|
213
|
-
.then(res => res.json())
|
|
214
|
-
.then(data => {
|
|
215
|
-
const actionItems = data.consents;
|
|
216
|
-
actionItems.forEach(element => {
|
|
217
|
-
if (element.status === 2 && element.tagCode !== 'pepconsent') {
|
|
218
|
-
this.activeUserActions.push(element.tagCode);
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
this.isLoading = false;
|
|
222
|
-
})
|
|
223
|
-
.catch(error => {
|
|
224
|
-
console.error('Error fetching data:', error);
|
|
225
|
-
this.isLoading = false;
|
|
226
|
-
}).finally(() => {
|
|
227
|
-
this.calcMandatoryActions();
|
|
228
|
-
window.postMessage({ type: 'UserActionsExists', displayUserActions: this.mandatoryItems > 0 ? true : false }, window.location.href);
|
|
229
|
-
});
|
|
230
|
-
}
|
|
231
|
-
updateUserConsents() {
|
|
232
|
-
const url = (this.gmVersion === 'gmcore')
|
|
233
|
-
? new URL(`${this.endpoint}/v1/player/${this.userId}/consent`)
|
|
234
|
-
: new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
|
|
235
|
-
const body = {
|
|
236
|
-
consents: this.userActions
|
|
237
|
-
};
|
|
238
|
-
let requestOptions = {
|
|
239
|
-
method: 'POST',
|
|
240
|
-
headers: {
|
|
241
|
-
'Content-Type': 'application/json',
|
|
242
|
-
'Accept': 'application/json',
|
|
243
|
-
'X-SessionId': `${this.userSession}`,
|
|
244
|
-
},
|
|
245
|
-
body: JSON.stringify(body)
|
|
246
|
-
};
|
|
247
|
-
fetch(url.href, requestOptions)
|
|
248
|
-
.then(res => res.json())
|
|
249
|
-
.then(() => {
|
|
250
|
-
window.postMessage({
|
|
251
|
-
type: 'WidgetNotification',
|
|
252
|
-
data: {
|
|
253
|
-
type: 'success',
|
|
254
|
-
message: 'Consent update successful!'
|
|
255
|
-
}
|
|
256
|
-
}, window.location.href);
|
|
257
|
-
})
|
|
258
|
-
.catch((err) => {
|
|
259
|
-
window.postMessage({
|
|
260
|
-
type: 'WidgetNotification',
|
|
261
|
-
data: {
|
|
262
|
-
type: 'error',
|
|
263
|
-
message: 'Server might not be responding',
|
|
264
|
-
err
|
|
265
|
-
}
|
|
266
|
-
}, window.location.href);
|
|
267
|
-
})
|
|
268
|
-
.finally(() => {
|
|
269
|
-
window.postMessage({ type: 'UserActionsCompleted' }, window.location.href);
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
handleApplyClick() {
|
|
273
|
-
this.queryFired = true;
|
|
274
|
-
}
|
|
275
|
-
async componentWillLoad() {
|
|
276
|
-
if (this.gmVersion === 'gmcore') {
|
|
277
|
-
this.determineUserActionsCore();
|
|
278
|
-
}
|
|
279
|
-
if (this.gmVersion === 'gm16') {
|
|
280
|
-
this.determineUserActions16();
|
|
281
|
-
}
|
|
282
|
-
if (this.translationUrl.length > 2) {
|
|
283
|
-
await getTranslations(this.translationUrl);
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
componentDidRender() {
|
|
287
|
-
// start custom styling area
|
|
288
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
289
|
-
if (this.clientStyling)
|
|
290
|
-
this.setClientStyling();
|
|
291
|
-
if (this.clientStylingUrl)
|
|
292
|
-
this.setClientStylingURL();
|
|
293
|
-
this.limitStylingAppends = true;
|
|
294
|
-
}
|
|
295
|
-
// end custom styling area
|
|
296
|
-
}
|
|
297
|
-
calcMandatoryActions() {
|
|
298
|
-
this.mandatoryItems = 0;
|
|
299
|
-
this.mandatoryActions.map(action => {
|
|
300
|
-
const isPresent = this.activeUserActions.includes(action);
|
|
301
|
-
if (isPresent) {
|
|
302
|
-
this.mandatoryItems++;
|
|
303
|
-
}
|
|
304
|
-
});
|
|
305
|
-
}
|
|
306
|
-
render() {
|
|
307
|
-
if (this.mandatoryItems > 0) {
|
|
308
|
-
this.userActionsValidated = this.mandatoryActionsChecked === this.mandatoryItems;
|
|
309
|
-
return (h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (h("slot", { name: 'spinner' })
|
|
310
|
-
&&
|
|
311
|
-
h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))) : (h("div", { class: "UserActionController" }, h("h2", { class: "UserConsentNotice" }, translate('userNoticeText', this.lang)), h("div", { class: "PlayerLegislationWrapper" }, this.activeUserActions.map(action => (h("slot", { name: action }, h("player-user-consents", { lang: this.lang, "gm-version": this.gmVersion, "translation-url": this.translationUrl, consentType: action, consentTitle: this.consentTitles[action], queried: this.queryFired, mandatory: this.mandatoryActions.includes(action), "client-styling": this.clientStyling }))))), this.includeSubmitButton &&
|
|
312
|
-
h("button", { class: "ConsentSubmitButton", disabled: !this.userActionsValidated, onClick: () => this.handleApplyClick() }, translate('submitButtonText', this.lang))))));
|
|
313
|
-
}
|
|
314
|
-
else {
|
|
315
|
-
return;
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
static get watchers() { return {
|
|
319
|
-
"translationUrl": ["handleNewTranslations"],
|
|
320
|
-
"receivedQueryResponses": ["handleQueryResponse"]
|
|
321
|
-
}; }
|
|
322
|
-
static get style() { return userActionControllerCss; }
|
|
323
|
-
}, [1, "user-action-controller", {
|
|
324
|
-
"endpoint": [513],
|
|
325
|
-
"userSession": [513, "user-session"],
|
|
326
|
-
"userId": [513, "user-id"],
|
|
327
|
-
"lang": [1537],
|
|
328
|
-
"includeSubmitButton": [516, "include-submit-button"],
|
|
329
|
-
"gmVersion": [1, "gm-version"],
|
|
330
|
-
"translationUrl": [513, "translation-url"],
|
|
331
|
-
"clientStyling": [1537, "client-styling"],
|
|
332
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
333
|
-
"queryFired": [32],
|
|
334
|
-
"readyActionsCount": [32],
|
|
335
|
-
"activeUserActions": [32],
|
|
336
|
-
"userActionsValidated": [32],
|
|
337
|
-
"receivedQueryResponses": [32],
|
|
338
|
-
"limitStylingAppends": [32],
|
|
339
|
-
"isLoading": [32],
|
|
340
|
-
"mandatoryActionsChecked": [32],
|
|
341
|
-
"mandatoryItems": [32]
|
|
342
|
-
}, [[0, "userLegislationConsent", "userLegislationConsentHandler"]]]);
|
|
343
|
-
function defineCustomElement$1() {
|
|
344
|
-
if (typeof customElements === "undefined") {
|
|
345
|
-
return;
|
|
346
|
-
}
|
|
347
|
-
const components = ["user-action-controller", "player-user-consents"];
|
|
348
|
-
components.forEach(tagName => { switch (tagName) {
|
|
349
|
-
case "user-action-controller":
|
|
350
|
-
if (!customElements.get(tagName)) {
|
|
351
|
-
customElements.define(tagName, UserActionController$1);
|
|
352
|
-
}
|
|
353
|
-
break;
|
|
354
|
-
case "player-user-consents":
|
|
355
|
-
if (!customElements.get(tagName)) {
|
|
356
|
-
defineCustomElement$2();
|
|
357
|
-
}
|
|
358
|
-
break;
|
|
359
|
-
} });
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
const UserActionController = UserActionController$1;
|
|
363
|
-
const defineCustomElement = defineCustomElement$1;
|
|
364
|
-
|
|
365
|
-
export { UserActionController, defineCustomElement };
|