@everymatrix/general-input 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.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +51 -47
- package/dist/collection/components/date-input/date-input.js +6 -6
- package/dist/collection/components/email-input/email-input.js +8 -8
- package/dist/collection/components/number-input/number-input.js +8 -8
- package/dist/collection/components/password-input/password-input.js +8 -8
- package/dist/collection/components/select-input/select-input.css +4 -3
- package/dist/collection/components/select-input/select-input.js +11 -7
- package/dist/collection/components/tel-input/tel-input.css +3 -3
- package/dist/collection/components/text-input/text-input.js +8 -8
- package/dist/esm/checkbox-group-input_10.entry.js +51 -47
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-f873774c.entry.js → p-7f6f0312.entry.js} +1 -1
- package/dist/types/components/select-input/select-input.d.ts +1 -1
- package/package.json +1 -1
|
@@ -5427,14 +5427,14 @@ const DateInput = class {
|
|
|
5427
5427
|
}
|
|
5428
5428
|
}
|
|
5429
5429
|
setErrorMessage() {
|
|
5430
|
-
if (
|
|
5431
|
-
return locale_utils.translate('
|
|
5430
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5431
|
+
return locale_utils.translate('requiredError', this.language);
|
|
5432
5432
|
}
|
|
5433
5433
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
5434
5434
|
return locale_utils.translate('dateError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
5435
5435
|
}
|
|
5436
|
-
if (this.
|
|
5437
|
-
return locale_utils.translate('
|
|
5436
|
+
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
5437
|
+
return locale_utils.translate('dateError2', this.language);
|
|
5438
5438
|
}
|
|
5439
5439
|
}
|
|
5440
5440
|
renderTooltip() {
|
|
@@ -5448,8 +5448,8 @@ const DateInput = class {
|
|
|
5448
5448
|
if (this.touched) {
|
|
5449
5449
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5450
5450
|
}
|
|
5451
|
-
return index.h("div", { key: '
|
|
5452
|
-
index.h("img", { key: '
|
|
5451
|
+
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 &&
|
|
5452
|
+
index.h("img", { key: '04745e1bd587042af44784b3c46fbf2d0174af1f', class: 'date__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5453
5453
|
}
|
|
5454
5454
|
get element() { return index.getElement(this); }
|
|
5455
5455
|
static get watchers() { return {
|
|
@@ -5572,16 +5572,16 @@ const EmailInput = class {
|
|
|
5572
5572
|
}
|
|
5573
5573
|
setErrorMessage() {
|
|
5574
5574
|
var _a, _b, _c, _d;
|
|
5575
|
-
if (this.inputReference.validity.
|
|
5576
|
-
|
|
5577
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5578
|
-
return locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5575
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5576
|
+
return locale_utils.translate('requiredError', this.language);
|
|
5579
5577
|
}
|
|
5580
5578
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5581
5579
|
return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5582
5580
|
}
|
|
5583
|
-
if (this.inputReference.validity.
|
|
5584
|
-
|
|
5581
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
5582
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
5583
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5584
|
+
return locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5585
5585
|
}
|
|
5586
5586
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
5587
5587
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -5600,8 +5600,8 @@ const EmailInput = class {
|
|
|
5600
5600
|
if (this.touched) {
|
|
5601
5601
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5602
5602
|
}
|
|
5603
|
-
return index.h("div", { key: '
|
|
5604
|
-
index.h("img", { key: '
|
|
5603
|
+
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 &&
|
|
5604
|
+
index.h("img", { key: '8e720b021706191a33a39cc62e29b8acb747e740', class: 'email__tooltip-icon', src: tooltipIcon.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));
|
|
5605
5605
|
}
|
|
5606
5606
|
static get watchers() { return {
|
|
5607
5607
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5715,16 +5715,16 @@ const NumberInput = class {
|
|
|
5715
5715
|
}
|
|
5716
5716
|
setErrorMessage() {
|
|
5717
5717
|
var _a, _b;
|
|
5718
|
-
if (this.inputReference.validity.
|
|
5719
|
-
|
|
5720
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5721
|
-
return locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5718
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5719
|
+
return locale_utils.translate('requiredError', this.language);
|
|
5722
5720
|
}
|
|
5723
5721
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
5724
5722
|
return locale_utils.translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
5725
5723
|
}
|
|
5726
|
-
if (this.inputReference.validity.
|
|
5727
|
-
|
|
5724
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
5725
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
5726
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5727
|
+
return locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5728
5728
|
}
|
|
5729
5729
|
}
|
|
5730
5730
|
renderTooltip() {
|
|
@@ -5738,8 +5738,8 @@ const NumberInput = class {
|
|
|
5738
5738
|
if (this.touched) {
|
|
5739
5739
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5740
5740
|
}
|
|
5741
|
-
return index.h("div", { key: '
|
|
5742
|
-
index.h("img", { key: '
|
|
5741
|
+
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 &&
|
|
5742
|
+
index.h("img", { key: '7f9721c37bfb782bfd43ce948f94c113333a0e4d', class: 'number__tooltip-icon', src: tooltipIcon.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));
|
|
5743
5743
|
}
|
|
5744
5744
|
static get watchers() { return {
|
|
5745
5745
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5937,6 +5937,12 @@ const PasswordInput = class {
|
|
|
5937
5937
|
}
|
|
5938
5938
|
setErrorMessage() {
|
|
5939
5939
|
var _a, _b, _c, _d;
|
|
5940
|
+
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5941
|
+
return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5942
|
+
}
|
|
5943
|
+
if (this.inputReference.validity.valueMissing) {
|
|
5944
|
+
return locale_utils.translate('requiredError', this.language);
|
|
5945
|
+
}
|
|
5940
5946
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
5941
5947
|
return locale_utils.translate('invalidOriginalPasswordError', this.language);
|
|
5942
5948
|
}
|
|
@@ -5945,12 +5951,6 @@ const PasswordInput = class {
|
|
|
5945
5951
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5946
5952
|
return locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5947
5953
|
}
|
|
5948
|
-
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5949
|
-
return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5950
|
-
}
|
|
5951
|
-
if (this.inputReference.validity.valueMissing) {
|
|
5952
|
-
return locale_utils.translate('requiredError', this.language);
|
|
5953
|
-
}
|
|
5954
5954
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
5955
5955
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
5956
5956
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
@@ -5977,8 +5977,8 @@ const PasswordInput = class {
|
|
|
5977
5977
|
if (this.touched) {
|
|
5978
5978
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5979
5979
|
}
|
|
5980
|
-
return index.h("div", { key: '
|
|
5981
|
-
index.h("img", { key: '
|
|
5980
|
+
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 &&
|
|
5981
|
+
index.h("img", { key: '23052474b109d273ba94e80cbd9d72986c373910', class: 'password__tooltip-icon', src: tooltipIcon.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());
|
|
5982
5982
|
}
|
|
5983
5983
|
get element() { return index.getElement(this); }
|
|
5984
5984
|
static get watchers() { return {
|
|
@@ -6084,7 +6084,7 @@ const RadioInput = class {
|
|
|
6084
6084
|
};
|
|
6085
6085
|
RadioInput.style = RadioInputStyle0;
|
|
6086
6086
|
|
|
6087
|
-
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
|
|
6087
|
+
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))}";
|
|
6088
6088
|
const SelectInputStyle0 = selectInputCss;
|
|
6089
6089
|
|
|
6090
6090
|
const SelectInput = class {
|
|
@@ -6159,6 +6159,9 @@ const SelectInput = class {
|
|
|
6159
6159
|
this.sendInputValue.emit(inputValueEvent);
|
|
6160
6160
|
}
|
|
6161
6161
|
handleClickOutside(event) {
|
|
6162
|
+
//Check for empty field when closing the dropdown
|
|
6163
|
+
if (this.vaadinCombo.attributes['invalid'])
|
|
6164
|
+
this.errorMessage = this.setErrorMessage();
|
|
6162
6165
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
6163
6166
|
return;
|
|
6164
6167
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
@@ -6167,7 +6170,7 @@ const SelectInput = class {
|
|
|
6167
6170
|
connectedCallback() {
|
|
6168
6171
|
this.displayedOptions = this.options.map(option => ({
|
|
6169
6172
|
label: option.label,
|
|
6170
|
-
value: option.value
|
|
6173
|
+
value: option.value
|
|
6171
6174
|
}));
|
|
6172
6175
|
}
|
|
6173
6176
|
componentWillLoad() {
|
|
@@ -6193,12 +6196,14 @@ const SelectInput = class {
|
|
|
6193
6196
|
// end custom styling area
|
|
6194
6197
|
}
|
|
6195
6198
|
componentDidLoad() {
|
|
6196
|
-
this.inputReference = this.
|
|
6197
|
-
this.isValid = this.setValidity();
|
|
6199
|
+
this.inputReference = this.vaadinCombo.querySelector('input');
|
|
6198
6200
|
if (this.defaultValue) {
|
|
6199
|
-
this.value
|
|
6201
|
+
const defaultOption = this.displayedOptions.find(option => option.value.toUpperCase() === this.defaultValue.toUpperCase());
|
|
6202
|
+
this.value = defaultOption.value;
|
|
6200
6203
|
this.valueHandler({ name: this.name, value: this.value });
|
|
6204
|
+
this.inputReference.value = this.value;
|
|
6201
6205
|
}
|
|
6206
|
+
this.isValid = this.setValidity();
|
|
6202
6207
|
}
|
|
6203
6208
|
getOptions(endpoint) {
|
|
6204
6209
|
const url = new URL(endpoint);
|
|
@@ -6232,10 +6237,9 @@ const SelectInput = class {
|
|
|
6232
6237
|
if (this.touched) {
|
|
6233
6238
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6234
6239
|
}
|
|
6235
|
-
return index.h("div", { key: '
|
|
6236
|
-
index.h("img", { key: '
|
|
6240
|
+
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 &&
|
|
6241
|
+
index.h("img", { key: 'bae994b4791c2afeb2fb8b15db1c4198ab9f8502', class: 'select__tooltip-icon', src: tooltipIcon.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));
|
|
6237
6242
|
}
|
|
6238
|
-
get element() { return index.getElement(this); }
|
|
6239
6243
|
static get watchers() { return {
|
|
6240
6244
|
"clientStyling": ["handleStylingChange"],
|
|
6241
6245
|
"isValid": ["validityChanged"],
|
|
@@ -6244,7 +6248,7 @@ const SelectInput = class {
|
|
|
6244
6248
|
};
|
|
6245
6249
|
SelectInput.style = SelectInputStyle0;
|
|
6246
6250
|
|
|
6247
|
-
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))}.
|
|
6251
|
+
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}";
|
|
6248
6252
|
const TelInputStyle0 = telInputCss;
|
|
6249
6253
|
|
|
6250
6254
|
const TelInput = class {
|
|
@@ -6569,16 +6573,16 @@ const TextInput = class {
|
|
|
6569
6573
|
}
|
|
6570
6574
|
setErrorMessage() {
|
|
6571
6575
|
var _a, _b, _c, _d;
|
|
6572
|
-
if (this.inputReference.
|
|
6573
|
-
|
|
6574
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
6575
|
-
return locale_utils.translate(`${errorCode}`, this.language) || errorMessage;
|
|
6576
|
+
if (this.inputReference.validity.valueMissing) {
|
|
6577
|
+
return locale_utils.translate('requiredError', this.language);
|
|
6576
6578
|
}
|
|
6577
6579
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
6578
6580
|
return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
6579
6581
|
}
|
|
6580
|
-
if (this.inputReference.
|
|
6581
|
-
|
|
6582
|
+
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
6583
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
6584
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
6585
|
+
return locale_utils.translate(`${errorCode}`, this.language) || errorMessage;
|
|
6582
6586
|
}
|
|
6583
6587
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
6584
6588
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -6597,8 +6601,8 @@ const TextInput = class {
|
|
|
6597
6601
|
if (this.touched) {
|
|
6598
6602
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6599
6603
|
}
|
|
6600
|
-
return index.h("div", { key: '
|
|
6601
|
-
index.h("img", { key: '
|
|
6604
|
+
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 &&
|
|
6605
|
+
index.h("img", { key: '7ad043b188eb69b3bbbe1f94b4aa72f8bffbf427', class: 'text__tooltip-icon', src: tooltipIcon.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));
|
|
6602
6606
|
}
|
|
6603
6607
|
static get watchers() { return {
|
|
6604
6608
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -122,14 +122,14 @@ export class DateInput {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
setErrorMessage() {
|
|
125
|
-
if (
|
|
126
|
-
return translate('
|
|
125
|
+
if (this.inputReference.validity.valueMissing) {
|
|
126
|
+
return translate('requiredError', this.language);
|
|
127
127
|
}
|
|
128
128
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
129
129
|
return translate('dateError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
130
130
|
}
|
|
131
|
-
if (this.
|
|
132
|
-
return translate('
|
|
131
|
+
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
132
|
+
return translate('dateError2', this.language);
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
renderTooltip() {
|
|
@@ -143,8 +143,8 @@ export class DateInput {
|
|
|
143
143
|
if (this.touched) {
|
|
144
144
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
145
145
|
}
|
|
146
|
-
return h("div", { key: '
|
|
147
|
-
h("img", { key: '
|
|
146
|
+
return h("div", { key: 'fe4318723f3be85d48c56210dae9eea53187ad75', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'e34777bbadaa76f2d9adb2e525c07baf4460616e', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), 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 }), h("small", { key: '7a9d3342628bfd7f2798a6563a69ab7010c3075f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
147
|
+
h("img", { key: '04745e1bd587042af44784b3c46fbf2d0174af1f', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
148
148
|
}
|
|
149
149
|
static get is() { return "date-input"; }
|
|
150
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -107,16 +107,16 @@ export class EmailInput {
|
|
|
107
107
|
}
|
|
108
108
|
setErrorMessage() {
|
|
109
109
|
var _a, _b, _c, _d;
|
|
110
|
-
if (this.inputReference.validity.
|
|
111
|
-
|
|
112
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
113
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
110
|
+
if (this.inputReference.validity.valueMissing) {
|
|
111
|
+
return translate('requiredError', this.language);
|
|
114
112
|
}
|
|
115
113
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
116
114
|
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
117
115
|
}
|
|
118
|
-
if (this.inputReference.validity.
|
|
119
|
-
|
|
116
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
117
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
118
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
119
|
+
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
120
120
|
}
|
|
121
121
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
122
122
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -135,8 +135,8 @@ export class EmailInput {
|
|
|
135
135
|
if (this.touched) {
|
|
136
136
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
137
137
|
}
|
|
138
|
-
return h("div", { key: '
|
|
139
|
-
h("img", { key: '
|
|
138
|
+
return h("div", { key: '8cc90cea4b25fcd2fe05c9b6c609dc37a84d28a1', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '43d0be5a1fecc1fa937323746362c2daa55863a8', class: 'email__wrapper--flex' }, h("label", { key: '082b86cae6d59f2b2b025801373ae2f9efe7ef7a', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '57a25e865a0bb7376d675195940046be19066caa', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
139
|
+
h("img", { key: '8e720b021706191a33a39cc62e29b8acb747e740', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '0eab5e5e8cd4a525f2160637af1be9c2e4d313c1', class: 'email__error-message' }, this.errorMessage));
|
|
140
140
|
}
|
|
141
141
|
static get is() { return "email-input"; }
|
|
142
142
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,16 +99,16 @@ export class NumberInput {
|
|
|
99
99
|
}
|
|
100
100
|
setErrorMessage() {
|
|
101
101
|
var _a, _b;
|
|
102
|
-
if (this.inputReference.validity.
|
|
103
|
-
|
|
104
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
105
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
102
|
+
if (this.inputReference.validity.valueMissing) {
|
|
103
|
+
return translate('requiredError', this.language);
|
|
106
104
|
}
|
|
107
105
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
108
106
|
return translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
109
107
|
}
|
|
110
|
-
if (this.inputReference.validity.
|
|
111
|
-
|
|
108
|
+
if (this.inputReference.validity.patternMismatch) {
|
|
109
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
110
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
111
|
+
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
renderTooltip() {
|
|
@@ -122,8 +122,8 @@ export class NumberInput {
|
|
|
122
122
|
if (this.touched) {
|
|
123
123
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
124
124
|
}
|
|
125
|
-
return h("div", { key: '
|
|
126
|
-
h("img", { key: '
|
|
125
|
+
return h("div", { key: '414aaa50eb36153d2879bc9c6d1024dd1def2712', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'b607615d56849a46aa0a33c47795a43c0b4f0d3f', class: 'number__wrapper--flex' }, h("label", { key: '109e742b76a4bdc539fb0299d9249ee7eddb088d', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '951f79012890dc185e9eb27e30f107a77df7fa09', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
126
|
+
h("img", { key: '7f9721c37bfb782bfd43ce948f94c113333a0e4d', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '800f10c617221358f2d349b39e7831116f931f08', class: 'number__error-message' }, this.errorMessage));
|
|
127
127
|
}
|
|
128
128
|
static get is() { return "number-input"; }
|
|
129
129
|
static get encapsulation() { return "shadow"; }
|
|
@@ -182,6 +182,12 @@ export class PasswordInput {
|
|
|
182
182
|
}
|
|
183
183
|
setErrorMessage() {
|
|
184
184
|
var _a, _b, _c, _d;
|
|
185
|
+
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
186
|
+
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
187
|
+
}
|
|
188
|
+
if (this.inputReference.validity.valueMissing) {
|
|
189
|
+
return translate('requiredError', this.language);
|
|
190
|
+
}
|
|
185
191
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
186
192
|
return translate('invalidOriginalPasswordError', this.language);
|
|
187
193
|
}
|
|
@@ -190,12 +196,6 @@ export class PasswordInput {
|
|
|
190
196
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
191
197
|
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
192
198
|
}
|
|
193
|
-
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
194
|
-
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
195
|
-
}
|
|
196
|
-
if (this.inputReference.validity.valueMissing) {
|
|
197
|
-
return translate('requiredError', this.language);
|
|
198
|
-
}
|
|
199
199
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
200
200
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
201
201
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
@@ -222,8 +222,8 @@ export class PasswordInput {
|
|
|
222
222
|
if (this.touched) {
|
|
223
223
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
224
224
|
}
|
|
225
|
-
return h("div", { key: '
|
|
226
|
-
h("img", { key: '
|
|
225
|
+
return h("div", { key: '7df2b034611f7384a1eb4470e39ee580e0ae6ce5', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'fbf309a458ccfd7c7133b7f65fafc061ad7e5c37', class: 'password__wrapper--flex' }, h("label", { key: 'f15c05d6fa8690d6a120ab2ad56127665618cb94', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'd191b29e231685f0ceb7e42f9b1e9471450662bd', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
226
|
+
h("img", { key: '23052474b109d273ba94e80cbd9d72986c373910', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: 'e8aa77d19ed2497659f784da065720be6fa64bfd', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
227
227
|
}
|
|
228
228
|
static get is() { return "password-input"; }
|
|
229
229
|
static get encapsulation() { return "shadow"; }
|
|
@@ -67,9 +67,6 @@ vaadin-combo-box > input {
|
|
|
67
67
|
.select__input[focused]::part(input-field) {
|
|
68
68
|
border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
69
69
|
}
|
|
70
|
-
.select__input[invalid]::part(input-field) {
|
|
71
|
-
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
72
|
-
}
|
|
73
70
|
.select__input vaadin-date-picker-overlay-content > vaadin-button {
|
|
74
71
|
color: var(--emw--color-black, #000000);
|
|
75
72
|
}
|
|
@@ -118,4 +115,8 @@ vaadin-combo-box > input {
|
|
|
118
115
|
}
|
|
119
116
|
.select__tooltip.visible {
|
|
120
117
|
opacity: 1;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.text__input--invalid {
|
|
121
|
+
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
121
122
|
}
|
|
@@ -70,6 +70,9 @@ export class SelectInput {
|
|
|
70
70
|
this.sendInputValue.emit(inputValueEvent);
|
|
71
71
|
}
|
|
72
72
|
handleClickOutside(event) {
|
|
73
|
+
//Check for empty field when closing the dropdown
|
|
74
|
+
if (this.vaadinCombo.attributes['invalid'])
|
|
75
|
+
this.errorMessage = this.setErrorMessage();
|
|
73
76
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
74
77
|
return;
|
|
75
78
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
@@ -78,7 +81,7 @@ export class SelectInput {
|
|
|
78
81
|
connectedCallback() {
|
|
79
82
|
this.displayedOptions = this.options.map(option => ({
|
|
80
83
|
label: option.label,
|
|
81
|
-
value: option.value
|
|
84
|
+
value: option.value
|
|
82
85
|
}));
|
|
83
86
|
}
|
|
84
87
|
componentWillLoad() {
|
|
@@ -104,12 +107,14 @@ export class SelectInput {
|
|
|
104
107
|
// end custom styling area
|
|
105
108
|
}
|
|
106
109
|
componentDidLoad() {
|
|
107
|
-
this.inputReference = this.
|
|
108
|
-
this.isValid = this.setValidity();
|
|
110
|
+
this.inputReference = this.vaadinCombo.querySelector('input');
|
|
109
111
|
if (this.defaultValue) {
|
|
110
|
-
this.value
|
|
112
|
+
const defaultOption = this.displayedOptions.find(option => option.value.toUpperCase() === this.defaultValue.toUpperCase());
|
|
113
|
+
this.value = defaultOption.value;
|
|
111
114
|
this.valueHandler({ name: this.name, value: this.value });
|
|
115
|
+
this.inputReference.value = this.value;
|
|
112
116
|
}
|
|
117
|
+
this.isValid = this.setValidity();
|
|
113
118
|
}
|
|
114
119
|
getOptions(endpoint) {
|
|
115
120
|
const url = new URL(endpoint);
|
|
@@ -143,8 +148,8 @@ export class SelectInput {
|
|
|
143
148
|
if (this.touched) {
|
|
144
149
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
145
150
|
}
|
|
146
|
-
return h("div", { key: '
|
|
147
|
-
h("img", { key: '
|
|
151
|
+
return h("div", { key: '0b687e6a1bc7ec0cb6dba02c41b04315f4196fcf', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '8c9d7987b209bc6ee991535fa91abf874d06046f', class: 'select__wrapper--flex' }, h("label", { key: 'f11ccc0c319bf3053615e4b7cdff8e640a9d2318', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'd2dd7a3b1d8a20ccb9b1222cb30835ed0193a39c', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
152
|
+
h("img", { key: 'bae994b4791c2afeb2fb8b15db1c4198ab9f8502', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '1f3a5ea3b1611b53e04deb8e903ab1785daaadb6', class: 'select__error-message' }, this.errorMessage));
|
|
148
153
|
}
|
|
149
154
|
static get is() { return "select-input"; }
|
|
150
155
|
static get encapsulation() { return "shadow"; }
|
|
@@ -430,7 +435,6 @@ export class SelectInput {
|
|
|
430
435
|
}
|
|
431
436
|
}];
|
|
432
437
|
}
|
|
433
|
-
static get elementRef() { return "element"; }
|
|
434
438
|
static get watchers() {
|
|
435
439
|
return [{
|
|
436
440
|
"propName": "clientStyling",
|
|
@@ -38,9 +38,6 @@
|
|
|
38
38
|
.tel__wrapper--flex:focus-within {
|
|
39
39
|
border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
40
40
|
}
|
|
41
|
-
.tel__wrapper--flex--invalid {
|
|
42
|
-
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
43
|
-
}
|
|
44
41
|
.tel__wrapper--flex-label {
|
|
45
42
|
display: flex;
|
|
46
43
|
gap: 5px;
|
|
@@ -48,6 +45,9 @@
|
|
|
48
45
|
.tel__wrapper--flex--relative {
|
|
49
46
|
position: relative;
|
|
50
47
|
}
|
|
48
|
+
.tel__wrapper .text__input--invalid {
|
|
49
|
+
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
50
|
+
}
|
|
51
51
|
.tel__label {
|
|
52
52
|
font-family: inherit;
|
|
53
53
|
font-style: normal;
|
|
@@ -141,16 +141,16 @@ export class TextInput {
|
|
|
141
141
|
}
|
|
142
142
|
setErrorMessage() {
|
|
143
143
|
var _a, _b, _c, _d;
|
|
144
|
-
if (this.inputReference.
|
|
145
|
-
|
|
146
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
147
|
-
return translate(`${errorCode}`, this.language) || errorMessage;
|
|
144
|
+
if (this.inputReference.validity.valueMissing) {
|
|
145
|
+
return translate('requiredError', this.language);
|
|
148
146
|
}
|
|
149
147
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
150
148
|
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
151
149
|
}
|
|
152
|
-
if (this.inputReference.
|
|
153
|
-
|
|
150
|
+
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
151
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
152
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
153
|
+
return translate(`${errorCode}`, this.language) || errorMessage;
|
|
154
154
|
}
|
|
155
155
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
156
156
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -169,8 +169,8 @@ export class TextInput {
|
|
|
169
169
|
if (this.touched) {
|
|
170
170
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
171
171
|
}
|
|
172
|
-
return h("div", { key: '
|
|
173
|
-
h("img", { key: '
|
|
172
|
+
return h("div", { key: '595920d75e3dd31983cb3de2f87f9bf7462b6a8c', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'afe2809f25910d410b065d103da3e34661d0dc64', class: 'text__wrapper--flex' }, h("label", { key: 'ed56095473fbe54d94fcb73fb514a51c4227d100', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '5607fe6a0a3aa0cafe7ec666f13978ad733ad50b', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
173
|
+
h("img", { key: '7ad043b188eb69b3bbbe1f94b4aa72f8bffbf427', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '11b544ac942b17b513f76f2d081898995057721b', class: 'text__error-message' }, this.errorMessage));
|
|
174
174
|
}
|
|
175
175
|
static get is() { return "text-input"; }
|
|
176
176
|
static get encapsulation() { return "shadow"; }
|