@everymatrix/general-input 1.39.3 → 1.41.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.
Files changed (39) hide show
  1. package/dist/cjs/checkbox-group-input_10.cjs.entry.js +36 -19
  2. package/dist/cjs/general-input.cjs.entry.js +1 -1
  3. package/dist/cjs/general-input.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{locale.utils-cef1d3b6.js → locale.utils-2fa6f747.js} +53 -34
  6. package/dist/cjs/toggle-checkbox-input.cjs.entry.js +1 -1
  7. package/dist/collection/components/date-input/date-input.css +1 -1
  8. package/dist/collection/components/date-input/date-input.js +1 -4
  9. package/dist/collection/components/email-input/email-input.css +11 -7
  10. package/dist/collection/components/email-input/email-input.js +1 -1
  11. package/dist/collection/components/password-input/password-input.js +42 -7
  12. package/dist/collection/components/select-input/select-input.css +7 -7
  13. package/dist/collection/components/select-input/select-input.js +2 -2
  14. package/dist/collection/components/tel-input/tel-input.js +3 -3
  15. package/dist/collection/components/text-input/text-input.css +1 -0
  16. package/dist/collection/utils/locale.utils.js +53 -34
  17. package/dist/components/date-input2.js +2 -2
  18. package/dist/components/email-input2.js +2 -2
  19. package/dist/components/password-input2.js +25 -7
  20. package/dist/components/select-input2.js +3 -3
  21. package/dist/components/tel-input2.js +3 -3
  22. package/dist/components/text-input2.js +1 -1
  23. package/dist/components/tooltipIcon.js +53 -34
  24. package/dist/esm/checkbox-group-input_10.entry.js +36 -19
  25. package/dist/esm/general-input.entry.js +1 -1
  26. package/dist/esm/general-input.js +1 -1
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/{locale.utils-de759721.js → locale.utils-30fb5289.js} +53 -34
  29. package/dist/esm/toggle-checkbox-input.entry.js +1 -1
  30. package/dist/general-input/general-input.esm.js +1 -1
  31. package/dist/general-input/p-04d4b145.js +1 -0
  32. package/dist/general-input/{p-613c3e00.entry.js → p-90e8d52e.entry.js} +1 -1
  33. package/dist/general-input/{p-c2d51e17.entry.js → p-b64caafa.entry.js} +47 -47
  34. package/dist/general-input/{p-660bcdd1.entry.js → p-f659e9ee.entry.js} +1 -1
  35. package/dist/types/components/password-input/password-input.d.ts +5 -0
  36. package/dist/types/components.d.ts +8 -0
  37. package/dist/types/utils/locale.utils.d.ts +1 -0
  38. package/package.json +1 -1
  39. package/dist/general-input/p-10efdf3f.js +0 -1
package/dist/cjs/checkbox-group-input_10.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-132a0774.js');
6
- const locale_utils = require('./locale.utils-cef1d3b6.js');
6
+ const locale_utils = require('./locale.utils-2fa6f747.js');
7
7
  const tooltipIcon = require('./tooltipIcon-092a795f.js');
8
8
 
9
9
  /**
@@ -29620,7 +29620,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
29620
29620
  return date.getTime() < dateToCompare.getTime();
29621
29621
  }
29622
29622
 
29623
- 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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
29623
+ 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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
29624
29624
 
29625
29625
  const DateInput = class {
29626
29626
  constructor(hostRef) {
@@ -29739,7 +29739,7 @@ const DateInput = class {
29739
29739
  if (this.touched) {
29740
29740
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
29741
29741
  }
29742
- return index.h("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
29742
+ return index.h("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
29743
29743
  index.h("img", { class: 'date__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
29744
29744
  }
29745
29745
  get element() { return index.getElement(this); }
@@ -29750,7 +29750,7 @@ const DateInput = class {
29750
29750
  };
29751
29751
  DateInput.style = dateInputCss;
29752
29752
 
29753
- const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emfe-w-color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29753
+ const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.email__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29754
29754
 
29755
29755
  const EmailInput = class {
29756
29756
  constructor(hostRef) {
@@ -29874,7 +29874,7 @@ const EmailInput = class {
29874
29874
  render() {
29875
29875
  let invalidClass = '';
29876
29876
  if (this.touched) {
29877
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
29877
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
29878
29878
  }
29879
29879
  return index.h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
29880
29880
  index.h("img", { class: 'email__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'email__error-message' }, this.errorMessage));
@@ -30808,6 +30808,10 @@ const PasswordInput = class {
30808
30808
  * Client custom styling via inline style
30809
30809
  */
