@everymatrix/general-input 1.22.2 → 1.22.10

package/dist/collection/components/password-input/password-input.css

@@ -18,10 +18,10 @@
   pointer-events: none;
 }
 .password__wrapper--autofilled .password__label {
-  color: #979797;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .password__wrapper--autofilled .password__input::part(input-field) {
-  color: #979797;
+  color: var(--emfe-w-color-black, #000000);
 }
 .password__wrapper--flex {
   display: flex;
@@ -36,12 +36,12 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
-  color: #2A3841;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .password__label--required::after {
   content: "*";
   font-family: inherit;
-  color: #2A3841;
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
   margin-left: 2px;
 }
 .password__input {
@@ -50,32 +50,32 @@
   margin-bottom: 5px;
 }
 .password__input[focused]::part(input-field) {
-  border-color: #3E3E3E;
+  outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .password__input[invalid]::part(input-field) {
-  border-color: #cc0000b3;
+  border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .password__input::part(input-field) {
-  border-radius: 4px;
+  border-radius: 5px;
+  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);
   background-color: transparent;
   font-family: inherit;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 19px;
-  color: #2A2E3F;
-  width: 100%;
   position: relative;
-  border: 2px solid #DEE1EE;
 }
 .password__input > input:placeholder-shown {
-  color: #979797;
+  color: var(--emfe-w-color-gray-150, #828282);
 }
 .password__error-message {
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .password__complexity {
   position: relative;
@@ -86,10 +86,10 @@
   justify-content: center;
   margin-top: 20px;
   font-weight: 300;
-  background: #FFFFFF;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
+  background: var(--emfe-w-color-white, #FFFFFF);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
   height: 150px;
   border: 1px solid #B0B0B0;
 }
@@ -98,7 +98,7 @@
   justify-content: space-evenly;
 }
 .password__complexity--strength meter::-webkit-meter-optimum-value {
-  background: #1F1F1F;
+  background: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .password__complexity--strength meter::-moz-meter-bar {
   /* Firefox Pseudo Class */
@@ -118,16 +118,16 @@
   position: absolute;
   width: 25px;
   height: 25px;
-  border-top: 1px solid #B0B0B0;
-  border-right: 0 solid #B0B0B0;
-  border-left: 1px solid #B0B0B0;
-  border-bottom: 0 solid #B0B0B0;
+  border-top: 1px solid var(--emfe-w-color-gray-150, #828282);
+  border-right: 0 solid var(--emfe-w-color-gray-150, #828282);
+  border-left: 1px solid var(--emfe-w-color-gray-150, #828282);
+  border-bottom: 0 solid var(--emfe-w-color-gray-150, #828282);
   bottom: 92%;
   left: 50%;
   margin-left: -25px;
   transform: rotate(45deg);
   margin-top: -25px;
-  background-color: #FFFFFF;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
 }
 .password__tooltip-icon {
   width: 16px;
@@ -137,8 +137,8 @@
   position: absolute;
   top: 0;
   left: 20px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  border: 1px solid var(--emfe-w-color-gray-150, #828282);
   color: #2B2D3F;
   padding: 10px;
   border-radius: 5px;

package/dist/collection/components/radio-input/radio-input.css

@@ -18,7 +18,7 @@
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .radio__tooltip-icon {
   position: absolute;
@@ -29,9 +29,9 @@
   position: absolute;
   bottom: 35px;
   right: 10px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  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;

package/dist/collection/components/select-input/select-input.css

@@ -18,10 +18,10 @@
   pointer-events: none;
 }
 .select__wrapper--autofilled .select__label {
-  color: #979797;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .select__wrapper--autofilled .select__input::part(input-field) {
-  color: #979797;
+  color: var(--emfe-w-color-black, #000000);
 }
 .select__wrapper--flex {
   display: flex;
@@ -36,12 +36,12 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
-  color: #2A3841;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .select__label--required::after {
   content: "*";
   font-family: inherit;
-  color: #2A3841;
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
   margin-left: 2px;
 }
 .select__input {
@@ -50,23 +50,22 @@
   position: relative;
 }
 .select__input[focused]::part(input-field) {
-  border-color: #3E3E3E;
+  border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .select__input[invalid]::part(input-field) {
-  border-color: #cc0000b3;
+  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .select__input vaadin-date-picker-overlay-content > vaadin-button {
-  color: #1F1F1F;
+  color: var(--emfe-w-color-black, #000000);
 }
 .select__input vaadin-month-calendar::part(selected date) {
-  background-color: red;
+  background-color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .select__input::part(input-field) {
-  border-radius: 4px;
-  background-color: #FFFFFF;
-  border: 2px solid #DEE1EE;
-  color: #2A2E3F;
-  border-radius: 4px;
+  border-radius: 5px;
+  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);
   background-color: transparent;
   font-family: inherit;
   font-style: normal;
@@ -78,7 +77,7 @@
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .select__tooltip-icon {
   width: 16px;
@@ -88,9 +87,9 @@
   position: absolute;
   top: 0;
   left: 20px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  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;

package/dist/collection/components/tel-input/tel-input.css

@@ -18,23 +18,23 @@
   pointer-events: none;
 }
 .tel__wrapper--autofilled .tel__label {
-  color: #979797;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .tel__wrapper--autofilled .tel__input::part(input-field) {
-  color: #979797;
+  color: var(--emfe-w-color-black, #000000);
 }
 .tel__wrapper--flex {
   width: inherit;
   display: flex;
   align-items: stretch;
   border-radius: 4px;
-  border: 2px solid #DEE1EE;
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
 }
 .tel__wrapper--flex:focus-within {
-  border: 2px solid #3E3E3E;
+  outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .tel__wrapper--flex--invalid {
-  border: 2px solid #cc0000b3;
+  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .tel__wrapper--flex-label {
   display: flex;
@@ -49,12 +49,12 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
-  color: #2A3841;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .tel__label--required::after {
   content: "*";
   font-family: inherit;
-  color: #2A3841;
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
   margin-left: 2px;
 }
 .tel__prefix {
@@ -64,9 +64,9 @@
   outline: none;
 }
 .tel__prefix::part(input-field) {
-  border-radius: 0 4px 4px 0;
-  background-color: #DEE1EE;
-  color: #1F1F1F;
+  border-radius: 0 5px 5px 0;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  color: var(--emfe-w-color-black, #000000);
   font-family: inherit;
   font-style: normal;
   font-weight: 300;
@@ -74,14 +74,12 @@
   line-height: 19px;
 }
 .tel__input {
-  border-radius: 4px;
-  background-color: transparent;
   font-family: inherit;
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 19px;
-  color: #2A2E3F;
+  border-radius: 5px;
+  width: 100%;
+  height: 44px;
+  color: var(--emfe-w-color-black, #000000);
+  background-color: transparent;
   border: none;
   padding: 10px 20px;
   width: inherit;
@@ -101,7 +99,7 @@
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .tel__tooltip-icon {
   width: 16px;
@@ -111,9 +109,9 @@
   position: absolute;
   top: 0;
   left: 20px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  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;

package/dist/collection/components/text-input/text-input.css

@@ -18,10 +18,10 @@
   pointer-events: none;
 }
 .text__wrapper--autofilled .text__label {
-  color: #979797;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .text__wrapper--autofilled .text__input::part(input-field) {
-  color: #979797;
+  color: var(--emfe-w-color-black, #000000);
 }
 .text__wrapper--flex {
   display: flex;
@@ -36,42 +36,41 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
-  color: #2A3841;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
 }
 .text__label--required::after {
   content: "*";
   font-family: inherit;
-  color: #2A3841;
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
   margin-left: 2px;
 }
 .text__input {
-  border-radius: 4px;
-  background-color: transparent;
   font-family: inherit;
-  font-style: normal;
-  font-weight: 300;
+  border-radius: 5px;
+  width: 100%;
+  height: 44px;
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  color: var(--emfe-w-color-black, #000000);
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 5px 15px;
   font-size: 16px;
-  line-height: 19px;
-  color: #2A2E3F;
-  padding: 10px 20px;
-  width: inherit;
-  position: relative;
-  border: 2px solid #DEE1EE;
+  line-height: 18px;
 }
 .text__input:focus {
-  outline-color: #3E3E3E;
+  outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
 }
 .text__input--invalid {
-  border: 2px solid #cc0000b3;
+  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .text__input::placeholder {
-  color: #979797;
+  color: var(--emfe-w-color-gray-150, #828282);
 }
 .text__error-message {
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .text__tooltip-icon {
   width: 16px;
@@ -81,9 +80,9 @@
   position: absolute;
   top: 0;
   left: 20px;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  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;

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css

@@ -32,7 +32,7 @@
   font-family: inherit;
   font-weight: 400;
   font-size: 16px;
-  color: #2B2D3F;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
   line-height: 14px;
 }
 .togglecheckbox__label-text {
@@ -42,7 +42,7 @@
   position: absolute;
   top: calc(100% + 5px);
   left: 0;
-  color: #cc0000b3;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
 }
 .togglecheckbox__tooltip-icon {
   width: 16px;
@@ -52,9 +52,9 @@
   position: absolute;
   top: 0;
   right: 0;
-  background-color: #FFFFFF;
-  border: 1px solid #B0B0B0;
-  color: #2B2D3F;
+  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;

package/dist/collection/index.js

@@ -1 +1,17 @@
+function safeDecorator(fn) {
+  // eslint-disable-next-line func-names
+  return function (...args) {
+    try {
+      return fn.apply(this, args);
+    }
+    catch (error) {
+      if (error instanceof DOMException &&
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
+        return false;
+      }
+      throw error;
+    }
+  };
+}
+customElements.define = safeDecorator(customElements.define);
 export * from './components';

package/dist/components/active-mixin.js

@@ -1,4 +1,4 @@
-import { n as microTask, a as DisabledMixin, K as KeyboardMixin } from './field-mixin.js';
+import { m as microTask, a as DisabledMixin, K as KeyboardMixin } from './field-mixin.js';
 
 /**
 @license

package/dist/components/checkbox-group-input2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
-import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, b as isElementFocused, L as LabelMixin, c as DelegateFocusMixin, e as InputController, f as LabelledInputController, h as html, T as TooltipController, g as defineCustomElement$1, E as ElementMixin, j as ThemableMixin, P as PolymerElement, k as requiredField, l as helper, F as FieldMixin, m as FocusMixin, S as SlotObserver } from './field-mixin.js';
+import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, L as LabelMixin, b as DelegateFocusMixin, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, E as ElementMixin, g as ThemableMixin, P as PolymerElement, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, S as SlotObserver } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
 registerStyles(
@@ -206,12 +206,6 @@ const CheckedMixin = dedupingMixin(
         const input = event.target;
 
         this._toggleChecked(input.checked);
-
-        // Clicking the checkbox or radio-button in Safari
-        // does not make it focused, so we do it manually.
-        if (!isElementFocused(input)) {
-          input.focus();
-        }
       }
 
       /** @protected */
@@ -265,6 +259,18 @@ const CheckboxMixin = (superclass) =>
           type: String,
           value: '',
         },
+
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @override
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -925,7 +931,7 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
 
 defineCustomElement$1(CheckboxGroup);
 
-const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}";
+const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__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:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__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}.checkboxgroup__tooltip.visible{opacity:1}";
 
 const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/checkbox-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
+const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__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:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}";
 
 const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/date-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate$1, a as tooltipIconSvg } from './tooltipIcon.js';
 import { i as inputFieldShared, a as isFirefox, I as InputConstraintsMixin, b as isIOS, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { i, r as registerStyles, h as html, g as defineCustomElement$1, o as DirMixin, j as ThemableMixin, P as PolymerElement, p as Debouncer$1, t as timeOut, q as generateUniqueId, d as dedupingMixin, s as PropertyEffects, w as wrap, u as strictTemplatePolicy, v as legacyWarnings, x as legacyOptimizations, y as useShadow, z as suppressTemplateNotifications, A as timeOut$1, B as microTask, C as matches, G as translate, m as FocusMixin, H as SlotController, J as ControllerMixin, c as DelegateFocusMixin, K as KeyboardMixin, e as InputController, f as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
+import { i, r as registerStyles, h as html, f as defineCustomElement$1, n as DirMixin, g as ThemableMixin, P as PolymerElement, o as Debouncer$1, t as timeOut, p as generateUniqueId, d as dedupingMixin, q as PropertyEffects, w as wrap, s as strictTemplatePolicy, u as legacyWarnings, v as legacyOptimizations, x as useShadow, y as suppressTemplateNotifications, z as timeOut$1, A as microTask, B as matches, C as translate, l as FocusMixin, G as SlotController, H as ControllerMixin, b as DelegateFocusMixin, K as KeyboardMixin, c as InputController, e as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
 import { m as menuOverlay, P as PositionMixin, O as OverlayMixin, o as overlayStyles, a as afterNextRender, b as OverlayClassMixin, V as VirtualKeyboardController, h as hideOthers } from './virtual-keyboard-controller.js';
 import './vaadin-button.js';
 import { a as addListener, s as setTouchAction } from './active-mixin.js';
@@ -11392,7 +11392,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   return date.getTime() < dateToCompare.getTime();
 }
 
-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%;padding-top:26px}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:#979797}.date__wrapper--autofilled .date__input::part(input-field){color:#979797}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.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:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
+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%;padding-top:26px}.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));position:absolute;top:0;left:0}.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){outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border-color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px}.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}";
 
 const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/components/email-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-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:#979797}.email__wrapper--autofilled .email__input{color:#979797}.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:#2A3841}.email__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__input::placeholder{color:#979797}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
+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:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px;position:relative}.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}";
 
 const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/field-mixin.js

@@ -38,7 +38,7 @@ class Lumo extends HTMLElement {
   }
 
   static get version() {
-    return '24.2.3';
+    return '24.2.5';
   }
 }
 
@@ -9065,7 +9065,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.3';
+      return '24.2.5';
     }
 
     /** @protected */
@@ -12423,4 +12423,4 @@ const FieldMixin = (superclass) =>
     }
   };
 
-export { timeOut$1 as A, microTask$1 as B, matches as C, DelegateStateMixin as D, ElementMixin as E, FieldMixin as F, translate as G, SlotController as H, InputMixin as I, ControllerMixin as J, KeyboardMixin as K, LabelMixin as L, getDeepActiveElement as M, getFocusableElements as N, getAncestorRootNodes as O, PolymerElement as P, TabindexMixin as Q, idlePeriod as R, SlotObserver as S, TooltipController as T, animationFrame as U, ValidateMixin as V, flush as W, enqueueDebouncer as X, DisabledMixin as a, isElementFocused as b, DelegateFocusMixin as c, dedupingMixin as d, InputController as e, LabelledInputController as f, defineCustomElement as g, html as h, i$1 as i, ThemableMixin as j, requiredField as k, helper as l, FocusMixin as m, microTask as n, DirMixin as o, Debouncer as p, generateUniqueId as q, registerStyles as r, PropertyEffects as s, timeOut as t, strictTemplatePolicy as u, legacyWarnings as v, wrap as w, legacyOptimizations as x, useShadow as y, suppressTemplateNotifications as z };
+export { microTask$1 as A, matches as B, translate as C, DelegateStateMixin as D, ElementMixin as E, FieldMixin as F, SlotController as G, ControllerMixin as H, InputMixin as I, getDeepActiveElement as J, KeyboardMixin as K, LabelMixin as L, getFocusableElements as M, isElementFocused as N, getAncestorRootNodes as O, PolymerElement as P, TabindexMixin as Q, idlePeriod as R, SlotObserver as S, TooltipController as T, animationFrame as U, ValidateMixin as V, flush as W, enqueueDebouncer as X, DisabledMixin as a, DelegateFocusMixin as b, InputController as c, dedupingMixin as d, LabelledInputController as e, defineCustomElement as f, ThemableMixin as g, html as h, i$1 as i, requiredField as j, helper as k, FocusMixin as l, microTask as m, DirMixin as n, Debouncer as o, generateUniqueId as p, PropertyEffects as q, registerStyles as r, strictTemplatePolicy as s, timeOut as t, legacyWarnings as u, legacyOptimizations as v, wrap as w, useShadow as x, suppressTemplateNotifications as y, timeOut$1 as z };

package/dist/components/general-input2.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './select-input2.js';
 import { d as defineCustomElement$3 } from './tel-input2.js';
 import { d as defineCustomElement$2 } from './text-input2.js';
 
-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:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;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}";
+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:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.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:14px}.togglecheckbox__label-text{font-size:16px}.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}";
 
 const ToggleCheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/index.js

@@ -1 +1,18 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+
+function safeDecorator(fn) {
+  // eslint-disable-next-line func-names
+  return function (...args) {
+    try {
+      return fn.apply(this, args);
+    }
+    catch (error) {
+      if (error instanceof DOMException &&
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
+        return false;
+      }
+      throw error;
+    }
+  };
+}
+customElements.define = safeDecorator(customElements.define);

package/dist/components/input-field-shared-styles.js

@@ -1,4 +1,4 @@
-import { r as registerStyles, i, g as defineCustomElement, j as ThemableMixin, o as DirMixin, P as PolymerElement, h as html, k as requiredField, l as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, c as DelegateFocusMixin, F as FieldMixin, p as Debouncer, t as timeOut } from './field-mixin.js';
+import { r as registerStyles, i, f as defineCustomElement, g as ThemableMixin, n as DirMixin, P as PolymerElement, h as html, j as requiredField, k as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, b as DelegateFocusMixin, F as FieldMixin, o as Debouncer, t as timeOut } from './field-mixin.js';
 
 registerStyles(
   'vaadin-input-container',