@everymatrix/player-kyc-verification 1.37.6 → 1.37.7

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 (10) hide show
  1. package/dist/cjs/player-kyc-verification.cjs.entry.js +27 -3
  2. package/dist/collection/components/player-kyc-verification/player-kyc-verification.css +7 -2
  3. package/dist/collection/components/player-kyc-verification/player-kyc-verification.js +20 -2
  4. package/dist/components/player-kyc-verification.js +27 -3
  5. package/dist/esm/player-kyc-verification.entry.js +27 -3
  6. package/dist/player-kyc-verification/p-1315e0b5.entry.js +1 -0
  7. package/dist/player-kyc-verification/player-kyc-verification.esm.js +1 -1
  8. package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts +4 -0
  9. package/package.json +1 -1
  10. package/dist/player-kyc-verification/p-1c5c8f11.entry.js +0 -1
package/dist/cjs/player-kyc-verification.cjs.entry.js CHANGED
@@ -247,7 +247,20 @@ const translate = (key, customLang, values) => {
247
247
  return translation;
248
248
  };
249
249
 
250
- const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 4px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 4px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
250
+ /**
251
+ * @name isMobile
252
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
253
+ * @param {String} userAgent window.navigator.userAgent
254
+ * @returns {Boolean} true or false
255
+ */
256
+ const isMobile = (userAgent) => {
257
+ return !!(userAgent.toLowerCase().match(/android/i) ||
258
+ userAgent.toLowerCase().match(/blackberry|bb/i) ||
259
+ userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
260
+ userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
261
+ };
262
+
263
+ const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 15px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n display: flex;\n align-items: center;\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 15px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
251
264
 
252
265
  const PlayerKycVerificationWidget = class {
253
266
  constructor(hostRef) {
@@ -296,6 +309,8 @@ const PlayerKycVerificationWidget = class {
296
309
  this.expandedOnDesktop = false;
297
310
  this.scriptInjected = false;
298
311
  this.MAX_UPLOAD_SIZE = 50000000;
312
+ this.userAgent = window.navigator.userAgent;
313
+ this.isMobile = isMobile(this.userAgent);
299
314
  this.setClientStyling = () => {
300
315
  let sheet = document.createElement('style');
301
316
  sheet.innerHTML = this.clientStyling;
@@ -314,6 +329,9 @@ const PlayerKycVerificationWidget = class {
314
329
  console.log('error ', err);
315
330
  });
316
331
  };
332
+ this.handleToggleScreen = () => {
333
+ this.toggleScreen(this.isMobile);
334
+ };
317
335
  }
318
336
  handleNewTranslations() {
319
337
  this.isLoading = true;
@@ -410,6 +428,9 @@ const PlayerKycVerificationWidget = class {
410
428
  return type;
411
429
  });
412
430
  }
431
+ toggleScreen(isMobile) {
432
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
433
+ }
413
434
  checkFileSize(file) {
414
435
  let size = 0;
415
436
  Object.keys(file).forEach(element => {
@@ -543,10 +564,13 @@ const PlayerKycVerificationWidget = class {
543
564
  }
544
565
  else {
545
566
  if (this.verificationType.length === 0) {
546
- return index.h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
567
+ return index.h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
547
568
  }
548
569
  else {
549
- return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, index.h("h2", null, translate('kycTitle', this.language)), index.h("div", { class: "widget-description" }, translate('kycDescription', this.language)), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
570
+ return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
571
+ index.h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("defs", null), index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), index.h("h2", null, translate('kycTitle', this.language)))
572
+ :
573
+ index.h("h2", null, translate('kycTitle', this.language))), index.h("div", { class: "widget-description" }, translate('kycDescription', this.language)), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
550
574
  }
551
575
  }
552
576
  }
package/dist/collection/components/player-kyc-verification/player-kyc-verification.css CHANGED
@@ -15,7 +15,7 @@ button, select {
15
15
  align-items: center;
16
16
  }
17
17
  .player-kyc-verification-widget h2 {
18
- margin: 4px;
18
+ margin: 15px;
19
19
  }
