@everymatrix/general-input 1.76.0 → 1.76.3

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js

@@ -42,10 +42,10 @@ export class ToggleCheckboxInput {
         this.sendInputValue.emit(inputValueEvent);
     }
     handleClickOutside(event) {
-        if (event.composedPath()[0] === this.tooltipIconReference)
-            return;
-        if (event.composedPath()[0] !== this.tooltipReference)
+        const path = event.composedPath();
+        if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
             this.showTooltip = false;
+        }
     }
     componentDidRender() {
         // start custom styling area
@@ -93,8 +93,8 @@ export class ToggleCheckboxInput {
         return null;
     }
     render() {
-        return h("div", { key: '6315588766319c4ac7a88646b01bc577858ad718', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '20d6999aaf0499b8b840a28dab89242953b4610d', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '73b699abf4904e4f2133e30d8dea250c9fe13ac3', 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: '4d10247f1dae300d0f5133accdd544a90fa4d5a7', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '9c95cef35e58875b96710d3b64b9af1be27204c5', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '9774edae6bad4715fd20798a7be25eb71c3c4cf0', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '70ad3ec894a32439e2dcea617e2a5b773c5456b1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return h("div", { key: '355926a9da2977c88b7ae205ddd6468d1a86e2d2', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3bbf491f4fdf22800ad091de584bcac3c2018308', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '14654df4ce258c95c7bc23ffd2420c5f0d5eb65e', 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: 'db4624ed73f644db0a8f0b92738497fca64ea035', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '898d353c570f9ce19c758585f721f6cb50c35fb0', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '1007896417922d0e2bcaaf4c65a5f362e5e3bb49', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '260480a129168c8868ae0539ba9f9edbec35f87b', 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 });
         })));
     }
@@ -358,8 +358,8 @@ export class ToggleCheckboxInput {
         return [{
                 "name": "click",
                 "method": "handleClickOutside",
-                "target": "document",
-                "capture": false,
+                "target": "window",
+                "capture": true,
                 "passive": false
             }];
     }

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

@@ -109,10 +109,10 @@ export class TwofaInput {
         this.sendInputValue.emit(inputValueEvent);
     }
     handleClickOutside(event) {
-        if (event.composedPath()[0] === this.tooltipIconReference)
-            return;
-        if (event.composedPath()[0] !== this.tooltipReference)
+        const path = event.composedPath();
+        if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
             this.showTooltip = false;
+        }
     }
     connectedCallback() {
         this.validationPattern = this.setPattern();
@@ -195,9 +195,9 @@ export class TwofaInput {
         return null;
     }
     render() {
-        return (h("div", { key: '97c1955fececc6f3998375f4c8176ceaed66856a', class: "twofa" }, h("div", { key: 'ee2243931d8e5c6a5aadf1e78d1851449806d2b2', class: 'twofa__error-message' }, h("p", { key: '20a8ccad2e6501c73e3672f6ae325f8539e2d21a' }, this.errorMessage)), h("div", { key: 'bb33610a8be04b86378026c02099620749b81a4b', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'af3ea38ed6468eb2de66aed810ba50a850bf21a9', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
+        return (h("div", { key: '0f7d2f80e6335fcb08b1c61f6e52f51205a30092', class: "twofa" }, h("div", { key: 'd23240ccceb2ac4af5c5a2a1800eccd6013271e3', class: 'twofa__error-message' }, h("p", { key: '72fafd1608f5ae7402be900800100a141fefb72a' }, this.errorMessage)), h("div", { key: '98f5a5614fb895672a175d0415f66b5849b82f85', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '5fd4f8999dc44e372369f03223d53c1d56a1eab4', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
             return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
-        })), h("div", { key: 'f385bd6dc93896d918a5cc1365b59bedd47d5bb0', class: "twofa__button-wrapper" }, h("p", { key: '3623f0391e0e5923cd6b3bfd74d203905486209f', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '497660604f87dbf4ce1ce51ecd041e82ab5dd33a', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
+        })), h("div", { key: 'b6e5b2ba4e10cbbd092aaef4d13e0f6a640b3c29', class: "twofa__button-wrapper" }, h("p", { key: 'eba4ae1393d89db6729cfff7d5bc4eb5a4ab0b43', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '58069e9cb76ecf1776f0733a9f8bc20387e71ad3', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
             ? translate('twofaResendButton', this.language)
             : this.formatTime()))));
     }
@@ -487,8 +487,8 @@ export class TwofaInput {
         return [{
                 "name": "click",
                 "method": "handleClickOutside",
-                "target": "document",
-                "capture": false,
+                "target": "window",
+                "capture": true,
                 "passive": false
             }];
     }