@everymatrix/pam-player-profile 0.8.0

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { P as PamPlayerProfile } from './pam-player-profile-e280c440.js';
+import './index-d953d051.js';

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-d953d051.js';
+export { s as setNonce } from './index-d953d051.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["pam-player-profile_2",[[1,"pam-player-profile",{"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"],"dobFormat":[513,"dob-format"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"skeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/esm/pam-player-profile-e280c440.js

@@ -0,0 +1,507 @@
+import { r as registerInstance, h } from './index-d953d051.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    "en": {
+        "title": "Profile Info",
+        "username": "Username",
+        "firstName": "First Name",
+        "lastName": "Last Name",
+        "securityQuestion": "Security Question",
+        "securityAnswer": "Security Answer",
+        "playerTitle": "Title",
+        "gender": "Gender",
+        "dateOfBirth": "Date Of Birth",
+        "currency": "Currency",
+        "securityQuestionError": "Security question must be at least 1 character long and maximum 120 characters.",
+        "securityAnswerError": "Security answer must be at least 1 character long and maximum 120 characters.",
+        "saveButton": "Save Changes",
+        "successMessage": "Your changes have been saved!",
+        "errorMessageUpdate": "An error has occured when attempting to update the profile information",
+        "errorMessageFetch": "An error has occured when attempting to fetch the profile information"
+    },
+    "zh-hk": {
+        "title": "個人資料",
+        "username": "用戶名",
+        "firstName": "名字",
+        "lastName": "姓氏",
+        "securityQuestion": "安全問題",
+        "securityAnswer": "安全答案",
+        "playerTitle": "稱號",
+        "gender": "性別",
+        "dateOfBirth": "出生日期",
+        "currency": "貨幣",
+        "securityQuestionError": "安全問題必須至少1個字符，最多120個字符。",
+        "securityAnswerError": "安全答案必須至少1個字符，最多120個字符。",
+        "saveButton": "保存更改",
+        "successMessage": "您的更改已保存！",
+        "errorMessageUpdate": "嘗試更新個人資料信息時發生錯誤",
+        "errorMessageFetch": "在嘗試獲取個人資料時發生錯誤"
+    },
+    "fr": {
+        "title": "Informations de profil",
+        "username": "Nom d'utilisateur",
+        "firstName": "Prénom",
+        "lastName": "Nom de famille",
+        "securityQuestion": "Question de sécurité",
+        "securityAnswer": "Réponse de sécurité",
+        "playerTitle": "Titre",
+        "gender": "Genre",
+        "dateOfBirth": "Date de naissance",
+        "currency": "Devise",
+        "securityQuestionError": "La question de sécurité doit comporter au moins 1 caractère et un maximum de 120 caractères.",
+        "securityAnswerError": "La réponse de sécurité doit comporter au moins 1 caractère et un maximum de 120 caractères.",
+        "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 profil",
+        "errorMessageFetch": "Une erreur est survenue lors de la tentative de récupération des informations de profil"
+    },
+    "ro": {
+        "title": "Informații profil",
+        "username": "Nume de utilizator",
+        "firstName": "Prenume",
+        "lastName": "Nume de familie",
+        "securityQuestion": "Întrebare de securitate",
+        "securityAnswer": "Răspuns de securitate",
+        "playerTitle": "Titlu",
+        "gender": "Gen",
+        "dateOfBirth": "Data nașterii",
+        "currency": "Monedă",
+        "securityQuestionError": "Întrebarea de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.",
+        "securityAnswerError": "Răspunsul de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.",
+        "saveButton": "Salvează modificările",
+        "successMessage": "Modificările dvs. au fost salvate!",
+        "errorMessageUpdate": "A apărut o eroare la încercarea de a actualiza informațiile profilului",
+        "errorMessageFetch": "A apărut o eroare la încercarea de a obține informațiile profilului"
+    },
+    "tr": {
+        "title": "Profil Bilgileri",
+        "username": "Kullanıcı Adı",
+        "firstName": "Ad",
+        "lastName": "Soyad",
+        "securityQuestion": "Güvenlik Sorusu",
+        "securityAnswer": "Güvenlik Cevabı",
+        "playerTitle": "Başlık",
+        "gender": "Cinsiyet",
+        "dateOfBirth": "Doğum Tarihi",
+        "currency": "Para Birimi",
+        "securityQuestionError": "Güvenlik sorusu en az 1 karakter ve en fazla 120 karakter olmalıdır.",
+        "securityAnswerError": "Güvenlik cevabı en az 1 karakter ve en fazla 120 karakter olmalıdır.",
+        "saveButton": "Değişiklikleri Kaydet",
+        "successMessage": "Değişiklikleriniz kaydedildi!",
+        "errorMessageUpdate": "Profil bilgilerini güncellemeye çalışırken bir hata oluştu",
+        "errorMessageFetch": "Profil bilgilerini almak için yapılan işlemde bir hata oluştu"
+    },
+    "es": {
+        "title": "Información del perfil",
+        "username": "Nombre de usuario",
+        "firstName": "Nombre",
+        "lastName": "Apellido",
+        "securityQuestion": "Pregunta de seguridad",
+        "securityAnswer": "Respuesta de seguridad",
+        "playerTitle": "Título",
+        "gender": "Género",
+        "dateOfBirth": "Fecha de nacimiento",
+        "currency": "Moneda",
+        "securityQuestionError": "La pregunta de seguridad debe tener al menos 1 carácter y un máximo de 120 caracteres.",
+        "securityAnswerError": "La respuesta de seguridad debe tener al menos 1 carácter y un máximo de 120 caracteres.",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus cambios han sido guardados!",
+        "errorMessageUpdate": "Se ha producido un error al intentar actualizar la información del perfil",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener la información del perfil"
+    },
+    "pt": {
+        "title": "Informações do Perfil",
+        "username": "Nome de usuário",
+        "firstName": "Nome",
+        "lastName": "Sobrenome",
+        "securityQuestion": "Pergunta de segurança",
+        "securityAnswer": "Resposta de segurança",
+        "playerTitle": "Título",
+        "gender": "Gênero",
+        "dateOfBirth": "Data de nascimento",
+        "currency": "Moeda",
+        "securityQuestionError": "A pergunta de segurança deve ter pelo menos 1 caractere e no máximo 120 caracteres.",
+        "securityAnswerError": "A resposta de segurança deve ter pelo menos 1 caractere e no máximo 120 caracteres.",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas alterações foram salvas!",
+        "errorMessageUpdate": "Ocorreu um erro ao tentar atualizar as informações do perfil",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as informações do perfil"
+    },
+    "hr": {
+        "title": "Informacije o profilu",
+        "username": "Korisničko ime",
+        "firstName": "Ime",
+        "lastName": "Prezime",
+        "securityQuestion": "Sigurnosno pitanje",
+        "securityAnswer": "Sigurnosni odgovor",
+        "playerTitle": "Naslov",
+        "gender": "Spol",
+        "dateOfBirth": "Datum rođenja",
+        "currency": "Valuta",
+        "securityQuestionError": "Sigurnosno pitanje mora imati najmanje 1 znak i najviše 120 znakova.",
+        "securityAnswerError": "Sigurnosni odgovor mora imati najmanje 1 znak i najviše 120 znakova.",
+        "saveButton": "Spremi promjene",
+        "successMessage": "Vaše promjene su spremljene!",
+        "errorMessageUpdate": "Došlo je do pogreške prilikom pokušaja ažuriranja informacija o profilu",
+        "errorMessageFetch": "Došlo je do greške prilikom pokušaja dobijanja informacija o profilu"
+    },
+    "pt-br": {
+        "title": "Informações do Perfil",
+        "username": "Nome de usuário",
+        "firstName": "Nome",
+        "lastName": "Sobrenome",
+        "securityQuestion": "Pergunta de segurança",
+        "securityAnswer": "Resposta de segurança",
+        "playerTitle": "Título",
+        "gender": "Gênero",
+        "dateOfBirth": "Data de nascimento",
+        "currency": "Moeda",
+        "securityQuestionError": "A pergunta de segurança deve ter pelo menos 1 caractere e no máximo 120 caracteres.",
+        "securityAnswerError": "A resposta de segurança deve ter pelo menos 1 caractere e no máximo 120 caracteres.",
+        "saveButton": "Salvar alterações",
+        "successMessage": "Suas alterações foram salvas!",
+        "errorMessageUpdate": "Ocorreu um erro ao tentar atualizar as informações do perfil",
+        "errorMessageFetch": "Ocorreu um erro ao tentar buscar as informações do perfil"
+    },
+    "es-mx": {
+        "title": "Información del perfil",
+        "username": "Nombre de usuario",
+        "firstName": "Nombre",
+        "lastName": "Apellido",
+        "securityQuestion": "Pregunta de seguridad",
+        "securityAnswer": "Respuesta de seguridad",
+        "playerTitle": "Título",
+        "gender": "Género",
+        "dateOfBirth": "Fecha de nacimiento",
+        "currency": "Moneda",
+        "securityQuestionError": "La pregunta de seguridad debe tener al menos 1 carácter y un máximo de 120 caracteres.",
+        "securityAnswerError": "La respuesta de seguridad debe tener al menos 1 carácter y un máximo de 120 caracteres.",
+        "saveButton": "Guardar cambios",
+        "successMessage": "¡Tus cambios han sido guardados!",
+        "errorMessageUpdate": "Se ha producido un error al intentar actualizar la información del perfil",
+        "errorMessageFetch": "Se ha producido un error al intentar obtener la información del perfil"
+    }
+};
+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 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);
+      }
+    });
+  }
+}
+
+/**
+ * @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));
+};
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var dayjs_min = {exports: {}};
+
+(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
+}(dayjs_min));
+
+const dayjs = dayjs_min.exports;
+
+const pamPlayerProfileCss = ":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.PamPlayerProfileWrapper {\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.PamPlayerProfileWrapper .ReturnButton {\n  display: none;\n}\n.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .Section .SectionContent .Field {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .Section .SectionContent .Field input:focus, .PamPlayerProfileWrapper .Section .SectionContent .Field input :focus-within, .PamPlayerProfileWrapper .Section .SectionContent .Field input :focus-visible, .PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,\n.PamPlayerProfileWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.PamPlayerProfileWrapper .Section .SectionContent .Field input[type=number] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .Section .SectionContent .Field.Disabled input {\n  opacity: 0.5;\n}\n.PamPlayerProfileWrapper .Section .SectionContent .CompoundField {\n  width: 100%;\n  display: flex;\n  gap: 10px;\n  flex-direction: row;\n}\n.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .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.PamPlayerProfileWrapper .ButtonsArea .SaveButton:active {\n  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n}\n.PamPlayerProfileWrapper .ButtonsArea .SaveButton.Disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.PamPlayerProfileWrapper.skeleton .ReturnButton {\n  display: block;\n  width: 200px;\n  margin-top: 15px;\n  margin-bottom: 20px;\n}\n.PamPlayerProfileWrapper.skeleton .Section .SectionContent {\n  grid-template-columns: 50% 50%;\n  overflow: hidden;\n}\n.PamPlayerProfileWrapper.skeleton .Section .SectionContent .Field {\n  height: 55px;\n  overflow: hidden;\n}\n.PamPlayerProfileWrapper.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  .PamPlayerProfileWrapper {\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  .PamPlayerProfileWrapper .HeaderText {\n    display: none;\n  }\n  .PamPlayerProfileWrapper .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  .PamPlayerProfileWrapper .ReturnButton svg {\n    fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  }\n  .PamPlayerProfileWrapper 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  .PamPlayerProfileWrapper .Section .SectionContent {\n    row-gap: 15px;\n    grid-template-columns: 1fr;\n  }\n  .PamPlayerProfileWrapper .Section .SectionTitle {\n    margin-top: 5px;\n    margin-bottom: 5px;\n    font-size: var(--emw--font-size-medium, 16px);\n  }\n  .PamPlayerProfileWrapper .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  .PamPlayerProfileWrapper .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  .PamPlayerProfileWrapper .Section .CompoundField {\n    width: 100%;\n    display: flex;\n    gap: 10px;\n    flex-direction: row;\n  }\n  .PamPlayerProfileWrapper .ButtonsArea {\n    grid-column-gap: 10px;\n    width: 100%;\n    grid-template-columns: 1fr 1fr;\n  }\n  .PamPlayerProfileWrapper .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  .PamPlayerProfileWrapper .ButtonsArea .SaveButton.Disabled {\n    color: var(--emw-color-gray-300, #58586B);\n  }\n  .PamPlayerProfileWrapper.skeleton .Section .SectionContent {\n    display: block;\n  }\n  .PamPlayerProfileWrapper.skeleton .Section .SectionContent .Field {\n    margin-bottom: 15px;\n  }\n  .PamPlayerProfileWrapper.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 PamPlayerProfileStyle0 = pamPlayerProfileCss;
+
+const PamPlayerProfile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fieldsState = {};
+        this.sendLoadedMessage = () => {
+            window.postMessage({ type: 'PROFILE_LOADED' });
+        };
+        this.sendValidMessage = () => {
+            window.postMessage({ type: 'PROFILE_VALIDITY', data: this.isSubmitButtonAvailable });
+        };
+        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 = () => {
+            delete this.data.contacts;
+            window.postMessage({ type: 'PROFILE_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 'PROFILE_DATA':
+                    this.data = message.data.data;
+                    this.resetState();
+                    this.skeletonLoading = false;
+                    break;
+                case 'PROFILE_SEND_DATA':
+                    this.sendData();
+                    break;
+            }
+        };
+        this.getData = () => {
+            const url = new URL(`api/v1/players/${this.userId}/player-identifiable-information`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve) => {
+                fetch(url.href, options)
+                    .then(res => {
+                    if (res.ok) {
+                        return res.json();
+                    }
+                    this.sendErrorNotification('errorMessageFetch');
+                })
+                    .then(res => {
+                    this.data = res.player;
+                    resolve();
+                });
+            });
+        };
+        this.buildFieldState = (isValid, initialValue, rule) => Object.assign({ 'isValid': isValid, 'initialValue': initialValue, 'rule': rule });
+        this.initData = () => {
+            const data = {};
+            ['externalPlayerId',
+                'affiliateMarker',
+                'personalInfo',
+                'communicationInfo',
+                'signupInfo',
+                'statusInfo',
+                'securityInfo',
+                'geographicInfo',
+                'playerInfo',
+                'contacts' // we need this because username is only sent in contacts section atm :(
+            ].forEach(key => data[key] = this.data[key]);
+            this.data = data;
+        };
+        this.updateState = (sectionKey, fieldKey) => (e) => {
+            this.data[sectionKey][fieldKey] = e.target.value;
+            const fieldState = this.fieldsState['data'][fieldKey];
+            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['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 url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionId', this.session);
+            headers.append('Content-Type', 'application/problem+json; charset=utf-8');
+            if (this.data.contacts)
+                delete this.data.contacts;
+            const reqParams = {
+                method: 'PUT',
+                headers,
+                body: JSON.stringify(this.data)
+            };
+            fetch(url, reqParams)
+                .then(res => {
+                if (!res.ok) {
+                    return this.sendErrorNotification('errorMessageUpdate');
+                }
+                this.sendSuccessNotification();
+                this.getData().then(() => this.resetState());
+            });
+        };
+        this.updateSubmitButtonStatus = () => {
+            this.isSubmitButtonAvailable = this.invalidFields === 0 && this.fieldsState.hasChanged;
+        };
+        this.editableField = (sectionKey, fieldKey, labelTranslationKey, errorTranslationKey) => {
+            const fieldState = this.fieldsState['data'][fieldKey];
+            const value = this.data[sectionKey][fieldKey];
+            if (fieldState) {
+                return (h("div", { class: `Field  ${fieldState.isValid ? '' : 'Invalid'}` }, h("label", null, translate(labelTranslationKey, this.lang)), h("input", { type: "text", value: value, onKeyUp: this.updateState(sectionKey, fieldKey) }), !fieldState.isValid &&
+                    h("p", { class: "Error" }, translate(errorTranslationKey, this.lang))));
+            }
+            else {
+                return null;
+            }
+        };
+        this.staticField = (value, labelTranslationKey) => {
+            if (value) {
+                return (h("div", { class: "Field Disabled" }, h("label", null, translate(labelTranslationKey, this.lang)), h("input", { type: "text", value: value, 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.dobFormat = 'DD/MM/YYYY';
+        this.isStandAlone = 'true';
+        this.limitStylingAppends = false;
+        this.skeletonLoading = true;
+        this.isSubmitButtonAvailable = false;
+        this.invalidFields = 0;
+        this.isMobile = isMobile(window.navigator.userAgent);
+    }
+    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.skeletonLoading = 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);
+    }
+    initEditableFieldsState() {
+        var _a, _b;
+        this.fieldsState['data'] = {};
+        this.fieldsState['hasChanged'] = false;
+        if ((_a = this.data.playerInfo) === null || _a === void 0 ? void 0 : _a.SecurityQuestion) {
+            this.fieldsState['data']['SecurityQuestion'] = this.buildFieldState(true, this.data.playerInfo.SecurityQuestion, (val) => val && val.length <= 120);
+        }
+        if ((_b = this.data.playerInfo) === null || _b === void 0 ? void 0 : _b.SecurityAnswer) {
+            this.fieldsState['data']['SecurityAnswer'] = this.buildFieldState(true, this.data.playerInfo.SecurityAnswer, (val) => val && val.length <= 120);
+        }
+    }
+    resetState() {
+        this.initData();
+        this.initEditableFieldsState();
+        this.invalidFields = 0;
+        this.isSubmitButtonAvailable = false;
+    }
+    render() {
+        return (h("div", { key: '0bfa140cc83e29e99e4af534700e5b009a88e9ac', ref: el => this.stylingContainer = el }, this.skeletonLoading
+            ? h("form", { class: "PamPlayerProfileWrapper skeleton" }, h("div", { class: "ReturnButton" }, h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, [...Array(6).keys()].map(() => h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" }))), h("div", { class: "CompoundField" }, h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" })), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" }))), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "auto", height: "20px" })))), h("section", { class: "ButtonsArea" }, h("div", { class: "SaveButton" }, h("ui-skeleton", { structure: "rectangle", width: "auto", height: "50px" }))))
+            : h("form", { class: `PamPlayerProfileWrapper ${this.isMobile ? 'Mobile' : ''}` }, h("div", { class: "ReturnButton", onClick: this.toggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('title', this.lang))), h("h2", { class: "HeaderText" }, translate('title', this.lang)), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, this.staticField(this.data.contacts.find(c => c.contatcType = 'Username').contactValue, 'username'), this.staticField(dayjs(this.data.personalInfo.birthDate).format(this.dobFormat), 'dateOfBirth'), this.staticField(this.data.personalInfo.firstName, 'firstName'), this.staticField(this.data.personalInfo.lastName, 'lastName'), this.editableField('playerInfo', 'SecurityQuestion', 'securityQuestion', 'securityQuestionError'), this.editableField('playerInfo', 'SecurityAnswer', 'securityAnswer', 'securityAnswerError'), h("div", { class: "CompoundField" }, this.staticField(this.data.personalInfo.title, 'playerTitle'), this.staticField(this.data.personalInfo.gender, 'gender')), this.staticField(this.data.communicationInfo.currency, 'currency'))), this.isStandAlone === 'true' &&
+                h("section", { class: "ButtonsArea" }, h("button", { class: `SaveButton ${this.isSubmitButtonAvailable ? '' : 'Disabled'}`, onClick: this.updateData }, translate('saveButton'))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingUrlChange"]
+    }; }
+};
+PamPlayerProfile.style = PamPlayerProfileStyle0;
+
+export { PamPlayerProfile as P };

package/dist/esm/pam-player-profile.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-d953d051.js';
+export { s as setNonce } from './index-d953d051.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["pam-player-profile_2",[[1,"pam-player-profile",{"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"],"dobFormat":[513,"dob-format"],"isStandAlone":[513,"is-stand-alone"],"limitStylingAppends":[32],"skeletonLoading":[32],"isSubmitButtonAvailable":[32],"invalidFields":[32],"isMobile":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
+});