@everymatrix/user-login 1.77.0 → 1.77.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/user-login.cjs.entry.js +24 -18
  2. package/dist/collection/components/user-login/user-login.css +1 -1
  3. package/dist/collection/components/user-login/user-login.js +23 -17
  4. package/dist/esm/user-login.entry.js +24 -18
  5. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/user-login/.stencil/tools/plugins/index.d.ts +1 -0
  6. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/user-login/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
  7. package/dist/types/components/user-login/user-login.d.ts +3 -0
  8. package/dist/user-login/user-login.entry.js +1 -1
  9. package/package.json +1 -1
package/dist/cjs/user-login.cjs.entry.js CHANGED
@@ -7095,7 +7095,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
7095
7095
  <div on-click="_scrollForward" part="forward-button" aria-hidden="true"></div>
7096
7096
  `}static get is(){return "vaadin-tabs"}}v(_h);
7097
7097
 
7098
- const userLoginCss = ":host{display:block;font-family:\"Roboto\", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:50px;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:\"\";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:\"\";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}";
7098
+ const userLoginCss = ":host{display:block;font-family:\"Roboto\", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:100%;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:\"\";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:\"\";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}";
7099
7099
  const UserLoginStyle0 = userLoginCss;
7100
7100
 
7101
7101
  const UserLogin = class {
@@ -7316,7 +7316,9 @@ const UserLogin = class {
7316
7316
  this.errorForFields[location] = !this.isValidUserEmail && inputValue.length > 3 ? true : false;
7317
7317
  break;
7318
7318
  case 'phone':
7319
- this.userPhone = inputValue;
7319
+ this.userPhone = inputValue.replace(/[^0-9]/g, "");
7320
+ if (this.inputUserPhoneReference)
7321
+ this.inputUserPhoneReference.value = this.userPhone;
7320
7322
  this.isValidUserPhone = this.validate('phone', this.userPhone);
7321
7323
  this.errorForFields[location] = !this.isValidUserPhone && inputValue.length > 3 ? true : false;
7322
7324
  break;
@@ -7625,26 +7627,30 @@ const UserLogin = class {
7625
7627
  !this.userPassword || !this.isValidPassword) || this.isLoginLoading || (this.version === 'gm17' && this.captchaData.isEnabled && !this.captchaData.token));
7626
7628
  return isDisabled;
7627
7629
  }
7628
- /**
7629
- * Render function
7630
- */
7631
- render() {
7632
- let visibilityIcon = index.h("span", { key: '04f73ce27b4fed3406cc973cc12a9c2f35bd489a', class: "InputIcon" }, this.isPasswordVisible &&
7633
- index.h("svg", { key: '6839b8f6f7bd184f35b10fa51aa56e8fdbd18ae5', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, index.h("g", { key: '891f11aced0e051f2461f9fcbaed5efae0966fc7', transform: "translate(-110.856 -23.242)" }, index.h("circle", { key: '8d5cc9be8aa3d9445e99ff6a3e9c1dce07c1cf3b', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), index.h("g", { key: '21fcc0afc83c964c4eb68f8d94a3c29cf5154167', transform: "translate(117.499 27.37)" }, index.h("path", { key: 'f64e15dfcf89201949b1e1511554d1eee2f8d67a', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), index.h("path", { key: '5a88944196eb4a2252ce411ddd183db01eaa0b7b', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), index.h("g", { key: 'a2cead4e1054533321d2c1b6557b9e7287cb247f', transform: "translate(110.856 24.899)" }, index.h("path", { key: '1b5a4fd2b937696a35c6940a1af507ef7b37ce80', class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), index.h("path", { key: '232f0a936ceb82c4fb1a731a75e5de3aa34a3747', class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), index.h("rect", { key: 'b03821d8a0dbce86a13df0976a3191e322af0cc7', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
7634
- index.h("svg", { key: '5b75e8792aba2d995b61d993a3b30268b0c91268', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, index.h("g", { key: 'bcedf871e76569eaeb9b8ead213a808e196fac32', transform: "translate(-14.185 -27.832)" }, index.h("path", { key: 'cb96b5ae0dc44b4b442052cdc691feb99ca559ed', class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), index.h("circle", { key: '4fb62aefcd739765327c9c07aae8bfed547a72e9', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
7635
- let userIdentification = index.h("div", { key: 'bd58b1479ca2470c305505c700316eb4e787295f', class: "FormBox" }, index.h("div", { key: '2fe9294c81e80e72d527d1288e175e74fd67b42a', class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
7630
+ renderVisibilityIcon() {
7631
+ return (index.h("span", { class: "InputIcon" }, this.isPasswordVisible &&
7632
+ index.h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, index.h("g", { transform: "translate(-110.856 -23.242)" }, index.h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), index.h("g", { transform: "translate(117.499 27.37)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), index.h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), index.h("g", { transform: "translate(110.856 24.899)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), index.h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), index.h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
7633
+ index.h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, index.h("g", { transform: "translate(-14.185 -27.832)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), index.h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" })))));
7634
+ }
7635
+ renderUserIdentification() {
7636
+ return (index.h("div", { class: "FormBox" }, index.h("div", { class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
7636
7637
  ? index.h("div", { class: (!this.isValidUserPhone && this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, index.h("div", { class: "PhoneInputBox" }, index.h("div", { class: "PrefixBox" }, this.isPrefixEditable === 'true'
7637
7638
  ? index.h("vaadin-combo-box", { items: this.phoneCodes, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') })
7638
- : index.h("div", { class: "UneditablePrefix" }, this.userPrefix), index.h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), index.h("div", { class: "PhoneBox" }, index.h("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), index.h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
7639
+ : index.h("div", { class: "UneditablePrefix" }, this.userPrefix), index.h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), index.h("div", { class: "PhoneBox" }, index.h("input", { type: "tel", placeholder: '', ref: (el) => this.inputUserPhoneReference = el, value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), index.h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
7639
7640
  index.h("p", { class: "CredentialsError" }, translate('userPhoneError', this.lang)))))
7640
7641
  : index.h("div", { class: (!this.isValidUserEmail && this.errorForFields['user']) ? 'InputBox InputInvalidBox' : 'InputBox' }, index.h("input", { type: "text", placeholder: '', value: this.userNameEmail, onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), index.h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail && this.errorForFields['user'] ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail && this.errorForFields['user'] &&
7641
- index.h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), index.h("div", { key: 'd9da3a78301d1d330e40603ada5184c5abea8a2b', class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, index.h("input", { key: '0e892152c13e6671bcc2eb9746e1c488c9654b2c', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), index.h("label", { key: 'f5972488f061e0dd80a493209b05e5cef4f69be3', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
7642
- index.h("p", { key: 'da182a16dba040bd94863a9399edf55f9aee4e85', class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
7643
- index.h("div", { key: '242e2aa16c1b83021f62684396346866fddfa454', class: "ForgotPassword" }, index.h("button", { key: 'f36317ac752544fd53cc77bd519b708fdb1bc0a6', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
7644
- index.h("slot", { key: 'c6289849f8733f0e04714c0c7187ffddb2cf3e39', name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
7645
- index.h("slot", { key: '1c9d38fe8d33930adb7eda485518c7886e88ff2c', name: "google" }), index.h("button", { key: 'b5e6a68ad8c035882f06769330ed9bfb376fd541', disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
7646
- index.h("p", { key: '75aedc3bc79aa1e1fc28407af74e24860fb7546a', class: "CredentialsError" }, this.errorMessage)));
7647
- return index.h("section", { key: '3285383c646c5e03e729c49c09d3767a5ed5a6a6', ref: el => this.stylingContainer = el }, userIdentification);
7642
+ index.h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), index.h("div", { class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, this.renderVisibilityIcon(), index.h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), index.h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
7643
+ index.h("p", { class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
7644
+ index.h("div", { class: "ForgotPassword" }, index.h("button", { onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
7645
+ index.h("slot", { name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
7646
+ index.h("slot", { name: "google" }), index.h("button", { disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
7647
+ index.h("p", { class: "CredentialsError" }, this.errorMessage))));
7648
+ }
7649
+ /**
7650
+ * Render function
7651
+ */
7652
+ render() {
7653
+ return index.h("section", { key: '2f02a21907b1b3729544c98cad98a5086614040d', ref: el => this.stylingContainer = el }, this.renderUserIdentification());
7648
7654
  }
7649
7655
  static get watchers() { return {
7650
7656
  "translationUrl": ["handleNewTranslations"],
package/dist/collection/components/user-login/user-login.css CHANGED
@@ -43,7 +43,7 @@ section {
43
43
  width: fit-content;
44
44
  }
45
45
  .InputBox .PhoneInputBox .PrefixBox .UneditablePrefix {
46
- height: 50px;
46
+ height: 100%;
47
47
  width: 100px;
48
48
  padding: 0 0 0 5px;
49
49
  align-content: center;
package/dist/collection/components/user-login/user-login.js CHANGED
@@ -220,7 +220,9 @@ export class UserLogin {
220
220
  this.errorForFields[location] = !this.isValidUserEmail && inputValue.length > 3 ? true : false;
221
221
  break;
222
222
  case 'phone':
223
- this.userPhone = inputValue;
223
+ this.userPhone = inputValue.replace(/[^0-9]/g, "");
224
+ if (this.inputUserPhoneReference)
225
+ this.inputUserPhoneReference.value = this.userPhone;
224
226
  this.isValidUserPhone = this.validate('phone', this.userPhone);
225
227
  this.errorForFields[location] = !this.isValidUserPhone && inputValue.length > 3 ? true : false;
226
228
  break;
@@ -529,26 +531,30 @@ export class UserLogin {
529
531
  !this.userPassword || !this.isValidPassword) || this.isLoginLoading || (this.version === 'gm17' && this.captchaData.isEnabled && !this.captchaData.token));
530
532
  return isDisabled;
531
533
  }
532
- /**
533
- * Render function
534
- */
535
- render() {
536
- let visibilityIcon = h("span", { key: '04f73ce27b4fed3406cc973cc12a9c2f35bd489a', class: "InputIcon" }, this.isPasswordVisible &&
537
- h("svg", { key: '6839b8f6f7bd184f35b10fa51aa56e8fdbd18ae5', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { key: '891f11aced0e051f2461f9fcbaed5efae0966fc7', transform: "translate(-110.856 -23.242)" }, h("circle", { key: '8d5cc9be8aa3d9445e99ff6a3e9c1dce07c1cf3b', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: '21fcc0afc83c964c4eb68f8d94a3c29cf5154167', transform: "translate(117.499 27.37)" }, h("path", { key: 'f64e15dfcf89201949b1e1511554d1eee2f8d67a', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { key: '5a88944196eb4a2252ce411ddd183db01eaa0b7b', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { key: 'a2cead4e1054533321d2c1b6557b9e7287cb247f', transform: "translate(110.856 24.899)" }, h("path", { key: '1b5a4fd2b937696a35c6940a1af507ef7b37ce80', class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { key: '232f0a936ceb82c4fb1a731a75e5de3aa34a3747', class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { key: 'b03821d8a0dbce86a13df0976a3191e322af0cc7', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
538
- h("svg", { key: '5b75e8792aba2d995b61d993a3b30268b0c91268', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { key: 'bcedf871e76569eaeb9b8ead213a808e196fac32', transform: "translate(-14.185 -27.832)" }, h("path", { key: 'cb96b5ae0dc44b4b442052cdc691feb99ca559ed', class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { key: '4fb62aefcd739765327c9c07aae8bfed547a72e9', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
539
- let userIdentification = h("div", { key: 'bd58b1479ca2470c305505c700316eb4e787295f', class: "FormBox" }, h("div", { key: '2fe9294c81e80e72d527d1288e175e74fd67b42a', class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
534
+ renderVisibilityIcon() {
535
+ return (h("span", { class: "InputIcon" }, this.isPasswordVisible &&
536
+ h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { transform: "translate(-110.856 -23.242)" }, h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { transform: "translate(117.499 27.37)" }, h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { transform: "translate(110.856 24.899)" }, h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
537
+ h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { transform: "translate(-14.185 -27.832)" }, h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" })))));
538
+ }
539
+ renderUserIdentification() {
540
+ return (h("div", { class: "FormBox" }, h("div", { class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
540
541
  ? h("div", { class: (!this.isValidUserPhone && this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h("div", { class: "PhoneInputBox" }, h("div", { class: "PrefixBox" }, this.isPrefixEditable === 'true'
541
542
  ? h("vaadin-combo-box", { items: this.phoneCodes, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') })
542
- : h("div", { class: "UneditablePrefix" }, this.userPrefix), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
543
+ : h("div", { class: "UneditablePrefix" }, this.userPrefix), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "tel", placeholder: '', ref: (el) => this.inputUserPhoneReference = el, value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
543
544
  h("p", { class: "CredentialsError" }, translate('userPhoneError', this.lang)))))
544
545
  : h("div", { class: (!this.isValidUserEmail && this.errorForFields['user']) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail && this.errorForFields['user'] ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail && this.errorForFields['user'] &&
545
- h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), h("div", { key: 'd9da3a78301d1d330e40603ada5184c5abea8a2b', class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { key: '0e892152c13e6671bcc2eb9746e1c488c9654b2c', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { key: 'f5972488f061e0dd80a493209b05e5cef4f69be3', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
546
- h("p", { key: 'da182a16dba040bd94863a9399edf55f9aee4e85', class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
547
- h("div", { key: '242e2aa16c1b83021f62684396346866fddfa454', class: "ForgotPassword" }, h("button", { key: 'f36317ac752544fd53cc77bd519b708fdb1bc0a6', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
548
- h("slot", { key: 'c6289849f8733f0e04714c0c7187ffddb2cf3e39', name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
549
- h("slot", { key: '1c9d38fe8d33930adb7eda485518c7886e88ff2c', name: "google" }), h("button", { key: 'b5e6a68ad8c035882f06769330ed9bfb376fd541', disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
550
- h("p", { key: '75aedc3bc79aa1e1fc28407af74e24860fb7546a', class: "CredentialsError" }, this.errorMessage)));
551
- return h("section", { key: '3285383c646c5e03e729c49c09d3767a5ed5a6a6', ref: el => this.stylingContainer = el }, userIdentification);
546
+ h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), h("div", { class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, this.renderVisibilityIcon(), h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
547
+ h("p", { class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
548
+ h("div", { class: "ForgotPassword" }, h("button", { onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
549
+ h("slot", { name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
550
+ h("slot", { name: "google" }), h("button", { disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
551
+ h("p", { class: "CredentialsError" }, this.errorMessage))));
552
+ }
553
+ /**
554
+ * Render function
555
+ */
556
+ render() {
557
+ return h("section", { key: '2f02a21907b1b3729544c98cad98a5086614040d', ref: el => this.stylingContainer = el }, this.renderUserIdentification());
552
558
  }
553
559
  static get is() { return "user-login"; }
554
560
  static get encapsulation() { return "shadow"; }
package/dist/esm/user-login.entry.js CHANGED
@@ -7091,7 +7091,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
7091
7091
  <div on-click="_scrollForward" part="forward-button" aria-hidden="true"></div>
7092
7092
  `}static get is(){return "vaadin-tabs"}}v(_h);
