@everymatrix/general-input 1.67.3 → 1.69.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.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +38 -15
- package/dist/cjs/general-input.cjs.entry.js +258 -258
- package/dist/collection/components/date-input/date-input.css +1 -1
- package/dist/collection/components/date-input/date-input.js +13 -7
- package/dist/collection/components/select-input/select-input.css +6 -6
- package/dist/collection/components/select-input/select-input.js +23 -6
- package/dist/esm/checkbox-group-input_10.entry.js +38 -15
- package/dist/esm/general-input.entry.js +258 -258
- package/dist/general-input/checkbox-group-input_10.entry.js +1 -1
- package/dist/general-input/general-input.entry.js +217 -217
- package/dist/types/components/date-input/date-input.d.ts +0 -1
- package/package.json +1 -1
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/main.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/preview.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -16,11 +16,6 @@ export class DateInput {
|
|
|
16
16
|
const date = dateFnsParse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
17
17
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
18
18
|
};
|
|
19
|
-
this.handleBlur = () => {
|
|
20
|
-
this.isValid = this.setValidity();
|
|
21
|
-
this.errorMessage = this.setErrorMessage();
|
|
22
|
-
this.touched = true;
|
|
23
|
-
};
|
|
24
19
|
this.setClientStyling = () => {
|
|
25
20
|
let sheet = document.createElement('style');
|
|
26
21
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -92,6 +87,17 @@ export class DateInput {
|
|
|
92
87
|
if (calendarButton) {
|
|
93
88
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
94
89
|
}
|
|
90
|
+
// Add listener for dropdown close
|
|
91
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
92
|
+
if (event.detail.value === true) {
|
|
93
|
+
this.errorMessage = '';
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
this.isValid = this.setValidity();
|
|
97
|
+
this.errorMessage = this.setErrorMessage();
|
|
98
|
+
this.touched = true;
|
|
99
|
+
}
|
|
100
|
+
});
|
|
95
101
|
}
|
|
96
102
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
97
103
|
this.isValid = this.setValidity();
|
|
@@ -143,8 +149,8 @@ export class DateInput {
|
|
|
143
149
|
if (this.touched) {
|
|
144
150
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
145
151
|
}
|
|
146
|
-
return h("div", { key: '
|
|
147
|
-
h("img", { key: '
|
|
152
|
+
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 &&
|
|
153
|
+
h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
148
154
|
}
|
|
149
155
|
static get is() { return "date-input"; }
|
|
150
156
|
static get encapsulation() { return "shadow"; }
|
|
@@ -17,7 +17,8 @@ vaadin-combo-box > input {
|
|
|
17
17
|
color: var(--emw--registration-typography, var(--emw--color-black, #000000));
|
|
18
18
|
font-weight: 300;
|
|
19
19
|
font-size: 16px;
|
|
20
|
-
-webkit-font-smoothing: initial;
|
|
20
|
+
-webkit-font-smoothing: initial;
|
|
21
|
+
/* fucks up font-weight */
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.select {
|
|
@@ -66,9 +67,12 @@ vaadin-combo-box > input {
|
|
|
66
67
|
width: inherit;
|
|
67
68
|
position: relative;
|
|
68
69
|
}
|
|
69
|
-
.select__input[focused]::part(input-field) {
|
|
70
|
+
.select__input[focused]:not(.text__input--invalid)::part(input-field) {
|
|
70
71
|
border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
71
72
|
}
|
|
73
|
+
.select__input[invalid]::part(input-field) {
|
|
74
|
+
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
75
|
+
}
|
|
72
76
|
.select__input vaadin-date-picker-overlay-content > vaadin-button {
|
|
73
77
|
color: var(--emw--color-black, #000000);
|
|
74
78
|
}
|
|
@@ -114,8 +118,4 @@ vaadin-combo-box > input {
|
|
|
114
118
|
}
|
|
115
119
|
.select__tooltip.visible {
|
|
116
120
|
opacity: 1;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.text__input--invalid {
|
|
120
|
-
border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
121
121
|
}
|
|
@@ -129,6 +129,22 @@ export class SelectInput {
|
|
|
129
129
|
this.inputReference.value = this.value;
|
|
130
130
|
}
|
|
131
131
|
this.isValid = this.setValidity();
|
|
132
|
+
// Add listener for dropdown close
|
|
133
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
134
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
135
|
+
if (event.detail.value === true) {
|
|
136
|
+
this.errorMessage = '';
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
const field = event.currentTarget;
|
|
140
|
+
this.touched = true;
|
|
141
|
+
this.value = field.value;
|
|
142
|
+
this.isValid = this.setValidity();
|
|
143
|
+
this.errorMessage = this.setErrorMessage();
|
|
144
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
}
|
|
132
148
|
}
|
|
133
149
|
getOptions(endpoint) {
|
|
134
150
|
const url = new URL(endpoint);
|
|
@@ -144,10 +160,11 @@ export class SelectInput {
|
|
|
144
160
|
});
|
|
145
161
|
}
|
|
146
162
|
setValidity() {
|
|
147
|
-
|
|
148
|
-
|
|
163
|
+
var _a;
|
|
164
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
165
|
+
return !!this.value;
|
|
149
166
|
}
|
|
150
|
-
return
|
|
167
|
+
return true;
|
|
151
168
|
}
|
|
152
169
|
setErrorMessage() {
|
|
153
170
|
var _a, _b, _c;
|
|
@@ -167,10 +184,10 @@ export class SelectInput {
|
|
|
167
184
|
if (this.touched) {
|
|
168
185
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
169
186
|
}
|
|
170
|
-
return h("div", { key: '
|
|
171
|
-
h("img", { key: '
|
|
187
|
+
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 &&
|
|
188
|
+
h("img", { key: 'dd1a0150c672ed991266dcce2808f8b6b6c0e954', class: 'select__tooltip-icon', src: tooltipIcon, 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 })
|
|
172
189
|
:
|
|
173
|
-
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
|
|
190
|
+
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));
|
|
174
191
|
}
|
|
175
192
|
static get is() { return "select-input"; }
|
|
176
193
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5302,7 +5302,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5302
5302
|
return date.getTime() < dateToCompare.getTime();
|
|
5303
5303
|
}
|
|
5304
5304
|
|
|
5305
|
-
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:
|
|
5305
|
+
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}";
|
|
5306
5306
|
const DateInputStyle0 = dateInputCss;
|
|
5307
5307
|
|
|
5308
5308
|
const DateInput = class {
|
|
@@ -5320,11 +5320,6 @@ const DateInput = class {
|
|
|
5320
5320
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
5321
5321
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5322
5322
|
};
|
|
5323
|
-
this.handleBlur = () => {
|
|
5324
|
-
this.isValid = this.setValidity();
|
|
5325
|
-
this.errorMessage = this.setErrorMessage();
|
|
5326
|
-
this.touched = true;
|
|
5327
|
-
};
|
|
5328
5323
|
this.setClientStyling = () => {
|
|
5329
5324
|
let sheet = document.createElement('style');
|
|
5330
5325
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5396,6 +5391,17 @@ const DateInput = class {
|
|
|
5396
5391
|
if (calendarButton) {
|
|
5397
5392
|
calendarButton.addEventListener('click', () => this.handleCalendarIconClick());
|
|
5398
5393
|
}
|
|
5394
|
+
// Add listener for dropdown close
|
|
5395
|
+
this.datePicker.addEventListener('opened-changed', (event) => {
|
|
5396
|
+
if (event.detail.value === true) {
|
|
5397
|
+
this.errorMessage = '';
|
|
5398
|
+
}
|
|
5399
|
+
else {
|
|
5400
|
+
this.isValid = this.setValidity();
|
|
5401
|
+
this.errorMessage = this.setErrorMessage();
|
|
5402
|
+
this.touched = true;
|
|
5403
|
+
}
|
|
5404
|
+
});
|
|
5399
5405
|
}
|
|
5400
5406
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
5401
5407
|
this.isValid = this.setValidity();
|
|
@@ -5447,8 +5453,8 @@ const DateInput = class {
|
|
|
5447
5453
|
if (this.touched) {
|
|
5448
5454
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5449
5455
|
}
|
|
5450
|
-
return h("div", { key: '
|
|
5451
|
-
h("img", { key: '
|
|
5456
|
+
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 &&
|
|
5457
|
+
h("img", { key: '59eb8060992eed776dcd679d5d852eb7f9ffa423', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5452
5458
|
}
|
|
5453
5459
|
get element() { return getElement(this); }
|
|
5454
5460
|
static get watchers() { return {
|
|
@@ -6087,7 +6093,7 @@ const RadioInput = class {
|
|
|
6087
6093
|
};
|
|
6088
6094
|
RadioInput.style = RadioInputStyle0;
|
|
6089
6095
|
|
|
6090
|
-
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}
|
|
6096
|
+
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}";
|
|
6091
6097
|
const SelectInputStyle0 = selectInputCss;
|
|
6092
6098
|
|
|
6093
6099
|
const SelectInput = class {
|
|
@@ -6221,6 +6227,22 @@ const SelectInput = class {
|
|
|
6221
6227
|
this.inputReference.value = this.value;
|
|
6222
6228
|
}
|
|
6223
6229
|
this.isValid = this.setValidity();
|
|
6230
|
+
// Add listener for dropdown close
|
|
6231
|
+
if (!this.isComboBox && this.vaadinCombo) {
|
|
6232
|
+
this.vaadinCombo.addEventListener('opened-changed', (event) => {
|
|
6233
|
+
if (event.detail.value === true) {
|
|
6234
|
+
this.errorMessage = '';
|
|
6235
|
+
}
|
|
6236
|
+
else {
|
|
6237
|
+
const field = event.currentTarget;
|
|
6238
|
+
this.touched = true;
|
|
6239
|
+
this.value = field.value;
|
|
6240
|
+
this.isValid = this.setValidity();
|
|
6241
|
+
this.errorMessage = this.setErrorMessage();
|
|
6242
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6243
|
+
}
|
|
6244
|
+
});
|
|
6245
|
+
}
|
|
6224
6246
|
}
|
|
6225
6247
|
getOptions(endpoint) {
|
|
6226
6248
|
const url = new URL(endpoint);
|
|
@@ -6236,10 +6258,11 @@ const SelectInput = class {
|
|
|
6236
6258
|
});
|
|
6237
6259
|
}
|
|
6238
6260
|
setValidity() {
|
|
6239
|
-
|
|
6240
|
-
|
|
6261
|
+
var _a;
|
|
6262
|
+
if ((_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory) {
|
|
6263
|
+
return !!this.value;
|
|
6241
6264
|
}
|
|
6242
|
-
return
|
|
6265
|
+
return true;
|
|
6243
6266
|
}
|
|
6244
6267
|
setErrorMessage() {
|
|
6245
6268
|
var _a, _b, _c;
|
|
@@ -6259,10 +6282,10 @@ const SelectInput = class {
|
|
|
6259
6282
|
if (this.touched) {
|
|
6260
6283
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6261
6284
|
}
|
|
6262
|
-
return h("div", { key: '
|
|
6263
|
-
h("img", { key: '
|
|
6285
|
+
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 &&
|
|
6286
|
+
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 })
|
|
6264
6287
|
:
|
|
6265
|
-
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
|
|
6288
|
+
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));
|
|
6266
6289
|
}
|
|
6267
6290
|
static get watchers() { return {
|
|
6268
6291
|
"clientStyling": ["handleStylingChange"],
|