@everymatrix/general-input 1.59.2 → 1.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +5452 -37168
- package/dist/cjs/general-input.cjs.entry.js +4548 -1
- package/dist/cjs/toggle-checkbox-input.cjs.entry.js +22 -3
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.js +2 -4
- package/dist/collection/components/date-input/date-input.js +2 -3
- package/dist/collection/components/general-input/general-input.js +2 -1
- package/dist/collection/components/password-input/password-input.css +14 -1
- package/dist/collection/components/password-input/password-input.js +2 -3
- package/dist/collection/components/select-input/select-input.js +2 -3
- package/dist/collection/components/tel-input/tel-input.js +2 -3
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +22 -3
- package/dist/esm/checkbox-group-input_10.entry.js +5451 -37167
- package/dist/esm/general-input.entry.js +4548 -1
- package/dist/esm/toggle-checkbox-input.entry.js +22 -3
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/p-35d1eebe.entry.js +1 -0
- package/dist/general-input/p-5bc47cf3.entry.js +4510 -0
- package/dist/general-input/p-b4c2804b.entry.js +1 -0
- package/dist/types/components/checkbox-group-input/checkbox-group-input.d.ts +0 -2
- package/dist/types/components/date-input/date-input.d.ts +1 -2
- package/dist/types/components/general-input/general-input.d.ts +1 -0
- package/dist/types/components/password-input/password-input.d.ts +0 -1
- package/dist/types/components/select-input/select-input.d.ts +0 -1
- package/dist/types/components/tel-input/tel-input.d.ts +0 -1
- package/dist/types/components/toggle-checkbox-input/toggle-checkbox-input.d.ts +5 -0
- package/package.json +1 -1
- package/dist/general-input/p-aaf54cc4.entry.js +0 -4463
- package/dist/general-input/p-dc5f469a.entry.js +0 -1
- package/dist/general-input/p-dc77c96f.entry.js +0 -1
|
@@ -14,7 +14,13 @@ const ToggleCheckboxInput = class {
|
|
|
14
14
|
index.registerInstance(this, hostRef);
|
|
15
15
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
16
16
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
17
|
+
this.callBackObject = {};
|
|
18
|
+
this.subFieldsObject = {};
|
|
17
19
|
this.value = '';
|
|
20
|
+
this.handleRevealField = (event, fieldName) => {
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
|
|
23
|
+
};
|
|
18
24
|
this.setClientStyling = () => {
|
|
19
25
|
let sheet = document.createElement('style');
|
|
20
26
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -61,6 +67,14 @@ const ToggleCheckboxInput = class {
|
|
|
61
67
|
}
|
|
62
68
|
// end custom styling area
|
|
63
69
|
}
|
|
70
|
+
componentDidLoad() {
|
|
71
|
+
if (this.options.length === 0)
|
|
72
|
+
return;
|
|
73
|
+
this.options.forEach((subField) => {
|
|
74
|
+
this.callBackObject[subField.name] = (e) => { this.handleRevealField(e, subField.name); };
|
|
75
|
+
this.subFieldsObject[subField.name].addEventListener('click', this.callBackObject[subField.name]);
|
|
76
|
+
});
|
|
77
|
+
}
|
|
64
78
|
handleClick() {
|
|
65
79
|
this.showFields = this.checkboxReference.checked;
|
|
66
80
|
this.errorMessage = this.setErrorMessage();
|
|
@@ -75,6 +89,11 @@ const ToggleCheckboxInput = class {
|
|
|
75
89
|
return locale_utils.translate('requiredError', this.language);
|
|
76
90
|
}
|
|
77
91
|
}
|
|
92
|
+
disconnectedCallback() {
|
|
93
|
+
this.options.forEach((subField) => {
|
|
94
|
+
this.subFieldsObject[subField.name].removeEventListener('click', this.callBackObject[subField.name]);
|
|
95
|
+
});
|
|
96
|
+
}
|
|
78
97
|
renderLabel() {
|
|
79
98
|
return (index.h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
80
99
|
}
|
|
@@ -85,9 +104,9 @@ const ToggleCheckboxInput = class {
|
|
|
85
104
|
return null;
|
|
86
105
|
}
|
|
87
106
|
render() {
|
|
88
|
-
return index.h("div", { key: '
|
|
89
|
-
index.h("img", { key: '
|
|
90
|
-
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 });
|
|
107
|
+
return index.h("div", { key: 'd7084a7f82d45b3d1e7f8ae373b663b2aefdf5ec', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'f065f4611805dd8490234bcec1fecdbcfcaefab8', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: 'c5196d5a4cd2f114a610037285ee644fcabc37bd', 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: '06d5db0994272ec9dde1b5cd0d525bb53ff1a058', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: 'aff16ac9ed0adb896f2c1822014c5c8c4d6db2d4', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
108
|
+
index.h("img", { key: '6b049cecc095a2127eb566f50fd0f8feaa8cb3d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '372c3eb72cffd482fe1c179047ec3900cef00d46', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
109
|
+
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 });
|
|
91
110
|
})));
|
|
92
111
|
}
|
|
93
112
|
static get watchers() { return {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
-
import "@vaadin/checkbox";
|
|
5
|
-
import "@vaadin/checkbox-group";
|
|
6
4
|
export class CheckboxGroupInput {
|
|
7
5
|
constructor() {
|
|
8
6
|
this.value = null;
|
|
@@ -105,8 +103,8 @@ export class CheckboxGroupInput {
|
|
|
105
103
|
return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
106
104
|
}
|
|
107
105
|
render() {
|
|
108
|
-
return h("div", { key: '
|
|
109
|
-
h("img", { key: '
|
|
106
|
+
return h("div", { key: '4b966adce4d35ccfc4141acea9c8f26a46590b5d', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '82f139c6bacc6b29ffd47005546b47c33bb135eb', class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { key: 'bf99c267f52fa57bd0af94d2465ad18b11079be5', 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 &&
|
|
107
|
+
h("img", { key: '84ec417513f4d22534c7106bbef7be0797e42214', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { key: '526a1dc20a7c7d0322f959402ba359f0b6ef52e0', class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { key: 'ac70eaa0923af84472b35b90f4127a173166a7ce', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
110
108
|
this.selectedValues = event.detail.value;
|
|
111
109
|
} }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
112
110
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/date-picker";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
import dateFnsFormat from "date-fns/format";
|
|
6
5
|
import dateFnsParse from "date-fns/parse";
|
|
@@ -144,8 +143,8 @@ export class DateInput {
|
|
|
144
143
|
if (this.touched) {
|
|
145
144
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
146
145
|
}
|
|
147
|
-
return h("div", { key: '
|
|
148
|
-
h("img", { key: '
|
|
146
|
+
return h("div", { key: 'e20d8db3b90253a7719c4b25a33a201a72ec2cc9', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '08847fd59e35a6690bf5e6b0882745c8f904388b', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: 'aaf1d2d8c53c993fd13e4701e5dd7e0ad9fcf442', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, 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), onBlur: this.handleBlur }), h("small", { key: '34f1dcfba1bbe0939d4b1de450cb9d19f99266dd', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
147
|
+
h("img", { key: '3de20db5b37aa321ab0ef71b7a758ee615613053', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
149
148
|
}
|
|
150
149
|
static get is() { return "date-input"; }
|
|
151
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { getTranslations } from "../../utils/locale.utils";
|
|
3
|
+
import "../../../../../../../libs/vaadin-facade/index";
|
|
3
4
|
export class GeneralInput {
|
|
4
5
|
constructor() {
|
|
5
6
|
this.handleClick = (event) => {
|
|
@@ -61,7 +62,7 @@ export class GeneralInput {
|
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
65
|
+
return (h(Host, { key: 'e89747da2e458906e8f634c285044e95d5e92f73', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
65
66
|
}
|
|
66
67
|
static get is() { return "general-input"; }
|
|
67
68
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
gap: 5px;
|
|
19
|
+
container-type: inline-size;
|
|
19
20
|
}
|
|
20
21
|
.password__wrapper--autofilled {
|
|
21
22
|
pointer-events: none;
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
color: var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
95
96
|
}
|
|
96
97
|
.password__complexity {
|
|
98
|
+
height: 150px;
|
|
97
99
|
position: relative;
|
|
98
100
|
padding: 10px;
|
|
99
101
|
display: flex;
|
|
@@ -106,8 +108,8 @@
|
|
|
106
108
|
-webkit-border-radius: 5px;
|
|
107
109
|
-moz-border-radius: 5px;
|
|
108
110
|
border-radius: 5px;
|
|
109
|
-
height: 150px;
|
|
110
111
|
border: 1px solid #B0B0B0;
|
|
112
|
+
box-sizing: content-box;
|
|
111
113
|
/* works only in this order */
|
|
112
114
|
}
|
|
113
115
|
.password__complexity meter {
|
|
@@ -158,6 +160,17 @@
|
|
|
158
160
|
margin-top: -25px;
|
|
159
161
|
background-color: var(--emw--color-white, #FFFFFF);
|
|
160
162
|
}
|
|
163
|
+
@container (max-width: 300px) {
|
|
164
|
+
.password__complexity {
|
|
165
|
+
height: 190px;
|
|
166
|
+
}
|
|
167
|
+
.password__complexity:after {
|
|
168
|
+
width: 14px;
|
|
169
|
+
height: 14px;
|
|
170
|
+
bottom: 96%;
|
|
171
|
+
left: 57%;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
161
174
|
.password__tooltip-icon {
|
|
162
175
|
width: 16px;
|
|
163
176
|
height: auto;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/password-field";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class PasswordInput {
|
|
6
5
|
constructor() {
|
|
@@ -223,8 +222,8 @@ export class PasswordInput {
|
|
|
223
222
|
if (this.touched) {
|
|
224
223
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
225
224
|
}
|
|
226
|
-
return h("div", { key: '
|
|
227
|
-
h("img", { key: '
|
|
225
|
+
return h("div", { key: 'be707a0330de2fa306f4326a5b374d613e6633f5', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '47a7b4a114f9ccf3c8e759f2c8e933b492053a18', class: 'password__wrapper--flex' }, h("label", { key: 'b51e602d00798e381eea83258812e70a6fe816a0', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '585a9dd0a701429b18d767dd19392ad2373e8ce3', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
226
|
+
h("img", { key: '637040e9773662b80b36b2d787511778ea12daf8', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '1626a68548b795aeb709e5a3a7950f7a5017c787', 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 }), h("small", { key: '791e90e36bf2d67b2a2e68649dcf3052851f2769', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
228
227
|
}
|
|
229
228
|
static get is() { return "password-input"; }
|
|
230
229
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/combo-box";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class SelectInput {
|
|
6
5
|
constructor() {
|
|
@@ -144,8 +143,8 @@ export class SelectInput {
|
|
|
144
143
|
if (this.touched) {
|
|
145
144
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
146
145
|
}
|
|
147
|
-
return h("div", { key: '
|
|
148
|
-
h("img", { key: '
|
|
146
|
+
return h("div", { key: '46061c64a7cb7dad5b2ca1cd38e27b2ea12e88ce', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'cebc0fad817eff49669c4df47d47a4d97c5db317', class: 'select__wrapper--flex' }, h("label", { key: 'a5360d9342ca9c446bdff6b84a717aa47fa71a4f', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '78d699e2a57122dd74f4d414211b586d19f030e7', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
147
|
+
h("img", { key: 'e6fb14604b078a0b0f284d9234262c76e4c581f8', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: '91c86ee20ee639ba0e4338ba5501621486c94fa4', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h("small", { key: '18a6172cb9566f000d5f397d759eb95a06fbc7b4', class: 'select__error-message' }, this.errorMessage));
|
|
149
148
|
}
|
|
150
149
|
static get is() { return "select-input"; }
|
|
151
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
-
import "@vaadin/combo-box";
|
|
4
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
5
4
|
export class TelInput {
|
|
6
5
|
constructor() {
|
|
@@ -162,8 +161,8 @@ export class TelInput {
|
|
|
162
161
|
if (this.touched) {
|
|
163
162
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
164
163
|
}
|
|
165
|
-
return h("div", { key: '
|
|
166
|
-
h("img", { key: '
|
|
164
|
+
return h("div", { key: 'a5804fccd849a4e8f2deb346479fa782113ee4d8', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '403490057cb5a5ae95b850ee7e1350d354668566', class: 'tel__wrapper--flex-label' }, h("label", { key: '64c14d728022fdf959c7710fa1c35c8e340be0cc', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '14be3f2d3fd1352f4b69fee63399b03b99dd3338', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
165
|
+
h("img", { key: 'b7e3f1d243877bc0c8911894bf4a624fc647050e', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '43e55c0e386b59b3c86d59ca5919f95c387a2049', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '9c7ba7049f325eeba05b6bfac98d10093a2342fc', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '24b4723063ce7724c2599979457986f315e7a687', 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: 'd95f2dc869e4ba7ecfc7ff6b0122f5dad3c34f27', class: 'tel__error-message' }, this.errorMessage));
|
|
167
166
|
}
|
|
168
167
|
static get is() { return "tel-input"; }
|
|
169
168
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,7 +3,13 @@ import { translate } from "../../utils/locale.utils";
|
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
4
|
export class ToggleCheckboxInput {
|
|
5
5
|
constructor() {
|
|
6
|
+
this.callBackObject = {};
|
|
7
|
+
this.subFieldsObject = {};
|
|
6
8
|
this.value = '';
|
|
9
|
+
this.handleRevealField = (event, fieldName) => {
|
|
10
|
+
event.stopPropagation();
|
|
11
|
+
window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
|
|
12
|
+
};
|
|
7
13
|
this.setClientStyling = () => {
|
|
8
14
|
let sheet = document.createElement('style');
|
|
9
15
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -50,6 +56,14 @@ export class ToggleCheckboxInput {
|
|
|
50
56
|
}
|
|
51
57
|
// end custom styling area
|
|
52
58
|
}
|
|
59
|
+
componentDidLoad() {
|
|
60
|
+
if (this.options.length === 0)
|
|
61
|
+
return;
|
|
62
|
+
this.options.forEach((subField) => {
|
|
63
|
+
this.callBackObject[subField.name] = (e) => { this.handleRevealField(e, subField.name); };
|
|
64
|
+
this.subFieldsObject[subField.name].addEventListener('click', this.callBackObject[subField.name]);
|
|
65
|
+
});
|
|
66
|
+
}
|
|
53
67
|
handleClick() {
|
|
54
68
|
this.showFields = this.checkboxReference.checked;
|
|
55
69
|
this.errorMessage = this.setErrorMessage();
|
|
@@ -64,6 +78,11 @@ export class ToggleCheckboxInput {
|
|
|
64
78
|
return translate('requiredError', this.language);
|
|
65
79
|
}
|
|
66
80
|
}
|
|
81
|
+
disconnectedCallback() {
|
|
82
|
+
this.options.forEach((subField) => {
|
|
83
|
+
this.subFieldsObject[subField.name].removeEventListener('click', this.callBackObject[subField.name]);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
67
86
|
renderLabel() {
|
|
68
87
|
return (h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
69
88
|
}
|
|
@@ -74,9 +93,9 @@ export class ToggleCheckboxInput {
|
|
|
74
93
|
return null;
|
|
75
94
|
}
|
|
76
95
|
render() {
|
|
77
|
-
return h("div", { key: '
|
|
78
|
-
h("img", { key: '
|
|
79
|
-
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 });
|
|
96
|
+
return h("div", { key: 'd7084a7f82d45b3d1e7f8ae373b663b2aefdf5ec', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'f065f4611805dd8490234bcec1fecdbcfcaefab8', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: 'c5196d5a4cd2f114a610037285ee644fcabc37bd', 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: '06d5db0994272ec9dde1b5cd0d525bb53ff1a058', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'aff16ac9ed0adb896f2c1822014c5c8c4d6db2d4', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: '6b049cecc095a2127eb566f50fd0f8feaa8cb3d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '372c3eb72cffd482fe1c179047ec3900cef00d46', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
98
|
+
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 });
|
|
80
99
|
})));
|
|
81
100
|
}
|
|
82
101
|
static get is() { return "toggle-checkbox-input"; }
|