7093
7093
 
7094
- const userLoginCss = ":host{display:block;font-family:\"Roboto\", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:50px;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:\"\";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:\"\";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}";
7094
+ const userLoginCss = ":host{display:block;font-family:\"Roboto\", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:100%;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:\"\";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:\"\";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}";
7095
7095
  const UserLoginStyle0 = userLoginCss;
7096
7096
 
7097
7097
  const UserLogin = class {
@@ -7312,7 +7312,9 @@ const UserLogin = class {
7312
7312
  this.errorForFields[location] = !this.isValidUserEmail && inputValue.length > 3 ? true : false;
7313
7313
  break;
7314
7314
  case 'phone':
7315
- this.userPhone = inputValue;
7315
+ this.userPhone = inputValue.replace(/[^0-9]/g, "");
7316
+ if (this.inputUserPhoneReference)
7317
+ this.inputUserPhoneReference.value = this.userPhone;
7316
7318
  this.isValidUserPhone = this.validate('phone', this.userPhone);
7317
7319
  this.errorForFields[location] = !this.isValidUserPhone && inputValue.length > 3 ? true : false;
7318
7320
  break;
@@ -7621,26 +7623,30 @@ const UserLogin = class {
7621
7623
  !this.userPassword || !this.isValidPassword) || this.isLoginLoading || (this.version === 'gm17' && this.captchaData.isEnabled && !this.captchaData.token));
7622
7624
  return isDisabled;
7623
7625
  }
