@everymatrix/general-input 1.64.0 → 1.64.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +40 -40
- 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/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 +40 -40
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-f873774c.entry.js → p-4a50977c.entry.js} +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 {
|
|
@@ -6244,7 +6244,7 @@ const SelectInput = class {
|
|
|
6244
6244
|
};
|
|
6245
6245
|
SelectInput.style = SelectInputStyle0;
|
|
6246
6246
|
|
|
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))}.
|
|
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-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
6248
|
const TelInputStyle0 = telInputCss;
|
|
6249
6249
|
|
|
6250
6250
|
const TelInput = class {
|
|
@@ -6569,16 +6569,16 @@ const TextInput = class {
|
|
|
6569
6569
|
}
|
|
6570
6570
|
setErrorMessage() {
|
|
6571
6571
|
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;
|
|
6572
|
+
if (this.inputReference.validity.valueMissing) {
|
|
6573
|
+
return locale_utils.translate('requiredError', this.language);
|
|
6576
6574
|
}
|
|
6577
6575
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
6578
6576
|
return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
6579
6577
|
}
|
|
6580
|
-
if (this.inputReference.
|
|
6581
|
-
|
|
6578
|
+
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
6579
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
6580
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
6581
|
+
return locale_utils.translate(`${errorCode}`, this.language) || errorMessage;
|
|
6582
6582
|
}
|
|
6583
6583
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
6584
6584
|
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
@@ -6597,8 +6597,8 @@ const TextInput = class {
|
|
|
6597
6597
|
if (this.touched) {
|
|
6598
6598
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6599
6599
|
}
|
|
6600
|
-
return index.h("div", { key: '
|
|
6601
|
-
index.h("img", { key: '
|
|
6600
|
+
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 &&
|
|
6601
|
+
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
6602
|
}
|
|
6603
6603
|
static get watchers() { return {
|
|
6604
6604
|
"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
|
}
|
|
@@ -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"; }
|