@everymatrix/user-login 1.54.12 → 1.56.0

package/dist/cjs/{index-2f8c9e3a.js → index-a6009b28.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'user-login';
-const BUILD = /* user-login */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* user-login */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -874,9 +874,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f8c9e3a.js');
+const index = require('./index-a6009b28.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["user-login.cjs",[[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 index.bootstrapLazy([["user-login.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f8c9e3a.js');
+const index = require('./index-a6009b28.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
@@ -204,6 +204,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.
@@ -219,7 +276,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;
@@ -13430,6 +13487,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));
 
@@ -21886,10 +21957,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
          */
@@ -21903,27 +21970,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
          */
@@ -22179,9 +22225,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
@@ -22189,9 +22236,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
@@ -22208,25 +22257,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);
     }
     /**
@@ -22271,25 +22320,25 @@ const UserLogin = class {
      * Render function
      */
     render() {
-        let visibilityIcon = index.h("span", { key: '08e1b988b208738091d8e78fa1f73eb3c58076ba', class: "InputIcon" }, this.isPasswordVisible &&
-            index.h("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" }, index.h("g", { key: '24b728bd380f3661f1c382888aa4f0084bfe04c7', transform: "translate(-110.856 -23.242)" }, index.h("circle", { key: 'c0267c20cdca0b96a0ceedad3f92c41e3b3b6071', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), index.h("g", { key: '87875ad14720b3da54b3c94ce020d62cb6eee8c4', transform: "translate(117.499 27.37)" }, index.h("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)" }), index.h("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)" })), index.h("g", { key: '996cd3f037a25e7e692a62e28f8bda18945291f8', transform: "translate(110.856 24.899)" }, index.h("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)" }), index.h("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)" })), index.h("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 &&
-            index.h("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" }, index.h("g", { key: 'c04390a04451b06ea6bb7e1ca7312d564e6e4b39', transform: "translate(-14.185 -27.832)" }, index.h("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)" }), index.h("circle", { key: 'e8ca3fd3f0dd3eef24071c0d13a874b04101a2c8', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
-        let userIdentification = index.h("div", { key: '252275c3e3b91c3e7fa995d824e4c6d3b1a4d4e0', class: "FormBox" }, index.h("div", { key: 'acc4edcaa9cfb7608bd0a81245895c7e59473310', class: "FormValue" }, this.loginByPhoneNumber === 'true'
+        let visibilityIcon = index.h("span", { key: '71afd6ceaadffb85628b778461b29de0902828ea', class: "InputIcon" }, this.isPasswordVisible &&
+            index.h("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" }, index.h("g", { key: 'c9a519cf32a8091f4c300a772d29962a082830a2', transform: "translate(-110.856 -23.242)" }, index.h("circle", { key: '66e1c978ceeb22f0e253043299afad694e81ad63', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), index.h("g", { key: '119088e31332f37b4a5e7dc217076865367f3f0f', transform: "translate(117.499 27.37)" }, index.h("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)" }), index.h("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)" })), index.h("g", { key: '9e4cba160d9616ebf07bafd444f75a88ce206727', transform: "translate(110.856 24.899)" }, index.h("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)" }), index.h("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)" })), index.h("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 &&
+            index.h("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" }, index.h("g", { key: 'c339af52be1114881a0b86c5cc123f7416cf93fc', transform: "translate(-14.185 -27.832)" }, index.h("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)" }), index.h("circle", { key: '1eb8d4910f1e4cf0ef54c2c7e90c9c3682931c9c', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        let userIdentification = index.h("div", { key: '143c5be0c352d46e26842a815ed6a973121fd3f9', class: "FormBox" }, index.h("div", { key: '33f8723225e7d92f9be23787dc7ac596e68ef179', class: "FormValue" }, this.loginByPhoneNumber === 'true'
             ? index.h("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, index.h("div", { class: "PhoneInputBox" }, index.h("div", { class: "PrefixBox" }, index.h("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), index.h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('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.hasError ? 'FieldInvalid' : '') }, translate$1('userPhone', this.lang)))), !this.isValidUserPhone &&
                 index.h("p", { class: "InvalidField" }, translate$1('invalidField', this.lang)))
             : index.h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, index.h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: this.handleInputChangePartial('user'), onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), index.h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate$1('userEmail', this.lang)), !this.isValidUserEmail &&
-                index.h("p", { class: "InvalidField" }, translate$1('invalidField', this.lang))), index.h("div", { key: '3857740f5455b51c30028eda6bd18ab48badf07d', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, index.h("input", { key: '94f24b493711ed60bb56570e75ad0f5151b770a0', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), index.h("label", { key: '6aed12d32525695fdecde970846aeced269c6ada', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang)), !this.isValidPassword &&
-            index.h("p", { key: '49fd647b8d6bdcd58416aa8df6622d9fec2fd908', class: "InvalidField" }, translate$1('invalidField', this.lang))), this.passwordReset == 'true' &&
-            index.h("div", { key: '77e4d49f8d35131c7deb4cf0c4b7553c2c214917', class: "ForgotPassword" }, index.h("button", { key: '3d4578732ff4b2888d67ca502338b259f67cd6ab', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), index.h("button", { key: 'cbd21b5e3514c26f98a57ec6d331be8d013dbc96', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
+                index.h("p", { class: "InvalidField" }, translate$1('invalidField', this.lang))), index.h("div", { key: '9419d55bcd0ad2b4150230adffbc91ab78a659de', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, index.h("input", { key: '6d19dad4378cf2017b23eb178afe965024959efd', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), index.h("label", { key: 'd0de7cc9e8eda5a7394c4c9331187ffb624a4f52', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang)), !this.isValidPassword &&
+            index.h("p", { key: 'd50953d4f715cee928867a225e761e1e1f1c79d2', class: "InvalidField" }, translate$1('invalidField', this.lang))), this.passwordReset == 'true' &&
+            index.h("div", { key: '473140822bffab203e72484a412473b43c9489cb', class: "ForgotPassword" }, index.h("button", { key: '2a70704da11f44d41dd4a5cacef0cc9c16e502cd', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), index.h("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 &&
-            index.h("p", { key: 'bfc16dd160acda7ba5f57e861e013581a1703481', class: "CredentialsError" }, this.errorMessage)));
-        return index.h("section", { key: 'f283f2a8e61feac8ec3003cc88fe47cf450df66c', ref: el => this.stylingContainer = el }, userIdentification);
+            index.h("p", { key: '82d4a1726632e6f131f95c0ab90f92b76a6acbf4', class: "CredentialsError" }, this.errorMessage)));
+        return index.h("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/cjs/user-login.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f8c9e3a.js');
+const index = require('./index-a6009b28.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["user-login.cjs",[[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 index.bootstrapLazy([["user-login.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/user-login/user-login.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { getTranslations, translate } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import "@vaadin/combo-box";
 export class UserLogin {
     constructor() {
@@ -79,10 +80,6 @@ export class UserLogin {
          * 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
          */
@@ -96,27 +93,6 @@ export class UserLogin {
          */
         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
          */
@@ -372,9 +348,10 @@ export class UserLogin {
      * @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
@@ -382,9 +359,11 @@ export class UserLogin {
      * @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
@@ -401,25 +380,25 @@ export class UserLogin {
      * 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`, this.stylingSubscription);
+            }
+            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);
     }
     /**
@@ -464,20 +443,20 @@ export class UserLogin {
      * Render function
      */
     render() {
-        let visibilityIcon = h("span", { key: '08e1b988b208738091d8e78fa1f73eb3c58076ba', class: "InputIcon" }, this.isPasswordVisible &&
-            h("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("g", { key: '24b728bd380f3661f1c382888aa4f0084bfe04c7', transform: "translate(-110.856 -23.242)" }, h("circle", { key: 'c0267c20cdca0b96a0ceedad3f92c41e3b3b6071', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: '87875ad14720b3da54b3c94ce020d62cb6eee8c4', transform: "translate(117.499 27.37)" }, h("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("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("g", { key: '996cd3f037a25e7e692a62e28f8bda18945291f8', transform: "translate(110.856 24.899)" }, h("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("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("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("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("g", { key: 'c04390a04451b06ea6bb7e1ca7312d564e6e4b39', transform: "translate(-14.185 -27.832)" }, h("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("circle", { key: 'e8ca3fd3f0dd3eef24071c0d13a874b04101a2c8', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
-        let userIdentification = h("div", { key: '252275c3e3b91c3e7fa995d824e4c6d3b1a4d4e0', class: "FormBox" }, h("div", { key: 'acc4edcaa9cfb7608bd0a81245895c7e59473310', class: "FormValue" }, this.loginByPhoneNumber === 'true'
+        let visibilityIcon = h("span", { key: '71afd6ceaadffb85628b778461b29de0902828ea', class: "InputIcon" }, this.isPasswordVisible &&
+            h("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("g", { key: 'c9a519cf32a8091f4c300a772d29962a082830a2', transform: "translate(-110.856 -23.242)" }, h("circle", { key: '66e1c978ceeb22f0e253043299afad694e81ad63', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: '119088e31332f37b4a5e7dc217076865367f3f0f', transform: "translate(117.499 27.37)" }, h("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("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("g", { key: '9e4cba160d9616ebf07bafd444f75a88ce206727', transform: "translate(110.856 24.899)" }, h("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("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("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("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("g", { key: 'c339af52be1114881a0b86c5cc123f7416cf93fc', transform: "translate(-14.185 -27.832)" }, h("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("circle", { key: '1eb8d4910f1e4cf0ef54c2c7e90c9c3682931c9c', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        let userIdentification = h("div", { key: '143c5be0c352d46e26842a815ed6a973121fd3f9', class: "FormBox" }, h("div", { key: '33f8723225e7d92f9be23787dc7ac596e68ef179', class: "FormValue" }, this.loginByPhoneNumber === 'true'
             ? h("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h("div", { class: "PhoneInputBox" }, h("div", { class: "PrefixBox" }, h("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? '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.hasError ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)))), !this.isValidUserPhone &&
                 h("p", { class: "InvalidField" }, translate('invalidField', this.lang)))
             : h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: this.handleInputChangePartial('user'), onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
-                h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { key: '3857740f5455b51c30028eda6bd18ab48badf07d', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("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("label", { key: '6aed12d32525695fdecde970846aeced269c6ada', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
-            h("p", { key: '49fd647b8d6bdcd58416aa8df6622d9fec2fd908', class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
-            h("div", { key: '77e4d49f8d35131c7deb4cf0c4b7553c2c214917', class: "ForgotPassword" }, h("button", { key: '3d4578732ff4b2888d67ca502338b259f67cd6ab', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), h("button", { key: 'cbd21b5e3514c26f98a57ec6d331be8d013dbc96', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
+                h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { key: '9419d55bcd0ad2b4150230adffbc91ab78a659de', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("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("label", { key: 'd0de7cc9e8eda5a7394c4c9331187ffb624a4f52', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
+            h("p", { key: 'd50953d4f715cee928867a225e761e1e1f1c79d2', class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
+            h("div", { key: '473140822bffab203e72484a412473b43c9489cb', class: "ForgotPassword" }, h("button", { key: '2a70704da11f44d41dd4a5cacef0cc9c16e502cd', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), h("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('login', this.lang)), this.hasError &&
-            h("p", { key: 'bfc16dd160acda7ba5f57e861e013581a1703481', class: "CredentialsError" }, this.errorMessage)));
-        return h("section", { key: 'f283f2a8e61feac8ec3003cc88fe47cf450df66c', ref: el => this.stylingContainer = el }, userIdentification);
+            h("p", { key: '82d4a1726632e6f131f95c0ab90f92b76a6acbf4', class: "CredentialsError" }, this.errorMessage)));
+        return h("section", { key: 'dd20c1edeb5425b4173fe86dd339d46aff0884db', ref: el => this.stylingContainer = el }, userIdentification);
     }
     static get is() { return "user-login"; }
     static get encapsulation() { return "shadow"; }
@@ -769,6 +748,25 @@ export class UserLogin {
                 "attribute": "login-by-phone-number",
                 "reflect": true,
                 "defaultValue": "'false'"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mb-source",
+                "reflect": true
             }
         };
     }
@@ -782,7 +780,6 @@ export class UserLogin {
             "isValidPassword": {},
             "isValidUserPhone": {},
             "isPasswordVisible": {},
-            "limitStylingAppends": {},
             "errorMessage": {},
             "hasError": {},
             "userPrefixOptions": {},
@@ -795,10 +792,10 @@ export class UserLogin {
                 "methodName": "handleNewTranslations"
             }, {
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "clientStylingUrl",
-                "methodName": "handleStylingUrlChange"
+                "methodName": "handleClientStylingUrlChange"
             }];
     }
 }

package/dist/esm/{index-1918fa2a.js → index-19313d5e.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'user-login';
-const BUILD = /* user-login */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* user-login */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: true, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -852,9 +852,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-1918fa2a.js';
-export { s as setNonce } from './index-1918fa2a.js';
+import { b as bootstrapLazy } from './index-19313d5e.js';
+export { s as setNonce } from './index-19313d5e.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["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);
 };
 
 export { defineCustomElements };