7624
- /**
7625
- * Render function
7626
- */
7627
- render() {
7628
- let visibilityIcon = h("span", { key: '04f73ce27b4fed3406cc973cc12a9c2f35bd489a', class: "InputIcon" }, this.isPasswordVisible &&
7629
- h("svg", { key: '6839b8f6f7bd184f35b10fa51aa56e8fdbd18ae5', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { key: '891f11aced0e051f2461f9fcbaed5efae0966fc7', transform: "translate(-110.856 -23.242)" }, h("circle", { key: '8d5cc9be8aa3d9445e99ff6a3e9c1dce07c1cf3b', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: '21fcc0afc83c964c4eb68f8d94a3c29cf5154167', transform: "translate(117.499 27.37)" }, h("path", { key: 'f64e15dfcf89201949b1e1511554d1eee2f8d67a', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { key: '5a88944196eb4a2252ce411ddd183db01eaa0b7b', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { key: 'a2cead4e1054533321d2c1b6557b9e7287cb247f', transform: "translate(110.856 24.899)" }, h("path", { key: '1b5a4fd2b937696a35c6940a1af507ef7b37ce80', class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { key: '232f0a936ceb82c4fb1a731a75e5de3aa34a3747', class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { key: 'b03821d8a0dbce86a13df0976a3191e322af0cc7', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
7630
- h("svg", { key: '5b75e8792aba2d995b61d993a3b30268b0c91268', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { key: 'bcedf871e76569eaeb9b8ead213a808e196fac32', transform: "translate(-14.185 -27.832)" }, h("path", { key: 'cb96b5ae0dc44b4b442052cdc691feb99ca559ed', class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { key: '4fb62aefcd739765327c9c07aae8bfed547a72e9', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
7631
- let userIdentification = h("div", { key: 'bd58b1479ca2470c305505c700316eb4e787295f', class: "FormBox" }, h("div", { key: '2fe9294c81e80e72d527d1288e175e74fd67b42a', class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
7626
+ renderVisibilityIcon() {
7627
+ return (h("span", { class: "InputIcon" }, this.isPasswordVisible &&
7628
+ h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { transform: "translate(-110.856 -23.242)" }, h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { transform: "translate(117.499 27.37)" }, h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { transform: "translate(110.856 24.899)" }, h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
7629
+ h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { transform: "translate(-14.185 -27.832)" }, h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" })))));
7630
+ }
7631
+ renderUserIdentification() {
7632
+ return (h("div", { class: "FormBox" }, h("div", { class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
7632
7633
  ? h("div", { class: (!this.isValidUserPhone && this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h("div", { class: "PhoneInputBox" }, h("div", { class: "PrefixBox" }, this.isPrefixEditable === 'true'
7633
7634
  ? h("vaadin-combo-box", { items: this.phoneCodes, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') })
7634
- : h("div", { class: "UneditablePrefix" }, this.userPrefix), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
7635
+ : h("div", { class: "UneditablePrefix" }, this.userPrefix), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "tel", placeholder: '', ref: (el) => this.inputUserPhoneReference = el, value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone && this.errorForFields['phone'] ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)), !this.isValidUserPhone && this.errorForFields['phone'] &&
7635
7636
  h("p", { class: "CredentialsError" }, translate('userPhoneError', this.lang)))))
7636
7637
  : h("div", { class: (!this.isValidUserEmail && this.errorForFields['user']) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail && this.errorForFields['user'] ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail && this.errorForFields['user'] &&
7637
- h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), h("div", { key: 'd9da3a78301d1d330e40603ada5184c5abea8a2b', class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { key: '0e892152c13e6671bcc2eb9746e1c488c9654b2c', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { key: 'f5972488f061e0dd80a493209b05e5cef4f69be3', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
7638
- h("p", { key: 'da182a16dba040bd94863a9399edf55f9aee4e85', class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
7639
- h("div", { key: '242e2aa16c1b83021f62684396346866fddfa454', class: "ForgotPassword" }, h("button", { key: 'f36317ac752544fd53cc77bd519b708fdb1bc0a6', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
7640
- h("slot", { key: 'c6289849f8733f0e04714c0c7187ffddb2cf3e39', name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
7641
- h("slot", { key: '1c9d38fe8d33930adb7eda485518c7886e88ff2c', name: "google" }), h("button", { key: 'b5e6a68ad8c035882f06769330ed9bfb376fd541', disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
7642
- h("p", { key: '75aedc3bc79aa1e1fc28407af74e24860fb7546a', class: "CredentialsError" }, this.errorMessage)));
7643
- return h("section", { key: '3285383c646c5e03e729c49c09d3767a5ed5a6a6', ref: el => this.stylingContainer = el }, userIdentification);
7638
+ h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), h("div", { class: (!this.isValidPassword && this.errorForFields['password']) ? 'InputBox InputInvalidBox' : 'InputBox' }, this.renderVisibilityIcon(), h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword && this.errorForFields['password'] ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword && this.errorForFields['password'] &&
7639
+ h("p", { class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
7640
+ h("div", { class: "ForgotPassword" }, h("button", { onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
7641
+ h("slot", { name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
7642
+ h("slot", { name: "google" }), h("button", { disabled: this.checkIsDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
7643
+ h("p", { class: "CredentialsError" }, this.errorMessage))));
7644
+ }
7645
+ /**
7646
+ * Render function
7647
+ */
7648
+ render() {
7649
+ return h("section", { key: '2f02a21907b1b3729544c98cad98a5086614040d', ref: el => this.stylingContainer = el }, this.renderUserIdentification());
7644
7650
  }
7645
7651
  static get watchers() { return {
7646
7652
  "translationUrl": ["handleNewTranslations"],
package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/user-login/.stencil/tools/plugins/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from "./vite-chunk-plugin";
2
2
  export * from "./stencil-clean-deps-plugin";
3
3
  export * from "./vite-clean-deps-plugin";
4
+ export * from "./lazy-load-chunk-plugin";
package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/user-login/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const lazyLoadChunkPlugin: () => {
2
+ name: string;
3
+ config(config: any): {
4
+ build: {
5
+ rollupOptions: {
6
+ output: {
7
+ manualChunks(id: any): any;
8
+ };
9
+ };
10
+ };
11
+ };
12
+ };
package/dist/types/components/user-login/user-login.d.ts CHANGED
@@ -91,6 +91,7 @@ export declare class UserLogin {
91
91
  private stylingContainer;
92
92
  private stylingSubscription;
93
93
  updateLoginCredentialsEvent: CustomEvent;
94
+ inputUserPhoneReference: HTMLInputElement;
94
95
  /**
95
96
  * Watch for changes in the translation URL and fetch new translations
96
97
  */
@@ -207,6 +208,8 @@ export declare class UserLogin {
207
208
  * Reset password
208
209
  */
209
210
  resetPassword: () => void;
211
+ renderVisibilityIcon(): any;
212
+ renderUserIdentification(): any;
210
213
  /**
211
214
  * Render function
212
215
  */
package/dist/user-login/user-login.entry.js CHANGED
@@ -6653,4 +6653,4 @@ jt("vaadin-tabs",A`
6653
6653
  </div>
6654
6654
 
6655
6655
  <div on-click="_scrollForward" part="forward-button" aria-hidden="true"></div>
6656
- `}static get is(){return"vaadin-tabs"}}g(bl);const gl=class{constructor(e){t(this,e),this.errorCode="",this.getPhoneCodes=()=>{const t=new URL(`${this.endpoint}/v1/player/operatorSupportedPhoneCodes`);return fetch(t.href).then((t=>t.json())).then((t=>t.phoneCodes.map((t=>({label:t,value:t}))))).catch((t=>console.log("Failed to fetch phone codes:",t)))},this.autofillCredentialsHandler=t=>{this.userNameEmail=t.detail.userNameEmail,this.userPassword=t.detail.userPassword,this.handleLogin()},this.userLoginGm17=async()=>{let t={"Content-Type":"application/json"};const e={contact:this.userNameEmail,password:this.userPassword};this.captchaData.isEnabled&&(t["X-Captcha-Response"]=this.captchaData.token);const i={method:"POST",headers:t,body:JSON.stringify(e)};try{const t=await fetch(`${this.endpoint}/api/v1/players/password-management/auth/password/verify`,i),e=await t.json(),{token:o}=e;if(!o)throw this.isLoginLoading=!1,new Error("Token not received from the API call.");await this.sendLegislationLogin(o)}catch(t){console.error(t),this.hasError=!0,this.isLoginLoading=!1,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)}},this.sendLegislationLogin=async t=>{const e={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({token:t,method:"login"})};try{const t=await fetch(`${this.endpoint}/api/v2/gm/legislation/login`,e),i=await t.json();if(!t.ok){const{message:t,errors:e}=i;throw this.isLoginLoading=!1,console.error(`Legislation login failed: ${t}`,e),new Error("Legislation login request failed.")}{const{sessionId:t,playerId:e}=i;t&&(this.isLoginLoading=!1,window.postMessage({type:"UserSessionID",session:t,userid:e},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"success",message:s("successMessage",this.lang)}},window.location.href),this.hasError=!1)}}catch(t){console.error(t),this.hasError=!0,this.isLoginLoading=!1,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)}},this.userLogin=async()=>{const t=new URL(`${this.endpoint}/v1/player/legislation/login`),e=new Headers;e.append("Content-Type","application/json");const i=JSON.stringify({username:"true"===this.loginByPhoneNumber?`${this.userPrefix} ${this.userPhone}`:this.userNameEmail,password:this.userPassword});fetch(t.href,{method:"POST",headers:e,body:i}).then((t=>t.json())).then((t=>{var e,i,o,r;if((null===(e=t.sessionBlockers)||void 0===e?void 0:e.includes("has-to-set-consents"))&&window.postMessage({type:"PlayerActions",gmversion:"gm16"},window.location.href),!0===(null==t?void 0:t.hasToSetPass))return this.hasError=!0,this.errorMessage=s("setUpPassowrd",this.lang),this.sendErrorNotification(s("setUpPassowrd",this.lang)),void window.postMessage({type:"HasToSetPass"},window.location.href);t.sessionId?(window.postMessage({type:"UserSessionID",session:t.sessionId,userid:t.userId},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"success",message:s("successMessage",this.lang)}},window.location.href),this.hasError=!1,((t,e={})=>{const i=new CustomEvent("track-custom-event",{detail:{type:"logged_in",data:e},bubbles:!0,composed:!0});document.dispatchEvent(i)})(0,{userId:t.userId})):(this.hasError=!0,this.errorCode=null!==(o=null===(i=null==t?void 0:t.thirdPartyResponse)||void 0===i?void 0:i.errorCode)&&void 0!==o?o:null==t?void 0:t.errorCode,this.errorMessage="GmErr_USER_AUTH_FAILED"===this.errorCode&&"true"===this.loginByPhoneNumber?s("AuthFailedPhoneNumber",this.lang):s(`${this.errorCode}`,this.lang)||(null===(r=null==t?void 0:t.thirdPartyResponse)||void 0===r?void 0:r.message)||(null==t?void 0:t.message)||s("genericError",this.lang),this.errorMessage&&(console.error(this.errorMessage),this.sendErrorNotification(this.errorMessage)))})).catch((t=>{console.error(t),this.hasError=!0,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)})).finally((()=>{this.isLoginLoading=!1}))},this.handleLogin=()=>{this.isLoginLoading=!0,this.debounce({gm16:this.userLogin,gm17:this.userLoginGm17}[this.version]||this.userLogin,850)(),this.dispatchUpdateLoginCredentialsEvent()},this.handleSubmit=t=>{"Enter"===t.key&&!this.checkIsDisabled()&&this.handleLogin()},this.handleInputChange=(t,e)=>{const i=t.target.value;switch(e){case"user":this.userNameEmail=i,this.isValidUserEmail=this.validate("user",this.userNameEmail),this.errorForFields[e]=!this.isValidUserEmail&&i.length>3;break;case"phone":this.userPhone=i,this.isValidUserPhone=this.validate("phone",this.userPhone),this.errorForFields[e]=!this.isValidUserPhone&&i.length>3;break;case"prefix":this.userPrefix=i,this.isValidUserPhone=this.validate("phone",this.userPhone),this.errorForFields[e]=!this.isValidUserPhone;break;case"password":this.userPassword=i,this.isValidPassword=this.validate("password",i),this.errorForFields[e]=!this.isValidPassword&&i.length>3}},this.handleInputChangePartial=t=>e=>this.handleInputChange(e,t),this.validate=(t,e)=>{let i;switch(t){case"user":return i=new RegExp(this.userEmailRegex,this.userEmailRegexOptions),i.test(e);case"phone":return i=new RegExp(this.userPhoneRegex,this.userPhoneRegexOptions),i.test(e)&&!!this.userPrefix;case"password":return i=new RegExp(this.passwordRegex,this.passwordRegexOptions),i.test(e)}},this.togglePassword=()=>{this.isPasswordVisible=!this.isPasswordVisible},this.resetPassword=()=>{window.postMessage({type:"NavForgotPassword"},window.location.href)},this.endpoint="",this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.passwordReset="false",this.userEmailRegex=void 0,this.userEmailRegexOptions="i",this.userPhoneRegex=void 0,this.userPhoneRegexOptions="",this.passwordRegex=void 0,this.passwordRegexOptions="",this.version="gm16",this.loginByPhoneNumber="false",this.defaultPrefix=void 0,this.isPrefixEditable="true",this.mbSource=void 0,this.userNameEmail="",this.userPassword="",this.isValidUserEmail=!0,this.userPhone="",this.userPrefix="",this.isValidPassword=!0,this.isValidUserPhone=!0,this.isPasswordVisible=!1,this.errorMessage="",this.errorForFields={},this.hasError=!1,this.phoneCodes=void 0,this.isLoginLoading=!1,this.captchaData={isEnabled:!0,token:"",provider:"",siteKey:""}}handleNewTranslations(){o(this.translationUrl)}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)}async componentWillLoad(){"true"===this.loginByPhoneNumber&&(this.defaultPrefix&&"false"===this.isPrefixEditable?(this.phoneCodes=[{label:this.defaultPrefix,value:this.defaultPrefix}],this.userPrefix=this.defaultPrefix):(this.phoneCodes=await this.getPhoneCodes(),this.defaultPrefix||"false"!==this.isPrefixEditable?this.defaultPrefix&&"true"===this.isPrefixEditable&&(this.userPrefix=this.defaultPrefix,this.phoneCodes.some((t=>t.value===this.defaultPrefix))||this.phoneCodes.push({label:this.defaultPrefix,value:this.defaultPrefix})):this.userPrefix=this.phoneCodes[0].value)),this.translationUrl.length>2&&await o(this.translationUrl),"gm17"===this.version&&this.getLoginConfig().then((()=>{this.appendCaptchaScript()})).catch((t=>{console.error(t),this.hasError=!0,this.errorMessage=s("configError",this.lang),this.sendErrorNotification(this.errorMessage)}))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))),window.addEventListener("LoginCredentials",this.autofillCredentialsHandler),window.postMessage({type:"UserLoginDidLoad"})}getLoginConfig(){const t=new URL(`${this.endpoint}/api/v1/players/password-management/auth/password/config`);return new Promise(((e,i)=>{fetch(t.href).then((t=>{if(!t.ok)throw new Error(`HTTP error! Status: ${t.status}`);return t.json()})).then((t=>{const{captcha:i}=t;i&&"string"==typeof i.provider&&(i.provider=i.provider.toLowerCase()),this.captchaData=Object.assign({},i),e()})).catch((t=>{console.error("Error fetching login configuration:",t),i(t)}))}))}handleCaptcha(){const{isEnabled:t,provider:e,siteKey:i}=this.captchaData;t&&["cloudflare","google"].includes(e)&&("cloudflare"===e?window.turnstile.render("#turnstileContainer",{sitekey:i,theme:"light",callback:this.captchaCallback.bind(this)}):"google"===e&&window.grecaptcha.ready((()=>{window.grecaptcha.render("googleContainer",{sitekey:i,callback:this.captchaCallback.bind(this),theme:"light"})})))}captchaCallback(t){this.captchaData.token=t,this.captchaData=Object.assign({},this.captchaData)}appendCaptchaScript(){const{isEnabled:t,provider:e}=this.captchaData;if(!t)return;const i=document.createElement("script");"cloudflare"===e?i.src="https://challenges.cloudflare.com/turnstile/v0/api.js":"google"===e&&(i.src="https://www.google.com/recaptcha/api.js"),i.onload=this.handleCaptcha.bind(this),document.head.appendChild(i)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),window.removeEventListener("LoginCredentials",this.autofillCredentialsHandler)}sendErrorNotification(t){window.postMessage({type:"HasError",error:t},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"error",message:t}},window.location.href)}debounce(t,e){let i;return function(...o){clearTimeout(i),i=setTimeout((()=>{t.apply(this,o)}),e)}}dispatchUpdateLoginCredentialsEvent(){this.hasError||(this.updateLoginCredentialsEvent=new CustomEvent("UpdateLoginCredentials",{bubbles:!0,detail:{userNameEmail:this.userNameEmail,userPassword:this.userPassword}}),window.dispatchEvent(this.updateLoginCredentialsEvent))}checkIsDisabled(){return Boolean("true"!==this.loginByPhoneNumber&&(!this.isValidUserEmail||!this.userNameEmail)||"true"===this.loginByPhoneNumber&&(!this.isValidUserPhone||!this.userPhone||!this.userPrefix)||!this.userPassword||!this.isValidPassword||this.isLoginLoading||"gm17"===this.version&&this.captchaData.isEnabled&&!this.captchaData.token)}render(){let t=e("span",{key:"04f73ce27b4fed3406cc973cc12a9c2f35bd489a",class:"InputIcon"},this.isPasswordVisible&&e("svg",{key:"6839b8f6f7bd184f35b10fa51aa56e8fdbd18ae5",onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.844",height:"12.887",viewBox:"0 0 18.844 12.887"},e("g",{key:"891f11aced0e051f2461f9fcbaed5efae0966fc7",transform:"translate(-110.856 -23.242)"},e("circle",{key:"8d5cc9be8aa3d9445e99ff6a3e9c1dce07c1cf3b",class:"PasswordVisibilityIcon",cx:"0.05",cy:"0.05",r:"0.05",transform:"translate(121.017 31.148)"}),e("g",{key:"21fcc0afc83c964c4eb68f8d94a3c29cf5154167",transform:"translate(117.499 27.37)"},e("path",{key:"f64e15dfcf89201949b1e1511554d1eee2f8d67a",class:"PasswordVisibilityIcon",d:"M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z",transform:"translate(-142.164 -39.123)"}),e("path",{key:"5a88944196eb4a2252ce411ddd183db01eaa0b7b",class:"PasswordVisibilityIcon",d:"M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z",transform:"translate(-136.413 -42.068)"})),e("g",{key:"a2cead4e1054533321d2c1b6557b9e7287cb247f",transform:"translate(110.856 24.899)"},e("path",{key:"1b5a4fd2b937696a35c6940a1af507ef7b37ce80",class:"PasswordVisibilityIcon",d:"M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z",transform:"translate(-110.856 -33.157)"}),e("path",{key:"232f0a936ceb82c4fb1a731a75e5de3aa34a3747",class:"PasswordVisibilityIcon",d:"M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z",transform:"translate(-130.743 -29.617)"})),e("rect",{key:"b03821d8a0dbce86a13df0976a3191e322af0cc7",class:"PasswordVisibilityIcon",width:"0.972",height:"15.861",rx:"0.486",transform:"translate(114.827 23.858) rotate(-39.315)"}))),!this.isPasswordVisible&&e("svg",{key:"5b75e8792aba2d995b61d993a3b30268b0c91268",onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility PasswordVisible",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.843",height:"10.5",viewBox:"0 0 18.843 10.5"},e("g",{key:"bcedf871e76569eaeb9b8ead213a808e196fac32",transform:"translate(-14.185 -27.832)"},e("path",{key:"cb96b5ae0dc44b4b442052cdc691feb99ca559ed",class:"PasswordVisibilityIcon",d:"M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z",transform:"translate(0)"}),e("circle",{key:"4fb62aefcd739765327c9c07aae8bfed547a72e9",class:"PasswordVisibilityIcon",cx:"2.779",cy:"2.779",r:"2.779",transform:"translate(20.827 30.303)"})))),i=e("div",{key:"bd58b1479ca2470c305505c700316eb4e787295f",class:"FormBox"},e("div",{key:"2fe9294c81e80e72d527d1288e175e74fd67b42a",class:"FormValue",onKeyDown:this.handleSubmit},"true"===this.loginByPhoneNumber?e("div",{class:!this.isValidUserPhone&&this.hasError?"InputBox InputInvalidBox":"InputBox "},e("div",{class:"PhoneInputBox"},e("div",{class:"PrefixBox"},"true"===this.isPrefixEditable?e("vaadin-combo-box",{items:this.phoneCodes,value:this.userPrefix,onChange:this.handleInputChangePartial("prefix")}):e("div",{class:"UneditablePrefix"},this.userPrefix),e("label",{class:(this.userPrefix?"FieldFilledIn":"")+" "+(!this.isValidUserPhone&&this.errorForFields.phone?"FieldInvalid":"")},s("userPrefix",this.lang))),e("div",{class:"PhoneBox"},e("input",{type:"text",placeholder:"",value:this.userPhone,onFocus:this.handleInputChangePartial("phone"),onInput:this.handleInputChangePartial("phone"),autocapitalize:"none",required:!0}),e("label",{class:(this.userPhone?"FieldFilledIn":"")+" "+(!this.isValidUserPhone&&this.errorForFields.phone?"FieldInvalid":"")},s("userPhone",this.lang)),!this.isValidUserPhone&&this.errorForFields.phone&&e("p",{class:"CredentialsError"},s("userPhoneError",this.lang))))):e("div",{class:!this.isValidUserEmail&&this.errorForFields.user?"InputBox InputInvalidBox":"InputBox"},e("input",{type:"text",placeholder:"",value:this.userNameEmail,onInput:this.handleInputChangePartial("user"),autocapitalize:"none",required:!0}),e("label",{class:(this.userNameEmail?"FieldFilledIn":"")+" "+(!this.isValidUserEmail&&this.errorForFields.user?"FieldInvalid":"")},s("userEmail",this.lang)),!this.isValidUserEmail&&this.errorForFields.user&&e("p",{class:"CredentialsError"},s("userEmailError",this.lang))),e("div",{key:"d9da3a78301d1d330e40603ada5184c5abea8a2b",class:!this.isValidPassword&&this.errorForFields.password?"InputBox InputInvalidBox":"InputBox"},t,e("input",{key:"0e892152c13e6671bcc2eb9746e1c488c9654b2c",type:this.isPasswordVisible?"text":"password",placeholder:"",value:this.userPassword,onInput:this.handleInputChangePartial("password"),autocapitalize:"none",required:!0}),e("label",{key:"f5972488f061e0dd80a493209b05e5cef4f69be3",class:(this.userPassword?"FieldFilledIn":"")+" "+(!this.isValidPassword&&this.errorForFields.password?"FieldInvalid":"")},s("password",this.lang)),!this.isValidPassword&&this.errorForFields.password&&e("p",{key:"da182a16dba040bd94863a9399edf55f9aee4e85",class:"CredentialsError"},s("userPasswordError",this.lang))),"true"==this.passwordReset&&e("div",{key:"242e2aa16c1b83021f62684396346866fddfa454",class:"ForgotPassword"},e("button",{key:"f36317ac752544fd53cc77bd519b708fdb1bc0a6",onClick:this.resetPassword},s("forgotPassword",this.lang))),this.captchaData.isEnabled&&"cloudflare"===this.captchaData.provider&&e("slot",{key:"c6289849f8733f0e04714c0c7187ffddb2cf3e39",name:"turnstile"}),this.captchaData.isEnabled&&"google"===this.captchaData.provider&&e("slot",{key:"1c9d38fe8d33930adb7eda485518c7886e88ff2c",name:"google"}),e("button",{key:"b5e6a68ad8c035882f06769330ed9bfb376fd541",disabled:this.checkIsDisabled(),class:"SubmitCredentials",onClick:this.handleLogin},s("login",this.lang)),this.hasError&&e("p",{key:"75aedc3bc79aa1e1fc28407af74e24860fb7546a",class:"CredentialsError"},this.errorMessage)));return e("section",{key:"3285383c646c5e03e729c49c09d3767a5ed5a6a6",ref:t=>this.stylingContainer=t},i)}static get watchers(){return{translationUrl:["handleNewTranslations"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"]}}};gl.style=':host{display:block;font-family:"Roboto", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:50px;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:"";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:"";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}';export{gl as user_login}
6656
+ `}static get is(){return"vaadin-tabs"}}g(bl);const gl=class{constructor(e){t(this,e),this.errorCode="",this.getPhoneCodes=()=>{const t=new URL(`${this.endpoint}/v1/player/operatorSupportedPhoneCodes`);return fetch(t.href).then((t=>t.json())).then((t=>t.phoneCodes.map((t=>({label:t,value:t}))))).catch((t=>console.log("Failed to fetch phone codes:",t)))},this.autofillCredentialsHandler=t=>{this.userNameEmail=t.detail.userNameEmail,this.userPassword=t.detail.userPassword,this.handleLogin()},this.userLoginGm17=async()=>{let t={"Content-Type":"application/json"};const e={contact:this.userNameEmail,password:this.userPassword};this.captchaData.isEnabled&&(t["X-Captcha-Response"]=this.captchaData.token);const i={method:"POST",headers:t,body:JSON.stringify(e)};try{const t=await fetch(`${this.endpoint}/api/v1/players/password-management/auth/password/verify`,i),e=await t.json(),{token:o}=e;if(!o)throw this.isLoginLoading=!1,new Error("Token not received from the API call.");await this.sendLegislationLogin(o)}catch(t){console.error(t),this.hasError=!0,this.isLoginLoading=!1,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)}},this.sendLegislationLogin=async t=>{const e={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({token:t,method:"login"})};try{const t=await fetch(`${this.endpoint}/api/v2/gm/legislation/login`,e),i=await t.json();if(!t.ok){const{message:t,errors:e}=i;throw this.isLoginLoading=!1,console.error(`Legislation login failed: ${t}`,e),new Error("Legislation login request failed.")}{const{sessionId:t,playerId:e}=i;t&&(this.isLoginLoading=!1,window.postMessage({type:"UserSessionID",session:t,userid:e},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"success",message:s("successMessage",this.lang)}},window.location.href),this.hasError=!1)}}catch(t){console.error(t),this.hasError=!0,this.isLoginLoading=!1,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)}},this.userLogin=async()=>{const t=new URL(`${this.endpoint}/v1/player/legislation/login`),e=new Headers;e.append("Content-Type","application/json");const i=JSON.stringify({username:"true"===this.loginByPhoneNumber?`${this.userPrefix} ${this.userPhone}`:this.userNameEmail,password:this.userPassword});fetch(t.href,{method:"POST",headers:e,body:i}).then((t=>t.json())).then((t=>{var e,i,o,r;if((null===(e=t.sessionBlockers)||void 0===e?void 0:e.includes("has-to-set-consents"))&&window.postMessage({type:"PlayerActions",gmversion:"gm16"},window.location.href),!0===(null==t?void 0:t.hasToSetPass))return this.hasError=!0,this.errorMessage=s("setUpPassowrd",this.lang),this.sendErrorNotification(s("setUpPassowrd",this.lang)),void window.postMessage({type:"HasToSetPass"},window.location.href);t.sessionId?(window.postMessage({type:"UserSessionID",session:t.sessionId,userid:t.userId},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"success",message:s("successMessage",this.lang)}},window.location.href),this.hasError=!1,((t,e={})=>{const i=new CustomEvent("track-custom-event",{detail:{type:"logged_in",data:e},bubbles:!0,composed:!0});document.dispatchEvent(i)})(0,{userId:t.userId})):(this.hasError=!0,this.errorCode=null!==(o=null===(i=null==t?void 0:t.thirdPartyResponse)||void 0===i?void 0:i.errorCode)&&void 0!==o?o:null==t?void 0:t.errorCode,this.errorMessage="GmErr_USER_AUTH_FAILED"===this.errorCode&&"true"===this.loginByPhoneNumber?s("AuthFailedPhoneNumber",this.lang):s(`${this.errorCode}`,this.lang)||(null===(r=null==t?void 0:t.thirdPartyResponse)||void 0===r?void 0:r.message)||(null==t?void 0:t.message)||s("genericError",this.lang),this.errorMessage&&(console.error(this.errorMessage),this.sendErrorNotification(this.errorMessage)))})).catch((t=>{console.error(t),this.hasError=!0,this.errorMessage=s("genericError",this.lang),this.sendErrorNotification(this.errorMessage)})).finally((()=>{this.isLoginLoading=!1}))},this.handleLogin=()=>{this.isLoginLoading=!0,this.debounce({gm16:this.userLogin,gm17:this.userLoginGm17}[this.version]||this.userLogin,850)(),this.dispatchUpdateLoginCredentialsEvent()},this.handleSubmit=t=>{"Enter"===t.key&&!this.checkIsDisabled()&&this.handleLogin()},this.handleInputChange=(t,e)=>{const i=t.target.value;switch(e){case"user":this.userNameEmail=i,this.isValidUserEmail=this.validate("user",this.userNameEmail),this.errorForFields[e]=!this.isValidUserEmail&&i.length>3;break;case"phone":this.userPhone=i.replace(/[^0-9]/g,""),this.inputUserPhoneReference&&(this.inputUserPhoneReference.value=this.userPhone),this.isValidUserPhone=this.validate("phone",this.userPhone),this.errorForFields[e]=!this.isValidUserPhone&&i.length>3;break;case"prefix":this.userPrefix=i,this.isValidUserPhone=this.validate("phone",this.userPhone),this.errorForFields[e]=!this.isValidUserPhone;break;case"password":this.userPassword=i,this.isValidPassword=this.validate("password",i),this.errorForFields[e]=!this.isValidPassword&&i.length>3}},this.handleInputChangePartial=t=>e=>this.handleInputChange(e,t),this.validate=(t,e)=>{let i;switch(t){case"user":return i=new RegExp(this.userEmailRegex,this.userEmailRegexOptions),i.test(e);case"phone":return i=new RegExp(this.userPhoneRegex,this.userPhoneRegexOptions),i.test(e)&&!!this.userPrefix;case"password":return i=new RegExp(this.passwordRegex,this.passwordRegexOptions),i.test(e)}},this.togglePassword=()=>{this.isPasswordVisible=!this.isPasswordVisible},this.resetPassword=()=>{window.postMessage({type:"NavForgotPassword"},window.location.href)},this.endpoint="",this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.passwordReset="false",this.userEmailRegex=void 0,this.userEmailRegexOptions="i",this.userPhoneRegex=void 0,this.userPhoneRegexOptions="",this.passwordRegex=void 0,this.passwordRegexOptions="",this.version="gm16",this.loginByPhoneNumber="false",this.defaultPrefix=void 0,this.isPrefixEditable="true",this.mbSource=void 0,this.userNameEmail="",this.userPassword="",this.isValidUserEmail=!0,this.userPhone="",this.userPrefix="",this.isValidPassword=!0,this.isValidUserPhone=!0,this.isPasswordVisible=!1,this.errorMessage="",this.errorForFields={},this.hasError=!1,this.phoneCodes=void 0,this.isLoginLoading=!1,this.captchaData={isEnabled:!0,token:"",provider:"",siteKey:""}}handleNewTranslations(){o(this.translationUrl)}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)}async componentWillLoad(){"true"===this.loginByPhoneNumber&&(this.defaultPrefix&&"false"===this.isPrefixEditable?(this.phoneCodes=[{label:this.defaultPrefix,value:this.defaultPrefix}],this.userPrefix=this.defaultPrefix):(this.phoneCodes=await this.getPhoneCodes(),this.defaultPrefix||"false"!==this.isPrefixEditable?this.defaultPrefix&&"true"===this.isPrefixEditable&&(this.userPrefix=this.defaultPrefix,this.phoneCodes.some((t=>t.value===this.defaultPrefix))||this.phoneCodes.push({label:this.defaultPrefix,value:this.defaultPrefix})):this.userPrefix=this.phoneCodes[0].value)),this.translationUrl.length>2&&await o(this.translationUrl),"gm17"===this.version&&this.getLoginConfig().then((()=>{this.appendCaptchaScript()})).catch((t=>{console.error(t),this.hasError=!0,this.errorMessage=s("configError",this.lang),this.sendErrorNotification(this.errorMessage)}))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))),window.addEventListener("LoginCredentials",this.autofillCredentialsHandler),window.postMessage({type:"UserLoginDidLoad"})}getLoginConfig(){const t=new URL(`${this.endpoint}/api/v1/players/password-management/auth/password/config`);return new Promise(((e,i)=>{fetch(t.href).then((t=>{if(!t.ok)throw new Error(`HTTP error! Status: ${t.status}`);return t.json()})).then((t=>{const{captcha:i}=t;i&&"string"==typeof i.provider&&(i.provider=i.provider.toLowerCase()),this.captchaData=Object.assign({},i),e()})).catch((t=>{console.error("Error fetching login configuration:",t),i(t)}))}))}handleCaptcha(){const{isEnabled:t,provider:e,siteKey:i}=this.captchaData;t&&["cloudflare","google"].includes(e)&&("cloudflare"===e?window.turnstile.render("#turnstileContainer",{sitekey:i,theme:"light",callback:this.captchaCallback.bind(this)}):"google"===e&&window.grecaptcha.ready((()=>{window.grecaptcha.render("googleContainer",{sitekey:i,callback:this.captchaCallback.bind(this),theme:"light"})})))}captchaCallback(t){this.captchaData.token=t,this.captchaData=Object.assign({},this.captchaData)}appendCaptchaScript(){const{isEnabled:t,provider:e}=this.captchaData;if(!t)return;const i=document.createElement("script");"cloudflare"===e?i.src="https://challenges.cloudflare.com/turnstile/v0/api.js":"google"===e&&(i.src="https://www.google.com/recaptcha/api.js"),i.onload=this.handleCaptcha.bind(this),document.head.appendChild(i)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),window.removeEventListener("LoginCredentials",this.autofillCredentialsHandler)}sendErrorNotification(t){window.postMessage({type:"HasError",error:t},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"error",message:t}},window.location.href)}debounce(t,e){let i;return function(...o){clearTimeout(i),i=setTimeout((()=>{t.apply(this,o)}),e)}}dispatchUpdateLoginCredentialsEvent(){this.hasError||(this.updateLoginCredentialsEvent=new CustomEvent("UpdateLoginCredentials",{bubbles:!0,detail:{userNameEmail:this.userNameEmail,userPassword:this.userPassword}}),window.dispatchEvent(this.updateLoginCredentialsEvent))}checkIsDisabled(){return Boolean("true"!==this.loginByPhoneNumber&&(!this.isValidUserEmail||!this.userNameEmail)||"true"===this.loginByPhoneNumber&&(!this.isValidUserPhone||!this.userPhone||!this.userPrefix)||!this.userPassword||!this.isValidPassword||this.isLoginLoading||"gm17"===this.version&&this.captchaData.isEnabled&&!this.captchaData.token)}renderVisibilityIcon(){return e("span",{class:"InputIcon"},this.isPasswordVisible&&e("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.844",height:"12.887",viewBox:"0 0 18.844 12.887"},e("g",{transform:"translate(-110.856 -23.242)"},e("circle",{class:"PasswordVisibilityIcon",cx:"0.05",cy:"0.05",r:"0.05",transform:"translate(121.017 31.148)"}),e("g",{transform:"translate(117.499 27.37)"},e("path",{class:"PasswordVisibilityIcon",d:"M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z",transform:"translate(-142.164 -39.123)"}),e("path",{class:"PasswordVisibilityIcon",d:"M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z",transform:"translate(-136.413 -42.068)"})),e("g",{transform:"translate(110.856 24.899)"},e("path",{class:"PasswordVisibilityIcon",d:"M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z",transform:"translate(-110.856 -33.157)"}),e("path",{class:"PasswordVisibilityIcon",d:"M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z",transform:"translate(-130.743 -29.617)"})),e("rect",{class:"PasswordVisibilityIcon",width:"0.972",height:"15.861",rx:"0.486",transform:"translate(114.827 23.858) rotate(-39.315)"}))),!this.isPasswordVisible&&e("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility PasswordVisible",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.843",height:"10.5",viewBox:"0 0 18.843 10.5"},e("g",{transform:"translate(-14.185 -27.832)"},e("path",{class:"PasswordVisibilityIcon",d:"M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z",transform:"translate(0)"}),e("circle",{class:"PasswordVisibilityIcon",cx:"2.779",cy:"2.779",r:"2.779",transform:"translate(20.827 30.303)"}))))}renderUserIdentification(){return e("div",{class:"FormBox"},e("div",{class:"FormValue",onKeyDown:this.handleSubmit},"true"===this.loginByPhoneNumber?e("div",{class:!this.isValidUserPhone&&this.hasError?"InputBox InputInvalidBox":"InputBox "},e("div",{class:"PhoneInputBox"},e("div",{class:"PrefixBox"},"true"===this.isPrefixEditable?e("vaadin-combo-box",{items:this.phoneCodes,value:this.userPrefix,onChange:this.handleInputChangePartial("prefix")}):e("div",{class:"UneditablePrefix"},this.userPrefix),e("label",{class:(this.userPrefix?"FieldFilledIn":"")+" "+(!this.isValidUserPhone&&this.errorForFields.phone?"FieldInvalid":"")},s("userPrefix",this.lang))),e("div",{class:"PhoneBox"},e("input",{type:"tel",placeholder:"",ref:t=>this.inputUserPhoneReference=t,value:this.userPhone,onFocus:this.handleInputChangePartial("phone"),onInput:this.handleInputChangePartial("phone"),autocapitalize:"none",required:!0}),e("label",{class:(this.userPhone?"FieldFilledIn":"")+" "+(!this.isValidUserPhone&&this.errorForFields.phone?"FieldInvalid":"")},s("userPhone",this.lang)),!this.isValidUserPhone&&this.errorForFields.phone&&e("p",{class:"CredentialsError"},s("userPhoneError",this.lang))))):e("div",{class:!this.isValidUserEmail&&this.errorForFields.user?"InputBox InputInvalidBox":"InputBox"},e("input",{type:"text",placeholder:"",value:this.userNameEmail,onInput:this.handleInputChangePartial("user"),autocapitalize:"none",required:!0}),e("label",{class:(this.userNameEmail?"FieldFilledIn":"")+" "+(!this.isValidUserEmail&&this.errorForFields.user?"FieldInvalid":"")},s("userEmail",this.lang)),!this.isValidUserEmail&&this.errorForFields.user&&e("p",{class:"CredentialsError"},s("userEmailError",this.lang))),e("div",{class:!this.isValidPassword&&this.errorForFields.password?"InputBox InputInvalidBox":"InputBox"},this.renderVisibilityIcon(),e("input",{type:this.isPasswordVisible?"text":"password",placeholder:"",value:this.userPassword,onInput:this.handleInputChangePartial("password"),autocapitalize:"none",required:!0}),e("label",{class:(this.userPassword?"FieldFilledIn":"")+" "+(!this.isValidPassword&&this.errorForFields.password?"FieldInvalid":"")},s("password",this.lang)),!this.isValidPassword&&this.errorForFields.password&&e("p",{class:"CredentialsError"},s("userPasswordError",this.lang))),"true"==this.passwordReset&&e("div",{class:"ForgotPassword"},e("button",{onClick:this.resetPassword},s("forgotPassword",this.lang))),this.captchaData.isEnabled&&"cloudflare"===this.captchaData.provider&&e("slot",{name:"turnstile"}),this.captchaData.isEnabled&&"google"===this.captchaData.provider&&e("slot",{name:"google"}),e("button",{disabled:this.checkIsDisabled(),class:"SubmitCredentials",onClick:this.handleLogin},s("login",this.lang)),this.hasError&&e("p",{class:"CredentialsError"},this.errorMessage)))}render(){return e("section",{key:"2f02a21907b1b3729544c98cad98a5086614040d",ref:t=>this.stylingContainer=t},this.renderUserIdentification())}static get watchers(){return{translationUrl:["handleNewTranslations"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"]}}};gl.style=':host{display:block;font-family:"Roboto", sans-serif}section{height:100%;width:100%;background-position:center;background-size:cover}.FormValue{width:100%}.FormBox{height:100%;display:flex;position:relative;background:none;border:none;justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:100%;border-bottom:2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .PhoneInputBox{display:flex;flex-direction:row}.InputBox .PhoneInputBox .PhoneBox{position:relative;width:100%}.InputBox .PhoneInputBox .PrefixBox{position:relative;width:fit-content}.InputBox .PhoneInputBox .PrefixBox .UneditablePrefix{height:100%;width:100px;padding:0 0 0 5px;align-content:center;background:var(--emw--color-gray-100, #e6e6e6);border-radius:var(--emw--border-radius-medium, 10px)}.InputBox.InputInvalidBox .PasswordVisibilityIcon{fill:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox.InputInvalidBox::after{content:"";height:2px;width:100%;transition:width 0.6s linear;background:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}.InputBox::after{content:"";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E))}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));font-size:var(--emw--font-size-medium, 16px);pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:var(--emw--font-size-medium, 16px);padding:0 35px 0 5px;color:var(--emw--registration-typography, var(--emw--color-typography, #000000));box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}vaadin-combo-box:focus-within~label,label.FieldFilledIn{top:-10px;font-size:var(--emw--font-size-x-small, 16px)}.ForgotPassword button{margin:-10px 0 17px;font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.SubmitCredentials{display:block;margin:0 auto;outline:none;cursor:pointer;background:var(--emw--color-primary, #0E5924);border-radius:var(--emw--button-border-radius, 10px);padding:10px 20px;font-size:var(--emw--font-size-large, 20px);font-family:var(--emw--button-typography);color:var(--emw--button-text-color, #FFFFFF)}.SubmitCredentials:disabled{background:var(--emw--color-primary, #0E5924);opacity:0.4;cursor:default}.Register{font-size:var(--emw--font-size-medium, 16px);color:var(--emw--registration-typography, var(--emw--color-typography, #FFFFFF));text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px)}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839));font-size:var(--emw--font-size-x-small, 12px);padding:0 0 20px 0;margin:0}.CredentialsError input{color:var(--emfw-w-color-error, var(--emw--color-red, #FD2839))}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}';export{gl as user_login}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/user-login",
3
- "version": "1.77.0",
3
+ "version": "1.77.2",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",