30810
30810
  this.clientStyling = '';
30811
+ /**
30812
+ * Client Styling Url
30813
+ */
30814
+ this.clientStylingUrl = '';
30811
30815
  this.limitStylingAppends = false;
30812
30816
  this.showTooltip = false;
30813
30817
  this.value = '';
@@ -30818,7 +30822,7 @@ const PasswordInput = class {
30818
30822
  this.handleInput = (event) => {
30819
30823
  this.value = event.target.value;
30820
30824
  this.calculateComplexity(this.value);
30821
- this.showPopup = true;
30825
+ this.validation.custom.length === 0 || (this.showPopup = true);
30822
30826
  this.touched = true;
30823
30827
  if (this.debounceTime) {
30824
30828
  clearTimeout(this.debounceTime);
@@ -30837,14 +30841,27 @@ const PasswordInput = class {
30837
30841
  this.errorMessage = this.setErrorMessage();
30838
30842
  };
30839
30843
  this.handleFocus = () => {
30840
- this.showPopup = true;
30844
+ this.validation.custom.length === 0 || (this.showPopup = true);
30841
30845
  this.calculateComplexity(this.value);
30842
30846
  };
30843
30847
  this.setClientStyling = () => {
30844
- let sheet = document.createElement('style');
30848
+ const sheet = document.createElement('style');
30845
30849
  sheet.innerHTML = this.clientStyling;
30846
30850
  this.stylingContainer.prepend(sheet);
30847
30851
  };
30852
+ this.setClientStylingURL = () => {
30853
+ const url = new URL(this.clientStylingUrl);
30854
+ const cssFile = document.createElement('style');
30855
+ fetch(url.href)
30856
+ .then((res) => res.text())
30857
+ .then((data) => {
30858
+ cssFile.innerHTML = data;
30859
+ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
30860
+ })
30861
+ .catch((err) => {
30862
+ console.error(err);
30863
+ });
30864
+ };
30848
30865
  }
30849
30866
  validityChanged() {
30850
30867
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -30931,11 +30948,11 @@ const PasswordInput = class {
30931
30948
  }
30932
30949
  calculateComplexity(password) {
30933
30950
  this.passwordComplexity = this.validation.custom
30934
- .filter(rule => rule.rule === 'regex')
30935
- .map(rule => {
30936
- const ruleRegex = new RegExp(rule.pattern);
30951
+ .filter(customValidation => customValidation.rule.toLowerCase() === 'regex')
30952
+ .map(customValidation => {
30953
+ const ruleRegex = new RegExp(customValidation.pattern);
30937
30954
  const passed = ruleRegex.test(password);
30938
- return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
30955
+ return { rule: customValidation.displayName, ruleKey: customValidation.errorKey, passed };
30939
30956
  });
30940
30957
  }
30941
30958
  setValidity() {
@@ -35601,7 +35618,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
35601
35618
 
35602
35619
  defineCustomElement(ComboBox);
35603
35620
 
35604
- const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
35621
+ const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-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;height:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
35605
35622
 
35606
35623
  const SelectInput = class {
35607
35624
  constructor(hostRef) {
@@ -35733,9 +35750,9 @@ const SelectInput = class {
35733
35750
  render() {
35734
35751
  let invalidClass = '';
35735
35752
  if (this.touched) {
35736
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
35753
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
35737
35754
  }
35738
- return index.h("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
35755
+ return index.h("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: `select__label ${this.validation.mandatory ? 'select__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
35739
35756
  index.h("img", { class: 'select__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
35740
35757
  }
35741
35758
  get element() { return index.getElement(this); }
@@ -35821,7 +35838,7 @@ const TelInput = class {
35821
35838
  const endpoint = this.action.split(" ")[1];
35822
35839
  return this.getPhoneCodes(endpoint).then((options) => {
35823
35840
  this.phoneCodesOptions = options.phoneCodes.map(code => {
35824
- return { label: code.Prefix, value: code.Prefix };
35841
+ return { label: code.Prefix || code, value: code.Prefix || code };
35825
35842
  });
35826
35843
  });
35827
35844
  }
@@ -35893,10 +35910,10 @@ const TelInput = class {
35893
35910
  render() {
35894
35911
  let invalidClass = '';
35895
35912
  if (this.touched) {
35896
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
35913
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
35897
35914
  }
35898
35915
  return index.h("div", { class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
35899
- index.h("img", { class: 'tel__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { 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 })), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
35916
+ index.h("img", { class: 'tel__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { 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 })), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
35900
35917
  }
35901
35918
  static get watchers() { return {
35902
35919
  "isValid": ["validityChanged"],
@@ -35905,7 +35922,7 @@ const TelInput = class {
35905
35922
  };
35906
35923
  TelInput.style = telInputCss;
35907
35924
 
35908
- const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-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(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
35925
+ const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-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(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-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(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-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}";
35909
35926
 
35910
35927
  const TextInput = class {
35911
35928
  constructor(hostRef) {
package/dist/cjs/general-input.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-132a0774.js');
6
- const locale_utils = require('./locale.utils-cef1d3b6.js');
6
+ const locale_utils = require('./locale.utils-2fa6f747.js');
7
7
 
8
8
  const generalInputCss = ":host{display:block;height:100%}";
9
9
 
package/dist/cjs/general-input.cjs.js CHANGED
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["checkbox-group-input_10.cjs",[[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["general-input.cjs",[[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"]}]]],["toggle-checkbox-input.cjs",[[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]]]]], options);
18
+ return index.bootstrapLazy([["checkbox-group-input_10.cjs",[[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["general-input.cjs",[[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"]}]]],["toggle-checkbox-input.cjs",[[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]]]]], options);
19
19
  });
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["checkbox-group-input_10.cjs",[[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["general-input.cjs",[[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"]}]]],["toggle-checkbox-input.cjs",[[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]]]]], options);
17
+ return index.bootstrapLazy([["checkbox-group-input_10.cjs",[[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["general-input.cjs",[[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"]}]]],["toggle-checkbox-input.cjs",[[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]]]]], options);
18
18
  });
19
19
  };
20
20
 
package/dist/cjs/{locale.utils-cef1d3b6.js → locale.utils-2fa6f747.js} RENAMED
@@ -3,62 +3,81 @@
3
3
  const DEFAULT_LANGUAGE = 'en';
4
4
  const TRANSLATIONS = {
5
5
  "en": {
6
- "dateError": 'The selected date should be between {min} and {max}',
7
- "dateError2": 'The selected date is not within the accepted range',
8
- "numberLengthError": 'The number should be between {min} and {max}',
9
- "lengthError": `The length should be between {minLength} and {maxLength}`,
10
- "requiredError": 'This input is required.',
6
+ "dateError": "The selected date should be between {min} and {max}",
7
+ "dateError2": "The selected date is not within the accepted range",
8
+ "numberLengthError": "The number should be between {min} and {max}",
9
+ "lengthError": "The length should be between {minLength} and {maxLength}",
10
+ "requiredError": "This input is required.",
11
11
  "invalidOriginalPasswordError": "Initial password field does not validate all criteria.",
12
12
  "passwordStrength": "Password strength",
13
13
  "passwordStrengthWeak": "is not adequate",
14
14
  "passwordStrengthStrong": "is adequate",
15
- "SpecialCharactersNotAllowed": 'Should not contain special characters',
15
+ "SpecialCharactersNotAllowed": "Should not contain special characters",
16
16
  "InvalidEmailFormat": "Invalid email format.",
17
17
  "EmailNotMatching": "Emails not matching!",
18
18
  "PasswordNotMatching": "Passwords not matching",
19
- "MustIncludeNumber": "include a number",
20
- "MustContainCapital": "contain capital letters",
21
- "MustIncludePunctation": "punctuation",
19
+ "MustIncludeNumber": "Password must include a number",
20
+ "MustContainCapital": "Password must include a capital letter",
21
+ "MustIncludePunctation": "Password must include punctuation",
22
22
  "OnlyNumbers": "Should contains only numbers."
23
23
  },
24
24
  "hu": {
25
- "dateError": 'A választott dátumnak {min} és {max} között kell lennie',
26
- "numberLengthError": 'A számnak {min} és {max} között kell lennie',
27
- "lengthError": `A hossznak {minLength} és {maxLength} között kell lennie`,
28
- "requiredError": 'Ez a beviteli mező kötelező.',
25
+ "dateError": "A választott dátumnak {min} és {max} között kell lennie",
26
+ "numberLengthError": "A számnak {min} és {max} között kell lennie",
27
+ "lengthError": "A hossznak {minLength} és {maxLength} között kell lennie",
28
+ "requiredError": "Ez a beviteli mező kötelező.",
29
29
  "invalidOriginalPasswordError": "Initial password field does not validate all criteria.",
30
30
  "passwordStrength": "Jelszó erőssége",
31
31
  "passwordStrengthWeak": "nem megfelelő",
32
32
  "passwordStrengthStrong": "megfelelő",
33
- "SpecialCharactersNotAllowed": 'Nem tartalmazhat speciális karaktereket',
33
+ "SpecialCharactersNotAllowed": "Nem tartalmazhat speciális karaktereket",
34
34
  "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
35
35
  "EmailNotMatching": "Az e-mailek nem egyeznek!",
36
36
  "PasswordNotMatching": "A jelszavak nem egyeznek",
37
- "MustIncludeNumber": "tartalmaznia kell egy számot",
38
- "MustContainCapital": "nagybetűket kell tartalmaznia",
39
- "MustIncludePunctation": "írásjelet",
37
+ "MustIncludeNumber": "A jelszónak tartalmaznia kell egy számot",
38
+ "MustContainCapital": "A jelszónak tartalmaznia kell egy nagybetűt",
39
+ "MustIncludePunctuation": "A jelszónak tartalmaznia kell írásjelet",
40
40
  "OnlyNumbers": "Csak számokat kell tartalmaznia."
41
41
  },
42
42
  "hr": {
43
- "dateError": 'Odabrani datum treba biti između {min} i {max}',
44
- "dateError2": 'Odabrani datum nije unutar prihvaćenog raspona',
45
- "numberLengthError": 'Broj bi trebao biti između {min} i {max}',
46
- "lengthError": `Duljina bi trebala biti između {minLength} i {maxLength}`,
47
- "requiredError": 'Ovaj unos je obavezan.',
43
+ "dateError": "Odabrani datum treba biti između {min} i {max}",
44
+ "dateError2": "Odabrani datum nije unutar prihvaćenog raspona",
45
+ "numberLengthError": "Broj bi trebao biti između {min} i {max}",
46
+ "lengthError": "Duljina bi trebala biti između {minLength} i {maxLength}",
47
+ "requiredError": "Ovaj unos je obavezan.",
48
48
  "invalidOriginalPasswordError": "Polje početne lozinke ne potvrđuje sve kriterije",
49
49
  "passwordStrength": "Jačina zaporke",
50
50
  "passwordStrengthWeak": "nije adekvatno",
51
51
  "passwordStrengthStrong": "je adekvatan",
52
- "SpecialCharactersNotAllowed": 'Ne smije sadržavati posebne znakove',
52
+ "SpecialCharactersNotAllowed": "Ne smije sadržavati posebne znakove",
53
53
  "InvalidEmailFormat": "Nevažeći format e-maila",
54
54
  "EmailNotMatching": "E-mailovi se ne podudaraju!",
55
55
  "PasswordNotMatching": "Lozinke se ne podudaraju",
56
- "MustIncludeNumber": "uključiti broj",
57
- "MustContainCapital": "sadrže velika slova",
58
- "MustIncludePunctation": "interpunkcija",
56
+ "MustIncludeNumber": "Lozinka mora sadržavati broj",
57
+ "MustContainCapital": "Lozinka mora sadržavati veliko slovo",
58
+ "MustIncludePunctuation": "Lozinka mora sadržavati interpunkcijski znak",
59
59
  "OnlyNumbers": "Treba sadržavati samo brojeve."
60
60
  },
61
- 'pt-br': {
61
+ "tr": {
62
+ "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
63
+ "dateError2": "Seçilen tarih kabul edilen aralıkta değil",
64
+ "numberLengthError": "Sayı {min} ve {max} arasında olmalıdır",
65
+ "lengthError": "Uzunluk {minLength} ve {maxLength} arasında olmalıdır",
66
+ "requiredError": "Bu alan zorunludur.",
67
+ "invalidOriginalPasswordError": "İlk şifre alanı tüm kriterleri karşılamıyor.",
68
+ "passwordStrength": "Şifre gücü",
69
+ "passwordStrengthWeak": "yetersiz",
70
+ "passwordStrengthStrong": "yeterli",
71
+ "SpecialCharactersNotAllowed": "Özel karakter içermemelidir",
72
+ "InvalidEmailFormat": "Geçersiz e-posta formatı.",
73
+ "EmailNotMatching": "E-postalar uyuşmuyor!",
74
+ "PasswordNotMatching": "Şifreler uyuşmuyor",
75
+ "MustIncludeNumber": "bir sayı içermelidir",
76
+ "MustContainCapital": "büyük harf içermelidir",
77
+ "MustIncludePunctation": "noktalama işareti içermelidir",
78
+ "OnlyNumbers": "Sadece sayılar içermelidir."
79
+ },
80
+ "pt-br": {
62
81
  "dateError": "A data selecionada deve estar entre {min} e {max}",
63
82
  "dateError2": "A data selecionada não está dentro de um intervalo válido",
64
83
  "numberLengthError": "O número deve estar entre {min} e {max}",
@@ -72,12 +91,12 @@ const TRANSLATIONS = {
72
91
  "InvalidEmailFormat": "Formato de email inválido",
73
92
  "EmailNotMatching": "E-mail não corresponde",
74
93
  "PasswordNotMatching": "Senha não corresponde",
75
- "MustIncludeNumber": "inclui um número",
76
- "MustContainCapital": "contém letras maiúsculas",
77
- "MustIncludePunctation": "pontuação",
94
+ "MustIncludeNumber": "A senha deve incluir um número",
95
+ "MustContainCapital": "A senha deve incluir uma letra maiúscula",
96
+ "MustIncludePunctuation": "A senha deve incluir um sinal de pontuação",
78
97
  "OnlyNumbers": "Deve conter apenas números"
79
98
  },
80
- 'es-mx': {
99
+ "es-mx": {
81
100
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
82
101
  "dateError2": "La fecha seleccionada no está dentro de un rango válido",
83
102
  "numberLengthError": "El número debe ser entre {min} y {max}",
@@ -91,9 +110,9 @@ const TRANSLATIONS = {
91
110
  "InvalidEmailFormat": "Formato inválido de correo",
92
111
  "EmailNotMatching": "El correo electrónico no coincide",
93
112
  "PasswordNotMatching": "La contraseña no coincide",
94
- "MustIncludeNumber": "incluye un número",
95
- "MustContainCapital": "contiene mayúsculas",
96
- "MustIncludePunctation": "puntuación",
113
+ "MustIncludeNumber": "La contraseña debe incluir un número",
114
+ "MustContainCapital": "La contraseña debe incluir una letra mayúscula",
115
+ "MustIncludePunctuation": "La contraseña debe incluir un signo de puntuación",
97
116
  "OnlyNumbers": "Solo debe contener números"
98
117
  }
99
118
  };
package/dist/cjs/toggle-checkbox-input.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-132a0774.js');
6
- const locale_utils = require('./locale.utils-cef1d3b6.js');
6
+ const locale_utils = require('./locale.utils-2fa6f747.js');
7
7
  const tooltipIcon = require('./tooltipIcon-092a795f.js');
8
8
 
9
9
  const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:10px;align-items:baseline}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px;accent-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;cursor:pointer;padding:0}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
package/dist/collection/components/date-input/date-input.css CHANGED
@@ -47,7 +47,7 @@
47
47
  position: relative;
48
48
  }
49
49
  .date__input[focused]::part(input-field) {
50
- border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
50
+ border: 1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
51
51
  }
52
52
  .date__input[invalid]::part(input-field) {
53
53
  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
package/dist/collection/components/date-input/date-input.js CHANGED
@@ -120,10 +120,7 @@ export class DateInput {
120
120
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
121
121
  }
122
122
  return h("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el },
123
- h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` },
124
- this.displayName,
125
- " ",
126
- this.validation.mandatory ? '*' : ''),
123
+ h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName),
127
124
  h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }),
128
125
  h("small", { class: 'date__error-message' }, this.errorMessage),
129
126
  this.tooltip &&
package/dist/collection/components/email-input/email-input.css CHANGED
@@ -13,6 +13,10 @@
13
13
  .email__wrapper {
14
14
  position: relative;
15
15
  width: 100%;
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: 5px;
19
+ height: 100%;
16
20
  }
17
21
  .email__wrapper--autofilled {
18
22
  pointer-events: none;
@@ -20,7 +24,7 @@
20
24
  .email__wrapper--autofilled .email__label {
21
25
  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
22
26
  }
23
- .email__wrapper--autofilled .email__input {
27
+ .email__wrapper--autofilled .email__input::part(input-field) {
24
28
  color: var(--emfe-w-color-black, #000000);
25
29
  }
26
30
  .email__wrapper--flex {
@@ -46,20 +50,20 @@
46
50
  }
47
51
  .email__input {
48
52
  font-family: inherit;
49
- border-radius: 4px;
50
53
  width: 100%;
51
- height: 40px;
52
- border: 2px solid var(--emfe-w-color-gray-100, #E6E6E6);
54
+ height: 44px;
55
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
56
+ background-color: var(--emfe-w-color-white, #FFFFFF);
53
57
  color: var(--emfe-w-color-black, #000000);
54
58
  border-radius: 5px;
55
- box-sizing: border-box;
56
59
  font-size: 16px;
57
60
  font-weight: 300;
58
61
  line-height: 1.5;
59
- padding: 10px;
62
+ padding: 5px 15px;
60
63
  }
61
64
  .email__input:focus {
62
- outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
65
+ border: 1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
66
+ outline-color: var(--emfe-w-color-primary, #D0046C);
63
67
  }
64
68
  .email__input--invalid {
65
69
  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
package/dist/collection/components/email-input/email-input.js CHANGED
@@ -120,7 +120,7 @@ export class EmailInput {
120
120
  render() {
121
121
  let invalidClass = '';
122
122
  if (this.touched) {
123
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
123
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
124
124
  }
125
125
  return h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el },
126
126
  h("div", { class: 'email__wrapper--flex' },