@everymatrix/general-registration 1.64.0 → 1.64.2
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.
|
@@ -5582,14 +5582,14 @@ const DateInput = class {
|
|
|
5582
5582
|
}
|
|
5583
5583
|
}
|
|
5584
5584
|
setErrorMessage() {
|
|
5585
|
-
if (
|
|
5586
|
-
return translate$1('
|
|
5585
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5586
|
+
return translate$1('requiredError', this.language);
|
|
5587
5587
|
}
|
|
5588
5588
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
5589
5589
|
return translate$1('dateError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
5590
5590
|
}
|
|
5591
|
-
if (this.
|
|
5592
|
-
return translate$1('
|
|
5591
|
+
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
5592
|
+
return translate$1('dateError2', this.language);
|
|
5593
5593
|
}
|
|
5594
5594
|
}
|
|
5595
5595
|
renderTooltip() {
|
|
@@ -5603,8 +5603,8 @@ const DateInput = class {
|
|
|
5603
5603
|
if (this.touched) {
|
|
5604
5604
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5605
5605
|
}
|
|
5606
|
-
return index.h("div", { key: '
|
|
5607
|
-
index.h("img", { key: '
|
|
5606
|
+
return index.h("div", { key: 'fe4318723f3be85d48c56210dae9eea53187ad75', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e34777bbadaa76f2d9adb2e525c07baf4460616e', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: 'e2b972f58bd2e688fef70afaa340c5fb70f9e2b4', 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 }), index.h("small", { key: '7a9d3342628bfd7f2798a6563a69ab7010c3075f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5607
|
+
index.h("img", { key: '04745e1bd587042af44784b3c46fbf2d0174af1f', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5608
5608
|
}
|
|
5609
5609
|
get element() { return index.getElement(this); }
|
|
5610
5610
|
static get watchers() { return {
|
|
@@ -5727,16 +5727,16 @@ const EmailInput = class {
|
|
|
5727
5727
|
}
|
|
5728
5728
|
setErrorMessage() {
|
|
5729
5729
|
var _a, _b, _c, _d;
|
|
5730
|
-
if (this.inputReference.validity.
|
|
5731
|
-
|
|
5732
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5733
|
-
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
5730
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5731
|
+
return translate$1('requiredError', this.language);
|
|
5734
5732
|
}
|
|
5735
5733
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5736
5734
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5737
5735
|
}
|
|
5738
|
-
if (this.inputReference.validity.
|
|
5739
|
-
|
|
5736
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
5737
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
5738
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5739
|
+
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
5740
5740
|
}
|
|
5741
5741
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
5742
5742
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -5755,8 +5755,8 @@ const EmailInput = class {
|
|
|
5755
5755
|
if (this.touched) {
|
|
5756
5756
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5757
5757
|
}
|
|
5758
|
-
return index.h("div", { key: '
|
|
5759
|
-
index.h("img", { key: '
|
|
5758
|
+
return index.h("div", { key: '8cc90cea4b25fcd2fe05c9b6c609dc37a84d28a1', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '43d0be5a1fecc1fa937323746362c2daa55863a8', class: 'email__wrapper--flex' }, index.h("label", { key: '082b86cae6d59f2b2b025801373ae2f9efe7ef7a', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '57a25e865a0bb7376d675195940046be19066caa', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
5759
|
+
index.h("img", { key: '8e720b021706191a33a39cc62e29b8acb747e740', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '93cbeb1fcc0d5b992b9fb171b4d47b700087f284', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '0eab5e5e8cd4a525f2160637af1be9c2e4d313c1', class: 'email__error-message' }, this.errorMessage));
|
|
5760
5760
|
}
|
|
5761
5761
|
static get watchers() { return {
|
|
5762
5762
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12301,16 +12301,16 @@ const NumberInput = class {
|
|
|
12301
12301
|
}
|
|
12302
12302
|
setErrorMessage() {
|
|
12303
12303
|
var _a, _b;
|
|
12304
|
-
if (this.inputReference.validity.
|
|
12305
|
-
|
|
12306
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12307
|
-
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12304
|
+
if (this.inputReference.validity.valueMissing) {
|
|
12305
|
+
return translate$1('requiredError', this.language);
|
|
12308
12306
|
}
|
|
12309
12307
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
12310
12308
|
return translate$1('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
12311
12309
|
}
|
|
12312
|
-
if (this.inputReference.validity.
|
|
12313
|
-
|
|
12310
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
12311
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
12312
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12313
|
+
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12314
12314
|
}
|
|
12315
12315
|
}
|
|
12316
12316
|
renderTooltip() {
|
|
@@ -12324,8 +12324,8 @@ const NumberInput = class {
|
|
|
12324
12324
|
if (this.touched) {
|
|
12325
12325
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12326
12326
|
}
|
|
12327
|
-
return index.h("div", { key: '
|
|
12328
|
-
index.h("img", { key: '
|
|
12327
|
+
return index.h("div", { key: '414aaa50eb36153d2879bc9c6d1024dd1def2712', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b607615d56849a46aa0a33c47795a43c0b4f0d3f', class: 'number__wrapper--flex' }, index.h("label", { key: '109e742b76a4bdc539fb0299d9249ee7eddb088d', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '951f79012890dc185e9eb27e30f107a77df7fa09', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
12328
|
+
index.h("img", { key: '7f9721c37bfb782bfd43ce948f94c113333a0e4d', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '58f9b28983789f1a7525b3a9c30ab4c1fbaa9ab1', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '800f10c617221358f2d349b39e7831116f931f08', class: 'number__error-message' }, this.errorMessage));
|
|
12329
12329
|
}
|
|
12330
12330
|
static get watchers() { return {
|
|
12331
12331
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12523,6 +12523,12 @@ const PasswordInput = class {
|
|
|
12523
12523
|
}
|
|
12524
12524
|
setErrorMessage() {
|
|
12525
12525
|
var _a, _b, _c, _d;
|
|
12526
|
+
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
12527
|
+
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
12528
|
+
}
|
|
12529
|
+
if (this.inputReference.validity.valueMissing) {
|
|
12530
|
+
return translate$1('requiredError', this.language);
|
|
12531
|
+
}
|
|
12526
12532
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
12527
12533
|
return translate$1('invalidOriginalPasswordError', this.language);
|
|
12528
12534
|
}
|
|
@@ -12531,12 +12537,6 @@ const PasswordInput = class {
|
|
|
12531
12537
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12532
12538
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12533
12539
|
}
|
|
12534
|
-
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
12535
|
-
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
12536
|
-
}
|
|
12537
|
-
if (this.inputReference.validity.valueMissing) {
|
|
12538
|
-
return translate$1('requiredError', this.language);
|
|
12539
|
-
}
|
|
12540
12540
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
12541
12541
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
12542
12542
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
@@ -12563,8 +12563,8 @@ const PasswordInput = class {
|
|
|
12563
12563
|
if (this.touched) {
|
|
12564
12564
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12565
12565
|
}
|
|
12566
|
-
return index.h("div", { key: '
|
|
12567
|
-
index.h("img", { key: '
|
|
12566
|
+
return index.h("div", { key: '7df2b034611f7384a1eb4470e39ee580e0ae6ce5', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'fbf309a458ccfd7c7133b7f65fafc061ad7e5c37', class: 'password__wrapper--flex' }, index.h("label", { key: 'f15c05d6fa8690d6a120ab2ad56127665618cb94', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'd191b29e231685f0ceb7e42f9b1e9471450662bd', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
12567
|
+
index.h("img", { key: '23052474b109d273ba94e80cbd9d72986c373910', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'cfd7bb8bf495f77037f2a519701e609f18ce072f', 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 }), index.h("small", { key: 'e8aa77d19ed2497659f784da065720be6fa64bfd', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
12568
12568
|
}
|
|
12569
12569
|
get element() { return index.getElement(this); }
|
|
12570
12570
|
static get watchers() { return {
|
|
@@ -12670,7 +12670,7 @@ const RadioInput = class {
|
|
|
12670
12670
|
};
|
|
12671
12671
|
RadioInput.style = RadioInputStyle0;
|
|
12672
12672
|
|
|
12673
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}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
|
|
12673
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}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:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.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))}";
|
|
12674
12674
|
const SelectInputStyle0 = selectInputCss;
|
|
12675
12675
|
|
|
12676
12676
|
const SelectInput = class {
|
|
@@ -12745,6 +12745,9 @@ const SelectInput = class {
|
|
|
12745
12745
|
this.sendInputValue.emit(inputValueEvent);
|
|
12746
12746
|
}
|
|
12747
12747
|
handleClickOutside(event) {
|
|
12748
|
+
//Check for empty field when closing the dropdown
|
|
12749
|
+
if (this.vaadinCombo.attributes['invalid'])
|
|
12750
|
+
this.errorMessage = this.setErrorMessage();
|
|
12748
12751
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
12749
12752
|
return;
|
|
12750
12753
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
@@ -12753,7 +12756,7 @@ const SelectInput = class {
|
|
|
12753
12756
|
connectedCallback() {
|
|
12754
12757
|
this.displayedOptions = this.options.map(option => ({
|
|
12755
12758
|
label: option.label,
|
|
12756
|
-
value: option.value
|
|
12759
|
+
value: option.value
|
|
12757
12760
|
}));
|
|
12758
12761
|
}
|
|
12759
12762
|
componentWillLoad() {
|
|
@@ -12779,12 +12782,14 @@ const SelectInput = class {
|
|
|
12779
12782
|
// end custom styling area
|
|
12780
12783
|
}
|
|
12781
12784
|
componentDidLoad() {
|
|
12782
|
-
this.inputReference = this.
|
|
12783
|
-
this.isValid = this.setValidity();
|
|
12785
|
+
this.inputReference = this.vaadinCombo.querySelector('input');
|
|
12784
12786
|
if (this.defaultValue) {
|
|
12785
|
-
this.value
|
|
12787
|
+
const defaultOption = this.displayedOptions.find(option => option.value.toUpperCase() === this.defaultValue.toUpperCase());
|
|
12788
|
+
this.value = defaultOption.value;
|
|
12786
12789
|
this.valueHandler({ name: this.name, value: this.value });
|
|
12790
|
+
this.inputReference.value = this.value;
|
|
12787
12791
|
}
|
|
12792
|
+
this.isValid = this.setValidity();
|
|
12788
12793
|
}
|
|
12789
12794
|
getOptions(endpoint) {
|
|
12790
12795
|
const url = new URL(endpoint);
|
|
@@ -12818,10 +12823,9 @@ const SelectInput = class {
|
|
|
12818
12823
|
if (this.touched) {
|
|
12819
12824
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12820
12825
|
}
|
|
12821
|
-
return index.h("div", { key: '
|
|
12822
|
-
index.h("img", { key: '
|
|
12826
|
+
return index.h("div", { key: '0b687e6a1bc7ec0cb6dba02c41b04315f4196fcf', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8c9d7987b209bc6ee991535fa91abf874d06046f', class: 'select__wrapper--flex' }, index.h("label", { key: 'f11ccc0c319bf3053615e4b7cdff8e640a9d2318', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: 'd2dd7a3b1d8a20ccb9b1222cb30835ed0193a39c', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
12827
|
+
index.h("img", { key: 'bae994b4791c2afeb2fb8b15db1c4198ab9f8502', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { key: '58e05a1edbce76612f93f2b7aac63360479b3c0a', 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: this.validation.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), index.h("small", { key: '1f3a5ea3b1611b53e04deb8e903ab1785daaadb6', class: 'select__error-message' }, this.errorMessage));
|
|
12823
12828
|
}
|
|
12824
|
-
get element() { return index.getElement(this); }
|
|
12825
12829
|
static get watchers() { return {
|
|
12826
12830
|
"clientStyling": ["handleStylingChange"],
|
|
12827
12831
|
"isValid": ["validityChanged"],
|
|
@@ -12830,7 +12834,7 @@ const SelectInput = class {
|
|
|
12830
12834
|
};
|
|
12831
12835
|
SelectInput.style = SelectInputStyle0;
|
|
12832
12836
|
|
|
12833
|
-
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emw--color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.tel__wrapper--flex--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.
|
|
12837
|
+
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emw--color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__wrapper .text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.tel__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))}.tel__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.tel__prefix{--vaadin-field-default-width:90px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 5px 5px 0;background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;border:none;border-right:2px solid #DDE0EE;border-image-source:linear-gradient(to bottom, rgba(221, 224, 238, 0) 25%, rgb(221, 224, 238) 25%, rgb(221, 224, 238) 75%, rgba(221, 224, 238, 0) 75%);border-image-slice:1;border-image-repeat:round}.tel__prefix::part(input-field):hover{background-color:var(--emw--color-white, #FFFFFF)}.tel__prefix::part(toggle-button){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__input{font-family:inherit;border-radius:5px;width:100%;color:var(--emw--registration-typography, var(--emw--color-black, #000000));background-color:var(--emw--color-white, #FFFFFF);border:none;width:inherit;position:relative;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:42px;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input::placeholder{color:var(--emw--color-gray-150, #979797)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
|
|
12834
12838
|
const TelInputStyle0 = telInputCss;
|
|
12835
12839
|
|
|
12836
12840
|
const TelInput = class {
|
|
@@ -13155,16 +13159,16 @@ const TextInput = class {
|
|
|
13155
13159
|
}
|
|
13156
13160
|
setErrorMessage() {
|
|
13157
13161
|
var _a, _b, _c, _d;
|
|
13158
|
-
if (this.inputReference.
|
|
13159
|
-
|
|
13160
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
13161
|
-
return translate$1(`${errorCode}`, this.language) || errorMessage;
|
|
13162
|
+
if (this.inputReference.validity.valueMissing) {
|
|
13163
|
+
return translate$1('requiredError', this.language);
|
|
13162
13164
|
}
|
|
13163
13165
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
13164
13166
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
13165
13167
|
}
|
|
13166
|
-
if (this.inputReference.
|
|
13167
|
-
|
|
13168
|
+
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
13169
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
13170
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
13171
|
+
return translate$1(`${errorCode}`, this.language) || errorMessage;
|
|
13168
13172
|
}
|
|
13169
13173
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
13170
13174
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -13183,8 +13187,8 @@ const TextInput = class {
|
|
|
13183
13187
|
if (this.touched) {
|
|
13184
13188
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13185
13189
|
}
|
|
13186
|
-
return index.h("div", { key: '
|
|
13187
|
-
index.h("img", { key: '
|
|
13190
|
+
return index.h("div", { key: '595920d75e3dd31983cb3de2f87f9bf7462b6a8c', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'afe2809f25910d410b065d103da3e34661d0dc64', class: 'text__wrapper--flex' }, index.h("label", { key: 'ed56095473fbe54d94fcb73fb514a51c4227d100', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '5607fe6a0a3aa0cafe7ec666f13978ad733ad50b', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
13191
|
+
index.h("img", { key: '7ad043b188eb69b3bbbe1f94b4aa72f8bffbf427', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'f12b4719ef033586ca31dd51f52f67205edbd230', 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: '11b544ac942b17b513f76f2d081898995057721b', class: 'text__error-message' }, this.errorMessage));
|
|
13188
13192
|
}
|
|
13189
13193
|
static get watchers() { return {
|
|
13190
13194
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5578,14 +5578,14 @@ const DateInput = class {
|
|
|
5578
5578
|
}
|
|
5579
5579
|
}
|
|
5580
5580
|
setErrorMessage() {
|
|
5581
|
-
if (
|
|
5582
|
-
return translate$1('
|
|
5581
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5582
|
+
return translate$1('requiredError', this.language);
|
|
5583
5583
|
}
|
|
5584
5584
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
5585
5585
|
return translate$1('dateError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
5586
5586
|
}
|
|
5587
|
-
if (this.
|
|
5588
|
-
return translate$1('
|
|
5587
|
+
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
5588
|
+
return translate$1('dateError2', this.language);
|
|
5589
5589
|
}
|
|
5590
5590
|
}
|
|
5591
5591
|
renderTooltip() {
|
|
@@ -5599,8 +5599,8 @@ const DateInput = class {
|
|
|
5599
5599
|
if (this.touched) {
|
|
5600
5600
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5601
5601
|
}
|
|
5602
|
-
return h$1("div", { key: '
|
|
5603
|
-
h$1("img", { key: '
|
|
5602
|
+
return h$1("div", { key: 'fe4318723f3be85d48c56210dae9eea53187ad75', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("label", { key: 'e34777bbadaa76f2d9adb2e525c07baf4460616e', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$1("vaadin-date-picker", { key: 'e2b972f58bd2e688fef70afaa340c5fb70f9e2b4', 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$1("small", { key: '7a9d3342628bfd7f2798a6563a69ab7010c3075f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5603
|
+
h$1("img", { key: '04745e1bd587042af44784b3c46fbf2d0174af1f', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5604
5604
|
}
|
|
5605
5605
|
get element() { return getElement(this); }
|
|
5606
5606
|
static get watchers() { return {
|
|
@@ -5723,16 +5723,16 @@ const EmailInput = class {
|
|
|
5723
5723
|
}
|
|
5724
5724
|
setErrorMessage() {
|
|
5725
5725
|
var _a, _b, _c, _d;
|
|
5726
|
-
if (this.inputReference.validity.
|
|
5727
|
-
|
|
5728
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5729
|
-
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
5726
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5727
|
+
return translate$1('requiredError', this.language);
|
|
5730
5728
|
}
|
|
5731
5729
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5732
5730
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5733
5731
|
}
|
|
5734
|
-
if (this.inputReference.validity.
|
|
5735
|
-
|
|
5732
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
5733
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
5734
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5735
|
+
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
5736
5736
|
}
|
|
5737
5737
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
5738
5738
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -5751,8 +5751,8 @@ const EmailInput = class {
|
|
|
5751
5751
|
if (this.touched) {
|
|
5752
5752
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5753
5753
|
}
|
|
5754
|
-
return h$1("div", { key: '
|
|
5755
|
-
h$1("img", { key: '
|
|
5754
|
+
return h$1("div", { key: '8cc90cea4b25fcd2fe05c9b6c609dc37a84d28a1', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '43d0be5a1fecc1fa937323746362c2daa55863a8', class: 'email__wrapper--flex' }, h$1("label", { key: '082b86cae6d59f2b2b025801373ae2f9efe7ef7a', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '57a25e865a0bb7376d675195940046be19066caa', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
5755
|
+
h$1("img", { key: '8e720b021706191a33a39cc62e29b8acb747e740', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '93cbeb1fcc0d5b992b9fb171b4d47b700087f284', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h$1("small", { key: '0eab5e5e8cd4a525f2160637af1be9c2e4d313c1', class: 'email__error-message' }, this.errorMessage));
|
|
5756
5756
|
}
|
|
5757
5757
|
static get watchers() { return {
|
|
5758
5758
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12297,16 +12297,16 @@ const NumberInput = class {
|
|
|
12297
12297
|
}
|
|
12298
12298
|
setErrorMessage() {
|
|
12299
12299
|
var _a, _b;
|
|
12300
|
-
if (this.inputReference.validity.
|
|
12301
|
-
|
|
12302
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12303
|
-
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12300
|
+
if (this.inputReference.validity.valueMissing) {
|
|
12301
|
+
return translate$1('requiredError', this.language);
|
|
12304
12302
|
}
|
|
12305
12303
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
12306
12304
|
return translate$1('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
12307
12305
|
}
|
|
12308
|
-
if (this.inputReference.validity.
|
|
12309
|
-
|
|
12306
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
12307
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
12308
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12309
|
+
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12310
12310
|
}
|
|
12311
12311
|
}
|
|
12312
12312
|
renderTooltip() {
|
|
@@ -12320,8 +12320,8 @@ const NumberInput = class {
|
|
|
12320
12320
|
if (this.touched) {
|
|
12321
12321
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12322
12322
|
}
|
|
12323
|
-
return h$1("div", { key: '
|
|
12324
|
-
h$1("img", { key: '
|
|
12323
|
+
return h$1("div", { key: '414aaa50eb36153d2879bc9c6d1024dd1def2712', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: 'b607615d56849a46aa0a33c47795a43c0b4f0d3f', class: 'number__wrapper--flex' }, h$1("label", { key: '109e742b76a4bdc539fb0299d9249ee7eddb088d', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '951f79012890dc185e9eb27e30f107a77df7fa09', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
12324
|
+
h$1("img", { key: '7f9721c37bfb782bfd43ce948f94c113333a0e4d', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '58f9b28983789f1a7525b3a9c30ab4c1fbaa9ab1', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h$1("small", { key: '800f10c617221358f2d349b39e7831116f931f08', class: 'number__error-message' }, this.errorMessage));
|
|
12325
12325
|
}
|
|
12326
12326
|
static get watchers() { return {
|
|
12327
12327
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12519,6 +12519,12 @@ const PasswordInput = class {
|
|
|
12519
12519
|
}
|
|
12520
12520
|
setErrorMessage() {
|
|
12521
12521
|
var _a, _b, _c, _d;
|
|
12522
|
+
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
12523
|
+
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
12524
|
+
}
|
|
12525
|
+
if (this.inputReference.validity.valueMissing) {
|
|
12526
|
+
return translate$1('requiredError', this.language);
|
|
12527
|
+
}
|
|
12522
12528
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
12523
12529
|
return translate$1('invalidOriginalPasswordError', this.language);
|
|
12524
12530
|
}
|
|
@@ -12527,12 +12533,6 @@ const PasswordInput = class {
|
|
|
12527
12533
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
12528
12534
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
12529
12535
|
}
|
|
12530
|
-
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
12531
|
-
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
12532
|
-
}
|
|
12533
|
-
if (this.inputReference.validity.valueMissing) {
|
|
12534
|
-
return translate$1('requiredError', this.language);
|
|
12535
|
-
}
|
|
12536
12536
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
12537
12537
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
12538
12538
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
@@ -12559,8 +12559,8 @@ const PasswordInput = class {
|
|
|
12559
12559
|
if (this.touched) {
|
|
12560
12560
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12561
12561
|
}
|
|
12562
|
-
return h$1("div", { key: '
|
|
12563
|
-
h$1("img", { key: '
|
|
12562
|
+
return h$1("div", { key: '7df2b034611f7384a1eb4470e39ee580e0ae6ce5', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: 'fbf309a458ccfd7c7133b7f65fafc061ad7e5c37', class: 'password__wrapper--flex' }, h$1("label", { key: 'f15c05d6fa8690d6a120ab2ad56127665618cb94', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: 'd191b29e231685f0ceb7e42f9b1e9471450662bd', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
12563
|
+
h$1("img", { key: '23052474b109d273ba94e80cbd9d72986c373910', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("vaadin-password-field", { key: 'cfd7bb8bf495f77037f2a519701e609f18ce072f', 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$1("small", { key: 'e8aa77d19ed2497659f784da065720be6fa64bfd', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
12564
12564
|
}
|
|
12565
12565
|
get element() { return getElement(this); }
|
|
12566
12566
|
static get watchers() { return {
|
|
@@ -12666,7 +12666,7 @@ const RadioInput = class {
|
|
|
12666
12666
|
};
|
|
12667
12667
|
RadioInput.style = RadioInputStyle0;
|
|
12668
12668
|
|
|
12669
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}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
|
|
12669
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}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:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.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))}";
|
|
12670
12670
|
const SelectInputStyle0 = selectInputCss;
|
|
12671
12671
|
|
|
12672
12672
|
const SelectInput = class {
|
|
@@ -12741,6 +12741,9 @@ const SelectInput = class {
|
|
|
12741
12741
|
this.sendInputValue.emit(inputValueEvent);
|
|
12742
12742
|
}
|
|
12743
12743
|
handleClickOutside(event) {
|
|
12744
|
+
//Check for empty field when closing the dropdown
|
|
12745
|
+
if (this.vaadinCombo.attributes['invalid'])
|
|
12746
|
+
this.errorMessage = this.setErrorMessage();
|
|
12744
12747
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
12745
12748
|
return;
|
|
12746
12749
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
@@ -12749,7 +12752,7 @@ const SelectInput = class {
|
|
|
12749
12752
|
connectedCallback() {
|
|
12750
12753
|
this.displayedOptions = this.options.map(option => ({
|
|
12751
12754
|
label: option.label,
|
|
12752
|
-
value: option.value
|
|
12755
|
+
value: option.value
|
|
12753
12756
|
}));
|
|
12754
12757
|
}
|
|
12755
12758
|
componentWillLoad() {
|
|
@@ -12775,12 +12778,14 @@ const SelectInput = class {
|
|
|
12775
12778
|
// end custom styling area
|
|
12776
12779
|
}
|
|
12777
12780
|
componentDidLoad() {
|
|
12778
|
-
this.inputReference = this.
|
|
12779
|
-
this.isValid = this.setValidity();
|
|
12781
|
+
this.inputReference = this.vaadinCombo.querySelector('input');
|
|
12780
12782
|
if (this.defaultValue) {
|
|
12781
|
-
this.value
|
|
12783
|
+
const defaultOption = this.displayedOptions.find(option => option.value.toUpperCase() === this.defaultValue.toUpperCase());
|
|
12784
|
+
this.value = defaultOption.value;
|
|
12782
12785
|
this.valueHandler({ name: this.name, value: this.value });
|
|
12786
|
+
this.inputReference.value = this.value;
|
|
12783
12787
|
}
|
|
12788
|
+
this.isValid = this.setValidity();
|
|
12784
12789
|
}
|
|
12785
12790
|
getOptions(endpoint) {
|
|
12786
12791
|
const url = new URL(endpoint);
|
|
@@ -12814,10 +12819,9 @@ const SelectInput = class {
|
|
|
12814
12819
|
if (this.touched) {
|
|
12815
12820
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12816
12821
|
}
|
|
12817
|
-
return h$1("div", { key: '
|
|
12818
|
-
h$1("img", { key: '
|
|
12822
|
+
return h$1("div", { key: '0b687e6a1bc7ec0cb6dba02c41b04315f4196fcf', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '8c9d7987b209bc6ee991535fa91abf874d06046f', class: 'select__wrapper--flex' }, h$1("label", { key: 'f11ccc0c319bf3053615e4b7cdff8e640a9d2318', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$1("div", { key: 'd2dd7a3b1d8a20ccb9b1222cb30835ed0193a39c', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
12823
|
+
h$1("img", { key: 'bae994b4791c2afeb2fb8b15db1c4198ab9f8502', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("vaadin-combo-box", { key: '58e05a1edbce76612f93f2b7aac63360479b3c0a', 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: this.validation.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h$1("small", { key: '1f3a5ea3b1611b53e04deb8e903ab1785daaadb6', class: 'select__error-message' }, this.errorMessage));
|
|
12819
12824
|
}
|
|
12820
|
-
get element() { return getElement(this); }
|
|
12821
12825
|
static get watchers() { return {
|
|
12822
12826
|
"clientStyling": ["handleStylingChange"],
|
|
12823
12827
|
"isValid": ["validityChanged"],
|
|
@@ -12826,7 +12830,7 @@ const SelectInput = class {
|
|
|
12826
12830
|
};
|
|
12827
12831
|
SelectInput.style = SelectInputStyle0;
|
|
12828
12832
|
|
|
12829
|
-
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emw--color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.tel__wrapper--flex--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.
|
|
12833
|
+
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emw--color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__wrapper .text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.tel__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))}.tel__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.tel__prefix{--vaadin-field-default-width:90px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 5px 5px 0;background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;border:none;border-right:2px solid #DDE0EE;border-image-source:linear-gradient(to bottom, rgba(221, 224, 238, 0) 25%, rgb(221, 224, 238) 25%, rgb(221, 224, 238) 75%, rgba(221, 224, 238, 0) 75%);border-image-slice:1;border-image-repeat:round}.tel__prefix::part(input-field):hover{background-color:var(--emw--color-white, #FFFFFF)}.tel__prefix::part(toggle-button){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.tel__input{font-family:inherit;border-radius:5px;width:100%;color:var(--emw--registration-typography, var(--emw--color-black, #000000));background-color:var(--emw--color-white, #FFFFFF);border:none;width:inherit;position:relative;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:42px;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input::placeholder{color:var(--emw--color-gray-150, #979797)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
|
|
12830
12834
|
const TelInputStyle0 = telInputCss;
|
|
12831
12835
|
|
|
12832
12836
|
const TelInput = class {
|
|
@@ -13151,16 +13155,16 @@ const TextInput = class {
|
|
|
13151
13155
|
}
|
|
13152
13156
|
setErrorMessage() {
|
|
13153
13157
|
var _a, _b, _c, _d;
|
|
13154
|
-
if (this.inputReference.
|
|
13155
|
-
|
|
13156
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
13157
|
-
return translate$1(`${errorCode}`, this.language) || errorMessage;
|
|
13158
|
+
if (this.inputReference.validity.valueMissing) {
|
|
13159
|
+
return translate$1('requiredError', this.language);
|
|
13158
13160
|
}
|
|
13159
13161
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
13160
13162
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
13161
13163
|
}
|
|
13162
|
-
if (this.inputReference.
|
|
13163
|
-
|
|
13164
|
+
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
13165
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
13166
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
13167
|
+
return translate$1(`${errorCode}`, this.language) || errorMessage;
|
|
13164
13168
|
}
|
|
13165
13169
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
13166
13170
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -13179,8 +13183,8 @@ const TextInput = class {
|
|
|
13179
13183
|
if (this.touched) {
|
|
13180
13184
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13181
13185
|
}
|
|
13182
|
-
return h$1("div", { key: '
|
|
13183
|
-
h$1("img", { key: '
|
|
13186
|
+
return h$1("div", { key: '595920d75e3dd31983cb3de2f87f9bf7462b6a8c', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h$1("div", { key: 'afe2809f25910d410b065d103da3e34661d0dc64', class: 'text__wrapper--flex' }, h$1("label", { key: 'ed56095473fbe54d94fcb73fb514a51c4227d100', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '5607fe6a0a3aa0cafe7ec666f13978ad733ad50b', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
13187
|
+
h$1("img", { key: '7ad043b188eb69b3bbbe1f94b4aa72f8bffbf427', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: 'f12b4719ef033586ca31dd51f52f67205edbd230', 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: '11b544ac942b17b513f76f2d081898995057721b', class: 'text__error-message' }, this.errorMessage));
|
|
13184
13188
|
}
|
|
13185
13189
|
static get watchers() { return {
|
|
13186
13190
|
"clientStyling": ["handleStylingChange"],
|