@everymatrix/general-input 1.90.7 → 1.90.8

package/dist/collection/components/email-input/email-input.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
+import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class EmailInput {
     constructor() {
         this.validationPattern = '';
@@ -22,11 +23,6 @@ export class EmailInput {
             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;
@@ -38,14 +34,15 @@ export class EmailInput {
         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 });
@@ -80,16 +77,17 @@ export class EmailInput {
     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;
@@ -135,8 +133,8 @@ export class EmailInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '723df8f3a6e8c57fe19082400971daf50f5c981d', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '581d6e02b63d1c659ae44424518f64db450d5365', class: 'email__wrapper--flex' }, h("label", { key: '11e6a848f6f04903989b3ab2075865f6e279c087', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '73e11520cffbddda1a2aeb4b560e7f4cf456e2fb', class: 'email__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'e8571ce14b9b98311daf1712ebde7d6da9b5a6a6', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '0d2d41207f8274d8c6f69143131265ef5b458689', class: 'email__error-message' }, this.errorMessage));
+        return h("div", { key: 'f852525fe8d8b695e638fdd83e8b0c2c20d98771', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'd6a6dec4e76ba1fbe15bed09f82cecde12cabe1a', class: 'email__wrapper--flex' }, h("label", { key: '4498ae1bac287cb80544c4d743afad2ec678e3bd', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'e54d1258e48f54304a553cffb83466e4a4fadb4c', class: 'email__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '29d7b95f22c8cb70d505f74a7ea18284faa908ee', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '3024a57f5d0897f34013eb4397d78babc2333192', class: 'email__error-message' }, this.errorMessage));
     }
     static get is() { return "email-input"; }
     static get encapsulation() { return "shadow"; }
@@ -343,6 +341,23 @@ export class EmailInput {
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
             }
         };
     }
@@ -350,7 +365,6 @@ export class EmailInput {
         return {
             "errorMessage": {},
             "isValid": {},
-            "limitStylingAppends": {},
             "showTooltip": {}
         };
     }
@@ -402,7 +416,7 @@ export class EmailInput {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"

package/dist/collection/components/general-input/general-input.js

@@ -1,34 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { getTranslations } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import "../../../../../../../libs/vaadin-facade/index";
 export class GeneralInput {
     constructor() {
-        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();
@@ -65,15 +40,17 @@ export class GeneralInput {
         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) {
@@ -84,51 +61,50 @@ export class GeneralInput {
         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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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':
@@ -143,7 +119,7 @@ export class GeneralInput {
         }
     }
     render() {
-        return (h(Host, { key: '7a7805c641082de9c5da4859187765002ab6f32d', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
+        return (h(Host, { key: '12e3e43442ba3fd4a47bbc5c05456eb019405b1e', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
     }
     static get is() { return "general-input"; }
     static get encapsulation() { return "shadow"; }
@@ -686,11 +662,6 @@ export class GeneralInput {
             }
         };
     }
-    static get states() {
-        return {
-            "limitStylingAppends": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "registrationWidgetLoaded",
@@ -713,10 +684,10 @@ export class GeneralInput {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "clientStylingUrl",
-                "methodName": "handleStylingUrlChange"
+                "methodName": "handleClientStylingChangeURL"
             }];
     }
 }

package/dist/collection/components/number-input/number-input.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
+import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class NumberInput {
     constructor() {
         this.validationPattern = '';
@@ -22,11 +23,6 @@ export class NumberInput {
             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;
@@ -37,14 +33,15 @@ export class NumberInput {
         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 });
@@ -72,16 +69,17 @@ export class NumberInput {
     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;
@@ -122,8 +120,8 @@ export class NumberInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'aea370172d0e55d32dc665a1c340c734334e1caf', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '10e16d10b956c5a647bc68ecffbc2eb0b06fa92a', class: 'number__wrapper--flex' }, h("label", { key: '0827d47c7278c6fdf8ebdd1dff03b91c39be6812', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'cb868d01e8555f5e3333240f54d86f0a56641d0f', class: 'number__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '1aa2b16b59f4bfd4b1dadf2641ec6cb4cfc251bf', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: 'a8639df7ef1e98807a7daffc9da4afd347b1c292', class: 'number__error-message' }, this.errorMessage));
+        return h("div", { key: 'bd11140dc6c8ddb6b800d4fe6544df733c5157c4', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c8318c687bc471fc225b9aba52686e38ecb400de', class: 'number__wrapper--flex' }, h("label", { key: '7eaf64057ef71b07a0defc1e372fd85baab2bd68', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '99f4151f50a7fb0abb9a8e53bacc8c8bd303d659', class: 'number__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '875d6284697dc06ac05c682509856faeade3d8be', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '0226f04a059fd8763822483de42bd7e647040bf3', class: 'number__error-message' }, this.errorMessage));
     }
     static get is() { return "number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -313,6 +311,23 @@ export class NumberInput {
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
             }
         };
     }
@@ -320,7 +335,6 @@ export class NumberInput {
         return {
             "errorMessage": {},
             "isValid": {},
-            "limitStylingAppends": {},
             "showTooltip": {}
         };
     }
@@ -372,7 +386,7 @@ export class NumberInput {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"

package/dist/collection/components/password-input/password-input.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { translate, STATUS_ICONS, CONSTANTS } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
+import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class PasswordInput {
     constructor() {
         this.touched = false;
@@ -36,11 +37,6 @@ export class PasswordInput {
             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;
@@ -55,17 +51,18 @@ export class PasswordInput {
         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 });
@@ -126,16 +123,17 @@ export class PasswordInput {
             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;
@@ -242,8 +240,8 @@ export class PasswordInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'fe895585dd908f75eee4ba797dc9c02b237bed7f', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '844bdb3dab98e62cc5d92a761b85adcdc44831d0', class: 'password__wrapper--flex' }, h("label", { key: '28041267a6df666e7df3660a907f995eff092ae1', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '79c300643134802f04d8f909fe7bb3895911c88a', class: 'password__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '43ae58549e42ba59054162c25887ec36eb826aaa', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 && h("small", { key: 'c8aeba074e66b771d745194fec535aa0b82de6d8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
+        return h("div", { key: '18213d251639938165f3e4ad58bdc904fb953fe2', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '092c431b178682d0006cf6ad5c14b0a7e6fb5569', class: 'password__wrapper--flex' }, h("label", { key: '64c101b7d70305ecf09735234d902a6b33823551', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '189929eefa1caf71a1be39f0d663eef914d241d5', class: 'password__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '95ee0d824b5be14ab4e62fc0b5f1731fe6ca5775', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 && h("small", { key: '3acbe164ff532bcfcd9e4a237a6f352df0cfdc2d', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
             this.showPopup &&
             !this.hidePasswordComplexity &&
             !this.isDuplicateInput &&
@@ -510,6 +508,23 @@ export class PasswordInput {
                 },
                 "attribute": "enable-south-african-mode",
                 "reflect": true
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
             }
         };
     }
@@ -517,7 +532,6 @@ export class PasswordInput {
         return {
             "isValid": {},
             "errorMessage": {},
-            "limitStylingAppends": {},
             "showTooltip": {},
             "passwordComplexity": {},
             "showPopup": {},
@@ -594,7 +608,7 @@ export class PasswordInput {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"