@everymatrix/general-registration 1.67.0 → 1.68.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.
|
@@ -5467,7 +5467,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5467
5467
|
return date.getTime() < dateToCompare.getTime();
|
|
5468
5468
|
}
|
|
5469
5469
|
|
|
5470
|
-
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:
|
|
5470
|
+
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}";
|
|
5471
5471
|
const DateInputStyle0 = dateInputCss;
|
|
5472
5472
|
|
|
5473
5473
|
const DateInput = class {
|
|
@@ -5485,11 +5485,6 @@ const DateInput = class {
|
|
|
5485
5485
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5486
5486
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5487
5487
|
};
|
|
5488
|
-
this.handleBlur = () => {
|
|
5489
|
-
this.isValid = this.setValidity();
|
|
5490
|
-
this.errorMessage = this.setErrorMessage();
|
|
5491
|
-
this.touched = true;
|
|
5492
|
-
};
|
|
5493
5488
|
this.setClientStyling = () => {
|
|
5494
5489
|
let sheet = document.createElement('style');
|
|
5495
5490
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5561,6 +5556,17 @@ const DateInput = class {
|
|
|
5561
5556
|
if (calendarButton) {
|
|
5562
5557
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5563
5558
|
}
|
|
5559
|
+
// Add listener for dropdown close
|
|
5560
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5561
|
+
if (event.detail.value === true) {
|
|
5562
|
+
this.errorMessage = '';
|
|
5563
|
+
}
|
|
5564
|
+
else {
|
|
5565
|
+
this.isValid = this.setValidity();
|
|
5566
|
+
this.errorMessage = this.setErrorMessage();
|
|
5567
|
+
this.touched = true;
|
|
5568
|
+
}
|
|
5569
|
+
});
|
|
5564
5570
|
}
|
|
5565
5571
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5566
5572
|
this.isValid = this.setValidity();
|
|
@@ -5612,8 +5618,8 @@ const DateInput = class {
|
|
|
5612
5618
|
if (this.touched) {
|
|
5613
5619
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5614
5620
|
}
|
|
5615
|
-
return index.h("div", { key: '
|
|
5616
|
-
index.h("img", { key: '
|
|
5621
|
+
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 &&
|
|
5622
|
+
index.h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5617
5623
|
}
|
|
5618
5624
|
get element() { return index.getElement(this); }
|
|
5619
5625
|
static get watchers() { return {
|
|
@@ -13781,7 +13787,7 @@ const RadioInput = class {
|
|
|
13781
13787
|
};
|
|
13782
13788
|
RadioInput.style = RadioInputStyle0;
|
|
13783
13789
|
|
|
13784
|
-
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}
|
|
13790
|
+
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}";
|
|
13785
13791
|
const SelectInputStyle0 = selectInputCss;
|
|
13786
13792
|
|
|
13787
13793
|
const SelectInput = class {
|
|
@@ -13915,6 +13921,22 @@ const SelectInput = class {
|
|
|
13915
13921
|
this.inputReference.value = this.value;
|
|
13916
13922
|
}
|
|
13917
13923
|
this.isValid = this.setValidity();
|
|
13924
|
+
// Add listener for dropdown close
|
|
13925
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
13926
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
13927
|
+
if (event.detail.value === true) {
|
|
13928
|
+
this.errorMessage = '';
|
|
13929
|
+
}
|
|
13930
|
+
else {
|
|
13931
|
+
const field = event.currentTarget;
|
|
13932
|
+
this.touched = true;
|
|
13933
|
+
this.value = field.value;
|
|
13934
|
+
this.isValid = this.setValidity();
|
|
13935
|
+
this.errorMessage = this.setErrorMessage();
|
|
13936
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13937
|
+
}
|
|
13938
|
+
});
|
|
13939
|
+
}
|
|
13918
13940
|
}
|
|
13919
13941
|
getOptions(endpoint) {
|
|
13920
13942
|
const url = new URL(endpoint);
|
|
@@ -13930,10 +13952,11 @@ const SelectInput = class {
|
|
|
13930
13952
|
});
|
|
13931
13953
|
}
|
|
13932
13954
|
setValidity() {
|
|
13933
|
-
|
|
13934
|
-
|
|
13955
|
+
var _a;
|
|
13956
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
13957
|
+
return !!this.value;
|
|
13935
13958
|
}
|
|
13936
|
-
return
|
|
13959
|
+
return true;
|
|
13937
13960
|
}
|
|
13938
13961
|
setErrorMessage() {
|
|
13939
13962
|
var _a, _b, _c;
|
|
@@ -13953,10 +13976,10 @@ const SelectInput = class {
|
|
|
13953
13976
|
if (this.touched) {
|
|
13954
13977
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13955
13978
|
}
|
|
13956
|
-
return index.h("div", { key: '
|
|
13957
|
-
index.h("img", { key: '
|
|
13979
|
+
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 &&
|
|
13980
|
+
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 })
|
|
13958
13981
|
:
|
|
13959
|
-
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
|
|
13982
|
+
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));
|
|
13960
13983
|
}
|
|
13961
13984
|
static get watchers() { return {
|
|
13962
13985
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5463,7 +5463,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5463
5463
|
return date.getTime() < dateToCompare.getTime();
|
|
5464
5464
|
}
|
|
5465
5465
|
|
|
5466
|
-
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:
|
|
5466
|
+
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}";
|
|
5467
5467
|
const DateInputStyle0 = dateInputCss;
|
|
5468
5468
|
|
|
5469
5469
|
const DateInput = class {
|
|
@@ -5481,11 +5481,6 @@ const DateInput = class {
|
|
|
5481
5481
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5482
5482
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5483
5483
|
};
|
|
5484
|
-
this.handleBlur = () => {
|
|
5485
|
-
this.isValid = this.setValidity();
|
|
5486
|
-
this.errorMessage = this.setErrorMessage();
|
|
5487
|
-
this.touched = true;
|
|
5488
|
-
};
|
|
5489
5484
|
this.setClientStyling = () => {
|
|
5490
5485
|
let sheet = document.createElement('style');
|
|
5491
5486
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5557,6 +5552,17 @@ const DateInput = class {
|
|
|
5557
5552
|
if (calendarButton) {
|
|
5558
5553
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5559
5554
|
}
|
|
5555
|
+
// Add listener for dropdown close
|
|
5556
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5557
|
+
if (event.detail.value === true) {
|
|
5558
|
+
this.errorMessage = '';
|
|
5559
|
+
}
|
|
5560
|
+
else {
|
|
5561
|
+
this.isValid = this.setValidity();
|
|
5562
|
+
this.errorMessage = this.setErrorMessage();
|
|
5563
|
+
this.touched = true;
|
|
5564
|
+
}
|
|
5565
|
+
});
|
|
5560
5566
|
}
|
|
5561
5567
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5562
5568
|
this.isValid = this.setValidity();
|
|
@@ -5608,8 +5614,8 @@ const DateInput = class {
|
|
|
5608
5614
|
if (this.touched) {
|
|
5609
5615
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5610
5616
|
}
|
|
5611
|
-
return h$1("div", { key: '
|
|
5612
|
-
h$1("img", { key: '
|
|
5617
|
+
return h$1("div", { key: '1c0ed976aca2d63d169982ac1d8487ce241b4c10', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("label", { key: 'ce1bb7d51436a80828fc5a9d35446748b3fc7d2d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$1("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$1("small", { key: 'e5fd362ece5e04e731feac87bb6b73e567b576aa', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5618
|
+
h$1("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5613
5619
|
}
|
|
5614
5620
|
get element() { return getElement(this); }
|
|
5615
5621
|
static get watchers() { return {
|
|
@@ -13777,7 +13783,7 @@ const RadioInput = class {
|
|
|
13777
13783
|
};
|
|
13778
13784
|
RadioInput.style = RadioInputStyle0;
|
|
13779
13785
|
|
|
13780
|
-
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}
|
|
13786
|
+
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}";
|
|
13781
13787
|
const SelectInputStyle0 = selectInputCss;
|
|
13782
13788
|
|
|
13783
13789
|
const SelectInput = class {
|
|
@@ -13911,6 +13917,22 @@ const SelectInput = class {
|
|
|
13911
13917
|
this.inputReference.value = this.value;
|
|
13912
13918
|
}
|
|
13913
13919
|
this.isValid = this.setValidity();
|
|
13920
|
+
// Add listener for dropdown close
|
|
13921
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
13922
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
13923
|
+
if (event.detail.value === true) {
|
|
13924
|
+
this.errorMessage = '';
|
|
13925
|
+
}
|
|
13926
|
+
else {
|
|
13927
|
+
const field = event.currentTarget;
|
|
13928
|
+
this.touched = true;
|
|
13929
|
+
this.value = field.value;
|
|
13930
|
+
this.isValid = this.setValidity();
|
|
13931
|
+
this.errorMessage = this.setErrorMessage();
|
|
13932
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13933
|
+
}
|
|
13934
|
+
});
|
|
13935
|
+
}
|
|
13914
13936
|
}
|
|
13915
13937
|
getOptions(endpoint) {
|
|
13916
13938
|
const url = new URL(endpoint);
|
|
@@ -13926,10 +13948,11 @@ const SelectInput = class {
|
|
|
13926
13948
|
});
|
|
13927
13949
|
}
|
|
13928
13950
|
setValidity() {
|
|
13929
|
-
|
|
13930
|
-
|
|
13951
|
+
var _a;
|
|
13952
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
13953
|
+
return !!this.value;
|
|
13931
13954
|
}
|
|
13932
|
-
return
|
|
13955
|
+
return true;
|
|
13933
13956
|
}
|
|
13934
13957
|
setErrorMessage() {
|
|
13935
13958
|
var _a, _b, _c;
|
|
@@ -13949,10 +13972,10 @@ const SelectInput = class {
|
|
|
13949
13972
|
if (this.touched) {
|
|
13950
13973
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13951
13974
|
}
|
|
13952
|
-
return h$1("div", { key: '
|
|
13953
|
-
h$1("img", { key: '
|
|
13975
|
+
return h$1("div", { key: '3afb8c4c104469a78ca982d3815aa4241364674a', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '447c4ad85d8a1b47e0485c0f1fecaea998790008', class: 'select__wrapper--flex' }, h$1("label", { key: 'f2e7923d0f0d260608ae61bd6d4a56929c57fdad', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$1("div", { key: '22b8e5868a411944ecd49397d17aa2f99aa5c660', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
13976
|
+
h$1("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$1("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 })
|
|
13954
13977
|
:
|
|
13955
|
-
h$1("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
|
|
13978
|
+
h$1("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$1("small", { key: '77ed680bd30fdc9193b502136387e828fd88e162', class: 'select__error-message' }, this.errorMessage));
|
|
13956
13979
|
}
|
|
13957
13980
|
static get watchers() { return {
|
|
13958
13981
|
"clientStyling": ["handleStylingChange"],
|