@everymatrix/general-input 1.65.3 → 1.66.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +41 -18
- package/dist/cjs/general-input.cjs.entry.js +258 -258
- package/dist/cjs/toggle-checkbox-input.cjs.entry.js +2 -2
- package/dist/collection/components/select-input/select-input.css +3 -4
- package/dist/collection/components/select-input/select-input.js +30 -9
- package/dist/collection/components/tel-input/tel-input.js +2 -2
- package/dist/collection/components/text-input/text-input.css +0 -1
- package/dist/collection/components/text-input/text-input.js +7 -5
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +2 -2
- package/dist/esm/checkbox-group-input_10.entry.js +41 -18
- package/dist/esm/general-input.entry.js +258 -258
- package/dist/esm/toggle-checkbox-input.entry.js +2 -2
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-eab6dd39.entry.js → p-8174f03d.entry.js} +1 -1
- package/dist/general-input/{p-e6ce8179.entry.js → p-a0e75840.entry.js} +1 -1
- package/dist/general-input/{p-d60ab9f7.entry.js → p-b78847ce.entry.js} +217 -217
- package/dist/types/components/select-input/select-input.d.ts +3 -1
- package/dist/types/utils/types.d.ts +19 -0
- package/package.json +1 -1
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → 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/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{raul.vasile/workspace/everymatrix → adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -104,8 +104,8 @@ const ToggleCheckboxInput = class {
|
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
|
-
return index.h("div", { key: '
|
|
108
|
-
index.h("img", { key: '
|
|
107
|
+
return index.h("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
108
|
+
index.h("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
109
109
|
return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
110
110
|
})));
|
|
111
111
|
}
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
:host {
|
|
10
10
|
height: 100%;
|
|
11
|
+
--_invalid-hover-highlight: transparent;
|
|
12
|
+
--vaadin-input-field-invalid-hover-highlight: transparent;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
vaadin-combo-box > input {
|
|
@@ -80,16 +82,13 @@ vaadin-combo-box > input {
|
|
|
80
82
|
font-size: 16px;
|
|
81
83
|
font-weight: 300;
|
|
82
84
|
line-height: 1.5;
|
|
83
|
-
padding:
|
|
85
|
+
padding: 5px 15px;
|
|
84
86
|
height: 44px;
|
|
85
87
|
}
|
|
86
88
|
.select__input::part(toggle-button) {
|
|
87
89
|
position: relative;
|
|
88
90
|
right: 10px;
|
|
89
91
|
}
|
|
90
|
-
.select__input > input {
|
|
91
|
-
padding: 5px 15px;
|
|
92
|
-
}
|
|
93
92
|
.select__error-message {
|
|
94
93
|
position: absolute;
|
|
95
94
|
top: calc(100% + 5px);
|
|
@@ -4,7 +4,7 @@ import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
|
4
4
|
export class SelectInput {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.touched = false;
|
|
7
|
-
this.
|
|
7
|
+
this.handleComboChange = (event) => {
|
|
8
8
|
this.touched = true;
|
|
9
9
|
const selectedValue = event.target.value;
|
|
10
10
|
// Find the original option based on case-insensitive comparison
|
|
@@ -20,11 +20,22 @@ export class SelectInput {
|
|
|
20
20
|
this.emitValueHandler(true);
|
|
21
21
|
};
|
|
22
22
|
this.handleBlur = (event) => {
|
|
23
|
-
|
|
23
|
+
const field = event.currentTarget;
|
|
24
|
+
if (field.opened)
|
|
25
|
+
return;
|
|
26
|
+
this.touched = true;
|
|
27
|
+
this.value = field.value;
|
|
28
|
+
this.isValid = this.setValidity();
|
|
29
|
+
this.errorMessage = this.setErrorMessage();
|
|
30
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
31
|
+
};
|
|
32
|
+
this.handleSelectChange = (event) => {
|
|
24
33
|
this.touched = true;
|
|
34
|
+
this.value = event.target.value;
|
|
25
35
|
this.isValid = this.setValidity();
|
|
26
36
|
this.errorMessage = this.setErrorMessage();
|
|
27
37
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
38
|
+
this.emitValueHandler(true);
|
|
28
39
|
};
|
|
29
40
|
this.setClientStyling = () => {
|
|
30
41
|
let sheet = document.createElement('style');
|
|
@@ -70,29 +81,32 @@ export class SelectInput {
|
|
|
70
81
|
this.sendInputValue.emit(inputValueEvent);
|
|
71
82
|
}
|
|
72
83
|
handleClickOutside(event) {
|
|
73
|
-
//Check for empty field when closing the dropdown
|
|
74
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
75
|
-
this.errorMessage = this.setErrorMessage();
|
|
76
84
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
77
85
|
return;
|
|
78
86
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
79
87
|
this.showTooltip = false;
|
|
80
88
|
}
|
|
81
89
|
connectedCallback() {
|
|
90
|
+
var _a;
|
|
82
91
|
this.displayedOptions = this.options.map(option => ({
|
|
83
92
|
label: option.label,
|
|
84
93
|
value: option.value
|
|
85
94
|
}));
|
|
95
|
+
// Use the searchable select if there are more then 6 values
|
|
96
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
86
97
|
}
|
|
87
98
|
componentWillLoad() {
|
|
88
99
|
if (this.action && !this.options.length) {
|
|
89
100
|
if (this.action.split(" ")[0] == 'GET') {
|
|
90
101
|
const endpoint = this.action.split(" ")[1];
|
|
91
102
|
return this.getOptions(endpoint).then((options) => {
|
|
103
|
+
var _a;
|
|
92
104
|
const firstKey = Object.keys(options)[0];
|
|
93
105
|
this.displayedOptions = options[firstKey].map(option => {
|
|
94
106
|
return { label: option.Name, value: option.Alpha2Code };
|
|
95
107
|
});
|
|
108
|
+
// Use the searchable select if there are more then 6 values
|
|
109
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
96
110
|
});
|
|
97
111
|
}
|
|
98
112
|
}
|
|
@@ -130,10 +144,14 @@ export class SelectInput {
|
|
|
130
144
|
});
|
|
131
145
|
}
|
|
132
146
|
setValidity() {
|
|
133
|
-
|
|
147
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
148
|
+
return this.vaadinCombo.validate();
|
|
149
|
+
}
|
|
150
|
+
return false;
|
|
134
151
|
}
|
|
135
152
|
setErrorMessage() {
|
|
136
|
-
|
|
153
|
+
var _a, _b, _c;
|
|
154
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
137
155
|
return translate('requiredError', this.language);
|
|
138
156
|
}
|
|
139
157
|
}
|
|
@@ -144,12 +162,15 @@ export class SelectInput {
|
|
|
144
162
|
return null;
|
|
145
163
|
}
|
|
146
164
|
render() {
|
|
165
|
+
var _a, _b;
|
|
147
166
|
let invalidClass = '';
|
|
148
167
|
if (this.touched) {
|
|
149
168
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
150
169
|
}
|
|
151
|
-
return h("div", { key: '
|
|
152
|
-
h("img", { key: '
|
|
170
|
+
return h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
171
|
+
h("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', 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
|
+
:
|
|
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, onBlur: this.handleBlur }), h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
153
174
|
}
|
|
154
175
|
static get is() { return "select-input"; }
|
|
155
176
|
static get encapsulation() { return "shadow"; }
|
|
@@ -163,8 +163,8 @@ export class TelInput {
|
|
|
163
163
|
if (this.touched) {
|
|
164
164
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
165
165
|
}
|
|
166
|
-
return h("div", { key: '
|
|
167
|
-
h("img", { key: '
|
|
166
|
+
return h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
167
|
+
h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
168
168
|
}
|
|
169
169
|
static get is() { return "tel-input"; }
|
|
170
170
|
static get encapsulation() { return "shadow"; }
|
|
@@ -125,13 +125,15 @@ export class TextInput {
|
|
|
125
125
|
this.isValid = this.setValidity();
|
|
126
126
|
}
|
|
127
127
|
setValidity() {
|
|
128
|
-
var _a;
|
|
129
128
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
130
129
|
return false;
|
|
131
130
|
}
|
|
132
|
-
|
|
133
|
-
return
|
|
131
|
+
if (!this.inputReference) {
|
|
132
|
+
return false;
|
|
134
133
|
}
|
|
134
|
+
const inputIsValid = this.inputReference.validity.valid;
|
|
135
|
+
const inputMatchValidation = !this.inputReference.value || this.inputReference.value.match(this.validationPattern) !== null;
|
|
136
|
+
return inputIsValid && inputMatchValidation;
|
|
135
137
|
}
|
|
136
138
|
setPattern() {
|
|
137
139
|
var _a, _b;
|
|
@@ -169,8 +171,8 @@ export class TextInput {
|
|
|
169
171
|
if (this.touched) {
|
|
170
172
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
171
173
|
}
|
|
172
|
-
return h("div", { key: '
|
|
173
|
-
h("img", { key: '
|
|
174
|
+
return h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
175
|
+
h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
174
176
|
}
|
|
175
177
|
static get is() { return "text-input"; }
|
|
176
178
|
static get encapsulation() { return "shadow"; }
|
|
@@ -93,8 +93,8 @@ export class ToggleCheckboxInput {
|
|
|
93
93
|
return null;
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return h("div", { key: '
|
|
97
|
-
h("img", { key: '
|
|
96
|
+
return h("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
98
98
|
return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
99
99
|
})));
|
|
100
100
|
}
|
|
@@ -6086,7 +6086,7 @@ const RadioInput = class {
|
|
|
6086
6086
|
};
|
|
6087
6087
|
RadioInput.style = RadioInputStyle0;
|
|
6088
6088
|
|
|
6089
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
6089
|
+
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}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
6090
6090
|
const SelectInputStyle0 = selectInputCss;
|
|
6091
6091
|
|
|
6092
6092
|
const SelectInput = class {
|
|
@@ -6095,7 +6095,7 @@ const SelectInput = class {
|
|
|
6095
6095
|
this.sendValidityState = createEvent(this, "sendValidityState", 7);
|
|
6096
6096
|
this.sendInputValue = createEvent(this, "sendInputValue", 7);
|
|
6097
6097
|
this.touched = false;
|
|
6098
|
-
this.
|
|
6098
|
+
this.handleComboChange = (event) => {
|
|
6099
6099
|
this.touched = true;
|
|
6100
6100
|
const selectedValue = event.target.value;
|
|
6101
6101
|
// Find the original option based on case-insensitive comparison
|
|
@@ -6111,12 +6111,23 @@ const SelectInput = class {
|
|
|
6111
6111
|
this.emitValueHandler(true);
|
|
6112
6112
|
};
|
|
6113
6113
|
this.handleBlur = (event) => {
|
|
6114
|
-
|
|
6114
|
+
const field = event.currentTarget;
|
|
6115
|
+
if (field.opened)
|
|
6116
|
+
return;
|
|
6115
6117
|
this.touched = true;
|
|
6118
|
+
this.value = field.value;
|
|
6116
6119
|
this.isValid = this.setValidity();
|
|
6117
6120
|
this.errorMessage = this.setErrorMessage();
|
|
6118
6121
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6119
6122
|
};
|
|
6123
|
+
this.handleSelectChange = (event) => {
|
|
6124
|
+
this.touched = true;
|
|
6125
|
+
this.value = event.target.value;
|
|
6126
|
+
this.isValid = this.setValidity();
|
|
6127
|
+
this.errorMessage = this.setErrorMessage();
|
|
6128
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6129
|
+
this.emitValueHandler(true);
|
|
6130
|
+
};
|
|
6120
6131
|
this.setClientStyling = () => {
|
|
6121
6132
|
let sheet = document.createElement('style');
|
|
6122
6133
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -6161,29 +6172,32 @@ const SelectInput = class {
|
|
|
6161
6172
|
this.sendInputValue.emit(inputValueEvent);
|
|
6162
6173
|
}
|
|
6163
6174
|
handleClickOutside(event) {
|
|
6164
|
-
//Check for empty field when closing the dropdown
|
|
6165
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
6166
|
-
this.errorMessage = this.setErrorMessage();
|
|
6167
6175
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
6168
6176
|
return;
|
|
6169
6177
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6170
6178
|
this.showTooltip = false;
|
|
6171
6179
|
}
|
|
6172
6180
|
connectedCallback() {
|
|
6181
|
+
var _a;
|
|
6173
6182
|
this.displayedOptions = this.options.map(option => ({
|
|
6174
6183
|
label: option.label,
|
|
6175
6184
|
value: option.value
|
|
6176
6185
|
}));
|
|
6186
|
+
// Use the searchable select if there are more then 6 values
|
|
6187
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
6177
6188
|
}
|
|
6178
6189
|
componentWillLoad() {
|
|
6179
6190
|
if (this.action && !this.options.length) {
|
|
6180
6191
|
if (this.action.split(" ")[0] == 'GET') {
|
|
6181
6192
|
const endpoint = this.action.split(" ")[1];
|
|
6182
6193
|
return this.getOptions(endpoint).then((options) => {
|
|
6194
|
+
var _a;
|
|
6183
6195
|
const firstKey = Object.keys(options)[0];
|
|
6184
6196
|
this.displayedOptions = options[firstKey].map(option => {
|
|
6185
6197
|
return { label: option.Name, value: option.Alpha2Code };
|
|
6186
6198
|
});
|
|
6199
|
+
// Use the searchable select if there are more then 6 values
|
|
6200
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
6187
6201
|
});
|
|
6188
6202
|
}
|
|
6189
6203
|
}
|
|
@@ -6221,10 +6235,14 @@ const SelectInput = class {
|
|
|
6221
6235
|
});
|
|
6222
6236
|
}
|
|
6223
6237
|
setValidity() {
|
|
6224
|
-
|
|
6238
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
6239
|
+
return this.vaadinCombo.validate();
|
|
6240
|
+
}
|
|
6241
|
+
return false;
|
|
6225
6242
|
}
|
|
6226
6243
|
setErrorMessage() {
|
|
6227
|
-
|
|
6244
|
+
var _a, _b, _c;
|
|
6245
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
6228
6246
|
return translate('requiredError', this.language);
|
|
6229
6247
|
}
|
|
6230
6248
|
}
|
|
@@ -6235,12 +6253,15 @@ const SelectInput = class {
|
|
|
6235
6253
|
return null;
|
|
6236
6254
|
}
|
|
6237
6255
|
render() {
|
|
6256
|
+
var _a, _b;
|
|
6238
6257
|
let invalidClass = '';
|
|
6239
6258
|
if (this.touched) {
|
|
6240
6259
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6241
6260
|
}
|
|
6242
|
-
return h("div", { key: '
|
|
6243
|
-
h("img", { key: '
|
|
6261
|
+
return h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
6262
|
+
h("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', 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 })
|
|
6263
|
+
:
|
|
6264
|
+
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, onBlur: this.handleBlur }), h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
6244
6265
|
}
|
|
6245
6266
|
static get watchers() { return {
|
|
6246
6267
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6418,8 +6439,8 @@ const TelInput = class {
|
|
|
6418
6439
|
if (this.touched) {
|
|
6419
6440
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6420
6441
|
}
|
|
6421
|
-
return h("div", { key: '
|
|
6422
|
-
h("img", { key: '
|
|
6442
|
+
return h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
6443
|
+
h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
6423
6444
|
}
|
|
6424
6445
|
static get watchers() { return {
|
|
6425
6446
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6429,7 +6450,7 @@ const TelInput = class {
|
|
|
6429
6450
|
};
|
|
6430
6451
|
TelInput.style = TelInputStyle0;
|
|
6431
6452
|
|
|
6432
|
-
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px
|
|
6453
|
+
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__input::placeholder{color:var(--emw--color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
|
|
6433
6454
|
const TextInputStyle0 = textInputCss;
|
|
6434
6455
|
|
|
6435
6456
|
const TextInput = class {
|
|
@@ -6559,13 +6580,15 @@ const TextInput = class {
|
|
|
6559
6580
|
this.isValid = this.setValidity();
|
|
6560
6581
|
}
|
|
6561
6582
|
setValidity() {
|
|
6562
|
-
var _a;
|
|
6563
6583
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
6564
6584
|
return false;
|
|
6565
6585
|
}
|
|
6566
|
-
|
|
6567
|
-
return
|
|
6586
|
+
if (!this.inputReference) {
|
|
6587
|
+
return false;
|
|
6568
6588
|
}
|
|
6589
|
+
const inputIsValid = this.inputReference.validity.valid;
|
|
6590
|
+
const inputMatchValidation = !this.inputReference.value || this.inputReference.value.match(this.validationPattern) !== null;
|
|
6591
|
+
return inputIsValid && inputMatchValidation;
|
|
6569
6592
|
}
|
|
6570
6593
|
setPattern() {
|
|
6571
6594
|
var _a, _b;
|
|
@@ -6603,8 +6626,8 @@ const TextInput = class {
|
|
|
6603
6626
|
if (this.touched) {
|
|
6604
6627
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6605
6628
|
}
|
|
6606
|
-
return h("div", { key: '
|
|
6607
|
-
h("img", { key: '
|
|
6629
|
+
return h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
6630
|
+
h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
6608
6631
|
}
|
|
6609
6632
|
static get watchers() { return {
|
|
6610
6633
|
"clientStyling": ["handleStylingChange"],
|