20
20
  .player-kyc-verification-widget .widget-description {
21
21
  margin: 24px 0px;
@@ -146,6 +146,11 @@ button, select {
146
146
  color: var(--emfe-w-color-gray-150, #828282);
147
147
  }
148
148
 
149
+ .MenuReturnButton {
150
+ display: flex;
151
+ align-items: center;
152
+ }
153
+
149
154
  @container (min-width: 700px) {
150
155
  .player-kyc-verification-widget {
151
156
  padding: 100px 60px;
@@ -153,7 +158,7 @@ button, select {
153
158
  }
154
159
  @container (max-width: 700px) {
155
160
  .player-kyc-verification-widget h2 {
156
- margin: 4px;
161
+ margin: 15px;
157
162
  text-align: center;
158
163
  }
159
164
  .player-kyc-verification-widget .verification-types {
package/dist/collection/components/player-kyc-verification/player-kyc-verification.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Component, h, State, Prop, Fragment, Watch } from '@stencil/core';
2
2
  import { getTranslations, translate } from '../../utils/locale.utils';
3
+ import { isMobile } from '../../utils/utils';
3
4
  export class PlayerKycVerificationWidget {
4
5
  constructor() {
5
6
  /**
@@ -46,6 +47,8 @@ export class PlayerKycVerificationWidget {
46
47
  this.expandedOnDesktop = false;
47
48
  this.scriptInjected = false;
48
49
  this.MAX_UPLOAD_SIZE = 50000000;
50
+ this.userAgent = window.navigator.userAgent;
51
+ this.isMobile = isMobile(this.userAgent);
49
52
  this.setClientStyling = () => {
50
53
  let sheet = document.createElement('style');
51
54
  sheet.innerHTML = this.clientStyling;
@@ -64,6 +67,9 @@ export class PlayerKycVerificationWidget {
64
67
  console.log('error ', err);
65
68
  });
66
69
  };
70
+ this.handleToggleScreen = () => {
71
+ this.toggleScreen(this.isMobile);
72
+ };
67
73
  }
68
74
  handleNewTranslations() {
69
75
  this.isLoading = true;
@@ -160,6 +166,9 @@ export class PlayerKycVerificationWidget {
160
166
  return type;
161
167
  });
162
168
  }
169
+ toggleScreen(isMobile) {
170
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
171
+ }
163
172
  checkFileSize(file) {
164
173
  let size = 0;
165
174
  Object.keys(file).forEach(element => {
@@ -332,12 +341,21 @@ export class PlayerKycVerificationWidget {
332
341
  }
333
342
  else {
334
343
  if (this.verificationType.length === 0) {
335
- return h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
344
+ return h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
336
345
  }
337
346
  else {
338
347
  return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el },
339
348
  h("div", { class: "player-kyc-verification-widget" },
340
- h("h2", null, translate('kycTitle', this.language)),
349
+ (this.isMobile ?
350
+ h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen },
351
+ h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" },
352
+ h("defs", null),
353
+ h("g", { transform: "translate(-20 -158)" },
354
+ h("g", { transform: "translate(20 158)" },
355
+ h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))),
356
+ h("h2", null, translate('kycTitle', this.language)))
357
+ :
358
+ h("h2", null, translate('kycTitle', this.language))),
341
359
  h("div", { class: "widget-description" }, translate('kycDescription', this.language)),
342
360
  h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
343
361
  }
package/dist/components/player-kyc-verification.js CHANGED
@@ -243,7 +243,20 @@ const translate = (key, customLang, values) => {
243
243
  return translation;
244
244
  };
245
245
 
246
- const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 4px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 4px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
246
+ /**
247
+ * @name isMobile
248
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
249
+ * @param {String} userAgent window.navigator.userAgent
250
+ * @returns {Boolean} true or false
251
+ */
252
+ const isMobile = (userAgent) => {
253
+ return !!(userAgent.toLowerCase().match(/android/i) ||
254
+ userAgent.toLowerCase().match(/blackberry|bb/i) ||
255
+ userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
256
+ userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
257
+ };
258
+
259
+ const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 15px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n display: flex;\n align-items: center;\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 15px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
247
260
 
248
261
  const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
249
262
  constructor() {
@@ -294,6 +307,8 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
294
307
  this.expandedOnDesktop = false;
295
308
  this.scriptInjected = false;
296
309
  this.MAX_UPLOAD_SIZE = 50000000;
310
+ this.userAgent = window.navigator.userAgent;
311
+ this.isMobile = isMobile(this.userAgent);
297
312
  this.setClientStyling = () => {
298
313
  let sheet = document.createElement('style');
299
314
  sheet.innerHTML = this.clientStyling;
@@ -312,6 +327,9 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
312
327
  console.log('error ', err);
313
328
  });
314
329
  };
330
+ this.handleToggleScreen = () => {
331
+ this.toggleScreen(this.isMobile);
332
+ };
315
333
  }
316
334
  handleNewTranslations() {
317
335
  this.isLoading = true;
@@ -408,6 +426,9 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
408
426
  return type;
409
427
  });
410
428
  }
429
+ toggleScreen(isMobile) {
430
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
431
+ }
411
432
  checkFileSize(file) {
412
433
  let size = 0;
413
434
  Object.keys(file).forEach(element => {
@@ -541,10 +562,13 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
541
562
  }
542
563
  else {
543
564
  if (this.verificationType.length === 0) {
544
- return h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
565
+ return h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
545
566
  }
546
567
  else {
547
- return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, h("h2", null, translate('kycTitle', this.language)), h("div", { class: "widget-description" }, translate('kycDescription', this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
568
+ return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
569
+ h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("defs", null), h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('kycTitle', this.language)))
570
+ :
571
+ h("h2", null, translate('kycTitle', this.language))), h("div", { class: "widget-description" }, translate('kycDescription', this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
548
572
  }
549
573
  }
550
574
  }
package/dist/esm/player-kyc-verification.entry.js CHANGED
@@ -243,7 +243,20 @@ const translate = (key, customLang, values) => {
243
243
  return translation;
244
244
  };
245
245
 
246
- const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 4px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 4px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
246
+ /**
247
+ * @name isMobile
248
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
249
+ * @param {String} userAgent window.navigator.userAgent
250
+ * @returns {Boolean} true or false
251
+ */
252
+ const isMobile = (userAgent) => {
253
+ return !!(userAgent.toLowerCase().match(/android/i) ||
254
+ userAgent.toLowerCase().match(/blackberry|bb/i) ||
255
+ userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
256
+ userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
257
+ };
258
+
259
+ const playerKycVerificationCss = ":host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 15px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n display: flex;\n align-items: center;\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 15px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
247
260
 
248
261
  const PlayerKycVerificationWidget = class {
249
262
  constructor(hostRef) {
@@ -292,6 +305,8 @@ const PlayerKycVerificationWidget = class {
292
305
  this.expandedOnDesktop = false;
293
306
  this.scriptInjected = false;
294
307
  this.MAX_UPLOAD_SIZE = 50000000;
308
+ this.userAgent = window.navigator.userAgent;
309
+ this.isMobile = isMobile(this.userAgent);
295
310
  this.setClientStyling = () => {
296
311
  let sheet = document.createElement('style');
297
312
  sheet.innerHTML = this.clientStyling;
@@ -310,6 +325,9 @@ const PlayerKycVerificationWidget = class {
310
325
  console.log('error ', err);
311
326
  });
312
327
  };
328
+ this.handleToggleScreen = () => {
329
+ this.toggleScreen(this.isMobile);
330
+ };
313
331
  }
314
332
  handleNewTranslations() {
315
333
  this.isLoading = true;
@@ -406,6 +424,9 @@ const PlayerKycVerificationWidget = class {
406
424
  return type;
407
425
  });
408
426
  }
427
+ toggleScreen(isMobile) {
428
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
429
+ }
409
430
  checkFileSize(file) {
410
431
  let size = 0;
411
432
  Object.keys(file).forEach(element => {
@@ -539,10 +560,13 @@ const PlayerKycVerificationWidget = class {
539
560
  }
540
561
  else {
541
562
  if (this.verificationType.length === 0) {
542
- return h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
563
+ return h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
543
564
  }
544
565
  else {
545
- return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, h("h2", null, translate('kycTitle', this.language)), h("div", { class: "widget-description" }, translate('kycDescription', this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
566
+ return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
567
+ h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("defs", null), h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('kycTitle', this.language)))
568
+ :
569
+ h("h2", null, translate('kycTitle', this.language))), h("div", { class: "widget-description" }, translate('kycDescription', this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
546
570
  }
547
571
  }
548
572
  }
package/dist/player-kyc-verification/p-1315e0b5.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,h as i,F as o}from"./p-1f2596d0.js";const n=["de","en","hr"];let t={en:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Account Verification",kycDescription:"We require some documents to protect your account and to comply with legal and license requirements.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Recheck:"Recheck",Biometric:"Biometric",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},de:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Account-Verifizierung",kycDescription:"Wir benötigen einige Dokumente, um Ihr Konto zu schützen und den rechtlichen und Lizenzanforderungen zu entsprechen.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},ro:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Verificarea contului",kycDescription:"Avem nevoie de câteva documente pentru a proteja contul dvs. și pentru a respecta cerințele legale și de licență.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},fr:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Vérification de compte",kycDescription:"Nous avons besoin de certains documents pour protéger votre compte et pour nous conformer aux exigences légales et de licence.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},ar:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"التحقق من الحساب",kycDescription:"نحتاج إلى بعض الوثائق لحماية حسابك والامتثال للمتطلبات القانونية والترخيص.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},hr:{loading:"Učitavanje, molimo pričekajte ...",noVerificationRequired:"Trenutačno nije potrebna provjera vašeg računa.",verificationComplete:"Provjera dovršena",verificationFailed:"Provjera nije uspjela",verificationExpired:"Provjera je istekla",fileSizeExceeded:"Premašena je maksimalna veličina datoteke. Maksimalna veličina datoteke je: 50mb",uploading:"Prijenos…",successUpload:"Vaš dokument je učitan i uskoro će biti pregledan",successUploadMultipleFiles:"Vaši su dokumenti učitani i uskoro će biti pregledani",failedUpload:"Prijenos nije uspio pokušajte ponovo",chooseDocument:"Odaberite Dokument",kycTitle:"Verifikacija računa",kycDescription:"Potrebni su nam neki dokumenti kako bismo zaštitili vaš račun i kako bismo se pridržavali zakonskih i licencijskih zahtjeva.",download:"Download",Age:"Dob",Aml:"AML",Documents:"Dokumenti",PEP:"Politički izložena osoba",Sanction:"Sankcija",Biometric:"Verifikacija",Recheck:"Ponovna provjera",ProofOfAddress:"Potvrda adrese",SourceOfWealth:"Izvor sredstava",SocialMedia:"Društvene mreže",ProofOfPayment:"Platna metoda"},"pt-br":{Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",Loading:"Carregando, espere por favor…",noVerificationRequired:"Não há necessidade de verificação para sua conta no momento",verificationComplete:"Verificação completa",verificationFailed:"Verificação de falha",verificationExpired:"A verificação expirou",fileSizeExceeded:"Tamanho máximo do arquivo excedido. O tamanho máximo do arquivo é: 50 MB",uploading:"Carregando...",successUpload:"Seu documento foi carregado e será analisado em breve",successUploadMultipleFiles:"Seus documentos foram enviados e serão revisados ​​em breve",failedUpload:"Falha no upload do arquivo, tente novamente",chooseDocument:"Escolha um arquivo",download:"Download",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},"es-mx":{Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",Loading:"Cargando, espere por favor…",noVerificationRequired:"No hay verificación requerida para su cuenta al momento",verificationComplete:"Verificación completa",verificationFailed:"Verificación fallo",verificationExpired:"Verificación expiro",fileSizeExceeded:"Tamaño máximo de archivo se excedió. El tamaño máximo del archivo es: 50mb",uploading:"Cargando ...",successUpload:"Su documento ha sido cargado y será revisado en breve",successUploadMultipleFiles:"Sus documento han sido cargados y serán revisado en breve",failedUpload:"La carga del archivo falló, por favor intente de nuevo",chooseDocument:"Elija un archivo",download:"Download",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"}};const a=e=>new Promise((i=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((i=>{for(let o in e[i])t[i][o]=e[i][o]})),i(!0)}))})),r=(e,i,o)=>{const a=i;let r=t[void 0!==a&&n.includes(a)?a:"en"][e];if(void 0!==o)for(const[e,i]of Object.entries(o.values)){const o=new RegExp(`{${e}}`,"g");r=r.replace(o,i)}return r},c=class{constructor(i){var o;e(this,i),this.userId="",this.session="",this.endpoint="",this.translationUrl="",this.clientStyling="",this.verifiedIcon="",this.failedIcon="",this.defaultIcon="",this.clientStylingUrl="",this.verificationType=[],this.isLoading=!1,this.stylingAppends=!1,this.selectedFile=null,this.uploadSizeExceeded=!1,this.expandedOnDesktop=!1,this.scriptInjected=!1,this.MAX_UPLOAD_SIZE=5e7,this.userAgent=window.navigator.userAgent,this.isMobile=!!((o=this.userAgent).toLowerCase().match(/android/i)||o.toLowerCase().match(/blackberry|bb/i)||o.toLowerCase().match(/iphone|ipad|ipod/i)||o.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{i.innerHTML=e,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((e=>{console.log("error ",e)}))},this.handleToggleScreen=()=>{this.toggleScreen(this.isMobile)}}handleNewTranslations(){this.isLoading=!0,a(this.translationUrl).then((()=>{this.isLoading=!1}))}async componentWillLoad(){this.translationUrl.length>2&&await a(this.translationUrl)}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}async componentDidLoad(){window.innerWidth>700&&(this.expandedOnDesktop=!0);try{let e=new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);const i={method:"POST",headers:{"X-SessionId":this.session,"Content-Type":"application/json"},body:JSON.stringify({})};fetch(e.href,i).then((e=>{if(200===e.status)return e.json();throw new Error("HTTP status "+e.status)})).then((e=>{this.verificationType=e.verifications})).catch((e=>{console.error(e)}))}catch(e){console.error("Error fetching verification types:",e)}}handleOptionChange(e,i){const o=e.target;this.selectedOption=o.value,this.verificationType=this.verificationType.map((e=>(e.type===i&&(e.optionChosen=o.value),e)))}handleDocumentsStatus(e,i,o){this.verificationType=this.verificationType.map((n=>{if(n.type===e){const e=n.documents.find((e=>e.code===o));e&&(e.statusUploaded=i)}return n}))}downloadPDF(e){const i=document.createElement("a");i.href=e,i.download="file.pdf",i.target="_blank",i.dispatchEvent(new MouseEvent("click"))}toggleVerificationType(e,i){this.expandedOnDesktop=!1,this.verificationType=this.verificationType.map((o=>{var n;return o.type===e&&(null===(n=o.flowInfo)||void 0===n?void 0:n.type)==i&&(o.expanded=!o.expanded),o}))}toggleScreen(e){window.postMessage({type:"PlayerAccountMenuActive",isMobile:e},window.location.href)}checkFileSize(e){let i=0;return Object.keys(e).forEach((o=>{i+=e[o].size})),i<=this.MAX_UPLOAD_SIZE}handleFileSelection(e,i,o){if(e&&e.length>0)if(this.selectedFile=e,this.checkFileSize(this.selectedFile)){const e={method:"POST",headers:{"Content-Type":"application/json","X-SessionId":this.session},body:JSON.stringify({DocumentCode:i})};fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`,e).then((e=>{if(e.ok)return this.uploadingStatus=r("uploading",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),e.json()})).then((e=>{const n=new FormData;n.append(i,this.selectedFile[0]),fetch(e.Url,{method:"POST",body:n}).then((e=>{e.ok?(this.uploadingStatus=r(this.selectedFile.length>1?"successUploadMultipleFiles":"successUpload",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i)):(this.uploadingStatus=r("failedUpload",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),console.error("File upload error:",e.status))})).catch((e=>{console.error("File upload error:",e)}))})).catch((e=>{console.error("File upload error:",e)}))}else console.error(r("fileSizeExceeded",this.language)),this.uploadingStatus=r("fileSizeExceeded",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),this.uploadSizeExceeded=!0}importScript(e){return new Promise(((i,o)=>{fetch(e).then((e=>e.text())).then((e=>{if(new Function(e)(),this.scriptInjected)i(!0);else{const e=document.createElement("script");e.src="https://test.insic.de/frontend3/static/js/avs-loader.min.js",document.head.appendChild(e),this.scriptInjected=!0,i(!0)}})).catch((e=>{o(e)}))}))}renderVerificationTypeBox(e){this.expandedOnDesktop&&(e.expanded=!0);let o=e.expanded,n=e.type.trim(),t=e.optionChosen,a=e.status,c=e.documents,s=e.flowInfo;const l="Verified"===a,d="Failed"===a||"Expired"===a;return i("div",{class:`verification-box ${o?"expanded":""} ${d?"failed":""} ${l?"success":""}`},i("div",{class:"box box-header "+(o?"expanded":""),onClick:()=>{var i;return this.toggleVerificationType(e.type,null===(i=e.flowInfo)||void 0===i?void 0:i.type)}},i("div",{class:"box-icon"},i("div",null,l?this.verifiedIcon?i("img",{class:"CustomVerifiedIcon",src:this.verifiedIcon,alt:""}):i("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),i("circle",{cx:"50",cy:"50",r:"34",fill:"none",stroke:"#fff","stroke-width":"12px"}),i("polyline",{points:"30,50 45,63 70,35",fill:"none",stroke:"#fff","stroke-width":"8px"})):d?this.failedIcon?i("img",{class:"CustomFailedIcon",src:this.failedIcon,alt:""}):i("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"red"}),i("line",{x1:"30",y1:"30",x2:"70",y2:"70",stroke:"#fff","stroke-width":"10px"}),i("line",{x1:"30",y1:"70",x2:"70",y2:"30",stroke:"#fff","stroke-width":"10px"})):this.defaultIcon?i("img",{class:"CustomDefaultIcon",src:this.defaultIcon,alt:""}):i("svg",{width:"800px",height:"800px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M4 4V20C4 21.1046 4.89543 22 6 22L18 22C19.1046 22 20 21.1046 20 20V8.34162C20 7.8034 19.7831 7.28789 19.3982 6.91161L14.9579 2.56999C14.5842 2.20459 14.0824 2 13.5597 2L6 2C4.89543 2 4 2.89543 4 4Z",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M9 13H15",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M9 17H12",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M14 2V6C14 7.10457 14.8954 8 16 8H20",stroke:"#000000","stroke-width":"2","stroke-linejoin":"round"})))),i("div",{class:"box-title"},r(n,this.language)),i("div",{class:"chevron-icon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("path",{d:o?"M6 15l6-6 6 6":"M6 9l6 6 6-6"})))),o?this.renderExpandedContent(e,t,a,c,s,l,d):i("div",{class:"box box-content"},i("div",{id:"__avs-wrapper"})))}renderDocumentsActions(e,o,n){return i("div",null,(null==e?void 0:e.statusUploaded)?i("div",{class:"upload-status"},null==e?void 0:e.statusUploaded):i("div",{class:"documents-action"},i("div",{class:"sample-file"},"FileDownload"===(null==e?void 0:e.sampleType)?i("button",{class:"download-button",onClick:()=>this.downloadPDF(null==e?void 0:e.sampleUrl)},i("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M12 0C5.372 0 0 5.372 0 12C0 18.628 5.372 24 12 24C18.628 24 24 18.628 24 12C24 5.372 18.628 0 12 0ZM12 22C6.485 22 2 17.515 2 12C2 6.485 6.485 2 12 2C17.515 2 22 6.485 22 12C22 17.515 17.515 22 12 22Z",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"}),i("path",{d:"M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"})),i("span",null,r("download",this.language))):null),i("div",{class:"upload-button"},o?i("label",null,i("input",{type:"file",accept:"*",onChange:e=>this.handleFileSelection(e.target.files,this.selectedOption,n.type),style:{display:"none"}}),i("svg",{width:"100",height:"100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"}),i("line",{x1:"30",y1:"50",x2:"70",y2:"50",stroke:"white","stroke-width":"6"}),i("line",{x1:"50",y1:"30",x2:"50",y2:"70",stroke:"white","stroke-width":"6"}))):null)))}renderExpandedContent(e,n,t,a,c,s,l){return"Widget"===(null==c?void 0:c.type)||"Redirect"===(null==c?void 0:c.type)&&"Manual"!==e.vendorName?i("div",null,i("hr",{style:{margin:"5px"}}),i("iframe",{src:c.url,frameborder:"0",height:"400px",width:"100%",allowfullScreen:!0,allow:"camera *;microphone *"})):i("div",{class:"box box-content"},i(o,null,s?i("div",{class:"verification-status"},r("verificationComplete",this.language)):l?i("div",{class:"verification-status"},r("Failed"===t?"verificationFailed":"verificationExpired",this.language)):a.length>0?i("div",{class:"documents-dropdown"},i("select",{class:"nice-select",onChange:i=>this.handleOptionChange(i,e.type)},i("option",{value:"",selected:!0,disabled:!0,hidden:!0},r("chooseDocument",this.language)),a.map((e=>i("option",{selected:n==e.code,value:e.code},e.type.replace(/([A-Z])/g," $1"))))),this.renderDocumentsActions(a.find((e=>e.code===n)),n,e)):null))}render(){return this.isLoading?i("div",null,i("p",null,r("loading",this.language))):0===this.verificationType.length?i("div",{class:"no-verification-description",style:{padding:"24px",fontSize:"18px"}},r("noVerificationRequired",this.language)):i("div",{class:"ModalContainer",ref:e=>this.stylingContainer=e},i("div",{class:"player-kyc-verification-widget"},this.isMobile?i("div",{class:"MenuReturnButton",onClick:this.handleToggleScreen},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 15 15"},i("defs",null),i("g",{transform:"translate(-20 -158)"},i("g",{transform:"translate(20 158)"},i("path",{class:"aaa",d:"M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z",transform:"translate(15 15) rotate(180)"})))),i("h2",null,r("kycTitle",this.language))):i("h2",null,r("kycTitle",this.language)),i("div",{class:"widget-description"},r("kycDescription",this.language)),i("div",{class:"verification-types"},this.verificationType.map((e=>e?this.renderVerificationTypeBox(e):null)))))}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};c.style=':host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 15px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url(\'data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23333" d="M10 18.4l-6.5-6.5h13z"/><path fill="%23333" d="M10 1.6l6.5 6.5H3.5z"/></svg>\');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n display: flex;\n align-items: center;\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 15px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}';export{c as player_kyc_verification}
package/dist/player-kyc-verification/player-kyc-verification.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as i}from"./p-1f2596d0.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),e(n)})().then((e=>i([["p-1c5c8f11",[[1,"player-kyc-verification",{userId:[1,"user-id"],session:[1],language:[1],endpoint:[1],translationUrl:[1,"translation-url"],clientStyling:[1,"client-styling"],verifiedIcon:[1,"verified-icon"],failedIcon:[1,"failed-icon"],defaultIcon:[1,"default-icon"],clientStylingUrl:[1,"client-styling-url"],verificationType:[32],isLoading:[32],stylingAppends:[32],selectedFile:[32],uploadingStatus:[32],uploadSizeExceeded:[32],selectedOption:[32],expandedOnDesktop:[32]}]]]],e)));
1
+ import{p as e,b as i}from"./p-1f2596d0.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),e(n)})().then((e=>i([["p-1315e0b5",[[1,"player-kyc-verification",{userId:[1,"user-id"],session:[1],language:[1],endpoint:[1],translationUrl:[1,"translation-url"],clientStyling:[1,"client-styling"],verifiedIcon:[1,"verified-icon"],failedIcon:[1,"failed-icon"],defaultIcon:[1,"default-icon"],clientStylingUrl:[1,"client-styling-url"],verificationType:[32],isLoading:[32],stylingAppends:[32],selectedFile:[32],uploadingStatus:[32],uploadSizeExceeded:[32],selectedOption:[32],expandedOnDesktop:[32]}]]]],e)));
package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts CHANGED
@@ -50,6 +50,8 @@ export declare class PlayerKycVerificationWidget {
50
50
  private stylingContainer;
51
51
  private scriptInjected;
52
52
  MAX_UPLOAD_SIZE: number;
53
+ private userAgent;
54
+ isMobile: boolean;
53
55
  handleNewTranslations(): void;
54
56
  componentWillLoad(): Promise<void>;
55
57
  componentDidRender(): void;
@@ -60,6 +62,8 @@ export declare class PlayerKycVerificationWidget {
60
62
  handleDocumentsStatus(verificationTypeId: string, documentsStatus: string, documentCode: string): void;
61
63
  downloadPDF(pdfUrl: string): void;
62
64
  toggleVerificationType(verificationTypeId: string, verificationTypeFlowInfoType: any): void;
65
+ toggleScreen(isMobile: any): void;
66
+ handleToggleScreen: () => void;
63
67
  private checkFileSize;
64
68
  handleFileSelection(file: FileList | null, documentType: string, verificationTypeId: string): void;
65
69
  importScript(url: any): Promise<unknown>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/player-kyc-verification",
3
- "version": "1.37.6",
3
+ "version": "1.37.7",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/player-kyc-verification/p-1c5c8f11.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as e,h as i,F as o}from"./p-1f2596d0.js";const n=["de","en","hr"];let t={en:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Account Verification",kycDescription:"We require some documents to protect your account and to comply with legal and license requirements.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Recheck:"Recheck",Biometric:"Biometric",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},de:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Account-Verifizierung",kycDescription:"Wir benötigen einige Dokumente, um Ihr Konto zu schützen und den rechtlichen und Lizenzanforderungen zu entsprechen.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},ro:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Verificarea contului",kycDescription:"Avem nevoie de câteva documente pentru a proteja contul dvs. și pentru a respecta cerințele legale și de licență.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},fr:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"Vérification de compte",kycDescription:"Nous avons besoin de certains documents pour protéger votre compte et pour nous conformer aux exigences légales et de licence.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},ar:{loading:"Loading, please wait ...",noVerificationRequired:"There is no verification required for your account at this moment.",verificationComplete:"Verification complete",verificationFailed:"Verification failed",verificationExpired:"Verification expired",fileSizeExceeded:"Maximum file size exceeded. Max file size is: 50mb",uploading:"Uploading ... ",successUpload:"Your document has been uploaded and it will be reviewed shortly",successUploadMultipleFiles:"Your documents have been uploaded and it will be reviewed shortly",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document",kycTitle:"التحقق من الحساب",kycDescription:"نحتاج إلى بعض الوثائق لحماية حسابك والامتثال للمتطلبات القانونية والترخيص.",download:"Download",Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},hr:{loading:"Učitavanje, molimo pričekajte ...",noVerificationRequired:"Trenutačno nije potrebna provjera vašeg računa.",verificationComplete:"Provjera dovršena",verificationFailed:"Provjera nije uspjela",verificationExpired:"Provjera je istekla",fileSizeExceeded:"Premašena je maksimalna veličina datoteke. Maksimalna veličina datoteke je: 50mb",uploading:"Prijenos…",successUpload:"Vaš dokument je učitan i uskoro će biti pregledan",successUploadMultipleFiles:"Vaši su dokumenti učitani i uskoro će biti pregledani",failedUpload:"Prijenos nije uspio pokušajte ponovo",chooseDocument:"Odaberite Dokument",kycTitle:"Verifikacija računa",kycDescription:"Potrebni su nam neki dokumenti kako bismo zaštitili vaš račun i kako bismo se pridržavali zakonskih i licencijskih zahtjeva.",download:"Download",Age:"Dob",Aml:"AML",Documents:"Dokumenti",PEP:"Politički izložena osoba",Sanction:"Sankcija",Biometric:"Verifikacija",Recheck:"Ponovna provjera",ProofOfAddress:"Potvrda adrese",SourceOfWealth:"Izvor sredstava",SocialMedia:"Društvene mreže",ProofOfPayment:"Platna metoda"},"pt-br":{Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",Loading:"Carregando, espere por favor…",noVerificationRequired:"Não há necessidade de verificação para sua conta no momento",verificationComplete:"Verificação completa",verificationFailed:"Verificação de falha",verificationExpired:"A verificação expirou",fileSizeExceeded:"Tamanho máximo do arquivo excedido. O tamanho máximo do arquivo é: 50 MB",uploading:"Carregando...",successUpload:"Seu documento foi carregado e será analisado em breve",successUploadMultipleFiles:"Seus documentos foram enviados e serão revisados ​​em breve",failedUpload:"Falha no upload do arquivo, tente novamente",chooseDocument:"Escolha um arquivo",download:"Download",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"},"es-mx":{Age:"Age",Aml:"AML",Documents:"Documents",PEP:"PEP",Sanction:"Sanctions",Biometric:"Biometric",Recheck:"Recheck",Loading:"Cargando, espere por favor…",noVerificationRequired:"No hay verificación requerida para su cuenta al momento",verificationComplete:"Verificación completa",verificationFailed:"Verificación fallo",verificationExpired:"Verificación expiro",fileSizeExceeded:"Tamaño máximo de archivo se excedió. El tamaño máximo del archivo es: 50mb",uploading:"Cargando ...",successUpload:"Su documento ha sido cargado y será revisado en breve",successUploadMultipleFiles:"Sus documento han sido cargados y serán revisado en breve",failedUpload:"La carga del archivo falló, por favor intente de nuevo",chooseDocument:"Elija un archivo",download:"Download",ProofOfAddress:"Proof of Address",SourceOfWealth:"Source of Wealth",SocialMedia:"Social Media",ProofOfPayment:"Proof of Payment"}};const a=e=>new Promise((i=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((i=>{for(let o in e[i])t[i][o]=e[i][o]})),i(!0)}))})),r=(e,i,o)=>{const a=i;let r=t[void 0!==a&&n.includes(a)?a:"en"][e];if(void 0!==o)for(const[e,i]of Object.entries(o.values)){const o=new RegExp(`{${e}}`,"g");r=r.replace(o,i)}return r},c=class{constructor(i){e(this,i),this.userId="",this.session="",this.endpoint="",this.translationUrl="",this.clientStyling="",this.verifiedIcon="",this.failedIcon="",this.defaultIcon="",this.clientStylingUrl="",this.verificationType=[],this.isLoading=!1,this.stylingAppends=!1,this.selectedFile=null,this.uploadSizeExceeded=!1,this.expandedOnDesktop=!1,this.scriptInjected=!1,this.MAX_UPLOAD_SIZE=5e7,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{i.innerHTML=e,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((e=>{console.log("error ",e)}))}}handleNewTranslations(){this.isLoading=!0,a(this.translationUrl).then((()=>{this.isLoading=!1}))}async componentWillLoad(){this.translationUrl.length>2&&await a(this.translationUrl)}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}async componentDidLoad(){window.innerWidth>700&&(this.expandedOnDesktop=!0);try{let e=new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);const i={method:"POST",headers:{"X-SessionId":this.session,"Content-Type":"application/json"},body:JSON.stringify({})};fetch(e.href,i).then((e=>{if(200===e.status)return e.json();throw new Error("HTTP status "+e.status)})).then((e=>{this.verificationType=e.verifications})).catch((e=>{console.error(e)}))}catch(e){console.error("Error fetching verification types:",e)}}handleOptionChange(e,i){const o=e.target;this.selectedOption=o.value,this.verificationType=this.verificationType.map((e=>(e.type===i&&(e.optionChosen=o.value),e)))}handleDocumentsStatus(e,i,o){this.verificationType=this.verificationType.map((n=>{if(n.type===e){const e=n.documents.find((e=>e.code===o));e&&(e.statusUploaded=i)}return n}))}downloadPDF(e){const i=document.createElement("a");i.href=e,i.download="file.pdf",i.target="_blank",i.dispatchEvent(new MouseEvent("click"))}toggleVerificationType(e,i){this.expandedOnDesktop=!1,this.verificationType=this.verificationType.map((o=>{var n;return o.type===e&&(null===(n=o.flowInfo)||void 0===n?void 0:n.type)==i&&(o.expanded=!o.expanded),o}))}checkFileSize(e){let i=0;return Object.keys(e).forEach((o=>{i+=e[o].size})),i<=this.MAX_UPLOAD_SIZE}handleFileSelection(e,i,o){if(e&&e.length>0)if(this.selectedFile=e,this.checkFileSize(this.selectedFile)){const e={method:"POST",headers:{"Content-Type":"application/json","X-SessionId":this.session},body:JSON.stringify({DocumentCode:i})};fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`,e).then((e=>{if(e.ok)return this.uploadingStatus=r("uploading",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),e.json()})).then((e=>{const n=new FormData;n.append(i,this.selectedFile[0]),fetch(e.Url,{method:"POST",body:n}).then((e=>{e.ok?(this.uploadingStatus=r(this.selectedFile.length>1?"successUploadMultipleFiles":"successUpload",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i)):(this.uploadingStatus=r("failedUpload",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),console.error("File upload error:",e.status))})).catch((e=>{console.error("File upload error:",e)}))})).catch((e=>{console.error("File upload error:",e)}))}else console.error(r("fileSizeExceeded",this.language)),this.uploadingStatus=r("fileSizeExceeded",this.language),this.handleDocumentsStatus(o,this.uploadingStatus,i),this.uploadSizeExceeded=!0}importScript(e){return new Promise(((i,o)=>{fetch(e).then((e=>e.text())).then((e=>{if(new Function(e)(),this.scriptInjected)i(!0);else{const e=document.createElement("script");e.src="https://test.insic.de/frontend3/static/js/avs-loader.min.js",document.head.appendChild(e),this.scriptInjected=!0,i(!0)}})).catch((e=>{o(e)}))}))}renderVerificationTypeBox(e){this.expandedOnDesktop&&(e.expanded=!0);let o=e.expanded,n=e.type.trim(),t=e.optionChosen,a=e.status,c=e.documents,s=e.flowInfo;const l="Verified"===a,d="Failed"===a||"Expired"===a;return i("div",{class:`verification-box ${o?"expanded":""} ${d?"failed":""} ${l?"success":""}`},i("div",{class:"box box-header "+(o?"expanded":""),onClick:()=>{var i;return this.toggleVerificationType(e.type,null===(i=e.flowInfo)||void 0===i?void 0:i.type)}},i("div",{class:"box-icon"},i("div",null,l?this.verifiedIcon?i("img",{class:"CustomVerifiedIcon",src:this.verifiedIcon,alt:""}):i("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),i("circle",{cx:"50",cy:"50",r:"34",fill:"none",stroke:"#fff","stroke-width":"12px"}),i("polyline",{points:"30,50 45,63 70,35",fill:"none",stroke:"#fff","stroke-width":"8px"})):d?this.failedIcon?i("img",{class:"CustomFailedIcon",src:this.failedIcon,alt:""}):i("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"red"}),i("line",{x1:"30",y1:"30",x2:"70",y2:"70",stroke:"#fff","stroke-width":"10px"}),i("line",{x1:"30",y1:"70",x2:"70",y2:"30",stroke:"#fff","stroke-width":"10px"})):this.defaultIcon?i("img",{class:"CustomDefaultIcon",src:this.defaultIcon,alt:""}):i("svg",{width:"800px",height:"800px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M4 4V20C4 21.1046 4.89543 22 6 22L18 22C19.1046 22 20 21.1046 20 20V8.34162C20 7.8034 19.7831 7.28789 19.3982 6.91161L14.9579 2.56999C14.5842 2.20459 14.0824 2 13.5597 2L6 2C4.89543 2 4 2.89543 4 4Z",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M9 13H15",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M9 17H12",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M14 2V6C14 7.10457 14.8954 8 16 8H20",stroke:"#000000","stroke-width":"2","stroke-linejoin":"round"})))),i("div",{class:"box-title"},r(n,this.language)),i("div",{class:"chevron-icon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("path",{d:o?"M6 15l6-6 6 6":"M6 9l6 6 6-6"})))),o?this.renderExpandedContent(e,t,a,c,s,l,d):i("div",{class:"box box-content"},i("div",{id:"__avs-wrapper"})))}renderDocumentsActions(e,o,n){return i("div",null,(null==e?void 0:e.statusUploaded)?i("div",{class:"upload-status"},null==e?void 0:e.statusUploaded):i("div",{class:"documents-action"},i("div",{class:"sample-file"},"FileDownload"===(null==e?void 0:e.sampleType)?i("button",{class:"download-button",onClick:()=>this.downloadPDF(null==e?void 0:e.sampleUrl)},i("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M12 0C5.372 0 0 5.372 0 12C0 18.628 5.372 24 12 24C18.628 24 24 18.628 24 12C24 5.372 18.628 0 12 0ZM12 22C6.485 22 2 17.515 2 12C2 6.485 6.485 2 12 2C17.515 2 22 6.485 22 12C22 17.515 17.515 22 12 22Z",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"}),i("path",{d:"M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"})),i("span",null,r("download",this.language))):null),i("div",{class:"upload-button"},o?i("label",null,i("input",{type:"file",accept:"*",onChange:e=>this.handleFileSelection(e.target.files,this.selectedOption,n.type),style:{display:"none"}}),i("svg",{width:"100",height:"100",xmlns:"http://www.w3.org/2000/svg"},i("circle",{cx:"50",cy:"50",r:"40",fill:"var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))"}),i("line",{x1:"30",y1:"50",x2:"70",y2:"50",stroke:"white","stroke-width":"6"}),i("line",{x1:"50",y1:"30",x2:"50",y2:"70",stroke:"white","stroke-width":"6"}))):null)))}renderExpandedContent(e,n,t,a,c,s,l){return"Widget"===(null==c?void 0:c.type)||"Redirect"===(null==c?void 0:c.type)&&"Manual"!==e.vendorName?i("div",null,i("hr",{style:{margin:"5px"}}),i("iframe",{src:c.url,frameborder:"0",height:"400px",width:"100%",allowfullScreen:!0,allow:"camera *;microphone *"})):i("div",{class:"box box-content"},i(o,null,s?i("div",{class:"verification-status"},r("verificationComplete",this.language)):l?i("div",{class:"verification-status"},r("Failed"===t?"verificationFailed":"verificationExpired",this.language)):a.length>0?i("div",{class:"documents-dropdown"},i("select",{class:"nice-select",onChange:i=>this.handleOptionChange(i,e.type)},i("option",{value:"",selected:!0,disabled:!0,hidden:!0},r("chooseDocument",this.language)),a.map((e=>i("option",{selected:n==e.code,value:e.code},e.type.replace(/([A-Z])/g," $1"))))),this.renderDocumentsActions(a.find((e=>e.code===n)),n,e)):null))}render(){return this.isLoading?i("div",null,i("p",null,r("loading",this.language))):0===this.verificationType.length?i("div",{style:{padding:"24px",fontSize:"18px"}},r("noVerificationRequired",this.language)):i("div",{class:"ModalContainer",ref:e=>this.stylingContainer=e},i("div",{class:"player-kyc-verification-widget"},i("h2",null,r("kycTitle",this.language)),i("div",{class:"widget-description"},r("kycDescription",this.language)),i("div",{class:"verification-types"},this.verificationType.map((e=>e?this.renderVerificationTypeBox(e):null)))))}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};c.style=':host {\n font-family: inherit;\n}\n\nbutton, select {\n font-family: inherit;\n}\n\n.ModalContainer {\n container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n padding: 20px;\n align-items: center;\n}\n.player-kyc-verification-widget h2 {\n margin: 4px;\n}\n.player-kyc-verification-widget .widget-description {\n margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n transition: height 0.3s, border-color 0.3s;\n border: solid 1px var(--emfe-w-color-gray-100, #E6E6E6);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n padding: 0px 14px;\n border-width: 2px 2px 8px 2px;\n align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n display: flex;\n padding: 14px 0px;\n justify-content: space-between;\n cursor: pointer;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n height: 24px;\n width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n flex-grow: 1;\n font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n flex-grow: 10;\n width: 14px;\n height: 14px;\n display: flex;\n justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n width: 20px;\n height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-color-gray-100, #E6E6E6);\n padding: 10px 0px;\n flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n text-align: center;\n padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n display: flex;\n flex-direction: column;\n width: 100%;\n align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n margin: 16px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n cursor: pointer;\n width: 100%;\n height: 30px;\n padding: 4px 14px;\n font-size: 14px;\n border: 1px solid var(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: #333;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n padding-right: 30px;\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-image: url(\'data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23333" d="M10 18.4l-6.5-6.5h13z"/><path fill="%23333" d="M10 1.6l6.5 6.5H3.5z"/></svg>\');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\n border: none;\n font-size: 16px;\n padding: 10px 0px 0px 0px;\n cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n margin: 12px 0px 16px;\n font-size: 18px;\n text-align: center;\n color: var(--emfe-w-color-gray-150, #828282);\n}\n\n@container (min-width: 700px) {\n .player-kyc-verification-widget {\n padding: 100px 60px;\n }\n}\n@container (max-width: 700px) {\n .player-kyc-verification-widget h2 {\n margin: 4px;\n text-align: center;\n }\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: 1fr;\n grid-gap: 16px;\n }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}';export{c as player_kyc_verification}