@everymatrix/general-input 1.63.3 → 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 +47 -47
- package/dist/cjs/toggle-checkbox-input.cjs.entry.js +1 -1
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.css +3 -3
- package/dist/collection/components/checkbox-input/checkbox-input.css +2 -2
- package/dist/collection/components/date-input/date-input.css +2 -2
- package/dist/collection/components/date-input/date-input.js +6 -6
- package/dist/collection/components/email-input/email-input.css +2 -2
- package/dist/collection/components/email-input/email-input.js +8 -8
- package/dist/collection/components/number-input/number-input.css +1 -1
- package/dist/collection/components/number-input/number-input.js +8 -8
- package/dist/collection/components/password-input/password-input.css +2 -2
- package/dist/collection/components/password-input/password-input.js +8 -8
- package/dist/collection/components/select-input/select-input.css +6 -5
- package/dist/collection/components/tel-input/tel-input.css +5 -5
- package/dist/collection/components/text-input/text-input.css +2 -2
- package/dist/collection/components/text-input/text-input.js +8 -8
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css +2 -2
- package/dist/esm/checkbox-group-input_10.entry.js +47 -47
- package/dist/esm/toggle-checkbox-input.entry.js +1 -1
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-b4c2804b.entry.js → p-0a442cba.entry.js} +1 -1
- package/dist/general-input/{p-2dca217f.entry.js → p-4a50977c.entry.js} +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-bce82d29.js');
|
|
|
6
6
|
const locale_utils = require('./locale.utils-ae578c17.js');
|
|
7
7
|
const tooltipIcon = require('./tooltipIcon-7e9ee226.js');
|
|
8
8
|
|
|
9
|
-
const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
9
|
+
const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;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}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}";
|
|
10
10
|
const CheckboxGroupInputStyle0 = checkboxGroupInputCss;
|
|
11
11
|
|
|
12
12
|
const CheckboxGroupInput = class {
|
|
@@ -129,7 +129,7 @@ const CheckboxGroupInput = class {
|
|
|
129
129
|
};
|
|
130
130
|
CheckboxGroupInput.style = CheckboxGroupInputStyle0;
|
|
131
131
|
|
|
132
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
132
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.checkbox__label-text{font-size:16px}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}";
|
|
133
133
|
const CheckboxInputStyle0 = checkboxInputCss;
|
|
134
134
|
|
|
135
135
|
const CheckboxInput = class {
|
|
@@ -5303,7 +5303,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5303
5303
|
return date.getTime() < dateToCompare.getTime();
|
|
5304
5304
|
}
|
|
5305
5305
|
|
|
5306
|
-
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__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))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
5306
|
+
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__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))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.date__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__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--registration-typography, 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}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:rgba(204, 0, 0, 0.7019607843)}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;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}.date__tooltip.visible{opacity:1}";
|
|
5307
5307
|
const DateInputStyle0 = dateInputCss;
|
|
5308
5308
|
|
|
5309
5309
|
const DateInput = class {
|
|
@@ -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 {
|
|
@@ -5460,7 +5460,7 @@ const DateInput = class {
|
|
|
5460
5460
|
};
|
|
5461
5461
|
DateInput.style = DateInputStyle0;
|
|
5462
5462
|
|
|
5463
|
-
const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emw--color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__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))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
5463
|
+
const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emw--color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__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))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.email__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__input::placeholder{color:var(--emw--color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__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}.email__tooltip.visible{opacity:1}";
|
|
5464
5464
|
const EmailInputStyle0 = emailInputCss;
|
|
5465
5465
|
|
|
5466
5466
|
const EmailInput = class {
|
|
@@ -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"],
|
|
@@ -5611,7 +5611,7 @@ const EmailInput = class {
|
|
|
5611
5611
|
};
|
|
5612
5612
|
EmailInput.style = EmailInputStyle0;
|
|
5613
5613
|
|
|
5614
|
-
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.number__wrapper--autofilled .number__input{color:var(--emw--color-black, #000000)}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__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))}.number__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
5614
|
+
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.number__wrapper--autofilled .number__input{color:var(--emw--color-black, #000000)}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__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))}.number__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.number__input{font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px;position:relative;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
|
|
5615
5615
|
const NumberInputStyle0 = numberInputCss;
|
|
5616
5616
|
|
|
5617
5617
|
const NumberInput = class {
|
|
@@ -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"],
|
|
@@ -5749,7 +5749,7 @@ const NumberInput = class {
|
|
|
5749
5749
|
};
|
|
5750
5750
|
NumberInput.style = NumberInputStyle0;
|
|
5751
5751
|
|
|
5752
|
-
const passwordInputCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.password {\n font-family: \"Roboto\";\n font-style: normal;\n}\n.password__wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n container-type: inline-size;\n}\n.password__wrapper--autofilled {\n pointer-events: none;\n}\n.password__wrapper--autofilled .password__label {\n color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__wrapper--autofilled .password__input::part(input-field) {\n color: var(--emw--color-black, #000000);\n}\n.password__wrapper--flex {\n display: flex;\n gap: 5px;\n}\n.password__wrapper--relative {\n position: relative;\n}\n.password__label {\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 20px;\n color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__label--required::after {\n content: \"*\";\n font-family: inherit;\n color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
5752
|
+
const passwordInputCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.password {\n font-family: \"Roboto\";\n font-style: normal;\n}\n.password__wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n container-type: inline-size;\n}\n.password__wrapper--autofilled {\n pointer-events: none;\n}\n.password__wrapper--autofilled .password__label {\n color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__wrapper--autofilled .password__input::part(input-field) {\n color: var(--emw--color-black, #000000);\n}\n.password__wrapper--flex {\n display: flex;\n gap: 5px;\n}\n.password__wrapper--relative {\n position: relative;\n}\n.password__label {\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 20px;\n color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__label--required::after {\n content: \"*\";\n font-family: inherit;\n color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n margin-left: 2px;\n}\n.password__input {\n width: inherit;\n border: none;\n}\n.password__input[focused]::part(input-field) {\n border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n}\n.password__input[invalid]::part(input-field) {\n border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__input::part(input-field) {\n border-radius: 4px;\n background-color: var(--emw--color-white, #FFFFFF);\n border: 1px solid var(--emw--color-gray-100, #E6E6E6);\n color: var(--emw--color-black, #000000);\n background-color: var(--emw--color-white, #FFFFFF);\n font-family: inherit;\n font-style: normal;\n font-weight: 300;\n font-size: 16px;\n line-height: 1.5;\n position: relative;\n margin-bottom: unset;\n height: 44px;\n padding: 0;\n width: 100%;\n}\n.password__input::part(reveal-button) {\n position: relative;\n right: 10px;\n}\n.password__input::part(reveal-button)::before {\n color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__input > input {\n padding: 5px 15px;\n}\n.password__input > input:placeholder-shown {\n color: var(--emw--color-gray-150, #828282);\n}\n.password__error-message {\n position: absolute;\n top: calc(100% + 5px);\n left: 0;\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__complexity {\n height: 150px;\n position: relative;\n padding: 10px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n justify-content: center;\n margin-top: 20px;\n font-weight: 300;\n background: var(--emw--color-white, #FFFFFF);\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n border: 1px solid #B0B0B0;\n box-sizing: content-box;\n /* works only in this order */\n}\n.password__complexity meter {\n border-color: transparent; /* Needed for Safari */\n}\n.password__complexity meter[value=\"1\"]::-moz-meter-bar {\n background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter[value=\"1\"]::-webkit-meter-optimum-value {\n background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter:not([value=\"1\"])::-moz-meter-bar {\n background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity meter:not([value=\"1\"])::-webkit-meter-optimum-value {\n background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity--strength {\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n}\n.password__complexity--strength meter::-moz-meter-bar { /* Firefox Pseudo Class */\n background: #B0B0B0;\n}\n.password__complexity--hidden {\n display: none;\n}\n.password__complexity--text-bold {\n font-weight: 500;\n}\n.password__complexity--checkbox {\n margin-right: 5px;\n}\n.password__complexity:after {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 25px;\n border-top: 1px solid var(--emw--color-gray-150, #828282);\n border-right: 0 solid var(--emw--color-gray-150, #828282);\n border-left: 1px solid var(--emw--color-gray-150, #828282);\n border-bottom: 0 solid var(--emw--color-gray-150, #828282);\n bottom: 92%;\n left: 50%;\n margin-left: -25px;\n transform: rotate(45deg);\n margin-top: -25px;\n background-color: var(--emw--color-white, #FFFFFF);\n}\n@container (max-width: 300px) {\n .password__complexity {\n height: 190px;\n }\n .password__complexity:after {\n width: 14px;\n height: 14px;\n bottom: 96%;\n left: 57%;\n }\n}\n.password__tooltip-icon {\n width: 16px;\n height: auto;\n}\n.password__tooltip {\n position: absolute;\n top: 0;\n left: 20px;\n background-color: var(--emw--color-white, #FFFFFF);\n border: 1px solid var(--emw--color-gray-150, #828282);\n color: #2B2D3F;\n padding: 10px;\n border-radius: 5px;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n z-index: 10;\n}\n.password__tooltip.visible {\n opacity: 1;\n}";
|
|
5753
5753
|
const PasswordInputStyle0 = passwordInputCss;
|
|
5754
5754
|
|
|
5755
5755
|
const PasswordInput = class {
|
|
@@ -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, #
|
|
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, #
|
|
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 {
|
|
@@ -6423,7 +6423,7 @@ const TelInput = class {
|
|
|
6423
6423
|
};
|
|
6424
6424
|
TelInput.style = TelInputStyle0;
|
|
6425
6425
|
|
|
6426
|
-
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__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))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
6426
|
+
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__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))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__input::placeholder{color:var(--emw--color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
|
|
6427
6427
|
const TextInputStyle0 = textInputCss;
|
|
6428
6428
|
|
|
6429
6429
|
const TextInput = 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"],
|
|
@@ -6,7 +6,7 @@ const index = require('./index-bce82d29.js');
|
|
|
6
6
|
const locale_utils = require('./locale.utils-ae578c17.js');
|
|
7
7
|
const tooltipIcon = require('./tooltipIcon-7e9ee226.js');
|
|
8
8
|
|
|
9
|
-
const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:10px;align-items:baseline}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
9
|
+
const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:10px;align-items:baseline}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;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}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
|
|
10
10
|
const ToggleCheckboxInputStyle0 = toggleCheckboxInputCss;
|
|
11
11
|
|
|
12
12
|
const ToggleCheckboxInput = class {
|
|
@@ -32,7 +32,7 @@ vaadin-checkbox-group {
|
|
|
32
32
|
vertical-align: baseline;
|
|
33
33
|
}
|
|
34
34
|
.checkboxgroup__input[indeterminate]::part(checkbox)::after, .checkboxgroup__input[indeterminate]::part(checkbox), .checkboxgroup__input[checked]::part(checkbox) {
|
|
35
|
-
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
35
|
+
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
36
36
|
}
|
|
37
37
|
.checkboxgroup__label {
|
|
38
38
|
font-style: inherit;
|
|
@@ -48,7 +48,7 @@ vaadin-checkbox-group {
|
|
|
48
48
|
font-size: 16px;
|
|
49
49
|
}
|
|
50
50
|
.checkboxgroup__label a {
|
|
51
|
-
color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
51
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
52
52
|
}
|
|
53
53
|
.checkboxgroup__error-message {
|
|
54
54
|
position: absolute;
|
|
@@ -84,6 +84,6 @@ vaadin-checkbox-group {
|
|
|
84
84
|
box-shadow: 0 0px 0px 2px var(--emw--color-gray, #7a7a7a);
|
|
85
85
|
}
|
|
86
86
|
.checkbox__input[indeterminate]::part(checkbox), .checkbox__input[checked]::part(checkbox) {
|
|
87
|
-
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
87
|
+
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
88
88
|
box-shadow: none;
|
|
89
89
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
.checkbox__input {
|
|
23
23
|
transform: scale(1.307, 1.307);
|
|
24
24
|
margin-left: 2px;
|
|
25
|
-
accent-color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
25
|
+
accent-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
26
26
|
}
|
|
27
27
|
.checkbox__label {
|
|
28
28
|
font-style: inherit;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
font-size: 16px;
|
|
39
39
|
}
|
|
40
40
|
.checkbox__label a {
|
|
41
|
-
color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
41
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
42
42
|
}
|
|
43
43
|
.checkbox__error-message {
|
|
44
44
|
position: absolute;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
.date__label--required::after {
|
|
39
39
|
content: "*";
|
|
40
40
|
font-family: inherit;
|
|
41
|
-
color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
41
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
42
42
|
margin-left: 2px;
|
|
43
43
|
}
|
|
44
44
|
.date__input {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
position: relative;
|
|
48
48
|
}
|
|
49
49
|
.date__input[focused]::part(input-field) {
|
|
50
|
-
border-color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
50
|
+
border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
51
51
|
}
|
|
52
52
|
.date__input[invalid]::part(input-field) {
|
|
53
53
|
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
@@ -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"; }
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
.email__label--required::after {
|
|
42
42
|
content: "*";
|
|
43
43
|
font-family: inherit;
|
|
44
|
-
color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
44
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
45
45
|
margin-left: 2px;
|
|
46
46
|
}
|
|
47
47
|
.email__input {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
padding: 10px;
|
|
60
60
|
}
|
|
61
61
|
.email__input:focus {
|
|
62
|
-
outline-color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
62
|
+
outline-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
63
63
|
}
|
|
64
64
|
.email__input--invalid {
|
|
65
65
|
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
@@ -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"; }
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
.number__label--required::after {
|
|
42
42
|
content: "*";
|
|
43
43
|
font-family: inherit;
|
|
44
|
-
color: var(--emw--login-color-primary, var(--emw--color-primary, #
|
|
44
|
+
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
45
45
|
margin-left: 2px;
|
|
46
46
|
}
|
|
47
47
|
.number__input {
|
|
@@ -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"; }
|