@everymatrix/pam-forgot-password 1.66.0 → 1.67.0
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.
|
@@ -5468,7 +5468,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5468
5468
|
return date.getTime() < dateToCompare.getTime();
|
|
5469
5469
|
}
|
|
5470
5470
|
|
|
5471
|
-
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:
|
|
5471
|
+
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:var(--emw--color-error, var(--emw--color-red, #ed0909))}.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}";
|
|
5472
5472
|
const DateInputStyle0 = dateInputCss;
|
|
5473
5473
|
|
|
5474
5474
|
const DateInput = class {
|
|
@@ -5486,11 +5486,6 @@ const DateInput = class {
|
|
|
5486
5486
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5487
5487
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5488
5488
|
};
|
|
5489
|
-
this.handleBlur = () => {
|
|
5490
|
-
this.isValid = this.setValidity();
|
|
5491
|
-
this.errorMessage = this.setErrorMessage();
|
|
5492
|
-
this.touched = true;
|
|
5493
|
-
};
|
|
5494
5489
|
this.setClientStyling = () => {
|
|
5495
5490
|
let sheet = document.createElement('style');
|
|
5496
5491
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5562,6 +5557,17 @@ const DateInput = class {
|
|
|
5562
5557
|
if (calendarButton) {
|
|
5563
5558
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5564
5559
|
}
|
|
5560
|
+
// Add listener for dropdown close
|
|
5561
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5562
|
+
if (event.detail.value === true) {
|
|
5563
|
+
this.errorMessage = '';
|
|
5564
|
+
}
|
|
5565
|
+
else {
|
|
5566
|
+
this.isValid = this.setValidity();
|
|
5567
|
+
this.errorMessage = this.setErrorMessage();
|
|
5568
|
+
this.touched = true;
|
|
5569
|
+
}
|
|
5570
|
+
});
|
|
5565
5571
|
}
|
|
5566
5572
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5567
5573
|
this.isValid = this.setValidity();
|
|
@@ -5613,8 +5619,8 @@ const DateInput = class {
|
|
|
5613
5619
|
if (this.touched) {
|
|
5614
5620
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5615
5621
|
}
|
|
5616
|
-
return index.h("div", { key: '
|
|
5617
|
-
index.h("img", { key: '
|
|
5622
|
+
return index.h("div", { key: '1c0ed976aca2d63d169982ac1d8487ce241b4c10', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'ce1bb7d51436a80828fc5a9d35446748b3fc7d2d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '47ec4983e14a234e7f7a88606bfc11a7605c3e70', 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) }), index.h("small", { key: 'e5fd362ece5e04e731feac87bb6b73e567b576aa', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5623
|
+
index.h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5618
5624
|
}
|
|
5619
5625
|
get element() { return index.getElement(this); }
|
|
5620
5626
|
static get watchers() { return {
|
|
@@ -11961,7 +11967,7 @@ const RadioInput = class {
|
|
|
11961
11967
|
};
|
|
11962
11968
|
RadioInput.style = RadioInputStyle0;
|
|
11963
11969
|
|
|
11964
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}
|
|
11970
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]:not(.text__input--invalid)::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
|
|
11965
11971
|
const SelectInputStyle0 = selectInputCss;
|
|
11966
11972
|
|
|
11967
11973
|
const SelectInput = class {
|
|
@@ -12095,6 +12101,22 @@ const SelectInput = class {
|
|
|
12095
12101
|
this.inputReference.value = this.value;
|
|
12096
12102
|
}
|
|
12097
12103
|
this.isValid = this.setValidity();
|
|
12104
|
+
// Add listener for dropdown close
|
|
12105
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
12106
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
12107
|
+
if (event.detail.value === true) {
|
|
12108
|
+
this.errorMessage = '';
|
|
12109
|
+
}
|
|
12110
|
+
else {
|
|
12111
|
+
const field = event.currentTarget;
|
|
12112
|
+
this.touched = true;
|
|
12113
|
+
this.value = field.value;
|
|
12114
|
+
this.isValid = this.setValidity();
|
|
12115
|
+
this.errorMessage = this.setErrorMessage();
|
|
12116
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
12117
|
+
}
|
|
12118
|
+
});
|
|
12119
|
+
}
|
|
12098
12120
|
}
|
|
12099
12121
|
getOptions(endpoint) {
|
|
12100
12122
|
const url = new URL(endpoint);
|
|
@@ -12110,10 +12132,11 @@ const SelectInput = class {
|
|
|
12110
12132
|
});
|
|
12111
12133
|
}
|
|
12112
12134
|
setValidity() {
|
|
12113
|
-
|
|
12114
|
-
|
|
12135
|
+
var _a;
|
|
12136
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
12137
|
+
return !!this.value;
|
|
12115
12138
|
}
|
|
12116
|
-
return
|
|
12139
|
+
return true;
|
|
12117
12140
|
}
|
|
12118
12141
|
setErrorMessage() {
|
|
12119
12142
|
var _a, _b, _c;
|
|
@@ -12133,10 +12156,10 @@ const SelectInput = class {
|
|
|
12133
12156
|
if (this.touched) {
|
|
12134
12157
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12135
12158
|
}
|
|
12136
|
-
return index.h("div", { key: '
|
|
12137
|
-
index.h("img", { key: '
|
|
12159
|
+
return index.h("div", { key: '3afb8c4c104469a78ca982d3815aa4241364674a', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '447c4ad85d8a1b47e0485c0f1fecaea998790008', class: 'select__wrapper--flex' }, index.h("label", { key: 'f2e7923d0f0d260608ae61bd6d4a56929c57fdad', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '22b8e5868a411944ecd49397d17aa2f99aa5c660', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
12160
|
+
index.h("img", { key: 'dd1a0150c672ed991266dcce2808f8b6b6c0e954', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
|
|
12138
12161
|
:
|
|
12139
|
-
index.h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange
|
|
12162
|
+
index.h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange }), index.h("small", { key: '77ed680bd30fdc9193b502136387e828fd88e162', class: 'select__error-message' }, this.errorMessage));
|
|
12140
12163
|
}
|
|
12141
12164
|
static get watchers() { return {
|
|
12142
12165
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5464,7 +5464,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5464
5464
|
return date.getTime() < dateToCompare.getTime();
|
|
5465
5465
|
}
|
|
5466
5466
|
|
|
5467
|
-
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:
|
|
5467
|
+
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:var(--emw--color-error, var(--emw--color-red, #ed0909))}.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}";
|
|
5468
5468
|
const DateInputStyle0 = dateInputCss;
|
|
5469
5469
|
|
|
5470
5470
|
const DateInput = class {
|
|
@@ -5482,11 +5482,6 @@ const DateInput = class {
|
|
|
5482
5482
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5483
5483
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5484
5484
|
};
|
|
5485
|
-
this.handleBlur = () => {
|
|
5486
|
-
this.isValid = this.setValidity();
|
|
5487
|
-
this.errorMessage = this.setErrorMessage();
|
|
5488
|
-
this.touched = true;
|
|
5489
|
-
};
|
|
5490
5485
|
this.setClientStyling = () => {
|
|
5491
5486
|
let sheet = document.createElement('style');
|
|
5492
5487
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5558,6 +5553,17 @@ const DateInput = class {
|
|
|
5558
5553
|
if (calendarButton) {
|
|
5559
5554
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5560
5555
|
}
|
|
5556
|
+
// Add listener for dropdown close
|
|
5557
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5558
|
+
if (event.detail.value === true) {
|
|
5559
|
+
this.errorMessage = '';
|
|
5560
|
+
}
|
|
5561
|
+
else {
|
|
5562
|
+
this.isValid = this.setValidity();
|
|
5563
|
+
this.errorMessage = this.setErrorMessage();
|
|
5564
|
+
this.touched = true;
|
|
5565
|
+
}
|
|
5566
|
+
});
|
|
5561
5567
|
}
|
|
5562
5568
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5563
5569
|
this.isValid = this.setValidity();
|
|
@@ -5609,8 +5615,8 @@ const DateInput = class {
|
|
|
5609
5615
|
if (this.touched) {
|
|
5610
5616
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5611
5617
|
}
|
|
5612
|
-
return h("div", { key: '
|
|
5613
|
-
h("img", { key: '
|
|
5618
|
+
return h("div", { key: '1c0ed976aca2d63d169982ac1d8487ce241b4c10', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'ce1bb7d51436a80828fc5a9d35446748b3fc7d2d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: '47ec4983e14a234e7f7a88606bfc11a7605c3e70', 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) }), h("small", { key: 'e5fd362ece5e04e731feac87bb6b73e567b576aa', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5619
|
+
h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5614
5620
|
}
|
|
5615
5621
|
get element() { return getElement(this); }
|
|
5616
5622
|
static get watchers() { return {
|
|
@@ -11957,7 +11963,7 @@ const RadioInput = class {
|
|
|
11957
11963
|
};
|
|
11958
11964
|
RadioInput.style = RadioInputStyle0;
|
|
11959
11965
|
|
|
11960
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}
|
|
11966
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]:not(.text__input--invalid)::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
|
|
11961
11967
|
const SelectInputStyle0 = selectInputCss;
|
|
11962
11968
|
|
|
11963
11969
|
const SelectInput = class {
|
|
@@ -12091,6 +12097,22 @@ const SelectInput = class {
|
|
|
12091
12097
|
this.inputReference.value = this.value;
|
|
12092
12098
|
}
|
|
12093
12099
|
this.isValid = this.setValidity();
|
|
12100
|
+
// Add listener for dropdown close
|
|
12101
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
12102
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
12103
|
+
if (event.detail.value === true) {
|
|
12104
|
+
this.errorMessage = '';
|
|
12105
|
+
}
|
|
12106
|
+
else {
|
|
12107
|
+
const field = event.currentTarget;
|
|
12108
|
+
this.touched = true;
|
|
12109
|
+
this.value = field.value;
|
|
12110
|
+
this.isValid = this.setValidity();
|
|
12111
|
+
this.errorMessage = this.setErrorMessage();
|
|
12112
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
12113
|
+
}
|
|
12114
|
+
});
|
|
12115
|
+
}
|
|
12094
12116
|
}
|
|
12095
12117
|
getOptions(endpoint) {
|
|
12096
12118
|
const url = new URL(endpoint);
|
|
@@ -12106,10 +12128,11 @@ const SelectInput = class {
|
|
|
12106
12128
|
});
|
|
12107
12129
|
}
|
|
12108
12130
|
setValidity() {
|
|
12109
|
-
|
|
12110
|
-
|
|
12131
|
+
var _a;
|
|
12132
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
12133
|
+
return !!this.value;
|
|
12111
12134
|
}
|
|
12112
|
-
return
|
|
12135
|
+
return true;
|
|
12113
12136
|
}
|
|
12114
12137
|
setErrorMessage() {
|
|
12115
12138
|
var _a, _b, _c;
|
|
@@ -12129,10 +12152,10 @@ const SelectInput = class {
|
|
|
12129
12152
|
if (this.touched) {
|
|
12130
12153
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12131
12154
|
}
|
|
12132
|
-
return h("div", { key: '
|
|
12133
|
-
h("img", { key: '
|
|
12155
|
+
return h("div", { key: '3afb8c4c104469a78ca982d3815aa4241364674a', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '447c4ad85d8a1b47e0485c0f1fecaea998790008', class: 'select__wrapper--flex' }, h("label", { key: 'f2e7923d0f0d260608ae61bd6d4a56929c57fdad', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '22b8e5868a411944ecd49397d17aa2f99aa5c660', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
12156
|
+
h("img", { key: 'dd1a0150c672ed991266dcce2808f8b6b6c0e954', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
|
|
12134
12157
|
:
|
|
12135
|
-
h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange
|
|
12158
|
+
h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange }), h("small", { key: '77ed680bd30fdc9193b502136387e828fd88e162', class: 'select__error-message' }, this.errorMessage));
|
|
12136
12159
|
}
|
|
12137
12160
|
static get watchers() { return {
|
|
12138
12161
|
"clientStyling": ["handleStylingChange"],
|