@everymatrix/player-sms-verification 1.30.0 → 1.31.0

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

@@ -7,6 +7,8 @@ const index = require('./index-64b46357.js');
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
   en: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -18,6 +20,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   ro: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -29,6 +33,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   fr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -40,6 +46,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hu: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -51,6 +59,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   tr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -62,6 +72,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   el: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -73,6 +85,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   es: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -84,6 +98,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   pt: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -95,6 +111,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -125,7 +143,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:30px}.PlayerSmsVerificationButtonContainer{width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
+const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationTitleContainer{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:60px}.PlayerSmsVerificationTitle{font-size:20px;font-weight:300;text-transform:uppercase;padding:0;margin:0}.PlayerSmsVerificationSubitle{font-size:14px}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:75px}.PlayerSmsVerificationButtonContainer{position:relative;width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
 
 const PlayerSmsVerification = class {
   constructor(hostRef) {
@@ -288,9 +306,9 @@ const PlayerSmsVerification = class {
     this.code = event.target.value;
   }
   render() {
-    return index.h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, index.h("div", { class: "PlayerSmsVerificationContainer" }, index.h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " " + "Hidden") }, translate(this.msgEnterCode, this.lang)), index.h("div", { class: "PlayerSmsVerificationInput" }, index.h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
+    return index.h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, index.h("div", { class: "PlayerSmsVerificationTitleContainer" }, index.h("h4", { class: "PlayerSmsVerificationTitle" }, translate('title', this.lang)), index.h("p", { class: "PlayerSmsVerificationSubtitle" }, translate('subtitle', this.lang))), index.h("div", { class: "PlayerSmsVerificationContainer" }, index.h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " Hidden") }, translate(this.msgEnterCode, this.lang)), index.h("div", { class: "PlayerSmsVerificationInput" }, index.h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
       ? index.h("p", { class: "PlayerSmsVerificationErrMsg" }, translate(this.errMsg, this.lang))
-      : index.h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " " + "Hidden") }, translate('msgResendNotice', this.lang))), index.h("div", { class: "PlayerSmsVerificationButtonContainer" }, index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
+      : index.h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " Hidden") }, translate('msgResendNotice', this.lang))), index.h("div", { class: "PlayerSmsVerificationButtonContainer" }, index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
   }
   static get watchers() { return {
     "clientStyling": ["updateClientStyling"],

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

@@ -10,15 +10,36 @@
   background: var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
 }
 
+.PlayerSmsVerificationTitleContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 60px;
+}
+
+.PlayerSmsVerificationTitle {
+  font-size: 20px;
+  font-weight: 300;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+}
+
+.PlayerSmsVerificationSubitle {
+  font-size: 14px;
+}
+
 .PlayerSmsVerificationContainer {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin-bottom: 30px;
+  margin-bottom: 75px;
 }
 
 .PlayerSmsVerificationButtonContainer {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;

package/dist/collection/components/player-sms-verification/player-sms-verification.js

@@ -161,13 +161,16 @@ export class PlayerSmsVerification {
   }
   render() {
     return h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el },
+      h("div", { class: "PlayerSmsVerificationTitleContainer" },
+        h("h4", { class: "PlayerSmsVerificationTitle" }, translate('title', this.lang)),
+        h("p", { class: "PlayerSmsVerificationSubtitle" }, translate('subtitle', this.lang))),
       h("div", { class: "PlayerSmsVerificationContainer" },
-        h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " " + "Hidden") }, translate(this.msgEnterCode, this.lang)),
+        h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " Hidden") }, translate(this.msgEnterCode, this.lang)),
         h("div", { class: "PlayerSmsVerificationInput" },
           h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })),
         this.errMsg
           ? h("p", { class: "PlayerSmsVerificationErrMsg" }, translate(this.errMsg, this.lang))
-          : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " " + "Hidden") }, translate('msgResendNotice', this.lang))),
+          : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " Hidden") }, translate('msgResendNotice', this.lang))),
       h("div", { class: "PlayerSmsVerificationButtonContainer" },
         h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)),
         h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));

