@everymatrix/general-input 1.90.6 → 1.90.8

package/dist/cjs/checkbox-group-input_14.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b546c2c.js');
+const index = require('./index-7a4b2771.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
@@ -378,6 +378,124 @@ const validateID = (id) => {
 
 const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
+/**
+ * @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) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  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
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
+ */
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
+
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
+  }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain] && cacheStyleObject[domain].sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
+}
+
 const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}";
 const CheckboxGroupInputStyle0 = checkboxGroupInputCss;
 
@@ -387,11 +505,6 @@ const CheckboxGroupInput = class {
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
         this.value = null;
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.defaultValue = '';
@@ -402,16 +515,17 @@ const CheckboxGroupInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.selectedValues = [];
         this.showCheckboxes = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -443,16 +557,17 @@ const CheckboxGroupInput = class {
             this.showTooltip = false;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.inputReference = this.element.shadowRoot.querySelector('input');
         // For now this input has no validation. Send isValid as true immediately.
         //@TODO: add validation logic to it, if business reason arises.
@@ -489,14 +604,14 @@ const CheckboxGroupInput = class {
         return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
     }
     render() {
-        return index.h("div", { key: '9985f4050655bc2233090f63abb0e22f2fe0b556', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9922e45ae7ee74b137ffc8552b3d714b7e3b1f59', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: 'f18bae7c3ee6df76edcde75924eb1ad51a227443', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
-            index.h("img", { key: '3dc2ce07e4d5f8de7ed4707b5e140fb4752ca86b', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: 'd55f25f75aa20007ff58cf45b6632517f49b6c00', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (index.h("vaadin-checkbox-group", { key: '210c3cc2868a07a403494e04336c4f3091eea0e4', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
+        return index.h("div", { key: '342900ae923094f2746fd43917743d01efba942e', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8f3b470274047b355741b438a4e15c7c46504f5a', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: 'c7a74f9da877304f4d71607d58eba90dd0a29de7', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
+            index.h("img", { key: '75d807ad544e043a2e3beed46bf0c7dfa2125324', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: '4b17e1e613c7561fb3c99f334926544ef2ba787a', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (index.h("vaadin-checkbox-group", { key: '9a8d573a7cb48bb2d68cceec5f39f1e0886ea05f', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
                 this.selectedValues = event.detail.value;
             } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "selectedValues": ["setValue"],
         "emitValue": ["emitValueHandler"]
@@ -513,11 +628,6 @@ const CheckboxInput = class {
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
         this.value = '';
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.defaultValue = '';
@@ -527,14 +637,15 @@ const CheckboxInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -559,16 +670,17 @@ const CheckboxInput = class {
             this.showTooltip = false;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.inputReference = this.vaadinCheckbox.querySelector('input');
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -603,10 +715,10 @@ const CheckboxInput = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: '80ed581cec5bb009ea5ea009f11c6453fe24ef7b', class: `checkbox__wrapper  ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: '42d793f607af77435f629218f9bdac7736522bc3', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: 'ce3870810ede8f3905fd8c07c0892ab0d909bab5', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
+        return (index.h("div", { key: 'a8d8bf6aa2001b6aee44d728a198244819ae169e', class: `checkbox__wrapper  ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: '13a5589a78bef4277922535e59c5718d36b1f318', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: '008bb9a318c914b4b40e80b15080f7f174cc1262', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -5997,11 +6109,6 @@ const DateInput = class {
             const date = parse(inputValue, this.dateFormat, new Date());
             return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.handleDocumentIdUpdate = (e) => {
             if (this.name !== CONSTANTS.BIRTHDATE) {
                 return;
@@ -6088,9 +6195,9 @@ const DateInput = class {
         this.emitOnClick = false;
         this.enableSouthAfricanMode = undefined;
         this.enableManualDateInput = false;
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
     get formattedValue() {
@@ -6099,9 +6206,10 @@ const DateInput = class {
         const parsedDate = parse(this.value, 'yyyy-MM-dd', new Date());
         return format(parsedDate, this.dateFormat);
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -6139,17 +6247,18 @@ const DateInput = class {
         this.minDate = parse(((_a = this.validation.min) === null || _a === void 0 ? void 0 : _a.toString()) || '', 'yyyy-MM-dd', new Date());
         this.maxDate = parse(((_b = this.validation.max) === null || _b === void 0 ? void 0 : _b.toString()) || '', 'yyyy-MM-dd', new Date());
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
         var _a;
+        this.handleClientStyling();
         this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
         this.inputReference = this.element.shadowRoot.querySelector('input');
         if (this.datePicker) {
@@ -6304,12 +6413,12 @@ const DateInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'f8011520dee6f11203da18cc27a6f278283daace', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e1e21a234b5f20f05a5c2d6eb38095bb50748ad6', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '8dbd7ecb2e8fc686afc02a15a247f5f78484ec22', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: '40b5106d0b80799cd81b154889461fa5378264b8', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: 'cd96dd3bb68896ea44d5071d783a7a2e2d75738f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: '971aeba271d68264bb9ff23b86bed878699d81b1', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("div", { key: 'ffff8be16fb22a41ea8c5168a79e40b9f410c63b', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '60da1ad0bc4cc7757e6f1096866667a97bd146b5', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '450b4638efa34f4490035b0d99b0b186f053a2d0', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: '421875a710bb4508e3218d28bf2c28dcd0e9793b', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: '33a6fed8057a84cb648f94a318c3ec0b1e495fff', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: 'd91fcd13e1ae384b67b6d478834b65136ab77b77', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"],
         "enableSouthAfricanMode": ["handleCustomRegistrationChange"]
@@ -6344,11 +6453,6 @@ const EmailInput = class {
             this.errorMessage = this.setErrorMessage();
             this.touched = true;
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -6360,14 +6464,15 @@ const EmailInput = class {
         this.emitValue = undefined;
         this.isDuplicateInput = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -6402,16 +6507,17 @@ const EmailInput = class {
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.isValid = this.setValidity();
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -6457,11 +6563,11 @@ const EmailInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '723df8f3a6e8c57fe19082400971daf50f5c981d', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '581d6e02b63d1c659ae44424518f64db450d5365', class: 'email__wrapper--flex' }, index.h("label", { key: '11e6a848f6f04903989b3ab2075865f6e279c087', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73e11520cffbddda1a2aeb4b560e7f4cf456e2fb', class: 'email__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'e8571ce14b9b98311daf1712ebde7d6da9b5a6a6', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'dd05ef0b4d906598c6d5775a78ccbdc9ea81cb8c', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '0d2d41207f8274d8c6f69143131265ef5b458689', class: 'email__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'f852525fe8d8b695e638fdd83e8b0c2c20d98771', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'd6a6dec4e76ba1fbe15bed09f82cecde12cabe1a', class: 'email__wrapper--flex' }, index.h("label", { key: '4498ae1bac287cb80544c4d743afad2ec678e3bd', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e54d1258e48f54304a553cffb83466e4a4fadb4c', class: 'email__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '29d7b95f22c8cb70d505f74a7ea18284faa908ee', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '08754b178e395f26c1d8a61ff667b91df3fb0ec7', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '3024a57f5d0897f34013eb4397d78babc2333192', class: 'email__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -13135,32 +13241,6 @@ const GeneralInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.registrationWidgetLoaded = index.createEvent(this, "registrationWidgetLoaded", 7);
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.host.shadowRoot.prepend(sheet);
-        };
-        this.setStreamStyling = (domain) => {
-            if (window.emMessageBus) {
-                const sheet = document.createElement('style');
-                this.stylingSubscription = window.emMessageBus.subscribe(domain, (data) => {
-                    sheet.innerHTML = data;
-                    this.clientStyling = data;
-                    this.host.shadowRoot.prepend(sheet);
-                });
-            }
-        };
-        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;
-                this.clientStyling = data;
-                setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
-            });
-        };
         this.handleClick = (event) => {
             if (this.emitOnClick) {
                 event.stopPropagation();
@@ -13197,15 +13277,17 @@ const GeneralInput = class {
         this.enableManualDateInput = false;
         this.pinAttemptsExceeded = undefined;
         this.mbSource = undefined;
-        this.limitStylingAppends = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
-    handleStylingUrlChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStylingURL();
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     connectedCallback() {
         if (this.translationUrl) {
@@ -13216,51 +13298,50 @@ const GeneralInput = class {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.registrationWidgetLoaded.emit();
         window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
-        if (!this.limitStylingAppends && this.host) {
-            if (window.emMessageBus != undefined) {
-                this.setStreamStyling(`${this.mbSource}.Style`);
-            }
-            else {
-                if (this.clientStyling)
-                    this.setClientStyling();
-                if (this.clientStylingUrl)
-                    this.setClientStylingURL();
-                this.limitStylingAppends = true;
-            }
+    }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
+        if (this.clientStyling)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        if (this.clientStylingUrl)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
     }
     renderInput() {
         var _a;
         switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
             case 'text':
                 if (this.haspostalcodelookup && this.name === 'PostalCode') {
-                    return index.h("postalcode-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, postalcodelength: this.postalcodelength, addresses: this.addresses, ignoreCountry: this.ignoreCountry });
+                    return index.h("postalcode-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, postalcodelength: this.postalcodelength, addresses: this.addresses, ignoreCountry: this.ignoreCountry, "mb-source": this.mbSource });
                 }
                 else {
-                    return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup, "enable-south-african-mode": this.enableSouthAfricanMode });
+                    return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup, "enable-south-african-mode": this.enableSouthAfricanMode, "mb-source": this.mbSource });
                 }
             case 'email':
-                return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
             case 'number':
-                return index.h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
             case 'checkbox':
-                return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
+                return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, "mb-source": this.mbSource });
             case 'checkboxgroup':
-                return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
+                return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "mb-source": this.mbSource });
             case 'togglecheckbox':
-                return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "emit-on-click": this.emitOnClick });
+                return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "emit-on-click": this.emitOnClick, "mb-source": this.mbSource });
             case 'datetime':
-                return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick, "enable-south-african-mode": this.enableSouthAfricanMode, "enable-manual-date-input": this.enableManualDateInput });
+                return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick, "enable-south-african-mode": this.enableSouthAfricanMode, "enable-manual-date-input": this.enableManualDateInput, "mb-source": this.mbSource });
             case 'password':
-                return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "enable-south-african-mode": this.enableSouthAfricanMode });
+                return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "enable-south-african-mode": this.enableSouthAfricanMode, "mb-source": this.mbSource });
             case 'radio':
-                return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
+                return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, "mb-source": this.mbSource });
             case 'tel':
-                return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
             case 'dropdown':
-                return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "mb-source": this.mbSource });
             case 'twofa':
                 return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
             case 'label':
@@ -13275,12 +13356,12 @@ const GeneralInput = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7a7805c641082de9c5da4859187765002ab6f32d', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
+        return (index.h(index.Host, { key: '12e3e43442ba3fd4a47bbc5c05456eb019405b1e', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
-        "clientStylingUrl": ["handleStylingUrlChange"]
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
     }; }
 };
 GeneralInput.style = GeneralInputStyle0;
@@ -13312,11 +13393,6 @@ const NumberInput = class {
             this.errorMessage = this.setErrorMessage();
             this.touched = true;
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -13327,14 +13403,15 @@ const NumberInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13362,16 +13439,17 @@ const NumberInput = class {
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.isValid = this.setValidity();
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -13412,11 +13490,11 @@ const NumberInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'aea370172d0e55d32dc665a1c340c734334e1caf', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '10e16d10b956c5a647bc68ecffbc2eb0b06fa92a', class: 'number__wrapper--flex' }, index.h("label", { key: '0827d47c7278c6fdf8ebdd1dff03b91c39be6812', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'cb868d01e8555f5e3333240f54d86f0a56641d0f', class: 'number__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '1aa2b16b59f4bfd4b1dadf2641ec6cb4cfc251bf', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '365b70a2eb333878d367d1d414ee0e296c91b3ec', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'a8639df7ef1e98807a7daffc9da4afd347b1c292', class: 'number__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'bd11140dc6c8ddb6b800d4fe6544df733c5157c4', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c8318c687bc471fc225b9aba52686e38ecb400de', class: 'number__wrapper--flex' }, index.h("label", { key: '7eaf64057ef71b07a0defc1e372fd85baab2bd68', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '99f4151f50a7fb0abb9a8e53bacc8c8bd303d659', class: 'number__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '875d6284697dc06ac05c682509856faeade3d8be', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'f1f563567cde4a744c68e27ab91a3d795f596be6', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '0226f04a059fd8763822483de42bd7e647040bf3', class: 'number__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -13465,11 +13543,6 @@ const PasswordInput = class {
             this.showPopup = true;
             this.calculateComplexity(this.value);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -13484,17 +13557,18 @@ const PasswordInput = class {
         this.hidePasswordComplexity = false;
         this.clientStyling = '';
         this.enableSouthAfricanMode = undefined;
+        this.mbSource = undefined;
         this.isValid = undefined;
         this.errorMessage = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.passwordComplexity = undefined;
         this.showPopup = undefined;
         this.value = '';
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13555,16 +13629,17 @@ const PasswordInput = class {
             this.showTooltip = false;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.inputReference = this.element.shadowRoot.querySelector('input');
         this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
         this.passwordButton.tabIndex = -1;
@@ -13671,8 +13746,8 @@ const PasswordInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'fe895585dd908f75eee4ba797dc9c02b237bed7f', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '844bdb3dab98e62cc5d92a761b85adcdc44831d0', class: 'password__wrapper--flex' }, index.h("label", { key: '28041267a6df666e7df3660a907f995eff092ae1', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '79c300643134802f04d8f909fe7bb3895911c88a', class: 'password__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '43ae58549e42ba59054162c25887ec36eb826aaa', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '0edcfed0ea65666537240f531e5239bd5b11181e', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: 'c8aeba074e66b771d745194fec535aa0b82de6d8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
+        return index.h("div", { key: '18213d251639938165f3e4ad58bdc904fb953fe2', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '092c431b178682d0006cf6ad5c14b0a7e6fb5569', class: 'password__wrapper--flex' }, index.h("label", { key: '64c101b7d70305ecf09735234d902a6b33823551', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '189929eefa1caf71a1be39f0d663eef914d241d5', class: 'password__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '95ee0d824b5be14ab4e62fc0b5f1731fe6ca5775', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'bf85dde83305233c566b1c50d0286548ba0f48a5', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: '3acbe164ff532bcfcd9e4a237a6f352df0cfdc2d', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
             this.showPopup &&
             !this.hidePasswordComplexity &&
             !this.isDuplicateInput &&
@@ -13682,7 +13757,7 @@ const PasswordInput = class {
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "value": ["valueChanged"],
         "emitValue": ["emitValueHandler"]
@@ -13832,11 +13907,6 @@ const PostalCodeInput = class {
                 targetInput.focus();
             }
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.handleOutsideClick = (event) => {
             if (!this.openAddressDropdown)
                 return;
@@ -13862,9 +13932,9 @@ const PostalCodeInput = class {
         this.postalcodelength = undefined;
         this.addresses = undefined;
         this.ignoreCountry = false;
+        this.mbSource = undefined;
         this.isValid = undefined;
         this.errorMessage = '';
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.selectedCountryCode = '';
         this.currentPostalCode = '';
@@ -13873,9 +13943,10 @@ const PostalCodeInput = class {
         this.refreshTrigger = 0;
         this.isFetchingAddresses = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -13936,19 +14007,22 @@ const PostalCodeInput = class {
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
-    componentDidRender() {
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
-        }
-    }
     componentWillLoad() {
         if (this.defaultValue) {
             this.value = this.defaultValue;
         }
     }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
     componentDidLoad() {
+        this.handleClientStyling();
         if (this.defaultValue) {
             this.valueHandler({ name: this.name, value: this.value });
         }
@@ -14040,10 +14114,10 @@ const PostalCodeInput = class {
         let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
             this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
         let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
-        return (index.h("div", { key: 'e358dddfc4b20b0847d03e3f12ff637922470105', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b806cac9ad62480a1be6bf802528c60c79804e94', class: 'text__wrapper--flex' }, index.h("label", { key: '4fb327989e8b828559c01601eea47bdd58da4bd3', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '6c293495a8935db477cbcac2eb9102bffeb85ddb', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: '848bb5b44d834c4f0e4a78cfebef0ecf1b88fd2e', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '7f6195e5cfc5bfabc9854ec6acc19c1e52e70f1b', class: 'input__text-wrapper' }, index.h("input", { key: '4369b4a99016a7aebbb396bdda35c31d92e4d557', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '0e3c0fcb974d2f3dae76f9afdbf173fcc25d258f', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: '1c644f87f2617180e6356c724d72b6d3fc8e472e', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: 'f2a7b8133908441a3cf67eb48928a2d61d17e32f', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: 'c0cb29f7d174ca8981c8b9dfd2ee9b972b0fd1ea', class: "postalcode__loading-spinner" }, index.h("div", { key: '76f17cb0a440f7ed9cc8de3620b55136549586e6', class: "loading-spinner" }), index.h("span", { key: 'e10c4177fb0f21f142fd3120177e450413687cf3' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
+        return (index.h("div", { key: 'f0dda39cf9a02d53213848926908c0cb39d1cd3f', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '5e1c51af264392d2be986e305e6526310f55f40b', class: 'text__wrapper--flex' }, index.h("label", { key: 'c12c45d88bdf42aeb6be505d473ab0f55da2be87', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7b93a75f19590b445227fa1a64c90fd20c0afd5d', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: '504004a13595694307c1e3450b69982150dc55fd', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '19de66fd72fd0a6befe3bbaebb6c8f99ec5f850b', class: 'input__text-wrapper' }, index.h("input", { key: '78cd4229ed5104518b991df0bc6bf527df2ec3e2', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '6b9e307d59fb9fed93f4df6c07a091d299844c62', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: 'ecb7892a9a8d967540d8fd013518ae19498fcd48', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: 'a5ef3f81a85207a821964e23b21aaf783be807cc', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: '338c17e484721efb387e608f3ce4416a0e47b8af', class: "postalcode__loading-spinner" }, index.h("div", { key: '7638cea4fba975e3a27d4cb00bce217129bd0750', class: "loading-spinner" }), index.h("span", { key: 'b59a8a9c3d7ecf209a68717346d1d29062994f79' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: '212a74fed94b3ee089aed5c9afb544966b5f11cd', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: '4f66e97dd811b9917c92ff4bcbf236817ac57933', class: 'text__error-message' }, this.errorMessage)));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"],
         "addresses": ["handleAddresses"]
@@ -14059,11 +14133,6 @@ const RadioInput = class {
         index.registerInstance(this, hostRef);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.optionsGroup = undefined;
@@ -14072,14 +14141,15 @@ const RadioInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14104,14 +14174,17 @@ const RadioInput = class {
             this.showTooltip = false;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
-        // end custom styling area
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    componentDidLoad() {
+        this.handleClientStyling();
     }
     handleClick(event) {
         this.value = event.target.value;
@@ -14134,11 +14207,11 @@ const RadioInput = class {
         return null;
     }
     render() {
-        return index.h("fieldset", { key: '33493de460303a32a37d253a0fd5f9da59676542', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '8aef7aa84a119742e05d72d976c936a560154b3f', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: 'bec44ed4007e408ddeb0b0293b82e034c8e165f2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: 'a3b0a041beabe3f14661c0af8cd970040d060435', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("fieldset", { key: '7048de0e37c9541af1c9788e8b46c789ca788c31', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '403b739c966d510740ca59621c094872b93e2cba', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: '46dce1082a6aa9f2a5bdc3e3654c924fcd2a8357', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: 'dfe155a429485b5c891db2943d9115cdc40e169b', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -14187,11 +14260,6 @@ const SelectInput = class {
             this.validityStateHandler({ valid: this.isValid, name: this.name });
             this.emitValueHandler(true);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -14204,14 +14272,15 @@ const SelectInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14261,16 +14330,17 @@ const SelectInput = class {
             }
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.inputReference = this.vaadinCombo.querySelector('input');
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -14335,13 +14405,13 @@ const SelectInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'b0ed504667761e5fd77e0ac13382b467448a1944', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b48d38dc4c2cb3442ff6773a1b1d13191ec4d0e6', class: 'select__wrapper--flex' }, index.h("label", { key: 'ad592c8c98ecbec1961d22cdfeb8cec910291ea8', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: 'b3c0f2fe9a2d26ade1626878ed9bc1f0b86a23ad', class: this.validation.mandatory ? 'select__label--required' : '' })), index.h("div", { key: '29d0f504d0f51175818dffffb882ac4e6e9c3bde', class: 'select__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '66e524ffebc43f9418e90b3bd2d7ae62eba47da3', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
+        return index.h("div", { key: 'eb6c9d7d85546159d44d06a0635f173263edd7d1', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0fd71c528870966fdb23049b1806a267e9e6ca5c', class: 'select__wrapper--flex' }, index.h("label", { key: '44aeb4e50ab2f79df06741ff07ac03131c987447', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '796a83aeadd480a571b6bae035a46138d7b10b24', class: this.validation.mandatory ? 'select__label--required' : '' })), index.h("div", { key: '6d7b2d785c6b0bdd05c7444f563b21cedf26ff7c', class: 'select__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'f33e43a9d42e8b8d1cf136374505eeaedcbede26', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
             :
-                index.h("vaadin-select", { name: this.name, popover: false, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), index.h("small", { key: '0143b538740c3a8e9bfcab6bbb44660355c40cf7', class: 'select__error-message' }, this.errorMessage));
+                index.h("vaadin-select", { name: this.name, popover: false, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), index.h("small", { key: '261b3c4abc9b360e6b937d851f8bfc810280a8c6', class: 'select__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -14376,11 +14446,6 @@ const TelInput = class {
             this.isValid = this.isValidValue();
             this.errorMessage = this.setErrorMessage();
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -14393,9 +14458,9 @@ const TelInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.isValid = undefined;
         this.errorMessage = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.disablePhonePrefix = false;
         this.phoneValue = '';
@@ -14407,9 +14472,10 @@ const TelInput = class {
         if (this.inputReference)
             this.inputReference.value = this.phoneValue;
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14460,16 +14526,17 @@ const TelInput = class {
             }
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         this.isValid = this.isValidValue();
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -14561,11 +14628,11 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'bf824bf310bec50746fb6b82cd8f7decbcfc284b', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0b6c42e7aca5686f310ffdcecb96cf909e83521f', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'ddf2fa885ac53e7f337525357a7dce52f911213d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e21a84509b32f379bb3ce92137255caf99a86dc5', class: 'tel__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '9ff0a8c19aa067c1e7799227617405e373b344e4', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '5db13af7e421480b89253970a5f2470f999c922d', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '164fe2bd2940bd5a251fda48b28f1af1bc3e78be', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '90ae038a383645d6579fb68bc5adbe8a2b1d676c', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'a68f95384965384a67d042b89264dbda03f25b7a', class: 'tel__error-message' }, this.errorMessage));
+        return index.h("div", { key: '9cf9eb751bca1978d8554fffc912ef2039c42e41', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'cc88d6e9aa7a0f3801fad75e3ca509fbd01b0538', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'c8a35af4ddd2d4f9751d7f60c9e075ae8eccb441', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73fcdcc25dde1be087ee60062dc5eee2d1e5d29e', class: 'tel__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '56df66fddf599fbafb179c7cd90ea7d58b008ea6', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '20eb5689932c2f71322102229cc7346d18e9bc87', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '9ec4142dc84e0022ced7e34248d5f4f8f59c34af', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'c083b17f71de36b84892a8080f776debf1fe7351', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '2201c2d7b968731042624b265cf535c656c86933', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -14609,11 +14676,6 @@ const TextInput = class {
             this.touched = true;
             this.updateValidationState();
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -14628,15 +14690,16 @@ const TextInput = class {
         this.clientStyling = '';
         this.haspostalcodelookup = undefined;
         this.enableSouthAfricanMode = undefined;
+        this.mbSource = undefined;
         this.isValid = undefined;
         this.errorMessage = '';
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.selectedCountryCode = '';
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14748,21 +14811,22 @@ const TextInput = class {
         }
         this.validityStateHandler({ valid: false, name: this.name });
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
-    }
     componentWillLoad() {
         if (this.defaultValue) {
             this.value = this.defaultValue;
         }
     }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
     componentDidLoad() {
+        this.handleClientStyling();
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value });
@@ -14874,11 +14938,11 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'aacb35e1808720cfdb24708254c01cb5be0fe6b6', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '14a292cc7661d663698384d989d57d21786210b9', class: 'text__wrapper--flex' }, index.h("label", { key: 'c04b29364c4b54e9aad3036264044177e4a2dc51', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'eb8aee30e47241b533c7ca8fcb354c782b4e2be1', class: 'text__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '23d4b70d93910f43ce0ea54c1bcffd81dfc54ebc', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '3f901d85111256370811f4abe51bcd5b2971b60c', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '1661215687f1eecd622b2610c3e056f45944fee3', class: 'text__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'f48e592bac049022b283bac917c095772b1508f5', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'fe3626ead38dd18dfa14795ee2332e93f5f09652', class: 'text__wrapper--flex' }, index.h("label", { key: '6b2854b460e0ac7d4ae0ebccc06dbe64770581d5', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'f29d266973bd700a4270495bc4eb6e8296b6eeaf', class: 'text__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '68e69abbb78250e763822608e963bc16d702f099', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '99b8eab15ab32656f86fedd3f36a09a5bbe108d3', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'cc28c1c19370faa94fa1f738066042dce8d694ce', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
+        "clientStyling": ["handleClientStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -14900,11 +14964,6 @@ const ToggleCheckboxInput = class {
             event.stopPropagation();
             window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
         this.name = undefined;
         this.displayName = undefined;
         this.defaultValue = '';
@@ -14915,15 +14974,16 @@ const ToggleCheckboxInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.mbSource = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
-        this.limitStylingAppends = false;
         this.showTooltip = false;
         this.showFields = this.defaultValue === 'true';
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
     }
     validityStateHandler(inputStateEvent) {
         this.sendValidityState.emit(inputStateEvent);
@@ -14937,16 +14997,17 @@ const ToggleCheckboxInput = class {
             this.showTooltip = false;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
+        }
+        if (this.clientStyling) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        // end custom styling area
     }
     componentDidLoad() {
+        this.handleClientStyling();
         if (this.options.length === 0)
             return;
         this.options.forEach((subField) => {
@@ -14983,13 +15044,13 @@ const ToggleCheckboxInput = class {
         return null;
     }
     render() {
-        return index.h("div", { key: '828751327e59e9649afc04c6c9f7a02ef7dcae8d', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'd02a2a6ef595aaf7142cbc6e9681394ee4db8fee', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: 'fca6401ef6eb178f53471362444d54ed69086429', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '3781a8fdfeb719422693bcd541a4a3fe708e705a', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '27a4c6b047cd332407ee40c82cf7be1914ed34c9', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'f1367d7e061d20ad68c24dfbe3147e6b67df746f', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '98d42103554de4d14a65eafd1722bf9d587a27f1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return index.h("div", { key: '31cd24b5da24368eef2f53952714395d6d9f6285', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'aa14784bd8a3870f7015db79d23226521706ad58', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '0237f06c99b8b2ed7de80433f5b93b9eae7c25f5', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '7e26bea1cfcc725d5aa5a795fd0f999d99abe39d', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '4256fc552545b7a1050ff5cdeb005f5ea83cc5c1', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'be3c3e036f0bfe46658fce870ae0ffa258229e7d', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '2d61bedaac02f21116318b10a21b361e70e0213f', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
             return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
         })));
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"]
+        "clientStyling": ["handleClientStylingChange"]
     }; }
 };
 ToggleCheckboxInput.style = ToggleCheckboxInputStyle0;
@@ -15015,17 +15076,6 @@ const TwofaInput = class {
             this.triggerResendInterval();
             this.resendCode.emit();
         };
-        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;
-                this.clientStyling = data;
-                setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
-            });
-        };
         this.setInputRef = (el, idx) => {
             if (el) {
                 this.inputRefs[idx] = el;
@@ -15081,21 +15131,6 @@ const TwofaInput = class {
             this.setValidity();
             this.setErrorMessage();
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setStreamStyling = (domain) => {
-            if (window.emMessageBus) {
-                const sheet = document.createElement('style');
-                this.stylingSubscription = window.emMessageBus.subscribe(domain, (data) => {
-                    sheet.innerHTML = data;
-                    this.clientStyling = data;
-                    this.host.shadowRoot.prepend(sheet);
-                });
-            }
-        };
         this.name = '';
         this.displayName = '';
         this.placeholder = '';
@@ -15110,7 +15145,6 @@ const TwofaInput = class {
         this.pinAttemptsExceeded = undefined;
         this.clientStylingUrl = '';
         this.mbSource = undefined;
-        this.limitStylingAppends = false;
         this.isValid = false;
         this.isResendButtonAvailable = true;
         this.showTooltip = false;
@@ -15130,9 +15164,16 @@ const TwofaInput = class {
             this.valueHandler({ name: this.name, value: this.code.join('') });
         }
     }
-    handleStylingUrlChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStylingURL();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     validityStateHandler(inputStateEvent) {
         this.sendValidityState.emit(inputStateEvent);
@@ -15146,10 +15187,6 @@ const TwofaInput = class {
             this.showTooltip = false;
         }
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
-    }
     connectedCallback() {
         this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
@@ -15157,30 +15194,21 @@ const TwofaInput = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
-    componentDidRender() {
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling) {
-                this.setClientStyling();
-            }
-            this.limitStylingAppends = true;
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
+        if (this.clientStyling)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        if (this.clientStylingUrl)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
     }
     componentDidLoad() {
         this.setValidity();
         this.registrationWidgetLoaded.emit();
         window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
-        if (!this.limitStylingAppends && this.host) {
-            if (window.emMessageBus != undefined) {
-                this.setStreamStyling(`${this.mbSource}.Style`);
-            }
-            else {
-                if (this.clientStyling)
-                    this.setClientStyling();
-                if (this.clientStylingUrl)
-                    this.setClientStylingURL();
-                this.limitStylingAppends = true;
-            }
-        }
+        this.handleClientStyling();
     }
     handleKeyDown(e, idx) {
         if (e.key === 'Backspace') {
@@ -15271,9 +15299,9 @@ const TwofaInput = class {
         return current;
     }
     render() {
-        return (index.h("div", { key: '08b9139f1c2236dd40a045517a9623ad966f29d3', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: '7528885100be3d450ec52aafd6085a4c852710c8', class: 'twofa__error-message' }, index.h("p", { key: '51dab3f02156b5eb3b7408f06f2d359cfbda11a7' }, this.errorMessage)), index.h("div", { key: 'f336f89ecee0724663b1bbb4d443bb834336b5c1', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '5127127ccc8e50428f8319fddc9e21606f3b4148', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
+        return (index.h("div", { key: 'cd5396afccaf4016201281f5cc53898c0a2052ed', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: '008dd54682a0d93190e9e5b2b49673262ed01763', class: 'twofa__error-message' }, index.h("p", { key: '41db51d6b396ccd1f3149e4473e96960e92d05ca' }, this.errorMessage)), index.h("div", { key: '67e9e4ac90cf95f2269e75b121ed220a02c5f139', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '702c342eb7be0001ab8de310cadd7e8684a8025d', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
             return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
-        })), index.h("div", { key: 'be82ae1192129d571275b78c8097c3023468cf3e', class: "twofa__button-wrapper" }, index.h("p", { key: '11de61d738ffa74bfd44f0d7c88fc4e456647d0c', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '84d5c55c4d9bf024164ec52e2100cfcc8c236ac2', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
+        })), index.h("div", { key: '63564bd4a0442232f81058ba914ee86c537ce85a', class: "twofa__button-wrapper" }, index.h("p", { key: '219f5005c0d03189df48f05c5e0cd980eb0e1979', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '12b7b4bc3ea165994f2c50107f406c64e708cf4d', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
             ? translate('twofaResendButton', this.language)
             : this.formatTime()))));
     }
@@ -15281,8 +15309,8 @@ const TwofaInput = class {
     static get watchers() { return {
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"],
-        "clientStylingUrl": ["handleStylingUrlChange"],
-        "clientStyling": ["handleStylingChange"]
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
     }; }
 };
 TwofaInput.style = TwofaInputStyle0;