@everymatrix/pam-player-contacts 0.11.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamPlayerContacts = require('./pam-player-contacts-4a593000.js');
+require('./index-ed59decb.js');
+
+
+
+exports.PamPlayerContacts = pamPlayerContacts.PamPlayerContacts;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ed59decb.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-player-contacts_2.cjs",[[1,"pam-player-contacts",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isVerificationStatusDisplayed":[513,"is-verification-status-displayed"],"isPhoneNumberEditable":[513,"is-phone-number-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/pam-player-contacts-4a593000.js

@@ -0,0 +1,469 @@
+'use strict';
+
+const index = require('./index-ed59decb.js');
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    "en": {
+        "title": "Contacts",
+        "email": "Email",
+        "phoneNumber": "Phone Number",
+        "phoneNumberError": "The phone number must be at least 5 digits and at most 15 digits",
+        "verifyContactButton": "Verify",
+        "saveButton": "Save Changes",
+        "successMessage": "Your changes have been saved!",
+        "errorMessageUpdate": "An error has occured when attempting to update the contacts information",
+        "errorMessageFetch": "An error has occured when attempting to fetch the contacts information"
+    },
+    "zh-hk": {
+        "title": "聯絡人",
+        "email": "電子郵件",
+        "phoneNumber": "電話號碼",
+        "phoneNumberError": "電話號碼必須至少5位數字，最多15位數字",
+        "verifyContactButton": "驗證",
+        "saveButton": "保存更改",
+        "successMessage": "您的更改已保存！",
+        "errorMessageUpdate": "嘗試更新聯絡人信息時發生錯誤",
+        "errorMessageFetch": "在嘗試獲取聯絡人信息時發生錯誤"
+    },
+    "fr": {
+        "title": "Contacts",
+        "email": "Email",
+        "phoneNumber": "Numéro de téléphone",
+        "phoneNumberError": "Le numéro de téléphone doit comporter au moins 5 chiffres et au maximum 15 chiffres",
+        "verifyContactButton": "Vérifier",
+        "saveButton": "Enregistrer les modifications",
+        "successMessage": "Vos modifications ont été enregistrées !",
+        "errorMessageUpdate": "Une erreur s'est produite lors de la tentative de mise à jour des informations de contact",
+        "errorMessageFetch": "Une erreur est survenue lors de la tentative de récupération des informations de contact"
+    },
+    "ro": {
+        "title": "Contacte",
+        "email": "Email",
+        "phoneNumber": "Număr de telefon",
+        "phoneNumberError": "Numărul de telefon trebuie să aibă cel puțin 5 cifre și maximum 15 cifre",
+        "verifyContactButton": "Verifică",
+        "saveButton": "Salvează modificările",
+        "successMessage": "Modificările dvs. au fost salvate!",
+        "errorMessageUpdate": "A apărut o eroare la încercarea de a actualiza informațiile de contact",
+        "errorMessageFetch": "A apărut o eroare la încercarea de a obține informațiile de contact"
+    },
+    "tr": {
+        "title": "Kişiler",
+        "email": "E-posta",
+        "phoneNumber": "Telefon Numarası",
+        "phoneNumberError": "Telefon numarası en az 5 haneli ve en fazla 15 haneli olmalıdır",
+        "verifyContactButton": "Doğrula",
+        "saveButton": "Değişiklikleri Kaydet",
+        "successMessage": "Değişiklikleriniz kaydedildi!",
+        "errorMessageUpdate": "Kişi bilgilerini güncellemeye çalışırken bir hata oluştu",
+        "errorMessageFetch": "İletişim bilgilerini almak için yapılan işlemde bir hata oluştu"
+    },
+    "es": {
+        "title": "Contactos",
+        "email": "Correo electrónico",
+        "phoneNumber": "Número de teléfono",
+        "phoneNumberError": "El número de teléfono debe tener al menos 5 dígitos y un máximo de 15 dígitos",
+        "verifyContactButton": "Verificar",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus cambios han sido guardados!",
+        "errorMessageUpdate": "Se ha producido un error al intentar actualizar la información de contactos",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener la información de los contactos"
+    },
+    "pt": {
+        "title": "Contatos",
+        "email": "Email",
+        "phoneNumber": "Número de telefone",
+        "phoneNumberError": "O número de telefone deve ter pelo menos 5 dígitos e no máximo 15 dígitos",
+        "verifyContactButton": "Verificar",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas alterações foram salvas!",
+        "errorMessageUpdate": "Ocorreu um erro ao tentar atualizar as informações de contato",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as informações de contato"
+    },
+    "hr": {
+        "title": "Kontakti",
+        "email": "Email",
+        "phoneNumber": "Broj telefona",
+        "phoneNumberError": "Broj telefona mora imati najmanje 5 znamenki i najviše 15 znamenki",
+        "verifyContactButton": "Provjeri",
+        "saveButton": "Spremi promjene",
+        "successMessage": "Vaše promjene su spremljene!",
+        "errorMessageUpdate": "Došlo je do pogreške prilikom pokušaja ažuriranja informacija o kontaktima",
+        "errorMessageFetch": "Došlo je do greške prilikom pokušaja dobijanja informacija o kontaktima"
+    },
+    "pt-br": {
+        "title": "Contatos",
+        "email": "Email",
+        "phoneNumber": "Número de telefone",
+        "phoneNumberError": "O número de telefone deve ter pelo menos 5 dígitos e no máximo 15 dígitos",
+        "verifyContactButton": "Verificar",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas alterações foram salvas!",
+        "errorMessageUpdate": "Ocorreu um erro ao tentar atualizar as informações de contato",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as informações de contato"
+    },
+    "es-mx": {
+        "title": "Contactos",
+        "email": "Correo electrónico",
+        "phoneNumber": "Número de teléfono",
+        "phoneNumberError": "El número de teléfono debe tener al menos 5 dígitos y un máximo de 15 dígitos",
+        "verifyContactButton": "Verificar",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus cambios han sido guardados!",
+        "errorMessageUpdate": "Se ha producido un error al intentar actualizar la información de contactos",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener la información de los contactos"
+    }
+};
+const translate = (key, customLang, values) => {
+    let lang = TRANSLATIONS[customLang] ? customLang : DEFAULT_LANGUAGE;
+    let translation = TRANSLATIONS[lang][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;
+};
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const pamPlayerContactsCss = ":host {\n  display: block;\n}\n\nbutton {\n  font-family: var(--emw--button-typography);\n}\n\ninput, select, option {\n  font-family: inherit;\n}\n\n.errorContainer {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n}\n.errorContainer .errorMessage {\n  color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n  font-size: var(--emw-font-size-small, 13px);\n  display: block;\n  justify-content: center;\n  text-align: center;\n}\n\n.PlayerContactsWrapper {\n  color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));\n  background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));\n  padding: 50px;\n  height: 100%;\n  border-radius: var(--emw--border-radius-large, 10px);\n  container-type: inline-size;\n  opacity: 1;\n  animation-name: fadeIn;\n  animation-iteration-count: 1;\n  animation-timing-function: ease-in;\n  animation-duration: 0.3s;\n}\n.PlayerContactsWrapper .ReturnButton {\n  display: none;\n}\n.PlayerContactsWrapper .HeaderText {\n  font-size: var(--emw--font-size-x-large, 24px);\n  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  text-transform: capitalize;\n  font-weight: var(--emw--font-weight-semibold, 500);\n}\n.PlayerContactsWrapper .Section {\n  background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));\n  border-radius: var(--emw--border-radius-large, 10px);\n  padding: 10px;\n  margin-bottom: 10px;\n}\n.PlayerContactsWrapper .Section .SectionTitle {\n  font-size: var(--emw--font-size-large, 20px);\n  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  text-transform: capitalize;\n  font-weight: var(--emw--font-weight-semibold, 500);\n  padding: 0;\n  border: 0;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  background: transparent;\n  cursor: pointer;\n}\n.PlayerContactsWrapper .Section .SectionContent {\n  display: grid;\n  column-gap: 50px;\n  row-gap: 25px;\n  grid-template-rows: auto;\n  grid-template-columns: 1fr 1fr;\n  padding-bottom: 30px;\n  margin-top: 10px;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.PlayerContactsWrapper .Section .SectionContent .Field label {\n  font-size: var(--emw--size-small, 14px);\n  font-weight: var(--emw--font-weight-semibold, 500);\n  margin-bottom: 5px;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field input {\n  font-size: var(--emw--size-small, 14px);\n  font-weight: var(--emw--font-weight-light, 300);\n  color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));\n  padding: 10px;\n  line-height: 16px;\n  background: var(--emw-color-white, #FFFFFF);\n  outline: none;\n  transition-duration: var(--emw--transition-medium, 250ms);\n  border: 1px solid var(--emw--color-gray-100, #353535);\n  border-radius: var(--emw--border-radius-medium, 10px);\n  width: 100%;\n  box-sizing: border-box;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field input:focus, .PlayerContactsWrapper .Section .SectionContent .Field input :focus-within, .PlayerContactsWrapper .Section .SectionContent .Field input :focus-visible, .PlayerContactsWrapper .Section .SectionContent .Field input :visited {\n  border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerContactsWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PlayerContactsWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field input[type=number] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field div {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field div input {\n  min-width: fit-content;\n  width: 100%;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field div button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n  border: 2px solid var(--emw--button-border-color, #0E5924);\n  color: var(--emw--button-text-color, #FFFFFF);\n  border-radius: var(--emw--button-border-radius, 10px);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-semibold, 500);\n  text-transform: uppercase;\n  transition-duration: var(--emw--transition-medium, 250ms);\n  max-width: 100px;\n  min-width: 30px;\n  width: 100%;\n  height: 100%;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field div button:active {\n  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerContactsWrapper .Section .SectionContent .Field.Invalid input {\n  border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));\n  background: var(--emw-color-pale, #FBECF4);\n  color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n}\n.PlayerContactsWrapper .Section .SectionContent .Field .Error {\n  color: var(--emw-color-error, var(--emw-color-red, #FD2839));\n  font-size: var(--emw--font-size-x-small, 12px);\n  line-height: 10px;\n}\n.PlayerContactsWrapper .Section .SectionContent .Field.Disabled input {\n  opacity: 0.5;\n}\n.PlayerContactsWrapper .Section .SectionContent .CompoundField {\n  width: 100%;\n  display: flex;\n  gap: 10px;\n  flex-direction: row;\n}\n.PlayerContactsWrapper .Section .VerifiedCheckmark {\n  fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  stroke: #27a305;\n  stroke-width: 5;\n}\n.PlayerContactsWrapper .ButtonsArea {\n  grid-column-gap: 10px;\n  grid-template-rows: auto;\n  grid-template-columns: 1fr;\n  margin-top: 20px;\n  width: 50%;\n}\n.PlayerContactsWrapper .ButtonsArea .SaveButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));\n  border: 2px solid var(--emw--button-border-color, #0E5924);\n  color: var(--emw--button-text-color, #FFFFFF);\n  border-radius: var(--emw--button-border-radius, 10px);\n  font-size: var(--emw--size-standard, 16px);\n  text-transform: uppercase;\n  transition-duration: var(--emw--transition-medium, 250ms);\n  max-width: 400px;\n  min-width: 200px;\n  padding: 13px 0;\n  width: 100%;\n}\n.PlayerContactsWrapper .ButtonsArea .SaveButton:active {\n  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PlayerContactsWrapper .ButtonsArea .SaveButton.Disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.PlayerContactsWrapper.skeleton .ReturnButton {\n  display: block;\n  width: 200px;\n  margin-top: 15px;\n  margin-bottom: 20px;\n}\n.PlayerContactsWrapper.skeleton .Section .SectionContent {\n  max-height: 100%;\n  overflow: hidden;\n}\n.PlayerContactsWrapper.skeleton .Section .SectionContent .Field {\n  height: 60px;\n  overflow: hidden;\n}\n.PlayerContactsWrapper.skeleton .ButtonsArea .SaveButton {\n  width: 500px;\n  border-radius: 30px;\n  overflow: hidden;\n  display: block;\n  background-image: none;\n  border: none;\n}\n@container (max-width: 425px) {\n  .PlayerContactsWrapper {\n    padding: 20px 15px;\n    background: var(--emw-color-gray-50, #F9F8F8);\n    max-width: unset;\n    border-radius: var(--emw--border-radius-small, 5px);\n  }\n  .PlayerContactsWrapper .ReturnButton {\n    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n    display: inline-flex;\n    align-items: center;\n    column-gap: 10px;\n    margin-bottom: 10px;\n  }\n  .PlayerContactsWrapper .ReturnButton svg {\n    fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  }\n  .PlayerContactsWrapper .HeaderText {\n    display: none;\n  }\n  .PlayerContactsWrapper h2 {\n    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n    font-size: var(--emw--font-size-large, 20px);\n    font-weight: var(--emw--font-weight-semibold, 500);\n  }\n  .PlayerContactsWrapper .Section .SectionContent {\n    row-gap: 15px;\n    grid-template-columns: 1fr;\n  }\n  .PlayerContactsWrapper .Section .SectionTitle {\n    margin-top: 5px;\n    margin-bottom: 5px;\n    font-size: var(--emw--font-size-medium, 16px);\n  }\n  .PlayerContactsWrapper .Section .Field label {\n    color: var(--emw-color-gray-300, #58586B);\n    font-size: var(--emw--size-x-small, 12px);\n    font-weight: var(-emw--font-weight-normal, 400);\n  }\n  .PlayerContactsWrapper .Section .Field input {\n    color: var(--emw-color-gray-300, #58586B);\n    font-size: var(--emw--size-x-small, 12px);\n    font-weight: var(--emw--font-weight-light, 300);\n  }\n  .PlayerContactsWrapper .Section .CompoundField {\n    width: 100%;\n    display: flex;\n    gap: 10px;\n    flex-direction: row;\n  }\n  .PlayerContactsWrapper .ButtonsArea {\n    grid-column-gap: 10px;\n    width: 100%;\n    grid-template-columns: 1fr 1fr;\n  }\n  .PlayerContactsWrapper .ButtonsArea .SaveButton {\n    font-size: var(--emw--size-x-small, 12px);\n    height: 40px;\n    color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));\n  }\n  .PlayerContactsWrapper .ButtonsArea .SaveButton.Disabled {\n    color: var(--emw-color-gray-300, #58586B);\n  }\n  .PlayerContactsWrapper.skeleton .Section .SectionContent {\n    display: block;\n  }\n  .PlayerContactsWrapper.skeleton .Section .SectionContent .Field {\n    margin-bottom: 15px;\n  }\n  .PlayerContactsWrapper.skeleton .ButtonsArea .SaveButton {\n    width: 100%;\n    height: 100%;\n    border-radius: 20px;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0.01;\n  }\n  1% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}";
+const PamPlayerContactsStyle0 = pamPlayerContactsCss;
+
+const PamPlayerContacts = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dataRef = {};
+        this.fieldsState = {};
+        this.sendLoadedMessage = () => {
+            window.postMessage({ type: 'CONTACTS_LOADED' });
+        };
+        this.sendValidMessage = () => {
+            window.postMessage({ type: 'CONTACTS_VALIDITY', data: this.isSubmitButtonAvailable });
+        };
+        this.sendContactVerificationRequest = (contactType) => (e) => {
+            e.preventDefault();
+            window.postMessage({ type: 'ContactVerification', contactType });
+        };
+        this.sendSuccessNotification = () => {
+            window.postMessage({ type: 'WidgetNotification', data: { type: 'success', message: translate('successMessage', this.lang) } }, window.location.href);
+        };
+        this.sendErrorNotification = (errorKey) => {
+            window.postMessage({ type: 'WidgetNotification', data: { type: 'error', message: translate(errorKey, this.lang) } }, window.location.href);
+        };
+        this.sendData = () => {
+            window.postMessage({ type: 'CONTACTS_UPDATE_DATA', data: this.data }, window.location.href);
+        };
+        this.messageHandler = (message) => {
+            var _a;
+            switch ((_a = message.data) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'CONTACTS_DATA':
+                    this.data = message.data.data;
+                    this.resetState();
+                    this.isSkeletonLoading = false;
+                    break;
+                case 'CONTACTS_SEND_DATA':
+                    this.sendData();
+                    break;
+            }
+        };
+        /**
+         * Promise for fetching the response and returning the response or the erorr message
+         * @param res - response from the API
+         */
+        this.handleFetchResponse = async (res) => {
+            var _a;
+            if (res.status >= 300) {
+                this.isError = true;
+                let response = await res.json();
+                this.errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
+                this.errorMessage = this.errorCode ? translate(this.errorCode, this.lang) : translate('errorMessageFetch', this.lang);
+                window.postMessage({
+                    type: 'WidgetNotification',
+                    data: {
+                        type: 'error',
+                        message: this.errorMessage
+                    }
+                }, window.location.href);
+                return Promise.reject(this.errorMessage);
+            }
+            else {
+                this.isError = false;
+                if (res.headers.get('content-type')) {
+                    let response = await res.json();
+                    return Promise.resolve(response);
+                }
+                return Promise.resolve();
+            }
+        };
+        this.getData = () => {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/contacts/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve, reject) => {
+                fetch(url.href, options)
+                    .then((res) => this.handleFetchResponse(res))
+                    .then(res => {
+                    this.data = res;
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.log(error);
+                    reject();
+                });
+            });
+        };
+        this.buildFieldState = (isValid, initialValue, rule) => Object.assign({ 'isValid': isValid, 'initialValue': initialValue, 'rule': rule });
+        this.resetState = () => {
+            this.initData();
+            this.initEditableFieldsState();
+            this.invalidFields = 0;
+            this.isSubmitButtonAvailable = false;
+        };
+        this.updateState = (fieldKey) => (e) => {
+            this.dataRef[fieldKey].contactValue = e.target.value;
+            const fieldState = this.fieldsState[fieldKey]['data'].contactValue;
+            const value = e.target.value;
+            const passedRuleCheck = fieldState.rule(value);
+            if (passedRuleCheck && !fieldState.isValid) {
+                fieldState.isValid = true;
+                this.invalidFields -= 1;
+            }
+            else if (!passedRuleCheck && fieldState.isValid) {
+                fieldState.isValid = false;
+                this.invalidFields += 1;
+            }
+            this.fieldsState[fieldKey]['hasChanged'] = value !== fieldState.initialValue;
+            const previous = this.isSubmitButtonAvailable;
+            this.updateSubmitButtonStatus();
+            if (this.isStandAlone !== 'true' && this.isSubmitButtonAvailable !== previous) {
+                this.sendValidMessage();
+            }
+        };
+        this.updateData = (e) => {
+            if (e)
+                e.preventDefault();
+            const promises = [];
+            for (const contactType of Object.keys(this.fieldsState)) {
+                if (!this.fieldsState[contactType]['hasChanged'])
+                    continue;
+                const contact = this.dataRef[contactType];
+                const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/contacts/${contact['contactId']}/`, this.endpoint);
+                const headers = new Headers();
+                headers.append('X-SessionId', this.session);
+                headers.append('Content-Type', 'application/json-patch+json');
+                const reqParams = {
+                    method: 'PUT',
+                    headers,
+                    body: JSON.stringify(contact)
+                };
+                promises.push(fetch(url, reqParams));
+            }
+            Promise.all(promises)
+                .then(resArr => {
+                if (resArr.some(res => !res.ok)) {
+                    return this.sendErrorNotification('errorMessageUpdate');
+                }
+                this.sendSuccessNotification();
+                this.getData().then(() => this.resetState());
+            });
+        };
+        this.updateSubmitButtonStatus = () => {
+            this.isSubmitButtonAvailable = this.invalidFields === 0 && Object.values(this.fieldsState).some(v => v.hasChanged);
+        };
+        this.editableField = (fieldKey, labelTranslationKey, errorTranslationKey) => {
+            const fieldState = this.fieldsState[fieldKey]['data'].contactValue;
+            const value = this.dataRef[fieldKey];
+            if (fieldState) {
+                return (index.h("div", { class: `Field  ${fieldState.isValid ? '' : 'Invalid'}` }, index.h("label", null, translate(labelTranslationKey, this.lang)), this.isVerificationStatusDisplayed === 'true'
+                    ? index.h("div", null, index.h("input", { type: "text", value: value.contactValue, onKeyUp: this.updateState(fieldKey) }), value.isVerified
+                        ? index.h("svg", { class: "VerifiedCheckmark", xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Capa_1", width: "40px", height: "40px", viewBox: "-53.65 -53.65 643.84 643.84", transform: "matrix(1, 0, 0, 1, 0, 0)rotate(0)" }, index.h("g", { id: "SVGRepo_bgCarrier", "stroke-width": "0" }), index.h("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round", stroke: "#CCCCCC", "stroke-width": "1.073082" }), index.h("g", { id: "SVGRepo_iconCarrier" }, " ", index.h("g", null, " ", index.h("g", null, " ", index.h("path", { d: "M496.785,152.779c-3.305-25.085-16.549-51.934-38.826-74.205c-22.264-22.265-49.107-35.508-74.186-38.813 c-11.348-1.499-26.5-7.766-35.582-14.737C328.111,9.626,299.764,0,268.27,0s-59.841,9.626-79.921,25.024 c-9.082,6.965-24.235,13.238-35.582,14.737c-25.08,3.305-51.922,16.549-74.187,38.813c-22.277,22.271-35.521,49.119-38.825,74.205 c-1.493,11.347-7.766,26.494-14.731,35.57C9.621,208.422,0,236.776,0,268.27s9.621,59.847,25.024,79.921 c6.971,9.082,13.238,24.223,14.731,35.568c3.305,25.086,16.548,51.936,38.825,74.205c22.265,22.266,49.107,35.51,74.187,38.814 c11.347,1.498,26.5,7.771,35.582,14.736c20.073,15.398,48.421,25.025,79.921,25.025s59.841-9.627,79.921-25.025 c9.082-6.965,24.234-13.238,35.582-14.736c25.078-3.305,51.922-16.549,74.186-38.814c22.277-22.27,35.521-49.119,38.826-74.205 c1.492-11.346,7.766-26.492,14.73-35.568c15.404-20.074,25.025-48.422,25.025-79.921c0-31.494-9.621-59.848-25.025-79.921 C504.545,179.273,498.277,164.126,496.785,152.779z M439.256,180.43L246.477,373.209l-30.845,30.846 c-8.519,8.52-22.326,8.52-30.845,0l-30.845-30.846l-56.665-56.658c-8.519-8.52-8.519-22.326,0-30.846l30.845-30.844 c8.519-8.519,22.326-8.519,30.845,0l41.237,41.236L377.561,118.74c8.52-8.519,22.326-8.519,30.846,0l30.844,30.845 C447.775,158.104,447.775,171.917,439.256,180.43z" }), " "), " "), " "))
+                        : index.h("button", { onClick: this.sendContactVerificationRequest(fieldKey) }, translate('verifyContactButton')))
+                    : index.h("input", { type: "text", value: value.contactValue, onKeyUp: this.updateState(fieldKey) }), !fieldState.isValid &&
+                    index.h("p", { class: "Error" }, translate(errorTranslationKey, this.lang))));
+            }
+            else {
+                return null;
+            }
+        };
+        this.staticField = (fieldKey, labelTranslationKey) => {
+            const value = this.dataRef[fieldKey];
+            if (value && value.contactValue) {
+                return (index.h("div", { class: "Field Disabled" }, index.h("label", null, translate(labelTranslationKey, this.lang)), this.isVerificationStatusDisplayed === 'true'
+                    ? index.h("div", null, index.h("input", { type: "text", value: value.contactValue, readonly: true }), value.isVerified
+                        ? index.h("svg", { class: "VerifiedCheckmark", xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Capa_1", width: "40px", height: "40px", viewBox: "-53.65 -53.65 643.84 643.84", transform: "matrix(1, 0, 0, 1, 0, 0)rotate(0)" }, index.h("g", { id: "SVGRepo_bgCarrier", "stroke-width": "0" }), index.h("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round", stroke: "#CCCCCC", "stroke-width": "1.073082" }), index.h("g", { id: "SVGRepo_iconCarrier" }, " ", index.h("g", null, " ", index.h("g", null, " ", index.h("path", { d: "M496.785,152.779c-3.305-25.085-16.549-51.934-38.826-74.205c-22.264-22.265-49.107-35.508-74.186-38.813 c-11.348-1.499-26.5-7.766-35.582-14.737C328.111,9.626,299.764,0,268.27,0s-59.841,9.626-79.921,25.024 c-9.082,6.965-24.235,13.238-35.582,14.737c-25.08,3.305-51.922,16.549-74.187,38.813c-22.277,22.271-35.521,49.119-38.825,74.205 c-1.493,11.347-7.766,26.494-14.731,35.57C9.621,208.422,0,236.776,0,268.27s9.621,59.847,25.024,79.921 c6.971,9.082,13.238,24.223,14.731,35.568c3.305,25.086,16.548,51.936,38.825,74.205c22.265,22.266,49.107,35.51,74.187,38.814 c11.347,1.498,26.5,7.771,35.582,14.736c20.073,15.398,48.421,25.025,79.921,25.025s59.841-9.627,79.921-25.025 c9.082-6.965,24.234-13.238,35.582-14.736c25.078-3.305,51.922-16.549,74.186-38.814c22.277-22.27,35.521-49.119,38.826-74.205 c1.492-11.346,7.766-26.492,14.73-35.568c15.404-20.074,25.025-48.422,25.025-79.921c0-31.494-9.621-59.848-25.025-79.921 C504.545,179.273,498.277,164.126,496.785,152.779z M439.256,180.43L246.477,373.209l-30.845,30.846 c-8.519,8.52-22.326,8.52-30.845,0l-30.845-30.846l-56.665-56.658c-8.519-8.52-8.519-22.326,0-30.846l30.845-30.844 c8.519-8.519,22.326-8.519,30.845,0l41.237,41.236L377.561,118.74c8.52-8.519,22.326-8.519,30.846,0l30.844,30.845 C447.775,158.104,447.775,171.917,439.256,180.43z" }), " "), " "), " "))
+                        : index.h("button", { onClick: this.sendContactVerificationRequest(fieldKey) }, translate('verifyContactButton')))
+                    : index.h("input", { type: "text", value: value.contactValue, readonly: true })));
+            }
+            else {
+                return null;
+            }
+        };
+        this.toggleScreen = () => {
+            window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: this.isMobile }, window.location.href);
+        };
+        this.userId = undefined;
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.lang = 'en';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.isVerificationStatusDisplayed = 'false';
+        this.isPhoneNumberEditable = 'true';
+        this.isStandAlone = 'true';
+        this.limitStylingAppends = false;
+        this.isSkeletonLoading = true;
+        this.isSubmitButtonAvailable = false;
+        this.invalidFields = 0;
+        this.isMobile = isMobile(window.navigator.userAgent);
+        this.isError = false;
+        this.errorMessage = '';
+        this.errorCode = '';
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    async componentWillLoad() {
+        if (this.isStandAlone !== 'true') {
+            return;
+        }
+        await this.getData()
+            .then(() => {
+            this.initData();
+            this.initEditableFieldsState();
+        })
+            .finally(() => this.isSkeletonLoading = false);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBuss != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+        if (this.isStandAlone !== 'true') {
+            window.addEventListener('message', this.messageHandler, false);
+            this.sendLoadedMessage();
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        if (this.isStandAlone !== 'true')
+            window.removeEventListener('message', this.messageHandler, false);
+    }
+    initData() {
+        for (const contact of this.data.contacts) {
+            this.dataRef[contact.contactType] = contact;
+        }
+    }
+    initEditableFieldsState() {
+        if (this.dataRef['PhoneNumber'] && this.isPhoneNumberEditable === 'true') {
+            this.fieldsState['PhoneNumber'] = {};
+            this.fieldsState['PhoneNumber']['hasChanged'] = false;
+            this.fieldsState['PhoneNumber']['data'] = {};
+            this.fieldsState['PhoneNumber']['data']['contactValue'] = this.buildFieldState(true, this.dataRef['PhoneNumber'].contactValue, (val) => val && val.length >= 5 && val.length <= 15 && !Number.isNaN(Number(val)));
+        }
+    }
+    render() {
+        if (!this.isSkeletonLoading && this.isError) {
+            return (index.h("div", { class: "errorContainer" }, index.h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
+        }
+        return (index.h("div", { ref: el => this.stylingContainer = el }, this.isSkeletonLoading
+            ? index.h("form", { class: "PlayerContactsWrapper skeleton" }, index.h("div", { class: "ReturnButton" }, index.h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), index.h("div", { class: "Section" }, index.h("section", { class: "SectionContent" }, index.h("div", { class: "Field" }, index.h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), index.h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })), index.h("div", { class: "Field" }, index.h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), index.h("ui-skeleton", { structure: "title", width: "100%", height: "40px" })))), index.h("section", { class: "ButtonsArea" }, index.h("div", { class: "SaveButton" }, index.h("ui-skeleton", { structure: "rectangle", width: "auto", height: "40px" }))))
+            : index.h("form", { class: "PlayerContactsWrapper" }, index.h("div", { class: "ReturnButton", onClick: this.toggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), index.h("h2", null, translate('title', this.lang))), index.h("h2", { class: "HeaderText" }, translate('title', this.lang)), index.h("div", { class: "Section" }, index.h("section", { class: "SectionContent" }, this.editableField('PhoneNumber', 'phoneNumber', 'phoneNumberError'), this.staticField('Email', 'email'))), this.isStandAlone === 'true' &&
+                index.h("section", { class: "ButtonsArea" }, index.h("button", { class: `SaveButton ${this.isSubmitButtonAvailable ? '' : 'Disabled'}`, onClick: this.updateData }, translate('saveButton'))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingUrlChange"]
+    }; }
+};
+PamPlayerContacts.style = PamPlayerContactsStyle0;
+
+exports.PamPlayerContacts = PamPlayerContacts;

package/dist/cjs/pam-player-contacts.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ed59decb.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pam-player-contacts.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pam-player-contacts_2.cjs",[[1,"pam-player-contacts",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"lang":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isVerificationStatusDisplayed":[513,"is-verification-status-displayed"],"isPhoneNumberEditable":[513,"is-phone-number-editable"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"isSkeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32],"isError":[32],"errorMessage":[32],"errorCode":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;