package/dist/collection/utils/utils.js

@@ -1,6 +1,8 @@
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
   en: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -12,6 +14,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   ro: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -23,6 +27,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   fr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -34,6 +40,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hu: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -45,6 +53,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   tr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -56,6 +66,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   el: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -67,6 +79,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   es: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -78,6 +92,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   pt: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -89,6 +105,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',

package/dist/components/player-sms-verification.js

@@ -3,6 +3,8 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
   en: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -14,6 +16,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   ro: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -25,6 +29,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   fr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -36,6 +42,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hu: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -47,6 +55,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   tr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -58,6 +68,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   el: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -69,6 +81,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   es: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -80,6 +94,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   pt: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -91,6 +107,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -121,7 +139,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:30px}.PlayerSmsVerificationButtonContainer{width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
+const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationTitleContainer{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:60px}.PlayerSmsVerificationTitle{font-size:20px;font-weight:300;text-transform:uppercase;padding:0;margin:0}.PlayerSmsVerificationSubitle{font-size:14px}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:75px}.PlayerSmsVerificationButtonContainer{position:relative;width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
 
 const PlayerSmsVerification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -286,9 +304,9 @@ const PlayerSmsVerification$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.code = event.target.value;
   }
   render() {
-    return h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, h("div", { class: "PlayerSmsVerificationContainer" }, h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " " + "Hidden") }, translate(this.msgEnterCode, this.lang)), h("div", { class: "PlayerSmsVerificationInput" }, h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
+    return h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, h("div", { class: "PlayerSmsVerificationTitleContainer" }, h("h4", { class: "PlayerSmsVerificationTitle" }, translate('title', this.lang)), h("p", { class: "PlayerSmsVerificationSubtitle" }, translate('subtitle', this.lang))), h("div", { class: "PlayerSmsVerificationContainer" }, h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " Hidden") }, translate(this.msgEnterCode, this.lang)), h("div", { class: "PlayerSmsVerificationInput" }, h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
       ? h("p", { class: "PlayerSmsVerificationErrMsg" }, translate(this.errMsg, this.lang))
-      : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " " + "Hidden") }, translate('msgResendNotice', this.lang))), h("div", { class: "PlayerSmsVerificationButtonContainer" }, h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
+      : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " Hidden") }, translate('msgResendNotice', this.lang))), h("div", { class: "PlayerSmsVerificationButtonContainer" }, h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
   }
   static get watchers() { return {
     "clientStyling": ["updateClientStyling"],

package/dist/esm/player-sms-verification.entry.js

@@ -3,6 +3,8 @@ import { r as registerInstance, h } from './index-87b20f11.js';
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
   en: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -14,6 +16,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   ro: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -25,6 +29,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   fr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -36,6 +42,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hu: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -47,6 +55,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   tr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -58,6 +68,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   el: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -69,6 +81,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   es: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -80,6 +94,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   pt: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -91,6 +107,8 @@ const TRANSLATIONS = {
     errExpiredToken: 'The code expired, resend code'
   },
   hr: {
+    title: 'SMS Verification required',
+    subtitle: 'You need to verify your phone number',
     btnSend: 'Send Code',
     btnResend: 'Resend Code',
     btnActivate: 'Activate',
@@ -121,7 +139,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:30px}.PlayerSmsVerificationButtonContainer{width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
+const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationTitleContainer{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:60px}.PlayerSmsVerificationTitle{font-size:20px;font-weight:300;text-transform:uppercase;padding:0;margin:0}.PlayerSmsVerificationSubitle{font-size:14px}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:75px}.PlayerSmsVerificationButtonContainer{position:relative;width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
 
 const PlayerSmsVerification = class {
   constructor(hostRef) {
@@ -284,9 +302,9 @@ const PlayerSmsVerification = class {
     this.code = event.target.value;
   }
   render() {
-    return h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, h("div", { class: "PlayerSmsVerificationContainer" }, h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " " + "Hidden") }, translate(this.msgEnterCode, this.lang)), h("div", { class: "PlayerSmsVerificationInput" }, h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
+    return h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, h("div", { class: "PlayerSmsVerificationTitleContainer" }, h("h4", { class: "PlayerSmsVerificationTitle" }, translate('title', this.lang)), h("p", { class: "PlayerSmsVerificationSubtitle" }, translate('subtitle', this.lang))), h("div", { class: "PlayerSmsVerificationContainer" }, h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " Hidden") }, translate(this.msgEnterCode, this.lang)), h("div", { class: "PlayerSmsVerificationInput" }, h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
       ? h("p", { class: "PlayerSmsVerificationErrMsg" }, translate(this.errMsg, this.lang))
-      : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " " + "Hidden") }, translate('msgResendNotice', this.lang))), h("div", { class: "PlayerSmsVerificationButtonContainer" }, h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
+      : h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " Hidden") }, translate('msgResendNotice', this.lang))), h("div", { class: "PlayerSmsVerificationButtonContainer" }, h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
   }
   static get watchers() { return {
     "clientStyling": ["updateClientStyling"],

package/dist/player-sms-verification/p-7554f89f.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t}from"./p-616d438d.js";const r={en:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},ro:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},fr:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},hu:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},tr:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},el:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},es:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},pt:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},hr:{title:"SMS Verification required",subtitle:"You need to verify your phone number",btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"}},i=(e,t)=>r[void 0!==t?t:"en"][e],n=class{constructor(t){e(this,t),this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.code="",this.errMsg="",this.msgEnterCode="",this.btnResendCount=60,this.isCodeSentOnce=!1,this.isBtnSendAvailable=!0,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.stylingContainer.prepend(t)}),1)})).catch((e=>{console.log("error ",e)}))}}updateClientStyling(){this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL()}componentWillLoad(){if(this.translationUrl)return e=this.translationUrl,new Promise((t=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((t=>{for(let i in e[t])r[t][i]=e[t][i]})),t(!0)}))}));var e;this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL()}startTimerBtnResendCode(){this.isBtnSendAvailable=!1,this.tempBtnResendCount=this.btnResendCount,this.btnResendTimer=setInterval((()=>{this.tempBtnResendCount--,this.tempBtnResendCount<0&&(clearInterval(this.btnResendTimer),this.isBtnSendAvailable=!0)}),1e3)}setErrMsg(e){"INVALID_CODE"===e?this.errMsg="errInvalidCode":"BLOCK_USER_INCORRECT_CODE"===e?this.errMsg="errExceededAttempts":"ExpiredToken"===e?this.errMsg="errExpiredToken":"errGenerateCode"===e&&(this.errMsg="errGenerateCode")}debounce(e,t){return function(...r){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{e.apply(this,r)}),t)}}handleSendCode(){this.errMsg="";let e=new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);const t={method:"POST",headers:{accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({userId:`${this.userId}`})};fetch(e.href,t).then((()=>{this.msgEnterCode="msgEnterCode",this.isCodeSentOnce&&this.startTimerBtnResendCode(),this.isCodeSentOnce=!0})).catch((e=>{this.setErrMsg("errGenerateCode"),window.postMessage({type:"WidgetNotification",data:{type:"error",message:e}},window.location.href)}))}handleCheckCode(){let e=new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);e.searchParams.append("userId",this.userId),e.searchParams.append("code",this.code),fetch(e.href,{method:"GET",headers:{accept:"application/json"}}).then((e=>e.json())).then((e=>{200===e.httpStatusCode?(this.errMsg="",window.postMessage({type:"SmsVerificationSuccess"},window.location.href)):e.thirdPartyResponse&&(this.setErrMsg(e.thirdPartyResponse.message),"errExceededAttempts"===this.errMsg&&window.postMessage({type:"SmsVerificationErrExceededAttempts",data:i(this.errMsg)},window.location.href))})).catch((e=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:e}},window.location.href)})).finally((()=>{this.code=""}))}handleInput(e){this.code=e.target.value}render(){return t("div",{class:"PlayerSmsVerification",ref:e=>this.stylingContainer=e},t("div",{class:"PlayerSmsVerificationTitleContainer"},t("h4",{class:"PlayerSmsVerificationTitle"},i("title",this.lang)),t("p",{class:"PlayerSmsVerificationSubtitle"},i("subtitle",this.lang))),t("div",{class:"PlayerSmsVerificationContainer"},t("p",{class:"PlayerSmsVerificationMsg"+(this.msgEnterCode?"":" Hidden")},i(this.msgEnterCode,this.lang)),t("div",{class:"PlayerSmsVerificationInput"},t("input",{type:"text",onInput:e=>this.handleInput(e),value:this.code})),this.errMsg?t("p",{class:"PlayerSmsVerificationErrMsg"},i(this.errMsg,this.lang)):t("p",{class:"PlayerSmsVerificationMsg"+(!this.isBtnSendAvailable&&this.isCodeSentOnce?"":" Hidden")},i("msgResendNotice",this.lang))),t("div",{class:"PlayerSmsVerificationButtonContainer"},t("button",{class:"PlayerSmsVerificationButton",onClick:this.debounce(this.handleSendCode.bind(this),850),disabled:!this.isBtnSendAvailable},this.isCodeSentOnce?this.isBtnSendAvailable?i("btnResend",this.lang):this.tempBtnResendCount:i("btnSend",this.lang)),t("button",{class:"PlayerSmsVerificationButton",onClick:this.debounce(this.handleCheckCode.bind(this),850),disabled:!this.isCodeSentOnce||""===this.code||void 0===this.code},i("btnActivate",this.lang))))}static get watchers(){return{clientStyling:["updateClientStyling"],clientStylingUrl:["updateClientStyling"]}}};n.style=":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationTitleContainer{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:60px}.PlayerSmsVerificationTitle{font-size:20px;font-weight:300;text-transform:uppercase;padding:0;margin:0}.PlayerSmsVerificationSubitle{font-size:14px}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:75px}.PlayerSmsVerificationButtonContainer{position:relative;width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";export{n as player_sms_verification}

package/dist/player-sms-verification/player-sms-verification.esm.js

@@ -1 +1 @@
-import{p as n,b as t}from"./p-616d438d.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),n(e)})().then((n=>t([["p-5a63187f",[[1,"player-sms-verification",{endpoint:[513],userId:[513,"user-id"],lang:[513],clientStyling:[1537,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],tempBtnResendCount:[32],code:[32],errMsg:[32],msgEnterCode:[32]}]]]],n)));
+import{p as n,b as t}from"./p-616d438d.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),n(e)})().then((n=>t([["p-7554f89f",[[1,"player-sms-verification",{endpoint:[513],userId:[513,"user-id"],lang:[513],clientStyling:[1537,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],tempBtnResendCount:[32],code:[32],errMsg:[32],msgEnterCode:[32]}]]]],n)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-sms-verification",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/player-sms-verification/p-5a63187f.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-616d438d.js";const r={en:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},ro:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},fr:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},hu:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},tr:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},el:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},es:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},pt:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"},hr:{btnSend:"Send Code",btnResend:"Resend Code",btnActivate:"Activate",msgEnterCode:"Please enter the verification code you received on your number",msgResendNotice:"A new verification code has been sent to your phone number",errGenerateCode:"An error occurred while generating your code. Please click the resend button to generate a new code",errInvalidCode:"The code is incorrect",errExceededAttempts:"Too many attempts. Try again later",errExpiredToken:"The code expired, resend code"}},n=(e,t)=>r[void 0!==t?t:"en"][e],i=class{constructor(t){e(this,t),this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.code="",this.errMsg="",this.msgEnterCode="",this.btnResendCount=60,this.isCodeSentOnce=!1,this.isBtnSendAvailable=!0,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.stylingContainer.prepend(t)}),1)})).catch((e=>{console.log("error ",e)}))}}updateClientStyling(){this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL()}componentWillLoad(){if(this.translationUrl)return e=this.translationUrl,new Promise((t=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((t=>{for(let n in e[t])r[t][n]=e[t][n]})),t(!0)}))}));var e;this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL()}startTimerBtnResendCode(){this.isBtnSendAvailable=!1,this.tempBtnResendCount=this.btnResendCount,this.btnResendTimer=setInterval((()=>{this.tempBtnResendCount--,this.tempBtnResendCount<0&&(clearInterval(this.btnResendTimer),this.isBtnSendAvailable=!0)}),1e3)}setErrMsg(e){"INVALID_CODE"===e?this.errMsg="errInvalidCode":"BLOCK_USER_INCORRECT_CODE"===e?this.errMsg="errExceededAttempts":"ExpiredToken"===e?this.errMsg="errExpiredToken":"errGenerateCode"===e&&(this.errMsg="errGenerateCode")}debounce(e,t){return function(...r){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{e.apply(this,r)}),t)}}handleSendCode(){this.errMsg="";let e=new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);const t={method:"POST",headers:{accept:"application/json","Content-Type":"application/json"},body:JSON.stringify({userId:`${this.userId}`})};fetch(e.href,t).then((()=>{this.msgEnterCode="msgEnterCode",this.isCodeSentOnce&&this.startTimerBtnResendCode(),this.isCodeSentOnce=!0})).catch((e=>{this.setErrMsg("errGenerateCode"),window.postMessage({type:"WidgetNotification",data:{type:"error",message:e}},window.location.href)}))}handleCheckCode(){let e=new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);e.searchParams.append("userId",this.userId),e.searchParams.append("code",this.code),fetch(e.href,{method:"GET",headers:{accept:"application/json"}}).then((e=>e.json())).then((e=>{200===e.httpStatusCode?(this.errMsg="",window.postMessage({type:"SmsVerificationSuccess"},window.location.href)):e.thirdPartyResponse&&(this.setErrMsg(e.thirdPartyResponse.message),"errExceededAttempts"===this.errMsg&&window.postMessage({type:"SmsVerificationErrExceededAttempts",data:n(this.errMsg)},window.location.href))})).catch((e=>{window.postMessage({type:"WidgetNotification",data:{type:"error",message:e}},window.location.href)})).finally((()=>{this.code=""}))}handleInput(e){this.code=e.target.value}render(){return t("div",{class:"PlayerSmsVerification",ref:e=>this.stylingContainer=e},t("div",{class:"PlayerSmsVerificationContainer"},t("p",{class:"PlayerSmsVerificationMsg"+(this.msgEnterCode?"":" Hidden")},n(this.msgEnterCode,this.lang)),t("div",{class:"PlayerSmsVerificationInput"},t("input",{type:"text",onInput:e=>this.handleInput(e),value:this.code})),this.errMsg?t("p",{class:"PlayerSmsVerificationErrMsg"},n(this.errMsg,this.lang)):t("p",{class:"PlayerSmsVerificationMsg"+(!this.isBtnSendAvailable&&this.isCodeSentOnce?"":" Hidden")},n("msgResendNotice",this.lang))),t("div",{class:"PlayerSmsVerificationButtonContainer"},t("button",{class:"PlayerSmsVerificationButton",onClick:this.debounce(this.handleSendCode.bind(this),850),disabled:!this.isBtnSendAvailable},this.isCodeSentOnce?this.isBtnSendAvailable?n("btnResend",this.lang):this.tempBtnResendCount:n("btnSend",this.lang)),t("button",{class:"PlayerSmsVerificationButton",onClick:this.debounce(this.handleCheckCode.bind(this),850),disabled:!this.isCodeSentOnce||""===this.code||void 0===this.code},n("btnActivate",this.lang))))}static get watchers(){return{clientStyling:["updateClientStyling"],clientStylingUrl:["updateClientStyling"]}}};i.style=":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:30px}.PlayerSmsVerificationButtonContainer{width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";export{i as player_sms_verification}