@everymatrix/general-input 1.90.7 → 1.90.8

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-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 ToggleCheckboxInput {
     constructor() {
         this.callBackObject = {};
@@ -10,11 +11,6 @@ export class ToggleCheckboxInput {
             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 = '';
@@ -25,15 +21,16 @@ export class ToggleCheckboxInput {
         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);
@@ -47,16 +44,17 @@ export class ToggleCheckboxInput {
             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) => {
@@ -93,8 +91,8 @@ export class ToggleCheckboxInput {
         return null;
     }
     render() {
-        return h("div", { key: '828751327e59e9649afc04c6c9f7a02ef7dcae8d', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'd02a2a6ef595aaf7142cbc6e9681394ee4db8fee', class: 'togglecheckbox__wrapper--flex' }, 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()), h("small", { key: '3781a8fdfeb719422693bcd541a4a3fe708e705a', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '27a4c6b047cd332407ee40c82cf7be1914ed34c9', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'f1367d7e061d20ad68c24dfbe3147e6b67df746f', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '98d42103554de4d14a65eafd1722bf9d587a27f1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return h("div", { key: '31cd24b5da24368eef2f53952714395d6d9f6285', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'aa14784bd8a3870f7015db79d23226521706ad58', class: 'togglecheckbox__wrapper--flex' }, 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()), h("small", { key: '7e26bea1cfcc725d5aa5a795fd0f999d99abe39d', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '4256fc552545b7a1050ff5cdeb005f5ea83cc5c1', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'be3c3e036f0bfe46658fce870ae0ffa258229e7d', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '2d61bedaac02f21116318b10a21b361e70e0213f', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
             return 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 });
         })));
     }
@@ -291,6 +289,23 @@ export class ToggleCheckboxInput {
                 "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
             }
         };
     }
@@ -298,7 +313,6 @@ export class ToggleCheckboxInput {
         return {
             "errorMessage": {},
             "isValid": {},
-            "limitStylingAppends": {},
             "showTooltip": {},
             "showFields": {}
         };
@@ -351,7 +365,7 @@ export class ToggleCheckboxInput {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
             }];
     }
     static get listeners() {

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class TwofaInput {
     constructor() {
         this.validationPattern = '';
@@ -13,17 +14,6 @@ export class TwofaInput {
             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;
@@ -79,21 +69,6 @@ export class TwofaInput {
             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 = '';
@@ -108,7 +83,6 @@ export class TwofaInput {
         this.pinAttemptsExceeded = undefined;
         this.clientStylingUrl = '';
         this.mbSource = undefined;
-        this.limitStylingAppends = false;
         this.isValid = false;
         this.isResendButtonAvailable = true;
         this.showTooltip = false;
@@ -128,9 +102,16 @@ export class TwofaInput {
             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);
@@ -144,10 +125,6 @@ export class TwofaInput {
             this.showTooltip = false;
         }
     }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
-    }
     connectedCallback() {
         this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
@@ -155,30 +132,21 @@ export class TwofaInput {
     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') {
@@ -269,9 +237,9 @@ export class TwofaInput {
         return current;
     }
     render() {
-        return (h("div", { key: '08b9139f1c2236dd40a045517a9623ad966f29d3', class: "twofa", ref: el => this.stylingContainer = el }, h("div", { key: '7528885100be3d450ec52aafd6085a4c852710c8', class: 'twofa__error-message' }, h("p", { key: '51dab3f02156b5eb3b7408f06f2d359cfbda11a7' }, this.errorMessage)), h("div", { key: 'f336f89ecee0724663b1bbb4d443bb834336b5c1', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '5127127ccc8e50428f8319fddc9e21606f3b4148', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
+        return (h("div", { key: 'cd5396afccaf4016201281f5cc53898c0a2052ed', class: "twofa", ref: el => this.stylingContainer = el }, h("div", { key: '008dd54682a0d93190e9e5b2b49673262ed01763', class: 'twofa__error-message' }, h("p", { key: '41db51d6b396ccd1f3149e4473e96960e92d05ca' }, this.errorMessage)), h("div", { key: '67e9e4ac90cf95f2269e75b121ed220a02c5f139', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '702c342eb7be0001ab8de310cadd7e8684a8025d', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
             return (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) }));
-        })), h("div", { key: 'be82ae1192129d571275b78c8097c3023468cf3e', class: "twofa__button-wrapper" }, h("p", { key: '11de61d738ffa74bfd44f0d7c88fc4e456647d0c', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '84d5c55c4d9bf024164ec52e2100cfcc8c236ac2', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
+        })), h("div", { key: '63564bd4a0442232f81058ba914ee86c537ce85a', class: "twofa__button-wrapper" }, h("p", { key: '219f5005c0d03189df48f05c5e0cd980eb0e1979', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), 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()))));
     }
@@ -545,7 +513,6 @@ export class TwofaInput {
     }
     static get states() {
         return {
-            "limitStylingAppends": {},
             "isValid": {},
             "isResendButtonAvailable": {},
             "showTooltip": {},
@@ -638,12 +605,12 @@ export class TwofaInput {
             }, {
                 "propName": "emitValue",
                 "methodName": "emitValueHandler"
-            }, {
-                "propName": "clientStylingUrl",
-                "methodName": "handleStylingUrlChange"
             }, {
                 "propName": "clientStyling",
-                "methodName": "handleStylingChange"
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingChangeURL"
             }];
     }
     static get listeners() {