@everymatrix/player-kyc-verification 1.20.9 → 1.20.11

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 (16) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/player-kyc-verification.cjs.entry.js +25 -3
  3. package/dist/cjs/player-kyc-verification.cjs.js +1 -1
  4. package/dist/collection/components/player-kyc-verification/player-kyc-verification.css +3 -2
  5. package/dist/collection/components/player-kyc-verification/player-kyc-verification.js +78 -7
  6. package/dist/collection/utils/locale.utils.js +5 -0
  7. package/dist/components/player-kyc-verification.js +28 -3
  8. package/dist/esm/loader.js +1 -1
  9. package/dist/esm/player-kyc-verification.entry.js +25 -3
  10. package/dist/esm/player-kyc-verification.js +1 -1
  11. package/dist/player-kyc-verification/p-7ad5e6ec.entry.js +1 -0
  12. package/dist/player-kyc-verification/player-kyc-verification.esm.js +1 -1
  13. package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts +12 -0
  14. package/dist/types/components.d.ts +24 -0
  15. package/package.json +1 -1
  16. package/dist/player-kyc-verification/p-dbf281f4.entry.js +0 -1
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["player-kyc-verification.cjs",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"verificationType":[32],"isLoading":[32],"stylingAppends":[32],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
17
+ return index.bootstrapLazy([["player-kyc-verification.cjs",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"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],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
18
18
  });
19
19
  };
20
20
 
package/dist/cjs/player-kyc-verification.cjs.entry.js CHANGED
@@ -16,6 +16,7 @@ let TRANSLATIONS = {
16
16
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
17
17
  uploading: 'Uploading ... ',
18
18
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
19
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
19
20
  failedUpload: 'Upload failed please try again',
20
21
  chooseDocument: 'Choose Document',
21
22
  },
@@ -28,6 +29,7 @@ let TRANSLATIONS = {
28
29
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
29
30
  uploading: 'Uploading ... ',
30
31
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
32
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
31
33
  failedUpload: 'Upload failed please try again',
32
34
  chooseDocument: 'Choose Document',
33
35
  },
@@ -40,6 +42,7 @@ let TRANSLATIONS = {
40
42
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
41
43
  uploading: 'Uploading ... ',
42
44
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
45
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
43
46
  failedUpload: 'Upload failed please try again',
44
47
  chooseDocument: 'Choose Document',
45
48
  },
@@ -52,6 +55,7 @@ let TRANSLATIONS = {
52
55
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
53
56
  uploading: 'Uploading ... ',
54
57
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
58
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
55
59
  failedUpload: 'Upload failed please try again',
56
60
  chooseDocument: 'Choose Document',
57
61
  },
@@ -64,6 +68,7 @@ let TRANSLATIONS = {
64
68
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
65
69
  uploading: 'Uploading ... ',
66
70
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
71
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
67
72
  failedUpload: 'Upload failed please try again',
68
73
  chooseDocument: 'Choose Document',
69
74
  }
@@ -95,7 +100,7 @@ const translate = (key, customLang, values) => {
95
100
  return translation;
96
101
  };
97
102
 
98
- const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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: 1249px) {\n .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
103
+ const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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}";
99
104
 
