@everymatrix/player-kyc-verification 1.16.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-95fc1c57.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/player-kyc-verification.cjs.entry.js

@@ -0,0 +1,382 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-95fc1c57.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['de', 'en'];
+let TRANSLATIONS = {
+  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 getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};
+
+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}";
+
+const PlayerKycVerificationWidget = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The kyc title
+     */
+    this.kycTitle = '';
+    /**
+     * The description
+     */
+    this.description = '';
+    /**
+     * The userId
+     */
+    this.userId = '';
+    /**
+    * The session
+    */
+    this.session = '';
+    /**
+    * The NorWAy endpoint
+    */
+    this.endpoint = '';
+    /**
+     * The translationurl
+     */
+    this.translationUrl = '';
+    /**
+    * Client custom styling via string
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
+    this.verificationType = [];
+    this.isLoading = false;
+    this.stylingAppends = false;
+    this.selectedFiles = null;
+    this.uploadSizeExceeded = false;
+    this.expandedOnDesktop = false;
+    this.scriptInjected = false;
+    this.MAX_UPLOAD_SIZE = 50000000;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  handleNewTranslations() {
+    this.isLoading = true;
+    getTranslations(this.translationUrl).then(() => {
+      this.isLoading = false;
+    });
+  }
+  async componentWillLoad() {
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.stylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.stylingAppends = true;
+    }
+    // end custom styling area
+  }
+  async componentDidLoad() {
+    if (window.innerWidth > 700) {
+      this.expandedOnDesktop = true;
+    }
+    try {
+      let url = new URL(`${this.endpoint}v2/player/${this.userId}/verification/GetKYCCustomerStatus`);
+      const options = {
+        method: 'POST',
+        headers: {
+          'X-SessionId': this.session,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({})
+      };
+      fetch(url.href, options)
+        .then((res) => {
+        if (res.status === 200) {
+          return res.json();
+        }
+        else {
+          throw new Error("HTTP status " + res.status);
+        }
+      })
+        .then((data) => {
+        this.verificationType = data.verifications;
+      })
+        .catch((err) => {
+        // Handle any errors
+        console.error(err);
+      });
+    }
+    catch (error) {
+      console.error('Error fetching verification types:', error);
+    }
+  }
+  handleOptionChange(event, verificationTypeId) {
+    const target = event.target;
+    this.selectedOption = target.value;
+    this.verificationType = this.verificationType.map((type) => {
+      if (type.type === verificationTypeId) {
+        type.optionChosen = target.value;
+      }
+      return type;
+    });
+  }
+  handleDocumentsStatus(verificationTypeId, documentsStatus, documentCode) {
+    this.verificationType = this.verificationType.map((vType) => {
+      if (vType.type === verificationTypeId) {
+        const document = vType.documents.find((doc) => doc.code === documentCode);
+        if (document) {
+          document.statusUploaded = documentsStatus;
+        }
+      }
+      return vType;
+    });
+  }
+  toggleVerificationType(verificationTypeId, verificationTypeFlowInfoType) {
+    this.expandedOnDesktop = false;
+    this.verificationType = this.verificationType.map((type) => {
+      var _a;
+      if (type.type === verificationTypeId && ((_a = type.flowInfo) === null || _a === void 0 ? void 0 : _a.type) == verificationTypeFlowInfoType) {
+        type.expanded = !type.expanded;
+      }
+      return type;
+    });
+  }
+  checkFileSize(file) {
+    let size = 0;
+    Object.keys(file).forEach(element => {
+      size += file[element].size;
+    });
+    return size <= this.MAX_UPLOAD_SIZE;
+  }
+  handleFileSelection(files, documentType, verificationTypeId) {
+    this.selectedFiles = files;
+    if (this.selectedFiles) {
+      if (!this.checkFileSize(this.selectedFiles)) {
+        console.error(translate('fileSizeExceeded', this.language));
+        this.uploadingStatus = translate('fileSizeExceeded', this.language);
+        this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+        this.uploadSizeExceeded = true;
+      }
+      else {
+        const uploadOptions = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-SessionId': this.session,
+          },
+          body: JSON.stringify({ DocumentCode: documentType }),
+        };
+        fetch(`${this.endpoint}v1/player/${this.userId}/verification/GetPlayerKycVerificationDocumentUploadUrl`, uploadOptions)
+          .then(response => {
+          if (response.ok) {
+            this.uploadingStatus = translate('uploading', this.language);
+            this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+            return response.json();
+          }
+        }).then((data) => {
+          const formData = new FormData();
+          const files = this.selectedFiles;
+          for (let i = 0; i < files.length; i++) {
+            formData.append("files", files[i]);
+          }
+          fetch(data.Url, { method: "POST", body: formData })
+            .then(res => {
+            if (res.ok) {
+              this.uploadingStatus = translate('successUpload', this.language);
+              this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+            }
+            else {
+              this.uploadingStatus = translate('failedUpload', this.language);
+              this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+              console.error('File upload error:', res.status);
+            }
+          })
+            .catch(error => {
+            console.error('File upload error:', error);
+          });
+        })
+          .catch(error => {
+          console.error('File upload error:', error);
+        });
+      }
+    }
+  }
+  importScript(url) {
+    return new Promise((resolve, reject) => {
+      fetch(url)
+        .then((res) => res.text())
+        .then((res) => {
+        const scriptFunction = new Function(res);
+        scriptFunction();
+        if (this.scriptInjected) {
+          resolve(true);
+        }
+        else {
+          const scriptElement = document.createElement('script');
+          scriptElement.src = 'https://test.insic.de/frontend3/static/js/avs-loader.min.js';
+          document.head.appendChild(scriptElement);
+          this.scriptInjected = true;
+          resolve(true);
+        }
+      })
+        .catch(error => {
+        reject(error);
+      });
+    });
+  }
+  renderVerificationTypeBox(verificationType) {
+    var _a, _b;
+    if (this.expandedOnDesktop) {
+      verificationType.expanded = true;
+    }
+    let expanded = verificationType.expanded;
+    let name = verificationType.type.replace(/([A-Z])/g, ' $1');
+    let optionChosen = verificationType.optionChosen;
+    let status = verificationType.status;
+    let documents = verificationType.documents;
+    let flowInfo = verificationType.flowInfo;
+    //not working yet
+    if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Widget') {
+      this.importScript(flowInfo.url)
+        .then(() => {
+        // Script imported successfully
+        console.log('Script imported correctly');
+        // Open/show the widget
+        // You'll need to check the widget documentation for how to open/show it
+      })
+        .catch(error => {
+        // Handle script import error
+        console.error('Error importing script:', error);
+      });
+    }
+    const isVerified = status === 'Verified';
+    const isFailedOrExpired = status === 'Failed' || status === 'Expired';
+    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))))))) :
+      index.h("div", { class: "box box-content" }, index.h("div", { id: "__avs-wrapper" }))));
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
+    }
+    else {
+      if (this.verificationType.length === 0) {
+        return index.h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
+      }
+      else {
+        return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, index.h("h2", null, this.kycTitle), index.h("div", { class: "widget-description" }, this.description), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType.vendorName === "Manual" || verificationType.vendorName === "Insic" ? this.renderVerificationTypeBox(verificationType) : null)))));
+      }
+    }
+  }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"]
+  }; }
+};
+PlayerKycVerificationWidget.style = playerKycVerificationCss;
+
+exports.player_kyc_verification = PlayerKycVerificationWidget;

package/dist/cjs/player-kyc-verification.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-95fc1c57.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-kyc-verification.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  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);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/player-kyc-verification/player-kyc-verification.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/player-kyc-verification/player-kyc-verification.css

@@ -0,0 +1,149 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  font-family: "Roboto", sans-serif;
+}
+
+.ModalContainer {
+  container-type: inline-size;
+}
+
+.player-kyc-verification-widget {
+  padding: 20px;
+  align-items: center;
+}
+.player-kyc-verification-widget h2 {
+  margin: 4px;
+}
+.player-kyc-verification-widget .widget-description {
+  margin: 24px 0px;
+}
+.player-kyc-verification-widget .verification-types {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 34px;
+}
+.player-kyc-verification-widget .verification-types .verification-box {
+  transition: height 0.3s, border-color 0.3s;
+  border: solid 1.4px #b5b5b5;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  padding: 0px 14px;
+  border-width: 2px 2px 8px 2px;
+  align-self: start;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box {
+  flex-shrink: 0;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header {
+  display: flex;
+  padding: 14px 0px;
+  justify-content: space-between;
+  cursor: pointer;
+  align-items: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {
+  height: 24px;
+  width: 24px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {
+  flex-grow: 1;
+  font-size: 18px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {
+  flex-grow: 10;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  justify-content: flex-end;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {
+  width: 20px;
+  height: 22px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content {
+  display: none;
+  flex-grow: 1;
+  border-top: 0.4px solid #bcbcbc;
+  padding: 10px 0px;
+  flex-grow: 1;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {
+  text-align: center;
+  padding: 20px;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {
+  margin: 16px;
+  cursor: pointer;
+}
+.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {
+  cursor: pointer;
+  width: 100%;
+  height: 30px;
+  padding: 4px 14px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: #fff;
+  color: #333;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 30px;
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  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>');
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded {
+  border-color: green;
+}
+.player-kyc-verification-widget .verification-types .verification-box.failed {
+  border-color: #d42323;
+}
+.player-kyc-verification-widget .verification-types .verification-box.success {
+  border-color: green;
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {
+  margin: 12px 0px 16px;
+  font-size: 18px;
+  text-align: center;
+  color: #9b9b9b;
+}
+
+@container (min-width: 700px) {
+  .player-kyc-verification-widget {
+    padding: 100px 60px;
+  }
+}
+@container (max-width: 700px) {
+  .player-kyc-verification-widget h2 {
+    margin: 4px;
+    text-align: center;
+  }
+  .player-kyc-verification-widget .verification-types {
+    grid-template-columns: 1fr;
+    grid-gap: 16px;
+  }
+}
+@container (max-width: 1249px) {
+  .verification-types {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}