@everymatrix/general-registration 1.65.5 → 1.66.1
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.
|
@@ -13779,7 +13779,7 @@ const RadioInput = class {
|
|
|
13779
13779
|
};
|
|
13780
13780
|
RadioInput.style = RadioInputStyle0;
|
|
13781
13781
|
|
|
13782
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
13782
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
13783
13783
|
const SelectInputStyle0 = selectInputCss;
|
|
13784
13784
|
|
|
13785
13785
|
const SelectInput = class {
|
|
@@ -13788,7 +13788,7 @@ const SelectInput = class {
|
|
|
13788
13788
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
13789
13789
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
13790
13790
|
this.touched = false;
|
|
13791
|
-
this.
|
|
13791
|
+
this.handleComboChange = (event) => {
|
|
13792
13792
|
this.touched = true;
|
|
13793
13793
|
const selectedValue = event.target.value;
|
|
13794
13794
|
// Find the original option based on case-insensitive comparison
|
|
@@ -13804,12 +13804,23 @@ const SelectInput = class {
|
|
|
13804
13804
|
this.emitValueHandler(true);
|
|
13805
13805
|
};
|
|
13806
13806
|
this.handleBlur = (event) => {
|
|
13807
|
-
|
|
13807
|
+
const field = event.currentTarget;
|
|
13808
|
+
if (field.opened)
|
|
13809
|
+
return;
|
|
13808
13810
|
this.touched = true;
|
|
13811
|
+
this.value = field.value;
|
|
13809
13812
|
this.isValid = this.setValidity();
|
|
13810
13813
|
this.errorMessage = this.setErrorMessage();
|
|
13811
13814
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13812
13815
|
};
|
|
13816
|
+
this.handleSelectChange = (event) => {
|
|
13817
|
+
this.touched = true;
|
|
13818
|
+
this.value = event.target.value;
|
|
13819
|
+
this.isValid = this.setValidity();
|
|
13820
|
+
this.errorMessage = this.setErrorMessage();
|
|
13821
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13822
|
+
this.emitValueHandler(true);
|
|
13823
|
+
};
|
|
13813
13824
|
this.setClientStyling = () => {
|
|
13814
13825
|
let sheet = document.createElement('style');
|
|
13815
13826
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -13854,29 +13865,32 @@ const SelectInput = class {
|
|
|
13854
13865
|
this.sendInputValue.emit(inputValueEvent);
|
|
13855
13866
|
}
|
|
13856
13867
|
handleClickOutside(event) {
|
|
13857
|
-
//Check for empty field when closing the dropdown
|
|
13858
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
13859
|
-
this.errorMessage = this.setErrorMessage();
|
|
13860
13868
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
13861
13869
|
return;
|
|
13862
13870
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
13863
13871
|
this.showTooltip = false;
|
|
13864
13872
|
}
|
|
13865
13873
|
connectedCallback() {
|
|
13874
|
+
var _a;
|
|
13866
13875
|
this.displayedOptions = this.options.map(option => ({
|
|
13867
13876
|
label: option.label,
|
|
13868
13877
|
value: option.value
|
|
13869
13878
|
}));
|
|
13879
|
+
// Use the searchable select if there are more then 6 values
|
|
13880
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13870
13881
|
}
|
|
13871
13882
|
componentWillLoad() {
|
|
13872
13883
|
if (this.action && !this.options.length) {
|
|
13873
13884
|
if (this.action.split(" ")[0] == 'GET') {
|
|
13874
13885
|
const endpoint = this.action.split(" ")[1];
|
|
13875
13886
|
return this.getOptions(endpoint).then((options) => {
|
|
13887
|
+
var _a;
|
|
13876
13888
|
const firstKey = Object.keys(options)[0];
|
|
13877
13889
|
this.displayedOptions = options[firstKey].map(option => {
|
|
13878
13890
|
return { label: option.Name, value: option.Alpha2Code };
|
|
13879
13891
|
});
|
|
13892
|
+
// Use the searchable select if there are more then 6 values
|
|
13893
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13880
13894
|
});
|
|
13881
13895
|
}
|
|
13882
13896
|
}
|
|
@@ -13914,10 +13928,14 @@ const SelectInput = class {
|
|
|
13914
13928
|
});
|
|
13915
13929
|
}
|
|
13916
13930
|
setValidity() {
|
|
13917
|
-
|
|
13931
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
13932
|
+
return this.vaadinCombo.validate();
|
|
13933
|
+
}
|
|
13934
|
+
return false;
|
|
13918
13935
|
}
|
|
13919
13936
|
setErrorMessage() {
|
|
13920
|
-
|
|
13937
|
+
var _a, _b, _c;
|
|
13938
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
13921
13939
|
return translate$1('requiredError', this.language);
|
|
13922
13940
|
}
|
|
13923
13941
|
}
|
|
@@ -13928,12 +13946,15 @@ const SelectInput = class {
|
|
|
13928
13946
|
return null;
|
|
13929
13947
|
}
|
|
13930
13948
|
render() {
|
|
13949
|
+
var _a, _b;
|
|
13931
13950
|
let invalidClass = '';
|
|
13932
13951
|
if (this.touched) {
|
|
13933
13952
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13934
13953
|
}
|
|
13935
|
-
return index.h("div", { key: '
|
|
13936
|
-
index.h("img", { key: '
|
|
13954
|
+
return index.h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, index.h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
13955
|
+
index.h("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.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 })
|
|
13956
|
+
:
|
|
13957
|
+
index.h("vaadin-select", { 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: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, onBlur: this.handleBlur }), index.h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
13937
13958
|
}
|
|
13938
13959
|
static get watchers() { return {
|
|
13939
13960
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14111,8 +14132,8 @@ const TelInput = class {
|
|
|
14111
14132
|
if (this.touched) {
|
|
14112
14133
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14113
14134
|
}
|
|
14114
|
-
return index.h("div", { key: '
|
|
14115
|
-
index.h("img", { key: '
|
|
14135
|
+
return index.h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
14136
|
+
index.h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', 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 })), index.h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
14116
14137
|
}
|
|
14117
14138
|
static get watchers() { return {
|
|
14118
14139
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14298,8 +14319,8 @@ const TextInput = class {
|
|
|
14298
14319
|
if (this.touched) {
|
|
14299
14320
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14300
14321
|
}
|
|
14301
|
-
return index.h("div", { key: '
|
|
14302
|
-
index.h("img", { key: '
|
|
14322
|
+
return index.h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, index.h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
14323
|
+
index.h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', 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 }), index.h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
14303
14324
|
}
|
|
14304
14325
|
static get watchers() { return {
|
|
14305
14326
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14407,8 +14428,8 @@ const ToggleCheckboxInput = class {
|
|
|
14407
14428
|
return null;
|
|
14408
14429
|
}
|
|
14409
14430
|
render() {
|
|
14410
|
-
return index.h("div", { key: '
|
|
14411
|
-
index.h("img", { key: '
|
|
14431
|
+
return index.h("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', 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: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
14432
|
+
index.h("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
14412
14433
|
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 });
|
|
14413
14434
|
})));
|
|
14414
14435
|
}
|
|
@@ -13775,7 +13775,7 @@ const RadioInput = class {
|
|
|
13775
13775
|
};
|
|
13776
13776
|
RadioInput.style = RadioInputStyle0;
|
|
13777
13777
|
|
|
13778
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
13778
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
13779
13779
|
const SelectInputStyle0 = selectInputCss;
|
|
13780
13780
|
|
|
13781
13781
|
const SelectInput = class {
|
|
@@ -13784,7 +13784,7 @@ const SelectInput = class {
|
|
|
13784
13784
|
this.sendValidityState = createEvent(this, "sendValidityState", 7);
|
|
13785
13785
|
this.sendInputValue = createEvent(this, "sendInputValue", 7);
|
|
13786
13786
|
this.touched = false;
|
|
13787
|
-
this.
|
|
13787
|
+
this.handleComboChange = (event) => {
|
|
13788
13788
|
this.touched = true;
|
|
13789
13789
|
const selectedValue = event.target.value;
|
|
13790
13790
|
// Find the original option based on case-insensitive comparison
|
|
@@ -13800,12 +13800,23 @@ const SelectInput = class {
|
|
|
13800
13800
|
this.emitValueHandler(true);
|
|
13801
13801
|
};
|
|
13802
13802
|
this.handleBlur = (event) => {
|
|
13803
|
-
|
|
13803
|
+
const field = event.currentTarget;
|
|
13804
|
+
if (field.opened)
|
|
13805
|
+
return;
|
|
13804
13806
|
this.touched = true;
|
|
13807
|
+
this.value = field.value;
|
|
13805
13808
|
this.isValid = this.setValidity();
|
|
13806
13809
|
this.errorMessage = this.setErrorMessage();
|
|
13807
13810
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13808
13811
|
};
|
|
13812
|
+
this.handleSelectChange = (event) => {
|
|
13813
|
+
this.touched = true;
|
|
13814
|
+
this.value = event.target.value;
|
|
13815
|
+
this.isValid = this.setValidity();
|
|
13816
|
+
this.errorMessage = this.setErrorMessage();
|
|
13817
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13818
|
+
this.emitValueHandler(true);
|
|
13819
|
+
};
|
|
13809
13820
|
this.setClientStyling = () => {
|
|
13810
13821
|
let sheet = document.createElement('style');
|
|
13811
13822
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -13850,29 +13861,32 @@ const SelectInput = class {
|
|
|
13850
13861
|
this.sendInputValue.emit(inputValueEvent);
|
|
13851
13862
|
}
|
|
13852
13863
|
handleClickOutside(event) {
|
|
13853
|
-
//Check for empty field when closing the dropdown
|
|
13854
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
13855
|
-
this.errorMessage = this.setErrorMessage();
|
|
13856
13864
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
13857
13865
|
return;
|
|
13858
13866
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
13859
13867
|
this.showTooltip = false;
|
|
13860
13868
|
}
|
|
13861
13869
|
connectedCallback() {
|
|
13870
|
+
var _a;
|
|
13862
13871
|
this.displayedOptions = this.options.map(option => ({
|
|
13863
13872
|
label: option.label,
|
|
13864
13873
|
value: option.value
|
|
13865
13874
|
}));
|
|
13875
|
+
// Use the searchable select if there are more then 6 values
|
|
13876
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13866
13877
|
}
|
|
13867
13878
|
componentWillLoad() {
|
|
13868
13879
|
if (this.action && !this.options.length) {
|
|
13869
13880
|
if (this.action.split(" ")[0] == 'GET') {
|
|
13870
13881
|
const endpoint = this.action.split(" ")[1];
|
|
13871
13882
|
return this.getOptions(endpoint).then((options) => {
|
|
13883
|
+
var _a;
|
|
13872
13884
|
const firstKey = Object.keys(options)[0];
|
|
13873
13885
|
this.displayedOptions = options[firstKey].map(option => {
|
|
13874
13886
|
return { label: option.Name, value: option.Alpha2Code };
|
|
13875
13887
|
});
|
|
13888
|
+
// Use the searchable select if there are more then 6 values
|
|
13889
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13876
13890
|
});
|
|
13877
13891
|
}
|
|
13878
13892
|
}
|
|
@@ -13910,10 +13924,14 @@ const SelectInput = class {
|
|
|
13910
13924
|
});
|
|
13911
13925
|
}
|
|
13912
13926
|
setValidity() {
|
|
13913
|
-
|
|
13927
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
13928
|
+
return this.vaadinCombo.validate();
|
|
13929
|
+
}
|
|
13930
|
+
return false;
|
|
13914
13931
|
}
|
|
13915
13932
|
setErrorMessage() {
|
|
13916
|
-
|
|
13933
|
+
var _a, _b, _c;
|
|
13934
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
13917
13935
|
return translate$1('requiredError', this.language);
|
|
13918
13936
|
}
|
|
13919
13937
|
}
|
|
@@ -13924,12 +13942,15 @@ const SelectInput = class {
|
|
|
13924
13942
|
return null;
|
|
13925
13943
|
}
|
|
13926
13944
|
render() {
|
|
13945
|
+
var _a, _b;
|
|
13927
13946
|
let invalidClass = '';
|
|
13928
13947
|
if (this.touched) {
|
|
13929
13948
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13930
13949
|
}
|
|
13931
|
-
return h$1("div", { key: '
|
|
13932
|
-
h$1("img", { key: '
|
|
13950
|
+
return h$1("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, h$1("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$1("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
13951
|
+
h$1("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? h$1("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 })
|
|
13952
|
+
:
|
|
13953
|
+
h$1("vaadin-select", { 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: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, onBlur: this.handleBlur }), h$1("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
13933
13954
|
}
|
|
13934
13955
|
static get watchers() { return {
|
|
13935
13956
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14107,8 +14128,8 @@ const TelInput = class {
|
|
|
14107
14128
|
if (this.touched) {
|
|
14108
14129
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14109
14130
|
}
|
|
14110
|
-
return h$1("div", { key: '
|
|
14111
|
-
h$1("img", { key: '
|
|
14131
|
+
return h$1("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, h$1("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
14132
|
+
h$1("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, h$1("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h$1("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', 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$1("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
14112
14133
|
}
|
|
14113
14134
|
static get watchers() { return {
|
|
14114
14135
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14294,8 +14315,8 @@ const TextInput = class {
|
|
|
14294
14315
|
if (this.touched) {
|
|
14295
14316
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14296
14317
|
}
|
|
14297
|
-
return h$1("div", { key: '
|
|
14298
|
-
h$1("img", { key: '
|
|
14318
|
+
return h$1("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h$1("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, h$1("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
14319
|
+
h$1("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', 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$1("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
14299
14320
|
}
|
|
14300
14321
|
static get watchers() { return {
|
|
14301
14322
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14403,8 +14424,8 @@ const ToggleCheckboxInput = class {
|
|
|
14403
14424
|
return null;
|
|
14404
14425
|
}
|
|
14405
14426
|
render() {
|
|
14406
|
-
return h$1("div", { key: '
|
|
14407
|
-
h$1("img", { key: '
|
|
14427
|
+
return h$1("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, h$1("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', 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$1("small", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), h$1("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
14428
|
+
h$1("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h$1("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
14408
14429
|
return h$1("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 });
|
|
14409
14430
|
})));
|
|
14410
14431
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-59a2915a.js";export{s as setNonce}from"./p-59a2915a.js";import{g as i}from"./p-e1255160.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((async e=>(await i(),l([["p-
|
|
1
|
+
import{p as e,b as l}from"./p-59a2915a.js";export{s as setNonce}from"./p-59a2915a.js";import{g as i}from"./p-e1255160.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((async e=>(await i(),l([["p-6dad2d58",[[1,"general-registration",{endpoint:[513],language:[513],clientStyling:[1537,"client-styling"],mbSource:[1,"mb-source"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],dateFormat:[513,"date-format"],buttonInsideForm:[516,"button-inside-form"],btag:[513],emitOnClick:[516,"emit-on-click"],errorMessage:[32],isFormValid:[32],isConsentValid:[32],isConsentReady:[32],isLoading:[32],isLoadingPOST:[32],registrationStep:[32],forms:[32],limitStylingAppends:[32],autofilled:[32],isInitalInteraction:[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"],[8,"message","messageHandler"]],{registrationStep:["sendStep"],clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"],forms:["setFormValidity"],btag:["addBtag"]}],[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"],emitOnClick:[516,"emit-on-click"]}],[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"]}],[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32],showCheckboxes:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],emitOnClick:[516,"emit-on-click"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],value:["valueChanged"],emitValue:["emitValueHandler"]}],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}]]]],e))));
|