@everymatrix/user-login 1.54.12 → 1.56.0

package/dist/esm/user-login.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h as h$2 } from './index-1918fa2a.js';
+import { r as registerInstance, h as h$2 } from './index-19313d5e.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
@@ -200,6 +200,63 @@ const translate$1 = (key, customLang, values) => {
     return translation;
 };
 
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
 /**
  * @license
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
@@ -215,7 +272,7 @@ function dashToCamelCase$1(dash) {
 
 const experimentalMap = {};
 
-function defineCustomElement(CustomElement, version = '24.6.4') {
+function defineCustomElement(CustomElement, version = '24.6.5') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;
@@ -13426,6 +13483,20 @@ class IronListAdapter {
     this.__resizeObserver.observe(this.scrollTarget);
     this.scrollTarget.addEventListener('scroll', () => this._scrollHandler());
 
+    const attachObserver = new ResizeObserver(([{ contentRect }]) => {
+      const isHidden = contentRect.width === 0 && contentRect.height === 0;
+      if (!isHidden && this.__scrollTargetHidden && this.scrollTarget.scrollTop !== this._scrollPosition) {
+        // When removing element from DOM, its scroll position is lost and
+        // virtualizer doesn't re-render when adding it to the DOM again.
+        // Restore scroll position when the scroll target becomes visible,
+        // which is the case e.g. when virtualizer is used inside a dialog.
+        this.scrollTarget.scrollTop = this._scrollPosition;
+      }
+
+      this.__scrollTargetHidden = isHidden;
+    });
+    attachObserver.observe(this.scrollTarget);
+
     this._scrollLineHeight = this._getScrollLineHeight();
     this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
@@ -21882,10 +21953,6 @@ const UserLogin = class {
          * Toggles visibility of the password field
          */
         this.isPasswordVisible = false;
-        /**
-         * Internal flag to prevent duplicate client styling appends
-         */
-        this.limitStylingAppends = false;
         /**
          * Stores error message from the API
          */
@@ -21899,27 +21966,6 @@ const UserLogin = class {
          */
         this.isLoginLoading = false;
         this.errorCode = '';
-        /**
-         * Apply inline client styling
-         */
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.appendChild(sheet);
-        };
-        /**
-         * Fetch and apply CSS from a provided URL
-         */
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.appendChild(cssFile); }, 1);
-            });
-        };
         /**
          * Fetch phone prefixes from the API
          */
@@ -22175,9 +22221,10 @@ const UserLogin = class {
      * @param newValue - new client styling
      * @param oldValue - previous client styling
      */
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     /**
      * Watch for changes in the client styling URL and fetch the new CSS
@@ -22185,9 +22232,11 @@ const UserLogin = class {
      * @param newValue - new client styling URL
      * @param oldValue - previous client styling URL
      */
-    handleStylingUrlChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStylingURL();
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     /**
      * Lifecycle method: Fetch translations on component load
@@ -22204,25 +22253,25 @@ const UserLogin = class {
      * Lifecycle method: Set up event listeners after the component is rendered
      */
     componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
         window.addEventListener('LoginCredentials', this.autofillCredentialsHandler);
         window.postMessage({ type: 'UserLoginDidLoad' });
     }