100
105
  const PlayerKycVerificationWidget = class {
101
106
  constructor(hostRef) {
@@ -128,6 +133,18 @@ const PlayerKycVerificationWidget = class {
128
133
  * Client custom styling via string
129
134
  */
130
135
  this.clientStyling = '';
136
+ /**
137
+ * For verified status this icon will be displayed
138
+ */
139
+ this.verifiedIcon = '';
140
+ /**
141
+ * For failed status this icon will be displayed
142
+ */
143
+ this.failedIcon = '';
144
+ /**
145
+ * For the default status this icon will be displayed
146
+ */
147
+ this.defaultIcon = '';
131
148
  /**
132
149
  * Client custom styling via url content
133
150
  */
@@ -288,7 +305,12 @@ const PlayerKycVerificationWidget = class {
288
305
  fetch(data.Url, { method: "POST", body: formData })
289
306
  .then(res => {
290
307
  if (res.ok) {
291
- this.uploadingStatus = translate('successUpload', this.language);
308
+ if (this.selectedFiles.length > 1) {
309
+ this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
310
+ }
311
+ else {
312
+ this.uploadingStatus = translate('successUpload', this.language);
313
+ }
292
314
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
293
315
  }
294
316
  else {
@@ -357,7 +379,7 @@ const PlayerKycVerificationWidget = class {
357
379
  }
358
380
  const isVerified = status === 'Verified';
359
381
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
360
- return (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))) : (isFailedOrExpired ? (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("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" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))), index.h("div", { class: "box-title" }, name), index.h("div", { class: "chevron-icon" }, index.h("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" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (index.h("div", { class: "box box-content" }, index.h(index.Fragment, null, isVerified ? (index.h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (index.h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : (index.h("div", { class: "documents-dropdown" }, index.h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, index.h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (index.h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (index.h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (index.h("div", { class: "upload-button" }, optionChosen ? (index.h("label", null, index.h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), index.h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), index.h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null))))))) :
382
+ return (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("div", null, this.verifiedIcon ? (index.h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (index.h("div", null, this.failedIcon ? (index.h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (index.h("div", null, this.defaultIcon ? (index.h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("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" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), index.h("div", { class: "box-title" }, name), index.h("div", { class: "chevron-icon" }, index.h("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" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (index.h("div", { class: "box box-content" }, index.h(index.Fragment, null, isVerified ? (index.h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (index.h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (index.h("div", { class: "documents-dropdown" }, index.h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, index.h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (index.h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (index.h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (index.h("div", { class: "upload-button" }, optionChosen ? (index.h("label", null, index.h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), index.h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), index.h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))) : null))) :
361
383
  index.h("div", { class: "box box-content" }, index.h("div", { id: "__avs-wrapper" }))));
362
384
  }
363
385
  render() {
package/dist/cjs/player-kyc-verification.cjs.js CHANGED
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["player-kyc-verification.cjs",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"verificationType":[32],"isLoading":[32],"stylingAppends":[32],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
18
+ return index.bootstrapLazy([["player-kyc-verification.cjs",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"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],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
19
19
  });
package/dist/collection/components/player-kyc-verification/player-kyc-verification.css CHANGED
@@ -108,6 +108,7 @@
108
108
  }
109
109
  .player-kyc-verification-widget .verification-types .verification-box.expanded {
110
110
  border-color: green;
111
+ min-height: 120px;
111
112
  }
112
113
  .player-kyc-verification-widget .verification-types .verification-box.failed {
113
114
  border-color: #d42323;
@@ -142,8 +143,8 @@
142
143
  grid-gap: 16px;
143
144
  }
144
145
  }
145
- @container (max-width: 1249px) {
146
- .verification-types {
146
+ @container (max-width: 1240px) and (min-width: 701px) {
147
+ .player-kyc-verification-widget .verification-types {
147
148
  grid-template-columns: repeat(2, 1fr);
148
149
  }
149
150
  }
package/dist/collection/components/player-kyc-verification/player-kyc-verification.js CHANGED
@@ -30,6 +30,18 @@ export class PlayerKycVerificationWidget {
30
30
  * Client custom styling via string
31
31
  */
32
32
  this.clientStyling = '';
33
+ /**
34
+ * For verified status this icon will be displayed
35
+ */
36
+ this.verifiedIcon = '';
37
+ /**
38
+ * For failed status this icon will be displayed
39
+ */
40
+ this.failedIcon = '';
41
+ /**
42
+ * For the default status this icon will be displayed
43
+ */
44
+ this.defaultIcon = '';
33
45
  /**
34
46
  * Client custom styling via url content
35
47
  */
@@ -190,7 +202,12 @@ export class PlayerKycVerificationWidget {
190
202
  fetch(data.Url, { method: "POST", body: formData })
191
203
  .then(res => {
192
204
  if (res.ok) {
193
- this.uploadingStatus = translate('successUpload', this.language);
205
+ if (this.selectedFiles.length > 1) {
206
+ this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
207
+ }
208
+ else {
209
+ this.uploadingStatus = translate('successUpload', this.language);
210
+ }
194
211
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
195
212
  }
196
213
  else {
@@ -261,23 +278,23 @@ export class PlayerKycVerificationWidget {
261
278
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
262
279
  return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` },
263
280
  h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } },
264
- h("div", { class: "box-icon" }, isVerified ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
281
+ h("div", { class: "box-icon" }, isVerified ? (h("div", null, this.verifiedIcon ? (h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
265
282
  h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }),
266
283
  h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }),
267
- h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))) : (isFailedOrExpired ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
284
+ h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (h("div", null, this.failedIcon ? (h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
268
285
  h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }),
269
286
  h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }),
270
- h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
287
+ h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (h("div", null, this.defaultIcon ? (h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
271
288
  h("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" }),
272
289
  h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
273
290
  h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
274
- h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))),
291
+ h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))),
275
292
  h("div", { class: "box-title" }, name),
276
293
  h("div", { class: "chevron-icon" },
277
294
  h("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" },
278
295
  h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))),
279
296
  expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (h("div", { class: "box box-content" },
280
- h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : (h("div", { class: "documents-dropdown" },
297
+ h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" },
281
298
  h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) },
282
299
  h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)),
283
300
  documents.map((document) => (h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))),
@@ -286,7 +303,7 @@ export class PlayerKycVerificationWidget {
286
303
  h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" },
287
304
  h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }),
288
305
  h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }),
289
- h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null))))))) :
306
+ h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))) : null))) :
290
307
  h("div", { class: "box box-content" },
291
308
  h("div", { id: "__avs-wrapper" }))));
292
309
  }
@@ -460,6 +477,60 @@ export class PlayerKycVerificationWidget {
460
477
  "reflect": false,
461
478
  "defaultValue": "''"
462
479
  },
480
+ "verifiedIcon": {
481
+ "type": "string",
482
+ "mutable": false,
483
+ "complexType": {
484
+ "original": "string",
485
+ "resolved": "string",
486
+ "references": {}
487
+ },
488
+ "required": false,
489
+ "optional": false,
490
+ "docs": {
491
+ "tags": [],
492
+ "text": "For verified status this icon will be displayed"
493
+ },
494
+ "attribute": "verified-icon",
495
+ "reflect": false,
496
+ "defaultValue": "''"
497
+ },
498
+ "failedIcon": {
499
+ "type": "string",
500
+ "mutable": false,
501
+ "complexType": {
502
+ "original": "string",
503
+ "resolved": "string",
504
+ "references": {}
505
+ },
506
+ "required": false,
507
+ "optional": false,
508
+ "docs": {
509
+ "tags": [],
510
+ "text": "For failed status this icon will be displayed"
511
+ },
512
+ "attribute": "failed-icon",
513
+ "reflect": false,
514
+ "defaultValue": "''"
515
+ },
516
+ "defaultIcon": {
517
+ "type": "string",
518
+ "mutable": false,
519
+ "complexType": {
520
+ "original": "string",
521
+ "resolved": "string",
522
+ "references": {}
523
+ },
524
+ "required": false,
525
+ "optional": false,
526
+ "docs": {
527
+ "tags": [],
528
+ "text": "For the default status this icon will be displayed"
529
+ },
530
+ "attribute": "default-icon",
531
+ "reflect": false,
532
+ "defaultValue": "''"
533
+ },
463
534
  "clientStylingUrl": {
464
535
  "type": "string",
465
536
  "mutable": false,
package/dist/collection/utils/locale.utils.js CHANGED
@@ -10,6 +10,7 @@ let TRANSLATIONS = {
10
10
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
11
11
  uploading: 'Uploading ... ',
12
12
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
13
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
13
14
  failedUpload: 'Upload failed please try again',
14
15
  chooseDocument: 'Choose Document',
15
16
  },
@@ -22,6 +23,7 @@ let TRANSLATIONS = {
22
23
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
23
24
  uploading: 'Uploading ... ',
24
25
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
26
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
25
27
  failedUpload: 'Upload failed please try again',
26
28
  chooseDocument: 'Choose Document',
27
29
  },
@@ -34,6 +36,7 @@ let TRANSLATIONS = {
34
36
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
35
37
  uploading: 'Uploading ... ',
36
38
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
39
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
37
40
  failedUpload: 'Upload failed please try again',
38
41
  chooseDocument: 'Choose Document',
39
42
  },
@@ -46,6 +49,7 @@ let TRANSLATIONS = {
46
49
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
47
50
  uploading: 'Uploading ... ',
48
51
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
52
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
49
53
  failedUpload: 'Upload failed please try again',
50
54
  chooseDocument: 'Choose Document',
51
55
  },
@@ -58,6 +62,7 @@ let TRANSLATIONS = {
58
62
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
59
63
  uploading: 'Uploading ... ',
60
64
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
65
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
61
66
  failedUpload: 'Upload failed please try again',
62
67
  chooseDocument: 'Choose Document',
63
68
  }
package/dist/components/player-kyc-verification.js CHANGED
@@ -12,6 +12,7 @@ let TRANSLATIONS = {
12
12
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
13
13
  uploading: 'Uploading ... ',
14
14
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
15
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
15
16
  failedUpload: 'Upload failed please try again',
16
17
  chooseDocument: 'Choose Document',
17
18
  },
@@ -24,6 +25,7 @@ let TRANSLATIONS = {
24
25
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
25
26
  uploading: 'Uploading ... ',
26
27
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
28
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
27
29
  failedUpload: 'Upload failed please try again',
28
30
  chooseDocument: 'Choose Document',
29
31
  },
@@ -36,6 +38,7 @@ let TRANSLATIONS = {
36
38
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
37
39
  uploading: 'Uploading ... ',
38
40
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
41
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
39
42
  failedUpload: 'Upload failed please try again',
40
43
  chooseDocument: 'Choose Document',
41
44
  },
@@ -48,6 +51,7 @@ let TRANSLATIONS = {
48
51
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
49
52
  uploading: 'Uploading ... ',
50
53
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
54
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
51
55
  failedUpload: 'Upload failed please try again',
52
56
  chooseDocument: 'Choose Document',
53
57
  },
@@ -60,6 +64,7 @@ let TRANSLATIONS = {
60
64
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
61
65
  uploading: 'Uploading ... ',
62
66
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
67
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
63
68
  failedUpload: 'Upload failed please try again',
64
69
  chooseDocument: 'Choose Document',
65
70
  }
@@ -91,7 +96,7 @@ const translate = (key, customLang, values) => {
91
96
  return translation;
92
97
  };
93
98
 
94
- const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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: 1249px) {\n .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
99
+ const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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}";
95
100
 
96
101
  const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
97
102
  constructor() {
@@ -126,6 +131,18 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
126
131
  * Client custom styling via string
127
132
  */
128
133
  this.clientStyling = '';
134
+ /**
135
+ * For verified status this icon will be displayed
136
+ */
137
+ this.verifiedIcon = '';
138
+ /**
139
+ * For failed status this icon will be displayed
140
+ */
141
+ this.failedIcon = '';
142
+ /**
143
+ * For the default status this icon will be displayed
144
+ */
145
+ this.defaultIcon = '';
129
146
  /**
130
147
  * Client custom styling via url content
131
148
  */
@@ -286,7 +303,12 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
286
303
  fetch(data.Url, { method: "POST", body: formData })
287
304
  .then(res => {
288
305
  if (res.ok) {
289
- this.uploadingStatus = translate('successUpload', this.language);
306
+ if (this.selectedFiles.length > 1) {
307
+ this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
308
+ }
309
+ else {
310
+ this.uploadingStatus = translate('successUpload', this.language);
311
+ }
290
312
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
291
313
  }
292
314
  else {
@@ -355,7 +377,7 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
355
377
  }
356
378
  const isVerified = status === 'Verified';
357
379
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
358
- return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, h("div", { class: "box-icon" }, isVerified ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))) : (isFailedOrExpired ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" }), h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))), h("div", { class: "box-title" }, name), h("div", { class: "chevron-icon" }, h("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" }, h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null))))))) :
380
+ return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, h("div", { class: "box-icon" }, isVerified ? (h("div", null, this.verifiedIcon ? (h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (h("div", null, this.failedIcon ? (h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (h("div", null, this.defaultIcon ? (h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" }), h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), h("div", { class: "box-title" }, name), h("div", { class: "chevron-icon" }, h("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" }, h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))) : null))) :
359
381
  h("div", { class: "box box-content" }, h("div", { id: "__avs-wrapper" }))));
360
382
  }
361
383
  render() {
@@ -384,6 +406,9 @@ const PlayerKycVerificationWidget = /*@__PURE__*/ proxyCustomElement(class exten
384
406
  "endpoint": [1],
385
407
  "translationUrl": [1, "translation-url"],
386
408
  "clientStyling": [1, "client-styling"],
409
+ "verifiedIcon": [1, "verified-icon"],
410
+ "failedIcon": [1, "failed-icon"],
411
+ "defaultIcon": [1, "default-icon"],
387
412
  "clientStylingUrl": [1, "client-styling-url"],
388
413
  "verificationType": [32],
389
414
  "isLoading": [32],
package/dist/esm/loader.js CHANGED
@@ -10,7 +10,7 @@ const patchEsm = () => {
10
10
  const defineCustomElements = (win, options) => {
11
11
  if (typeof window === 'undefined') return Promise.resolve();
12
12
  return patchEsm().then(() => {
13
- return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"verificationType":[32],"isLoading":[32],"stylingAppends":[32],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
13
+ return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"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],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
14
14
  });
15
15
  };
16
16
 
package/dist/esm/player-kyc-verification.entry.js CHANGED
@@ -12,6 +12,7 @@ let TRANSLATIONS = {
12
12
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
13
13
  uploading: 'Uploading ... ',
14
14
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
15
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
15
16
  failedUpload: 'Upload failed please try again',
16
17
  chooseDocument: 'Choose Document',
17
18
  },
@@ -24,6 +25,7 @@ let TRANSLATIONS = {
24
25
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
25
26
  uploading: 'Uploading ... ',
26
27
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
28
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
27
29
  failedUpload: 'Upload failed please try again',
28
30
  chooseDocument: 'Choose Document',
29
31
  },
@@ -36,6 +38,7 @@ let TRANSLATIONS = {
36
38
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
37
39
  uploading: 'Uploading ... ',
38
40
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
41
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
39
42
  failedUpload: 'Upload failed please try again',
40
43
  chooseDocument: 'Choose Document',
41
44
  },
@@ -48,6 +51,7 @@ let TRANSLATIONS = {
48
51
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
49
52
  uploading: 'Uploading ... ',
50
53
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
54
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
51
55
  failedUpload: 'Upload failed please try again',
52
56
  chooseDocument: 'Choose Document',
53
57
  },
@@ -60,6 +64,7 @@ let TRANSLATIONS = {
60
64
  fileSizeExceeded: 'Maximum file size exceeded. Max file size is: 50mb',
61
65
  uploading: 'Uploading ... ',
62
66
  successUpload: 'Your document has been uploaded and it will be reviewed shortly',
67
+ successUploadMultipleFiles: 'Your documents have been uploaded and it will be reviewed shortly',
63
68
  failedUpload: 'Upload failed please try again',
64
69
  chooseDocument: 'Choose Document',
65
70
  }
@@ -91,7 +96,7 @@ const translate = (key, customLang, values) => {
91
96
  return translation;
92
97
  };
93
98
 
94
- const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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: 1249px) {\n .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
99
+ const playerKycVerificationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n font-family: \"Roboto\", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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}";
95
100
 
96
101
  const PlayerKycVerificationWidget = class {
97
102
  constructor(hostRef) {
@@ -124,6 +129,18 @@ const PlayerKycVerificationWidget = class {
124
129
  * Client custom styling via string
125
130
  */
126
131
  this.clientStyling = '';
132
+ /**
133
+ * For verified status this icon will be displayed
134
+ */
135
+ this.verifiedIcon = '';
136
+ /**
137
+ * For failed status this icon will be displayed
138
+ */
139
+ this.failedIcon = '';
140
+ /**
141
+ * For the default status this icon will be displayed
142
+ */
143
+ this.defaultIcon = '';
127
144
  /**
128
145
  * Client custom styling via url content
129
146
  */
@@ -284,7 +301,12 @@ const PlayerKycVerificationWidget = class {
284
301
  fetch(data.Url, { method: "POST", body: formData })
285
302
  .then(res => {
286
303
  if (res.ok) {
287
- this.uploadingStatus = translate('successUpload', this.language);
304
+ if (this.selectedFiles.length > 1) {
305
+ this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
306
+ }
307
+ else {
308
+ this.uploadingStatus = translate('successUpload', this.language);
309
+ }
288
310
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
289
311
  }
290
312
  else {
@@ -353,7 +375,7 @@ const PlayerKycVerificationWidget = class {
353
375
  }
354
376
  const isVerified = status === 'Verified';
355
377
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
356
- return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, h("div", { class: "box-icon" }, isVerified ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))) : (isFailedOrExpired ? (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" }), h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))), h("div", { class: "box-title" }, name), h("div", { class: "chevron-icon" }, h("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" }, h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null))))))) :
378
+ return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, h("div", { class: "box-icon" }, isVerified ? (h("div", null, this.verifiedIcon ? (h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (h("div", null, this.failedIcon ? (h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (h("div", null, this.defaultIcon ? (h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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" }), h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), h("div", { class: "box-title" }, name), h("div", { class: "chevron-icon" }, h("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" }, h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded && (flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) != 'Widget' ? (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((document) => (h("option", { selected: optionChosen == document.code ? true : false, value: document.code }, document.type.replace(/([A-Z])/g, ' $1'))))), ((_a = documents.find((e) => e.code == optionChosen)) === null || _a === void 0 ? void 0 : _a.statusUploaded) ? (h("div", { class: "upload-status" }, (_b = documents.find((e) => e.code == optionChosen)) === null || _b === void 0 ? void 0 : _b.statusUploaded)) : (h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", multiple: true, onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))) : null))) :
357
379
  h("div", { class: "box box-content" }, h("div", { id: "__avs-wrapper" }))));
358
380
  }
359
381
  render() {
package/dist/esm/player-kyc-verification.js CHANGED
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"verificationType":[32],"isLoading":[32],"stylingAppends":[32],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
16
+ return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"kycTitle":[1,"kyc-title"],"description":[1],"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],"selectedFiles":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"selectedOption":[32],"expandedOnDesktop":[32]}]]]], options);
17
17
  });
package/dist/player-kyc-verification/p-7ad5e6ec.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as i,h as e,F as t}from"./p-1f2596d0.js";const n=["de","en"];let o={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"},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"},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"},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"},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"}};const r=i=>new Promise((e=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((e=>{for(let t in i[e])o[e][t]=i[e][t]})),e(!0)}))})),a=(i,e,t)=>{const r=e;let a=o[void 0!==r&&n.includes(r)?r:"en"][i];if(void 0!==t)for(const[i,e]of Object.entries(t.values)){const t=new RegExp(`{${i}}`,"g");a=a.replace(t,e)}return a},s=class{constructor(e){i(this,e),this.kycTitle="",this.description="",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.selectedFiles=null,this.uploadSizeExceeded=!1,this.expandedOnDesktop=!1,this.scriptInjected=!1,this.MAX_UPLOAD_SIZE=5e7,this.setClientStyling=()=>{let i=document.createElement("style");i.innerHTML=this.clientStyling,this.stylingContainer.prepend(i)},this.setClientStylingURL=()=>{let i=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(i.href).then((i=>i.text())).then((i=>{e.innerHTML=i,setTimeout((()=>{this.stylingContainer.prepend(e)}),1)})).catch((i=>{console.log("error ",i)}))}}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}async componentWillLoad(){this.translationUrl.length>2&&await r(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 i=new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);const e={method:"POST",headers:{"X-SessionId":this.session,"Content-Type":"application/json"},body:JSON.stringify({})};fetch(i.href,e).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{this.verificationType=i.verifications})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}handleOptionChange(i,e){const t=i.target;this.selectedOption=t.value,this.verificationType=this.verificationType.map((i=>(i.type===e&&(i.optionChosen=t.value),i)))}handleDocumentsStatus(i,e,t){this.verificationType=this.verificationType.map((n=>{if(n.type===i){const i=n.documents.find((i=>i.code===t));i&&(i.statusUploaded=e)}return n}))}toggleVerificationType(i,e){this.expandedOnDesktop=!1,this.verificationType=this.verificationType.map((t=>{var n;return t.type===i&&(null===(n=t.flowInfo)||void 0===n?void 0:n.type)==e&&(t.expanded=!t.expanded),t}))}checkFileSize(i){let e=0;return Object.keys(i).forEach((t=>{e+=i[t].size})),e<=this.MAX_UPLOAD_SIZE}handleFileSelection(i,e,t){if(this.selectedFiles=i,this.selectedFiles)if(this.checkFileSize(this.selectedFiles)){const i={method:"POST",headers:{"Content-Type":"application/json","X-SessionId":this.session},body:JSON.stringify({DocumentCode:e})};fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`,i).then((i=>{if(i.ok)return this.uploadingStatus=a("uploading",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),i.json()})).then((i=>{const n=new FormData,o=this.selectedFiles;for(let i=0;i<o.length;i++)n.append("files",o[i]);fetch(i.Url,{method:"POST",body:n}).then((i=>{i.ok?(this.uploadingStatus=a(this.selectedFiles.length>1?"successUploadMultipleFiles":"successUpload",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e)):(this.uploadingStatus=a("failedUpload",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),console.error("File upload error:",i.status))})).catch((i=>{console.error("File upload error:",i)}))})).catch((i=>{console.error("File upload error:",i)}))}else console.error(a("fileSizeExceeded",this.language)),this.uploadingStatus=a("fileSizeExceeded",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),this.uploadSizeExceeded=!0}importScript(i){return new Promise(((e,t)=>{fetch(i).then((i=>i.text())).then((i=>{if(new Function(i)(),this.scriptInjected)e(!0);else{const i=document.createElement("script");i.src="https://test.insic.de/frontend3/static/js/avs-loader.min.js",document.head.appendChild(i),this.scriptInjected=!0,e(!0)}})).catch((i=>{t(i)}))}))}renderVerificationTypeBox(i){var n,o;this.expandedOnDesktop&&(i.expanded=!0);let r=i.expanded,s=i.type.replace(/([A-Z])/g," $1"),l=i.optionChosen,c=i.status,d=i.documents,p=i.flowInfo;"Widget"===(null==p?void 0:p.type)&&this.importScript(p.url).then((()=>{console.log("Script imported correctly")})).catch((i=>{console.error("Error importing script:",i)}));const h="Verified"===c,f="Failed"===c||"Expired"===c;return e("div",{class:`verification-box ${r?"expanded":""} ${f?"failed":""} ${h?"success":""}`},e("div",{class:"box box-header "+(r?"expanded":""),onClick:()=>{var e;return this.toggleVerificationType(i.type,null===(e=i.flowInfo)||void 0===e?void 0:e.type)}},e("div",{class:"box-icon"},e("div",null,h?this.verifiedIcon?e("img",{class:"CustomVerifiedIcon",src:this.verifiedIcon,alt:""}):e("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),e("circle",{cx:"50",cy:"50",r:"34",fill:"none",stroke:"#fff","stroke-width":"12px"}),e("polyline",{points:"30,50 45,63 70,35",fill:"none",stroke:"#fff","stroke-width":"8px"})):f?this.failedIcon?e("img",{class:"CustomFailedIcon",src:this.failedIcon,alt:""}):e("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"red"}),e("line",{x1:"30",y1:"30",x2:"70",y2:"70",stroke:"#fff","stroke-width":"10px"}),e("line",{x1:"30",y1:"70",x2:"70",y2:"30",stroke:"#fff","stroke-width":"10px"})):this.defaultIcon?e("img",{class:"CustomDefaultIcon",src:this.defaultIcon,alt:""}):e("svg",{width:"800px",height:"800px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("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"}),e("path",{d:"M9 13H15",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M9 17H12",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M14 2V6C14 7.10457 14.8954 8 16 8H20",stroke:"#000000","stroke-width":"2","stroke-linejoin":"round"})))),e("div",{class:"box-title"},s),e("div",{class:"chevron-icon"},e("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"},e("path",{d:r?"M6 15l6-6 6 6":"M6 9l6 6 6-6"})))),e("div",{class:"box box-content"},r&&"Widget"!=(null==p?void 0:p.type)?e(t,null,h?e("div",{class:"verification-status"},a("verificationComplete",this.language)):f?e("div",{class:"verification-status"},a("Failed"===c?"verificationFailed":"verificationExpired",this.language)):d.length>0?e("div",{class:"documents-dropdown"},e("select",{class:"nice-select",onChange:e=>this.handleOptionChange(e,i.type)},e("option",{value:"",selected:!0,disabled:!0,hidden:!0},a("chooseDocument",this.language)),d.map((i=>e("option",{selected:l==i.code,value:i.code},i.type.replace(/([A-Z])/g," $1"))))),(null===(n=d.find((i=>i.code==l)))||void 0===n?void 0:n.statusUploaded)?e("div",{class:"upload-status"},null===(o=d.find((i=>i.code==l)))||void 0===o?void 0:o.statusUploaded):e("div",{class:"upload-button"},l?e("label",null,e("input",{type:"file",accept:"*",multiple:!0,onChange:e=>this.handleFileSelection(e.target.files,this.selectedOption,i.type),style:{display:"none"}}),e("svg",{width:"100",height:"100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),e("line",{x1:"30",y1:"50",x2:"70",y2:"50",stroke:"white","stroke-width":"6"}),e("line",{x1:"50",y1:"30",x2:"50",y2:"70",stroke:"white","stroke-width":"6"}))):null)):null):e("div",{id:"__avs-wrapper"})))}render(){return this.isLoading?e("div",null,e("p",null,a("loading",this.language))):0===this.verificationType.length?e("div",{style:{padding:"24px",fontSize:"18px"}},a("noVerificationRequired",this.language)):e("div",{class:"ModalContainer",ref:i=>this.stylingContainer=i},e("div",{class:"player-kyc-verification-widget"},e("h2",null,this.kycTitle),e("div",{class:"widget-description"},this.description),e("div",{class:"verification-types"},this.verificationType.map((i=>"Manual"===i.vendorName||"Insic"===i.vendorName?this.renderVerificationTypeBox(i):null)))))}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};s.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");\n:host {\n font-family: "Roboto", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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{s 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,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-dbf281f4",[[1,"player-kyc-verification",{kycTitle:[1,"kyc-title"],description:[1],userId:[1,"user-id"],session:[1],language:[1],endpoint:[1],translationUrl:[1,"translation-url"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],verificationType:[32],isLoading:[32],stylingAppends:[32],selectedFiles:[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-7ad5e6ec",[[1,"player-kyc-verification",{kycTitle:[1,"kyc-title"],description:[1],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],selectedFiles:[32],uploadingStatus:[32],uploadSizeExceeded:[32],selectedOption:[32],expandedOnDesktop:[32]}]]]],e)));
package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts CHANGED
@@ -31,6 +31,18 @@ export declare class PlayerKycVerificationWidget {
31
31
  * Client custom styling via string
32
32
  */
33
33
  clientStyling: string;
34
+ /**
35
+ * For verified status this icon will be displayed
36
+ */
37
+ verifiedIcon: string;
38
+ /**
39
+ * For failed status this icon will be displayed
40
+ */
41
+ failedIcon: string;
42
+ /**
43
+ * For the default status this icon will be displayed
44
+ */
45
+ defaultIcon: string;
34
46
  /**
35
47
  * Client custom styling via url content
36
48
  */
package/dist/types/components.d.ts CHANGED
@@ -15,6 +15,10 @@ export namespace Components {
15
15
  * Client custom styling via url content
16
16
  */
17
17
  "clientStylingUrl": string;
18
+ /**
19
+ * For the default status this icon will be displayed
20
+ */
21
+ "defaultIcon": string;
18
22
  /**
19
23
  * The description
20
24
  */
@@ -23,6 +27,10 @@ export namespace Components {
23
27
  * The NorWAy endpoint
24
28
  */
25
29
  "endpoint": string;
30
+ /**
31
+ * For failed status this icon will be displayed
32
+ */
33
+ "failedIcon": string;
26
34
  /**
27
35
  * The kyc title
28
36
  */
@@ -43,6 +51,10 @@ export namespace Components {
43
51
  * The userId
44
52
  */
45
53
  "userId": string;
54
+ /**
55
+ * For verified status this icon will be displayed
56
+ */
57
+ "verifiedIcon": string;
46
58
  }
47
59
  }
48
60
  declare global {
@@ -66,6 +78,10 @@ declare namespace LocalJSX {
66
78
  * Client custom styling via url content
67
79
  */
68
80
  "clientStylingUrl"?: string;
81
+ /**
82
+ * For the default status this icon will be displayed
83
+ */
84
+ "defaultIcon"?: string;
69
85
  /**
70
86
  * The description
71
87
  */
@@ -74,6 +90,10 @@ declare namespace LocalJSX {
74
90
  * The NorWAy endpoint
75
91
  */
76
92
  "endpoint"?: string;
93
+ /**
94
+ * For failed status this icon will be displayed
95
+ */
96
+ "failedIcon"?: string;
77
97
  /**
78
98
  * The kyc title
79
99
  */
@@ -94,6 +114,10 @@ declare namespace LocalJSX {
94
114
  * The userId
95
115
  */
96
116
  "userId"?: string;
117
+ /**
118
+ * For verified status this icon will be displayed
119
+ */
120
+ "verifiedIcon"?: string;
97
121
  }
98
122
  interface IntrinsicElements {
99
123
  "player-kyc-verification": PlayerKycVerification;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/player-kyc-verification",
3
- "version": "1.20.9",
3
+ "version": "1.20.11",
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-dbf281f4.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as i,h as e,F as t}from"./p-1f2596d0.js";const n=["de","en"];let o={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",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document"},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",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document"},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",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document"},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",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document"},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",failedUpload:"Upload failed please try again",chooseDocument:"Choose Document"}};const r=i=>new Promise((e=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((e=>{for(let t in i[e])o[e][t]=i[e][t]})),e(!0)}))})),a=(i,e,t)=>{const r=e;let a=o[void 0!==r&&n.includes(r)?r:"en"][i];if(void 0!==t)for(const[i,e]of Object.entries(t.values)){const t=new RegExp(`{${i}}`,"g");a=a.replace(t,e)}return a},s=class{constructor(e){i(this,e),this.kycTitle="",this.description="",this.userId="",this.session="",this.endpoint="",this.translationUrl="",this.clientStyling="",this.clientStylingUrl="",this.verificationType=[],this.isLoading=!1,this.stylingAppends=!1,this.selectedFiles=null,this.uploadSizeExceeded=!1,this.expandedOnDesktop=!1,this.scriptInjected=!1,this.MAX_UPLOAD_SIZE=5e7,this.setClientStyling=()=>{let i=document.createElement("style");i.innerHTML=this.clientStyling,this.stylingContainer.prepend(i)},this.setClientStylingURL=()=>{let i=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(i.href).then((i=>i.text())).then((i=>{e.innerHTML=i,setTimeout((()=>{this.stylingContainer.prepend(e)}),1)})).catch((i=>{console.log("error ",i)}))}}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}async componentWillLoad(){this.translationUrl.length>2&&await r(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 i=new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);const e={method:"POST",headers:{"X-SessionId":this.session,"Content-Type":"application/json"},body:JSON.stringify({})};fetch(i.href,e).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{this.verificationType=i.verifications})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}handleOptionChange(i,e){const t=i.target;this.selectedOption=t.value,this.verificationType=this.verificationType.map((i=>(i.type===e&&(i.optionChosen=t.value),i)))}handleDocumentsStatus(i,e,t){this.verificationType=this.verificationType.map((n=>{if(n.type===i){const i=n.documents.find((i=>i.code===t));i&&(i.statusUploaded=e)}return n}))}toggleVerificationType(i,e){this.expandedOnDesktop=!1,this.verificationType=this.verificationType.map((t=>{var n;return t.type===i&&(null===(n=t.flowInfo)||void 0===n?void 0:n.type)==e&&(t.expanded=!t.expanded),t}))}checkFileSize(i){let e=0;return Object.keys(i).forEach((t=>{e+=i[t].size})),e<=this.MAX_UPLOAD_SIZE}handleFileSelection(i,e,t){if(this.selectedFiles=i,this.selectedFiles)if(this.checkFileSize(this.selectedFiles)){const i={method:"POST",headers:{"Content-Type":"application/json","X-SessionId":this.session},body:JSON.stringify({DocumentCode:e})};fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`,i).then((i=>{if(i.ok)return this.uploadingStatus=a("uploading",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),i.json()})).then((i=>{const n=new FormData,o=this.selectedFiles;for(let i=0;i<o.length;i++)n.append("files",o[i]);fetch(i.Url,{method:"POST",body:n}).then((i=>{i.ok?(this.uploadingStatus=a("successUpload",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e)):(this.uploadingStatus=a("failedUpload",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),console.error("File upload error:",i.status))})).catch((i=>{console.error("File upload error:",i)}))})).catch((i=>{console.error("File upload error:",i)}))}else console.error(a("fileSizeExceeded",this.language)),this.uploadingStatus=a("fileSizeExceeded",this.language),this.handleDocumentsStatus(t,this.uploadingStatus,e),this.uploadSizeExceeded=!0}importScript(i){return new Promise(((e,t)=>{fetch(i).then((i=>i.text())).then((i=>{if(new Function(i)(),this.scriptInjected)e(!0);else{const i=document.createElement("script");i.src="https://test.insic.de/frontend3/static/js/avs-loader.min.js",document.head.appendChild(i),this.scriptInjected=!0,e(!0)}})).catch((i=>{t(i)}))}))}renderVerificationTypeBox(i){var n,o;this.expandedOnDesktop&&(i.expanded=!0);let r=i.expanded,s=i.type.replace(/([A-Z])/g," $1"),c=i.optionChosen,d=i.status,l=i.documents,p=i.flowInfo;"Widget"===(null==p?void 0:p.type)&&this.importScript(p.url).then((()=>{console.log("Script imported correctly")})).catch((i=>{console.error("Error importing script:",i)}));const f="Verified"===d,h="Failed"===d||"Expired"===d;return e("div",{class:`verification-box ${r?"expanded":""} ${h?"failed":""} ${f?"success":""}`},e("div",{class:"box box-header "+(r?"expanded":""),onClick:()=>{var e;return this.toggleVerificationType(i.type,null===(e=i.flowInfo)||void 0===e?void 0:e.type)}},e("div",{class:"box-icon"},f?e("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),e("circle",{cx:"50",cy:"50",r:"34",fill:"none",stroke:"#fff","stroke-width":"12px"}),e("polyline",{points:"30,50 45,63 70,35",fill:"none",stroke:"#fff","stroke-width":"8px"})):h?e("svg",{width:"100",height:"100",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"red"}),e("line",{x1:"30",y1:"30",x2:"70",y2:"70",stroke:"#fff","stroke-width":"10px"}),e("line",{x1:"30",y1:"70",x2:"70",y2:"30",stroke:"#fff","stroke-width":"10px"})):e("svg",{width:"800px",height:"800px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("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"}),e("path",{d:"M9 13H15",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M9 17H12",stroke:"#000000","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"M14 2V6C14 7.10457 14.8954 8 16 8H20",stroke:"#000000","stroke-width":"2","stroke-linejoin":"round"}))),e("div",{class:"box-title"},s),e("div",{class:"chevron-icon"},e("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"},e("path",{d:r?"M6 15l6-6 6 6":"M6 9l6 6 6-6"})))),e("div",{class:"box box-content"},r&&"Widget"!=(null==p?void 0:p.type)?e(t,null,f?e("div",{class:"verification-status"},a("verificationComplete",this.language)):h?e("div",{class:"verification-status"},a("Failed"===d?"verificationFailed":"verificationExpired",this.language)):e("div",{class:"documents-dropdown"},e("select",{class:"nice-select",onChange:e=>this.handleOptionChange(e,i.type)},e("option",{value:"",selected:!0,disabled:!0,hidden:!0},a("chooseDocument",this.language)),l.map((i=>e("option",{selected:c==i.code,value:i.code},i.type.replace(/([A-Z])/g," $1"))))),(null===(n=l.find((i=>i.code==c)))||void 0===n?void 0:n.statusUploaded)?e("div",{class:"upload-status"},null===(o=l.find((i=>i.code==c)))||void 0===o?void 0:o.statusUploaded):e("div",{class:"upload-button"},c?e("label",null,e("input",{type:"file",accept:"*",multiple:!0,onChange:e=>this.handleFileSelection(e.target.files,this.selectedOption,i.type),style:{display:"none"}}),e("svg",{width:"100",height:"100",xmlns:"http://www.w3.org/2000/svg"},e("circle",{cx:"50",cy:"50",r:"40",fill:"#388D79"}),e("line",{x1:"30",y1:"50",x2:"70",y2:"50",stroke:"white","stroke-width":"6"}),e("line",{x1:"50",y1:"30",x2:"50",y2:"70",stroke:"white","stroke-width":"6"}))):null))):e("div",{id:"__avs-wrapper"})))}render(){return this.isLoading?e("div",null,e("p",null,a("loading",this.language))):0===this.verificationType.length?e("div",{style:{padding:"24px",fontSize:"18px"}},a("noVerificationRequired",this.language)):e("div",{class:"ModalContainer",ref:i=>this.stylingContainer=i},e("div",{class:"player-kyc-verification-widget"},e("h2",null,this.kycTitle),e("div",{class:"widget-description"},this.description),e("div",{class:"verification-types"},this.verificationType.map((i=>"Manual"===i.vendorName||"Insic"===i.vendorName?this.renderVerificationTypeBox(i):null)))))}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};s.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");\n:host {\n font-family: "Roboto", sans-serif;\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 1.4px #b5b5b5;\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 #bcbcbc;\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 #ccc;\n border-radius: 2px;\n background-color: #fff;\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.expanded {\n border-color: green;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: #d42323;\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: green;\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: #9b9b9b;\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: 1249px) {\n .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}';export{s as player_kyc_verification}