@everymatrix/general-input 1.75.1 → 1.76.1

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

@@ -81,10 +81,10 @@ export class SelectInput {
         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() {
         var _a;
@@ -92,7 +92,7 @@ export class SelectInput {
             label: option.label,
             value: option.value
         }));
-        // Use the searchable select if there are more then 6 values 
+        // Use the searchable select if there are more then 6 values
         this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
     }
     componentWillLoad() {
@@ -105,7 +105,7 @@ export class SelectInput {
                     this.displayedOptions = options[firstKey].map(option => {
                         return { label: option.Name, value: option.Alpha2Code };
                     });
-                    // Use the searchable select if there are more then 6 values 
+                    // Use the searchable select if there are more then 6 values
                     this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
                 });
             }
@@ -184,10 +184,10 @@ export class SelectInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '7e90e23b53a72cda885485ccf4110631cede2b8f', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9a841ccebeb828fc75ed1f708a4a43d4fc7a193f', class: 'select__wrapper--flex' }, h("label", { key: '92c70fa56518d6d015d756b693306dab80ab0f57', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'cfbeb4b4969adc1f9944eb60291d8f586dcc29db', class: 'select__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '13a340313095bc653a1741115bae128d538dcf30', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? 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 h("div", { key: '59052813b3e88f4bb39a3e76a8bef78543f56952', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'fa921b9c76a4cc143488e1c493fea5e7b648aff6', class: 'select__wrapper--flex' }, h("label", { key: 'f85dc5333f10edc8a3b2acefe57a6fbf599d4266', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '6f275104b0b6a3fd650b33766209277a83338fcc', class: 'select__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'fab2ce08a9722d3bd1df5067fd1c458c0449d0b1', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? 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 })
             :
-                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 }), h("small", { key: '6ffb5459f648208106c6bfc8a78f5cf379f7f11b', class: 'select__error-message' }, this.errorMessage));
+                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 }), h("small", { key: '3b6eb1c212308f9a3b88d6c0fd03ae08633317a2', class: 'select__error-message' }, this.errorMessage));
     }
     static get is() { return "select-input"; }
     static get encapsulation() { return "shadow"; }
@@ -489,8 +489,8 @@ export class SelectInput {
         return [{
                 "name": "click",
                 "method": "handleClickOutside",
-                "target": "document",
-                "capture": false,
+                "target": "window",
+                "capture": true,
                 "passive": false
             }];
     }

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

@@ -69,10 +69,10 @@ export class TelInput {
         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();
@@ -163,8 +163,8 @@ export class TelInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '07279e9146394ad96ca0ce1b3e059f09fce2937a', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c4eedb1dba6a3fabd4dcc95e767813f95b83346a', class: 'tel__wrapper--flex-label' }, h("label", { key: '093a445bc6a9144673386abf92263faa2f33a62a', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '76abd68488a0f78e3fbd46328fa338d8c05b9601', class: 'tel__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '8238860af5dbc417c2cd853b55fd79f67f51649d', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '235b2146fc4c70107d5c077071e1fa52ac1c56d3', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '73e51576aad82c2bc6895a62b0c19351a1eb917b', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: 'd714d757cd08e3d700cec86f9d6ce4ff680dd2e9', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: 'f6ced1b252990cd3ecc18c9c5ad3546654006dcc', class: 'tel__error-message' }, this.errorMessage));
+        return h("div", { key: '794ad1ad72a5c558b359e003d880170679145a83', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '60c48397f996eaf2c7df516b42a58e295954ce11', class: 'tel__wrapper--flex-label' }, h("label", { key: '114a11bd08658aba467d8bff220bdbda7c8a635f', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '879297d9f5b68b64a2329717d81eae4fbb9e5f1a', class: 'tel__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'b5e3ec5f52fc4cc36ba7e252a63cc1d4aed92858', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '7fdfce487a763c54a96ff2b541dcf5ea34d1808e', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: 'e79a8c63f3b3ec22ecf47b0cb0b0aa89075c5f4d', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '8ed28d4ce9e68c8f941d898f1429c2b0077d5aa6', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '315c8e7d6158e963502f37046c8a2f2928873ee6', class: 'tel__error-message' }, this.errorMessage));
     }
     static get is() { return "tel-input"; }
     static get encapsulation() { return "shadow"; }
@@ -460,8 +460,8 @@ export class TelInput {
         return [{
                 "name": "click",
                 "method": "handleClickOutside",
-                "target": "document",
-                "capture": false,
+                "target": "window",
+                "capture": true,
                 "passive": false
             }];
     }

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

@@ -71,10 +71,10 @@ export class TextInput {
         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;
+        }
     }
     valueChangedHandler(event) {
         if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
@@ -171,8 +171,8 @@ export class TextInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '37c7509b46ab92149c3c11365cf5061bb1bbb01a', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '737873a059749dc050a8efa6ffb09a1b2ee9f95c', class: 'text__wrapper--flex' }, h("label", { key: '1d921faece6c293c7e3c95d34bedd0d399c7be9e', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'e1e59c85912cf7c3dbd1e61bba829ae2b0192a18', class: 'text__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '73513026eebcc809edef481d5cd7b885e5f20f03', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'a73e2c2430e6fbc778e1fd6b5fcfb298cf01b5c5', name: this.name, id: `${this.name}__input`, value: this.defaultValue, 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.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '11cb376081cb05651c60c3e1ac8a41f9751ca16c', class: 'text__error-message' }, this.errorMessage));
+        return h("div", { key: 'a769be49d47bf5eac45467f9355aa2d51cb1ff81', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '3885727132e83f4381c455ec04fe49bb3feb58a2', class: 'text__wrapper--flex' }, h("label", { key: '36132d614d6f921af8dda5fef9466fdbc8b83f2f', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'ac112a8be59094ee2c347c1853e1f36781246831', class: 'text__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '31d5bc82b517facc92cc84e4191bc33946bbc06c', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '3bea6c3cbd01c55ac8e120078afdb784b5d65aee', name: this.name, id: `${this.name}__input`, value: this.defaultValue, 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.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '6139392a22701626a0001d41c558593be83aabf2', class: 'text__error-message' }, this.errorMessage));
     }
     static get is() { return "text-input"; }
     static get encapsulation() { return "shadow"; }
@@ -469,8 +469,8 @@ export class TextInput {
         return [{
                 "name": "click",
                 "method": "handleClickOutside",
-                "target": "document",
-                "capture": false,
+                "target": "window",
+                "capture": true,
                 "passive": false
             }, {
                 "name": "sendInputValue",

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
             }];
     }