-    /**
-     * Lifecycle method: Apply client styling after the component renders
-     */
-    componentDidRender() {
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-    }
     /**
      * Lifecycle method: Clean up event listeners when the component is removed
      */
     disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
         window.removeEventListener('LoginCredentials', this.autofillCredentialsHandler);
     }
     /**
@@ -22267,25 +22316,25 @@ const UserLogin = class {
      * Render function
      */
     render() {
-        let visibilityIcon = h$2("span", { key: '08e1b988b208738091d8e78fa1f73eb3c58076ba', class: "InputIcon" }, this.isPasswordVisible &&
-            h$2("svg", { key: '5dfdfa39e8e2b3dbc84099a8496abf20382db924', 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$2("g", { key: '24b728bd380f3661f1c382888aa4f0084bfe04c7', transform: "translate(-110.856 -23.242)" }, h$2("circle", { key: 'c0267c20cdca0b96a0ceedad3f92c41e3b3b6071', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h$2("g", { key: '87875ad14720b3da54b3c94ce020d62cb6eee8c4', transform: "translate(117.499 27.37)" }, h$2("path", { key: '3c1dba505232ea8e94b90861cc659d5a536dd8a9', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h$2("path", { key: '8980532d12d0dfb5bf7a4334e478dbc801a47c0e', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h$2("g", { key: '996cd3f037a25e7e692a62e28f8bda18945291f8', transform: "translate(110.856 24.899)" }, h$2("path", { key: '39b27797893b81aa835163eeb70f7db8103033d4', 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$2("path", { key: '076267866a6e0791a906068c2ba5b9862f11ef6a', 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$2("rect", { key: 'cbeab68f4b831cedc7d57a68a35f3e0a979ec83a', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
-            h$2("svg", { key: 'b990b881b6fa53140440ac0646f36149b8111adf', 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$2("g", { key: 'c04390a04451b06ea6bb7e1ca7312d564e6e4b39', transform: "translate(-14.185 -27.832)" }, h$2("path", { key: '02123a609b24029bce696bfc98aa4f565ca12853', 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$2("circle", { key: 'e8ca3fd3f0dd3eef24071c0d13a874b04101a2c8', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
-        let userIdentification = h$2("div", { key: '252275c3e3b91c3e7fa995d824e4c6d3b1a4d4e0', class: "FormBox" }, h$2("div", { key: 'acc4edcaa9cfb7608bd0a81245895c7e59473310', class: "FormValue" }, this.loginByPhoneNumber === 'true'
+        let visibilityIcon = h$2("span", { key: '71afd6ceaadffb85628b778461b29de0902828ea', class: "InputIcon" }, this.isPasswordVisible &&
+            h$2("svg", { key: '6a225b596b01f40e27905815fd0d9ffba26cfdf0', 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$2("g", { key: 'c9a519cf32a8091f4c300a772d29962a082830a2', transform: "translate(-110.856 -23.242)" }, h$2("circle", { key: '66e1c978ceeb22f0e253043299afad694e81ad63', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h$2("g", { key: '119088e31332f37b4a5e7dc217076865367f3f0f', transform: "translate(117.499 27.37)" }, h$2("path", { key: '3c681ad519dd9c44a76d9a7492defa6090b10de2', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h$2("path", { key: '848eec923e9836a2afdb22c10e31880722303872', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h$2("g", { key: '9e4cba160d9616ebf07bafd444f75a88ce206727', transform: "translate(110.856 24.899)" }, h$2("path", { key: '5e10308f7dfb63ebcd9cc79a889bd294d350cc70', 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$2("path", { key: '8edfb9e3cd9a5311ff6110d8b3ee259b3b147948', 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$2("rect", { key: '49043741301adab184dc1d59991ef3b27b0ccf06', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
+            h$2("svg", { key: 'd2d81b2e62b82d727f3cf213e8648b1234756d24', 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$2("g", { key: 'c339af52be1114881a0b86c5cc123f7416cf93fc', transform: "translate(-14.185 -27.832)" }, h$2("path", { key: 'd2943c5428f9b1c614456174a9a61e2218a976c9', 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$2("circle", { key: '1eb8d4910f1e4cf0ef54c2c7e90c9c3682931c9c', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        let userIdentification = h$2("div", { key: '143c5be0c352d46e26842a815ed6a973121fd3f9', class: "FormBox" }, h$2("div", { key: '33f8723225e7d92f9be23787dc7ac596e68ef179', class: "FormValue" }, this.loginByPhoneNumber === 'true'
             ? h$2("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h$2("div", { class: "PhoneInputBox" }, h$2("div", { class: "PrefixBox" }, h$2("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), h$2("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPrefix', this.lang))), h$2("div", { class: "PhoneBox" }, h$2("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPhone', this.lang)))), !this.isValidUserPhone &&
                 h$2("p", { class: "InvalidField" }, translate$1('invalidField', this.lang)))
             : h$2("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h$2("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: this.handleInputChangePartial('user'), onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate$1('userEmail', this.lang)), !this.isValidUserEmail &&
-                h$2("p", { class: "InvalidField" }, translate$1('invalidField', this.lang))), h$2("div", { key: '3857740f5455b51c30028eda6bd18ab48badf07d', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h$2("input", { key: '94f24b493711ed60bb56570e75ad0f5151b770a0', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h$2("label", { key: '6aed12d32525695fdecde970846aeced269c6ada', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang)), !this.isValidPassword &&
-            h$2("p", { key: '49fd647b8d6bdcd58416aa8df6622d9fec2fd908', class: "InvalidField" }, translate$1('invalidField', this.lang))), this.passwordReset == 'true' &&
-            h$2("div", { key: '77e4d49f8d35131c7deb4cf0c4b7553c2c214917', class: "ForgotPassword" }, h$2("button", { key: '3d4578732ff4b2888d67ca502338b259f67cd6ab', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), h$2("button", { key: 'cbd21b5e3514c26f98a57ec6d331be8d013dbc96', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
+                h$2("p", { class: "InvalidField" }, translate$1('invalidField', this.lang))), h$2("div", { key: '9419d55bcd0ad2b4150230adffbc91ab78a659de', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h$2("input", { key: '6d19dad4378cf2017b23eb178afe965024959efd', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h$2("label", { key: 'd0de7cc9e8eda5a7394c4c9331187ffb624a4f52', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang)), !this.isValidPassword &&
+            h$2("p", { key: 'd50953d4f715cee928867a225e761e1e1f1c79d2', class: "InvalidField" }, translate$1('invalidField', this.lang))), this.passwordReset == 'true' &&
+            h$2("div", { key: '473140822bffab203e72484a412473b43c9489cb', class: "ForgotPassword" }, h$2("button", { key: '2a70704da11f44d41dd4a5cacef0cc9c16e502cd', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), h$2("button", { key: 'f7e805bd942e78cedaf13386e3c2c28d77ca838e', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
                 (this.loginByPhoneNumber === 'true' && (!this.isValidUserPhone || !this.userPhone || !this.userPrefix)) ||
                 !this.userPassword || !this.isValidPassword) || this.isLoginLoading, class: "SubmitCredentials", onClick: this.handleLogin }, translate$1('login', this.lang)), this.hasError &&
-            h$2("p", { key: 'bfc16dd160acda7ba5f57e861e013581a1703481', class: "CredentialsError" }, this.errorMessage)));
-        return h$2("section", { key: 'f283f2a8e61feac8ec3003cc88fe47cf450df66c', ref: el => this.stylingContainer = el }, userIdentification);
+            h$2("p", { key: '82d4a1726632e6f131f95c0ab90f92b76a6acbf4', class: "CredentialsError" }, this.errorMessage)));
+        return h$2("section", { key: 'dd20c1edeb5425b4173fe86dd339d46aff0884db', ref: el => this.stylingContainer = el }, userIdentification);
     }
     static get watchers() { return {
         "translationUrl": ["handleNewTranslations"],
-        "clientStyling": ["handleStylingChange"],
-        "clientStylingUrl": ["handleStylingUrlChange"]
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"]
     }; }
 };
 UserLogin.style = UserLoginStyle0;

package/dist/esm/user-login.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1918fa2a.js';
-export { s as setNonce } from './index-1918fa2a.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-19313d5e.js';
+export { s as setNonce } from './index-19313d5e.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"userPhoneRegex":[513,"user-phone-regex"],"userPhoneRegexOptions":[513,"user-phone-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"version":[513],"loginByPhoneNumber":[513,"login-by-phone-number"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"userPhone":[32],"userPrefix":[32],"isValidPassword":[32],"isValidUserPhone":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"hasError":[32],"userPrefixOptions":[32],"isLoginLoading":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}]]]], options);
+  return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"userPhoneRegex":[513,"user-phone-regex"],"userPhoneRegexOptions":[513,"user-phone-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"version":[513],"loginByPhoneNumber":[513,"login-by-phone-number"],"mbSource":[513,"mb-source"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"userPhone":[32],"userPrefix":[32],"isValidPassword":[32],"isValidUserPhone":[32],"isPasswordVisible":[32],"errorMessage":[32],"hasError":[32],"userPrefixOptions":[32],"isLoginLoading":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 });

package/dist/types/components/user-login/user-login.d.ts

@@ -88,10 +88,6 @@ export declare class UserLogin {
      * Toggles visibility of the password field
      */
     isPasswordVisible: boolean;
-    /**
-     * Internal flag to prevent duplicate client styling appends
-     */
-    private limitStylingAppends;
     /**
      * Stores error message from the API
      */
@@ -108,8 +104,10 @@ export declare class UserLogin {
      * Boolean for preventing user for clicking multiple times the login button
      */
     private isLoginLoading;
+    mbSource: string;
     private errorCode;
     private stylingContainer;
+    private stylingSubscription;
     updateLoginCredentialsEvent: CustomEvent;
     /**
      * Watch for changes in the translation URL and fetch new translations
@@ -121,14 +119,14 @@ export declare class UserLogin {
      * @param newValue - new client styling
      * @param oldValue - previous client styling
      */
-    handleStylingChange(newValue: string, oldValue: string): void;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
     /**
      * Watch for changes in the client styling URL and fetch the new CSS
      *
      * @param newValue - new client styling URL
      * @param oldValue - previous client styling URL
      */
-    handleStylingUrlChange(newValue: string, oldValue: string): void;
+    handleClientStylingUrlChange(newValue: any, oldValue: any): void;
     /**
      * Lifecycle method: Fetch translations on component load
      */
@@ -137,22 +135,10 @@ export declare class UserLogin {
      * Lifecycle method: Set up event listeners after the component is rendered
      */
     componentDidLoad(): void;
-    /**
-     * Lifecycle method: Apply client styling after the component renders
-     */
-    componentDidRender(): void;
     /**
      * Lifecycle method: Clean up event listeners when the component is removed
      */
     disconnectedCallback(): void;
-    /**
-     * Apply inline client styling
-     */
-    setClientStyling: () => void;
-    /**
-     * Fetch and apply CSS from a provided URL
-     */
-    setClientStylingURL: () => void;
     /**
      * Fetch phone prefixes from the API
      */

package/dist/types/components.d.ts

@@ -27,6 +27,7 @@ export namespace Components {
           * If set to true, login will be done by phone number, else by username/email
          */
         "loginByPhoneNumber": string;
+        "mbSource": string;
         /**
           * Regular expression for validating the password
          */
@@ -98,6 +99,7 @@ declare namespace LocalJSX {
           * If set to true, login will be done by phone number, else by username/email
          */
         "loginByPhoneNumber"?: string;
+        "mbSource"?: string;
         /**
           * Regular expression for validating the password
          */